L'architecture d'une page HTML Bon. Tout cela est bien joli, mais qu'est-ce qu'on y met comme balises dans notre page ? Et puis, n'importe où les balises ? Et dans n'importe quel ordre ?
Eh bien, non, pas tout à fait. D'abord, ces balises ne doivent pas s'entrelacer mais s'imbriquer. Je m'explique : imaginons les balises d'ouverture <A>, <B> et <C> et leurs sœurs jumelles de fermeture </A>, </B> et </C>.
Vous mettez en place la première balise d'ouverture en début de page et la balise de fermeture correspondante en fin de page. Entre les deux, vous insérez la deuxième balise en ouverture et en fermeture. Même principe pour une troisième paire de balise.
Exemple : page-03.htm
Ne vous formalisez pas, ce sera plus clair avec des vrais noms de balises. Justement, quels sont-ils ? Voyons en premier, ce que j'appellerai les grandes balises générales. Elles sont au nombre de quatre (paires) :
<HTML> et </HTML> déterminent qu'il s'agit d'un document HTML, c'est-à-dire d'une page comme celle que vous êtes en train de visualiser en ce moment.
<HEAD> et </HEAD> déterminent l'en-tête de votre page HTML. On y met des trucs du genre "mots-clés", "type de langage", "nom de l'auteur", etc.
<TITLE> et </TITLE>. Ici, on met le titre que l'on veut donner à la page. Lorsque vous créerez un signet (on dit aussi un favori), il portera le libellé du titre.
<BODY> et </BODY>. C'est ici, entre ces deux balises qui constituent le corps de votre page, que vous placerez votre baratin.
Et maintenant, on passe aux choses sérieuses. Toutes vos pages seront toujours architecturées au minimum de la manière suivante (notez l'imbrication des balises) :
Eh bien, non, pas tout à fait. D'abord, ces balises ne doivent pas s'entrelacer mais s'imbriquer. Je m'explique : imaginons les balises d'ouverture <A>, <B> et <C> et leurs sœurs jumelles de fermeture </A>, </B> et </C>.
Vous mettez en place la première balise d'ouverture en début de page et la balise de fermeture correspondante en fin de page. Entre les deux, vous insérez la deuxième balise en ouverture et en fermeture. Même principe pour une troisième paire de balise.
Exemple : page-03.htm
Ne vous formalisez pas, ce sera plus clair avec des vrais noms de balises. Justement, quels sont-ils ? Voyons en premier, ce que j'appellerai les grandes balises générales. Elles sont au nombre de quatre (paires) :
<HTML> et </HTML> déterminent qu'il s'agit d'un document HTML, c'est-à-dire d'une page comme celle que vous êtes en train de visualiser en ce moment.
<HEAD> et </HEAD> déterminent l'en-tête de votre page HTML. On y met des trucs du genre "mots-clés", "type de langage", "nom de l'auteur", etc.
<TITLE> et </TITLE>. Ici, on met le titre que l'on veut donner à la page. Lorsque vous créerez un signet (on dit aussi un favori), il portera le libellé du titre.
<BODY> et </BODY>. C'est ici, entre ces deux balises qui constituent le corps de votre page, que vous placerez votre baratin.
Et maintenant, on passe aux choses sérieuses. Toutes vos pages seront toujours architecturées au minimum de la manière suivante (notez l'imbrication des balises) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>La première page</TITLE> </HEAD> <BODY> Ici se situera tout le contenu de la page... </BODY> </HTML>
La première ligne de cette codification est celle qui définit le type et la version du document HLML. Ici, il s'agit de la version 4.01 transitoire, c'est-à-dire la version 4.01 stricte mais des balises jugées obsolètes peuvent être utilisées: on y gagne en souplesse de travail.
Maintenant, on peut affiner la balise <HEAD> à l'aide d'une balise secondaire <META> qui n'a pas de sœur jumelle de fermeture, et qui s'affine aussi grâce à des balises tertiaires, comme ceci :
Maintenant, on peut affiner la balise <HEAD> à l'aide d'une balise secondaire <META> qui n'a pas de sœur jumelle de fermeture, et qui s'affine aussi grâce à des balises tertiaires, comme ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Author" content="Philippe Balança"> <META name="Description" lang="fr" content="Internet, c'est prise de tête"> <META name="Keywords" lang="fr" content="html, créer, astuces, webmaster"> <META name="Generator" content="Notepad"> <TITLE>La première page</TITLE> </HEAD> <BODY> Ici se situera tout le contenu de la page... </BODY> </HTML>
Explications :
• la balise <META http-equiv="" content=""> définit le type de langage utilisé pour du HTML contenant les codes de caractères français (c'est-à-dire accentués) ;
• la balise <META name="" content=""> sert pour l'indexation dans les moteurs de recherches en restituant le nom de l'auteur ;
• la première balise <META name="" lang="" content=""> sert aussi pour l'indexation dans les moteurs de recherches en restituant la phrase contenue dans l'élément content="" associé à la valeur contenue dans l'élément name="" ;
• de même, la seconde balise <META name="" lang="" content=""> sert encore pour l'indexation dans les moteurs de recherches en réagissant aux mots-clés contenus dans l'élément content="" associé à la valeur contenue dans l'élément name="" ;
• la dernière balise <META name="" content=""> renseigne sur l'outil qui a servi à créer votre page ;
• entre les balises <TITLE> et </TITLE>, vous indiquerez le titre de votre page.
Pour vous simplifier la tâche, et puisqu'une page HTML - au départ - contient toujours la même chose, prélevez le contenu de l'exemple ci-après pour créer votre modèle de démarrage. Copiez ce contenu dans un éditeur de texte quelconque (par exemple Notepad ou SimpleText) et sauvegardez votre document avec une extension ".htm".
Exemple : page-04.htm
Vérification :
Lorsque votre page sera terminée, vous avez la possibilité de vérifier sa syntaxe HTML en y insérant un lien (que vous pourrez enlever ensuite) qui sera rédigé comme suit :
• la balise <META http-equiv="" content=""> définit le type de langage utilisé pour du HTML contenant les codes de caractères français (c'est-à-dire accentués) ;
• la balise <META name="" content=""> sert pour l'indexation dans les moteurs de recherches en restituant le nom de l'auteur ;
• la première balise <META name="" lang="" content=""> sert aussi pour l'indexation dans les moteurs de recherches en restituant la phrase contenue dans l'élément content="" associé à la valeur contenue dans l'élément name="" ;
• de même, la seconde balise <META name="" lang="" content=""> sert encore pour l'indexation dans les moteurs de recherches en réagissant aux mots-clés contenus dans l'élément content="" associé à la valeur contenue dans l'élément name="" ;
• la dernière balise <META name="" content=""> renseigne sur l'outil qui a servi à créer votre page ;
• entre les balises <TITLE> et </TITLE>, vous indiquerez le titre de votre page.
Pour vous simplifier la tâche, et puisqu'une page HTML - au départ - contient toujours la même chose, prélevez le contenu de l'exemple ci-après pour créer votre modèle de démarrage. Copiez ce contenu dans un éditeur de texte quelconque (par exemple Notepad ou SimpleText) et sauvegardez votre document avec une extension ".htm".
Exemple : page-04.htm
Vérification :
Lorsque votre page sera terminée, vous avez la possibilité de vérifier sa syntaxe HTML en y insérant un lien (que vous pourrez enlever ensuite) qui sera rédigé comme suit :
<A href="http://validator.w3.org/check?uri=votre_url target='_blank'">Vérif</A>
Exemple : Vérif
© 1999-2010 PhB - www.pictavie.net
