TP et cours (1) : Les langages du Web : Le HTML¶

Introduction/consignes.¶

Pour tout le TP vous commencerez par :

1. Lancer le navigateur CHROME.

2. Se connecter à Atrium.

3. Cliquer sur Capytale.

4. Saisir le code : 1bb2-1085977 dans la case "Entrez un code pour accéder à une activité" et cliquer sur Go.

5. Cliquer sur HTML_SNT.

Vous pouvez maintenant utiliser l'éditeur HTML.

Le HTML.¶

HTML fonctionne grâce à des "balises", notées entre les symboles "< >" qui sont insérées au sein d'un texte "normal". Ces balises forment des blocs utilisés pour construire un site web.

1. Premiers pas :¶

Dans l'éditeur HTML, Copier/coller le texte suivant et sauvegarder (< Ctrl + s >). Observer le résultat dans le navigateur en cliquant sur l'icone en haut à droite en forme de carré (avec une flêche).

In [ ]:
<html>
    <h1> Hello world !</h1>
    <p> Ceci est un paragraphe.</p>
</html>

Vous venez de créer une page HTML (qui ne respecte pas les standards du Web).

Cliquer sur l'icône "Télécharger la page" (en haut à gauche de la fenêtre). Un fichier nommé HTML_SNT.html est téléchargé sur votre PC. Double-cliquer sur ce fichier, un navigateur défini par défaut va se lancer et ouvrir le fichier.

2. Les balises.¶

a. Généralités. Il y a 2 types de balises : <nom_balise> et </nom_balise>.

Une balise de la forme <nom_balise> est une balise ouvrante.

Une balise de la forme </nom_balise> est une balise fermante.

Il existe quelques balises à la fois ouvrantes et fermantes : les balises orphelines notées alors <nom_balise> ou <nom_balise/>. Elles servent généralement à insérer un élément à un endroit précis (image ou saut de ligne)

Un élément HTML peut être soit constitué d’une paire de balises (ouvrante et fermante) et d’un contenu, soit d’une balise orpheline.

Remarque : Contrairement au langage Python, l'indentation n'est pas prise en compte par HTML. On n'est donc pas obligé d'indenter quand on tape du code en HTML, MAIS il faut tout de même se forcer à le faire sinon le code devient vite illisible et les erreurs sont alors très dures à retrouver.

b. Les attributs.

Un attribut est une propriété d’une balise qui va venir la qualifier plus spécifiquement. Ils permettent d'ajouter des informations supplémentaires sur le comportement d’un élément. Pour certains éléments, les attributs vont être facultatifs mais pour d’autres ils sont obligatoires.

Exemple : Modifier le code précédent avec :

In [ ]:
<html>
    <h1> Hello world !</h1>
    <p> Ceci est un paragraphe.</p>
    <p> Ceci est un lien vers le site <a href="https://www.nsirenoir.fr/snt.html">de SNT</a></p>
</html>

On vient d'ajouter un lien hypertexte qui ouvre la page https://www.nsirenoir.fr/snt.html.

La balise utilisée est la balise <a> (abréviation de "anchor" ou "ancre" en français) qui sert à créer des liens vers d’autres pages. Pour la faire fonctionner correctement, on doit lui ajouter un attribut href ("hypertexte reference") qui permet de préciser la cible du lien. Dans le cas de cette balise, l'utilisation d'un attribut est donc obligatoire.

c. Balises à connaître (les plus utilisées).

Il existe de très nombreuses balises en HTML et le but de ce cours n'est ni de toutes les voir ni de toute les connaître par cœur. Malgré tout, il est tout de même important de connaître les plus courantes.

<html>...</html> : début et fin d'un fichier HTML.

<p>...</p> : permet de définir un paragraphe.

<h1>...</h1> : Titre de niveau 1 (titre principal)

<h2>...</h2> : Titre de niveau 2 (moins important que le niveau 1) et on peut ensuite continuer avec <h3>, <h4>, <h5> et <h6>.

<a>..</a> : création des liens hypertextes (signifie anchor).

La balise <a> possède l'attribut (href) qui a pour valeur le chemin du fichier que l'on cherche à atteindre ou l'adresse du site cible. Entre la balise ouvrante et fermante, on trouve le texte qui s'affichera à l'écran (c'est ce texte qui est souligné et de couleur bleue). Les liens hypertextes sont par défaut soulignés et de couleur bleue.

<br> : saut de ligne (balise orpheline).

<img> : afficher des images. C'est une balise orpheline. Elle utilise au moins 2 attributs : src qui doit être égal au nom du fichier image (équivalent de href pour <a>) et alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisées par les non-voyants).

Exemple : Modifier le code précédent avec :

In [ ]:
<html>
    <h1> Hello world !</h1>
    <p> Ceci est un paragraphe.</p>
    <p> Ceci est un lien vers le site <a href="https://www.nsirenoir.fr/snt.html">de SNT</a></p>
    <p> Image de montagne :</p>
    <p><img alt="paysage de montagne" src="https://www.nsirenoir.fr/snt/montagne.jpg"></p>
</html>

d. Une page valide.

Aujourd’hui, tous les navigateurs suivent (globalement) les standards proposés par le W3C, ce qui permet donc d’être à peu près assuré qu’un même code va produire le même résultat quel que soit le navigateur utilisé par les visiteurs qui consultent la page.

Le schéma de base d’une page HTML est toujours le même, c'est ce qu'on appelle la "structure minimale d’une page HTML valide". Pour qu’une page HTML soit déclarée valide, elle doit obligatoirement comporter certains éléments et suivre un schéma précis.

Voici un code "de base" pour créer une page HTML valide :

In [ ]:
<!DOCTYPE html>
<html lang="fr">    
    <head>
        <meta charset="UTF-8">
        <title>Mon site</title>
    </head>
    <body>
        <h1> Hello world !</h1>
        <p> Ceci est un paragraphe.</p>
        <p> Ceci est un lien vers le site <a href="https://www.nsirenoir.fr/snt.html">de SNT</a></p>
        <p> Image de montagne</p>
        <p><img alt="paysage de montagne" src="https://www.nsirenoir.fr/snt/montagne.jpg"></p>
    </body>
</html>

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

  • La 2ème ligne avec la balise <html> est obligatoire et 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 cet exemple, 2 balises : la balise <meta charset="utf-8"> qui permet de définir l'encodage des caractères (il faut utiliser 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> qui permet d'afficher un titre dans la page).

  • La balise <body> va contenir tous les éléments définissant les contenus "visibles" de la page, c’est-à-dire les contenus à destination de l’utilisateur : les différents textes présents dans la page, les images, les liens, etc.

Exercice :¶

Vous allez créer une petite page web sur votre film, votre jeu, votre acteur ou votre chanteur préféré en respectant les standards du web.

La page doit contenir :

  • Un titre principal,
  • 2 titres secondaires,
  • 2 paragraphes de quelques lignes sur le thème choisis (présentation, résumé du film, de l'acteur, du jeu…),
  • au moins une image en lien avec le thème,
  • 2 liens (1 dans chaque paragraphe) qui pointent sur un site web ou une page d'un site web (wikipédia par exemple) en rapport avec le thème.

Le HTML ne doit pas gérer la mise en page (c'est possible, mais c'est une mauvaise pratique), il s'occupe uniquement du contenu et de la sémantique. Pour tout ce qui concerne la mise en page et l'aspect "décoratif" (on parle du "style" de la page), on utilisera le CSS (Cascading Style Sheets) que l'on va voir dans la deuxième partie du chapitre.