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) du code source...

<meta charset="utf-8">

Je t'informe ici que tu vas rencontrer,
dans le corps du code source,
des 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>, le titre 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 et nom sur la diapo suivante,
(dans la code source, ... avec Brackets).

😃

Prénom NOM

FCIL - Classe passerelle BTS - avril 2020