TP 2 : Les tableaux et les feuilles de style en HTML 4

Transcription

M. K RAJECKI, DESS IAS
Programmation Web
TP 2 : Les tableaux et les feuilles de style
en HTML 4
EXERCICE 1 : DÉFINITION D’UN TABLEAU
Commencer 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 également l’espace entre les cellules et la largeur de votre tableau. Essayer différentes valeurs pour
chacune de ces balises.
EXERCICE 2 : LES CELLULES
F IG . 1 – Résultat de l’exercice 1
Maintenant que vous êtes en mesure de définir un tableau élémentaire, il ne vous reste plus
qu’à é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 de
tailles différentes.
Les balises <td colspan> et <td rowspan> sont très utiles pour permettre la fusion de
cellule. Essayer les sur votre tableau.
Vous pouvez fixer un alignement différent pour chaque cellule à l’aide de <tr align> et
de <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
Programmation Web
EXERCICE 3 : LE DRAGON
F IG . 2 – Le résultat
Le but de cet exercice est de créer une page contenant un tableau dont les cellules sont des
images (voir figure 2).
F IG . 3 – Le tableau défini pour inclure les images
Vous devez reconstruire l’image complète comme présentée à la figure 3.
2/ 15
Programmation Web
EXERCICE 4 : TABLEAUX CONTENANT DES TABLEAUX
Visualisez le résultat du fichier html suivant :
< ! doctype html p u b l i c " / / w3c / / d t d 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 " c o n t e n t= " t e x t / html ; c h a r s e t= i s o 8859 1">
< t i t l e > Un t a b l e a u contenant des t a b l e a u x < / t i t l e >
< / head>
<body bgcolor= " w h i t e " >
< t a b l e width="100%" bgcolor= " p u r p l e " border= " 0 " cellspacing = " 1 " >
< ! ce t a b l e a u e s t utilisé pour o b t e n i r l a bordure >
< t r >< t d >
< t a b l e width="100%" bgcolor= " w h i t e "
border= " 0 " cellpadding = " 5 " cellspacing = " 0 " >
< t r >< t d a l i g n = " c e n t e r " bgcolor= " p u r p l e " >
< f o n t color= " w h i t e " > Les éditeurs HTML < / f o n t> < / t d > < / t r >
< t r >< t d a l i g n = " l e f t " >
<a href = " h t t p : / / www. b r a d s o f t . com / t o p s t y l e / " > T o p s t y l e < / a> < br>
<a href = " h t t p : / / freeware . 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 . s o u r c e f o r g e . n e t / " > Quanta Plus < / a> < br>
<a href = " h t t p : / / b l u e f i s h . o p e n o f f i c e . n l / " > B l u e f i s h < / a> < br>
<a href = " h t t p : / / www. e v r s o f t . com / " > E v r s o 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.
F IG . 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
3/ 15
Programmation Web
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/
4/ 15
Programmation Web
EXERCICE 5 : FEUILLES DE STYLE : UTILISATION LOCALE
Dans 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" c o n t e n t=" t e x t / html ; c h a r s e t= i s o 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=" w h i t e ">
<h1 s t y l e ="background color : y e l l o w "> UN TITRE SUR UN FOND JAUNE < / h1>
<p s t y l e ="color : red"> La c o u l e u r du t e x t e de ce paragraphe e s t l e rouge. < / p>
<p> I c i , ce sont l e s a t t r i b u t s par défaut q u i sont appliqués. < / p>
< / body>
< / html>
Tel quel, cela ne présente pas d’intérêt par rapport à l’utilisation de <font ...>, mais
permet comme on le verra plus loin d’outrepasser les directives données par une instruction
plus globale et un ancien navigateur ne tiendra simplement pas compte de l’attribut style (voir
figure 5).
5.2
QUESTION
Modifier (en utilisant uniquement des feuilles de style locales) l’exercice 8 du TP 1 (concernant 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.
5/ 15
Programmation Web
F IG . 5 – Utilisation locale des feuilles de style
F IG . 6 – Ordre du jour d’un cabinet d’avocats crapuleux
6/ 15
Programmation Web
EXERCICE 6 : UTILISATION GLOBALE
Dans le mode global, la marque <style> ... </style> est placée dans l’en-tête du document (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" c o n t e n t=" t e x t / html ; c h a r s e t= i s o 8859 1">
< t i t l e > Une u t i l i s a t i o n g l o b a l e des f e u i l l e s de s t y l e < / t i t l e >
< s t y l e type=" t e x t / css">
< !
BODY{ background c o l o r : aqua ; c o l o r : blue }
H1 { background c o l o r : w h i t e ; c o l o r : navy ; f o n t weight : bold }
>
</ style>
< / head>
<body>
<h1> Une u t i l i s a t i o n g l o b a l e 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éfaut
pour l e s b a l i s e s & l t ; body> e t & l t ; h1> : < / p>
<ul>
< l i > l a c o u l e u r de fond du document e s t l a c o u l e u r < i > aqua < / i > ; < / l i >
< l i > l a c o u l e u r du t e x t e e s t < i > blue < / i > ; < / l i >
< l i > l a c o u l e u r du fond des t i t r e s de niveau 1 e s t < i > w h i t e < / i > ; < / l i >
< l i > l a c o u l e u r du t e x t e des t i t r e s de niveau 1 e s t < 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 e s t en < i > gras. < / i > < / l i >
</ ul>
< / body>
< / html>
Comme vous pouvez le constater (voir figure 7), dans ce document, le fond apparaîtra bleu
clair, les textes <h1> en gras et navy, en gardant la taille prévue par le navigateur pour les
titres <h1>. Avec Netscape 3, les attributs de <style> ne sont pas pris en compte (notamment
grâce aux caractères commentaire (< !- et ->) qui entourent les définitions de style), et cela
ne gène pas la lecture du document.
7/ 15
Programmation Web
F IG . 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.
8/ 15
Programmation Web
EXERCICE 7 : UTILISATION EXTERNE
C’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 i n k r e l = s t y l e s h e e 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 : w h i t e ; c o l o r : b l a c k }
h3
{ c o l o r : green }
em
{ background c o l o r : y e l l o w ; f o n t s i z e :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>) sur
fond jaune et avec une taille de lettres 120% plus grande que la taille standard (définie par le
navigateur)...
7.2
Question
En partant des pages créées lors de l’exercice 15 du TP 1, proposez la définition d’une
feuille 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.
9/ 15
Programmation Web
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 en
marron !
Dans la feuille de style (extension .css) nous définissons des classes en faisant suivre les
sélecteurs d’un point «.» et du nom de la classe souhaité (par exemple h3.ex). Dans le fichier
HTML, il suffira de définir l’attribut class pour la marque correspondante afin que les définitions
s’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 d e c o r a t i o n : 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>
texte
<h3 c l a s s = s i c > Ce t i t r e e s t en marron < / h3>
texte
<a c l a s s = s i c href = " s i c . html " > ce l i e n n’apparaîtra pas souligné. < / a>
<div c l a s s = 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>.
10/ 15
Programmation Web
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.
F IG . 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.
11/ 15
Programmation Web
F IG . 9 – Placement d’objets
EXERCICE 10 : TOPSTYLE
Sur 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 particulier, il est capable de vérifier la conformité de notre feuille style par rapport aux différents
standards 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 les
propriétés d’un sélecteur.
Vous remarquerez que TopStyle est organisé au tour de trois fenêtres (voir figure 10). La fenêtre de gauche contient la feuille de style en cours de conception. La fenêtre de droite appelée
Style Inspector résume toutes les propriétés accessibles pour le sélecteur courant. La fenêtre
du 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 fichier
tp2ex10.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 pour
obtenir 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.
12/ 15
Programmation Web
F IG . 10 – TopStyle Light
F IG . 11 – une page sans utilisation de feuille de style
13/ 15
Programmation Web
F IG . 12 – La même page affichée en utilisant la feuille de style
EXERCICE 11 : QUELQUES LIENS SUR LES FEUILLES DE STYLE
Comme 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ées
par le W3C à ce sujet : http://www.w3.org/Style/CSS/
En particulier, la lecture du chapitre 2 du livre Cascading Style Sheets, designing for the
Web 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/
14/ 15
Programmation Web
F IG . 13 – CSS2 Specification (Netscape 7, Solaris)
15/ 15

TP 2 : Les tableaux et les feuilles de style en HTML 4

Transcription

Documents pareils

1- balises du squelette 2-dans le head 3-dans le body 4

Html 05 - HTML facile - Pagesperso

La propriété BACKGROUND-COLOR

HTML/CSS - Travaux Pratiques 2

DESS Économie et gestion des systèmes de santé

DESS Économie et gestion des services de santé

Par amour

Les bonnes pratiques HTML

DESS Génie Logiciel - Page personnelle de Mendes Fabrice

offre d`emploi planet form