Que dit le code ?
Quand il s'adresse
au navigateur
<code HTML>
Paroles imaginaires du code
s'adressant au navigateur.
Remarque
Le webdesigner impose au code HTML-CSS
de transmettre au navigateur (Firefox, Chrome, etc.)
des instructions précises d'affichage de données.
Le navigateur fait exactement ce que lui dit le code.
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>
Navigateur, je te demande d'afficher
les contenus que je vais t'indiquer.
Merci de tenir compte des balises utilisées.
<h1>
STP, affiche donc maintenant
le titre principal de la page.
<p>
Affiche le texte du paragraphe !
</p>
Fin de paragraphe !
Je vais te proposer un autre contenu...
<ul>
Présente les éléments qui vont suivre
sous forme de liste non ordonnée.
<li>
Cher navigateur, cet élément
t'annonce un item de liste.
</li>
Cet élément là t'annonce
la fin de l'item de liste.
</ul>
</ul> t'informe qu'ici
se termine la liste non ordonnée.
<a href="https://etc." target="_blank">
Voici maintenant un lien. Merci de permettre
à l'internaute d'accéder à l'URL indiquée
dans un nouvel onglet (ou fenêtre).
</a>
Ceci t'indique la fin du lien hypertexte.
Nous allons passer à un autre élément !
<img src="img/etc." alt="description">
Je t'indique maintenant une image que tu trouveras
dans le dossier indiqué. Merci de prendre en compte
le texte alternatif mentionné.
<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>
C'est ici que se termine le corps de la page.
</html>
C'est ici, enfin, que se termine
l'ensemble de la page 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).
😃
Yves GOGUELY
Formation CS - Juin 2022