Démarrer Avec HTML

C'est quoi ?

HTML est l'acronyme de « Hyper Text Markup Language » que l'on peut traduire par « langage à balise hyper texte ».

Il sert à rédiger du contenu pour nos navigateurs via internet ou les réseaux locaux.

Comment ça marche ?

Le principe repose sur la mise en forme de notre contenu de façon structurée via l'usage des balises HTML rédigées dans un fichier qui sera lu par votre navigateur. On se concentre ici sur la partie « créer le contenu », car la partie « générer le rendu sur un écran » est un autre monde dont on va se contenter d'observer le résultat.

Il existe un grand nombre de balises disponibles et vous pouvez créer vos propres balises (le nommage est arbitraire). Elles sont reconnues par les chevrons (< et >) qui entourent le nom de la balise : <balise> (c'est la « définition » d'une balise).

Les balises vont généralement par paires : une balise ouvrante (<html>) et une balise fermante (</html>) avec un slash en plus avant le nom de la balise fermante.

Les balises « ouvrantes » peuvent contenir des attributs : des paramètres spécifiques à la balise qui précise son comportement. Par exemple <a href="https://ici.le/lien">le lien</a> pour définir un lien hypertexte <a> (aka anchor) via l'attribut href (Hyperlink REFerence il me semble : un hyperlien).

Les balises qui sont toutes seules sont « auto-fermantes » car elles ne nécessitent pas de contenu, par exemple la balise Break Row <br/> qui fait un retour à la ligne dans le document. La balise ne peut contenir que des attributs dans sa définition et se termine avec un slash, par exemple la balise image <img src="/source/image.png" width="40px"/>.

N'importe quel morceau de notre document, que ce soit du texte, une image ou un attribut d'un élément du document (sa largeur par exemple), est accessible via un chemin arborescent depuis la racine <html> vers l'élément concerné (c'est une représentation globale et locale de votre document via le modèle DOM).

Typiquement, le titre principal des documents correspond à la balise <h1> et il est généralement un des premiers éléments dans le corps de page (la balise <body>). On le retrouvera donc dans la structure html > body et on pourra l'identifier comme html > body > h1 (cette notation est symbolique pour comprendre le principe d'arborescence mais elle sera utile en CSS).

L'équivalent de la notation ci-dessus sera rédigé de la façon suivante :

<html>
    <body>
        <h1>Le titre principal</h1>
    </body>
</html>

Un exemple de balise

Une balise (ou un élément) peut comporter des attributs et leurs valeurs, on les définit dans la première balise.

Quelques exemples:

La balise <meta> permet d'associer des données au document dans son en-tête. Ici on a défini le paramètre attribut1 avec la valeur attribut2 et il sera contenu dans la page sans être directement visible (comme un post-it que l'on aurait à côté de la page et qui ne la quitte pas).

Un autre exemple très utilisé, un bouton cliquable:

Résultat:

J'utilise les attributs type et onclick de la balise <button>, ce sont des attributs préexistants (comme la majorité des attributs avec lesquels on opère). Il est nécessaire de connaître les attributs principaux des balises dont beaucoup (mais pas tous) sont en commun.

Vous pouvez explorer et vous aider de cette référence sur les balises.

Un exemple de page vide

Pour démarrer un document HTML, il faut créer un nouveau fichier avec l'extension .html et l'éditer avec la structure suivante :

<!DOCTYPE HTML>
<html>
    <head>
        <!-- EN-TÊTE DE LA PAGE -->
    </head>
    <body>
        <!-- CONTENU STRUCTURÉ DE LA PAGE / CORPS DE LA PAGE -->
    </body>
</html>

La page suivante n'affichera rien, il faudra alimenter le corps de page pour le voir apparaître sur votre navigateur. Essayez !

Les en-têtes via <head>

