Les bases du HTML

Une page exemple mettant en pratique tout ce qu'il y a dans cette section (ou presque) se trouve ICI

Création d'une page standard

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

La mention DTD HTML 4.01 Transitional ("Document Type Definition") signifie que vous utilisez un document de type "HTML" et cela dans la version du langage 4.01 et sa variante "Transitional". Le terme "EN" est une abréviation pour la langue, ici l'anglais. La mention se réfère à la langue parlée dans laquelle les noms d'éléments et d'attributs du langage de repères ont été définis et non pas au contenu de votre fichier. Utilisez donc toujours EN, étant donné que les noms d'éléments et d'attributs HTML sont basés sur la langue anglaise. (Source SelfHtml)

Ils existent trois DTD :

<html lang="fr">

<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

Spécification de l'encodage de caractère du  document iso-8559-1 est le jeu de caractères établit pour les langues d'Europe de l'ouest dont le français.

<title>Présentation du langage HTML</title>

On retrouve le titre du fichier (Extrait du site SelfHtml) :

</head>

<body>

Ici vous mettez le contenu de votre page.

</body>

</html>

Les titres

Titre niveau 1

<h1> Titre niveau 1 </h1>

Titre niveau 2

<h2> Titre niveau 2 </h2>

Titre niveau 3

<h3> Titre niveau 3 </h3>

Titre niveau 4

<h4> Titre niveau 4 </h4>

Titre niveau 5

<h5> Titre niveau 5 </h5>

Titre niveau6

<h6> Titre niveau 6 </h6>

Chaque titre forme un paragraphe indépendant. Par défaut, ils sont alignés à gauche mais il est possible de les centrer, de les aligner à droite ou de les justifier par les attributs  <h1 align="center" >, <h1 align="right"> , <h1 align="justify"> et <h1 align="left">.

L'organisation de la structure du document en titre et sous-titre aidera le lecteur à visualiser la structure du contenu de la page et aidera le référencement en facilitant l'interprétation du contenu par les robots d'indexation (Source : Bonne pratique 16 d'Opquast).

Les paragraphes

Les balises <p> d'ouverture et </p> de fermeture vous permettront d'aérer votre texte en le découpant en paragraphe indépendant. Automatiquement lorsque vous créez un paragraphe, le navigateur introduit un espace avant et après le texte.

<p> Exemple le texte que vous êtes entrain de lire est un paragraphe. </p>

<span> est aussi utilisé, il est le pendant du <div> que nous verrons plus tard mais pour quelques mots seulement. Le <div> est utilisé lors de grands paragraphes.

Le retour chariot

La balise <br> est une des rares balises comme <img> à ne pas avoir de balise de fermeture. Elle force le passage à la ligne quand on le souhaite.

Exemple : Extrait d'un poème de Victor Hugo (La légende des siècles)

De quel droit mettez-vous des oiseaux dans des cages ? <br>
De quel droit ôtez-vous ces chanteurs aux bocages ? <br>
Aux sources, à l'aurore, à la nuée, aux vents ? <br>
De quel droit volez-vous la vie à ces vivants ? <br>

Maintenant on utilise <br/> depuis l'instauration des normes XHTML 1.0 Transitional, cependant ceci est de moins utilisé au profit de <p> conjointement avec CSS.

L'arrière plan

On peut changer à volonté la couleur de fond d'une page web ou mettre une image en intégrant la balise bgcolor à la balise <body> comme suit :

- <body bgcolor="#B3B3FF">  ou  <body style="background-color: rgb(255, 179, 255)"> pour la couleur

- <body style="background-image:url(arrplan.jpg)"> pour mettre une image en arrière plan

On peut exprimer le code couleur de deux manière : hexadécimales d'après le schéma #XXXXXX ou  par le schéma rgb (rrr,ggg,bbb) des feuilles de style, que nous verrons dans la partie CSS de ce tutorial.  rrr est la valeur du rouge, ggg la valeur du vert et bbb la valeur du bleu de la couleur. Pour les trois valeurs sont autorisés soit des chiffres absolus compris entre 0 (pas de couleur correspondante) et 255 (valeur maximale de la couleur correspondante) soit des valeurs en pourcentage de 0% (pas de couleur correspondante) à 100% (valeur maximale de la couleur correspondante). (Source du paragraphe Selfhtml)

Sur certains sites vous trouverez des utilitaires vous permettant de choisir au mieux vos couleurs et qui vous donneront en plus, le code couleur. A noter l'extension de Firefox, Colorzilla qui s'adresse aux webmaster désireux de prélever les couleurs contenues dans la fenêtre de navigateur dans le but de les intégrer dans le code qu'ils développent.

Les liaisons à des fichiers extérieurs

Pour lier des fichiers tels JavaScript *.js ou Cascade StyleSheet (que nous verrons ensuite) *.css, il existe deux balises :

Les évènements

Nous n'en verrons que très peu, car nous ne verrons pas le JavaScript, mais il faut tout de même savoir à quoi ils servent : ils "traquent" ce que vous faites sur la page, il savent quand vous ouvrez une page, ce sont des espions ! Non, revenons à la réalité, ce sont des attributs qui servent à exécuter des actions lorsque l'action qu'ils surveillent est effectuée.

Parmi ces attributs nous avons :