Fiche HTML : Généralités sur les balises.Objet de la ficheÉtat de la fichePlan de la fiche
Avant proposNous avons aperçu en fin d'étape précédente que le principe de base pour la création d'une page Web était de fabriquer un fichier dans lequel nous mettons notre contenu (texte puis plus tard des images, des formulaires ....) mais aussi et surtout des balises (langage HTML) qui encadrent le contenu de façon à le rendre compréhensible et donc affichable par les différents navigateurs. Rappels sur les balises : Le principe de base est donc d'encadrer des parties d'un texte ou des bloc de textes, de sigles particuliers (ne faisant pas partie du contenu proprement dit du texte) et ensuite d'utiliser un logiciel (un navigateur dans notre cas) qui va lire le fichier, décoder les sigles et ainsi afficher les contenus structurés. Ceci n'est pas nouveau car la plupart des traitements de texte peuvent être assimilés à des langages à balises. Exemple : lorsque vous créer un texte sous Word, vous pouvez mettre des parties de texte en gras, les souligner, les rassembler en paragraphe, changer les polices de caractères et les couleurs etc. Que fait le traitement de texte? : il place automatiquement des repères dans le fichier. Lorsque vous voulez relire ce fichier vous devez utiliser le traitement de texte Word car lui seul pourra décoder son système de repères et restituer votre document tel que vous l'aviez structuré. Nous allons ici découvrir un peu plus en détails le mécanisme et l'utilisation simplifiées de quelques balises appliquées aux documents HTML. Généralités sur les balises
Dans les documents qui vont suivre nous allons parler
d’éléments, de balises et d’attributs. Ces notions ont leur sens
propre en XHTML, sens que nous allons préciser :
StructureLes balises se décomposent globalement en 2 catégories : les balises de type bloc et les balises en ligne: 1. Les balises de type BLOC comme les balises <p>, <ul>, <li>, <div>, <h1>...<h6>,...Les blocs se placent toujours l'un en dessous de l'autre (en effectuant un saut de ligne automatiquement). Par exemple : une suite de paragraphes une liste ou une partie bien précise de la page. La balise de base <body> peut être considérée comme une balise de type bloc englobant l'ensemble du document. Ces éléments de rendu "bloc" servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des citations, etc. 2. Les balises de type EN LIGNE comme <a>, <b>, <em>, <span>, <img>,... se placent toujours l'une à côté de l'autre (pas de saut de ligne automatique). Ces éléments sont prévus pour rester dans le texte pour l'enrichir (lien hypertexte, emphase, renforcement, etc.).
Au niveau structurel et imbrications
une balise BLOC peut contenir une (ou plusieurs) balise
BLOC et/ou EN LIGNE, et peut avoir une dimension
(largeur, hauteur définies) La mise en page se fera donc à l'aide de balises blocs. La balise <div> est la plus indiquée pour cet usage. C'est une balise neutre servant de conteneur qui désigne une boite rectangulaire invisible configurable à souhait (position, couleurs, tailles,...). Imbrication
En règle générale, un élément de type BLOC peut contenir une (ou
plusieurs) balises block et/ou inline, sauf exceptions.
Exemples d'imbrications valide : Exemple d'imbrication non valide : <span><p>Paragraphe 1</p><p>Paragraphe 2</p></span> car la balise span est de type En ligne et par conséquent ne peut contenir de balise Bloc (<p>). Positionnement par défaut des élémentsLes éléments de type bloc se placent toujours l'un en dessous de
l'autre par défaut . Ils introduisent systématiquement un retour à
la ligne. Un élément "bloc" occupe automatiquement, par
défaut, toute la largeur disponible de son conteneur. Nous allons voir ici le mécanisme d'utilisation de quelques balises usuelles, le but est uniquement de comprendre le principe. Les autres balises seront explicitées au fur et à mesure de nos besoins. Les balises par l'exempleSoit les textes suivants tirés de la déclaration universelle des droits de l'homme et sur lesquels nous avons appliqué quelques balises usuelles que nous allons expliciter pour bien en préciser le mécanisme. <h2>Deux articles de la déclaration universelle</h2> <div> <h3>Liste des articles</h3>
<hr /> <h3>Article 6</h3> <p>La loi est l'expression de la volonté générale. <b>Tous les citoyens ont <u>droit</u> de concourir personnellement</b> ou par leurs représentants à sa formation. Elle doit être la même pour tous, <i><b>soit qu'elle protège, soit qu'elle punisse.</b></i> Tous les citoyens, étant égaux à ses yeux, sont également admissibles à toutes dignités, places et emplois publics, selon leur capacité et sans autre distinction que celle de leurs vertus et de leurs talents.</p> <h3>Article 11</h3> <p>La libre communication des pensées et des opinions est un des droits les plus précieux de l'homme ; tout citoyen peut donc parler, écrire, imprimer librement, sauf à répondre de l'abus de cette liberté dans les cas déterminés par la loi.</p> </div> <div> <h2>Deux autres articles de la déclaration universelle</h2> <p>Le principe de toute souveraineté réside essentiellement dans la Nation. Nul corps, nul individu ne peut exercer d'autorité qui n'en émane expressément.<br />La liberté consiste à pouvoir faire tout ce qui ne nuit pas à autrui : ainsi, l'exercice des droits naturels de chaque homme n'a de bornes que celles qui assurent aux autres membres de la société la jouissance de ces mêmes droits Ces bornes ne peuvent être déterminées que par la loi.</p> </div> Voyons ce que donne le fichier ci-dessus après lecture par le navigateur. Analyse des différentes balises utilisées dans l'exemple précédent.La balise <b> : Marquer en gras une partie de texte.
<b>soit qu'elle protège, soit qu'elle punisse.</b> La balise <u> : Souligner une partie de texte.
<u>droit</u> La balise <i> : Mettre en italique une partie de texte.
<i><b>soit qu'elle protège, soit qu'elle punisse.</b></i> La balise <br /> : Introduire un retour à la ligne suivante.
..... expressément.<br>La liberté ....... La balise <hr /> : Introduire une ligne horizontale
La balise <p> : Délimitation d'un paragraphe
<p>Le principe de .......que par la loi.</p> La balise <hx> : Titre pré formaté
<h2>Deux autres articles de la déclaration universelle</h2> La balise <ul> et sa sous balise <li>: Crée une liste non ordonnée
<ul>
La balise <div> : Délimitation d'un bloc
<div>..<p>..<b>..</b>..</p>..<div>..<ul><li>...</li></ul><h2> .....</h2></div></div> Autres exemplesLes balises <h><h1>Le système solaire avec h1 </h1> Les balises <p>je veux écrire comme paragraphe puis, je veux écrire un premier paragraphe "je suis le texte 1" et un deuxième paragraphe "et moi je suis le texte 2" La balise <img >pour insérer une image Présentation d'une Page HTMLIndentationLes navigateurs lorsqu'ils lisent les pages html ne sont pas sensibles aux tabulations, aux retours et sauts de ligne de l'éditeur de texte, ni aux espaces en série (plusieurs espaces qui se suivent sont ignorés et interprétés comme un seul, de même pour les tabulations qui sont transformées en un espace). Pour forcer plusieurs espaces à l'intérieur d'un texte il faut utiliser, à la place de la barre d'espacement, la chaîne de contrôle ( espace protégé ) aussi souvent à la suite l'un de l'autre que l'espace désiré doit être grand. Cela revient à dire que la présentation 1 ci-dessous est parfaitement valable mais peu lisible. La présentation 2 avec les balises alignées verticalement donne un peu plus de clarté mais c'est le type de présentation 3 qu'il faut privilégier : on obtient par ce mode indentée une vue immédiate des différentes imbrications et l'on peut se rendre compte très rapidement si une balise de fermeture a été oubliée.
Commentez votre page HTMLDes commentaires peuvent être placés n'importe où dans le
document, mais à l'extérieur de tout autre balise. Cela permet
une plus grande lisibilité de votre page HTML pour vous même mais
aussi pour les personnes qui peuvent être amenées à modifier cette
page. Quelques règles de syntaxe doivent être observées :
Les caractères HTML spéciauxLes normes HTML demandent de respecter le codage des caractères
ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas
autorisés. Prendre les bonnes habitudesJe fais très attention à la présentation de ma page HTML :
Application au projet de site web
CorrectionVoici le résultat et le code RemarquesCertains caractères sont mal affichés. On apprendra à corriger cela dans la leçon suivante. |