Lipro - TD Web Design

Cours de Licence Professionnelle : Web Design
TD n° 1 : Structuration de page et de texte

Exercice 1 : Création d’un document HTML minimal valide
1. Dans le dossier Documents de votre ordinateur, créer un nouveau sous-dossier nommé par
exemple Web.
2. Ouvrir l’éditeur Notepad++. Sélectionner dans le menu « Encodage » l’option « Encoder en
UTF-8 (sans BOM) ». Saisir dans la fenêtre le squelette minimum d’un document HTML.
3. Enregistrer le document dans votre dossier Web, sous le nom squelette.html. Lancer
l’affichage du document dans un navigateur Web en double-cliquant sur son nom depuis votre
dossier. Résultat ?
4. Dans la partie entête (<head>…</head>) du document squelette.html, ajouter:
• une balise <meta /> pour indiquer l’utilisation des caractères accentués ;
• un titre au choix (par exemple, « Ma première page Web » ; balises <title>…</title>) ;
• une balise <meta /> pour indiquer l’auteur du document (vous !) ;
• une balise <meta /> pour indiquer une liste de mots clés (par exemple : Web,
HTML…) ;
• une balise <meta/> pour décrire le contenu de la page (par exemple, « Squelette de page »).
5. Enregistrer, puis relancer l’affichage du document. Qu’est-ce qui a changé depuis la
question 3 ?
6. Depuis le navigateur Web, ouvrir un nouvel onglet. Aller sur le site http://validator.w3.org.
Cet utilitaire en ligne va permettre de trouver les éventuelles erreurs dans votre code HTML.
Sélectionner l’onglet « Validate by file upload », puis le document squelette.html. Lancer la
validation grâce au bouton « Check ».
7. Corriger les erreurs dans votre code HTML (et l’enregistrer) jusqu’à ce qu’il soit valide !
Exercice 2 : Structuration de page web

1. Enregistrer le document créé à l’exercice 1 sous le nom td1.html. NB : vous pourrez
procéder ainsi pour les TD suivants, ce qui vous évitera de re-saisir le squelette de base de
votre page Web à chaque fois.
2. Dans la partie corps (<body>…</body>) du document td1.html, ajouter :
• un commentaire de votre choix (balises ) ;
Pie Desire EBODE

• un titre de niveau 1 de votre choix (balises <h1>…</h1>).
3. Enregistrer, puis relancer l’affichage de td1.html. Résultat ? Le commentaire est-il visible ?
4. Depuis le navigateur Web, afficher le code source de votre page (menu Affichage / Source
ou Code source, selon le navigateur). Le commentaire est-il visible ? Fermer la fenêtre du
code source.
5. Valider de nouveau votre code HTML à l’aide du site http://validator.w3.org et corriger
les erreurs éventuelles.
6. Ajouter au corps du document td1.html les éléments suivants :
• un titre de niveau 2 avec pour libellé « Objectifs du Cours » (balises <h2>…</h2>) ;
• le texte n° 1 ci-dessous, dans un paragraphe (balises <p>…</p>) ;
• un titre de niveau 2 avec pour libellé « Enseignements » ;
• le texte n° 2 ci-dessous, dans un paragraphe.
Texte n° 1 :
La licence professionnelle mention Informatique Option Génie Logiciel propose aux étudiants
une formation renforcée en Informatique et gestion. Le programme répond aux standards
internationaux dans ce domaine. L'objectif est de proposer aux étudiants un parcours intégré
leur permettant de choisir l'une des mentions de troisième année de licence : Informatique
appliquée et Gestion des projets.
Texte n° 2 :
Pour ce faire, les enseignements spécifiques en première et deuxième année sont renforcés
en mathématiques pour l'informatique, statistique et gestion et traitement informatiques
des données. Les UE proposées dans la mention Informatique répondent à une triple ambition :
donner aux étudiants les moyens de comprendre et de modéliser le monde réel ; leur assurer
une formation académique en informatique appliquée, gestion des projets informatiques ; leur
apprendre à travailler en groupe et à communiquer. Enregistrer, puis relancer l’affichage de
td1.html. Résultat ?
7. Modifier le document td1.html avec les éléments suivants :
• passer les termes « licence professionnelle » du texte n° 1 en emphase ;
• passer les termes « Informatique appliquée et Gestion des projets » du texte n° 1 en texte
appuyé ;
• surligner les termes « Informatique appliquée » et « Gestion des projets » du texte n° 1 ;
• passer le mot « Informatique » du texte n° 2 en texte appuyé ;
• passer le mot « renforcés » (« les enseignements… sont renforcés… ») du texte n° 2 en
texte en emphase appuyé ;
• en typographie française, les éléments de ponctuation constitués de deux symboles (« : »,
« ; », « ! », « ? ») doivent être précédés d’une espace. Si une espace normale est employée, le
navigateur Web peut afficher le symbole qui suit seul en début de ligne (par exemple, comme
Pie Desire EBODE

dans le texte n° 3). Pour éviter cela, remplacer les espaces simples qui précèdent les « : » et
« ; » du texte n° 2 par des espaces insécables ( ).
Texte n° 3 :
Les UE proposées dans la mention Informatique répondent à une triple ambition : donner aux
étudiants les moyens de comprendre et de modéliser le monde réel…
↑ erreur de typographie
Enregistrer, puis relancer l’affichage de td1.html. Résultat ?
8. Dans le texte n° 2 du document td1.html, ajouter un retour à la ligne après les « : » et « ;
» (balise <br />). Ajouter également une ligne horizontale (balise <hr />) sous le paragraphe
qui contient le texte n° 2. Enregistrer, puis relancer l’affichage de td1.html. Résultat ?
9. Valider de nouveau votre code HTML à l’aide du site http://validator.w3.org et corriger
les erreurs éventuelles.
10. À la suite du document, ajouter un titre de niveau 1 de libellé « Plus de texte », puis un
titre de niveau 2 de libellé « Adresse », et enfin indiquer en dessous votre adresse à l’aide
des balises <address>…</address>. Sauter des lignes pour présenter votre adresse
correctement (balise <br />).
Exemple :
Pie Désiré
ISPA
5 avenue TCHOUNG MBALA
Vérifier l’aspect du résultat.
11. Ajouter un nouveau titre de niveau 2 de libellé « Citation » et reproduire fidèlement en
dessous la citation suivante à l’aide de la balise <blockquote>…</blockquote>. "...figurez-vous
seulement (et tout sera réparé) que vous n'avez fait qu’une somme, pendant que ces visions
vous apparaissaient. (...) si nous avons la chance imméritée d'échapper aujourd'hui au sifflet
du serpent, nous ferons mieux avant longtemps..." -- Puck, acte V, scène II, Songe d'une nuit
d'été, William Shakespeare. Vérifier l’aspect du résultat.
12. Valider de nouveau votre code HTML à l’aide du site http://validator.w3.org .
13. Ajouter un nouveau titre de niveau 2 de libellé « Texte préformaté » et reproduire le «
dessin » (ASCII Art – dessin à base de caractères ASCII) ci-dessous à l’aide des balises
<pre>…</pre>. Vérifier l’aspect du résultat.
|\/\/\/|
| |
| |
| (o)(o)
c _)
| ,___|
| /
Pie Desire EBODE

