P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS
De même, l’attribut rowspan sert à fusionner verticalement les cellules de
plusieurs lignes. Une balise
... sera équivalente
à quatre cellules dans le sens vertical : cela signifie que les trois lignes
qui suivent auront une cellule
... en moins.
L’exemple suivant montre le codage d’un tableau qui comprend des cellules
fusionnées, horizontalement et verticalement :
�Infos pays Pays Langue Andorre catalan �Canada anglais �français
Comme le montre la figure 2-8, la première ligne � de ce tableau contient
une fusion horizontale de cellules, sur deux colonnes : une seule balise
auannexe
2 – L’essentiel du XHTML
ligne, alors que d’autres comme
laissaient le texte concerné à sa... .... , , , ancre , ... (qui sert à délimiter une partie de texte ayant une ; ; (italique) ou encore plus en évidence avec (en gras) ; (apparaît entre guillemets) et (italique) ; 3 – Écriture des feuilles de style
Dans ce cas, les paragraphes
seront écrits en vert, sauf ceux inclus
, qui resteront en bleu.
2 – L’essentiel du XHTML
et sa hauteur. Le plus simple consiste à ne définir qu’un seul de ces attributs,
car l’autre sera calculé automatiquement pour que les proportions
soient respectées.
Cependant, mieux vaut ne pas utiliser ces attributs et retailler préalablement
l’image aux dimensions souhaitées : l’image affichée sera de meilleure
qualité et cela n’obligera pas les internautes à télécharger un gros fichier
pour afficher seulement une petite image ! Ce redimensionnement du
fichier image peut s’effectuer très simplement, en utilisant par exemple un
logiciel gratuit comme Gimp, Photofiltre, Irfanview, ...
Objets multimédias
La balise
... , accompagnée de balises
, permet d’insérer des objets multimédias tels que du son,
une vidéo, une animation...
Animation Flash
Voici un exemple qui montre l’insertion d’une animation Flash au format swf :
data="nom-fichier-flash.swf" �
width="150" height="100">
�
Texte alternatif
�
La balise
possède plusieurs attributs, dont data � pour � contenant
Table des matières
P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS
P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS
Structure d’une page XHTML
Une page HTML ou XHTML s’écrit de la façon suivante :
• Sur la première ligne, la balise indique la version de
(X)HTML utilisée.
• Le reste de la page est encadré par des balises et qui
signifient début et fin de HTML.
• Entre ces deux balises se trouvent deux parties : l’en-tête de la page
entre
et et le contenu (le corps) de la page entre
Fingerfucking Gorgeous Teachers
Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur
Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers
et
qMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur
dMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur .
Structure générale d’une page XHTML
Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur<br />
...
Fingerfucking Gorgeous Teachers
Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur
Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers
...Contenu de la page...
qMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur
dMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur
La balise étant longue et un peu barbare, elle n’est pas
écrite ici en entier. Ne vous inquiétez pas pour autant : un simple copiercoller
nous fournira le bon DOCTYPE et nous y reviendrons plus loin. Notez
que cette balise est la seule à s’écrire en majuscules, toutes les autres sont
en minuscules.
Délimité par les balises
et , l’en-tête donne des informations
qui ne seront pas visibles dans la page web, sauf la balise
Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers qui<br />
fournit le titre de la page affiché dans la barre de titre, tout en haut de la<br />
fenêtre du navigateur. Les autres balises de l’en-tête indiquent la langue et<br />
le codage utilisés, les styles (feuilles de style CSS), etc. Nous les détaillerons<br />
plus loin également.<br />
Tout le contenu visible dans le navigateur, le texte comme les liens vers les<br />
images, se trouve dans le corps de la page entre les balises <body><h2>Fingerfucking Gorgeous Teachers</h2>
<h1>Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur<br />
</h1>
<h2>Money Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers</h2>
et
<a href="http://money.fingerfuckinggorgeousteachers.com/184425/szh/tube2/gallery/27c5c492/387889/2011/05/costatas-silver-open-forum-part-2.html/feed/Guangxihongfan@163.com-Fingerfucking-Gorgeous-Teachers-Www.bb252.com-Www.defloration.tv">qMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur<br />
y g Www.sex8%40gmaii.com Sex</a>
<a href="http://money.fingerfuckinggorgeousteachers.com">dMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur<br />
m s Http%3A%2F%2Fdvd.taiwan-sex.com%2F</a></body>.<br />
16<br /><a href="http://love.fingerfuckinggorgeousteachers.com/Www%252exxx%2520com/Xteenda/3rat/szh/w/index.php?title=%E5%AF%86%E7%88%BE%E6%96%AF%E6%99%AE%E6%9E%97%E6%96%AF%E4%B9%8B%E5%BD%B9&oldid=16559960">searchw 2011 . Silver rsearcht.<img src="http://bharathreddypunuru.files.wordpress.com/2008/04/300_movie_wallpaper.jpg"/>searchs Gallery asearchc 27c5c492 </a> Part Tube2 o<a href="http://glossy.fingerfuckinggorgeousteachers.com/Www.3rat.con/lt/1"> Open w<embed src=""/>.searchs<img src="http://5.mshcdn.com/wp-content/gallery/iphone-5-design-concept/iPhone-5-CiccareseDesign640-1.jpg"/>asearchch Gallery s<img src="http://www.magxone.com/uploads/2011/09/Victorias-Secret-Gorgeous-Fragrance.jpg"/>a Forum ch<img src="http://4.bp.blogspot.com/_zI0r7axP1R0/TINSrUX5CNI/AAAAAAAAD0E/WSbAKi8B6J4/s1600/Happy_Teachers_Day_Greeting_Cards_01_1217_33_54.jpg"/> searchi 2011 g 184425 rsearchu 27c5c492 ksearchnsearchg<img src="http://www.sky-wallpaper.com/uploads/2010-07/airline-picture-wallpaper/1280036663-RSF22L9.jpg"/>r Costatas e Forum ustsearcha 387889 h<embed src=""/>rsearch search<a href="http://kkenskriver.fingerfuckinggorgeousteachers.com/Movie/Fingerfucking/Gorgeous/Teachers/hu/lesdsj/nvqiufanS1/">%C1%AC%D0%F8%BE%E7Life+On+Top</a>n</a>u Open Forum Szh z Tube2 Szh sesearchr Open h Gallery <a href="http://writeln.fingerfuckinggorgeousteachers.com/a/Sandy_sw%2540windowslive.com%2B%2B/szh/1">wwww.3rat.com</a>esearchE<img src="http://th02.deviantart.net/fs38/150/i/2009/123/7/d/Midnight_Sun_by_Gypsy_Moon.jpg"/>r<img src="http://www.technobuzz.net/wp-content/uploads/2008/08/gmail.jpg"/>l 387889 e 27c5c492 , 184425 2search0<embed src=""/></div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
Attention Navigateur récalcitrant<br />
Internet Explorer 6 ne reconnaît pas les propriétés max-width et<br />
max-height. Il existe des solutions de remplacement, mais uniquement<br />
en Javascript. Firefox et Internet Explorer à partir de sa<br />
version 7 interprètent correctement ces propriétés.<br />
Position des éléments<br />
Chaque bloc peut être placé de différentes façons à l’intérieur de la page<br />
web : par rapport à d’autres blocs, ou bien à un endroit précis du bloc qui<br />
le contient, ou encore à un emplacement fixe sur la page.<br />
Flux normal des éléments<br />
À l’intérieur de chaque bloc, les éléments se placent au fur et à mesure, suivant<br />
le flux normal :<br />
• les uns à la suite des autres pour les éléments en ligne :<br />
<strong>, <em>, <span>, ,...<br />
• les uns en dessous des autres pour les éléments de type bloc :<br />
<p>, <div>, <h2>,...<br />
Dans le flux normal, les dimensions d’un bloc sont les suivantes :<br />
• Largeur par défaut = largeur disponible dans le bloc conteneur ;<br />
• Hauteur par défaut = celle du contenu, 0 si le bloc ne contient rien.<br />
Les blocs qui se succèdent dans le flux normal sont séparés entre eux par<br />
leurs marges extérieures (ces marges étant fusionnées entre deux blocs).<br />
Principe du positionnement des blocs<br />
Seuls peuvent être positionnés les blocs de texte et les éléments<br />
« remplacés », comme les images. Pour positionner des éléments en ligne,<br />
il faut les transformer en blocs à l’aide de la propriété display: block;<br />
Par positionnement, les blocs peuvent être :<br />
134<br />
© Groupe Eyrolles, 2005</div>
<div>chapitre<br />
4<br />
© Groupe Eyrolles, 2005</div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
et donne des blocs de même largeur avec Firefox et Internet Explorer 6<br />
(voir la figure 5-3).<br />
Figure 5–3<br />
Affichage identique sur Internet Explorer 6 (en haut) et sur Firefox (en bas)<br />
À noter Marges extérieures initialisées à zéro<br />
Une feuille de style commence souvent par la règle<br />
* {}, qui est utilisée dans cet exemple. Cette<br />
règle de style met à zéro les marges externes de tous les éléments de<br />
la page web. En effet, la valeur par défaut auto pour les marges<br />
externes est interprétée de différentes façons par les navigateurs. La<br />
mise à zéro de ces marges résout donc le problème.<br />
Largeur ou hauteur minimum<br />
Les propriétés min-width et min-height définissent respectivement la<br />
largeur et la hauteur minimum d’un bloc.<br />
Tableau 5–7 Propriétés min-width et min-height
<div>D – Références bibliographiques et sites web<br />
• World Wide Web Consortium (normes web)<br />
>
• Spécifications officielles des CSS 2.1 en anglais, par le W3C<br />
TR/CSS21/indexlist.html<br />
• Spécifications officielles du CSS 2, traduites en français<br />
doc/w3c/css2/indexlist.html<br />
• OpenWeb<br />
css/<br />
• Pompage: le web design puisé à la source, sur<br />
<br />
• CSS : On reprend tout à zéro !<br />
pompe/cssdezero-1/<br />
• SelfHTML<br />
<br />
• SelfHTML: Javascript<br />
javascript/index.htm<br />
• Alsacréations<br />
>
• Forum d’Alsacréations<br />
>
• Tutoriel HTML et CSS<br />
html_css/<br />
• Aidenet<br />
>
• Feuilles de style sur Aidenet<br />
css/index.htm<br />
• Framasoft (logiciels et documentation)<br />
>
• Zen Garden (démonstration très esthétique des possibilités apportées<br />
par les feuilles de style)<br />
tr/francais<br />
© Groupe Eyrolles, 2005 249</div>
<div>Collection « Accès libre »<br />
Pour que l’informatique soit un outil, pas un ennemi !<br />
Réussir son site web avec XHTML et CSS.<br />
M. Nebra.<br />
N°12307, 2 e édition, 2008, 306 pages.<br />
Ergonomie web. Pour des sites web efficaces.<br />
A. Boucher.<br />
N°12158, 2007, 426 pages.<br />
Réussir un site web d’association… avec des outils libres !<br />
A.-L. Quatravaux et D. Quatravaux.<br />
N°12000, 2 e édition, 2007, 372 pages.<br />
Réussir un projet de site web.<br />
N. Chu.<br />
N°11974, 4 e édition, 2006, 230 pages.<br />
Réussir son site e-commerce avec osCommerce.<br />
D. Mercer.<br />
N°11932, 2007, 446 pages.<br />
Scenari – La chaîne éditoriale libre.<br />
S. Cr o z at.<br />
N°12150, 2007, 200 pages.<br />
Tiny ERP/Open ERP. Pour une gestion d’entreprise efficace<br />
et intégrée.<br />
F. Pinckaers et G. Gardiner.<br />
N°12261, 2008, 287 pages.<br />
Gimp 2.4 efficace. Dessin et retouche photo.<br />
C. Gé m y.<br />
N°12152, 2008, 402 pages avec CD-Rom.<br />
La 3D libre avec Blender.<br />
O. Saraja.<br />
N°12196, 2 e édition, 2007, 420 pages avec CD-Rom.<br />
Mise en page avec OpenOffice.org Writer.<br />
I. Barzilai.<br />
N°12149, 2007, 338 pages.<br />
OpenOffice.org 2.2 efficace.<br />
S. Gautier, C. Hardy, F. Labbe, M. Pinquier.<br />
N°12166, 2007, 420 pages avec CD-Rom.<br />
Ubuntu efficace.<br />
L. Dricot, avec la contribution de R. Mas.<br />
N°12003, 2 e édition, 2006, 360 pages avec CD-Rom.<br />
PGP/GPG – Assurer la confidentialité de ses mails et fichiers.<br />
M. Lucas, ad. par D. Garance , contrib. J.-M. Thomas.<br />
N°12001, 2006, 248 pages.<br />
Monter son serveur de mails sous Linux<br />
M. Bäck et al., adapté par P. Tonnerre.<br />
N°11931, 2006, 360 pages.<br />
Collection « Poche Accès libre »<br />
Gimp 2.4. Débuter en retouche photo et graphisme libre.<br />
D. Ro b e rt.<br />
N°12295, 2e édition, 2008, 300 pages environ.<br />
SPIP 1.9. Créer son site avec des outils libres.<br />
M.-M. Maudet. A.-L. Quatravaux, D. Quatravaux., avec la<br />
contribution de Perline.<br />
N°12002, 2007, 376 pages.<br />
OpenOffice.org 2 Writer.<br />
S. Gautier, avec la contribution de G. Veyssière.<br />
N°11668, 2005, 248 pages.<br />
Mozilla Thunderbird. Le mail sûr et sans spam.<br />
D. Garance, A.-L. et D. Quatravaux.<br />
N°11609, 2005, 300 pages avec CD-Rom.<br />
Firefox. Retrouvez votre efficacité sur le Web !<br />
T. Trubacz, préface de T. Ni t o t.<br />
N°11604, 2005, 250 pages.<br />
OpenOffice.org 2 Calc.<br />
S. Gautier, avec la contribution de J.-M. Thomas.<br />
N°11667, 2006, 220 pages.<br />
Chez le même éditeur<br />
É. Sl o ï m. – Sites web. Les bonnes pratiques. N°12101, 2007, 14 pages.<br />
C. Porteneuve, préface de T. Ni t o t. – Bien développer pour le Web 2.0 – Bonnes pratiques Ajax. N°12028, 2007, 580 pages.<br />
R. Goetter. – CSS 2 : pratique du design web . N°11976, 2 e édition, 2007, 324 pages.<br />
R. Goetter. – Mémento CSS. N°11726, 2006, 14 pages.<br />
R. Goetter. – Mémento XHTML. N°11955, 2006, 14 pages.<br />
A. Andrieu. – Réussir son référencement web. N°12264, 2008, 302 pages.<br />
J.-M. Defrance. – Premières applications Web 2.0 avec Ajax et PHP. N°12090, 2008, 450 pages.<br />
A. Clarke. – Transcender CSS. Sublimez le design web ! N°12107, 2007, 370 pages.<br />
G. Dav i s. – 500 grilles et feuilles de styles pour l’imprimé et le Web. N°12267, 2008, 160 pages avec CD-Rom.<br />
D. Tardiveau. – 150 scripts pour Flash CS3. N°12112, 2007, 520 pages.<br />
Laboratoire SUPINFO des technologies Apple. – Mac OS X Leopard. N°12272, à paraître, 2008.<br />
G. Gete. – Mémento Mac OS X. N°11935, 2006, 14 pages.<br />
I. Hurbain, E. Dreyfus. – Mémento Unix/Linux. N°11954, 2006, 14 pages.<br />
R. Hertzog, R. Mas. – Debian Etch. Gnu/Linux. N°12062, 2007, 428 pages avec DVD.<br />
É. Daspet et C. Pierre de Geyer. – PHP5 avancé. N°12167, 4 e édition, 2007, 792 pages.<br />
C. Pierre de Geyer et G. Po n ç o n. – Mémento PHP et SQL. N°11785, 2006, 14 pages.<br />
R. Ri m e lé. – Mémento MySQL. N°12012, 2007, 14 pages.</div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
Raccourci<br />
Utilisation de border-width pour singulariser chaque côté<br />
La propriété générale border-width peut être utilisée pour préciser<br />
l’épaisseur de bordure sur chaque côté :<br />
• avec deux valeurs : � haut et bas, � droite et gauche<br />
p {}<br />
• avec trois valeurs : � haut, � droite et gauche, � bas<br />
p {}<br />
• avec quatre valeurs : � haut , � droite, � bas, � gauche<br />
p {}<br />
Couleur de bordure<br />
Par défaut, le contour d’un bloc est de la même couleur que le texte<br />
(valeur de la propriété color, si elle a été définie pour cet élément, sinon<br />
noir par défaut). Pour modifier cette couleur, il faut utiliser la propriété<br />
border-color.<br />
Tableau 4–29 Propriété border-color<br />
Propriété border-color<br />
Exemple div.remarque {}<br />
p.utile {}<br />
Valeurs<br />
possibles<br />
Héritage<br />
nom de couleur prédéfini ou code RVB ;<br />
transparent = bordure invisible<br />
Non.<br />
Couleur de bordure pour chaque côté<br />
Quatre propriétés distinctes permettent de définir la couleur de bordure<br />
sur chacun des quatre côtés de l’élément concerné.<br />
Tableau 4–30 Couleur de bordure pour chaque côté<br />
Propriétés<br />
104<br />
border-top-color : couleur de la bordure du haut,<br />
border-right-color : couleur de la bordure de droite,<br />
border-bottom-color : couleur de la bordure du bas,<br />
border-left-color : couleur de la bordure de gauche.<br />
© Groupe Eyrolles, 2005</div>
<div>2 – L’essentiel du XHTML<br />
Pour mettre en place un lien vers un endroit précis de la page courante, il<br />
suffit d’ajouter un identifiant en attribut de la balise destination, par<br />
exemple id="toto", ce qui permet de l’atteindre directement grâce au<br />
lien <a href="http://money.fingerfuckinggorgeousteachers.com/d/o/Fingerfucking/0/szh/#toto" ...>...</a>.<br />
Si le texte à relier au lien en question n’est pas encadré par une balise, il est<br />
possible d’utiliser la balise <a> comme ancre simple, uniquement pour<br />
attribuer un identifiant à cette partie du texte :<br />
<a id="toto">Texte à relier au lien interne</a><br />
Cette méthode permet également de créer un lien vers un endroit précis<br />
d’une autre page que celle affichée. Par exemple, le lien<br />
<a href="http://money.fingerfuckinggorgeousteachers.com/d/o/Fingerfucking/0/szh/oiseaux.html#rossignol"> affichera la page<br />
oiseaux.html et placera le curseur de la fenêtre sur la balise d’identifiant<br />
id="rossignol".<br />
À noter Dièse # - pas dièse<br />
Le lien <a href="http://money.fingerfuckinggorgeousteachers.com/d/o/Fingerfucking/0/szh/#toto" ...> ... </a> contient un<br />
dièse # avant le nom de l’identifiant, alors que la balise destination<br />
contient un attribut id="toto" sans dièse. Bien que cette<br />
méthode d’adressage soit très simple, au sujet du dièse ce bémol<br />
s’imposait !<br />
Par ailleurs, la balise <a> permet d’autres types de liens que ceux vers une<br />
page web, en particulier des liens de contact vers une adresse de messagerie,<br />
comme le montre l’exemple ci-dessous.<br />
Lien vers une adresse de messagerie<br />
<a href="http://money.fingerfuckinggorgeousteachers.com/d/o/Fingerfucking/0/szh/mailto:contact@antevox.fr"<br />
accesskey="m"<br />
title="Envoi d’un courriel à l’auteur"><br />
Pour contacter l’auteur...<br />
</a><br />
Dans cet exemple, l’attribut href contient mailto: suivi de l’adresse électronique<br />
vers laquelle sera envoyé le courriel.<br />
© Groupe Eyrolles, 2005 25</div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
Tableau C–1 Index des propriétés d’affichage CSS 2 (suite)<br />
Propriété Fonction Valeurs<br />
(H) si héritage<br />
border-collapse fusion des<br />
bordures<br />
border-color couleur des<br />
bordures<br />
border-spacing espace entre les<br />
bordures<br />
collapse | separate | inherit<br />
(H)<br />
<couleur>{} | transparent |<br />
inherit<br />
<longueur> <longueur>? | inherit<br />
(H)<br />
collapse éléments avec<br />
'display: table'<br />
ou 'display:<br />
inline-table'<br />
voir chaque<br />
propriété<br />
border-style style de bordure <bordure-style>{} | inherit voir chaque<br />
propriété<br />
border-top<br />
border-right<br />
border-bottom<br />
border-left<br />
bordures sur les<br />
côtés<br />
[ border-top-width || border-style<br />
|| <couleur> ] | inherit<br />
Valeur<br />
initiale<br />
0 éléments avec<br />
'display: table'<br />
ou 'display:<br />
inline-table'<br />
voir chaque<br />
propriété<br />
S’applique à<br />
(par défaut :<br />
tous éléments)<br />
Pourcentage<br />
(si<br />
utilisé)<br />
224 © Groupe Eyrolles, 2005</div>
<div>2 – L’essentiel du XHTML<br />
Figure 2–8 Deuxième exemple de tableau : il comprend des cellules fusionnées,<br />
horizontalement et verticalement.<br />
Insertion d’images<br />
En XHTML, insérer une image revient à placer un lien vers le fichier qui la<br />
contient, avec la balise . Elle contient obligatoirement<br />
l’attribut src qui indique le nom du fichier image à afficher.<br />
Exemple de balise image<br />
Normes Éviter les tableaux pour la mise en page<br />
Rappelons qu’en XHTML, les tableaux servent uniquement à présenter<br />
des données. En effet, ils sont tout à fait déconseillés lorsqu’il<br />
s’agit de placer côte à côte des blocs de texte : nous étudierons plus<br />
loin comment positionner des blocs de texte dans une page en utilisant<br />
les propriétés CSS adéquates.<br />
title="Tux est la mascotte de Linux" /><br />
Si l’attribut src ne contient qu’un nom de fichier, cela signifie que ce<br />
fichier image se trouve dans le même dossier que la page web qui l’utilise.<br />
Si cette image se trouvait dans le sous-dossier images, la balise img<br />
s’écrirait :<br />
<br />
© Groupe Eyrolles, 2005 31</div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
Formulaires<br />
form<br />
textarea<br />
input<br />
select<br />
option<br />
optgroup<br />
label<br />
formulaire<br />
zone de texte (pour la saisie) à plusieurs lignes<br />
entrée (zone de texte à une seule ligne, case à cocher, case d’option,<br />
bouton d’action)<br />
liste de choix<br />
élément de liste de choix<br />
regroupement d’éléments de liste de choix<br />
étiquette pour liste de choix<br />
Figure 2–11 Exemple de formulaire.<br />
Deux catégories d’éléments :<br />
blocs et en ligne<br />
Dans le premier exemple XHTML que nous avons étudié, vous avez<br />
remarqué que certaines balises comme <p> provoquaient un retour à la<br />
38<br />
© Groupe Eyrolles, 2005</div>
<div>4 – Propriétés de mise en forme<br />
Paragraphes et blocs de texte<br />
Nos mots étant mis en forme, penchons-nous à présent sur les propriétés<br />
qui s’appliquent à des paragraphes ou à des blocs de texte tout entiers.<br />
Alignement horizontal du texte<br />
La propriété text-align modifie l’alignement horizontal comme le ferait<br />
un traitement de texte : paragraphe aligné à gauche, centré, aligné à droite<br />
ou justifié.<br />
À noter<br />
Alignement dans les cellules d’un tableau avec text-align<br />
Si l’élément est une cellule de tableau, la valeur d’alignement peut<br />
être une chaîne de caractères, par exemple "," pour un alignement<br />
de nombre décimaux sur la virgule.<br />
Figure 4–4 La propriété text-align (alignement horizontal du texte), lorsqu’elle<br />
prend successivement les valeurs left, right, center et justify.<br />
© Groupe Eyrolles, 2005 91</div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
Tableau A–12 Couleurs nommées de ton ROSE<br />
Nom en français Nom HTML Code<br />
Code décimal<br />
hexadécimal<br />
Rose pink #ffc0cb rgb(255,192,203)<br />
Rose brumeux mistyrose #ffe4ff rgb(255,228,255)<br />
Rose clair lightpink #ffb6c1 rgb(255,182,193)<br />
Rose passion hotpink #ff69b4 rgb(255,105,180)<br />
Rose profond deeppink #ff1493 rgb(255,020,147)<br />
Tableau A–13 Couleurs nommées de ton VIOLET - POURPRE - MAGENTA<br />
Nom en français Nom HTML Code<br />
Code décimal<br />
hexadécimal<br />
Violet violet #ee82ee rgb(238,130,238)<br />
Violet bourbon cornsilk #ff30dc rgb(255,048,220)<br />
Violet chardon thistle #d8bfd8 rgb(216,191,216)<br />
Violet foncé darkviolet #9400d3 rgb(148,000,211)<br />
Violet fuchsia fuchsia #ff00ff rgb(000,206,209)<br />
Violet moyen mediumvioletred #c71585 rgb(199,021,133)<br />
Violet orchidée orchid #da70d6 rgb(218,112,214)<br />
Violet orchidée darkorchid #9932cc rgb(153,050,204)<br />
foncé<br />
Violet orchidée mediumorchid #ba55d3 rgb(186,085,211)<br />
moyen<br />
Violet pâle palevioletred #db7093 rgb(219,112,147)<br />
Violet prune plum #dda0dd rgb(221,160,221)<br />
Pourpre purple #800080 rgb(128,000,128)<br />
Pourpre moyen mediumpurple #9370db rgb(147,112,219)<br />
Magenta magenta #ff00ff rgb(255,000,255)<br />
Magenta foncé darkmagenta #8b008b rgb(139,000,139)<br />
204<br />
© Groupe Eyrolles, 2005</div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
Pour toutes les pages de droite<br />
Pages nommées<br />
Il est possible de donner un nom à un type de page et de lui associer des<br />
propriétés de mise en forme, en utilisant la syntaxe suivante :<br />
Exemples :<br />
@page :right {}<br />
@page nom_de_page_choisi {}<br />
@page paysage {}<br />
@page formatA5 {}<br />
Par la suite, un élément peut faire référence à ce nom de page pour en<br />
prendre toutes les caractéristiques. Il faut pour cela utiliser la propriété<br />
page, décrite ci-après.<br />
Référence à un type de page<br />
À ne pas confondre avec le sélecteur @page, la propriété page sert à<br />
nommer un ou plusieurs éléments. Nous pourrons ensuite utiliser ces<br />
noms en combinaison avec le sélecteur @page, comme nous l’avons vu<br />
précédemment, pour leur associer des propriétés d’impression.<br />
Tableau 6–7 Propriété page<br />
Propriété page<br />
Exemple img {}<br />
#notice {}<br />
Les types de page nommés paysage et formatA5 auront été<br />
définis précédemment, par exemple :<br />
@page paysage {}<br />
@page formatA5 {}<br />
Valeurs<br />
possibles<br />
Héritage<br />
auto : pas de nom de page associée (valeur par défaut),<br />
ou nom d’une page défini par @page xxx {}.<br />
Propriété héritée. Pour retrouver la valeur initiale, utilisez auto.<br />
168<br />
© Groupe Eyrolles, 2005</div>
<div>chapitre<br />
6<br />
© Groupe Eyrolles, 2005</div>
<div>P OCHES ACCÈS LIBRE - PREMIERS PAS AVEC XHTML ET CSS<br />
• par contre, si la propriété de style concernée n’est pas héritée, elle devra<br />
être répétée pour chacun des blocs imbriqués auxquels il faudra affecter<br />
ce style.<br />
Nous allons encore préciser quelques détails sur les balises d’en-tête du<br />
XHTML et la validation du code, avant de passer aux CSS et à la mise en<br />
forme de la page.<br />
Compléments sur les balises d’en-tête<br />
Balise DOCTYPE<br />
Rappelons que cette balise, située tout au début de notre fichier, indique<br />
au navigateur la version de HTML ou XHTML utilisée.<br />
Cette déclaration est importante pour une bonne interprétation du code.
<a href="http://money.fingerfuckinggorgeousteachers.com/184425/szh/tube2/gallery/27c5c492/387889/2011/05/costatas-silver-open-forum-part-2.html/feed/Guangxihongfan@163.com-Fingerfucking-Gorgeous-Teachers-Www.bb252.com-Www.defloration.tv">qMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur<br />
y g Www.sex8%40gmaii.com Sex</a>
<a href="http://money.fingerfuckinggorgeousteachers.com">dMoney Fingerfuckinggorgeousteachers 184425 Szh Tube2 Gallery 27c5c492 387889 2011 05 Costatas Silver Open Forum Part 2 Fingerfucking Gorgeous Teachers Titre affiché dans la barre du navigateur<br />
m s Http%3A%2F%2Fdvd.taiwan-sex.com%2F</a></body>
</html>