html

Épisode 1 : HTML

Catégorie : technique, code

Niveau : débutant

Temps de lecture estimé : ~3 minutes

 

Cet article est le premier de la série “Les différents éléments d'un site web”, qui a pour but de vous détailler les différents éléments d’un site internet.

 

Les fichiers statiques sont la base d’un site web : en effet, tout site pourrait être uniquement composé de fichiers statiques. Commençons par les fichiers HTML, qui sont peut-être les plus importants.

 

Présentation

HTML est une abbréviation de HyperText Markup Language, ou en français, language de balisage hypertexte. Il est utilisé pour structurer le contenu d’une page web. Si vous souhaitez voir à quoi peu bien ressembler du HTML, il vous suffit de faire un clic droit sur cette page par exemple, et de cliquer sur le bouton “Afficher le code source de la page”, ou “Code source de la page” selon votre navigateur.

 

Exemple code HTML

Extrait d’une page HTML

 

Les balises

Comme vous pouvez le voir, ce code est constitué à la fois de texte et d'éléments entre chevrons (“<” et “>”) que l’on appelle des balises, ou tags en anglais (ex: <p>), chacune ayant leur signification propre et permettant de structurer la page web. Alors à moins de connaître le HTML, ce n’est pas très lisible pour un humain, mais votre navigateur lui, comprend très bien ce langage et peut donc l’interpréter à l’écran.

Vous pouvez également constater qu’il y a des éléments sous la forme (avec un “/” fermant). Elles correspondent en fait aux fermetures des balises. En effet, en HTML, toute balise ouverte doit être fermée (à quelques exception près).

ex : <h1>Titre de la page web</h1>

Les exceptions sont les balises auto-fermantes : <img /> (balises images), <input /> (champs de formulaire), <br/> (saut de ligne) etc…

ex : <img src=”image.jpg” />

 

Comme je vous le disais, chaque balise insérée par le développeur web a une signification bien précise pour le navigateur.

Quelques exemples :

  • la balise <i> : définit un texte en italique
    • Dans le code : <i>Test</i>

    • A l’écran: Test
  • la balise <a> : définit un lien hypertexte. Cette balise est très importante, car c’est elle qui permet la navigation entre les pages d’un même site, ou vers un site extérieur.
    • Dans le code : <a href="http://www.google.fr">Aller sur Google</a>
    • A l’écran : Aller sur Google (et si on clique sur ce lien, vous l’avez deviné, on arrive sur la page d’accueil de Google !)
  • il existe bien d'autres balises, ayant différents types :
    • les balises de structure,
    • les balises de style,
    • les balises de métadonnées,
    • les balises de sections,
    • les balises de titres,
    • les balises images,
    • etc…

Note : si vous souhaitez avec plus d’infos sur les balises HTML : https://developer.mozilla.org/fr/docs/Web/HTML/Element

Chaque balise a une utilité propre et permet de représenter quelque chose de bien précis à l’écran pour l’internaute, ou bien alors pour les navigateurs ou les moteurs de recherche, et qui dans ce cas là ne sera pas forcément visible.

 

Structure de base et imbrication

La puissance de ce langage réside dans le fait que ces balises peuvent s’imbriquer pour former une structure cohérente et ainsi représenter une page internet, telle que le développeur l’a pensé.

 

Exemple page web simplifiée

Exemple d’une page HTML simplifiée

 

Dans cet exemple très simple, vous pouvez voir que la page web est constituée des balises suivantes :

  • <!DOCTYPE html> : Balise un peu particulière placée en tout début de page qui indique au navigateur dans quel type le HTML a été écrit.
  • <html> : Balise obligatoire permettant de délimiter le début et la fin du document
  • <head> : Balise contenant les informations de base de la page (l’encodage de caractères, le titre de la page, les métas données pour les moteurs de recherche et le référencement etc…), les feuilles de style, les fichiers Javascript…
  • <body> : Balise qui comme son nom l’indique, représente le corps ou le contenu de la page. C’est là que l’on insère tout ce que l’on souhaite voir à l’écran.

Dans notre exemple, la balise <body> contient une balise <div>, et qui elle même englobe la balise <h1>(titre) et une balise <p> (paragraphe). C’est par cette imbrication de balises que l’on peut définir des parties bien distinctes dans une page.

Plus tôt dans l’article, je vous disais qu’il était possible de créer un site web à l’aide uniquement de fichiers statiques. Si vous souhaitez voir le rendu de la page dans votre navigateur, vous pouvez copier le code HTML défini précédemment et le coller dans un nouveau fichier (à l’aide d’un éditeur de texte, comme Notepad par exemple). Il vous suffira ensuite de l’enregistrer et de le nommer par exemple test.html.

Note : les fichiers HTML ont comme extension .html

 

Une fois cela fait, vous pouvez voir le résultat en double cliquant sur ce fichier, il devrait s’ouvrir avec votre navigateur normalement.

 

Exemple page web

Rendu à l’écran de cette page HTML

 

Les attributs

Les balises HTML peuvent contenir des attributs, qui sont tout simplement des informations supplémentaires définissant plus précisément le comportement de celles-ci.

  • balise sans attribut : <p>Test</p>
  • balise avec attribut : <p class="content">Test</>

Si on reprend l’exemple précédent avec notre lien qui allait vers Google :

<a href="http://www.google.fr</a>

C’était donc une balise <a>, avec un attribut href ayant pour valeur http://google.fr. Comme vous pouvez le voir, l’attribut href détermine la page cible de votre lien.

Il existe de nombreux attributs et souvent, les attributs que l’on peut associer à une balise dépendent du type de cette balise.

Par exemple, il est possible de mettre un attribut href sur une balise (lien), mais pas d’attribut href sur une balise <p> (paragraphe). En réalité, on peux l’écrire dans le code HMTL, mais il ne sera pas interprété par le navigateur, considéré comme étant non valide.

Note : pour plus d’informations sur les attributs, cliquez sur https://developer.mozilla.org/fr/docs/Web/HTML/Attributes.

 

Pour que le web soit standardisé au maximum, des organisations se sont créées afin de définir ensemble des “normes” pour les langages courants du web tels que HTML, CSS, XML etc...

ex : le W3C ou (World Wide Web Consortium), qui met en place les règles d’écriture et de validité du HTML.

Ces règles sont suivies par les navigateurs, qui savent alors comment interpréter le code écrit par les développeurs.

 

Comme vous pouvez le voir sur notre exemple précédent, la mise en page n’est pour l’instant pas très esthétique.

Exemple page web

 

Rendu à l’écran de cette page HTML

 

A part le titre de la page défini par la balise <h1> qui possède une apparence différente, le style du reste du contenu reste très simple.

C’est tout à fait normal car nous n’avons pour l’instant utilisé que du HTML, et comme nous l’avons vu, ce langage définit la structure d’une page web.

Nous verrons dans le prochain article qu’il existe un langage dédié à l’apparence des pages web, les CSS.