## 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 :

- `"http://www.w3.org/TR/html4/loose.dtd"` : qui supporte encore des attributs ou éléments obsolètes, c'est celle que nous avons choisi pour ces pages web,
- `"http://www.w3.org/TR/html4/strict.dtd"` : qui respecte parfaitement la distinction fond (HTML) / forme (CSS),
- `"http://www.w3.org/TR/html4/frameset.dtd"` : conçue pour des pages HTML dans lesquels des jeux decadres sont définis mais déconseillé.

`<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) :

- dans la barre de titre de votre navigateur Web,
- dans le nom du signet si vous décidez d'intégrer la page dans votre marque-page,
- dans l'historique des pages visitées de votre navigateur,
- dans les moteurs de recherche.

`</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 :

- `<script type="text/javascript" src="chemin_vers_le_fichier.js"></script>` : pour les fichiers JavaScript, cette balise doit se trouver dans le HEAD.
- `<link type="text/css" href="chemin_du_fichier.css" rel="stylesheet" />` : pour les fichiers JavaScript, cette balise doit aussi se trouver dans le HEAD.
- `<img src="adresse_du_fichier.jpg" alt="texte_affiché" />` : permet d'insérer une image. L'attribut alt permet d'afficher un texte lorsque l'image ne peut être chargée.
- `<a href="http://adresse_du_lien" target="cible">Texte qui représente le lien dans la page</a>` : permet d'insérer un lien vers un site web, page, ou autre. Pour ouvrir le lien dans la même page, l'attribut target n'est pas nécessaire, mais pour l'ouvrir dans une autre fenêtre, il faut y inscrire "_blank".

### 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 :

- onblur : Se produit lorsque l'object actif perds le focus, n'est plus l'objet actif.
- onclick : Se produit lorsque le visiteur enfonce le bouton gauche de la souris sur le contenu de la balise.
- ondblclick : Se produit lorsque le visiteur enfonce deux fois rapidement le bouton gauche de la souris sur le contenu de la balise.
- onfocus : Se produit lorsque l'object reçoit le focus, devient l'objet actif.
- onmousedown : Se produit lorsque le visiteur fait descendre sa souris vers le bas de l'éran en partant du contenu de la balise.
- onmouseup : Se produit lorsque le visiteur fait monter sa souris vers le haut de l'éran en partant du contenu de la balise.
- onmouseover : Se produit lorsque le visiteur place sa souris au dessus du contenu de la balise.
- onmousemove : Se produit lorsque le visiteur fait bouger sa souris au dessus du contenu de la balise.
- onmouseout : Se produit lorsque le visiteur retire sa souris du dessus du contenu de la balise.
- onkeypress : Se produit lorsque le visiteur enfonce une touche de son clavier.
- onkeydown : Comme pour onkeypress, se produit lorsque le visiteur enfonce une touche de son clavier, mais ne dure que pendant le temps de la descente de la touche.
- onkeyup : Comme pour onkeypress, se produit lorsque le visiteur enfonce une touche de son clavier, mais ne dure que pendant le temps de la remontée de la touche.