Découverte du HTML

Le HTML (HyperText Markup Language) est un langage de balisage normalisé par le W3C destiné à décrire les documents web multimédias affichés par les navigateurs web. Il décrit le contenu d'une page web. (Les balises gérant la mise en forme doivent, aujourd'hui, être bannies au profit du CSS.)

Créé en 1990 par Tim Berners-Lee pour partager sur l'Internet naissant des documents multimédias, il est devenu le langage de référence pour cela. Les versions successives lui ont permis de s'adapter aux évolutions d'Internet et à l'apparition du CSS qui l'a déchargé de la mise en forme des document pour l'adapter aux nouveaux supports de consultation (tablette, smartphone, …).

La version 4 est restée longtemps la référence. Aujourd'hui on utilise la version 5 qui a pris le pas sur la version XHTML.

Présentation

Les balises

Le contenu du site est placé entre des balises <BALISE>Texte</BALISE>. Elles permettent de décrire les différentes informations composant la page web. Elles ne sont pas affichées à l'écran.

Des précisions sur l'information concernée peuvent être indiquées au début <BALISE attribut='Précision'>Texte</BALISE>.
Parfois, une balise peut se suffire à elle même et ne pas avoir de contenu <BALISE />
Une indentation (décalage du début de la ligne comme pour les algorithme) est généralement utilisée pour faciliter leur lecture et elles s'écrivent alors une par ligne.

Balise standard <balise>Contenu</balise>
Balise vide <balise />
Balise personnalisée <balise attribut=“info”>Contenu</balise>

La structure minimale d'une page HTML

Elle comprend un entête (informations non affichées à l'écran et destinées au navigateur) et un corps (contenu affiché destiné au visiteur).
L'affichage comporte principalement des titres <Hx>Tite</Hx>, des textes <P>Texte</P> et des images <IMG source='image.jpg' />. On trouve aussi des liens vers d'autres pages <A href='nouvelle_page'>Lien à cliquer</A>.

<!DOCTYPE html> <!--Déclaration de la page HTML -->
<html lang="fr"> <!-- Début de page écrite en français -->
  <head> <!-- Début entête -->
    <meta charset="UTF-8"> <!-- Codage des caractères (important mais sera vu plus tard) -->
    <title>Titre de la page</title>
    <link href="style.css" rel="stylesheet" type="text/css" /> <!-- Autre fichier (ici mise en forme) utile à la page -->
  </head> <!-- Fin de entête -->
  <body> <!-- Début du corps -->
    <h1>Titre du chapitre (niveau le plus haut puis h2 à h6)</h1>
    <p>Texte du chapitre avec <a href='adresse de la nouvelle page'>un lien</a> vers une nouvelle page</p>
    <img src='adresse de image' />
  </body> <!-- Fin du corps -->
</html> <!-- Fin de la page -->

La balise initiale <!DOCTYPE html> (d'un format particulier qui ne se ferme pas) indique un document HTML 5.
La balise <!–- Commentaire -–> (elle aussi d'un format particulier) indique des commentaires qui ne seront pas affichés.
La balise <meta charset=“UTF-8”>. Le codage des caractères est généralement spécifiques aux alphabets des pays ou régions. Il est défini par le logiciel utilisé pour créer la page. En Europe de l'ouest, les accents et caractères spéciaux ont été initialement prévus dans le codage ISO-8859-1 puis ensuite dans ISO-8859-15 (mise à jour avec avec le symbole “€”). Le codage UTF-8 est le plus polyvalent et permet de gérer l'ensemble des alphabets existants.
Les titres de chapitres vont de <H1> le plus haut à <H6> le plus bas.

Les balises de base

<HTML>

Entête

<HEAD>,
<TITLE> Titre de l'onglet dans le navigateur
<LINK> Lien vers un fichier de description

Corps

<BODY>
<Hx> Titre de chapitre (x = niveau de 1 à 6)
<P> Texte du paragraphe
<IMG src=“adresse image” /> Image
<A href=“adresse du lien”>Nom du lien</A> Lien vers une autre page

Compléments

Il existe beaucoup d'autres balises et attributs qui seront découverts au fur et à mesure de notre apprentissage.

Depuis le HTML1 au HTML5 qui est la norme aujourd'hui (en passant par le XHTML), les balises ont évoluées et de nouvelles ont été ajoutées. Certaines balises utilisées dans les premières versions et qui étaient destinées à la mise en forme ne le sont plus actuellement (<B><I><S>…). Elles sont aujourd'hui remplacées par le CSS.

Référence

Référence du langage sur w3schools
Référence du langage sur Mozilla
Cours sur le HTML et le CSS sur OpenClassrooms
Liste des balises sur CodesHTTP
Page officielle du HTML sur le site du W3C
Validateur de page HTML sur le site du W3C

Activités

Création d'un premier site en HTML
Les formulaires et leurs différents champs.

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Table des matières