Vous êtes sur la page 1sur 22

TP 4 Développement Web

Partie 1 Zoning

Si l'on souhaite créer un site web, il va falloir apprendre à créer des zones (un zoning).

Avant d'intégrer des images ou encore de saisir du texte, nous avons besoin de définir des
emplacements pour un positionnement précis de nos informations.

Pour cela, nous allons créer deux nouveaux fichiers : modele1.html & modele1.css

Pour mieux comprendre, prenons un cas d'étude, imaginons que nous souhaitons viser ce rendu
graphique :

Voici le code correspondant.

modele1.html
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mon Modele</title>
<link rel="stylesheet" href="modele1.css">
</head>
<body>
<div id="conteneur">
<header>
<p> Zone du Haut</p>
</header>
<div class="gauche">
<p> Zone de Gauche</p>
</div>
<div class="milieu">
<p> Zone du Milieu</p>
</div>
<div class="clear"></div> <!-- on arrete l'effet flottant -->
</div>
</body>
</html>
modele1.css
#conteneur{
background: #336699; width: 800px;
}
header{
background: #ff5555; width: 800px; height: 70px;
}
.gauche{
background: #5585ff; width: 150px; height: 530px; float: left;
}
.milieu{
background: #55D87C; width: 650px; height: 530px; float: left;
}
.clear{
clear: both;
}

Exercice 1 Zoning et modèle de mise en page

Maintenant que vous avez pris des forces, nous allons nous entrainer avec plusieurs modèles.

Exercice, reproduire ces images :

Graphique 1 :
Graphique 2 :

Graphique 3 :
Graphique 4 :

Graphique 5 :
Exercice 2

Appliquer les propriétés float et clear pour définir un positionnement flottant.

Pour cet exercice : Observez les figures et appliquez les propriétés et les valeurs appropriées.

1. On considère le document html suivant :

<!doctype html>
<html>
<head>
<title>Positionnement flottant</title>
<meta charset="utf-8">
</head>
<body>
<div class="conteneur">
<div class="box">block2</div>
<div class="box">block3</div>
<div class="box">block4</div>
</div>
</body>
</html>

a. Complétez le code css suivant afin d'obtenir le résultat à droite.

