Institut Supérieur des Études Technologiques de Béja

Département Technologies de l’informatique

Matière : Atelier Développement Web 1 Niveau : 1ière année TI

Atelier N°9 : Les balises structurantes en HTML5

Vous êtes appelé à créer la page web « index.html » suivante en utilisant les balises structurantes en
HTML5 et le langage CSS3 pour la mise en forme de la page.

header
nav
section
div
footer

Page 1 sur 10
Atelier 9- Balises structurantes en HTML5

1- On vous demande de créer la hiérarchie de dossiers suivantes sachant que :

- Le dossier « css » contient la feuille de style « style.css » à développer
- Le dossier « multimedia » contient les images à utiliser dans le site
- Le dossier « source » contient la page HTML « index.html » à développer

mon_site

css multimedia source

2- La première chose à faire maintenant est de distinguer les principaux blocs sur la page
« inde.html ». Ces blocs vont constituer le squelette de notre page. Pour créer ce squelette, nous
allons utiliser différentes balises HTML :
a. Les balises structurantes de HTML5, que nous connaissons : <header>, <section>,
<nav>, etc.

b. La balise universelle <div> quand aucune balise structurante ne convient.

3- Récupérer le dossier contenant les images et copier les images vers le dossier « multimedia »
4- Créer la page HTML « index.html» en se basant sur les informations données par le tableau
suivant :

Elément Contenu
header Image : « images.jpg »
Texte : Cours HTML5 et CSS3
nav Une liste non ordonnées composée des éléments : Contact, CV et Acceuil
section « article » : contenant
- Titre h1 : Introduction à HTML5
- Le paragraphe suivant :
HTML5 est la dernière évolution des standards qui définissent HTML. Le terme
HTML5 regroupe deux concepts différents :Il s'agit de la nouvelle version du
langage HTML, avec de nouveaux éléments, attributs et comportement mais
aussi un ensemble plus large de technologies qui permettent des sites web plus
variés et puissants, et des applications web.

Page 2 sur 10
Atelier 9- Balises structurantes en HTML5

HTML5 est la dernière évolution des standards qui définissent HTML.

Le terme HTML5 regroupe deux concepts différents :Il s'agit de la nouvelle
version du langage HTML, avec de nouveaux éléments, attributs et
comportements mais aussi un ensemble plus large de technologies qui
permettent des sites web plus variés et puissants, et des applications web.

« aside » contenant :
- Un titre h3 : Mes connaissances
- Le paragraphe : Je suis un étudiant doué de la programmation web.
J'ai des connaissances dans les langages suivants : php, Mysql, Js,
HTML et CSS.
- Les images : php.jpg, css.jpg, js.png, html.jpg
- Le paragraphe : Vous êtes invité à bien apprendre ces langages de
développement web !!!

div - Un titre h3 : Vous pouvez nous contacter par les moyens suivants
- Les images : facebook.jpg, twitter.jpg, whatsapp.jpg
footer <marquee>Tous Les droits sont réservés à Iset Beja </marquee>
La balise <marquee> permet de faire défiler un texte quelconque horizontalement, par défaut de la
droite vers la gauche, sur toute la largeur de la fenêtre du navigateur. Lorsque le texte disparait sur le
côté gauche de la fenêtre, il réapparait sur le côté droit.

Vous devez ainsi obtenir le résultat suivant :

Page 3 sur 10
Atelier 9- Balises structurantes en HTML5

5- Créer maintenant le fichier « style.css » et l’ajouter sous le dossier « style ».

6- Lier le fichier « index.html » au fichier « style.css »
7- Ajouter maintenant au fichier « style.css » le code suivant pour la mise en forme du corps
« body » du document

