Bases du HTML: dix balises pour commencer ↑ 

Deux exemples de pages minimalistes:

Une page de base.

Une version plus évoluée.

Comparaison: il existe des marqueurs de structure explicites nommés "balises": les balises simples commencent par < et finissent par >, le nom de la balise étant entre ces deux signes; les balises doubles débutent par <nom de la balise> et finissent par </nom de la balise>

Le texte visible de la page est encadré par la balise <body> </body> (corps)
les autres balises essentielles sont:
<html> </html> qui indique le début et la fin de la page;
<head> </head> qui indique le début et la fin de l'en-tête; contrairement au corps, le contenu de l'en-tête n'est pas visible et représente des instructions pour le navigateur.
La seule balise indispensable dans l'en-tête est <title> </title> qui encadre le titre de la page que le navigateur affiche comme tite de sa fenêtre ou de l'onglet; le titre de chaque page d'un site web doit être unique; si deux pages ont le même titre le navigateur fera avec, mais les moteurs de recherche comme Google refuseront d'indexer ces pages.

Codage des caractères: j'ai utilisé des éléments spéciaux pour représenter les caractères accentués dans le premier exemple: é est remplacé par &eacute; cet élément est nommé entité. Dans les premiers ordinateurs, le texte devait occuper le moins de mémoire possible et le nombre de bits utilisés pour coder chaque caractère est le plus limité possible; le codage ASCII défini aux Etats-Unis ne gére pas les accents: il utilise 7 bits pour représenter 127 caractères (certains sont des commandes non imprimables). Le langage HTML a utilisé les entités pour contourner cette difficulté et afficher les carctères accentués présents dans les langues autres que l'anglais; parallèlement des codages rétro-compatibles avec l'ASCII ont été utilisés. Le codage le plus répandu pour les pages web et les fichiers textes est l'UTF-8 (équivalent à l'Unicode). Ainsi le caractère € est représenté par le nombre 8364 sur 3 octets; les entités sont donc bien moins utiles aujourd'hui à condition que le codage de la page soit clairement indiqué; c'est le but de la balise <meta charset="UTF-8"> utilisée dans l'exemple 2 (1). Il faut évidemment s'assurer que l'éditeur de texte utilisé produit bien des caractères unicodes quand on les tape au clavier.

Un autre complément utile est l'indication de la langue principale de la page par l'ajout de l'attribut lang="fr" dans la balise <html>.

Les autres balises qu'on ne peut ignorer et qui se placent dans le corps de la page:

<h1> </h1>, <h2> </h2>, <h3> </h3>, etc. encadrent les titres, respectivement de la page, des paragraphes, des sous-paragraphes; pour les moteurs de recherche, ces balises valorisent le texte qu'elles encadrent; ne confondez pas <title> </title> avec <h1> </h1>. Deux pages du site peuvent présenter le même texte encadré par <h1> </h1>

<br> permet de sauter une ligne, c'est une balise simple; alternativement on peut encadrer un paragraphe avec <div> </div> qui est la balise "à tout faire"; pour une ligne blanche, utilisez une balise <br> supplémentaire; traditionnellement on encadre les paragraphes avec <p> </p>, mais cela offre moins de souplesse;

<a href="https://blog.didac-tic.fr" target="_blank">Visitez le blog de Didac-tic</a> est un hyperlien vers une autre page ou un autre site; de nombreux paramètres sont utiles à connaitre comme target="_blank", facultatif qui force l'ouverture d'un nouvel onglet dans le navigateur.
Example: Visitez le blog de Didac-tic.

<img src="/text/cerise/fruits.jpg" alt="cerise"> permet d'insérer une image dans la page ce qui donne:
cerise
L'attribut alt="cerise" permet d'expliquer le contenu de l'image pour un navigateur qui fonctionnerait en mode texte ou pour l'acessibilité de la page (ce descriptif peut être lu pour un non voyant).

<dl> </dl> qui indique le début et la fin d'une liste de description; HTML offre trois types de listes; celle-ci convient sans doute bien à l'exercice qui suivra et les navigateurs se contentent au départ d'en indenter les éléments; chaque élément de la liste est encadré par <dd> </dd> et se trouve inséré entre les balises de début et de fin de liste; vous pouvez imbriquer une liste dans une autre:
<dl>
<dd>Conifères<dl>
	<dd>Mélèze</dd>
</dl> </dd>
<dd>Feuillus<dl>
	<dd>Chêne</dd>
	<dd>Hêtre@</dd>
</dl> </dd>
</dl>
ce qui donne:
Conifères
Mélèze
Feuillus
Chêne
Hêtre

Comme avec les traitements de textes, il sera possible de définir des styles qui modifient profondément l'apparence finale; les styles pouvant s'appliquer à presque chaque balise, HTML peut se révéler bien plus puissant qu'un traitement de texte, mais ce sera pour une seconde étape.

En attendant, vous devriez en savoir suffisamment pour écrire votre première page !

Création d'un document ↑ 

Ouvrez le fichier texte.htm dans un éditeur de texte simple (Notepad sous Windows, Textedit sous MacOS); Si vous les avez installés, vous pouvez aussi utiliser des éditeurs de texte comme TextWrangler ou TextMate. Ajoutez les balises de base décrites plus haut pour mettre le texte en forme.

Si vous l'ignoriez Les doubles espaces ou plus sont ignorés, de même que les retours à la ligne: vous devez utiliser les marqueurs de structure présentés plus haut.

Références

(1) Les fichiers Unicode peuvent aussi commencer par une séquence spéciale de 3 bytes EF BB BF (byte order mark ou BOM), mais cela reste facultatif.
Adresse de cette page: http://www.didac-tic.fr/web/html/index.php