Que dit le code ?
Quand il s'adresse
au navigateur
Consignes
Dans la suite de ce diaporama,
plusieurs bulles de dialogue sont vides.
Complétez ces bulles en imaginant
ce que pourrait dire le code source
en s'adressant au navigateur
(avec Brackets, bien sûr...).
<code HTML>
Paroles imaginaires du code
s'adressant au navigateur.
C'est parti !
Les éléments HTML (tags) sont présentés
dans l'ordre habituel de leur apparition
dans le code source.
<!DOCTYPE html>
Là, cher navigateur, je t'informe que
je vais te parler en langage HTML version 5 !
<head>
Maintenant, je vais te transmettre
quelques informations utiles,
en tête (head) de mes instructions...
<meta charset="utf-8">
Je te communique ici la charte
selon laquelle tu devras notamment
afficher les caractères alphabétiques accentués.
<meta name="viewport" content="etc.">
STP, prends en compte ces informations
pour afficher correctement le contenu
de la page sur les écrans des mobiles !
<title>
J'ai l'intention de t'indiquer,
entre <title> et </title>, l'intitulé de la page.
Je te prie d'afficher cette information
dans l'onglet du navigateur.
</title>
Maintenant, nous passons
à autre chose, c'est ok pour toi ?
<link rel="stylesheet" href="css/style.css">
Cher navigateur, prends en compte, s'il te plait,
les instructions contenues dans le fichier
"style.css" situé dans le dossier "css".
<style>
Je vais maintenant te parler en langage CSS.
Cela va concerner la manière dont tu devras
présenter le contenu du "body"...
</style>
Maintenant, j'ai fini de te parler en langage CSS.
Je vais de nouveau te parler en HTML5 !
Es-tu prêt ?
</head>
J'en ai terminé avec les informations générales
à te communiquer en tête (head) du code source.
<body>
...
<h1>
...
<p>
...
</p>
...
<ul>
...
<li>
...
</li>
...
</ul>
...
<a href="https://etc." target="_blank">
...
</a>
...
<img src="img/etc." alt="description">
...
<script>
Maintenant, je vais te parler en langage JavaScript,
pour que tu puisses savoir comment apporter
du mouvement à certains éléments du code.
</script>
J'en ai terminé avec les scripts JS (JavaScript),
je vais continuer désormais en langage HTML...
</body>
...
</html>
...
C'est presque terminé !
Complétez le diaporama en mentionnant
vos prénom(s) et nom(s) sur la diapo suivante,
(dans la code source, ... avec Brackets).
😃
Prénom NOM
Formation CS - juin 2022