SNT Les bases du langage HTML 2019/2020
Fonctionnement d’un site web
Pour consulter une page web, on lance un programme appelé navigateur web.
Le rôle de ce navigateur est d’interpréter le code dans lequel la page est décrite. Ce code, appelé
code source, est rédigé en HTML (Hypertext Markup Language).
Ce langage permet la création de documents structurés, l'utilisation de textes
enrichis (caractères gras, italiques, …).
Il permet de créer facilement des hyperliens, aussi appelés liens hypertextes
(liens vers une autre page web ou une autre partie de la même page web), d'insérer des multimédias
et beaucoup d'autres choses.
Les pages HTML sont de simples fichiers textes pouvant être lus directement à l'aide d'un éditeur de
texte. On peut très bien créer une page web entière en utilisant simplement le bloc-notes, avec
eduPython (en séléctionant la syntaxe HTML dans le menu affichage), ou en ligne avec la plateforme
Thimble de Mozilla. Les fichiers ainsi créés doivent être enregistrés en *.html.
Partie 1
I. Ouvrir le fichier tp_html1.html, que vous trouverez sur le réseau avec un double clic. Le
navigateur affiche la page HTML interprétée. Lire les informations affichées.
II. Visualiser le code source de la page, c'est-à-dire la page au format HTML non interprété, en faisant
un clic droit dans la page et en cliquant sur Code source de la page (dans Firefox), ou sur Afficher
la source (dans Internet Explorer).
1
En comparant le code source avec la page interprétée, répondez aux questions suivantes :
1. On peut distinguer deux grands espaces délimités par les balises <head> et <body>. Quelles peuvent être leurs
fonctions ?
2. Repérez le titre "Le web" dans les deux documents : quelles balises sont utilisées pour déclarer un titre ?
3. Observez les sauts de lignes du code source : sont-ils respectés dans la page web ? Quelle est la balise qui permet
de passer à la ligne ?
4. A quoi sert la balise <p> < /p> ?
5. Quelle balise permet de créer une liste à puce non ordonnée ?
6. Quelle balise permet de créer une liste ordonnée ?
7. Repérez une balise <!-- contenu --> et cherchez son impact sur la page web. Quelle peut-être son utilité ?
2
Partie 2
I. Ouvrir le fichier tp_html2.html.
II. Visualiser le code source de la page.
1. Quelle balise permet d’insérer une image ?
2. Quelle balise permet d’insérer un lien hypertexte ?
a. Comment réalise-t-on un lien interne à la page web ?
b. Comment réalise-t-on un lien externe à la page web ?
c. Comment faire pour que le lien s'ouvre dans une nouvelle fenêtre (ou un nouvel onglet) du navigateur ?
3. Quelle balise permet de renvoyer à une position précise sur la page, par exemple le haut de la page (on appelle ceci
une ancre) ?
3
Partie 3
I. Ouvrir le fichier tp_css1.html, ainsi que le fichier tp_html2.html.
II. Visualiser les codes sources des deux pages.
1. Quelles différences observez-vous entre les deux pages ? entre les codes sources ?
2. Ouvrez le fichier style.css. Interprétez son contenu.
3. Modifiez le fichier CSS afin de tester l’impact de chaque critère sur la page web (n’oubliez pas d’enregistrer avant
d’ouvrir la page web).
Partie 4
A vous maintenant de créer votre propre page web.
Objectif : à partir du fichier tp_css2.html et de sa feuille de style associée, créez une page web dans laquelle vous
présenterez, de façon organisée, les résultats de vos recherches sur les notions suivantes :
- Différence entre le web et l’internet
- Repères historiques
- Moteurs de recherche et mots clés
- …
Vous illustrerez votre page en étant attentifs aux droits sur les images.
