Tp1, Tp2, Tp3 Et Tp4 (HTML5 CSS3) Avec Correction (Henchiri Sghaier Lycée Ibn Sina Gafsa)

Module 1
Création d'un site web interactif
TP n°1 Rappels (HTML5 )

Objectif
Rappels concernant la structuration et l’organisation d’un document HTML

Travail demandé
Rédiger le code HTML d'une page nommée TP1-Votrenom-index.html, et qui devra impérativement avoir
l'apparence de la page correspondante, à la fin de l’énoncé.
1) A l’aide de l’IDE COFFEECUP HTML créer un fichier vierge TP1-Votrenom-index.html et ajouter

le minimum d'instructions pour que ce soit une page conforme au standard HTML5.
2) Faire en sorte que le titre s'affichant dans la barre du navigateur soit "Exercice 1". Vérifier que cela
fonctionne.
3) Ajouter en haut de la page le titre "Exercice 1 : un exemple de page Web" en utilisant une balise de
titre de premier niveau <h1>.
4) Dans une partie de navigation ajouter le mot "Menu" en utilisant une balise de paragraphe <p>.
5) Ajouter dans la partie de navigation la liste des trois éléments (Accueil, DUT et Audio et vidéo) en
utilisant des balises de listes à puces <ul> et <li>.
6) Ajouter un lien hypertexte sur DUT qui doit pointer sur TP2-Votrenomdut.html.
7) Ajouter un lien hypertexte sur Audio et vidéo qui doit pointer sur TP2Votrenom-medias.html.
8) Ajouter le titre de la section 1 en utilisant une balise de titre de second niveau <h2>.
9) Ajouter les deux paragraphes de la section 1 en utilisant des balises de paragraphe.
10) Ajouter le titre de la section 2 en utilisant une balise de titre de second niveau <h2> et ajouter aussi le
paragraphe.
11) Dans la partie navigation, changer l’élément Accueil par un lien interne qui pointe sur la section 2.
12) Ajouter la barre horizontale en bas à l'aide de la balise <hr>.
13) Ajouter la phrase tout en bas, et utiliser une balise <footer>.
 Page web résultat
Prof :H Sghaier 3ème SI-STI

 Correction
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exercice 1</title>
</head>
<body>
<h1>Exercice 1</h1>
<p>Menu</p>
<ul >
<li><a href="#bas">Accueil</a></li>
<li><a href="TP2-Votrenomdut.html">DUT</a></li>
<li><a href="TP2Votrenom-medias.html">Son & video</a></li>
</ul>
</span>
<h2>section 1</h2>
<p>Voici un exemple de paragraphe</p>
<p>Voci un deuxieme exemle de paragraphe</p>
<h2><a id="bas">section 2</a></h2>
<hr/>
<footer>Cette page a été rédigée par CoffeCup HTML </footer>
</body>
</html>

Module 1
TP n°2 Création d’un formulaire (HTML5)
Objectif
Création d’un formulaire avec HTML5.

