Langage HTML



  • Structure d'une page web


 le HTML est un langage basé sur des balises que peut interpréter le navigateur web, le langage décrit l'organisation d'un document web.

l'interpréteur lit le code de haut en bas, Ci-dessous il interprétera en premier  < ! doctype html> et en dernier </html>



Ci-dessus, vous pouvez voir la structure minimale d'une page web:


La balise < ! doctype html> précice au navigateur que c'est la version html5 qui est utilisée.


La balise <html > est la balise de début du code html. Dans la balise vous voyez l'attribut lang et sa valeur réglée sur  "fr" avec le code lang="fr".

Cet attribut est utilisé pour préciser la langue de la page web ici fr pour Français, elle sera utile aux moteurs de recherche qui indexent des pages en Français.

La balise <html> est une balise en paire, elle encadre un contenu ( ici tout le code html de la page web), la fin de la page html est indiquée par la balise </html> qui referme <html> 


Vient ensuite la balise <head> qui marque le début de l'en-tête. L'en-tête est une zone de code qui détient diverses informations sur la page, comme le titre de l'onglet qui est encadré par les balises en paire <title> et </title>,  l'encodage utilisé pour les caractères ici "utf-8" qui permet de coder les caractères accentués de la langue Française cette information est placée dans la balise orpheline <meta /> avec l'attribut charset qui est réglé sur "utf-8". C'est également dans <head> que l'on indiquera les fichiers externes qu'utilise la page web comme les feuilles de style CSS et les fichiers JavaScript. La balise <head> est une balise en paire, elle encadre un contenu ( les informations cités ci-dessus ), la fin de l'en-tête est indiquée par l'attribut </head>


