TRAVAUX DIRIGÉS
Développement d’applications Web
HTML / CSS
OBJECTIFS
A travers cet exercice, vous allez apprendre à :
▪ Structurer un document à l’aide de balise HTML,
▪ Mettre en forme un document HTML avec une feuille de style CSS,
▪ Prendre en charge l’affichage de forme document sur différentes tailles d’écran
(responsive design).
RESULTAT SOUHAITE
Voici le document que vous allez réaliser :
Ok, c’est moche. Mais ça a l’avantage d’être simple et de couvrir une large plage de possibilités
en termes de structure et de mise en forme.
DECOUPAGE
Première étape : déterminer la structure du document. Pour cela, vous allez devoir découper
le visuel précédent afin de déterminer les éléments qui le constituent et comment ils
s’imbriquent dans une arborescence HTML.
Voici la liste des balises qui représenteront la structure du document :
▪ div : un conteneur dont la largeur par défaut est celle de son parent et dont la hauteur
par défaut et définie par son contenu.
▪ img : permet d’intégrer une image dans le document
▪ a : lien vers une autre page
▪ h1 – h3 : représente un titre (h1 niveau le plus important)
▪ p : pour intégrer un paragraphe
▪ video : pour intégrer une vidéo (l’image de la section « Présentation »)
▪ strong : pour souligner l’importance d’une portion de texte
➢ Réalisez le découpage du visuel précédent
DOCUMENT HTML
index.html
➢ Créez un nouveau dossier qui contiendra votre projet
➢ Ouvrez ce dossier avec Visual Studio Code
➢ Créez un fichier index.html
➢ Implémentez la structure de base d’un fichier HTML :
<!DOCTYPE html>
<html>
<head>
< !--
Informations à destination du navigateur et des moteurs de
recherche
-->
</head>
<body>
< !--
Structure du document afficher dans le navigateur
-->
</body>
</html>
➢ Ouvrez le dossier de votre projet avec un explorateur de fichiers
➢ Double cliquez sur votre fichier index.html pour le visualiser dans un navigateur
Une page blanche devrait apparaître. L’onglet de la page devrait être nommer
« index.html »
Titre de la page
➢ Dans la section head de votre fichier index.html, ajouter une balise title qui
contiendra « Polytech Dijon »
➢ Enregistrez votre fichier et actualisez la page de votre navigateur. Le nom de l’onglet a
changé.
Structure de la page
Une archive contenant les images et vidéos nécessaire à la réalisation du sujet est
disponible ici : https://www.lamarmotte.info/wp-content/uploads/2024/03/dev-web-
td1.zip
➢ Placez les dossiers img et videos de l’archive dans le dossier de votre projet.
➢ A partir du découpage réalisé précédemment, implémentez la structure HTML du
document dans la section body de votre fichier index.html.
Pour le moment, vous n’avez pas à vous occuper du positionnement des éléments ni
de leur aspect visuel. Concentrez-vous sur la structure arborescente du document.
Quelques informations utiles :
▪ La balise img possède un attribut src permettant d’indiquer le chemin de
l’image à afficher :
<img src="img/mon_image.png">
▪ La balise a qui représente un lien vers une autre page possède un attribut href
pour indiquer l’url de la page à ouvrir :
<a href="https://bde-esirem.fr">
L’attribut target permet d’indiquer au navigateur d’ouvrir la page dans un
nouvelle onglet avec la valeur _blank.
▪ La balise video permet de proposer plusieurs sources vidéo en fonction des
formats supportés par le navigateur :
<video>
<source src="videos/video.webv">
<source src="videos/video.mp4">
</video>
Ici le navigateur va essayer de lire le fichier video.webv. S’il ne connait pas se
format, il tentera de lire le fichier video.mp4.
La balise video propose également les attributs controls, autoplay, loop et
muted. Ces attributs ne prennent pas de valeur.
Note
Le son d’une vidéo qui démarrerait automatiquement pourrait surprendre ou
déranger l’utilisateur. Aussi, les navigateurs ne prennent en compte l’attribut
autoplay que si l’attribut muted est présent également.
➢ Enregistrez votre fichier index.html et actualisez la page de votre navigateur.
FEUILLE DE STYLE CSS
Liaison HTML / CSS
➢ Créez un fichier style.css dans le dossier de votre projet.
➢ Ajoutez le code CSS suivant à ce fichier :
body {
font-family: 'Segoe UI', Arial, sans-serif;
}
Le CSS précédent indique au navigateur d’utiliser la police de caractères Segoe UI. Si
cette dernière n’est pas présente sur l’ordinateur, il devra utiliser la police Arial. Si elle
n’est pas présente à son tour, alors le navigateur devra utiliser la première police sans
sérif (sans empâtement) présente sur l’ordinateur.
▪ Dans la section head du fichier index.html, ajoutez la balise link suivante :
<link rel="stylesheet" href="style.css">
Cette balise va indiquer au navigateur que le fichier style.css doit être utilisé pour
mettre en forme le document.
▪ Enregistrez les fichiers index.html et style.css, puis actualisez la page de votre
navigateur. La police de caractères utilisée pour les textes doit changer.
Entête
➢ Mettez en forme l’entête du document à partir des informations suivantes :
▪ La barre d’entête aura la couleur d’arrière-plan (background-color) suivante :
#eee et une ombre portée noire (box-shadow : 0 0 10px #000).
▪ Les éléments qu’elle contient seront disposés côte à côte (display : flex) et
seront espacés de manière à être placés à chaque extrémité de la barre d’entête
(justify-content : space-between).
▪ Le logo doit faire 200 pixels de largeur (width: 200px)
▪ Les liens de la barre de navigation auront une marge intérieure de 20 pixels
(padding).
Note
Les sélecteurs CSS permettent de cibler un ou plusieurs éléments du document HTML :
▪ a { ... } affectera une mise en forme à toutes les balises a du document
▪ p a {...} affectera une mise en forme à toutes les balises a présentes dans
l’arborescence d’une balise p
▪ p > a {...} affectera une mise à forme à toutes les balises a directement
contenues dans une balise p
▪ .uneClasse {...} affectera une mise en forme à toutes les éléments HTML
ayant la valeur « uneClasse » pour leur attribut class.
▪ #unIdentifiant {...} affectera une mise en forme à l’élément HTML ayant la
valeur « unIdentifiant » pour son attribut id. Les identifiants doivent être
uniques au sein d’un document HTML.
➢ Enregistrez vos fichiers et actualisez la page du navigateur.
Vous devriez obtenir un résultat proche de ceci :
La barre d’entête n’est pas collée à gauche et en haut de la page. Ceci est du au fait
que, par défaut, la balise body dispose d’une marge (margin) de 8px sur tout son
pourtour. Les éléments qu’elle contient ne peuvent donc pas toucher ses bords.
➢ Affectez la valeur 0 à l’attribut CSS margin de la balise body.
➢ Testez à nouveau.
Section présentation
➢ Mettez en forme la section « Présentation » du document à partir des informations
suivantes :
▪ Les titres des grandes sections de la page auront une marge intérieure
verticale (padding) de 10 pixels et une bordure inférieure (border-bottom) de 1
pixel d’épaisseur. La couleur utilisée pour le texte de ces titres (color) sera
#4691ff.
▪ Les textes des paragraphes seront justifiés (text-align : justify).
▪ Les éléments importants seront affichés dans la même couleur que les titres.
▪ La vidéo sera centrée horizontalement dans la page (display : block et
margin : auto). Elle fera 500 pixels de large.
➢ Testez le résultat obtenu.
Section actualités
➢ Mettez en forme la section « Actualités » du document à partir des informations
suivantes :
▪ Les actualités seront affichées côte à côte (display : flex) et espacés de
manière identique sur la largeur de la page (justify-content : space-around).
▪ Chaque actualité fera au plus 200 pixels de large (width).
▪ Les éléments de chaque actualité seront affichés les uns en dessous des autres
(display : flex et flex-direction : column).
▪ Le titre de chaque actualité sera affiché avec la couleur (color) #555.
▪ Les images des actualités feront 200 pixels de large et auront un bord arrondi
(border-radius : 10px).
▪ Le texte des actualités sera un peu plus petit que les autres textes de la page
(font-size : 0.7em).
➢ Testez le résultat obtenu
Pied de page
➢ Mettez en forme le pied de page en fonction du visuel fourni.
➢ Testez le résultat obtenu.
Largeurs
Sur le visuel, la largeur de l’entête et du pied de page ne sont pas les mêmes que pour le reste
du document.
➢ Trouvez une solution.
➢ Testez le résultat.
RESPONSIVE
➢ Sur votre navigateur, appuyez sur la touche F12 de votre clavier ou sur les touches
Ctrl + Shift + I afin d’afficher les outils de développement intégrés.
➢ Faites varier la largeur de l’interface de développement pour modifier la largeur
d’affichage de votre page web.
➢ Vous pouvez également cliquez sur l’icône située en haut à gauche des outils de
développement. Elle permet de simuler un affichage sur périphérique mobile.
Vous devriez constater que si votre site est capable de s’adapter un peu à la largeur de l’écran
(grâce aux flex-box), l’affichage n’est pas adapté au format vertical des mobiles.
Media queries
➢ A la fin de votre fichier CSS, ajoutez le bloc suivant :
@media screen and (max-width: 900px) {
Ce bloc permet d’affecter des mises en forme spécifiques si la largeur de l’écran est
inférieure à 900 pixels.
➢ Dans le bloc précédent, ajoutez le CSS permettant d’afficher les actualités les unes en
dessous des autres (flex-direction : column).
➢ Testez le résultat.
➢ Appliquez également les modifications suivantes pour les écrans de petite largeur :
▪ Les liens de l’entête seront plus petits (0.8em)
▪ Les titres principaux seront centrés (text-align : center).
▪ La vidéo doit avoir une largeur de 90% de la largeur de l’écran.
FLEX-BOX
➢ Apprenez en plus sur les flex-box grâce au site https://flexboxfroggy.com/
