C'est quoi "(x)HTML" ?

Les balises.

Lorsque vous visitez un site, vous voyez des images, du texte, de la couleur...

Mais votre navigateur (Internet explorer, Firefox, Opera, Netscape...) ne voit pas ça. Il lit du code, qu'il transforme pour que vous puissiez le voir normalement. C'est ce code qui est appelé "html" (anciennes versions du code) ou "xhtml" (versions récentes).

Ce code est écrit sous forme de balises, c'est a dire du texte entouré par des chevrons : <balise>

Votre navigateur comprend a quoi correspond telle ou telle partie de ce code. Il sait par exemple que la balise <img> correpond à une image, que la balise <a> correspond à un lien, que la balise <p> correspond à un paragraphe, etc...

Si votre navigateur voit le code :
<a href="http://sylvain.sab.free.fr/"> Mon site</a>

Il saura que cela correspond à un lien (grâce à "<a") qui dirige vers http://sylvain.sab.free.fr/ (grâce à "href="http://sylvain.sab.free.fr/""), et que le texte qui comporte ce lien est "Mon site". Il affichera :

Mon site

Si il voit "<img src="xhtml.jpg" style="width:80px;height:18px;" />"
il saura qu'il doit afficher l'image xhtml.jpg (grâce à "src="xhtml.jpg""),
et que cette image a une lageur de 80 pixels et une longueur de 18 pixels (grâce à style="width:80px;height:18px;")

Il affichera :

Vous avez peut-être remarqué une différence entre les balises "<a></a>" et "<img />".
Les balises "<a></a>" vont par paire, alors que la balise "<img />" est seule.

Les balises qui vont par paire comportent deux types de balise :

