3. Structure d’un document html 5

4.1 Éléments de base du code html et ce qu’il affichera dans un fureteur.

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title>Titre de mon onglet et de ma page</title>
</head>

<body>
<h1> Voici un titre de niveau 1 </h1>
</body>

</html>

Ouvrez le logiciel Note Pad ++

Copier ce texte et coller-le dans une page html du logiciel Note Pad ++ 

 

4.2 Balises

 

Le HTML utilise des balises (aussi appelées « éléments ») pour distinguer les éléments logiques de la page.

Toute balise doit être ouverte (sans quoi elle n’existe pas, évidemment) ; et toutes les balises doivent également être fermées.

Voici un exemple où <h1> est une balise :

<h1> Ceci est un titre 1 </h1>

Les balises HTML fonctionnent :

1. Par paire afin d’agir sur les éléments qu’elles encadrent.
La première est appelée « balise d’ouverture »
et la seconde « balise de fermeture » (ou fermante).
La balise fermante est précédé du caractère /.

<h1> Ceci est un titre 1 </h1>

ou

2. Les balises seules (ou autofermantes) : elles sont un peu plus rares, mais il y en a quand même. Il existe des cas où la balise n’a pas besoin d’une balise de fermeture. Dans ce cas de figure, la structure est la suivante :

<nomdelabalise />

!!! l’espace et le / avant le signe > sont important pour que votre balise soit interprétée dans les anciens navigateurs. !!!

 

Voici une liste des balises seules (ou autofermantes) en :

<area />, <br />, <hr />, < img />, < input />, <link />, < meta />, < param />,

 

 

Imbrication des balises

Les balises doivent être ouvertes et refermées dans l’ordre. Faites spécialement attention dans le cadre de balises imbriquées.

Bon : <body> <p>corps du document </p> </body>

Mauvais : <body> <p>corps du document </body> </p>

Vous noterez que les balises s’ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l’on ouvre et c’est aussi la dernière que l’on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :

  • <html><body></body></html> : correct. Une balise qui est ouverte à l’intérieur d’une autre doit aussi être fermée à l’intérieur.

  • <html><body></html></body> : incorrect, les balises s’entremêlent.

     

4.3 Attributs et valeur

Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé.

Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir une ou plusieurs valeurs.

Voici un exemple d’attribut pour la balise <a>

<a href= »mailto:maLegault@cegepoutaouais.qc.ca »>

mon adresse courriel

</a>

 

a ( Correspond à la balise <a> est un lien hypertexte )

href ( Correspond à l’attribut href (page de destination))

"mailto:maLegault@cegepoutaouais.qc.ca" ( Correspond à la valeur de l’attribut href )

 

 

4.4 Types de balises : bloc et ligne

En , il y a 2 types de balises : 

Les balises de type ligne « inline » : ce sont des balises que l’on utilise à l’intérieur d’un paragraphe et elles ne peuvent contenir que des éléments de d’autres balises ligne, mais pas de balises de type BLOC.C’est le cas notamment des balises <strong>, <em>, <q> etc… Par exemple :

<a>, <br />, <hr />, < img />, < strong >, <span>, <abbr>

Les balises de type bloc « blocs » : ces balises servent à structurer la page en plusieurs « blocs ». Chacune de ces balises constitue un bloc séparé et peuvent contenir d’autres éléments bloc ou ligne. Par exemple :

<blockquote>, <body>, <div>, < li >, <h1>, <body>,

 

4.5 Types de balises : « autofermantes »

Les balises de type « autofermantes » sont des balises qui sont ouvrantes et fermantes en même temps. Elles ne contiennent pas de contenu. On ferme donc la balise en ajoutant un espace et une barre oblique (/) à la fin de la balise. 

Voici la liste des balises « autofermantes » : 
<area /> , <br /> , <hr /> , <img /> , <input /> , <link /> , <meta /> , <param />

 

4.6 Explication de la structure d’un fichier

Voici les différentes parties qui composent le fichier . La compréhension des parties est capitale pour écrire en html.

<!DOCTYPE html>

<html>
<head>
<meta charset= »utf-8″ />
<title>titre de la page </title>
</head> 

<body>
</body>

</html>

 

4.6.1 Le Doctype : <!DOCTYPE html>

La toute première ligne s’appelle le doctype. Elle est indispensable car c’est elle qui indique qu’il s’agit bien d’une page web HTML.
Ce n’est pas vraiment une balise comme les autres (elle commence par un point d’exclamation), vous pouvez considérer que c’est un peu l’exception qui confirme la règle.

Cette ligne du doctype était autrefois incroyablement complexe. Il était impossible de la retenir de tête. Pour XHTML 1.0, il fallait écrire :
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>. 

Dans le cadre de HTML5, il a été décidé de la simplifier, pour le plus grand bonheur des webmasters. Quand vous voyez une balise doctype courte (<!DOCTYPE html>), cela signifie que la page est écrite en HTML5.

 

4.6.2 La balise <html>

<html > 

</html>

  • Cette balise est le conteneur de premier niveau placé en haut de la hiérarchie de tous les éléments du document .
  • C’est la balise principale qui englobera toute votre page. Donc la page se terminera par </html>.
  • Il n’y a rien après la balise </html>, puisque c’est la fin du document.

 

4.6.3 L’en-tête d’un document : <head>

<head>
<meta charset= »utf-8″ />
<title>titre de la page </title>
</head>

  • L’en-tête du document se situe après la balise <html>
  • Elle est délimitée par les balises <head> et </head>.
  • Elle contient certaines informations qu’un fureteur n’affichera pas , mais qui pourront être utilisées à plusieurs fins. Par exemple, lier le document à une feuille css externe.
  • De plus, les « meta» sont utilisés par les moteurs de recherche :
    – récolter de l’information
    – traiter et comparer ces informations
    – poursuivre leur parcours

La balise <title>

  • Cet élément est obligatoire 
  • Ne pas dépasser 69 caractères.
  • Il est impératif de prévoir un titre qui soit parlant car :
  • il identifie ainsi clairement la page;
  • il est utilisé par les moteurs de recherche pour parcourir les pages et présenter les listes de résultats;
  • il est utilisé pour le classement des signets/favoris.

 

La balise <meta charset= »utf-8″ />

  • Cette balise indique l’encodage utilisé dans votre fichier .html.

    Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l’encodage indique la façon dont le fichier est enregistré. C’est lui qui détermine comment les caractères spéciaux vont s’afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).

    Il y a plusieurs techniques d’encodage portant des noms bizarres et utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée aujourd’hui autant que possible : UTF-8. Cette méthode d’encodage permet d’afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète ! C’est pour cela que j’ai indiqué utf-8 dans cette balise.

    Sous Notepad++, allez dans le menu Encodage > Encoder en UTF-8 (sans BOM) pour que votre fichier soit enregistré en UTF-8 dès le début. Cela ne s’applique qu’au fichier actuellement ouvert.
    Pour ne pas avoir à le faire pour chaque nouveau fichier, je vous conseille d’aller dans le menu Paramétrage > Préférences, onglet Nouveau document/Dossier. Sélectionnez UTF-8 sans BOM dans la liste.

    4.6.4 La balise <body>

    • Le corps du document se situe après la balise <head>.
    • Elle est délimitée par les balises <body> et </body>.
    • Nous passerons la plus grande partie de notre temps entre ces 2 balises.

     

En 2017 les dépenses publicitaires sur Internet ont atteint les 77,37 milliards de dollars pour dépasser pour la première fois les dépenses de la publicité télé qui ont atteint les 72,01 milliards de dollars.