Thème Le web – TP n°1
Le langage ou code HTML
Analyse d'une page web et de son code
Rendez-vous sur la page [Link] avec
le navigateur Firefox.
Sur la page web visualisée, faire un clic de souris avec le bouton droit et choisir
Code source de la page.
Pour créer des pages web qui seront ensuite interprétées par un navigateur, on utilise
deux types de code : le code et le code que l’on abordera dans un
prochain T.P.
Le code structure le contenu de la page web avec du texte, images, vidéos,
liens hypertextes, etc...
Le code décore le contenu de la page web en modifiant la couleur du texte, en
définissant des polices de caractères, en créant des marges ou des bordures, etc...
Le code HTML utilise des .
Chaque balise débute par le signe inférieur « < » et se termine par le signe supérieur
« > ».
Chaque balise va permettre d'introduire ou d'appliquer une particularité au contenu de
la page.
Pour indiquer le contenu qui va bénéficier de cette particularité, on débute par la
balise <truc> et on termine par la balise </truc>.
On remarque trois sections principales délimitées par :
• la balise <html>.....</html> qui permet d'indiquer que tout ce que contient la
page web est du code HTML interprétable par un navigateur.
• la balise <head>.....</head> qui va contenir des informations sur la page web
comme son titre ainsi que des informations qui n'apparaissent pas dans la page
web.
• la balise <body>.....</body> va contenir les éléments de la page web à afficher
(texte, images, vidéos, liens, etc...)
Il existe deux sortes de balises :
• «par paires» qui s’ouvrent et se ferment plus loin comme par exemple
<b>...</b>
• «orphelines» qui s’ouvrent et se ferment aussitôt comme par exemple </br>
Identifier le rôle des balises suivantes présentes dans le document [Link]
et en donner leur rôle.
<title>...</title>
<h1>...</h1> <h2>...</h2> <h3>...</h3>
<p>...</p>
SNT – Thème Le web – TP n°1 1/3
© F. ABBATE – [Link]
</br>
<b>...</b>
<i>...</i>
<u>...</u>
<ul>...</ul>
<li>...</li>
<!....>
<img src="[Link]" />
<a href="[Link]">Nom du lien</a>
Lancement du serveur web HFS
Lancer le fichier Lancer_le_serveur.vbs .
Une fois le logiciel ouvert, cliquer en haut à gauche sur le bouton Menu.
Choisir Add Folder from disk...
Sélectionner le dossier U:\\[Link]\SNT\Le web\TP1 .
Sur le dossier apparaissant en rouge dans la colonne Virtual File System, faire un
clic droit et choisir Add Files...
Sélectionner le fichier HTML de la chanteuse ou du chanteur se trouvant dans le
dossier U:\\[Link]\SNT\Le web\TP1 .
Cliquer, dans l'arboresence, sur le fichier HTML de la chanteuse ou du chanteur.
Cliquer en haut à gauche sur le bouton Open in browser pour lancer la page web
de la chanteuse ou du chanteur dans le navigateur.
Création d'une page web
Ouvrir en parallèle, depuis votre répertoire réseau, le fichier [Link] ou
[Link] ou [Link] avec le logiciel Notepad++ .
Changer l’étiquette de cette page web en «Le chanteur Vianney» ou «Le chanteur
Ed Sheeran» ou «La chanteuse Angèle» dans la balise <head>...</head>.
Le travail suivant devra être effectué à l’intérieur de la balise <body>...</body>.
Balisez le nom du chanteur ou de la chanteuse avec <h1>...</h1> , «Paroles de la
chanson ...» avec <h2>...</h2> , chaque fin de vers avec </br> , et enfin encadrer
chaque strophe avec <p>...</p> . Le texte de la chanson doit être en italique.
Afficher la photo de la chanteuse ou du chanteur en dessous de la chanson avec la
balise :
<img src="………………………………………" width="425px" height="344px"/>
SNT – Thème Le web – TP n°1 2/3
© F. ABBATE – [Link]
Après la photo, créer un titre de format moyen (en utilisant la balise <h2>...</h2>)
intitulé «Quelques titres du chanteur(euse) :» .
Sur le Web, choisissez cinq chansons de la chanteuse ou du chanteur avec leurs
dates.
Créer une liste à puces de cinq de ces chansons avec alinéa.
Chercher sur le Web comment intégrer, dans votre page web, la vidéo Youtube de
la chanteuse ou du chanteur qui se trouve à l'adresse de la Playlist suivante :
[Link]
Copier le code HTML obtenu juste au dessous du nom de la chanteuse ou du
chanteur.
Placer le logo (de forme carrée) de la chanteuse ou du chanteur sous la vidéo
Youtube.
Réaliser un lien hypertexte avec le logo de la chanteuse ou du chanteur permettant
de se diriger vers son site web.
Faire vérifier auprès du professeur.
Pour aller plus loin...
Défi 1 : Logo à gogo
Faire apparaitre le logo de la chanteuse ou du chanteur à côté de l'intitulé de
l'onglet de votre page web.
Défi 2 : Un tableau, sinon rien !
Faire une copie de votre fichier HTML. (indication : vous éditerez et visualiserez ce fichier
copie.)
À partir de votre fichier copie, remplacer la liste à puces par un tableau à deux
colonnes avec une colonne pour les titres des chansons et une colonne pour les
dates.
Défi 3 : Un peu de couleurs
Reprendre le tableau du défi 3 et mettre une couleur différente pour la colonne
«Titres» et la colonne «Dates».
SNT – Thème Le web – TP n°1 3/3
© F. ABBATE – [Link]