14. Ajouter un nouveau titre de niveau 2 de libellé « Code & caractères spéciaux » et
reproduire en dessous l’algorithme sommaire ci-contre à l’aide des balises <code>…</code>
imbriquées dans un paragraphe.
Si (note < 10) alors Examen_raté()
Sinon Examen_réussi()
Fin si
Vérifier l’aspect du résultat et valider votre code HTML. Résultat ? Remplacer les symboles
& et < par leurs codes (& et < respectivement) et valider de nouveau votre code HTML.
15. Ajouter un nouveau titre de niveau 2 de libellé « Formule mathématique » et reproduire
la formule d’identité remarquable ci-dessous, dans un paragraphe, en utilisant les balises
<sup>…</sup> pour les exposants. Vérifier l’aspect du résultat et valider votre code HTML.
(a + b)3 = a3+ 3a2b + 3ab2+ b3
Pie Desire EBODE

TD n° 2 : Listes
Exercice 1 : Liste non-ordonnée
1. À l’aide de Notepad++, ouvrir le document squelette.html créé lors du TD n° 1, puis le

sauvegarder dans votre répertoire personnel sous le nom td2.html.
2. Dans le corps du document, créer un titre de niveau 1 de libellé « Menus du Resto U »,
puis reproduire la liste à puces ci-dessous à l’aide des balises <ul>…</ul> et <li>…</li.
• Lundi : Okock
• Mardi : saucisses de porc
• Mercredi : rôti de bœuf & spaghetti
• Jeudi : poisson & riz créole
• Vendredi : brochette de chèvre & igname
3. Vérifier l’aspect du résultat en affichant la page td2.html dans un navigateur Web.
Valider votre code HTML à l’aide du site http://validator.w3.org.
Exercice 2 : Liste ordonnée
1. Dans le corps du document, créer un nouveau titre de niveau 1 de libellé « Classement de

Ligue 1 », puis reproduire la liste numérotée ci-dessous à l’aide des balises <ol>…</ol> et
<li>…</li> .
1. Canon de Yaoundé - 16 points

2. Caïman de Douala - 15 points
3. UMS de Loum - 15 points
4. Coton Sport de Garoua- 15 points
5. Eding Sport de la Lekie - 14 points
2. Indiquer en commentaire à côté du titre de niveau 1 la date à laquelle a été établi ce
classement (le 19/09/2007 ; balises ).
3. Vérifier l’aspect du résultat et valider votre code HTML.
Pie Desire EBODE

Exercice 3 : Liste de définitions
1. Dans le corps du document, créer un nouveau titre de niveau 1 de libellé « Glossaire du

Web », puis reproduire la liste de définitions ci-contre à l’aide des balises <dl>…</dl>,
<dt>…</dt> et <dd>…</dd>.
Blog :
Page personnelle présentée sous forme d'actualités datées, signées avec possibilité
d’adjoindre les commentaires des visiteurs.
Robot :
Module d’un moteur de recherche qui parcourt automatiquement le Web afin d’en
mémoriser les documents.
Wiki :
Site Web dynamique dont tout visiteur peut éditer et modifier le contenu de façon
simple.
2. Vérifier l’aspect du résultat et valider votre code HTML.
Exercice 4 : Listes imbriquées
1. Dans le corps du document, créer un titre de niveau 1 de libellé « Menus du Resto U, le

retour », puis reproduire la liste à puces imbriquée ci-dessous. Vérifier l’aspect du résultat
et valider votre code HTML.
• Lundi :
o Okock
• Mardi :
o saucisses de porc
• Mercredi :
o rôti de bœuf
o spaghetti
• Jeudi :
o poisson
o riz créole
• Vendredi :
o brochette de chèvre
o igname
Pie Desire EBODE