1. Une qui est apellée "balise ouvrante" (le <a>) car elle ouvre un élément (ici c'est le lien), et
2. Une autre qui est apellée "balise fermante", reconnaissable au slash "/" car elle indique la fin de l'élément.

Les balises qui sont seules sont appelées "auto-fermantes", car elles n'ont pas besoin d'une deuxième balise pour indiquer la fin.
Elles le font toutes seules grâce à "/>".

On peut mettre du texte (ou d'autres balises) entre les balises qui vont par paire.

Quelques exemples de balises :

1. Qui vont par paires :

   <p>Paragraphe</p>

   Le texte entre ces deux balises est un paragraphe.

   <h1>Titre</h1>

   Le texte entre ces deux balises est un titre. Il y a plusieurs niveaux d'importance pour les titres, qui vont de h1 àa h6 :
   h1 est le titre le plus important, et h6 le moins important.

   <em>Texte important</em>

   Ces balises indiquent que le texte est important. Généralement, les navigateurs le mettent en italique, mais il n'y a pas de règle pour cela.
   On peut également dire que le texte est plus important avec les balises

   <strong>Texte plus important</strong>

   Généralement, les navigateurs le mettent en gras.

2. Auto-fermantes :

   <img />

   Cette balise indique au navigateur qu'il doit aficher une image.

   <br />

   Cette balise indique un retour à la ligne.

   <hr />

   Cette balise indique un ligne horizontale, comme celle ci :

Les attributs et leurs valeurs.

J'ai énoncé plusieurs balises, comme par exemple
<br />, qui provoque un retour à ligne ou encore <img />, qui indique la présence d'une image.

Si je mets ce code la, le navigateur ira à la ligne, puis qu'il doit afficher une image.
Mais quelle image ? Et de quelle taille ?
C'est pour indiquer cela que l'on se sert des attributs.

Pour une image, l'attribut "src" prend une valeur qui indique la source de l'image, c'est à dire l'endroit ou elle se trouve.

Voici comment est formée une balise, avec ses attributs :

1. Pour les balises qui vont par paire : <balise attribut1="valeur1" attribut2="valeur2">Texte</balise>
2. Pour les balises auto-fermantes : <balise attribut1="valeur1" attribut2="valeur2" />

Voici une image avec les attributs habituels :
<img src="bateau.jpg" style="width:30px;height:10px;" />

L'attribut "src", qui à pour valeur "bateau.jpg", indique que l'image à afficher est le fichier "bateau.jpg".
L'attribut "style" indique diverses choses correspondant à l'image, ici "width:30px;" correspond à la largeur (width) de 30 pixels (30px),
et "height:10px," à la hauteur (height) de 10 pixels (10px).

Evidemment, l'image n'est pas la seule balise qui utilise les attributs. Toutes les balises peuvent en avoir.
Pour certaines, c'est obligatoire, pour d'autres, c'est facultatif.

Par exemple, la balise <a></a>, qui correspond à un lien, doit obligatoirement avoir un attibut, sinon le navigateur ne saurait pas ou il doit aller quand on clique dessus. L'attribut correspondant est "href".

Si l'attribut "href" à pour valeur "accueil.html", le code poura être :
<a href="accueil.html">Page d'accueil</a>.
Le navigateur affichera :
Page d'accueil

Pour un lien, l'attribut href est obligatoire, mais la balise peut également prendre plusieurs autres attributs facultatifs :

• L'attribut "title", qui affiche une infobulle lorsque l'on survole le lien avec la souris.
• L'attribut "hreflang", qui indique la langue de la page vers laquelle dirige le lien.
• etc...

Des balises plus complexes

Le code html contient quelques balises spéciales : Par exemple, les balises qui indiquent le titre de la page, l'auteur...

Voici le code minimal pour une page WEB :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title></title>
   </head>
 <body>
 </body>
</html>

En premier, il y a ce code (apellé "déclaration xml") :
<?xml version="1.0" encoding="iso-8859-1"?>
C'est la version du fichier (1.0), et l'encodage.
L'encodage sert à indiquer quel type de caractères utilisera la page.
Pour les langues anglaises, l'ASCII ou l'utf-8 sont souvent utilisés. Cependant, certains ne prennent pas en compte les caractères latins (les accents par exemple). On peut mettre des caractères latins dans un document en ASCII, mais il faut indiquer que ce sont des caractères spéciaux avec "&" : "&eacute;" affiche é. En iso, il n'est pas nécéssaire d'indiquer que c'est un caractère spécial, on peut mettre directement "é" dans le code. C'est pourquoi on utilise souvent "iso" dans les documents en français. Il existe également des formats pour les langues chinoises, arabes... (plus d'informations sur les encodages)

Puis :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Cette partie de code (qui se place en premier), appellée "Doctype", indique la version du xhtml ou html utilisée. Ici la version du xhtml est la 1.0 Strict.

Ensuite, il y à
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
C'est la balise html, qui contient tout le reste du code (sauf le Doctype) et indique la langue de la page.

Puis, voici les balises "head"
Elles contiennent plusieurs informations relatives à la page ou au site :
Le titre de la page, les flux RSS, les feuilles de style (CSS), les favicônes...
Cependant, seulement le titre est obligatoire (mais il peut être vide) :
   <head>
       <title></title>
   </head>

Ensuite, il y a les balises "body".
Ce sont les balises les plus importantes, car elles contiennent le corps de la page.
C'est entre ces deux balises que sont placées la majorité des autres balises :
Les liens, les paragraphes, les images, les titres...
<body>
</body>

Après la fermeture de la balise body, on ferme la balise html :
 </body>
</html>

Le schéma d'une page pourrait donc se résumer à ceci :
<!--On indique la version du xml et du xhtml que l'on va utiliser, puis la langue et l'encodage du document-->
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<!--La balise d'en tête contient plusieurs informations relatives au document.-->
   <head>
       <title> <!--Le titre de la page. Par exemple "Bienvenue sur mon site".--> </title>
</title>
   </head>
 <body>
  <!--Ici, c'est le code de la page qui s'affiche à l'écran.-->
 </body>
</html> <!--Ensuite, on ferme les balises body et html.-->

Il y a beaucoup de balises que l'on peut mettre dans l'en-tête. En voici quelques unes :

• Les balises link

  Des Liens vers des flux RSS :

  <link rel="alternate" type="application/rss+xml" title="Flux RSS" href="mon-flux-rss.xml" />

  Des liens vers des fichiers CSS (ou feuilles de style) pour la mise en page :

   <link rel="stylesheet" type="text/css" href="mon-style.css" />

  Des pages d'aide à la navigation :

  <link rel="help" title="Accessibilité" href="accessibilite.php" />

  Des liens vers des favicônes :

  <link rel="icon" type="image/png" href="favicon.png" />

• Les balises meta

  Indiquer l'auteur de la page :

  <meta name="author" content="Sylvain SABOUA" />

  Un copyright

  <meta name="copyright" content="© Sylvain SABOUA" />

  Des mot-clés en rapport avec la page (pour les moteurs de recherche) :

  <meta name="Keywords" content="xhtml" />

  Une description de la page (idem) :

  <meta name="Description" content="Site d'informatique" />

  Le titre du site :

  <meta name="title" content="Sylvain.sab" />

Conclusion

le langage xhtml, nouvelle version du html, est un langage dit "à balises". Il existe deux types de balises : celles qui vont par paires (une ouvrante et une fermante) et les auto-fermantes.

Les balises utilisent souvent des attributs. Pour une image, l'attibut src est obligatoire par exemple. Cependant quelques balises utilisent très rarement des attributs, comme la balise de retour a la ligne : <br />.

Le xhtml est utilisé avec les CSS. Le xhtml sert à donner le contenu, et les CSS à la mise en page.

Pour continuer :
C'est quoi les CSS ?
Comment ça marche : Introduction au HTML
Le html sur Wikipedia
Le site du Zéro : Liste des balises xhtml
Sebsauvage : conseils html