Rappel HTML

Identification

Infoforall

1 - Rappel sur le HTML


Qu'est-ce que le Web ? Qu'est-ce qui le caractérise le plus ?

Nous avons vu qu'il s'agissait de la notion de documents hypertextes accessibles via des liens (ou hyperliens).

Mais comment parvient-on à créer ces liens ?

Nous allons avoir besoin de communiquer avec le navigateur et pour cela d'utiliser le langage qu'il comprend : le HTML.

Logo Html5

Nous allons devoir utiliser les URLs vues dans l'activité précédente ... Cela nous permettra également de montrer pourquoi il faut être vigilant lorsqu'on reçoit des liens par Email ou lorsqu'on clique sur un lien sur le Web.

Prérequis : Avant de commencer les activités de cette partie sur le Javascript, il convient d'avoir quelques notions en HTML et d'avoir vu au préalable les outils basiques de la programmation : boucles bornées (for), boucle non bornée (while), test conditionnelle (if) et fonctions.

Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser Atom produit par Githhub, aujourd'hui possédé par Google, ou Notepad ++ (Notepadqq sur Linux). Sublim Text est également une alternative de qualité.

Evaluation ✎ : 04-11-15

1 - Les balises structurelles de base

Vous avez vu que le HTLM est un langage descriptif, basé en grande partie sur le principe de XML.

Il ne s'agit pas d'un langage de programmation mais d'un simple texte codé qui sera analysé et interprété par le navigateur

  • Firefox de la fondation Mozilla,
  • le moteur Chronium,
  • Chrome basé sur Chronium et produit par Google.
  • Safari pour Apple

Une page HTML contient bien plus que du texte. Elle contient surtout l'organisation de ce texte : lorsque vous lisez un texte, une même phrase aura un impact différent selon qu'elle se situe dans le titre de l'ouvrage, dans l'introduction, dans le corps du texte ou dans la conclusion.

Et bien, HTML permet justement de structurer votre texte en le plaçant dans des balises bien spécifiques.

Balises (Tags en anglais)

Les balises servent à définir clairement les éléments qu'on veut transmettre au navigateur.

La plupart des balises comportent

  • Une balise d'ouverture définie à l'aide de chevrons et du type de la balise. Exemple <p> ou <a>.
  • Une balise de fermeture définie à l'aide de chevrons et du type de la balise et d'un slash. Exemple </p> ou </a>.

La traduction de balise est tag.

Structure globale d'une page HTML

Voici un code HTML minimaliste, n'affichant rien et qu'il faudra compléter lorsque vous allez créer vos propres pages HTML :

1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

La première ligne d'une page HTML doit contenir l'indication <!DOCTYPE html> permettant de savoir qu'il s'agit d'un code HTML. Il existe d'autres types de codification, par exemple le XHTML, qui nécessite beaucoup plus de rigueur dans l'application des règles sur les balises.

Ensuite en ligne 2, on trouve une balise qui signale au navigateur qu'on commence à lui transmettre le contenu HTML. Cette balise est bien nommée puisqu'elle se nomme <html>. Que contient-elle ? L'indentation permet de voir qu'elle contient deux balises :

  • Une balise <head> dans laquelle nous allons mettre des indications destinées au navigateur pour parvenir à afficher correctement la page.
  • Une balise <body> qui va contenir le code HTML du contenu à proprement parler.

La balise body contient tout ce qui va s'afficher à l'écran.

La balise head contient tout ce qu'on veut transmettre au navigateur sans l'afficher à l'écran.

Nous allons maintenant voir ce qu'il faut mettre dans la balise <body>.

2 - Balise body

La balise <body> est destinée à contenir les données permettant de réaliser l'affichage de la page en elle-même. Elle est elle-même divisable en plusieurs sous-balises :

Balise body

Voilà la structure minimale habituelle du contenu visible d’une page  :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!DOCTYPE html> <html> <head> </head> <body> <header> </header> <nav> </nav> <main> </main> <footer> </footer> </body> </html>
  1. Une balise <header> qui correspond à l'en-tête (tout en haut habituellement) : on y trouve souvent le titre ou le logo du site.
  2. Une balise <nav> qui contient la barre de navigation : les liens qui permettent de sauter d’une partie à l’autre. Non obligatoire bien entendu.
  3. Une balise <main> pour le contenu principal : c’est là que se trouve le contenu réel de votre page.
  4. Une balise <footer> pour le pied de page : on y trouve les références du site, les moyens de contacter les auteurs … On le trouve habituellement en bas de page.

