Le tout premier site et le tout premier serveur Web voient le jour le 20 décembre 1990 sur l’ordinateur d’un physicien anglais du CERN (Centre Européen de Recherche Nucléaire) nommé Tim Bernes-Lee. Le site, qui n’est consultable que sur le réseau interne du CERN, est affiché sur un outil baptisé « navigateur » que Tim Bernes Lee nomme WorldWideWeb. Berners-Lee, qui travaille avec le belge Robert Caillau, a durant l’année défini les bases de la technologie du web : le protocole HTTP (pour localiser et lier les documents) et le HTML (pour créer les pages). La révolution commence.
Les principes de l’écriture HTML
Tout d’abord sachez que le HTML n’est pas un langage de programmation rassurez vous ! Il s’agit en fait de balisage de texte… Pas besoin de compétence spécifiques en mathématiques, si nous devions faire un parallèle avec une activité du “monde réel” , ce serait celui de la composition typographique en imprimerie ancienne.
Imaginez simplement que vous préparez un texte pour une autre personne qui devra le mettre en page sur une machine sans avoir à réfléchir. Pour lui faciliter la tâche, vous devrez lui fournir un texte qu’elle lira de haut en bas en suivant avec précision les indications sur la nature de l’élément à mettre en page (titre, paragraphe, image, citation, liste, etc.).
Ces indications, pour plus de simplicité encore, seront réduites au minimum en utilisant uniquement des abréviations de quelques lettres et en les plaçant entre deux chevrons pour bien les distinguer du reste du texte. On appellera ces indications de mise en page : des balises !
Les balises HTML respectent donc une syntaxe simple et stricte :
Un chevron ouvrant (<), le nom de la balise, des attributs (Un espace, suivi du nom de l’attribut, d’un signe égal (=) et d’une valeur entre doubles quotes (« »), les attributs sont souvent optionnels mais peuvent être fortement conseillé voir obligatoires selon la balise utilisée ou leur fonction), un chevron fermant (>)
Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <p> est une balise ouvrante, </p> sera la balise fermante correspondante.
Un élément HTML se compose d’une balise ouvrante, d’un contenu textuel et d’une balise fermante :
<p>Bonjour le monde</p>Il existe un grand nombre de balises HTML, il n’est pas possible de créer ses propres balises. Il est donc nécessaire de connaitre le définition de chacune d’elle pour en avoir un usage pertinent et utile. L’utilisation du balisage HTML vise à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c’est-à-dire leur sens, plutôt que de se borner à définir leurs présentations (ou apparence graphique).
HTML s’apparente finalement à un langage littéraire, Il existe une grammaire, une syntaxe, de bons et de mauvais usages, les balises peuvent êtres classifiée,… mais nous reviendrons sur ces notions un peu plus tard.
Structurer une page HTML
Une page HTML doit suivre une structure bien spécifique. Chaque élément la composant défini une zone d’information qui permettra sa bonne traduction par le navigateur.
Voici la structure basique d’une page web :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Structure minimale</title>
</head>
<body>
</body>
</html>
Dans cet exemple, nous identifions rapidement des « zones » encadrées par des balises, ces « zones » seront par la suite enrichies par d’autres balises, mais devront toujours être présentes sur une page HTML. Voici à quoi servent ces éléments :
<!DOCTYPE html>
Définit que le document suit la norme HTML 5.<html></html>
Tout le document (à l’exception du doctype) est entouré des balises<html>.<head></head>
Le contenu de l’élément<head>sert à donner des informations aux agents utilisateurs. Ces informations ne sont donc pas visibles directement par l’utilisateur, à l’exception du contenu de l’élément<title>et du favicon (pas déclaré dans cet exemple). Il est possible de générer dynamiquement ce contenu avec JavaScript.<meta charset=utf-8 />
Cet élément<meta>indique au navigateur quel est l’encodage du fichier. Sans cette information, les navigateurs font des choix par défaut qui sont souvent différents de l’UTF-8 et donc les caractères ne s’afficheront pas correctement. Pour des raisons de performance, il est conseillé de placer cette balise en premier dans l’élément<head>.<title></title>
Le contenu de l’élément<title>sera affiché dans l’onglet de la page dans le navigateur.<body></body>
Et enfin, le contenu visible par l’utilisateur de la page est placé dans l’élément<body>.
Créer sa première page WEB
Nous allons donc pouvoir passer à la création de notre première page html. Cette page affichera un titre, un sous-titre, un paragraphe et une image liée depuis le web.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Ma première page HTML</title>
</head>
<body>
<h1>Bienvenue sur ma première page web !</h1>
<h2>Cette page m'ouvre de nouveaux horizons créatifs.</h2>
<p>Composer une page web n'est finalement pas très compliqué, à croire que le web en fait par des enfants. Mais je m'attend au pire, ce n'est que le début, il me reste encore un peu de chemin avant de pouvoir tordre et sculpter la matière numérique.</p>
<img src="https://i.imgflip.com/g7u55.jpg" title="Même les chats peuvent coder" alt="Un chat gris est en train de manipuler une souris d'ordinateur"/>
</body>
</html>
Enregistrer sa page
Une fois votre page crée, et avant de la terminer, il est important de l’enregistrer. Il y a là aussi quelques petites règles à respecter.
Tout d’abord, un document destiné au web (image, page, fichier) ne devra jamais comporter d’espace, d’accents et de caractères spéciaux. Les espaces pourront être remplacés par des tirets ( – ) ou des tirets bas (_). Si cette règle n’est pas respectée, votre fichier risque simplement de ne pas être lu une fois déposé sur un serveur web. Nous n’écrirons donc pas « Ma page terminée.html » mais plutôt « ma_page_terminee.html ».
Pour que notre page soit correctement interprétée son nom devra obligatoirement être suivi de l’extension .html
Une dernière règle importante est d’enregistrer la page d’accueil de notre site (parfois la seule page de notre site) sous le nom index.html.
Afficher sa page
Ma page est maintenant correctement codée et enregistrée, je vais pouvoir l’afficher. Pour ça, je vais avoir besoin de l’ouvrir dans mon navigateur (Edge, Internet Explorer, Safari, Google Chrome ou… le plus conseillé pour une navigation efficace, éthique, libre et sécurisée : Mozilla Firefox ) et pouvoir constater la bonne interprétation de mon code.
Lorsque je travail sur ma page, inutile de fermer son aperçu dans le navigateur, il me suffira de cliquer sur le bouton de rafraichissement de ma page pour pouvoir voir les modifications apportées.