Travail demandé
A l’aide de l’IDE COFFEECUP HTML rédiger le code de la page web nommée « formulaire.html » qui
doit avoir l’apparence de la figure 1.
1) Créer l’en-tête HTML, le titre (avec une balise <h1>) « Mon premier Formulaire HTML5 »
2) Mettre en place le pourtour du premier groupe du formulaire à l’aide de la balise <fieldset> : le texte en
haut à gauche du cadre s’obtient grâce à la balise <legend>. La cible (action) du formulaire sera
« destination.php » et la méthode d’envoi est (POST).
3) Ajouter les champs obligatoires : nom et prénom (type text).
4) Ajouter le champ date de naissance (type date).
5) Ajouter les champs adresse électronique et page personnelle (types email et url).
6) Ajouter le champ code secret (type password) de taille 40 et de longueur maximale 6. Ce code doit
commencer par 2 lettres majuscules suivis de 4 chiffres pour en finir par deux lettres minuscules
(pattern)
7) Ajouter le groupe de boutons radio pour indiquer le sexe de la personne (type radio)
8) Ajouter le champ pays (balise select). La liste déroulante de taille 1 contenant le premier groupe
d’options "Europe" (<optgroup label= 'Europe'>) contenant lui aussi les options de valeur : 'France',
'Belgique', 'Italie', 'Allemagne'. Le deuxième groupe d’options "Amérique" contenant lui aussi les options
de valeur : 'USA', 'Canada', 'Argentine', 'Mexique'. Le troisième groupe d’options "Autres" contenant les
options : 'Afrique', 'Asie', 'Océanie', 'Australie'.
9) Mettre en place le pourtour du deuxième groupe du formulaire qui contient les trois cases à cocher ainsi
que la zone de texte de 50 colonnes et 5 lignes.
NB : Ajouter à la balise <textarea> l’événement : onclick = "this.value = ' ' "
10) Réaliser le troisième groupe du formulaire en ajoutant le champ fichier (type file), le champ caché (type
hidden) et les deux boutons Effacer (type reset) ainsi que le bouton Envoyer (type submit).

 Figure 1 : Page web résultat

 Correction
<head>
<title>Formulaire</title>
</head>
<body>
<h1>Mon Premier formulaire HTML5</h1>
<form name="formulaire" method="post" action="destination.php">
<fieldset>
<legend><h2>Vos coordonnées</h2></legend>
<br />
<label>Nom*:</label><input type="text" placeholder="vote nom" required="" />
<br />
<label>Prénom*:</label><input type="text" placeholder="vote prenom"
required="" /> <br />
<label>Date de naissance:</label><input type="date" value="jj/mm/aaaa"
required=""><br />
<label>Mail:*</label><input type="email" id="email" required /> <br/>
<label>Votre site:*</label><input type="text" value="http://www."
required=""><br />
<label>Code:*</label><input type="password" maxlength="8" pattern="[A-
Z]{2}+[1-9]{3}+[a-z]{2}" required="" /><br />
<div id="sex" >
<input type="radio" name="sex" value="Homme" />Homme <br/>
<input type="radio" name="sex" value="Femme"/>Femme
</div>
<select>
<option disabled="votre pays" selected="">Votre pays</option>
<optgroup label="Europe">
<option>France</option>
<option>italie</option>
<option>Allemagne</option>
</optgroup>
<optgroup label="Amérique">
<option>USA</option>
<option>Canada</option>
<option>Argentine</option>
<option>Mexique</option>
</optgroup>
<optgroup label="Autres">
<option>Afrique</option>
<option>Asie</option>
<option>Océanie</option>
<option>Australie</option>
</optgroup>
</select> <br/>
</fieldset>
<fieldset>
<legend><h2>Vos gôuts</h2></legend>
<div>
<input type="checkbox" name="gout" value="Pommes" />Pommes<br/>
<input type="checkbox" name="gout" value="Poires" />Poires<br/>
<input type="checkbox" name="gout" value="Scoubidous"/>Scoubidous <br/></div>
<textarea cols="50" rows="5" required placeholder="Décrivez vos gôuts en
détail" onclick="this.value=''"></textarea>
</fieldset>
<fieldset>
<legend><h2>Envoyer votre photo</h2></legend>
<input type="button" value="choisir un fichier" /> <br/><br/><br/>
<input value="Effacer" type="reset" />
<input type="submit" value="Envoyer" />
</fieldset>
</form>
</body>
</html>

Module 1
TP n°3 Création d’un menu de navigation (HTML5 ,CSS3)

Objectif
Création d’un menu horizontal centré en utilisant HTML5 et CSS3

Travail demandé
 Partie HTML
1) Créer une nouvelle page web avec L’IDE Coffecup HTML

2) Enregistrer la page sous le nom « index » dans votre dossier.
3) Ajouter Le titre « Menu CSS » comme titre de la page.
4) Changer la couleur d’arrière-plan de la page web. (couleur bleu)
5) Insérer l’image « bannière.jpg » comme arrière-plan dans une balise <Header>.
6) Insérer une section de navigation destinée à contenir notre menu de navigation (balise <nav>)
7) Dans la section de navigation créer une liste non ordonnée de 7 éléments (Economie, Technologie,
Culture, Sciences, Santé, Sports Contacts) (Balises <ul> et <li>).
 Partie CSS
