HTML

Hypertext Markup Language = Langage de balisage d'hypertexte

HTML : des balises qui définissent les sections et le contenu.

Ex. 

• head : en-tête
• body : corps
• ...

Des balises pour tout : ex. pour appliquer un lien, créer un formulaire pour envoyer des données au serveur, etc

Les balises sont ouvertes puis fermées et encadrent du contenu.

Il est impératif de fermer les balises dans l'ordre inverse duquel on les a ouvertes !

Certaines balises s'ouvrent et se ferment en même temps.

Historique

• HTML 1 : toute première version créée en 1991
• HTML 2 : apparue en 1994 et stoppée en 1996. C'est la première version standardisée par les règles et le fonctionnement de la W3C.
• HTML 3 : apparue en 1996, avec l'ajout des tableaux, des applets, des scripts, le positionnement du texte autour des images, etc
• HTML 4 : version actuellement la plus répandue du HTML, apparue en 1998, elle propose l'utilisation de frames (découpage d'une page web en plusieurs parties), des tableaux complexes, des améliorations sur les formulaires, etc et surtout l'exploitation des feuilles de style.
• HTML 5 : derrière version comportant de nombreuses améliorations comme la possibilité de facilement inclure des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc

HTML 5 = HTML 5 (le contenu) + CSS 3 (la forme) + Javascript (l'interactivité)

Structure minimale d’une page HTML

Le head donne des informations au navigateur web et moteurs de recherches :

• codage des caractères (utf-8 recommandé),
• auteur,
• description,
• mots-clés

Ces informations ne sont directement visibles sur le rendu de la page.

Quelques balises utiles

Titres

Balises	Description
<h1> à <h6>	Titres, par ordre décroissant d'importance

Il est d'usage de n'avoir qu'un seul titre <h1> dans le document et de respecter l'ordre croissant des niveaux.

Contenus

Balises	Description
<p>	Paragraphe
<br> ou <br/>	Saut de ligne

Un lien interne peut être créé avec # défini comme cible du lien.

Hyperliens

Balises	Description
<a>	L'élément <a> permet de définir des liens hypertextes externes ou internes au document. La cible du lien est définie par l'attribut href dont la valeur est une URL.

Grâce à l'instruction mailto, le lien cliquable peut déclencher l'ouverture du client e-mail installé sur le poste informatique de l'internaute.

Remarque : cette pratique est non recommandée, de nombreux robots malveillants récupèrent les adresses électroniques affichées en clair pour envoyer des pourriels.

Mise en page

Balises	Description
<ul> ... </ul>	Liste non triée, liste à puces
<ol> ... </ol>	Liste triée, liste à numéros
<li> ... </li>	Élément de la liste
<table> ... </table>	Définition d'un tableau
<tr> ... </tr>	Définition d'une ligne d'un tableau
<td> ... </td>	Définition d'une cellule de tableau

Éléments de sections

Balises	Description
<section> ... </section>	Section générique dont le contenu est cohérent thématiquement
<article> ... </article>	Contenu autonome dans un document qui doit pouvoir être réutilisé indépendamment
<aside> ... </aside>	Information connexe au contenu principal voisin
<nav> ... </nav>	Contient des liens de navigation vers des fragments du document ou vers d'autres documents (menu)

En-tête et pied

Balises	Description
<header> ... </header>	Introduction d'un document (ex. d'éléments contenus : titre, logo, etc) / en-tête de page, de section, etc
<footer> ... </footer>	Pied de page, d'une section, d'un article, etc

Organisation du document

Balises	Description
<span>	Élément générique pour contenus phrasés / permet de distinguer une portion de texte
<div>	Élément générique pour contenus blocs / permet d'organiser le contenu du document (division ou section)

Mise en forme syntaxique

Balises	Description
<b>...</b>	Gras
<i>...</i>	Italique

Attributs

Les éléments HTML peuvent être complétés par des attributs.

Ils définissent une propriété pour un élément et lui associe une valeur, ils se déclarent au sein de la balise ouvrante de l'élément et se note en minuscules, sa valeur entre guillemets.

Certains attributs sont communs à tous les éléments :

• title : information textuelle sur le contenu de l'élément
• class : associe une ou plusieurs classes à l'élément
• id : nomme un élément de manière unique dans le document

D'autres sont spécifiques à certains éléments : ex. src pour la source de l'image ou alt pour le texte de remplacement (élément <img>).

L'attribut alt est affiché par le navigateur si l’image n’est pas trouvée (fichier manquant) ou dans certains cas spécifiques (navigateur web pour non-voyants).

L'attribut class existe pour tous les éléments. 

Il permet de marquer et donc d'identifier des éléments d'un document comme appartenant à une même classe.

Un élément peut déclarer plusieurs classes.

Remarque : préférez l'usage des balises existantes quand c'est possible (ex. <strong> plutôt que <span class="important">)

L'attribut id permet de désigner de manière unique un élément d'un document (ancre dans la page, style CSS particulier, utilisation en JavaScript, ...).

Formulaires

Les formulaires permettent l'interaction avec l'internaute en lui demandant la saisie d'informations.

Un script traite la soumission du formulaire.

Balises	Description
<form>	Les attributs ... : - action : URL du script de validation de la soumission - method : POST ou GET
<fieldset>	Ensemble de champs sémantiquement proches
<legend>	Légende du <fieldset>
<label>	Étiquette de champs L'attribut for contient l'id, une référence au champ
<input>	Champ de saisie Les attributs : - type : submit / text / textarea (saisie multilignes avec row et cols pour définir le nombre de lignes et colonnes) / date / hidden / checkbox / select (liste déroulante) / ... - name : obligatoire, il s'agit de la référence de la saisie - value : valeur par défaut (facultative) - checked="checked" pour les checkbox - selected="selected" pour les select - multiple="multiple" pour un choix multiple

Les commentaires

Les commentaires ne sont pas exécutés, ils restent par contre visibles dans le code source, attention donc à ne pas y laisser d'informations confidentielles (ex. mots de passe) !