Nous allons pouvoir indiquer au navigateur si un texte ou une image se trouve dans l’en-tête ou le pied de page par exemple. A quoi cela va-t-il lui servir ? Et bien à choisir la priorité des éléments à afficher par exemple en cas de difficulté de téléchargement ou autres. On peut toujours se passer du pied de page dans un premier temps, c’est plus difficile sans le contenu. De la même façon, les robots des moteurs de recherche vont recolter ces informations et un programme tentera ensuite de voir la pertinence de votre page.

Que peut-on afficher facilement ?

Du texte !

Mais attention, de base, le texte ne respectera jamais votre pagination : les passages à la ligne ne seront pas respectés, pas plus que les endroits où vous desirez placer plus d'un espacement.

Pour passer à la ligne, il faut encadrer vos textes dans des balises dites balises blocs, block en anglais.

Balises de base du type block

Une balises de type block sont les balises pour lesquelles la balise d'ouverture ET la balise de fermeture provoque un passage automatique à la ligne.

Par exemple

  • Les balises parapagraphe <p> et </p>
  • Les balises titre principal <h1> et </h1>, le h venant pour header.
  • Les balises titre secondaire <h2> et </h2>, le h venant pour header.
  • Jusqu'aux balises <h6> et </h6>.
  • Toutes les balises structurelles précédentes :
    • <body> et </body>
    • <nav> et </nav>
    • <main> et </main>
    • <header> et </header>
    • <footer> et </footer>
  • Les balises listes non ordonnées <ul> et </ul>, le ul venant pour unordered list.
  • Les balises listes ordonnées <ol> et </ol>, le ol venant pour ordered list.
  • Les balises éléments d'une liste <li> et </li>

01° Ouvrir votre éditeur de choix. Choisir un encodage UTF-8 (quel numéro associé à chaque caractère) ainsi que HTML comme langage. Comment ?

  • Avec les Notepad : il suffit de chercher dans la barre des menus Encoding et Langage.
  • Avec Atom : il suffit de regarder en bas à droite : UTF-8 devrait être choisi par défaut. A sa droite se trouve le type de fichier. Vous devriez voir Plain Text pour l'instant. Il suffit de cliquer dessus et de le remplacer par HTML.

Atom a la particularité de cacher sa barre des menus par défaut. Pour la faire apparaitre, il suffit d'appuyer sur la touche  ALT . Vous pourrez alors créer un nouveau fichier (FILE - NEW FILE) si Atom s'ouvre sur ... rien ...

02° Tester le code HTML ci-dessous qui remplit un peu les balises de la partie <body>. Il vous permet de voir l'effet de quelques unes des balises blocs les plus utilisées.

Pensez à sauvegarder le fichier quelque part où vous parviendrez à le retrouver facilement. Pour lancer votre page, il suffit de double-cliquer dessus dans le répertoire où vous l'avez enregistrée.

WINDOWS : pensez également à bien vérifier l'extension .html de votre fichier.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<!DOCTYPE html> <html> <head> </head> <body> <header> <h3>Le titre de mon site</h3> </header> <nav> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <p>Bla bla.</p> <h2>2 Deuxième partie</h2> <p>Encore du blabla.</p> </main> <footer> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>

Remarque : contrairement à Python, la tabulation n’a ici aucun rôle sémantique : le navigateur ne les voit pas. Par contre, veuillez à respecter la structure qui consiste à tabuler dès qu’on rentre dans une nouvelle balise : cela permettra à la personne qui lit votre code de mieux le comprendre.

Comme la tabulation n'a pas d'importance pour le navigateur, nous allons en profiter pour ne pas tabuler les balises les plus communes ( <head> et <body> ) par la suite : cela nous permettra de ne gagner quelques tabulations à l'affichage.

Pour voir un peu plus clairement l'enchainement des balises, nous allons rajouter des couleurs de fond aux différentes balises. Le principe du CSS lui-même sera vu un peu plus bas. Pour l'instant, nous ne l'utiliserons que pour mettre en valeur les différentes balises.

<head> en fond noir / black.
<body> en fond gris / grey
<header> en fond noir / black
<nav> en fond noir / black
<body> en fond noir / black