1) Créer un nouveau fichier CSS avec L’IDE Coffecup HTML.

2) Enregistrer le fichier sous nom « style.css » dans votre dossier de travail.
3) Lier le fichier CSS avec la page web déjà créée (balise <link>).
4) Faire centrer le contenu de la page web en utilisant le sélecteur « body »
body{
margin: 0 auto; /* pour éviter les marges */
text-align: center;
}
5) Utiliser le sélecteur de class «nav» déjà crée dans la liste pour centrer les éléments de la liste (pour
identifier un sélecteur class il suffit d’ajouter un point devant le nom du sélecteur) et supprimer les
points de la liste non ordonnée.
.nav{
text-align:center; /* centrer les éléments de menu */
list-style: none; /* supprimer les point de liste */
padding: 10px; /* espace entre les éléments */
}
 La propriété « padding » est une propriété raccourcie qui permet de définir les différents écarts de
remplissage sur les quatre côtés d'un élément.
6) Mettre en ligne les éléments de la liste en utilisant la propriété « display:inline-block » sous le
sélecteur de class ( .nav li ) (les éléments li se mettent par défaut en block)

.nav li{
display:inline-block;
margin:0 0 0 10px;
width: 100px;
background-color:#fff;
}
 La propriété « width » permet de changer la largeur des liens (width=100% de son conteneur li)
7) Mettre en forme le texte des liens donc on change les propriétés de sélecteur a de sous class (.nav li)
.nav li>a{
font:1em helvetica arial sans-serif;
line-height: 3em;
display: inline-block;
width: 100%;
text-align: center;
text-decoration: none;
font-weight: bold;
}
 La propriété « line-height » permet d’augmenter la hauteur du lien (la zone cliquable) on peut utiliser
en alternatif un « padding ».
 La propriété « display» mettre en ligne les items.
 La propriété « text-decoration» enleve la décoration par défaut des liens.
 La propriété « text-decoration» enleve la décoration par défaut des liens.
 La propriété « font» permet de choisir la police d’écriture pour les liens
8) Change la couleur du texte et le background d'un lien au survol de la souris avec les propriétés de sous
class (.nav a:hover)
.nav a:hover{
color:#fff;
background: #3498DB;
}
 Page web Résultat.

Correction
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet"/>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor">
<meta name="dcterms.created" content="lun., 09 nov. 2020 19:39:26 GMT">
<meta name="description" content="">
<title>Menu CSS</title>
</head>
<body style="background-color:#28A3C8" >
<header >
<img src="banière2.jpg">
</header>
<nav>
<ul class="nav">
<li><a href="#">Économie</a></li>
<li><a href="#">Technologie</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Sciences</a></li>
<li><a href="#">Santé</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</body>
</html>
style.css
body{
margin: 0 auto;
text-align: center;
}
.nav{
text-align:center;
list-style: none;
padding: 10px;
}
.nav li{
display:inline-block;
margin:0 0 0 10px;
width: 100px;
background-color:#fff;
}
.nav li>a{
font:1em helvetica arial sans-serif;
line-height: 3em;
width: 100%;
text-align: center;
font-weight: bold;
}
.nav a:hover{
color:#fff;
}

Module 1
TP n°4 Aspects fondamentaux d’une page d'accueil

Objectif
Conception et Création d’une homepage (page d’accueil) en partant d’une maquette à l’application des CSS.
Travail demandé
Soit la maquette suivante qui représente la « homepage » d’un site web destiné à décrire le gouvernorat de
Gafsa.
Header
article
aside
nav
aside
footer
 Partie HTML
1) Créer une nouvelle page web avec L’IDE CoffeeCup HTML

