RAJECKI TP 2 : Les tableaux et les feuilles de style en HTML 4mathinfo.univ-reims.fr/IMG/pdf/tp2.pdf · TP 2 : Les tableaux et les feuilles de style en HTML 4 EXERCICE 1 : DÉFINITION

M. KRAJECKI, DESS IAS Programmation Web

TP 2 : Les tableaux et les feuilles de styleen HTML 4

EXERCICE 1 : DÉFINITION D’UN TABLEAUCommencer par définir un petit tableau comportant 3 lignes et 4 colonnes. La première ligne

contiendra les mots "un", "deux", "trois", "quatre". La seconde, les mots "one", "two", "three","four". Enfin, la dernière ligne sera composée des chiffres 1, 2, 3 et 4.

À l’aide de l’attribut <table border>, ajouter une bordure à votre tableau. Modifier égale-ment l’espace entre les cellules et la largeur de votre tableau. Essayer différentes valeurs pourchacune de ces balises.

EXERCICE 2 : LES CELLULES

FIG. 1 – Résultat de l’exercice 1

Maintenant que vous êtes en mesure de définir un tableau élémentaire, il ne vous reste plusqu’à étudier comment fusionner des colonnes ou des lignes, aligner le texte dans une cellule,insérer une image...

Vous pouvez contrôler la largeur d’un tableau ou d’une cellule à l’aide de <table width>et de <td width>.

Utiliser ces nouvelles balises pour définir la largeur de votre tableau et avoir des cellules detailles différentes.

Les balises <td colspan> et <td rowspan> sont très utiles pour permettre la fusion decellule. Essayer les sur votre tableau.

Vous pouvez fixer un alignement différent pour chaque cellule à l’aide de <tr align> etde <td align>. Il vous est également possible de modifier la couleur d’une cellule à l’aide de<td bgcolor>...

Reproduisez le petit tableau présenté à la figure 1.

Les tableaux et les feuilles de style 1/ 15


EXERCICE 3 : LE DRAGON

FIG. 2 – Le résultat

Le but de cet exercice est de créer une page contenant un tableau dont les cellules sont desimages (voir figure 2).

FIG. 3 – Le tableau défini pour inclure les images

Vous devez reconstruire l’image complète comme présentée à la figure 3.



EXERCICE 4 : TABLEAUX CONTENANT DES TABLEAUXVisualisez le résultat du fichier html suivant :

<! doctype html p u b l i c " � / /w3c / / d td html 4 . 0 t r a n s i t i o n a l / / en"><html><head>

<meta h t t p � equiv= " Content � Type " conten t= " t e x t / html ; charse t= i so � 8859 � 1">< t i t l e > Un tab leau contenant des tableaux < / t i t l e >

</ head><body bgcolor= " whi te " >< table width="100%" bgcolor=" purp le " border= "0 " cellspacing= "1 " >

<! �� ce tab leau es t utilisé pour o b t e n i r l a bordure �� >< t r >< td >< table width="100%" bgcolor=" whi te "

border= "0 " cellpadding= "5 " cellspacing= "0 " >< t r >< td al ign=" center " bgcolor=" purp le ">

< font color= " whi te "> Les éditeurs HTML < / font> < / td> < / t r >< t r >< td al ign=" l e f t ">

<a href=" h t t p : / / www. b radso f t . com / t o p s t y l e / " >Topsty le < / a> < br><a href=" h t t p : / / f reeware . acehtml . com / " > Ace HTML < / a> < br><a href="www. u l t r a e d i t . com / index . html "> U l t r a E d i t < / a> < br><a href=" h t t p : / / www. xemacs . org / " > Xemacs < / a> < br><a href=" h t t p : / / quanta . sourceforge . net / " > Quanta Plus < / a> < br><a href=" h t t p : / / b l u e f i s h . openof f i ce . n l / " > B lue f i sh < / a> < br><a href=" h t t p : / / www. e v r s o f t . com / " > Ev rso f t 1 s t Page 2000 < / a> < br>

</ td></ t r ></ table>

</ table></body></ html>

En vous aidant de l’exemple précédent, écrire le fichier html correspondant à la figure 4.

FIG. 4 – Utilisation des tableaux pour la mise en page

Les liens définis sont les suivants :