Nous ne mettrons que très très rarement du style CSS directement dans le HTML. Cela ne permet pas d'unifier et de modifier automatiquement toutes les pages d'un site en même temps.

03° Utiliser le code HTML modifié avec couleurs.

La balise <head> dont le fond est noir est-elle visible ?

La balise <body> dont le fond est gris est-elle visible ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<!DOCTYPE html> <html> <head style="background-color:black;"> </head> <body style="background-color:grey;"> <header style="background-color:red;"> <h3>Le titre de mon site</h3> </header> <nav style="background-color:blue;"> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main style="background-color:green;"> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <p>Bla bla.</p> <h2>2 Deuxième partie</h2> <p>Encore du blabla.</p> </main> <footer style="background-color:yellow;"> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>

...CORRECTION...

Le fond noir de la balise <head> n'apparait pas à l'écran. C'est normal : son contenu n'est pas normalement un contenu destiné à être affiché. Elle ne doit contenir que des informations à transmettre au client (le navigateur par exemple) pour qu'il affiche correctement le reste.

Par contre, on voit que le fond gris englobe bien toutes les autres balises colorées : la balise <body> est bien le conteneur de toutes les balises dont le contenu est affiché.

Tant que le contenu est placé dans votre page html, il sera affiché.

Quelque soit la balise dans laquelle vous l'avez placé !

On pourrait donc croire qu'il ne sert à rien de structurer le texte et de se demander dans quelle balise le placer lorsqu'on se crée une petite page personnelle. C'est faux. C'est même une très mauvaise idée, un peu comme si vous réalisiez un texte de 300 pages sans paragraphe, sans partie, sans introduction ni conclusion. Nous allons voir qu'on peut agir sur les balises à l'aide du CSS. Or, si vous voulez que le texte de l'introduction n'apparaisse pas de la même façon que le texte de l'article, il va bien falloir les distinguer non ?

Attributs d'une balise HTML

Comme vous avez pu le voir, nous avons rajouter des éléments dans certaines balises d'entrée.

L'élément style se nomme un attribut de balise. On lui affecte une valeur en utilisant un signe =, comme pour toutes affectations.

<footer style="background-color:yellow;">

Cet attribut style est un attribut un peu particulier : il permet d'imposer certaines règles CSS à la balise en question.

Le string fourni de l'autre côté du signe = correspond donc à du CSS.

background-color:yellow; est donc du code CSS.