2) Enregistrer la page sous le nom « homepage » dans votre dossier.
3) Créer les différents éléments représentés dans la maquette.
• header (contenant l’image bannière) (<header></header>).
• nav (contenant un menu de navigation, c’est déjà créé en TP4) (<nav></nav>).
• article (contenant un titre, un paragraphe et une image)( <article></article>).
• aside pour une image de la ville de Gafsa. (<aside></aside>).
• aside pour ajouter une carte Googlemaps. (<aside></aside>).
• footer avec une description et bouton partage sur facebook (<footer></
footer>).
Ces éléments sont dits « structurants » puisqu’ils ont une visée purement
sémantique.
4) Dans « header » Insérer l’image « banniere.jpg » (<img>).

5) Pour faciliter la gestion des éléments principale dans notre page on peut utiliser la balise « main ».
Les éléments nav, article et les deux aside sont incorporés dedans.
L’élément HTML <main> représente le contenu majoritaire du <body> du

document.
<main role="main"> Les éléments majoritaires </main>

6) Dans la partie nav créer une liste non ordonnée de 7 éléments (Démographie, Géographie, Histoire,
Économie, Éducation, Tourisme, Contacts) (<ul> et <li>).
7) Associer les différents éléments de la liste avec des liens hypertextes.
8) Identifier la liste par class class="nav" (futur utilisation en CSS).
9) Pour la partie article ajouter un titre « Gafsa » (<h1>) et le mettre en italique (<i>).
10) Copier le paragraphe introductif dans le fichier texte de votre dossier et l’ajouter après le titre (<p>)
11) Insérer l’image « gouvernorat.jpg » (<img>).
12) Après chaque élément de la partie article faire un retour chariot (<br>).
13) Identifier cet article par un class class="contenu".
14) Pour l’aside (a droit en haut) insérer l’image « gafsa.jpg » (<img>).
15) Identifier l’aside par un class="asd" (futur utilisation en CSS).
16) Intégrer une carte Googlemaps dans le deuxième aside (a droit en bas) (<iframe></iframe>)
 Ouvrir votre navigateur et rendre sur Google Maps à l’adresse

https://maps.google.fr/
 Saisissez l’adresse voulue dans le champ de recherche.
 Cliquez sur « Menu » puis « Partager ou intégrer la carte».
 Choisir l’onglet « intégrer une carte » puis copier le lien.
 Coller le lien dans la balise (<iframe></iframe>).
17) De même Identifier cet aside par le même class class="asd" (futur utilisation en CSS).
L’un des grands intérêts de l’attribut HTML class est qu’un même attribut
va pouvoir être partagé par différents éléments.
18) Incorporer les deux aside dans une même balise <Div> (futur utilisation flex en CSS).
19) Ajouter la phrase « Gafsa:Au porte du Sahara » comme footer sous laquelle intégrer un bouton
de partage sur facebook (<iframe></iframe>).
 Ouvrir votre navigateur et rendre sur l’adresse

https://developers.facebook.com/docs/plugins/share-
button/?locale=fr_FR
 Choisissez l’URL du site web que vous souhaitez partager.
 Collez l’URL dans le configurateur de code et définissez
l’attribut layout de votre bouton Partager. Cliquez sur le bouton Get
Code pour générer le code de votre bouton Partager
 Choisir l’onglet «iframe» puis copier le lien.
 Coller le lien dans la balise (<iframe></iframe>).
 Partie CSS
1) Créer un nouveau fichier CSS avec L’IDE CoffeeCup HTML.

2) Enregistrer le fichier sous nom « cssgafsa.css » dans votre dossier de travail.
3) Lier le fichier CSS avec la page web (balise <link>).
4) Centrer le contenu de la page en utilisant le sélecteur body
body{
margin: 0 auto; /* pour éviter les marges */
text-align: center;
}