div{
border: 1px solid
rgba(0,0,0,.3);
text-align: center;
color:#fff; }
.box{
....................
background: #3498db;
..........: 5px;
height: 40px; }

b. Remarquez que les 3 blocs sortent de flux de leur parent, et par conséquent on se retrouve
avec un conteneur de hauteur nulle.

Comment on peut empêcher le dépassement des flottant afin d'obtenir le rendu suivant :

2. On va travailler sur le document html de la question précédente mais cette fois ci on va identifier les
éléments avec des classes différentes afin de les traiter séparément.

.block2{
...................
background: #3498db;
height: 40px;}
.block3{
background: #d35400;
height:60px;}
.block2{
....................
background: #3498db;
height: 40px; }
.block3{
...................
background: #d35400;
height: 40px; }
.block4{
....................
background: #1abc9c;
height: 40px; }
.block2{
..................
background: #3498db;}
.block3{
.................
.................
background: #d35400;}
.block4{
...................
background: #1abc9c; }
.block2{
...................
background: #3498db;}
.block3{
................
................
background: #d35400;}
.block4{
..................
..................
background: #1abc9c;}

Exercice 3 : mise en forme d'une boîte avec des coins arrondis par attributs CSS3

Écrire une page HTML5

 nous placerons dans cette page une div


 cette div contiendra 2 articles
 nous ferons en sorte que l'élément div ait des coins arrondis identique et circulaires.
 nous ferons en sorte que le premier article ait des coins éliptique et différents en utilisant
border-top-left-radius, ....
 nous ferons en sorte que le second article ait également des coins arrondis et différents mai
en utilisant la déclaration border-radius.
Exercice 4 Gestion du débordement avec text-overflow en CSS3.

Écrire une page HTML contenant 1 div :

 Cette div aura :


o une largeur fixe de 50%,
o une hauteur fixe de 3em,
o un overflow positionné à hidden,
o un text-overflow positionné à ellipsis.
 Elle contiendra un texte suffisamment long pour ne pas rentrer dans l'espace de la div.
 Rendre le texte visible au survol,

Exercice 5 Affichage d'un texte avec tête, sections, navigation et pied de page en HTML 5.0

 Écrire une page HTML 5 qui affiche :


o un bloc d'entête header,
o un titre de premier niveau h1,
o un groupe d'entête hgroup,
o un bloc de navigation permettant d'accéder aux section définies ci-après.
o au moins deux sections génériques (section) pouvant correspondre aux chapitres
d'un livre.
o un bloc de pied footer,
 Faire la mise en forme de ces éléments par des CSS afin que :
o chaque type de section ait une couleur de fond différente,
o les éléments atteint par la navigation interne aient une un style différent.
 le bloc de navigation soit toujours placé en haut et à droite de la page.
Exercice 6 Classification périodique

Dans cet exercice nous allons utiliser les propriétés permettant d'agir sur la position des blocs dans la
page pour produire une classification périodique des éléments chimiques comme celle présentée à la
figure suivante.

Une version complète peut par exemple être trouvée ici

Nous allons commencer par nous intéresser à la mise en forme des données pour un atome. Les données
que nous voulons afficher sont présentées à la figure suivante qui sert également de modèle pour le
résultat à obtenir.
Le fichier hydrogene-carbone.html contient des données pour les atomes hydrogène et carbone. Des
classes ont été créées pour structurer et typer ces données. Etudiez cette structure. Vous pouvez
constater que les données n'apparaissent pas dans le même ordre pour les deux atomes. Vous les laisserez
telles qu'elles, pour autant on voudra obtenir la même présentation pour les deux atomes (voir image
précédente).

1. Fixer une largeur, une hauteur, une couleur d'arrière-plan pour les <div> de la classe atome.

Vous pouvez utiliser le fichier hydrogene-carbone.css qui définit quelques propriétés de base pour les
différents éléments. Nous allons le compléter dans la suite de l'exercice.

2. On souhaite placer le numéro atomique en haut à gauche : à 0% du bord haut, et à 2% du bord


gauche définis par la boîte de l'élément <div> de la classe atome qui le contient. Quelles propriétés
faut-il ajouter au sélecteur div.numero ? Quelle propriété faut-il modifier pour les div.atome ?
3. Procéder de manière similaire pour
 l'électronégativité : à 1% du bord haut et 40% du bord gauche,
 les couche d'électrons : à 1% du bord haut et 2% du bord droit,
 la masse atomique : à 1% du bord bas et 2% du bord gauche.
4. Définissez les propriétés qui permettent de décaler vers le bas par rapport à leur position actuelle
de 20% le symbole chimique et de 15% le nom de l'élément chimique.
5. Vous devez maintenant avoir obtenu un résultat similaire à l'image précédente et, mis à part l'élément
div.nom qui doit se trouver après l'élément div.symbole, vous devez pouvoir changer l'ordre des
données au sein du bloc div.atome sans que cela ait un impact sur l'affichage.

Poursuivons avec la construction de la table. Les données sur les 11 premiers atomes se trouvent dans le
fichier tablePeriodique.html. Ajoutez le contenu de la feuille de style produite à la question précédente
au fichier style-tablePeriodique.css. Les éléments s'affichent pour le moment les uns en dessous des
autres.

1. Les éléments de classe atome sont pour le moment positionnées les uns en dessous des autres dans
les différentes lignes. Quelle propriété permet de changer le comportement des blocs div.atome
pour qu'ils s'affichent les uns à côté des autres ?
2. Pour obtenir le placement désiré des éléments, nous allons rendre flottants à gauche et à droite,
selon ce qui est désiré, les blocs correspondant aux atomes. Pour cela, après avoir identifié à quoi
correspond l'élément div.bloc dans le document, définissez pour les éléments de cette classe bloc la
valeur de propriété float qui convient.
3. Finissons avec un peu de cosmétique :
 Dans les conditions normales, certains éléments chimiques sont naturellement solides (Li, Be,
B, C et NA pour ceux qui nous concernent), d'autres des gaz (les autres). Attribuez une
couleur particulière aux symboles des gaz et une autre aux symboles des solides (il faut
définir des classes et les attribuer dans le code html).
 Dans les éléments chimiques on identifie plusieurs types :
o les non-métaux : H, C, N,O,
o les métaux alcalins : Li, Na,
o les métaux alcalino-terreux : Be,
o les métalloïdes : B
o les halogènes : F,
o les gaz rares : He et Ne.

Il est d'usage de représenter dans la table périodique ces types par différentes couleurs. Définissez
des couleurs de fond que vous associerez aux éléments chimiques selon leur type.

 Définissez une règle CSS telles que le nombre d'électrons de la première couche soit de
couleur rgb(128,0,0), celui de la seconde couche rgb(64,0,0) et celui de la troisième couche
rgb(32,0,0).

Vous pouvez aussi décaler ces nombres vers le haut de 2px pour le premier, 4px pour le second et 6px.

Exercice 7 Mise en forme en CSS : Pas à pas

Dans cet de vous allez utiliser vos données pour créer votre propre CV.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercie CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<div class="en-tete">
Mon Portfolio
</div>
<div class="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Mes réalisations</a></li>
<li><a href="#">Mon CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="contenu">
<h1>Mon CV</h1>
<div class="partie-cv etat-civil">
<img src="photo.jpg" alt="Photo de Camille Aunette">
<h2>Mon état civil</h2>
<ul>
<li><span>Nom</span> : Aunette</li>
<li><span>Prénom</span> : Camille</li>
<li><span>Age</span> : 25 ans</li>
<li><span>Ville</span> : Lyon</li>
</ul>
</div>
<div class="partie-cv experience-pro">
<h2>Mon expérience professionnelle</h2>
<div class="experience">
<span class="experience-date">Depuis 2021</span>
<span class="experience-label">Ingénieure stylistique</span>
<span class="experience-employeur">Éditions Matin et Soir</span>
<span class="experience-ville">Macon</span>
</div>
<div class="experience">
<span class="experience-date">2020-2021</span>
<span class="experience-label">Coquille deleter</span>
<span class="experience-employeur">Noob & Co</span>
<span class="experience-ville">Lyon</span>
</div>
<div class="experience">
<span class="experience-date">2019-2020</span>
<span class="experience-label">Unbreakable space designer</span>
<span class="experience-employeur">Oxyme More</span>
<span class="experience-ville">Lyon</span>
</div>
</div>
<div class="partie-cv formation">
<h2>Mes formations</h2>
<div class="formation">
<span class="formation-date">2018-2017</span>
<span class="formation-label">Master Professionnel Ingénieurie du texte</span>
<span class="formation-ecole">Université Lyon 2</span>
<span class="formation-ville">Lyon</span>
</div>
<div class="formation">
<span class="formation-date">2014-2015</span>
<span class="formation-label">Certification Métaphore</span>
<span class="formation-ecole">TechOText</span>
<span class="formation-ville">Boulinville</span>
</div>
</div>
<div class="partie-cv competences-numeriques">
<h2>Mes compétences numériques</h2>
<div class="competence">
<span>Traitement de texte</span>
<div class="competence-niveau">
<div class="competence-niveau-texte"></div>
</div>
</div>
<div class="competence">
<span>HTML & CSS</span>
<div class="competence-niveau">
<div class="competence-niveau-web"></div>
</div>
</div>
<div class="competence">
<span>InDesign</span>
<div class="competence-niveau">
<div class="competence-niveau-pao"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

1. Utilisez le fichier ce code et une image de votre choix pour créer votre propre CV.
2. Placez les deux fichiers dans votre dossier de travail et ouvrez le fichier html avec un logiciel
d’édition.
3. Créez un nouveau fichier css et enregistrez-le dans votre dossier de travail.
Pour la suite de l’exercice, les questions commenceront par HTML ou par CSS pour vous signaler lequel
des deux fichiers doit être modifié.

1. HTML : Intégrez la feuille de style que vous venez de créer dans votre page html.
2. CSS : Utilisez le sélecteur adapté afin de définir la police Calibri par défaut pour la page.
3. CSS : Modifiez l’en-tête de la page HTML afin d’obtenir le résultat illustré par la capture ci-
dessous. Vous devez pour cela manipuler trois paramètres :
 La couleur d’arrière-plan ;
 Les marges internes ;
 La taille des caractères.

4. CSS : Supprimez les marges externes du corps de la page HTML afin de coller votre en-tête aux
bords de la fenêtre comme dans la capture ci-dessous.
5. CSS : Ajoutez une couleur d’arrière-plan au menu.

6. CSS : Supprimez les marges externes ET les marges internes de la liste utilisée pour structurer le
menu afin d’obtenir le résultat illustré par la capture ci-dessous.

7. CSS : En utilisant la propriété CSS display, modifiez le comportement des lignes de la liste utilisée
pour le menu afin qu’elles se positionnent côte à côte et que l’on puisse les dimensionner par la
suite. Les lignes doivent donc se comporter comme des éléments inline-block.
8. CSS : Ajoutez des marges internes aux lignes de la liste du menu pour obtenir un résultat
correspondant à la capture ci-dessous.

9. CSS : Modifiez les liens hypertextes présents dans le menu afin d’obtenir le résultat
correspondant à la capture ci-dessous. Vous devez pour cela effectuer les réglages suivants :
 Ajoutez des marges internes ;
 Modifiez la couleur du texte ;
 Supprimez les soulignements.
10. CSS : Utilisez la pseudo-classe :hover afin de modifier les liens lors du survol de la souris et obtenir
le résultat illustré par l’animation ci-dessous.

11. HTML : Ajoutez une classe au lien Mon CV qui correspond à la page que vous êtes en train de
mettre en forme.
12. CSS : En utilisant la classe ajoutée à la question précédente, mettez en valeur le lien correspondant
à la page courante.
13. CSS : Réglez le contenu de la page pour obtenir le résultat illustré par la capture d’écran ci-
dessous. Pour cela, vous devrez effectuer les opérations suivantes :
 Dimensionnez le contenu de la page pour qu’il fasse 1000 pixels de large au maximum ;
 Ajoutez des marges externes automatiques à gauche et à droite (pour centrer le contenu
dans la page) ;
 Ajoutez des marges externes de 20 pixels en dessus et en dessous ;
 Ajoutez des marges internes de 10px à droite et à gauche (pour que le contenu ne soit pas
collé aux bords de la page sur les écrans étroits).

14. CSS : Modifiez le titre de la page afin qu’il corresponde à la capture ci-dessous. Vous devez pour
cela effectuer les réglages suivants :
 Supprimez le gras ;
 Ajoutez des petites majuscules.

15. HTML : Ajoutez un élément <span></span> vide à l’intérieur du titre <h1></h1> en prenant soin
de l’insérer avant le texte.
 CSS : Transformez l’élément <span></span> inséré à la question précédente pour obtenir le
résultat illustrée par la capture d’écran ci-dessous. Vous devez pour cela effectuer les réglages
suivants :

 Transformez l’élément inline <span> en élément de type inline-block pour pouvoir le
dimensionner ;
 Définissez la largeur et la hauteur (même valeur) de l’élément en pixels ;
 Ajoutez une bordure ;
 Arrondissez la bordure à 50% ;
 Insérez une marge externe à droite.

16. HTML : Observez bien le code HTML et identifiez la classe qui est appliquée aux différentes sections
du CV (Mon état civil, Mon expérience professionnelle, etc.). Remarquez-vous quelque chose de
particulier ?
17. CSS : Effectuez la mise en forme des différentes sections du CV pour obtenir le résultat illustré par
la capture d’écran ci-dessous. Cette question consiste principalement à distinguer les bordures des
différentes parties avec des variations d’épaisseur, de style et de couleur.
18. CSS : Personnalisez les titres des différentes sections pour correspondre à la capture d’écran ci-
dessous. Prenez garde à préciser dans votre sélecteur qu’il s’agit spécifiquement des titres du CV.
En effet, le site web risque d’utiliser des éléments <h2> dans les autres pages qui auront peut être
une mise en forme différente.

19. CSS : Ciblez la photo en précisant, via le sélecteur, qu’il s’agit spécifiquement de la photo de la
section Mon état civil. Puis personnalisez l’image comme dans la capture ci-dessous. Pour cela,
vous devrez effectuer les opérations suivantes :
 Ajoutez une bordure ;
 Ajoutez des marges internes ;
 Arrondissez les bords de l’image en utilisant quatre valeurs différentes.
20. CSS : Utilisez la propriété CSS float: right; pour positionner l’image. Ce type de positionnement
flottant permet de placer l’image à droite de la page. Le texte qui se trouve en dessous va se placer
à côté de l’image.

21. CSS : Modifiez les lignes de la liste présente dans la section Mon état civil pour correspondre à la
capture d’écran ci-dessous. Pour obtenir le même résultat :
 Modifiez le type de la liste ;
 Ajoutez des marges internes.

22. CSS : Terminez la mise en forme de la section en vous reportant à la capture d’écran ci-dessous. Le
sélecteur utilisé doit bien préciser que vous ciblez les éléments <span> qui se trouve dans une liste
de la section Mon état civil.
23. CSS : Transformez les éléments utilisant la classe competence-niveau en éléments inline-block afin
de pouvoir les dimensionner et les présenter comme dans la capture ci-dessous. Voici donc la liste
des opérations à effectuer :
 Transformez les éléments en inline-block ;
 Dimensionnez les éléments avec une largeur et une hauteur ;
 Ajoutez une bordure.

24. CSS : Les éléments modifiés à la question précédente contiennent chacun un élément <div>.
Utilisez les pour créer des barres de niveau pour chacune des compétences comme illustré dans
la capture ci-dessous. Pour chaque compétence spécifique texte, web et pao vous devez ainsi
suivre les étapes suivantes :
 Ajoutez une couleur d’arrière-plan ;
 Définissez la hauteur pour que l’élément occupe tout le conteneur ;
 Définissez une largeur en pourcentage pour représenter le niveau de compétence.
25. CSS : Terminez la mise en forme de la section Mes compétences numériques en vous basant sur
la capture d’écran ci-dessous. Pour obtenir ce résultat vous devez appliquer les opérations
suivantes sur les libellés des compétences :
 Transformez les éléments en inline-block ;
 Définissez une largeur pour les éléments ;
 Alignez le texte à droite.

26. CSS : En vous basant sur les manipulations effectuées jusqu’à maintenant, reproduisez la mise en
forme pour les deux sections Mon expérience professionnelle et Mes formations en vous basant
sur la capture ci-dessous. Si vous connaissez, vous pouvez utiliser un positionnement flexible avec
flexbox.
27. CSS : Complétez la mise en forme pour les deux sections Mon expérience professionnelle et Mes
formations en vous basant sur la capture ci-dessous.

28. HTML et/ou CSS : Supprimez la bordure pour les derniers éléments des deux sections Mon
expérience professionnelle et Mes formations.

Vous aimerez peut-être aussi