Pages Web, introduction aux langages
HTML/CSS
Nom Prénom : Prof
Objectif : Découvrir les langages qui permettent de mettre en forme des documents pour
les publier sur le Web : langages HTML, CSS.
1 Introduction
Les pages affichées par un navigateur internet sur le World Wide Web (WWW) sont écrites
dans les langages HTML et CSS. Le langage HTML décrit la structure et les contenus à
afficher et le langage CSS réalise la mise en forme de la page web.
HTML (HyperText Markup Language) est le langage de description conçu pour représenter
les pages Internet. C’est un langage de balises permettant d’écrire de l’hypertexte. HTML
permet de structurer le contenu de la page, d’inclure des ressources multimédias (sons,
images, vidéos), d’inclure des formulaires de saisie et des programmes informatiques.
Le navigateur Internet est un logiciel qui permet de consulter et d’afficher les pages web.
Lorsqu'un utilisateur visite une page web, son navigateur n'affiche pas les balises telles
quelles car il analyse le document et l'interprète afin d'afficher la page web correctement.
Par exemple, si le document contient une balise image <img>, le navigateur chargera l'image
associée et affichera l'image à la place de la balise HTML. On parle donc d’un langage
interprété (pas de compilation, pas de fichier exécutable).
Il existe plusieurs navigateurs comme par exemple Mozilla Firefox, Internet Explorer/Edge,
Chrome, Safari, etc...
Les éditeurs de texte sont des logiciels qui permettent d’écrire le code HTML et CSS comme
par exemple Notepad++, NetBeans, Sublimtext, etc...
Première STI2D 1_TP_HTML_v5_prof.docm Page 1/23
Pages Web, introduction aux langages
HTML/CSS
2 Structure d’un document HTML
Le langage HTML est basé sur des balises ou TAGS qui permettent de structurer du texte ou
d'insérer des images. Une balise est composée d’un chevron ouvrant <, d’un nom de balise,
éventuellement d’un ou plusieurs attributs optionnels pour indiquer comment l'action doit
être effectuée, et d’un chevron fermant >. Le plus souvent, les balises sont ouvrantes et
fermantes pour délimiter un bloc. Les balises se présentent donc de la façon suivante :
<marqueur> texte </ marqueur >
ou encore <marqueur attribut = ʺargumentʺ> texte </ marqueur >
ou même <marqueur />
Quant à la structure du page HTML, elle se présente souvent sous cette forme :
On y trouve un certain nombre de balises HTML :
<!-- ... --> Délimite des commentaires pour annoter votre code HTML et le rendre
plus lisible. Le navigateur n'affiche pas ces commentaires dans la page web.
<html> ... </html> Délimite le texte HTML dans un fichier.
<head> … </head> Délimite l'entête du fichier.
<title> … </title> Délimite le titre de la page. S'affiche dans l'onglet de la page.
<body> … </body> Délimite le corps du fichier. Contient le contenu de la page.
<div> … </div> Définit un conteneur ou un bloc auquel on pourra appliquer un
certain nombre de propriétés.
Il existe de nombreuses autres balises. Vous en découvrirez quelques une à travers les
exercices suivants.
Première STI2D 1_TP_HTML_v5_prof.docm Page 2/23
Pages Web, introduction aux langages
HTML/CSS
Pour une meilleure lisibilité et éviter les erreurs de syntaxe, le langage HTML doit être
indenté, c'est à dire, chaque nouvelle balise imbriquée fait l'objet d'un décalage, comme
dans l’exemple ci-dessous :
Il est possible de voir le code source d’une page et de vérifier la présence des différentes
balises HTML.
Pour cela, il faut cliquer sur la page du navigateur avec le bouton droit de la souris et choisir
« Code source de la page » comme le montre l’image ci-dessous.
Première STI2D 1_TP_HTML_v5_prof.docm Page 3/23
Pages Web, introduction aux langages
HTML/CSS
3 Exercice 1
Créez un répertoire intitulé pagesHTML dans votre répertoire Documents.
Lancez l’application NotePad++, tapez le code suivant puis sauvegardez votre fichier
sous le nom [Link] dans votre répertoire pagesHTML
Dans votre gestionnaire de fichier, double-cliquez sur votre fichier [Link] et
pour que votre navigateur web le charge et en interprète le contenu.
Qu’affiche le navigateur ? Ou apparait le terme Titre de la page ? et Texte de la
page ?
Le Titre de la page apparait dans la barre du navigateur et le Texte de la page apparait dans
la fenêtre du navigateur
Première STI2D 1_TP_HTML_v5_prof.docm Page 4/23
Pages Web, introduction aux langages
HTML/CSS
4 Exercice 2 – Balise <Div>
De même que lors du paragraphe précédent, tapez le code suivant puis sauvegardez
votre fichier sous le nom [Link] dans votre répertoire pagesHTML
De même, double-cliquez sur votre fichier [Link] et pour que votre
navigateur web le charge et en interprète le contenu.
Qu’affiche le navigateur ? Que peut-on dire de la balise <div> ?
La balise <div> permet la création d’un nouveau paragraphe. Il y a eu un passage à la ligne.
Première STI2D 1_TP_HTML_v5_prof.docm Page 5/23
Pages Web, introduction aux langages
HTML/CSS
5 Exercice 3 - Titres
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link].
Que peut-on dire des balises <h1>, <h2> et <h3> ?
La balise <h1> indique un titre. Les balises <h2> et <h3> font de même, mais avec des
caractères plus petits.
Première STI2D 1_TP_HTML_v5_prof.docm Page 6/23
Pages Web, introduction aux langages
HTML/CSS
6 Exercice 4 – Balise <br/>
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link].
Quel est le rôle de la balise <br/> ?
La balise <br/> permet un retour à la ligne
Première STI2D 1_TP_HTML_v5_prof.docm Page 7/23
Pages Web, introduction aux langages
HTML/CSS
7 Exercice 5 – Balise <b>
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link].
Quel est le rôle de la balise <b> ?
Le texte encadré par la balise <b> et </b> est affiché en gras.
b=bold : gras en français.
Première STI2D 1_TP_HTML_v5_prof.docm Page 8/23
Pages Web, introduction aux langages
HTML/CSS
8 Exercice 6 - Image
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link].
Qu’observe t-on ?
On ne voit pas l’image du lycée Touchard comme attendu, mais juste un texte "Image du
lycée touchard"
Copiez le fichier [Link] dans votre répertoire pagesHTML. Rechargez la page
HTML de votre navigateur (Appuyer sur la touche F5)
Qu’observe t-on ?
L’image du lycée est affichée cette fois ci.
Première STI2D 1_TP_HTML_v5_prof.docm Page 9/23
Pages Web, introduction aux langages
HTML/CSS
En déduire le rôle de la balise img et des paramètres src et alt dans le code HTML ci-
dessous :
La balise img permet d’afficher une image.
Le fichier contenant l’image est indiqué par le paramètre src (source).
La balise alt (alternative) est utilisée lorsque le fichier de l’image n’est pas présent.
Première STI2D 1_TP_HTML_v5_prof.docm Page 10/23
Pages Web, introduction aux langages
HTML/CSS
9 Exercice 7 - Lien
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ?
Un lien vers le site du lycée Touchard est apparu
Quel est le rôle de la balise <a> ?
La balise <a> (anchor, c'est-à-dire ancre) permet de créer un lien. La partie
href="[Link] indique l’adresse du lien.
Première STI2D 1_TP_HTML_v5_prof.docm Page 11/23
Pages Web, introduction aux langages
HTML/CSS
10 Exercice 8 - Lien image
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ?
Le texte du lien vers le site du lycée Touchard a été remplacé par l’image.
Première STI2D 1_TP_HTML_v5_prof.docm Page 12/23
Pages Web, introduction aux langages
HTML/CSS
11 Introduction au CSS
Dans les pages suivantes, vous allez utiliser du CSS. Alors que Le langage HTML décrit la
structure et les contenus à afficher, le langage CSS réalise la mise en forme de la page web.
Il existe plusieurs façons de déclarer du CSS : Soit dans le fichier html, soit un fichier css à
part. Dans cette activité, le code CSS sera écrit dans le fichier HTML. Vous rencontrerez ainsi,
à l’intérieur des balises, une syntaxe similaire à : style="propriete : valeur"
12 Exercice 9 - Utilisation du CSS pour les couleurs
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ? Quel est le role de style="color: red" ?
Le texte est en couleur (rouge puis bleu clair)
style="color: red" permet de spécifier la couleur rouge du texte 1
Première STI2D 1_TP_HTML_v5_prof.docm Page 13/23
Pages Web, introduction aux langages
HTML/CSS
13 Exercice 10 - Utilisation du CSS pour l’alignement
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ?
Quel sont les rôles de style="text-align: center" , de style="text-align: left" et de
style="text-align: right" ?
Le texte peut être aligné à gauche, à droite ou bien centré.
style="text-align: center" permet de centrer le texte
style="text-align: left" permet d’aligner le texte à gauche
style="text-align: right" permet d’aligner le texte à droite
Première STI2D 1_TP_HTML_v5_prof.docm Page 14/23
Pages Web, introduction aux langages
HTML/CSS
14 Exercice 11 - Utilisation du CSS pour la couleur de fond de la page
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ? Quel est le rôle de style="background-color: yellow" ?
style="background-color: yellow", placée dans la balise body, permet de spécifier un fond
de page de couleur jaune
Première STI2D 1_TP_HTML_v5_prof.docm Page 15/23
Pages Web, introduction aux langages
HTML/CSS
15 Exercice 12 - Utilisation du CSS pour la couleur de fond du texte
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ? La partie style="background-color: yellow" est-elle placée au
même endroit que dans l’exercice précédent ? Quelle en est la conséquence ?
La couleur de fond autour de la chaine de caractère est jaune.
La partie style="background-color: yellow", est placée dans la balise div, et non plus dans la
balise body. Elle permet ainsi de spécifier un fond de couleur jaune autour du texte, et non
plus sur la page entière.
Première STI2D 1_TP_HTML_v5_prof.docm Page 16/23
Pages Web, introduction aux langages
HTML/CSS
16 Exercice 13 - Utilisation du CSS pour positionnement du texte
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ? Comparez le résultat avec celui de l’exercice 2. Quel est le rôle de
style="position: absolute; top: 100px; left: 30px" ?
Les 2 textes ont été décalés par rapport à leur position initiale (voir [Link])
Remplacez 100px par 200px et 30px par 50px. Qu’observe t-on ? Que signifie la partie
top : 200px ? et la partie left : 50px ?
Texte 1 a changé de position.
top : 200px place le texte à 200 pixels du haut de la fenêtre
left : 50px place le texte à 50px du bord gauche de la fenêtre
Remplacez top par bottom et left par right. Qu’observe t-on ?
Le positionnement du texte se fait alors à partir du bas et du bord droit de la fenêtre.
Première STI2D 1_TP_HTML_v5_prof.docm Page 17/23
Pages Web, introduction aux langages
HTML/CSS
17 Exercice 14 - Utilisation du CSS pour positionnement de l’image
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ?
L’image a été décalée par rapport à sa position initiale (voir [Link])
Qu’est ce qui, dans le code HTML ou CSS, a permis de positionner l’image sur la
page ?
De façon analogue à l’exercice précédent, en utilisant
style="position: absolute; top: 60px; left: 100px"
sauf que cette partie est positionnée dans la balise img et non plus dans la partie div
Première STI2D 1_TP_HTML_v5_prof.docm Page 18/23
Pages Web, introduction aux langages
HTML/CSS
18 Exercice 15 - Combinaison de CSS
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ? Qu’est ce qui, dans le code HTML ou CSS, permet d’obtenir cela ?
Le texte en bleu, positionné à 50 pixels du haut de la fenêtre et à 20 pixels du bord gauche
de la fenêtre, grâce à :
<div style="color: blue; position: absolute; top: 50px; left: 20px">
Le texte en rouge, positionné à 20 pixels du haut de la fenêtre et à 30 pixels du bord gauche
de la fenêtre, grâce à :
<div style="color: red; position: absolute; top: 20px; left: 30px">
Première STI2D 1_TP_HTML_v5_prof.docm Page 19/23
Pages Web, introduction aux langages
HTML/CSS
19 Exercice 16 - Combinaison de CSS
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ? Qu’est ce qui, dans le code HTML ou CSS, permet d’obtenir cela ?
Un fond jaune sur toute la page grâce à la partie :
<body style="background-color: yellow">
Des caractères blancs sur fond bleu grâce à :
<div style="color: white; background-color: blue">
Première STI2D 1_TP_HTML_v5_prof.docm Page 20/23
Pages Web, introduction aux langages
HTML/CSS
20 Exercice 17 - Combinaison de CSS
Utilisez la même procédure que lors des exercices précédents. Votre fichier HTML
sera nommé [Link]
Qu’observe t-on ? Qu’est ce qui, dans le code HTML ou CSS, permet d’obtenir cela ?
La page est identique à la précédente, sauf que le texte n’est plus à la même position grâce
au code CSS suivant : position: absolute; top: 100px; left: 80px
21 Exercice 18 - Combinaison de CSS
Ecrire le code HTML/CSS pour obtenir la page suivante. La page possède 2 liens :
o Celui vers le site du lycée
o L’autre vers [Link] via l’image de la
terre.
Vous nommerez votre fichier [Link]
Première STI2D 1_TP_HTML_v5_prof.docm Page 21/23
Pages Web, introduction aux langages
HTML/CSS
Première STI2D 1_TP_HTML_v5_prof.docm Page 22/23
Pages Web, introduction aux langages
HTML/CSS
22 Exercice 19
Faites votre CV, de façon originale, en HTML/CSS. Vous nommerez votre fichier
cv_nom_prenom.html
Première STI2D 1_TP_HTML_v5_prof.docm Page 23/23