5) Redimensionner l’image header avec 75% comme width et 25% height et ajouter un style de bordure
outset.
header>img{
width:75%;
height:25%;
border:outset;
}
6) Appliquer la même démarche de Tp n°4 pour transformer la liste non ordonnée en un menu de
navigation.
.nav{
text-align:center;
float:inherit;
list-style: none;
background-color:#FFFFFF;
border:outset;
margin:0px 0px 0px 203px;
height:664px;
}
.nav li{
display:block;
width: 100px;
border:outset;
text-shadow: 1px 1px 2px blue, 0 0 1em blue, 0
0 0.2em blue;
}
.nav li>a{
font:1em Malgun Gothic
line-height: 3em;
width: 100%;
text-align: center;
font-weight: bold;
color:#fff;
}
.nav a:hover{
color:#61C6D7;
background-color:F2F2F2;
}
7) Modifier le couleur d’arrière-plan « #FFFFFF », la bordure « outset», la hauteur « 664px», et

l’alignement du paragraphe « left». On utilise le sélecteur de class (.contenu) pour accéder à
cette partie de l’article.
.contenu {
background-color:#FFFFFF;
border:outset;
height:664px;
text-align:left;
}
8) Pour le titre du partie article (<h1>) attribuer les valeur des marges suivantes « 20px 20px 20px
20px », et changer le couleur d’arrière-plan « #fff » , la police d'écriture
« 1em Malgun Gothic», l’ombre du texte « 1px 1px 2px blue, 0 0 1em blue, 0 0 0.2em
blue»

 On utilise le sélecteur de sous class (.contenu>h1) pour accéder à l’élément.
.contenu>h1{
font:1em Malgun Gothic
border:outset;
text-shadow: 1px 1px 2px blue, 0 0 1em blue,
0 0 0.2em blue;
margin: 20px 20px 20px 20px;
background-color:#3498DB;
color:#fff;
}
9) Modifier les marges et l’alignement de l’image de l’article par les valeurs suivantes « 0px 0px 0px
203px» et « center ».
 Pour pointer sur l’élément (.contenu>img)
.contenu>img {
text-align:center;
}
10) Pour les deux aside affecter les valeurs de la bordure « outset» et marges « 0px 203px 0px
0px ».
.asd {
border:outset;
margin:0px 203px 0px 0px ;
}
11) L’image contenue dans l’aside (à droite en haut) doit avoir la hauteur et la largeur suivantes
« 50% », « 300px ».
 Pour accéder à l’image aside (.asd>img)
.asd>img{
height:50%;
width:300px;
}
12) Ajouter les marges suivantes pour la partie footer
footer{
}
13) Pour l’arrangement en ligne de la partie majoritaire de notre page web on utilise la propriété flex
(Display) pour l’élément main qui rassemble les parties nav, article, div (les deux aside ensemble).
 La propriété flex est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier
ses dimensions afin de remplir l'espace disponible de son conteneur.
main{
display:flex;
flex-direction: rows;
}

 Page web résultat

 Correction partie HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="dim., 15 nov. 2020 21:05:47 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<link href="cssgafsa.css" rel="stylesheet" />
</head>
<body>
<header>
<img src="banniere.jpg" />
</header>
<main role="main">
<nav>
<ul class="nav">
<li><a href="#" >Démographie</a></li>
<li><a href="#" >Géographie</a></li>
<li><a href="#" >Hitoire</a></li>
<li> <a href="#" >Economie</a></li>
<li><a href="#" >Education</a></li>
<li> <a href="#" >Tourisme</a></li>
<li> <a href="#" >Contacts</a></li>
</nav>
<article class="contenu">
<h1><i>Gafsa</i></h1>
<p> Aux portes du Sahara, Gafsa, ville de 100 000 habitants,
constitue une étape presque obligatoire avant de plonger dans le désert.
Son histoire est très ancienne puisque des traces de peuplements préhistoriques
datés de 8 500 av. J.-C. à 5 400 av. J.-C. y ont été découvertes
et témoignent de la civilisation capsienne. Cet adjectif vient de Capsa,
nom de Gafsa lors de sa fondation au IIe siècle avant J.-C. sous le règne de Jugurtha.
Ce roi numide considérait la ville comme son trésor.
Si les Romains la détruisent en 107 avant J.-C., ils la rebâtissent et en font un municipe.
Au Ve siècle, elle devient la capitale du Royaume berbère jusqu'à l'arrivée des Byzantins en l'an
553.
Elle est conquise en 667 par les Musulmans.
Malgré les dominations successives, les Gafsiens se montrent toujours rebelles et font preuve
d'indépendantisme.</p> <br />
<img src="gouvernorat.jpg" />
</article>
<div id="partiegauche">
<aside class="asd">
<img src="gafsa.jpg" />
</aside>
<aside class="asd">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3389245.3755299477!2d10.33428836382142!3
d33.946016211357474!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2stn!4v1605480315189!5m2!1
sfr!2stn"
width="300" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-
hidden="false" tabindex="0"></iframe>
</aside>
</div>
</main>
<footer>
<hr/>
<cite>Gafsa:la porte du Sahara</cite> <br />
<iframe
src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.facebook.com%2F&layou
t=button&size=large&width=93&height=28&appId"
width="93" height="28" style="border:none;overflow:hidden" scrolling="no"
frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write;
encrypted-media; picture-in-picture; web-share"></iframe>
</footer>
</body>
</html>

