1 - Rappel sur le HTML
Qu'est-ce que le Web ? Qu'est-ce qui le caractérise le plus ?
Il s'agit de la notion de documents hypertextes accessibles via des liens (ou hyperliens).
Mais comment parvient-on à créer ces liens ? Comment parvenir à insérer du sens d'action dans un document texte ?
Nous allons avoir besoin de communiquer avec le navigateur et pour cela d'utiliser le langage qu'il comprend : le HTML.
C'est ce code qui est reçu et interprété par votre navigateur (tout comme votre script Python est reçu et interprété par l'interpréteur Python).
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 :
- Fonctions
- Boucles bornées (for),
- Instruction conditionnelle (if)
- Boucles nons bornées (while),
Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser soit
- Atom produit par Github, aujourd'hui possédé par Google, ou
- Notepad ++ (Notepadqq sur Linux), gratuit, ou
- Sublim Text, une alternative de qualité
Evaluation ✎ : 04-11-15
Documents de cours : open document ou pdf
Résumé : Version HTML ou imprimable ou PDF (couleur ou gris)
1 - Les balises structurelles de base
Le HTML 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 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. Comment ? En les entourant.
Exemple d'un titre affichant "Partie 1 : les balises" :
<h1>Partie 1 : les balises</h1>
La plupart des balises comportent
- Une balise d'ouverture définie à l'aide de chevrons et du type de la balise. Exemples
- <p> pour ouvrir un paragraphe
- <a> pour ouvrir une description de lien
- <h1> pour ouvrir une description de titre
- Une balise de fermeture définie à l'aide de chevrons et du type de la balise et d'un slash. Exemples
- </p> pour fermer un paragraphe
- </a> pour fermer une description de lien
- </h1> pour fermer une description de titre
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 préciser au programme qui va lire votre code qu'il s'agit d'un code HTML.
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 doit-elle contenir ? Tout le code de la page. L'indentation permet de voir qu'elle contient deux autres balises :
- Une balise <head> dans laquelle nous allons mettre les informations (hors contenu brut) destinées au navigateur pour parvenir à afficher correctement la page (la langue, l'auteur, l'encodage...).
- Une balise <body> qui va contenir le contenu brut à proprement parler.
2 - Balise body
La balise <body> est destinée à contenir les informations permettant de réaliser l'affichage de la page en elle-même.
Elle est elle-même divisable en plusieurs sous-balises (une fonction - une tâche si vous vous souvenez) :
Balise body
Voilà la structure minimale d’une page HTML :
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>
|
- Une balise <header> qui correspond à l'en-tête (tout en haut habituellement) : on y trouve souvent le titre et/ou le logo du site. Toutes les pages d'un site peuvent avoir le même header.
- Une balise <nav> qui contient la barre de navigation : les liens qui permettent de sauter d’une partie à l’autre. Non obligatoire bien entendu.
- Une balise <main> pour le contenu principal : c’est là que se trouve le contenu réel de votre page.
- 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.
Là où ça devient intéressant, c'est que la balise <main> peut contenir également :
- Une balise <header> qui correspond à l'introduction de cette page précise.
- Une ou plusieurs balises <article> pour les différents contenus de la page.
- Une balise <footer> pour la conclusion de cette page précise.
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, le texte ne respectera pas votre pagination dans le fichier HTML :
- les passages à la ligne ne seront pas respectés,
- le navigateur n'affichera qu'un seul espace même si vous en placez 12 !
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 éléments d'une liste <li> et </li>
- Les balises listes non ordonnées <ul> et </ul>, le ul venant pour unordered list.
- Introduction
- Argumentation 1
- Argumentation 2
- Conclusion
- Les balises listes ordonnées <ol> et </ol>, le ol venant pour ordered list.
- Introduction
- Argumentation 1
- Argumentation 2
- Conclusion
Exemple :
Exemple :
01° Ouvrir votre éditeur de choix. Il faudra choisir
- un encodage UTF-8 (quel nombre associé à chaque caractère)
- le langage HTML (de façon à avoir une coloration syntaxique correcte.
Comment ?
- Avec les Notepad : il suffit de chercher dans la barre des menus Encodage et Langage de la barre du haut.
- 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.
- Copier le code dans l'éditeur de texte
- Sauvegarder le fichier quelque part où vous parviendrez à le retrouver facilement.
- Lancer la page dans le navigateur en double cliquant dessus dans le répertoire où vous l'avez enregistrée.
ATTENTION SUR WINDOWS : pensez également à bien vérifier l'extension .html du nom 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 aucune importance sémantique pour le navigateur. Le navigateur ne les voit pas.
Par contre, veillez à 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 gagner quelques tabulations à l'affichage. Sinon, le texte part rapidement vers la droite...
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. Répondre ensuite aux questions.
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>
|
La balise <head> (dont le fond devrait être noir au vu de la ligne 4) est-elle visible ?
La balise <body> (dont le fond devrait être gris au vu de la ligne 7) est-elle visible ?
...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é.
ATTENTION
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 ?
En conclusion, le navigateur Web est fait pour fonctionner et afficher quelque chose même si la page est mal conçue. Cela ne vous autorise pas à faire n'importe quoi.
Attributs d'une balise HTML
Comme l'avez vu, 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 certains styles CSS à la balise en question.
Le string (délimité par des guillemets) fourni de l'autre côté du signe = correspond donc à du CSS.
background-color:yellow; est donc du code CSS.
On impose donc ici que la propriété CSS background-color (couleur de fond) doit être réglée (attention, avec : en CSS plutôt qu'un signe =) à une 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 (HTML, 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 avoir 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ée que sur les paragraphes, pas sur l'espace entre les paragraphes...
Comme faire alors ?
La solution est d'enfermer vos paragraphes dans une balise-conteneur de type block, une balise <div> : elle va contenir en les entourant nos paragraphes.
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> des lignes 25-26-27 ne possèdent plus d'attribut style : elles font hériter de celle de le conteneur.
Faire interpréter ce code par un navigateur Web pour visualiser deux choses :
- L'espace entre les paragrahes est bien de la bonne couleur de fond
- Les paragraphes ont hérité de la couleur de fond de la balise <div>.
Voici le résultat que cela devrait donner :
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 enfants/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.
On peut également le représenter dans l'autre sens :
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° Réaliser les actions suivantes :
- Ouvrir la fenètre d'inspection : aller dans le menu de Firefox (l'icône avec trois lignes en haut à droite) et chercher Outils Supplémentaires puis 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.
Ouverture plus rapide : sur cette version, un simple clic-droit puis Inspecter suffit pour ouvrir cette fenètre.
Un visuel possible avec la <div> fermée :
Un visuel possible avec la <div> ouverte :
08° Double-cliquer sur un texte dans le code visible dans l'inspecteur. Changer le contenu. Vous devriez voir que cela à modifier le texte à l'écran.
Attention, la modification est purement locale : elle n'est effective que sur votre ordinateur. Vous avez juste modifié le code HTML que vous a envoyé le serveur sur cet ordinateur, pas sur le serveur distant lui-même.
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 atteinte en cliquant sur le lien,
- le texte à afficher jouant le rôle de lien cliquable,
- la façon d'ouvrir le lien (même onglet, nouvel onglet, nouvelle fenêtre...)
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 va parler.
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 qu'elle commence juste après.
- L'adresse éventuelle du service à joindre: on explique à qui on veut parler.
Ici info.cern.ch - Le programme avec qui on désire communiquer sur ce service: on l'identifie par un numéro de PORT. En effet, plusieurs programmes peuvent tourner sur un même ordinateur. L'adresse IP ou le nom du service ne suffit pas.
Ici :80.
La plupart du temps, on ne le transmet pas car :
- 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 c'est :
/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 sur l'URL précédente
- le protocole,
- le service qu'on veut joindre,
- la ressource demandée 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: VALIDEwww.w3schools.securite.com: valide mais le propriétaire est le propriétaire de securite.com, pas celui du site w3schools.poufpouf.w3schools.com: VALIDEw3schools.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'adresse à 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, ou en violet s'il a déjà été utilisé) : 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.
14° Trouvez-vous un thème. Créez une page donnant des détails sur le thème et comportant trois liens vers d'autres sites disponibles sur le Web qui en parlent. 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.
Cette question n'est pas notée en soi mais sert de base à la question suivante qui, elle, est notée.
Pour ouvrir un nouvel onglet dans le navigateur : il suffit de rajouter l'attribut target="_blank" dans la balise d'ouverture <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 d'ouverture <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 :
- Le texte à mettre dans l'onglet du navigateur à l'aide d'une balise nommée <title>
- 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 que vous travaillez en UTF-8 :
<head>
<title>TITRE ONGLET</title>
</head>
<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">
Activité publiée le 08 12 2019
Dernière modification : 13 01 2021
Auteur : ows. h.