2. Dans le corps du document, créer un titre de niveau 1 de libellé « Plan du cours », puis
reproduire la liste numérotée imbriquée ci-dessous. Vérifier l’aspect du résultat et valider
votre code HTML.
1. Introduction
2. Le langage HTML
1. Généralités
2. Section d’entête
3. Etc.
3. Éléments de design Web, standards, accessibilité
1. Design Web 2.0
2. Standards du W3C
4. Feuilles de style en cascade (CSS)
1. Généralités
2. Sélecteurs et classes de style
3. Etc.
3. Dans le corps du document, créer un titre de niveau 1 de libellé « Liste mixte », puis
reproduire la liste mixte imbriquée ci-dessous. Vérifier l’aspect du résultat et valider votre
code HTML.
1. Ceci est le premier élément.
2. Ceci est le deuxième élément.
o Ceci est le premier sous-élément du deuxième élément.
1. Et ceci est un sous-élément numéroté d'un sous-élément.
2. Et ceci est un autre sous-élément numéroté du même sous-élément.
3. Vous suivez toujours ?
o Ceci est le deuxième sous-élément du deuxième élément.
o Ceci est le troisième sous-élément du deuxième élément.
3. Ceci est le troisième élément.
4. Ceci est le quatrième élément.
5. Ceci est Leeloo.
Pie Desire EBODE

TD n° 3 : Objets multimédia, liens et ancres

Exercice 1 : Images

2. Ajouter un titre de niveau 1 de libellé « Images » dans le document td3.html et afficher

en dessous, à l’aide de la balise <img src="URL" />, l’image disponible dans vos documents
images : Vérifier l’aspect du résultat.
3. Valider votre code HTML à l’aide du site http://validator.w3.org. Résultat ? Ajouter à la

balise <img /> un attribut alt dont vous pouvez choisir la valeur (elle doit normalement décrire
l’image ; par exemple : alt="Photo accueil ").
4. Valider de nouveau votre code HTML. Résultat ? Placer la balise <img /> dans un paragraphe
et valider de nouveau votre code HTML. Vérifier l’aspect du résultat.
Exercice 2 : HTML5 et multimédia
1. Dans le corps du document td3.html, créer un nouveau titre de niveau 1 de libellé « Musique
».
2. Dans un paragraphe, créer un objet audio (avec ses contrôles) dont l’URL source est
l’emplacement où se trouve vos Musique audio. Tester.
3. Télécharger une vidéo. Dans le même paragraphe que l’objet audio précédent, ajouter un
objet vidéo (avec ses contrôles) et qui démarre automatiquement. Tester.
4. Ajouter sous les objets multimédias précédents une jauge remplie à 45 %.
5. Valider de nouveau votre code HTML.
Exercice 3 : Ancres
1. Ajouter des attributs id (valeur au choix) à tous les titres de niveau 1 de votre
document : « Images », « Musique » et « Liens ».
Pie Desire EBODE

