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.

Référence

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

Présentation

Les balises

Le contenu du site doit être placé entre des balises qui en organisent les différentes parties. <BALISE_début>Parti du site</BALISE_fin>

Des précisions sur les balises peuvent être données au début <BALISE_début attribut='Précision'>.
Parfois, une balise peut ne pas avoir de contenu <BALISE_vide />
Il existe des sites expliquant les nombreuses balises, exemple : http://www.w3schools.com
Une indentation (décalage du début de la ligne) est utilisée pour faciliter la lecture des balises.

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

La structure minimale d'une page HTML

Elle comprend un entête (informations non affichées à l'écran) et un corps (contenu affiché).
L'affichage comporte principalement des titres <Hx>, des textes <P> et des images <IMG>. 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> <!-- Début de page -->
  <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>
  </head> <!-- Fin de entête -->
  <body> <!-- Début du corps -->
    <h1>Titre du chapitre (niveau le plus haut)</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 défini par le logiciel utilisé pour créer la page. Il est généralement spécifiques aux alphabets des pays ou régions. UTF-8 est le codage le plus polyvalent (utilisé par “SublimeText”). En Europe nos accents ont été initialement prévus dans le codage ISO-8859-1 puis ensuite dans ISO-8859-15 avec le symbole “€” (utilisé par “Notepad” de Windows).
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

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

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