Quelques grandes lignes (de code)
--> Présentation des gros blocs
Cet article contient une description sommaire de la structure d'une page web et explique quels sont les principaux blocs qui constituent ce joueb. Je conseille au plus courageux d'entre vous de jeter un coup d'œil au code source. Le code a été généré à partir d'une version très modifiée de la page par défaut d'un joueb.
Donc, commençons lentement. Une page HTML commence par une balise <html> et se termine par une balise </html>. Elle est constitué de deux grosses partie :
- L'en-tête du fichier (entre les balises
<head>et</head>qui contient des informations n'apparraissant pas dans la page elle-même ; - Le contenu de la page à afficher, situé entre la balise
<body>et la balise</body>.
La première partie contient entre autre tout ce qui concerne la mise ne page à entre les balises style, qu'on verra beaucoup plus tard. En dehors de cette partie, les autres informations données sont le titre du site et l'adresse du fil RSS. Cela est déjà présent dans le modèle par défaut et ne devrait pas être modifié.
C'est la deuxième partie qui est la plus intéressante pour l'instant puisqu'elle contient ce qui sera affiché. La page est divisé en plusieurs bloc. Aujourd'hui, on va juste les lister et expliquer brièvement ce qu'lis contiennt. On reviendra dans les billets suivants sur le contenu dchacun d'eux.
Dans la partie body de notre age, on a donc les blocs suivants:
- Un bloc qui contient le titre et le sous-titre du joueb délimité par les balises
<div id="titre">et</div>. La valeur de l'attributidest unique et nous permettra par la suite d'appliquer facilement un style à ce menu en particulier.. - Un bloc contenant le menu permettant de proposer des articles etc... Lui est situé entre la balise
<div id="topMenu">et la balise</div>. Même remarque concernant l'attributidqui nous permettra par la suite d'appliquer facilement un style à ce menu en particulier. - On trouve ensuite un bloc contenant les artcles qui se trouve lui entre les balises
<div id="main">et<div>. Là aussi, l'identifiant uniquemainpermettra de lui donner un style particulier. - On a ensuite le menu contenant les différents blocs de liens, situé entre les balises
<div id="blocks">et</div>. Là aussi, on utilise un identifiant. - Enfin, on trouve les informations situés en bas de page entre les balises suivantes:
<div id="footer">et</div>.
Ouf ! Voilà donc les principaux blocs de notre page. Pour résumer, notre page à l'allure suivante:
<html> <head> ... </head>
<body> <div id="titre"> ... </div> <div id="topMenu"> ... </div> <div id="main"> ... </div> <div id="blocks"> ... </div> <div id="footer"> ... </div> </body> </html>
Prochaine étape, regarder ce qu'il y a à la place de tout ces points de suspension. La route est longue, jeune padawan.
Ecrit par be-rewt, le Jeudi 2 Octobre 2003, 13:53 dans la rubrique "Comment faire ?".
Commentaires
Super :-)
OdeNice
02-10-03 à 15:03
J'aime cette mise en page sobre :-)
Pourra-t'on l'utiliser ? Changer les couleurs ? (je les trouve un peu tristounette), ajouter des images, des fonds de pages ?...
Pour moi qui suis un débutant, pardon, un jeune padawan ;-), je trouve tes explications claires, elles m'aident à comprendre le fonctionnement et la réalisation d'un joueb. Merci
"Je conseille au plus courageux d'entre vous de jeter un coup d'œil au code source"
J'ai fait [clique droit] sur la page et [afficher code source] sur la page "Ajouter un commentaire"
Je dois avouer que je suis légèrement désappointé ;-)
si je reconnais quelques balises, je dois dire que beaucoup d'autres me sont totalement inconnues...
J'attends avec impatience la suite :-)
Si je fais [clique droit] sur la page principale, le code source sera t'il différent ?
Puis-je sauvegarder ces pages "code source" sur ma machine ?
en tout cas merci
Repondre a ce commentaire
Re: Super :-)
be-rewt
02-10-03 à 18:38
Le but est effctivement d'en faire un modèle de mise en page pour les jouebs utilisables par Biz. Dans l'état actuel des choses, il reste à régler quelques problèmes d'incompatibilité et de vérifier le fonctionnement des sondages. Les couleurs sont déjà configurables et le choix des bloc aussi.
Oui, le code source sera différent sur la page principale: normal, on y affiche pas la même chose. Oui, le code source est sauvegardable, il suffit d'enregistrer la page web et de l'ouvrir avec un éditeur de texte au lieu de l'ouvrir avec le navigateur. Pour ce qui est des balises, on va y arriver, il faut que je prenne mon courage à 2 mains.
Merci pour ces encouragements en tout cas.
Repondre a ce commentaire