2. Tout en haut du corps du document (juste sous la balise <body>), créer un nouveau titre de
niveau 1 de libellé « Menu ». Dans une liste à puces, afficher un lien vers chacune des sections
identifiées à la question précédente. Sous la liste, dans un paragraphe afficher le mot
REMPLISSAGE verticalement (à l’aide de sauts de ligne <br />), puis une barre horizontale
(balise <hr />). Vérifier l’aspect du résultat et tester les liens.
3. En bas du corps du document, ajouter un lien vers le haut de la page (#). Vérifier l’aspect
du résultat et tester le lien.
4. Valider de nouveau votre code HTML.
Exercice 4 : Application non guidée
Dans une liste à puces imbriquée, placer des liens vers les documents des TD 1 et 2, ainsi que
vers les sections correspondant aux titres de niveau 1 dans ces documents. Placez également
en bas des documents td1.html et td2.html, dans un paragraphe, un lien de retour vers le
document td3.html.
• TD 1
o Titre
o Plus de texte
• TD 2
o Menus du Resto U
o Classement de Ligue 1
o Glossaire du Web
Exercice 5 : Application non guidée – Liens croisés
1. À partir du document squelette.html créé lors du TD n° 1, créer deux nouveaux documents

nommés td361.html et td362.html.
2. À l’aide du générateur de texte http://fr.lipsum.com, générer 10 paragraphes et les

copier/coller dans chacun des documents td361.html et td362.html.
3. En haut de chacun des documents td361.html et td362.html, placer un couple de liens [ Bas
de la Page 1 | Bas de la Page 2 ] pointant vers le bas de td361.html et de td362.html,
respectivement.
4. En bas de chacun des documents td361.html et td362.html, placer un couple de liens [ Haut
de la Page 1 | Haut de la Page 2 ] pointant vers le haut de td361.html et de td362.html,
respectivement.
Pie Desire EBODE

TD n° 4 : Tableaux
Exercice 1 : Tableau simple

2. Dans le corps du document, créer un titre de niveau 1 de libellé « Tableau simple », puis
reproduire le tableau ci-dessous (cf. cours p. 28-29). Vérifier l’aspect du résultat en
affichant la page td4.html dans un navigateur Web.
1 Koxie Garçon =
2 Julien Doré Moi... Lolita E
3 Timbaland The Way I Are =
4 Patrick Fiori et Jean-Jacques Goldman Quatre mots sur un piano -2
5 Mika Love Today E
6 Victoria Le héros d'un autre E
7 Christophe Willem Double Je -3
8 Mika Relax (Take It Easy) -3
9 Tokio Hotel Spring Nicht E
10 David Guetta Love Is Gone -4
Rappels :
• Définition d’un environnement tableau : balises <table>…</table>.
• Définition d’une ligne de tableau : balises <tr>…</tr>.
• Définition d’une cellule de tableau : balises <td>…</td>.
3. Ajouter au tableau une ligne d’en-tête (balises <tr>…</tr> et <th>…</th>) en suivant le
modèle ci-dessous, puis vérifier l’aspect du résultat.
Classement Artiste Titre Progression
4. Ajouter au tableau la légende « Top 10 des singles » (balises <caption>…</caption>), puis

vérifier l’aspect du résultat. NB : Placer les balises <caption>…</caption> juste en dessous de
la balise <table>.
Pie Desire EBODE

5. Déplacer les balises <caption>…</caption> juste au-dessus de la balise </table>. Cela
modifie-t-il le résultat à l’affichage ?
6. Supprimer les cellules Artiste : « Victoria » et Progression : « -4 », puis constater quel est
l’aspect du résultat. Valider votre code HTML à l’aide du site http://validator.w3.org.
7. Réinsérer les cellules Artiste : « Victoria » et Progression : « -4 », puis valider de nouveau

votre code HTML. Conclusion : la validation détecte-elle les cellules manquantes ?
Exercice 2 : Tableaux à cellules recouvrantes
1. Dans le corps du document, créer un nouveau titre de niveau 1 de libellé « Tableaux cellules
recouvrantes ».
2. Créer un nouveau titre de niveau 2 de libellé « Colonnes », puis reproduire le tableau

dessous en exprimant les colonnes recouvrantes à l’aide de l’attribut colspan de la balise <td>.
Vérifier l’aspect du résultat et valider de nouveau votre code HTML.
Jours Viande Légumes

Lundi OKOCK
Mardi saucisses de porc
Mercredi Roti de bœuf Spaghetti
Jeudi Poisson Riz Créole
Vendredi Brochette de chèvre Igname
3. Créer un nouveau titre de niveau 2 de libellé « Lignes », puis reproduire le tableau

dessous en exprimant les lignes recouvrantes à l’aide de l’attribut rowspan de la balise <td>.
Vérifier l’aspect du résultat et valider de nouveau votre code HTML.
Matières Discipline
Modélisation
Site web Informatique
Base de données
Logiciels scientifique
Mathématiques Maths/ Stat
Statistique
Pie Desire EBODE

TD n° 5 : Notion de cascade et classes de styles
Exercice 1 : Notion de cascade
1. À l’aide de Notepad++, ouvrir le document td1.html créé lors du TD n° 1, puis le sauvegarder

dans votre répertoire personnel sous le nom td5.html.
2. Appliquer à la balise <p> du premier paragraphe de votre document (« La licence
Professionnelle… ») le style suivant :
• alignement de texte à droite (propriété text-align) ;
• couleur de texte bleue marine (propriété color ) ;
Vérifier l’aspect du résultat en affichant la page td5.html dans un navigateur Web. Comment
s’affiche le texte inclus dans les balises <em>…</em>, <strong>…</strong> et <code>…</code>
du paragraphe modifié ?
3. Appliquer à tout le document le style suivant pour les paragraphes (sélecteur p) :

• alignement de texte justifié,
• couleur de texte grise
Vérifier l’aspect du résultat. Le premier paragraphe en bleu a-t-il été modifié ? Pourquoi ?
4. À l’aide de Notepad++, créer un nouveau fichier et le sauvegarder sous le nom td5.css. Y

définir le style suivant pour les paragraphes:
• taille du texte 50 % supérieure à la normale (propriété font-size).
Dans le document td5.html, ajouter au-dessus du style défini à la question 3 l’instruction

permettant de prendre en compte la feuille de style td5.css. Vérifier l’aspect du résultat.
5. Dans le document td5.html, modifier le style de la balise <p> du premier paragraphe afin
que la taille du texte soit « normale », soit un empattement standard (1em) ou 100 %. Vérifier
l’aspect du résultat. Conclusion ?
6. Depuis un navigateur Web, ouvrir une nouvelle fenêtre et aller sur le site
http://jigsaw.w3.org/css-validator/. Cet utilitaire en ligne va permettre de trouver les
éventuelles erreurs dans vos styles. Sélectionner l’onglet « par chargement de Fichier », puis
Pie Desire EBODE

la feuille de style td5.css à l’aide du bouton « Parcourir ». Lancer la validation grâce au bouton
« Vérifier ».
Exercice 2 : Styles génériques
1. Dans la feuille de style td5.css, indiquer que tous les éléments doivent s’afficher sur fond
jaune pâle (sélecteur universel *, propriété background-color ). Vérifier l’aspect du résultat.
2. Dans la feuille de style td5.css, appliquer le style suivant aux titres de niveau 1 et 2
(sélecteurs h1 et h2) :
• alignement de texte centré,
• police de caractères « arial » (sélecteur font-family),
• couleur de fond bleue,
• couleur de texte jaune.
Vérifier l’aspect du résultat. Quelle couleur de fond prévaut pour les titres ?
3. Dans la feuille de style td5.css, modifier le style des paragraphes afin de les indenter
(propriété text-indent ) de trois empattements standards. Vérifier l’aspect du résultat.
4. Dans la feuille de style td5.css, appliquer le style suivant aux sections de textes mises en
emphase (sélecteur em) dans un paragraphe :
• couleur de texte rouge,
• texte souligné (propriété text-decoration ).
Vérifier l’aspect du résultat. Comment apparaît le terme « renforcés » dans la section «
Enseignement » ? Pourquoi ?
5. Dans la feuille de style td5.css, appliquer le style suivant aux sections de textes appuyées
(sélecteur strong) :
• couleur de texte noire,
• texte en caractères très gras (propriété font-weight ).
Vérifier l’aspect du résultat. Comment apparaît le terme « renforcés » dans la section «
Enseignement » ? Pourquoi ?
6. Dans la feuille de style td5.css, appliquer le style suivant aux barres horizontales
(sélecteur hr) :
• largeur de 80 % (propriété width ),

• hauteur de 5 pixels (propriété height),
• largeur de la bordure de 5 pixels (propriété border-width ),
• bordure en pointillés (propriété border-style),
• couleur olive.
Pie Desire EBODE

7. Dans la feuille de style td5.css, appliquer au corps du document une marge à gauche de
25 points de largeur (sélecteur body, propriété margin-left ). Vérifier l’aspect du résultat.
8. Dans la feuille de style td5.css, généraliser la marge du corps de document à gauche, à

droite, en haut et en bas (propriété margin). Vérifier l’aspect du résultat.
9. Valider de nouveau vos styles à l’aide du site http://jigsaw.w3.org/css-validator/.
Exercice 3 : Styles personnalisés
1. Dans la feuille de style td5.css, définir les styles personnalisés suivants (le nom de leur
sélecteur est préfixé par un point) :
• sélecteur .gros :
o taille de caractères de 2 empattements (propriété font-size) ;
• sélecteur .rouge :
o couleur rouge (propriété color) ;
• sélecteur .centre :
o texte centré (propriété text-align).
Dans le document td5.html, appliquer ces styles à l’aide de l’attribut class aux éléments
suivants :
• titre de niveau 1 « Plus de texte » (rouge),
• votre adresse (gros),
• texte préformaté « Bart Simpson » (rouge),
• paragraphe contenant la formule mathématique (centre).
Vérifier l’aspect du résultat. Quel est le style final des éléments auxquels plusieurs styles
s’appliquent ?
2. Dans le document td5.html, appliquer le style « gros » au bloc de texte « Puck, acte V,
scène II, Songe d'une nuit d'été, William Shakespeare ». Vous pouvez pour cela l’appliquer à
la balise <em>. Vérifier l’aspect du résultat.
3. Dans le mini-algorithme du document td5.html, appliquer le style « gros » aux blocs de

texte « Examen_raté() » et « Examen_réussi() » à l’aide des balises <span>…</span. Vérifier
l’aspect du résultat.
4. Toujours dans le mini-algorithme du document td5.html, appliquer le style « rouge » en

plus du style « gros » au bloc de texte « Examen_raté() », en imbriquant un nouveau couple
de balises <span>…</span> autour du précédent. Vérifier l’aspect du résultat.
5. Dans la feuille de style td5.css, définir un nouveau style personnalisé « appli » avec les
propriétés suivantes :
• couleur : bleu marine
Pie Desire EBODE

• couleur de fond : gris clair
• alignement du texte : justifié,
• police de caractères : arial,
• marge : 2 empattements,
• marge interne (padding) : 1 empattement.
Dans le document td5.html, appliquer ce style à toute la section « Département Informatique
et Statistique » à l’aide des balises <div>…</div> . Vérifier l’aspect du résultat.
6. Valider de nouveau la feuille de style td5.css.
Exercice 4 : Styles d’éléments identifiés
1. Dans la feuille de style td5.css, définir un style pour l’élément identifié « titre-adr »
(sélecteur #titre-adr) permettant de positionner le texte de cet élément à gauche, avec une
marge à gauche (margin-left) d’un empattement standard. Dans le document td5.html,
ajouter à la balise ouvrante du titre de niveau 2 « Adresse » l’attribut id = "titre-adr".
2. Dans la feuille de style td5.css, définir un style pour l’élément identifié « titre-cit »
permettant de positionner le texte de cet élément à droite, avec une marge interne à droite
(padding-right) d’un empattement standard. Dans le document td5.html, ajouter à la balise
ouvrante du titre de niveau 2 « Citation » l’attribut id l’identifiant comme « titre-cit ».
Vérifier l’aspect du résultat. Quelle est la différence entre margin et padding ?
3. Valider de nouveau la feuille de style td5.css.
4. Revérifier également la validité de votre code HTML à l’aide du site

http://validator.w3.org.
Pie Desire EBODE

TD n° 6 : Styles des listes, hyperliens et images

Exercice 1 : Listes

dans votre répertoire personnel sous le nom td6.html. Créer ensuite un nouveau fichier et le
sauvegarder sous le nom td6.css.
2. Dans la feuille de style td6.css, définir les styles génériques suivants :
• corps de document (sélecteur body) : couleur de fond blanche
• titres de niveau 1 et 2 : police de caractères arial, couleur bleue marine
• éléments de liste non-ordonnée (sélecteur ul) : puces carrées (propriété list-style) ;
• éléments de liste ordonnée (sélecteur ol) : numéros en chiffres romains ;
• termes de liste de définition (sélecteur dt) : caractères gras (propriété font-weight).
Dans l’entête du document td6.html, ajouter l’instruction permettant de prendre en compte
la feuille de style td6.css. Vérifier l’aspect de toutes les listes de la page td6.html dans un
navigateur Web.
3. Valider la feuille de style td6.css à l’aide du site http://jigsaw.w3.org/css-validator/.
4. Dans la feuille de style td6.css, définir les styles personnalisés suivants :
• .puceronde : puce d’élément de liste non-ordonnée en forme de cercle ;
• .numdeci : numéro d’élément de liste ordonnée en chiffres décimaux ;
• .numlettre :
o numéro d’élément de liste ordonnée en lettres majuscules,
o texte de couleur grise
• .puceimage :
o puce d’élément de liste non-ordonnée utilisant l’image située dans vos documents
images :
o texte en caractères gras.
5. Dans le document td6.html, associer les styles définis à la question 4 aux éléments suivants
à l’aide de l’attribut class :
• .puceronde :
Pie Desire EBODE

o balise <ul> des « Menus du Resto U »,
o balises <ul> des titres des chansons du « Top 10 des singles » ;
• .numdeci :
o balise <ol> du « Classement de ligue 1 »,
o balises <ol> des sous-parties du « Plan du cours » (« Un peu d’histoire », etc.),
o balise <ol> du « Top 10 des singles » ;
• .numlettre :
o balise <ol> des sous-sous-éléments de la « Liste mixte » ;
• .puceimage :
o balise <ul> des jours des « Menus du Resto U, le retour »,
o balises <ul> des progressions du « Top 10 des singles » (E, =, +3, etc.).
Vérifier l’aspect des listes de la page td6.html. Quelle est la raison de l’apparence de la liste
« Menus du Resto U, le retour » ? Quelle est la différence avec les sous-sous-éléments de la
« Liste mixte » ou les progressions du « Top 10 des singles » ? Valider de nouveau la feuille
de style td6.css.
6. Dans la feuille de style td6.css, définir les styles imbriqués suivants :
• texte <strong> dans un élément de liste <li> : couleur bleue marine ;

• texte <em> dans un élément de liste <li> : couleur marron4
Vérifier l’aspect des listes de la page td6.html. Valider de nouveau la feuille de style td6.css.
Exercice 2 : Liens et images

dans votre répertoire personnel sous le nom td62.html. Ajouter dans l’entête de ce document
l’instruction permettant de prendre en compte la feuille de style td6.css développée dans
l’exercice 1. Vérifier l’aspect de la page td62.html.
2. Dans la feuille de style td6.css, définir le style suivant pour les hyperliens (sélecteur a ) :
• couleur rouge
• texte souligné,
• caractères gras.
Vérifier l’aspect de la page td62.html.
3. Dans la feuille de style td6.css, définir le style suivant pour les hyperliens survolés
(sélecteur a: hover) :
• couleur blanche,
• couleur de fond rouge,
Pie Desire EBODE

Vérifier de nouveau l’aspect de la page td62.html.
4. Dans la feuille de style td6.css, définir le style suivant pour les hyperliens visités et
activés (sélecteurs a:visited et a:active) :
• couleur pourpre
Vérifier l’aspect de la page td62.html. Cliquer sur un lien puis revenir en arrière pour
constater l’effet de ce style.
5. Dans la feuille de style td6.css, définir le style suivant pour les images (sélecteurs img) :
pas de bordure (propriété border, valeur none). Vérifier l’aspect de la page td62.html. Les
liens sur les images sont-ils toujours actifs ?
6. Dans la feuille de style td6.css, définir le style suivant pour l’élément identifié « image-
encadrée »:
• bordure de 2 pixels de largeur,

• bordure d’apparence solide (non pointillée),
• bordure de couleur bleu clair
Dans le document td62.html, ajouter à la balise <img /> correspondant à l’image formation.jpg
l’attribut identifiant id « image-encadrée ». Vérifier l’aspect du résultat. Quel style défini
sur les images s’applique ?
6. Valider de nouveau la feuille de style td6.css. Commentaire ?
NB : Un avertissement n’est pas une erreur… seulement un avertissement. Mais un

avertissement tout de même !
Exercice 3 : Application non guidée
1. À l’aide de Notepad++, ouvrir de nouveau le document td1.html créé lors du TD n° 1, puis le

2. Définir une feuille de style td63.css selon les spécifications suivantes et l’appliquer au
document td63.html. Vérifier l’aspect du résultat au fur et à mesure.
• Corps du document
o Marge interne : 100 pixels
o Couleur de fond : blanc
• Titres de niveau 1 et 2
o Police de caractères : Arial
o Couleur du texte : bleu marine
Pie Desire EBODE

• Paragraphes
o Police de caractères : Arial
o Alignement du texte : justifié
• Texte en emphase
o Style de texte : normal (non italique) et souligné
• Texte appuyé (strong)
o Couleur du texte : bleu marine
• Texte en police « machine à écrire »
o Taille du texte : 1,25 empattement
o Couleur du texte : rouge
• Barre horizontale
o Largeur : 80 % de la largeur de la page
o Bordure : 2 pixels de large, trait plein, couleur bleue marine
3. Vérifier la validité de votre code HTML et de votre feuille de style CSS.
4. Quelle différence faites-vous entre les documents td5.html (créé lors de la précédente
séance) et td63.html du point de vue du design Web ?
Exercice 4 : Application libre
Définir une feuille de style td64.css à votre convenance et l’appliquer au document td63.html.
Vérifier l’aspect du résultat au fur et à mesure, ainsi que la validité de votre feuille de style
CSS.
Pie Desire EBODE

TD n° 7 : Styles des tableaux

Exercice 1 : Styles génériques

• corps de document : couleur de fond blanche ;

• titres de niveau 1 et 2 : police de caractères arial ;
• tableaux (sélecteur table) : bordure (propriété border) de trois pixels de largeur, de style
pointillé (dotted) et de couleur bleue marine ;
• cellules d’en-tête (sélecteur th) :
o bordure d’un pixel de largeur, de style solide et de couleur bleue marine,
o couleur de fond jaune,
o alignement du texte centré ;
• cellules de données (sélecteur td) : bordure d’un pixel de largeur, de style solide et de
couleur bleue marine ;
• légende (sélecteur caption) :
o police de caractères arial,

o caractères gras,
o couleur bleue marine,
o placement sous le tableau (propriété caption-side),
o marge au-dessus d’une hauteur d’un empattement standard (1em).
Dans l’entête du document td7.html, ajouter l’instruction permettant de prendre en compte
la feuille de style td7.css. Vérifier l’aspect de tous les tableaux de la page td7.html dans un
navigateur Web.
3. Valider la feuille de style td7.css à l’aide du site http://jigsaw.w3.org/css-validator/.
Pie Desire EBODE

Exercice 2 : Styles personnalisés
• table.gris :
o bordure d’un pixel de largeur, de style solide et de couleur noire,
o couleur de fond argent,
o « effondrement » de la bordure (propriété border-collapse, valeur collapse) ;
• tr.gris : hauteur (propriété height) de trois empattements standards ;
• th.gris :
o couleur de fond noire,
o couleur du texte blanche ;
• td.gris :
o alignement vertical (propriété vertical-align) haut ;
• caption.gris : placement au-dessus du tableau.
2. Dans la feuille de style td7.css, définir le style personnalisé suivant :
Dans le document td7.html, appliquer le style texte-centre aux balises <td> correspondant :
• à la colonne « Progression » du « Top 10 des singles » ;
• aux plats uniques « Okock » et « Roti de bœuf et Spaghetti » des « Menus du Resto U » ;
NB : Pour appliquer plusieurs styles à une même balise, il suffit de les lister, séparés par des
espaces, dans la valeur de l’attribut class (ex. class="gris texte-centre"). Vérifier l’aspect
des tableaux concernés. Valider de nouveau la feuille de style td7.css.
Exercice 3 : Applications non guidées
1. Appliquer le style gris aux balises <table> et <td> du tableau « Sudoku ».
2. Définir et appliquer des styles afin que la grille de Sudoku ait l’apparence reproduite ci-
dessus
Pie Desire EBODE

• Taille des cases : 30 pixels de hauteur x 30 pixels de largeur
• Alignement des chiffres verticalement : au milieu ; horizontalement : au centre
• Bordures plus épaisses (2 pixels) pour délimiter des blocs de 9 cases
3. Dans un nouveau fichier .css, définir une feuille de style valide de votre choix et y définir
un style pour chacun des tableaux du document td7.html.
Pie Desire EBODE

TD n° 8 : Boites, positionnement, mise en page

Exercice 1 : Positionnement flottant


• corps de document : couleur de fond blanche ;
• titres de niveau 1 et 2 : police de caractères arial.
3. Dans la feuille de style td8.css, définir le style personnalisé #boite-menu suivant :
• positionnement flottant (propriété float) à droite (valeur right) ;
• largeur (proprété width) de 150 pixels ;
• bordure de 3 pixels de large, en pointillés et de couleur bleue ;
• couleur de fond jaune ;
• marge interne à gauche et à droite (propriétés padding-left et padding-right) d’un
empattement standard ;
• marge externe (propriété margin) de deux empattements standards.
4. Dans l’entête du document td8.html, ajouter l’instruction permettant de prendre en
compte la feuille de style td8.css. Appliquer le style .boite-menu au titre de niveau 1 « Menu
» et à la liste numérotée qui le suit en les imbriquant entre une paire de balises <div>…</div>.
Vérifier l’aspect du document td8.html dans un navigateur Web et tester les liens du menu.
Que se passe-t-il si vous réduisez la taille de fenêtre du navigateur ?
5. Valider le document td8.html à l’aide du site http://validator.w3.org et la feuille de style

td8.css à l’aide du site http://jigsaw.w3.org/css-validator/.
Exercice 2 : Mise en page en colonnes

• .conteneur :
o positionnement flottant à gauche,
o largeur de 100 % ;
Pie Desire EBODE

• .colonne :
o positionnement flottant à gauche,
• largeur de 20 %,
o marge interne à gauche et à droite d’un empattement standard.
2. Dans le document td8.html, appliquer le style .conteneur à toute la section « Liens » en
plaçant une balise <div> après les balises <h1>…</h1> correspondantes et une balise </div> après
la partie « Ancres ». Appliquer ensuite le style .colonne en imbriquant entre une paire de
balises <div>…</div> chacune des quatre sections « Adressage absolu », « Adressage relatif
», « Images » et « Ancres ». Vérifier l’aspect du document et tester les liens. Que se passe-
t-il si vous réduisez la taille de fenêtre du navigateur ?
3. Dans la feuille de style td8.css, définir le style personnalisé suivant :
• .bordure : bordure à gauche (propriété border-left) de largeur 1 pixel, d’apparence solide,

de couleur noire.
Dans le document td8.html, appliquer le style .bordure en plus du style .colonne aux sections
« Adressage relatif », « Images » et « Ancres ». Vérifier l’aspect du document.
4. Vérifier de nouveau la validité du document td8.html et de la feuille de style td8.css.
Exercice 3 : Positionnements relatif et absolu
1. Dans la feuille de style td8.css, définir le style personnalisé .boite-bas suivant :

• couleur de fond verte ;
• largeur : 20 % ;
• marges à gauche et à droite automatiques (valeur auto des propriétés margin-left et
margin-right ; cela a pour effet de centrer la boite en l’absence de valeur center pour la
propriété float) ;
• positionnement relatif (propriété position ).
2. Dans le document td8.html, appliquer le style .conteneur à toute la section « Application

» (titre compris) à l’aide d’une paire de balises <div>…</div>. À l’intérieur du conteneur,
appliquer ensuite le style .boite-bas à cette même section. Vérifier l’aspect du document.
4. Dans la feuille de style td8.css, mettre le style .boite-bas en commentaire (/* … */) et
définir un nouveau style personnalisé .boite-bas comme suit :
• couleur de fond verte ;
• largeur : 20 % ;
• positionnement absolu à 300 pixels de la gauche du document (propriété left ).
Vérifier l’aspect du document td8.html.
Pie Desire EBODE

5. Dans la feuille de style td8.css, modifier le style .boite-bas en fixant le positionnement
absolu à 200 pixels de la gauche du document, puis vérifier l’aspect du document td8.html.
Exercice 4 : Structuration du document et mise en page
1. À l’aide de Notepad++, rouvrir le document td3.html créé lors du TD n° 3, puis le

2. Appliquer les éléments HTML de structuration suivants au document td82.html
• Entête : Créer un titre de niveau 1 « Ma nouvelle mise en page » en début de

document
• Section de navigation : Menu
• Section : Partie sur fond gris
• Articles (dans la section de contenu) : Images, Chat et Liens (jusqu’à la fin de
« Ancres »)
• Aparté (dans la section de contenu) : Application
• Pied de page : Lien vers le haut de page
NB : Des sections div « conteneurs » seront également nécessaires.
5. Concevoir la feuille de style td82.css pour obtenir le résultat voulu. Tester.
6. Vérifier la validité du document td82.html et de la feuille de style td82.css.
Pie Desire EBODE

Lipro - TD Web Design

Transféré par

Droits d'auteur :

Formats disponibles

Lipro - TD Web Design

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

Lipro - TD Web Design

Transféré par

Droits d'auteur :

Formats disponibles

Cours de Licence Professionnelle : Web Design

TD n° 1 : Structuration de page et de texte

Exercice 2 : Structuration de page web

Pie Desire EBODE

Pie Desire EBODE

Pie Desire EBODE

Pie Desire EBODE

1. À l’aide de Notepad++, ouvrir le document squelette.html créé lors du TD n° 1, puis le

Exercice 2 : Liste ordonnée

1. Dans le corps du document, créer un nouveau titre de niveau 1 de libellé « Classement de

1. Canon de Yaoundé - 16 points

3. Vérifier l’aspect du résultat et valider votre code HTML.

Pie Desire EBODE

1. Dans le corps du document, créer un nouveau titre de niveau 1 de libellé « Glossaire du

2. Vérifier l’aspect du résultat et valider votre code HTML.

Exercice 4 : Listes imbriquées

1. Dans le corps du document, créer un titre de niveau 1 de libellé « Menus du Resto U, le

Pie Desire EBODE

Pie Desire EBODE

TD n° 3 : Objets multimédia, liens et ancres

1. À l’aide de Notepad++, ouvrir le document squelette.html créé lors du TD n° 1, puis le

2. Ajouter un titre de niveau 1 de libellé « Images » dans le document td3.html et afficher

3. Valider votre code HTML à l’aide du site http://validator.w3.org. Résultat ? Ajouter à la

Exercice 2 : HTML5 et multimédia

4. Ajouter sous les objets multimédias précédents une jauge remplie à 45 %.

5. Valider de nouveau votre code HTML.

Pie Desire EBODE

4. Valider de nouveau votre code HTML.

Exercice 4 : Application non guidée

1. À partir du document squelette.html créé lors du TD n° 1, créer deux nouveaux documents

2. À l’aide du générateur de texte http://fr.lipsum.com, générer 10 paragraphes et les

Pie Desire EBODE

1. À l’aide de Notepad++, ouvrir le document squelette.html créé lors du TD n° 11, puis le

Classement Artiste Titre Progression

4. Ajouter au tableau la légende « Top 10 des singles » (balises <caption>…</caption>), puis

Pie Desire EBODE

7. Réinsérer les cellules Artiste : « Victoria » et Progression : « -4 », puis valider de nouveau

Exercice 2 : Tableaux à cellules recouvrantes

2. Créer un nouveau titre de niveau 2 de libellé « Colonnes », puis reproduire le tableau

Jours Viande Légumes

3. Créer un nouveau titre de niveau 2 de libellé « Lignes », puis reproduire le tableau

Pie Desire EBODE

TD n° 5 : Notion de cascade et classes de styles

Exercice 1 : Notion de cascade

1. À l’aide de Notepad++, ouvrir le document td1.html créé lors du TD n° 1, puis le sauvegarder

3. Appliquer à tout le document le style suivant pour les paragraphes (sélecteur p) :

4. À l’aide de Notepad++, créer un nouveau fichier et le sauvegarder sous le nom td5.css. Y

• taille du texte 50 % supérieure à la normale (propriété font-size).

Dans le document td5.html, ajouter au-dessus du style défini à la question 3 l’instruction

Pie Desire EBODE

Exercice 2 : Styles génériques

• largeur de 80 % (propriété width ),

Pie Desire EBODE

8. Dans la feuille de style td5.css, généraliser la marge du corps de document à gauche, à

9. Valider de nouveau vos styles à l’aide du site http://jigsaw.w3.org/css-validator/.

Exercice 3 : Styles personnalisés

3. Dans le mini-algorithme du document td5.html, appliquer le style « gros » aux blocs de

4. Toujours dans le mini-algorithme du document td5.html, appliquer le style « rouge » en

Pie Desire EBODE