Vient ensuite la balise <body> qui marque le début du corps de la page ( ce que voit l'utilisateur, le contenu de la page web à afficher). C'est dans cette partie que vous devez mettre tout votre code ( ce sera développé plus loin). La balise <body> est une balise en paire, elle encadre un contenu (  le contenu de la page à afficher par le navigateur ), la fin du body est indiquée par l'attribut </body>


Après </body> , on trouve </html> qui indique la fin du document.  



  • Quelques balises html à connaitre


Toutes les balises décrites ci-dessous doivent être placées dans l'élément body de la page HTML.


    • Les titres


Les balises <h1> </h1> (et h2, h2, ... , h6) délimitent un titre de section selon 6 niveaux de titre. Ce sont des balises de type bloc, elle laisse une ligne vide au dessus et en dessous:



    • Les paragraphes


Les balises <p> </p> délimitent un paragraphe.  Ce sont des balises de type block, elle laisse une ligne vide au dessus et en dessous:





    • Les listes


Les balises <ul> </ul> délimitent des listes à puces des éléments placés entre balises <li> </li>.



Les balises <ol> </ol> délimitent des listes énumérées d'éléments placés entre balises <li> </li>.





    • Les tableaux



Les balises <table> </table> délimitent  un tableau à deux dimensions.






  • Éléments de type inline ou block


Les balises vus précédemment sont de type block, elles ont une forme rectangulaire que l'on peut voir si on colore le fond de la balise. Par défaut le rectangle occupe toute la largeur de son conteneur,  le conteneur peut être body ou des balises placées dans body qui encadrent la balise dont on parle ( voir exemple ci-dessous ) , la hauteur du rectangle est  fixée par le contenu associé à la balise. Les balises de type block laissent une ligne vide au dessus et en dessous. Quelques balises de type block: h1 (titre) , p (paragraphe), div ( division de la page).  


Exemple: Ci-dessous: le div coloré en gris est dans le body coloré en blanc ( son conteneur) et p coloré en bleu est lui dans le div gris (c'est son conteneur).

Au niveau du rendu, vous pouvez voir que le div de couleur grise occupe toute la largeur de body (son conteneur) et p de couleur bleu toute la largeur de div (son conteneur).  Vous pouvez aussi constater avec la couleur bleue de p que la hauteur du block est limitée par son contenu ici "Bonjour toi". Les balises de type block peuvent être redimensionnées ( en largeur, en hauteur, marges par rapport au conteneur, etc..) vous le verrez dans la partie CSS.




      


Les balises de type inline sont différentes, elles se placent à la suite du contenu précédent et elles n'occupent que la place qui leur est nécessaire ( celui de leur contenu) . Exemple de balises de type inline un span ( une étendue) , a ( un lien) . Les balises de types inline ne peuvent pas être redimensionnées.





           


Une balise in-line peut devenir block et l'inverse avec la propriété display, ci-dessous la balise lien a est redéfinie en type block.  Observez la différence:





    • Formatage de texte

Parmi les balises de type inline, on trouve les balises de texte :






    • Images


La balise orpheline <img .../> permet d'afficher une image dans la page.




L'image est de type inline-block qui permet de se mettre à la suite de l'élément suivant  (propriété de inline)  mais avec des dimensions réglables (propriété de block).




 

    • Balises orphelines:


Les balises orphelines n'encadrent pas de contenu, elles ne sont donc pas en paires,  le / est placé juste avant le chevron de fermeture   >,  elles indiquent une action: saute une ligne < br/> , insère une image <img src='babouin1.PNG' />  , ci-dessus vous avez des exemples.



    • Les liens hypertextes


La balise  a (lien hypertexte) est une balise de type inline. Une page HTML se caractérise par le fait qu'elle peut renvoyer vers d'autres pages HTML via des liens hypertextes. La paire de balises <a>  </a> (comme ancre) permet d'insérer un lien hypertexte dans une page HTML.


L'attribut href doit avoir pour valeur le chemin vers la ressource que l'on souhaite accéder, exemple :  href="https://pix.fr"  mènera vers le site web pix.fr

Le texte contenu entre les balises <a> lien vers Pix  </a>  est le texte d'affichage du lien (ce texte à un style coloré et souligné par défaut):

<a href="https://pix.fr"> lien vers Pix </a>

Le lien peut être avec un chemin absolu, il indique le chemin complet avec le protocole à utiliser pour accéder à la ressource:


Exemple: <a href="https://pix.fr"> lien vers Pix </a>


Le lien peut être avec un chemin relatif quand l'élément à joindre est sur le même site web,  soit dans le même dossier ou dans un autre dossier du même site web. Le chemin relatif doit être perçu comme relatif à l'emplacement de la page dans laquelle on écrit le lien.



 

Si les liens sont codés dans la page index.html qui est située dans le dossier dossierprincipal et si on veut aller vers les autres pages du même site, on peut utiliser des chemins relatifs à dossierprincipal qui contient index.html:


./ veut sous-dossier du dossier courant ( ici dossierprincipal )

../ veut dossier parent (ici le dossier site) du dossier courant  dossierprincipal  



page2.html est dans le même dossier que index.html, le chemin relatif sera:


 <a href="page2.html"> vers la page 2 </a>


page3.html est dans un sous-dossier ( appelé dossier)  de dossierprincipal  , le chemin relatif sera:


<a href="./dossier/page3.html"> vers la page 3 </a>


page4.html est dans le dossier parent de dossierprincipal , le chemin relatif sera:


<a href="../page4.html"> vers la page 4 </a>


On peut aussi définir des Ancres qui permettent de se déplacer dans un même document  ( quand il est long) , ci-dessous, on se déplace vers le chapitre d'id organisation:


<a href="#organisation" "> vers organisation </a>


Le chapitre en question doit être marqué avec un identifiant dont la valeur est organisation, un identifiant est défini avec l'attribut id:



  • Les balises de structure

Les balises neutres de structure <div> </div> et <span> </span> servent à regrouper des éléments pour leur appliquer un style visuel (vous verrez cela dans le chapitre suivant sur le langage CSS).

  • Les balises structurantes

Exemple

      




 

Créé avec HelpNDoc Personal Edition: Générateur de documentation d'aide HTML gratuit