body{
background-image:url("../multimedia/font.jpg"); /* image d’arrière plan */
background-size:100%; /* l’image occupe la totalité de la page */
background-repeat:no-repeat; /* pas de répétition de l’image */

8- Ajouter maintenant les styles pour « header » et « footer ». Voir ensuite comment devient votre
page « index.html »

header, footer{
margin:auto; /* centrer l'élément par rapport à la page */
width:75%;
background-color: #333333;
display:table;
}
footer {
padding: 3px ;
color: yellow;
font-size: 20px;
margin-top:10px;
}

header {
box-shadow: 0px 0px 5px 5px; /* définir l'ombre autour de l'entête*/
font-family: verdana, arial;
font-style:italic;
text-align:center;
text-transform: uppercase ;/* rendre tout le texte majuscule*/
border-radius:20px 20px 20px 20px; /* créer des bordures arrondies*/
margin-top:60px; /* espace entre bordure et le haut extérieur*/
color: white;
font-size: 30px;
}

/* style de l’image dans le header */

header img {
float:right;
width:100px;
Page 4 sur 10
Atelier 9- Balises structurantes en HTML5

height:80px;
padding-top:10px;
padding-right:20%;
padding-bottom:10px;
}

9- Ajouter maintenant les styles pour « nav » et voir ensuite comment devient votre page
« index.html »

nav
{
font-weight:bold;
width: 75%;
text-align: center;
background-color:#FFDEAD;
margin:auto;
margin-top:8px;
word-spacing:40px; /* définir l’espace entre les différents mots */
padding:2px ;
border-radius:20px 20px 20px 20px;

}
nav ul { list-style-type: none; }
nav li { display: inline-block; /* faire apparaître les éléments de la liste sous la même ligne */ }

10- Ajouter maintenant les styles pour « section », « article » et « aside » comme suit et revoir
comment devient l’affichage de votre page « index.html »

section{ padding: 10px; margin:auto; width:75%; margin-top:2px;}

article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 16px;
margin-top:5px;

Page 5 sur 10
Atelier 9- Balises structurantes en HTML5

}
article
{
height:280px;
width:655px;
}

aside
{ height:280px;
position: relative;
width: 300px;
}

aside h3 {text-align:center; font-family: broadway;}

11- Ajouter finalement les styles pour « div » et revoir comment devient l’affichage de votre page
« index.html »

div img {width:50px; height:50px;}

div {
box-shadow: 0px 0px 5px 5px;
font-family: courier;
text-align:center;
border-radius:20px 20px 20px 20px;
margin:auto;
width:75%;
margin-top:5px;
background-color: #333333;
color: white;
font-size: 10px;
}

Page 6 sur 10
Atelier 9- Balises structurantes en HTML5

Annexe

Le modèle des boîtes en CSS

1- Explication et illustration du modèle des boîtes

Voici une première illustration théorique du modèle des boîtes :

• La première boite représente le contenu du document

• Autour du contenu, la deuxième boite contient la marge intérieure de l’élément qu’on appelle en
CSS le « padding »
• La troisième boite contient la bordure de l’élément
• La dernière boite va contenir la marge extérieure de l’élément
Exemple :

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
/* font: bleu-vert */ background-color:#088;
/* largeur de l'élément */ width: 200px;
/* marge intérieure */ padding : 30px;
/* bordure: vert */ border: 20px solid #0C0;
/* marge extérieure */ margin: 50px;
}

.p2 {
/* font: pink */ background-color:pink;
/* largeur de l'élément */ width: 400px;
/* marge intérieure */ padding : 50px;
/* bordure: vert */ border: 30px solid blue;
/* marge extérieure */ margin: 50px;
}

Page 7 sur 10
Atelier 9- Balises structurantes en HTML5

</style>
</head>
<body >
<p class= "p1"> Para 1 spacing </p>
<p class= "p2"> Para 2 spacing </p>

</body>
</html>

2- Les bordures
Nous pouvons définir les bordures d’un élément de différentes manières en CSS : soit en utilisant les
trois propriétés border-style, border-width et border-color, soit un utilisant directement la notation
courte border.

Exemple :

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {

background-color:pink;
width: 400px;
border: 10px solid black;
}

.p2 {
background-color:pink;
width: 400px;
border-width: 10px ;
border-style: solid;
border-color : black;
}

</style>
Page 8 sur 10
Atelier 9- Balises structurantes en HTML5

</head>
<body >
<p class= "p1"> Para 1 spacing </p>
<p class= "p2"> Para 2 spacing </p>

</body>
</html>

3- Les styles de bordures

La propriété border-style peut prendre huit valeurs différentes qui vont définir l’allure générale (le
style) de notre bordure.

Exemple :

<html>
<head>
<style>
.p1 {

background-color:pink;
width: 400px;
border: 10px ridge black;
}

.p2 {
background-color:pink;
width: 200px;
Page 9 sur 10
Atelier 9- Balises structurantes en HTML5

border-width: 8px ;
border-style: dashed;
border-color :black;
}

</style>
</head>
<body >
<p class= "p1"> Para 1 spacing </p>
<p class= "p2"> Para 2 spacing </p>

</body>
</html>

Position relative

La position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par
exemple un élément du code Html. Un positionnement relatif sera donc traité dans le flux du document,
et fera référence pour son positionnement à l'élément qui lui est immédiatement supérieur. Cette
propriété est valable pour tous les types de balises

On utilise souvent le positionnement absolu car c’est plus facile et plus sûr.

Exemple : .toto

{position:absolute; top:10px; left:10px;}

Donne en position absolue :

et en position relative avec "Toto et Tata":

Page 10 sur 10