Le couple HTML+CSS (« Hyper Text Markup Langage » et « Cascading Style Sheets ») permet de créer des pages visibles sur un navigateur Web (Browser en Anglais).

Pour faire simple, le code HTML défini le contenu d'une page et le code CSS sa forme :

Dans cette activité, nous allons exclusivement nous intéresser au HTML puis dans l'activité suivante au CSS.

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera, etc.), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles... c'est un langage de balisage servant à représenter.

Pour coder plusieurs solutions sont possibles :

• Avec éditeur en ligne (comme "jsfiddle" ou "jsbin") pratique juste pour tester du code
• Avec un éditeur de texte quelconque (comme "wordpad") en enregistrant le fichier avec l'extension html
• Avec un smartphone (comme "Easy HTML" sous Androïd ou "Coda" sous IPhone)
• Avec un éditeur spécifique gratuit (comme "Notepad++" sous Windows) un éditeur plus performant payant (comme "Sublime Text")

Pour aborder le HTML, nous allons, dans un premier temps utiliser le site "jsfiddle.net".

À faire vous-même 1 :

• Après avoir lancé votre navigateur web, tapez http://jsfiddle.net/  dans la barre d'adresse.

Vous devriez voir apparaître ceci :

Nous allons pour l'instant uniquement utiliser la fenêtre « HTML » et la fenêtre « Résultat ».

À faire vous-même 2 :

• Écrivez le code HTML suivant :

• Cliquez sur "run" en haut à gauche pour afficher le résultat puis observer le résultat

Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise que l'on ouvre et que l'on ferme. Une balise ouvrante est de la forme <nom_de_la_balise>, les balises fermantes sont de la forme </nom_de_la_balise>.

En observant attentivement le code, vous devriez forcément remarquer que toute balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n'a aucune espèce d'importance, la seule question à se poser ici est : ai-je bien refermé toutes les balises que j'ai ouvertes ?

Enfin pour terminer avec les généralités sur les balises, il est important de savoir qu'une structure du type :

<balise1>
<balise2>
</balise1>
</balise2>

est interdite, la balise2 a été ouverte après la balise1, elle devra donc être refermée avant la balise1.

En revanche, l'enchaînement suivant est correct :

<balise1>
<balise2>
</balise2>
</balise1>

Notez que dans notre exemple nous respectons bien cette règle « d'imbrication » des balises avec la balise <p> et la balise <strong>.

Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises). Par exemple le texte situé entre la balise ouvrante et fermante <h1> est obligatoirement un titre important (il existe des balises <h2>, <h3>... qui sont aussi des titres, mais des titres moins importants (sous-titre)). La balise <p> permet de définir des paragraphes, enfin, la balise <strong> permet de mettre en évidence un élément important.

Vous devez aussi savoir qu'il existe des balises qui sont à la fois ouvrantes et fermantes (<balise>) : un exemple que vous connaissez déjà, la balise permettant de sauter une ligne, la balise <br> (balise qu'il faut d'ailleurs éviter d'utiliser par différentes raisons que nous n'aborderons pas ici).

JSFIDDLE est un très bel outil et autres outils similaires en ligne, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).

Nous allons créer 1 fichier qui contiendra du HTML (index.html).

À faire vous-même 3 :

• À l'aide d'un éditeur de texte si possible spécial code HTML comme "Notepad++",créez un nouveau fichier
• Sauvegardez-le en précisant son nom avec obligatoirement l'extension ".html", par exemple "index.html"
• Écrivez le code suivant dans votre éditeur de texte (sans oublier de sauvegarder quand vous avez terminé) :

• Testez votre code à l'aide d'un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier index.html ou à partir de « Notepad++ » en cliquant sur le menu « Exécution » puis en choisissant le navigateur Web de votre choix

Dans l'exemple du "À faire vous-même 2", vous reconnaissez le code se trouvant entre les balises <body> :

<body>
......
</body>

Tout votre code HTML devra se trouver entre ces 2 balises.

Le reste des balises devraient vous êtes inconnues. Passons-les en revue :

La première ligne (<!doctype html>) permet d'indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.

La balise <html> est obligatoire, l'attribut lang="fr" permet d'indiquer au navigateur que nous utiliserons le français pour écrire notre page.

Les balises <head>...</head> délimitent ce que l'on appelle l'en-tête. L'en-tête contient, dans notre exemple, 2 balises : la balise <meta charset="utf-8"> qui permet de définir l'encodage des caractères (utf-8) et la balise <title> qui définit le titre de la page (attention ce titre ne s'affiche pas dans le navigateur, ne pas confondre avec la balise <h1>).

À faire vous-même 4 :

• En prenant modèle sur l’exemple ci-dessous et en effectuant des recherches sur internet, créez votre page Web autour d’un faux « fake-news » inventé par vos soins :

Code HTML commenté :

Résultat de la page Web sur navigateur :