Title: Web - Séance 2 - HTML

HTML

Q: Cochez les affirmations correctes.
- Le langage HTML permet de faire communiquer deux machines sur Internet.
- Le langage HTML permet de structurer les éléments d'une page Web. (correct)
- Une page Web est un fichier texte dont l'extension est .web
- Une page Web est un fichier texte dont l'extension est .html (correct)
- Un navigateur Web interprète le langage HTML pour afficher les pages Web à l'écran. (correct)

HTML et balises

Complétez les blancs.

Q: [...] (HyperText Markup Language) a été créé en [...] par [...]. C'est un langage de [...] (on dit markup en anglais) qui permet de structurer les éléments d'une page [...].
A: HTML; 1993; Tim Berners-Lee/Tim Berners-Lee et Robert Caillau/Tim Berners Lee; balises/balise/balisage; Web/web

Déplacez les balises au bon endroit

- bras gauche levé
- fin bras gauche levé
- bras droit levé
- fin bras droit levé
- debout
- fin debout
Q: balise
A: debout
Q: balise
A: bras gauche levé
Q: balise
A: fin bras gauche levé
Q: balise
A: fin debout
Q: balise
Credits: by Germain Becker; licence PD CC0 1.0

Associez les balises HTML à leur rôle

- Titre le plus important
- Paragraphe
- Image
- Lien hypertexte
- Texte en gras
Q: <h1>
A: Titre le plus important
Q: <p>
A: Paragraphe
Q: <strong>
A: Texte en gras
Q: <img>
A: Image
Q: <a>
A: Lien hypertexte

Structure d'une page Web

Déplacez les textes dans les emplacements qui leur correspondent.

Q: Un fichier HTML commence toujours avec la ligne [...].
Le code de la page Web commence par la balise [...] et se termine par [...]. Entre ces deux balises, on distingue deux parties :
- l'[...] qui s'écrit entre les balises [...] et [...] et qui contient toutes les [...] de la page Web comme son titre ;
- le [...] qui s'écrit entre les balises [...] et [...] et qui contient tout le contenu de la page destiné à être affiché à l'écran.
A: <!DOCTYPE html>; <html>; </html>; en-tête; <head>; </head>; métadonnées; corps; <body>; </body>

Code HTML

Déplacez les textes dans les emplacements qui leur correspondent.

Q: [...]Ada Lovelace[...]
<img [...]="https://upload.wikimedia.org/wikipedia/commons/0/0f/Ada_lovelace.jpg" [...]="Portrait d'Ada Lovelace(1840)">
[...][...]Ada Lovelace[...], contesse de Lovelace, née en 1815 à Londres et morte en 1852 dans la même ville, est une pionnière de la [...]science informatique[...].[...]
[...]C'est une femme extrêmement brillante qui est connue pour avoir écrit le premier [...]programme informatique[...] de l'Histoire de l'humanité en 1843, et ce bien avant l'invention de l'ordinateur. Ainsi, [...]le premier programmeur de l'histoire était une femme[...] !</p>
[...]Source : Article Wikipedia sur <a href="https://fr.wikipedia.org/wiki/Ada_Lovelace">[...]</a>.[...]
A: <h1>; </h1>; src; alt; <p>; <strong>; </strong>; <em>; </em>; </p>; <p>; <em>; </em>; <strong>; </strong>; <p>; Ada Lovelace; </p>
[Image: Capture d'écran d'une page Web]

Balise a

Q: Quel code HTML permet de créer un lien hypertexte qui pointe vers la page https://www.lemonde.fr/blog/binaire/ et dont le texte affiché à l'écran est "Blog Binaire" ?
- <a href="https://www.lemonde.fr/blog/binaire/">Blog Binaire</a> (correct)
- <a>Blog Binaire</a>
- <img src="https://www.lemonde.fr/blog/binaire/" alt="Blog Binaire"</img>
- <a href="Blog Binaire">https://www.lemonde.fr/blog/binaire/</a>
- <link href="https://www.lemonde.fr/blog/binaire/">Blog Binaire</link>

Balise img

Q: On veut insérer une image dans une page Web. Cette image a pour URL "https://upload.wikimedia.org/wikipedia/commons/3/3a/Tim_Berners-Lee_closeup.jpg" et le texte alternatif est "Tim Berners-Lee".

Quel code HTML permet de faire cela ?
- <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Tim_Berners-Lee_closeup.jpg" alt="Tim Berners-Lee"> (correct)
- <img href="https://upload.wikimedia.org/wikipedia/commons/3/3a/Tim_Berners-Lee_closeup.jpg" alt="Tim Berners-Lee">
- <a href="https://upload.wikimedia.org/wikipedia/commons/3/3a/Tim_Berners-Lee_closeup.jpg" alt="Tim Berners-Lee">
- <a src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Tim_Berners-Lee_closeup.jpg" alt="Tim Berners-Lee">
- <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Tim_Berners-Lee_closeup.jpg">Tim Berners-Lee</img>
- <a src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Tim_Berners-Lee_closeup.jpg">Tim Berners-Lee</a>

Rôle du texte alternatif

Q: Lorsque l'on utilise la balise <img> pour insérer une image, il est très recommandé de fournir un texte alternatif grâce à l'attribut alt de cette balise : par exemple <img src="chat.jpg" alt="image d'un chat">.

À quoi sert ce texte ce texte alternatif ? Vous pouvez faire des recherches sur le Web pour trouver les bonnes réponses.
- c'est une description textuelle de l'image qui est affichée dans le cas où l'image ne peut pas l'être (correct)
- les outils de lecture d'écran lisent ce texte alternatif afin que les personnes mal-voyantes sachent ce que l'image représente (correct)
- ce texte alternatif est utilisé par les moteurs de recherche pour référencer les images (c'est plus simple pour eux d'interpréter un texte décrivant l'image que l'image elle-même) (correct)
- il permet à l'utilisateur de choisir une image alternative à celle prévue initialement.