¶ Les langages HTML et CSS
Les langages HTML et CSS sont les langages qui permettent de construire des pages web. Grâce aux navigateurs web comme Firefox ou Google Chrome, il est possible de visualiser ce code source et de le modifier.
¶ Exercice 1 - Visualiser le code source
Dans cette première partie, nous allons découvrir comment visualiser le code HTML d'une page web.
Question 1 - Aller sur le site de l'ENT
Question 2 - Effectuer un Clique-droit sur n'importe quel endroit de la page.
Question 3 - Cliquer sur Afficher le code source de la page.
Question 4 - Le code source de la page s'affiche.
Depuis une page Web, vous pouvez également faire le raccourci clavier Ctrl + U pour obtenir le code source.
¶ Exercice 2 - Modifier le code source
Les navigateurs sont maintenant de plus en plus évolués. Ils sont équipés d'outils de développement permettant de modifier le code source directement.
Question 1 - Aller sur le site de l'ENT
Question 2 - Effectuer un Clique-droit sur n'importe quel endroit de la page.
Question 3 - Cliquer sur Inspecter. Une nouvelle fenêtre en bas de votre écran vient de s'ouvrir. On appelle cette fenêtre Outils de developpement.
Question 5 - Cliquer la flèche à côté de l'onglet Elements dans les Outils de developpement.
Question 6 - Sélectionner un élément de la page web. Une animation doit apparaitre pour indiquer l'élément sélectionné.
Question 7 - Il est possible de modifier le contenu de chaque élément en faisant Clique-Gauche puis Edit as HTML sur le texte de l'inspecteur d'élément.
La fenêtre des outils de développement est séparée en 2 parties :
- La partie de gauche affiche le code HTML (le contenu des pages).
- La partie de droite affiche le code CSS (Le design des pages).
Si vous rechargez la page, toute vos modifications seront effacées. En effet, le navigateur va recharger la page depuis le serveur de site, sans tenir compte de vos modifications.
¶ Travail à faire
Question 1 - Modifier la page de recherche Google.com afin d'obtenir le résultat ci-dessous.
Voici quelques indications concernant le code CSS pour modifier le design :
| Effet | Instruction CSS |
|---|---|
| Changer la taille du texte | font-size: 10px |
| Changer l'épaisseur du texte | font-weight: 900 |
| Changer la couleur du texte | color : blue |
| Changer le style du texte | font-style: italic |
| Changer la police du texte | font-family: system-iu |
| Souligner le texte | text-decoration: underline |
| Centrer le texte | text-aglin: center |
| Changer la couleur du fond | background-color: blue |
Pour changer une image, il suffit de changer l'URL après le mot clé src. Ici, on utilisera le logo du lycée disponible à l'adresse suivante :
<img class="lnXdpd" alt="Google" height="200" src="https://lycee-gustave-eiffel.fr/wp-content/uploads/2020/03/LOGO-LYCEE-EIFFEL_Plan-de-travail-1.png" width="300">
Appeler votre enseignant pour valider votre exercice.