Structure d'une page HTML

Sur ce tutoriel, nous allons apprendre à créer une page en HTML ou XHTML

Définir le type de page, le DOCTYPE

C'est ce que l'on appelle une Déclaration de Type de Document (DTD), que l'on nomme "doctype".

Le "Doctype" sert à indiquer à quelles règles d'écriture obéit le code d'une page HTML ou XHTML. Ces règles sont en fait contenues dans des documents assez particuliers, les Définitions de Type de Document (abrégé également sous la forme DTD), écrites dans un langage qui vous paraîtra sans doute un peu barbare, et hébergées sur le site du W3C (pour celles qui nous intéressent ici). Si vous êtes curieux, et que vous voulez voir un exemple, téléchargez celle-ci. Mais attention, vous serez surpris : en effet, les DTD sont destinées à être lues avant tout par les "machines" logicielles, et non par des êtres humains.

Source Alsa création

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

En XHTML 1.0 Strict ou 1.0 Transitional

Nous ne verrons un peu plus bas dans ce tutoriel.

En HTML5, ce sera bien plus simple !

<!doctype html>

Ce qui faut en retenir :

Il faudra en mettre un dans chaque page HTML que vous allez créer. Le doctype se met avant la balise <html>

Les balises <html></html>

En HTML ou XHTML , nous allons définir le début et la fin d'une page en insérant les balises <html> et </html>

<html> : est la balise entrante, qui définit le début de la page

</html> : est la balise sortante qui définit la fin de la page

Pour définir la balise sortante, nous ajoutons le caractére " /"

Il y a quelques exceptions qui ne contiennent pas de balise sortante, que nous aborderons par la suite.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    

<html> <!--Début de ma page HTML -->

  <head>

  <!-- Contenu du head -->

  </head>

  <body>

  Contenu de ma page web

  </body> 

  </html> <!-- Fin  de la balise html-->

Cet exemple à gauche est incomplet !
Il manque un certain nombre d'informations que nous aborderons un peu plus loin dans ce tutoriel

Les commentaires en HTML

Les commentaires en HTML permettent de commenter votre code, autrement dit y placer des notes pour par exemple vous repérer plus facilement.
Il est important de noter qu'ils n'apparaissent pas dans votre page, ils sont uniquement visibles dans votre code

Le commentaire commence par 

A noter : dans la balise sortante, on ne remet par le "!"

Les balises <head> et </head>

Les balises <head> et </head> contiennent les informations sur le titre de la page, les balises meta, les feuilles de style CSS externe, les régles de styles, les javascripts etc...

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Structure d'une page HTML - Tutoriel HTML / XHTML</title>  <meta name="Description" content="Je vous propose de découvrir les bases du HTML, notamment la structure d'une page dans ce tutoriel">  <meta name="Keywords" content="Structure d'une page HTML">  <meta name="robots" content="index, follow"> <link href="feuille_de_style.css" rel="stylesheet" type="text/css">  <script src="effet.js" type="text/javascript"></script>  </head>

Pour définir le début et la fin du head , nous retrouverons toujours :

Une balise entrante, qui indique le début de la balise Ex: <head>
Une balise sortante, qui indique la fin de la balise, vous retrouvez le / aprés le < Ex : </head>

A noter : Ces informations ne sont pas visibles lorsque vous regardez le résultat dans un navigateur, seul le titre de la page est visible dans votre navigateur

Vous aurez toutes les explications sur les différents éléments contenus dans la balise head en cliquant sur le bouton ci contre La balise head, vous n'êtes pas obligé de le lire tout de suite, ce sera abordé dans le point suivant.

Les balises <body> et </body>

Les balises <body> et </body> contiennent tout le contenu visible de votre page.

Pour définir le début et la fin du body , nous retrouverons toujours :

Une balise entrante, qui indique le début de la balise Ex: <body>
Une balise sortante, qui indique la fin de la balise, vous retrouvez le / aprés le < Ex : </body>

 <body> <!-- Balise entrante -->

  <h1>Mon site</h1>

  <p>Le contenu de mon site</p>

  </body> <!-- Balise sortante -->

Récapitulatif

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Structure d'une page HTML - Tutoriel HTML / XHTML</title> <meta name="Description" content="Je vous propose de découvrir les bases du HTML, notamment la structure d'une page dans ce tutoriel"> <meta name="Keywords" content="Structure d'une page HTML"> <meta name="robots" content="index, follow"> <link href="feuille_de_style.css" rel="stylesheet" type="text/css"> <script src="effet.js" type="text/javascript"></script> </head> <body> Contenu de ma page web </body> </html>

Structure d'une page en XHTML

XHTML : the eXtensible Hyper Text Markup Language

Qui signifie langage de balisage hypertexte extensible. Il est la conséquence de l'incompatibilité des fichiers HTML et XML que certains navigateurs n'arrivaient pas à déchiffrer, nous pouvons préciser que c'est un langage dit de description et non de programmation.

En XHTML, les balises qui n'ont pas de balises sortantes ont une syntaxe un peu différente, on y mettra en fin le caractère "/".

Syntaxe HTML pour afficher une image

<img src="images/aide-boite.jpg" width="73" height="73" alt="Aide HTML">

Syntaxe XHTML pour afficher une image

<img src="images/aide-boite.jpg" width="73" height="73" alt="Aide HTML" />

D'autres exemples

HTML4	XHTML	Fonction
<br>	<br />	Permet d'insérer un saut de ligne
<hr>	<hr />	Permet d'insérer une ligne horizontale
<meta name="robots" content="nosnippet=">	<meta name="robots" content="nosnippet" />	Balise meta qui indique aux robots des moteurs de recherche de suivre les liens contenus sur la page.
<meta name="Description" content="Je vous propose de découvrir les bases du HTML, notamment la structure d'une page dans ce tutoriel">	<meta name="Description" content="Je vous propose de découvrir les bases du XHTML, notamment la structure d'une page dans ce tutoriel" />	La description que vous trouverez dans votre moteur de recherche préféré sur votre site est correctement référencé.
<input type="text" name="fonction" size="30">	<input type="text" name="fonction" size="30" />	Permet d'insérer un champ de texte que l'on retouve dans les formulaires.

Le doctype en XHTML

Le doctype sera différents de celui que nous avons utilisé précédemment en HTML

En XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Exemple complet de document XHTML

Par rapport à HTML, les balises qui ne contiennent pas de balises sortantes, se teminent par " />" à la place de ">" en HTML


  <!-- Pour indiquer que vous définissez un document XHTML, vous devez saisir ce code en début de document -->

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <!-- Ensuite vous insérez les balises HTML -->
    
    <html xmlns="http://www.w3.org/1999/xhtml"> <!-- html entrant, vous pouvez remarquer qu'il est différent de la version HTML-->

    <head> <!-- head entrant -->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Structure d'une page HTML - Tutoriel HTML / XHTML</title>

<meta name="Description" content="Je vous propose de découvrir les bases du HTML, notamment la structure d'une page dans ce tutoriel" />

  <meta name="Keywords" content="Structure d'une page HTML" />

    <meta name="robots" content="index, follow" />

    <link href="feuille_de_style.css" rel="stylesheet" type="text/css" />

    <script src="effet.js" type="text/javascript"></script>

    </head>  <!-- head sortant -->

    <body> <!-- body entrant -->

    <h1>Mon site</h1>

    <p>Le contenu de mon site</p>

    </body><!-- body sortant -->

    

    </html> <!-- html sortant -->