Il veut dire que la propriété CSS background-color (couleur de fond) doit être réglée (attention, notez la présence du : plutôt qu'un signe =) à la valeur yellow.

Dernière remarque : on devra placer un point-virgule ; à la fin de chaque réglage CSS.

✎ 04° Modifier un peu les couleurs de fond (propriété background-color) ou les couleurs de texte (propriété color).

Il existe de très nombreux sites présentant le code couleur HTML. Le site w3schools notamment possède une telle page et de très nombreuses pages très pédagogiques sur les différentes technologies web (htlm, css, javascript ...) : couleurs HTML sur w3schools.

Si vous voulez modifier les deux à la fois, il faudra écrire quelque chose comme

<footer style="background-color:black;color:red;">

3 - Balise générique block : div

Imaginons maintenant qu'on désire avec le fond des paragraphes de la partie main en olive. Quitte à piquer les yeux, autant voir les choses en grand.

Voici le code qu'on pourra écrire pour l'instant :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
<!DOCTYPE html> <html> <head> </head> <body style="background-color:grey;"> <header style="background-color:red;color:white;"> <h3>Le titre de mon site</h3> </header> <nav style="background-color:blue;"> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main style="background-color:green;"> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <p style="background-color:olive">Bla bla.</p> <p style="background-color:olive">Encore du Bla bla.</p> <p style="background-color:olive">Toujours du Bla bla.</p> <h2>2 Deuxième partie</h2> <p style="background-color:olive">Encore du blabla.</p> </main> <footer style="background-color:yellow;color:DarkGoldenRod;"> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>

05° Utiliser ce code pour visualiser le problème qu'il va causer....

Comme vous pouvez le voir, le problème vient du fait que la couleur de fond n'est placé que sur les paragraphes, pas sur l'espace entre les paragraphes...

Visuel sans utilisation des balises div
Le visuel que vous devriez obtenir

Comme faire alors ?

La solution est d'enfermer vos paragraphes dans une balise-conteneur de type block, une balise div.

Et, c'est sur cette balise div que nous allons fixer la couleur de fond.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<!DOCTYPE html> <html> <head> </head> <body style="background-color:grey;"> <header style="background-color:red;color:white;"> <h3>Le titre de mon site</h3> </header> <nav style="background-color:blue;"> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main style="background-color:green;"> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <div style="background-color:olive"> <p>Bla bla.</p> <p>Encore du Bla bla.</p> <p>Toujours du Bla bla.</p> </div> <h2>2 Deuxième partie</h2> <p style="background-color:olive">Encore du blabla.</p> </main> <footer style="background-color:yellow;color:DarkGoldenRod;"> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>

06° Visualiser dans ce nouveau code que :

  • La balise div contient bien les trois balises p voulues entre sa balise d'entrée (ligne 23) et sa balise de sortie (ligne 27)
  • La propriété background-color est fixée sur la balise div
  • Les balises p ne possèdent plus dans le code d'attribut style

Utiliser ce code pour visualiser deux choses :

  1. L'espace entre les paragrahes est bien de la bonne couleur de fond
  2. Les paragraphes ont hérité de la couleur de fond de la balise div.

Voici le résultat que cela devrait donner :

Visuel avec utilisation des balises div
Le visuel que vous devriez obtenir
Parent et Child

Lorsqu'une balise contient d'autres balises, on dit qu'elle est la balise-mère des balises directement contenues dans celle-ci.

Ici la balise div est donc la balise-mère (on dira parent en anglais) des trois balises p.

A l'inverse, ces trois balises p sont des balises-filles de la balise div. En anglais, on dira child ou children au pluriel.

Par défaut, les balises children héritent des propriétés CSS de leur balise parent.

Toute cette structure se nomme un arbre à cause de l'imbrication des balises les unes dans les autres.

Le DOM en arbre montant
Visualisation de l'arbre DOM en version montante

On peut également le représenter dans l'autre sens :

Le DOM en arbre descendant
Visualisation de l'arbre DOM en version descendante

4 - Outils de développement

La plupart des navigateurs (et des éditeurs de texte) intégrent des outils permettant de visualiser tout cela.

Nous travaillerons ici avec Firefox et Chrome.

07° Aller dans le menu de Firefox (l'icône avec trois lignes en haut à droite) et chercher Outils de Développement ou Développement Web. En sélectionnant inspecteur, vous allez être capable de voir le code source HTML et de cliquer sur les petits flêches permettent d'ouvrir ou de fermer les contenus de balises.

Agrandir la zone de visalisation du code. Ouvrir et fermer quelques balises pour comprendre le fonctionnement des balises insérées les unes dans les autres.

Le visuel avec la div fermée :

DIV fermé
Visuel en fermant la balise div

Le visuel avec la div ouverte :

DIV ouverte
Visuel en ouvrant la balise div

08° Double-cliquer sur un élément que vous voyez à l'écran et dans le code de l'inspecteur. Changer le contenu. Vous devriez voir qu'on peut le modifier à l'écran.

Attention, la modification est purement locale : elle n'est effective que sur votre ordinateur.

09° Fermer l'outil d'inspection. Cliquer droit sur la page et sélectionner code source de la page.

Vous devriez voir apparaître le code dans un nouvel onglet.

5 - Créer des liens externes à la page

Pour créer un lien hypertexte (actuellement un texte sur lequel on peut cliquer pour activer le lien), on utilise la balise <a>. Néanmoins, elle est plus délicate à manipuler que la plupart des autres balises : il faut renseigner la destination, le texte à afficher, la façon d'ouvrir le lien...

Pour créer un lien, vous avez besoin de connaitre l'URL de la ressource désirée.

URL

URL veut dire Uniform Resource Locator, soit « localisateur uniforme de ressource ».

C'est un système normé (possédant des règles) permettant d'effectuer une demande sans créer d’ambiguïté sur la demande elle-même : chaque demande ne peut renvoyer qu'une page unique.

Décomposition d'une URL

On voit que l'adresse fournie est composée de plusieurs parties :

http://info.cern.ch:80/hypertext/WWW/TheProject.html

  • Le protocole : on explique dans quelle langue on parle.
    Ici http://
    • http:  : on commence par signaler le protocole qu'on désire utiliser pour communiquer avec le serveur HTTP. On doit faire suivre le nom du protocole par le caractère « deux points »  :  pour signaler qu'on a fini de transmettre le nom du protocole.
    • // signale que notre protocole nécessite qu'on fournisse une adresse (ici un serveur HTTP) et que nous allons le transmettre juste après.
  • L'adresse éventuelle du service à joindre: on explique à qui on veut parler.
    Ici info.cern.ch
  • Le logiciel avec qui on désire communiquer: on l'identifie par un numéro de PORT.
    Ici :80
    Les serveurs HTTP sont par défaut identifiés par le port 80.
    Les serveurs HTTPS sont par défaut identifiés par le port 443.
  • La demande à faire pour atteindre la ressource une fois qu'on discute avec le bon service : on explique la ressource qu'on veut obtenir sur le service précédent.
    Ici /hypertext/WWW/TheProject.html
    • Une adresse commençant par  /  veut dire que l'adresse qui suit est une adresse absolue sur le site : on va donner un chemin partant du « début », la racine du site.
    • Cette adresse peut être omise : si on ne fournit rien derrière le nom du site, cela veut donc dire qu'on désire simplement la page d'accueil.

10° Placer l'adresse ci-dessous dans la barre d'adresse de votre navigateur après avoir ouvert un nouvel onglet.

https://www.w3schools.com:443/html/default.asp

Regardez l'adresse transformée dans la barre du navigateur. Pourquoi n'avez-vous certainement jamais vu ce numéro de port ? Tout simplement car le navigateur ne l'affiche pas si le port correspond bien au port standard pour ce protocole.

✎ 11 ° Déterminer alors

  • le protocole,
  • le site exact à joindre,
  • la demande à faire sur le site

...CORRECTION...

  • le protocole : https, attention au S.
  • le site exact à joindre : www.w3schools.com
  • la demande à faire sur le site : /html/default.asp

12° Déterminer les adresses valides qui peuvent être effectivement créées par le propriétaire du nom de domaine w3schools.com 

  • www.securite.w3schools.com
  • www.w3schools.securite.com
  • poufpouf.w3schools.com
  • w3schools.poufpouf.com

...CORRECTION...

Il faut juste se souvenir que le propriétaire d'un sous-domaine peut rajouter autant de sous-domaines qu'il veut à GAUCHE de son nom de domaine.

  • www.securite.w3schools.com : VALIDE
  • www.w3schools.securite.com : valide mais le propriétaire est le propriétaire de securite.com, pas celui du site w3schools.
  • poufpouf.w3schools.com : VALIDE
  • w3schools.poufpouf.com : valide mais le propriétaire est le propriétaire de poufpouf.com, pas celui du site w3schools.

Maintenant que vous savez comment lire une URL, nous allons pouvoir créer des liens.

Un lien est un moyen d’accéder à un autre endroit :

Commençons par décrire la façon de créer un lien externe.

Balise a de lien hypertexte

La balise <a> possède plusieurs attributs. On n'écrit jamais juste <a> !

Transmission de l'addresse à atteindre

On doit lui spécifier au moins l'attribut href qui permet de définir l’adresse du lien.

Par exemple, pour atteindre l'activité que vous êtes en train de réaliser, il suffit d'aller lire l'adresse dans la barre du navigateur et de la recopier :

1
<a href="https://www.infoforall.fr/javascript/rappel-sur-le-html/"></a>

Transmission de l'affichage du lien

Le texte contenu entre la balise d'ouverture <a> et de fermeture </a> définit ce qui sera affiché comme texte-lien. Par exemple, le texte suivant (qui par défaut apparait en bleu souligné sur la majorité des navigateurs) : Ici pour retourner à l'accueil

Voilà le code utilisé pour réaliser le lien ci-dessus :

1
<a href="https://www.infoforall.fr/">Ici pour retourner à l'accueil</a>

La balise a est une balise inline

On remarquera que la balise <a> n'est pas une balise block : on ne passe pas à la ligne.
Il s'agit d'une balise inline qui ne déclenche donc aucun passage à la ligne.

Si vous voulez que votre lien soit sur une ligne indépendante, il faut donc le placer à l'intérieur d'une balise block (<p> par exemple).

1
<p><a href="https://www.infoforall.fr/">Ici pour retourner à l'accueil</a></p>

Pourquoi a ? a comme anchor ou ancre.

13° Survolez le lien ci-dessous. Regardez ce qui s'affiche en bas à gauche de l'écran. Nous verrons qu'il ne faut pas nécessairement faire confiance à cette information car on peut modifier le lien après que la personne ai cliqué , en utilisant javascript.

Ici pour retourner à l'accueil

14° Trouvez-vous un thème. Créez une page expliquer le thème et comportant trois liens vers des pages intéressantes sur ce thème. Attention, ce n'est pas le thème qui est intéressant pour la notation. Juste votre capacité à créer une page et d'y insérer des liens.

Pour ouvrir un nouvel onglet dans le navigateur : il suffit de rajouter l'attribut  target="_blank"  dans la balise a à côté du href.

<a href="http://www.w3schools.com/css/" target="_blank">Vers le site w3schools.com</a>

Ce qui donne : Vers le site w3schools.com

Pour rajouter un descriptif du lien lorsqu'on le survole : il suffit de rajouter l'attribut  title="Attention, on ouvre un nouvel onglet !"  dans la balise a à côté du href.

<a href="http://www.w3schools.com/css/" target="_blank" title="Attention, on ouvre un nouvel onglet !">Vers le site w3schools.com</a>

Ce qui donne : Vers le site w3schools.com

✎ 15° Modifiez une dernière fois votre page : les liens devront s'ouvrir dans un nouvel onglet et on veut avoir un descriptif de la cible du lien lorsqu'on le survole.

6 - Balise head

Dans la balise <body> nous avons donné le contenu visible, le « corps » de la page.

Balise head

Dans une autre balise nommée <head>, nous pouvons donner au navigateur plein d’informations qui n’ont pas à être affichées dans la fenêtre d’affichage du navigateur. Nous pouvons ainsi lui donner :

  1. Le texte à mettre dans l'onglet du navigateur à l'aide d'une balise nommée <title>
  2. <head> <title>TITRE ONGLET</title> </head>
  3. L’encodage de la page : l'ordinateur ne stocke pas de lettres mais uniquement des nombres. L'encodage correspond donc à la façon dont chaque lettre est associée à un nombre et comment ce nombre est stocké sous forme d'octets dans l'ordinateur. L’encodage UTF-8 est devenu la norme pour l’instant. C'est ce que le navigateur prendra normalement si on ne lui transmet rien. Mais les navigateurs sont aussi programmés pour tenter de deviner l'encodage. Parfois ça se passe mal. Autant dire clairement à votre navigateur qui vous travaillé en UTF-8 :
  4. <head> <title>TITRE ONGLET</title> <meta charset="UTF-8"> </head>

Et encore d'autres choses que nous verrons plus tard.

Balise orpheline

Comme vous pouvez le constater, la balise <meta> est particulière : elle ne comporte qu'une balise et pas la doublette balise d'ouverture - balise de fermeture. On dit qu'elle est orpheline.

Autre particularité : on lui transmet un attribut charset et sa valeur "UTF-8".

16° Insérer les indications de la balise head pour que le navigateur affiche BONJOUR dans l'onglet de votre page.

...CORRECTION...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
<!DOCTYPE html> <html> <head > <title>BONJOUR</title> <meta charset="UTF-8"> </head> <body style="background-color:grey;"> <header style="background-color:red;"> <h3>Le titre de mon site</h3> </header> <nav style="background-color:blue;"> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main style="background-color:green;"> <h1>Le titre de ma page.</h1> <h2>1 Première partie</h2> <p>Bla bla.</p> <h2>2 Deuxième partie</h2> <p>Encore du blabla.</p> </main> <footer style="background-color:yellow;"> <p>Pour contacter le webmaster, on met son adresse ici.</p> <p>Pour l'instant, il préfère rester discret :</p> <p>le contenu n'est pas très conséquent.</p> </footer> </body> </html>
Langage utilisé sur la page

L'indication de la langue utilisée sur la page HTML se fait elle directement à l'aide d'un attribut applicable à la balise <html> :

<html lang="fr">

Nous continuerons à réviser ou à découvrir HTML dans l'activité suivante.

Nous verrons quelques balises orphélines comme br et img pour insérer des images. Et quelques compléments.

Ensuite, une courte activité sur le CSS.

Enfin, nous pourrons créer nos premières pages interactives à l'aide de javascript. Nous pourrons ainsi faire des calculs, modifier l'apparence de la page après chargement ...

Activité publiée le 08 12 2019
Dernière modification : 25 01 2020
Auteur : ows. h.