Thème 2 : Web 2nd
Lycée Activité branchée : Crée ta page Web
Marie Rivier
Problématique : Pour créer notre première page Web, nous avons besoin de mieux comprendre comment baliser les
différentes parties de la page avec le langage HTML 5 (HyperText Markup Language, langage de balisage hypertexte),
et comment donner du style à nos pages Web avec CSS 3 (Cascading Style Sheets, feuille de style en cascade)
Question 1 : Observons… Reportons-nous à l’annexe 1 « Le web en une image »
a. Identifier les différentes parties de la page Web de la page de gauche, puis, pour chaque partie identifiée,
retrouver les balises utilisées en observant attentivement le code qui vous a été distribué.
b. Retrouver la fin des lignes 32 et 33 du code.
Question 2 : Récupérons cette page Web
a. Récupérer les fichiers « [Link] », « [Link] » et « [Link] » dans le réseau et enregistrer
ces trois fichiers dans un même dossier.
b. Ouvrir les fichiers HTML et CSS avec l’éditeur de texte bloc-notes et compléter le code manquant du fichier
« [Link] »
c. Enregistrer le fichier « [Link] » puis l’ouvrir avec votre navigateur. Inutile de fermer l’éditeur, il suffit de
le réduire !!!
Le code est interprété par le navigateur sans avoir besoin d’être connecté à Internet !
Entre la balise ouvrante <html> et la balise fermante </html>, le document est scindé en deux parties, la tête
d’abord, le corps ensuite, délimités par les balises du même nom en anglaus (<head> et <body>)
Question 3 : La tête <head>
a. Dans le fichier « [Link] », si la ligne 6 du code est mise en commentaire, le navigateur affiche la page de
l’aide 1. Que remarque-t-on ? Quel semble être le problème ?
b. Mettre la ligne 7 du code en commentaire, enregistrer le fichier et rafraîchir la page web.
c. En conclusion, quel est le rôle des informations placées dans la tête du document ?
Question 4 : Le corps <boby>
a. Identifier 6 balises utilisées pour insérer du texte, puis, pour chacune, associer la valeur sématique du texte
(par exemple : titre, intertitre, paragraphe, liste à puces, tableau, etc….)
b. Quelle est la fonction des balises restantes <img…/>, <br/> et <hr/> ?
c. En conclusion, quel est le rôle des informations placées dans le corps du document ?
Question 5 : Le style
a. Dans le fichier « [Link] », mettre la ligne 12 en commentaire ‘aide 2), enregistrer le fichier et
rafraîchir la page Web. Quelle différence observe-t-on ? décrire cette règle de style. Recommencer pour
chaque règle de style que vous ne savez pas décrire.
b. Quel est le rôle des informations placées dans ce document ?
Thème 2 : Le Web Activité branchée 2/3
Thème 2 : Web 2nd
Lycée Activité branchée : Crée ton site Web
Marie Rivier
Problématique : Un site Web est un ensemble de pages Web visualisables dans un navigateur et reliées entre elles
par des liens qui permettent de passer de l’une à l’autre Pour créer notre site web, nous avons maintenant besoin de
mieux comprendre ce qui permet de passer d’une page à l’autre à l’aide d’un simple clic
Question 1 : Tom a bien avancé dans la création de son site web
Il a créé les pages « [Link] », « [Link] », « [Link] », « [Link] », et il a organisé ses fichiers
selon l’arborescence présentée dans le document 1. Les codes de toutes ses pages commencent par les mêmes 25
premières lignes que « [Link] »
a. Télécharger les nouveaux fichiers html sur le réseau, et organiser les fichiers selon l’arborescence du
document 1.
b. Ouvrir le fichier « [Link] » avec un navigateur. Que se passe-t-il ? Pourquoi ? Avec l’aide du document 1
et de l’aide 1, modifier l’URL relative à l’image à la ligne 29 du code HTML.
c. La feuille de style a également été déplacée. Modifier l’URL relative de feuille de style à la ligne 7 du code de
la page « [Link] ».
d. Avec l’aide 2 et l’aide 3, modifier les lignes 18 à 23 du code HTML pour permettre de naviguer d’une page à
l’autre du site de Tom en cliquant dans le menu horizontal de ses pages.
e. Avec l’aide 4, modifier le ligne 40 pour associer à ce texte une ressource existante sur le World Wide Web à
l’aide d’un lien externe.
Thème 2 : Le Web Activité branchée 3/3