Netscape Communicator 4.5 : http://home.netscape.com/browsers/using/newusers/index.html



Internet Explorer 6 : http://www.microsoft.com/france/internet/produits/ie/default.asp

Opera : http://www.opera.com/

Konqueror : http://www.konqueror.org/

Et :

Topstyle : http://www.bradsoft.com/topstyle

Ace HTML : http://freeware.acehtml.com/

UltraEdit : http://www.ultraedit.com/index.html

Bluefish : http://bluefish.openoffice.nl/

Evrsoft 1st Page 2000 : http://www.evrsoft.com/



EXERCICE 5 : FEUILLES DE STYLE : UTILISATION LOCALEDans ce mode, l’utilisation de l’attribut <style> à l’intérieur du code HTML (entre <body>

et </body> permet de modifier l’apparence d’un élément :<sélecteur style="propriété :valeur">Ici, par sélecteur on entend toute balise HTML (<h1>, <p>, ...)

5.1 EXEMPLE

<!DOCTYPE HTML PUBLIC " � / /W3C/ / DTD HTML 4 . 0 1 T r a n s i t i o n a l / / EN"><html><head>

<meta h t t p � equiv="Content � Type" con ten t=" text / html ; charse t= i so � 8859 � 1">< t i t l e > Une u t i l i s a t i o n l o c a l e des f e u i l l e s de s t y l e < / t i t l e >

</ head>

<body bgcolor="whi te ">

<h1 sty le="background � color : ye l low"> UN TITRE SUR UN FOND JAUNE < / h1>

<p sty le="color : red"> La cou leur du t e x t e de ce paragraphe est l e rouge. < / p>

<p> I c i , ce sont l es a t t r i b u t s par défaut qu i sont appliqués. < / p>

</body></ html>

Tel quel, cela ne présente pas d’intérêt par rapport à l’utilisation de <font ...>, maispermet comme on le verra plus loin d’outrepasser les directives données par une instructionplus globale et un ancien navigateur ne tiendra simplement pas compte de l’attribut style (voirfigure 5).

5.2 QUESTION

Modifier (en utilisant uniquement des feuilles de style locales) l’exercice 8 du TP 1 (concer-nant l’ordre du jour d’un cabinet d’avocats crapuleux, voir figure 6 :

– modifier la couleur de fond de la page (couleur lightblue ;– modifier la police utilisée pour le titre (helvetica), le texte est centré et la couleur de

fond est lightyellow ;– les couleurs des éléments de liste sont blue et green.



FIG. 5 – Utilisation locale des feuilles de style

FIG. 6 – Ordre du jour d’un cabinet d’avocats crapuleux



EXERCICE 6 : UTILISATION GLOBALEDans le mode global, la marque <style> ... </style> est placée dans l’en-tête du docu-

ment (entre <head> et </head>) et s’applique à tout le document HTML qui suit. La marque<style> a un seul attribut type qui est obligatoirement spécifié à "TEXT/CSS". Entre <style>et </style> nous plaçons toutes les définitions voulues en respectant le format suivant :sélecteur propriete1 :valeur1; propriete2 :valeur2;...

6.1 EXEMPLE

<!DOCTYPE HTML PUBLIC " � / /W3C/ / DTD HTML 4 . 0 1 T r a n s i t i o n a l / / EN"><html><head>

<meta h t t p � equiv="Content � Type" con ten t=" text / html ; charse t= i so � 8859 � 1">< t i t l e > Une u t i l i s a t i o n g loba le des f e u i l l e s de s t y l e < / t i t l e ><sty le type=" text / css"><! ��

BODY{ background � c o l o r : aqua ; c o l o r : blue }H1 { background � c o l o r : whi te ; c o l o r : navy ; f o n t � weight : bold }

�� ></ sty le>

</ head>

<body>

<h1> Une u t i l i s a t i o n g loba le des f e u i l l e s de s t y l e < / h1>

<p> La f e u i l l e de s t y l e redéfinit des a t t r i b u t s par défautpour l es ba l i ses & l t ; body> et & l t ; h1> : < / p><ul>< l i > l a cou leur de fond du document es t l a cou leur < i > aqua < / i > ; < / l i >< l i > l a cou leur du t e x t e es t < i > blue < / i > ; < / l i >< l i > l a cou leur du fond des t i t r e s de niveau 1 est < i > whi te < / i > ; < / l i >< l i > l a cou leur du t e x t e des t i t r e s de niveau 1 est < i > navy < / i > ; < / l i >< l i > l a p o l i c e des t i t r e s de niveau 1 est en < i > gras. < / i > </ l i ></ ul></body></ html>

Comme vous pouvez le constater (voir figure 7), dans ce document, le fond apparaîtra bleuclair, les textes <h1> en gras et navy, en gardant la taille prévue par le navigateur pour lestitres <h1>. Avec Netscape 3, les attributs de <style> ne sont pas pris en compte (notammentgrâce aux caractères commentaire (<!- et ->) qui entourent les définitions de style), et celane gène pas la lecture du document.



FIG. 7 – Utilisation globale des feuilles de style

6.2 QUESTION

Modifier les pages créées pour l’exercice 15 du TP 1 :– définir un style différent pour chaque page ;– modifier la couleur des liens, de la police et du fond ;– modifier également les polices de caractères.



EXERCICE 7 : UTILISATION EXTERNEC’est là qu’apparaît tout l’intérêt des feuilles de style. On décrit le style des pages dans un

document (d’extension .css) extérieur aux fichiers HTML. Le lien se fait par la balise <link>à placer dans l’en-tête du fichier HTML :

<html><head>< t i t l e > ... < / t i t l e >< l ink r e l = s ty leshee t href="URL du f i c h i e r . css " type= " t e x t / css "></ head>

<body>. . .</body>

7.1 Exemple

Un fichier style1.css contient les lignes suivantes :

body{ background � c o l o r : whi te ; c o l o r : b lack }h3{ c o l o r : green }em{ background � c o l o r : ye l low ; f o n t � s ize :120%}

La syntaxe est la même que pour une définition dans le mode global.Les fichiers HTML qui font référence à cette feuille de style, auront par défaut, un fond de

page blanc, un texte par défaut noir, des titres <h3> verts, et des remarques (balise <em>) surfond jaune et avec une taille de lettres 120% plus grande que la taille standard (définie par lenavigateur)...

7.2 Question

En partant des pages créées lors de l’exercice 15 du TP 1, proposez la définition d’unefeuille de style. Vous modifierez à votre guise :

– la police de caractères, sa taille et sa couleur ;– les couleurs de fonds pour les balises <it> et <b> ;– les balises <h1> à <h4> (couleur, police et fond).Appliquer cette nouvelle feuille de style à l’ensemble de vos pages.



EXERCICE 8 : LES CLASSES, LES BALISES <DIV> et <SPAN>Nous avons vu dans l’exercice précédent comment mettre tous les titres de niveau 3 en vert

dans un ensemble de documents, mais on voudrait que dans un certain contexte, ils soient enmarron !

Dans la feuille de style (extension .css) nous définissons des classes en faisant suivre lessélecteurs d’un point «.» et du nom de la classe souhaité (par exemple h3.ex). Dans le fichierHTML, il suffira de définir l’attribut class pour la marque correspondante afin que les définitionss’appliquent, <h3 class=ex>, dans notre exemple.

8.1 Exemple

Dans style2.css, on a les lignes suivantes :

h3 { c o l o r : green }h3 . s i c{ c o l o r : maroon }a . s i c { t e x t � decora t ion : none }d i v . i n f o { padding :10%}

Dans le fichier HTML qui appelle style2.css comme feuille de style, on aura :

. . .<h3> T i t r e normal en vert < / h3>

t e x t e

<h3 c lass= s i c > Ce t i t r e es t en marron < / h3>

t e x t e

<a c lass= s i c href=" s i c . html "> ce l i e n n’apparaîtra pas souligné. < / a>

<div c lass= i n f o >Ce t e x t e sera décalé vers l a d r o i t e .</ div>. . .

Nous avons vu en passant quelques propriétés que l’on pouvait attribuer à des sélecteurs(color, background-color, font-size, font-weight, text-decoration, padding),CSS1 en contient au moins 35, donc vous avez de quoi exercer vos talents de styliste.

8.2 Question

Modifiez la feuille de style créée à l’exercice précédent :– créez deux classes avec des attributs de couleurs et de polices différents ;– utilisez ces deux classes dans une même page ;– apprenez également à utiliser les balises <span> et <div>.



EXERCICE 9 : PLACEMENT D’IMAGES ET DE TEXTESÀ l’aide d’un logiciel de dessin (ici paintbrush), reproduisez le logo présenté à la figure 8.

FIG. 8 – Un petit logo pas très réussi

Il est construit ainsi :– un rectangle plein de dimension 150 points par 60.– un rectangle aux bords arrondis de dimension 100 par 60 centré à l’intérieur du premier

rectangle.Les graphistes nous pardonneront car le résultat n’est pas très réussi, mais l’objectif n’est

pas ici de réaliser des logos...Utilisez un logiciel plus évolué (Paint Shop Pro par exemple), pour enregistrer votre travail

au format gif, plus adapté à la diffusion Web.Utilisez la balise <span> pour placer le logo à 200 pixels à gauche et 100 pixels vers le bas.Centrez alors le texte ALGORITHMIQUE–PROGRAMMATION ORIENTÉES INTERNET.La figure 9 présente le résultat attendu.



FIG. 9 – Placement d’objets

EXERCICE 10 : TOPSTYLESur le cd-rom qui vous a été remis, vous trouverez le logiciel TopStyle qui est un éditeur de

feuilles de style. Nous allons découvrir que la création des feuilles de style est largement facilitépar ce type d’outils.

En effet, topstyle nous assiste tout au long de la création de notre feuille de style. En par-ticulier, il est capable de vérifier la conformité de notre feuille style par rapport aux différentsstandards CSS1 et 2, mais aussi par rapport à Netscape ou Internet Explorer.

Utilisez l’aide (en particulier la rubrique TopStyle Light) pour découvrir comment définir lespropriétés d’un sélecteur.

Vous remarquerez que TopStyle est organisé au tour de trois fenêtres (voir figure 10). La fe-nêtre de gauche contient la feuille de style en cours de conception. La fenêtre de droite appeléeStyle Inspector résume toutes les propriétés accessibles pour le sélecteur courant. La fenêtredu bas nommée preview présente un aperçu de la feuille de style.

Notre objectif est d’appliquer une feuille de style (que nous allons créer à l’aide de TopStyle)au document HTML proposé à la figure 11.

Vous trouverez sur le serveur, un fichiertp2ex10.txt contenant le texte du document à réaliser, il est donc inutile de le saisir.

Après avoir défini ce document HTML, créez à l’aide de TopStyle une feuille de style pourobtenir l’affichage présenté à la figure 12.

Pour obtenir ce résultat, il est nécessaire de préciser les propriétés des sélecteurs body,h1, h2, dl, dt, et dl.



FIG. 10 – TopStyle Light

FIG. 11 – une page sans utilisation de feuille de style



FIG. 12 – La même page affichée en utilisant la feuille de style

EXERCICE 11 : QUELQUES LIENS SUR LES FEUILLES DE STYLEComme d’habitude, nous terminons par un exercice d’ouverture. Pour comprendre un peu

plus l’utilisation des feuilles de style, nous vous conseillons de consulter les pages consacréespar le W3C à ce sujet : http://www.w3.org/Style/CSS/

En particulier, la lecture du chapitre 2 du livre Cascading Style Sheets, designing for theWeb de H. W. Lie et B. Bos est très instructive. Ce chapitre est disponible à l’adresse http://www.w3.org/Style/LieBos2e/enter/

Le maillon faible ou les feuilles de styles appliquées (Laurent Kling) :http://sawww.epfl.ch/SIC/SA/publications/FI02/fi-3-2/3-2-page13.html

Une page en anglais sur les feuilles de style :http://www.eskimo.com/

�

bloo/indexdot/css/index.html

La page de recommandation sur les feuilles de style du W3C (CSS1) :http://www.w3.org/TR/REC-CSS1

La page de recommandation sur les feuilles de style du W3C (CSS2) :http://www.w3.org/TR/REC-CSS2/



FIG. 13 – CSS2 Specification (Netscape 7, Solaris)


Documents

RAJECKI TP 2 : Les tableaux et les feuilles de style en HTML 4mathinfo.univ-reims.fr/IMG/pdf/tp2.pdf · TP 2 : Les tableaux et les feuilles de style en HTML 4 EXERCICE 1 : DÉFINITION