Chapitres :
01 - Introduction :
Hypertext Markup Language :
L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).
L’anglais Hypertext Markup Language est rarement traduit littéralement en langage de balisage d’hypertexte. On utilise généralement l’abréviation HTML, parfois même en répétant le mot « langage » comme dans « langage HTML ». Hypertext est parfois écrit HyperText pour marquer le T de l’abréviation HTML.
Le public non averti parle parfois de HTM au lieu de HTML, HTM étant l’extension de nom de fichier tronquée à trois lettres, une limitation qu’on trouve sur d’anciens systèmes d’exploitation de Microsoft.
Pour commencer toutes pages HTML, découvrons la structure de départ :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 'Fait référence aux dernieres normes en vigeur'
<html xmlns="http://www.w3.org/1999/xhtml"> 'Site référence normes XHTML'
<head> 'En-tête de la page'
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head> 'Fin en-tête de la page'
<body> 'Elément de code HTML désignant le corps de la page'
</body> 'Fin corps de la page'
</html>
Note : Toutes balises utilisées à un début et une fin marqué par <balise></balise>.
02 - Pour créer une page HTML :
Le HTML n'est pas vraiment un langage de programmation, ce qui rend son apprentissage très facile. Il est constitué de balises qui vous permettent de mettre en forme ( le style ) votre page.
Il suffit d'avoir un éditeur de texte qui puisse sauvegarder le texte en ASCII.
Pour les utilisateur de Windows, le Bloc-notes et pour les utilisateur de Mac, c'est BBEdit si je me trompe pas.
Enregistrer votre page en lui donnant une extension ".htm" ou" .html", je vous conseille plutôt ".html".
Vous travaillez le code à partir de l'éditeur de texte et vous visualisez avec votre navigateur.
Ayez une version d'Internet Explorer et de Firefox pour vérifier vos pages, de préférence pas la dernière version. Sachez qu'il peut avoir des différences de rendu suivant les navigateurs et les systèmes d'exploitation.
03 - Il existe deux sortes de balises :
La balise "double" qui est composée d'une balise de début et d'un balise de fin.
La balise "simple":
La plupart des balises ont des attributs.
Un attribut permet de définir certains paramètres.
Par exemple la balise <P> accepte comme attribut l'attribut ALIGN (<P align="left">) qui permet de justifier le texte à gauche.
Un attribut peut avoir plusieurs valeurs.
Par exemple align peut prendre la valeur de "left", "right" ou "justify" selon votre choix.
Chaque attribut HTML a ses valeurs propres.
Une balise peut avoir plusieurs attributs :
Par exemple la balise HTML <BODY> :
04 - Ecriture du code HTML :
Les balises :
L'interpréteur du code HTML ne tient pas compte des majuscules et minuscules. Ecrire <Body> </BODy> revient à la même chose que d'écrire <body> <BODY> ou <BOdY> </body>.
L'agencement des balises :
Attention, une balise "double" ne doit pas contenir qu'une partie d'une autre balise "double".
L'exemple suivant peut générer une mauvaise interprétation :
Il faut écrire
ou
Le texte en lui même : Ecrire "le temps est à l'orage" et la même chose que écrire :
le
temps
est
à l'orage
En fait, l'interpréteur de HTML tient compte des balises, mais pas de l'agencement du texte entre les balises à l'exception de la balise <PRE>
La première page de votre site doit s'appeler index.html.
05 - Insérer un commentaire :
L'insertion de commentaires est pratique surtout quand vous avez des codes de HTML très long cela permet de se repérer.
On l'écrit :
Un commentaire n'est pas interprété par le navigateur.
 |
 |
 |