Tp1, Tp2, Tp3 Et Tp4 (HTML5 CSS3) Avec Correction (Henchiri Sghaier Lycée Ibn Sina Gafsa)

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tp1, Tp2, Tp3 Et Tp4 (HTML5 CSS3) Avec Correction (Henchiri Sghaier Lycée Ibn Sina Gafsa)

Transféré par

Droits d'auteur :

Formats disponibles

Module 1

Création d'un site web interactif

TP n°1 Rappels (HTML5 )

Rappels concernant la structuration et l’organisation d’un document HTML

1) A l’aide de l’IDE COFFEECUP HTML créer un fichier vierge TP1-Votrenom-index.html et ajouter

 Page web résultat

Prof :H Sghaier 3ème SI-STI

Prof :H Sghaier 3ème SI-STI

TP n°2 Création d’un formulaire (HTML5)

Création d’un formulaire avec HTML5.

« destination.php » et la méthode d’envoi est (POST).

3) Ajouter les champs obligatoires : nom et prénom (type text).

4) Ajouter le champ date de naissance (type date).

options : 'Afrique', 'Asie', 'Océanie', 'Australie'.

que la zone de texte de 50 colonnes et 5 lignes.

NB : Ajouter à la balise <textarea> l’événement : onclick = "this.value = ' ' "

Prof :H Sghaier 3ème SI-STI

Prof :H Sghaier 3ème SI-STI

Prof :H Sghaier 3ème SI-STI

TP n°3 Création d’un menu de navigation (HTML5 ,CSS3)

Création d’un menu horizontal centré en utilisant HTML5 et CSS3

1) Créer une nouvelle page web avec L’IDE Coffecup HTML

1) Créer un nouveau fichier CSS avec L’IDE Coffecup HTML.

Prof :H Sghaier 3ème SI-STI

 Page web Résultat.

Prof :H Sghaier 3ème SI-STI

Prof :H Sghaier 3ème SI-STI

TP n°4 Aspects fondamentaux d’une page d'accueil

1) Créer une nouvelle page web avec L’IDE CoffeeCup HTML

4) Dans « header » Insérer l’image « banniere.jpg » (<img>).

L’élément HTML <main> représente le contenu majoritaire du <body> du

Prof :H Sghaier 3ème SI-STI

 Ouvrir votre navigateur et rendre sur Google Maps à l’adresse

 Ouvrir votre navigateur et rendre sur l’adresse

1) Créer un nouveau fichier CSS avec L’IDE CoffeeCup HTML.

Prof :H Sghaier 3ème SI-STI

7) Modifier le couleur d’arrière-plan « #FFFFFF », la bordure « outset», la hauteur « 664px», et

Prof :H Sghaier 3ème SI-STI

12) Ajouter les marges suivantes pour la partie footer

Prof :H Sghaier 3ème SI-STI

Prof :H Sghaier 3ème SI-STI

Prof :H Sghaier 3ème SI-STI

Vous aimerez peut-être aussi