Les en-têtes du document permettent de spécifier des paramètres du document, notamment des informations sur la nature de la page (les métadonnées, par exemple son auteur, sa date de publication ou son type d'encodage). L'encodage est une façon de transcrire les caractères : un simple accent ou un caractère de devise (€$£) peut causer des soucis d'affichage.

Métadonnées via <meta>

On peut prendre l'habitude de déclarer un encodage UTF-8 qui couvre une grande partie des caractères disponibles. On déclare ceci avec le header <meta> suivant:

<meta charset="UTF-8"/>

Vous pouvez définir autant de métadonnées que vous souhaitez, par exemple pour attribuer un auteur à la page:

<meta name="auteur" content="dudu"/>

Ressources externes via <link>

On souhaite parfois associer à notre page des liens externes, la balise <link> répond au besoin. Elle permet notamment d'associer des feuilles de style (aka CSS), également des images (pour les icônes) et d'autres types de liens (les flux RSS par exemple !).

Un peu de CSS via <style>

Ou un peu de style via CSS ...m(^-^)m...

Si HTML nous permet de structurer notre contenu, CSS nous permet de le mettre en forme et de l'animer. Les règles CSS peuvent être rédigées dans un autre fichier et être associées au document via la balise <link> vu précédemment. Il est également possible d'ajouter une balise <style> dans notre en-tête pour déclarer nos règles.

Un exemple avec la balise inventée <balise> dont le texte doit s'afficher en rouge:

<style>
    balise {
        color:red;
    }
</style>

Ceci est un test <balise>simple</balise>.

Résultat:

Ceci est un test simple.

Une règle comporte le nom de l'attribut de style à modifier et la valeur à lui affecter séparés par deux points (:) : color:red. Les règles sont définies entre accolades ({}) après le nom de la balise concernée, séparées par des point-virgules (;). Par exemple:

<style>
    balise {
        color:red;
        background:black;
        width:300px
    }
</style>

On peut ajouter autant de balises <style> que l'on souhaite (même dans le corps de la page), elles seront ajoutées au reste en cascade. Il faut garder en tête que les règles s'accumulent et affectent éventuellement tout le document. Cela doit nous permettre de gérer une séquence de mise en forme et d'animation tout au long du parcours sur notre document. Cela peut être un texte composé de paragraphes, à dérouler, ou au contraire un contenu plus dynamique qui pourra défiler, se déplier ou se replier en fonction du parcours. Le CSS est très puissant et permet d'être très créatif !

Distinction des balises

On peut utiliser plusieurs fois la même balise (par exemple les divisions <div>) mais on peut vouloir les distinguer certaines fois, notamment pour définir un style. Pour cela on peut utiliser les notions de classes et d'identifiant via les attributs class et id.

Les attributs class

L'attribut class permet de gérer les groupements de balises :

Cela permet ensuite de définir une mise en forme pour cette classe (et donc toutes les balises qui ont cet attribut class="red").

Exemple:

<div class="red">Division rouge</div>
<p class="red">Paragraphe rouge</p>
<div class="green">Division pas rouge</div>

<style>
    .red   { color:red }
    .green { color:green }
</style>

Résultat:

Division rouge

Paragraphe rouge

Division pas rouge

En CSS, on désigne une classe avec un point (.) devant le nom: .maClasse.

Les attributs id

L'attribut id permet de distinguer un seul élément (ou balise) parmi tout le reste:

Exemple:

<div class="red">Division rouge</div>
<p class="red">Paragraphe rouge</p>
<div class="green" id="special">Division pas rouge</div>

<style>
    .red     { color:red }
    .green   { color:green }
    #special { color:blue }
</style>

Résultat:

Division rouge

Paragraphe rouge

Division pas rouge

En CSS, on désigne l'identifiant avec un dièse (#) devant le nom : #identifiant-unique.

Pour illustrer l'effet en cascade des règles de style, on peut voir que la dernière règle est celle qui s'applique à notre dernière ligne dans le texte. L'ordre des règles a une importance : le document est lu en entier et il affiche le tout en fonction des dernières règles déclarées pour chaque élément.

L'intérêt est que CSS gère l'aspect événementiel de nos actions sur la page : on peut gérer dynamiquement la mise en forme selon notre besoin.

Un exemple avec un bouton dont le clique change la couleur de son texte:

<button type="submit" 
        onclick="javascript:this.style.color=this.style.color=='red'?'green':'red'">
    Action sur la couleur
</button>

Résultat:

Le parcours de cet exemple est le suivant :

  1. Texte noir (par défaut) lorsque la page se charge
  2. Texte rouge au premier clique
  3. Texte vert au second clique (en boucle avec le rouge)

Balise <details>

Une balise qui gagne à être connue : elle permet de dérouler un panneau et tout son contenu. L'intérêt est de pouvoir utiliser facilement un espace dépliable derrière un titre évocateur.

<details>
    <summary>Liste des courses</summary>
    <ul>
        <li>1kg de carottes</li>
        <li>1kg de pommes de terre</li>
        <li>1 salade</li>
    </ul>    
</details>

Je mets de quoi personnaliser le style :

<style>
    details > summary {
        list-style-type:'\23E9\a0\a0';
        text-align:center;
        width:fit-content;
        padding:20px;
    }
    details > summary:hover { cursor:pointer; background:cornflowerblue;color:white }
    details[open] > summary { list-style-type:'\23EC\a0\a0'; }
</style>

Le résultat:

Liste des courses
  • 1kg de carottes
  • 1kg de pommes de terre
  • 1 salade

Références