TP Mise en Page

Matière : informatique( STI)
LYCEE ELWAFA ARIANA

& TP4 ( LA Mise en page) Niveau : 3 EME SI
PROF MME BOURGOU
Sujet Site Web Statique
1. Créer un dossier portant comme nom « TP mise en page» dans le dossier de travail sur
la partition D de votre disque dur
2. A l’aide de l’éditeur de crétion des pages web, saisir le code HTML5 pour créer les pages
et les sauvegarder respectivement sous les noms « accueil.html»,
Les formes des pages sont données ci-dessous :
Zone1 :header
Page « association.html »
Bienvenue dans notre association
Association des Développeurs des Sites Web(ADST)

Zone2 :nav
 Formulaire d’inscription
 Conditions d’inscription Zone3 : aside
Spot publicitaire Zone4 : section
Notre association vous permet de réaliser des sites web à l’aide des développeurs professionnels
Une image numérique désigne tout objet graphique (photo, dessin, image de synthèse, icône,…)
importée, créer, acquis ou traite et qui est stocké sous une forme binaires (suite de 0 et 1).
Zone5 : article
Pour bien exploiter les sites web veillez nous contacter
Zone6 : footer
Page form_inscription.html
Page 1
LYCEE ELWAFA ARIANA
PROF MME BOURGOU
2) créer une feuille de style et la sauvegarder dans votre dossier sous le nom de
« fstyle.css »
3) saisir le code CSS3 dans la feuille de style « fstyle.css » pour appliquer un style pour les
éléments HTML pour mettre :
 entête (header) : texte centré, en majuscule, taille 30px avec un effet d’ombre, hauteur :
150px et marge de bas 20px et couleur d’arrière-plan au choix, rayon des coins
arrondis :20px,15px,25px,30px(coin supérieur gauche,coin supérieur droit, coin
inferieur droit, coin inferieur gauche)
 section et footer: texte centré, taille 25px, hauteur : 50px, marge 5px et couleur
d’arrière-plan au choix
 nav : texte centré, taille 25px, bordure taille 2px en bleu, arrière-plan couleur au
choix ,hauteur :100px
 aside et article: bordure taille 2px en rouge, hauteur :100px,texte centré, arrière-plan
couleur au choix, marges : 20px, 10px, 20px, 10px (marge haut, marge droite, marge en
bas , marge à gauche)
 l’image : hauteur 80px, largeur 100px ,encadrée
Code Html5 de la page accueil .html :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>accueil</title>
<link rel="stylesheet"
href="……… ">
</head>
<body>
<….. ></p>Bienvenue dans notre site</p>
<p> Association des dévloppeurs des sites web</p>
<…………….. >
<…… >
<ul>
<li><a href="form_insc.html">formulaire d'inscription</a></li>
<li><a href="……………………">conditions d'inscription</a></li>
</ul>
<……………….>
<…. >spot publicitaire:<br>
<img src="images/Facebook.png" alt="image introuvable" id="image">
<…………… >
<…. ><a……………..>notre association </a>vous permet de réaliser des sites web à l'aide des
developpeurs professionnels</section>
<article>une image numérique désigne tout objet graphique(photo,dessin,imagede
synthése,icones,...),importée,crée,...
</article>
<……….>pour bien exploiter les sites web veillez nous consulter<………….>
</body></html> Page 2
LYCEE ELWAFA ARIANA
PROF MME BOURGOU
Code CSS3 du fichier fstyle .css :

/*----------------style de la page accueil-------------------- : */
………….. {text-align: center;

…….. : uppercase;
font-weight: bold;
font-size: 30px;
…………………… : 2px 5px grey;
height: 150px;
margin-bottom: 20px;
background-color: aqua;
……………………….. : 20px 15px 25px 30px;}
…………. ,……… {text-align: center;

font-size: 25px;
height: 50px;
margin: 5px;background-color: orange;}
……. {text-align: center;font-size: 25px;

border:2px solid blue;background-color: coral;height: 100px;}
………. ,………..{text-align: center;height: 100px;background-color: darkgray;}
#image{height: 80px;width: 100px;

border: 1px solid green;}
/*----------------style du formulaire-------------------- : */
Retenons :
 La mise en page :
Page 3
LYCEE ELWAFA ARIANA
PROF MME BOURGOU
Retenons :
La mise en page : Le code HTML a plusieurs éléments sémantiques qui définissent les différentes parties
d'une page Web.
Exemple de mise en Page :
• <header> - Définit un en-tête pour un document ou une section

• <nav> - Définit un ensemble de liens de navigation
• <section> - Définit une section dans un document
• <article> - Définit un contenu indépendant et autonome
• <aside> - Définit le contenu en dehors du contenu (des pubs…)
• <footer> - Définit un pied de page pour un document ou une section
Remarque:
Un élément HTML peut être considéré comme une boîte.
Il comprend: les marges, les bordures, le remplissage et le contenu réel.
 Contenu - Le contenu de la boîte, où le texte et les images apparaissent

 Padding - Efface une zone autour du contenu. Le rembourrage est transparent
 Bordure - Une bordure qui entoure le remplissage et le contenu
 Marge - Efface une zone à l'extérieur de la bordure. La marge est transparente
Exemple :
MARGES
BORDURE
PADDING
CONTENU
Page 4

TP Mise en Page

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

TP Mise en Page

Transféré par

Droits d'auteur :

Formats disponibles

Matière : informatique( STI)

LYCEE ELWAFA ARIANA

Sujet Site Web Statique

Association des Développeurs des Sites Web(ADST)

 Conditions d’inscription Zone3 : aside

Spot publicitaire Zone4 : section

Code Html5 de la page accueil .html :

Code CSS3 du fichier fstyle .css :

………….. {text-align: center;

…………. ,……… {text-align: center;

……. {text-align: center;font-size: 25px;

………. ,………..{text-align: center;height: 100px;background-color: darkgray;}

#image{height: 80px;width: 100px;

Exemple de mise en Page :

• <header> - Définit un en-tête pour un document ou une section

 Contenu - Le contenu de la boîte, où le texte et les images apparaissent

Vous aimerez peut-être aussi