2. Les balises de type bloc
Les balises de type bloc
Balise Signification Exemple
Balise bloc mère du corps de la
<body> page, c'est le conteneur <body>...</body>
principal
<div> Conteneur de blocs <div>...</div>
<p> Paragraphe <p>to be<br />or not to be ?</p>
<h1> ... <h6> Titre de niveau 1 à 6 <h1>titre</h1>
<blockquote lang="fr" cite="De l'âme,
Aristote">
<blockquote> Marque une citation
Texte texte texte
</blockquote>
<pre>
Affiche exactement ce qu'on y to be
<pre>
mets (tabulations,sauts) or not to be
</pre>
<ul> ou <ol>
<li>Le XHTML est accessible</li>
Liste énumérative <ul> et liste
<ul>,<ol>,<li> <li>Le XHTML est bien
numérotée <ol>
structuré</li>
</ul> ou </ol>
<dl>
<dt>Développeur</dt>
<dd>Un développeur développe</dd>
<dl>,<dd>,<dt> Liste de définition
<dt>Web</dt>
<dd>Réseau maillé de serveurs</dd>
</dl>
<table border="1" width="90%"
height="300px">
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
<table>,<th>,<tr>,<td> Tableaux </tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</table>
<form action="form_action.asp"
method="get">
First name: <input type="text"
<fieldset>, <form> Formulaire interactif name="fname" /><br />
<input type="submit" value="Submit" /
>
</form>
<img src ="planets.gif" width="145"
height="126" alt="Planets"
usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape="rect"
<map> image réactive (nécessite <area>)
coords="0,0,82,126" href="sun.htm"
alt="Sun" />
<area shape="circle" coords="90,58,3"
href="mercur.htm" alt="Mercury" />
</map>
3. Liste des balises de type en-ligne
Liste des balises de type en-ligne
Balise Signification Exemple
<span> Conteneur enligne <span>texte</span>
<a> Liens <a href="url_destination" title="info">texte</a>
<img src="url_source" alt="texte alternatif"
<img /> Images
title="info"/>
<br /> Saut de ligne <br />
Mise en intonation du <em>texte important</em> , <strong>texte
<em>, <strong>
texte important2</strong>
<abbr>, <acronym>, Infobulle, citation
<acronym title="info">texte</acronym>
<cite>, <q>, <dfn> et définition
Suppression / ajout
<del>, <ins> <del>texte</del>
de texte
<kbd>, <code>,
Instruction et code <code>texte</code>
<samp>, <var>
<sub>, <sup> Indices et exposants <sup>texte</sup>
<object type="application/xshockwaveflash"
data="s.swf" width="" height="">
Animation multimédia
<object> <param name="movie" value="s.swf" />
embarquée
<param name="quality" value="high" />"
</object>
4. CSS 2
Les sélecteurs
● Identification : bal avec id="nom_id"
bal#nom_id { }
bal#nom_id
● Collectif : bal1,bal2 et bal3
bal1, bal2, bal3 { }
● Hiérarchie : bal3 dans bal2 dans bal1
bal1 bal2 bal3 { }
● Adjacent : bal2 directement derrière bal1
bal1 + bal2 { }
● Enfants : bal2 directement dans bal1
bal1 > bal2 { }
Typographie
Action Propriété Valeur Description
"Trebuchet MS", arial, applique les polices par ordre
Choix de la police fontfamily : décroissant ; mettre les noms avec
sansserif; espace entre ""
préférer em et % pour hériter des
Taille de la police fontsize : 10px; 1.2em; 90%; valeurs des éléments parents
silver; #0033FF;
Couleur color :
transparent;
Orientation de la
fontstyle : normal; italic; oblique;
police
Epaisseur fontweight : bold; bolder; normal;
none; underline;
Soulignement textdecoration :
overline; linethrough;
none; capitalize; capitalize: première lettre
Mise en majuscule texttransform : uniquement.
uppercase; lowercase;
left; right; center;
Alignement du texte textalign :
justify;
normal; 1.2em; 90%;
Hauteur de ligne lineheight :
10px;
Espacement entre les
letterspacing : normal; 2px;
lettres
Espacement entre les
wordspacing : normal; 3px;
mots
fontstyle, fontvariant, font
Raccourci font : weight, fontsize/lineheight, p { font: bold 12px/24px verdana }
fontfamily
5. Arrières plans
Action Propriété Valeur Notes
Couleur d'arrièreplan backgroundcolor : "#RRGGBB";
Image d'arrièreplan backgroundimage : url(http://url);
Répétition de l'arrière repeat; repeatx;
backgroundrepeat :
plan repeaty; norepeat;
Spécifie si l'image
reste fixe avec les backgroundattachment : scroll; fixed;
déplacements de l'écran
Position de l'image par possibilité
top; middle; bottom;
rapport au coin backgroundposition : d'indiquer des
left; center; right;
supérieur gauche pixels
#000000 url(test.jpg)
Raccourci global vers
background : norepeat scroll center
les propriétés des AP
top;
Marges
Description Propriété Exemple
Marge supérieure margintop : 5px;
Marge de droite marginright : 0.5em;
Marge inférieure marginbottom : 2pt;
Marge de gauche marginleft : 0;
5px 0.5em 2pt 0; auto;
Raccourci pour les marges margin : (alignement centré du
bloc)
Espace intérieur entre
l'élément et la bordure paddingtop : 3px;
supérieure
Espace intérieur entre
l'élément et la bordure paddingright : 0.25em;
droite
Espace intérieur entre
l'élément et la bordure paddingbottom : 0;
inférieure
Espace intérieur entre
l'élément et la bordure paddingleft : 2pt;
gauche
Raccourci vers l'ensemble
des propriétés d'espace padding : 3px 0.25em 0 2pt;
intérieur
6. Bordures
Description Propriété Valeur
border[top left bottom
Epaisseur de la bordure 10px; 2em;
right]width :
Epaisseur de la bordure borderwidth : 10px 15px 15px 10px; (HDBG)
border[top left bottom
Couleur de la bordure #RRGGBB;
right]color :
solid; (pleine) dashed; (en
border[top left bottom tirets) dotted; (en pointillés)
Style de la bordure
right]style : double; (double) ridge; inset;
outset; (en 3D)
10px; 2em;
Effet arrondi (Mozzilla) mozborderradius :
10px 10px 10px 10px; (HDBG)
Raccourci global les propriétés border: 1px 0 0 2px dotted
border :
de bordure green;
Position
Description Propriété Valeur
none; (n'affiche pas le bloc) block;
(force la propriété bloc) inline; (force la
Propriétés display : propriété enligne) listitem; (force la
propriété enligne) table; (force la propriété
tableau)
visible; hidden; (cache l'élément mais réserve un
Affichage visibility :
espace pour son affichage)
static; (default dans le flux) relative;
Position position : (décalage dans le flux) absolute; (fixe hors
du flux) fixed; (fixe hors du flux – noscroll)
top : / right : /
Distance au parent 10px; 30%; 2em; (pas pour static)
bottom : / left :
Profondeur d'affichage
zindex : auto; 1000;
(calque)
Positionnement flottant float : left; right; none; (default)
Efface le flottement clear : left; right; both; none; (default)
7. Listes
Action Propriété Valeur
decimal, upperroman,
Type de puces et de
liststyletype : lowerlatin, disc,
numérotation
circle, square ou none
Permet de personnaliser
liststyleimage : url(image.png);
les puces avec une image
Spécifie le retrait des
liststyleposition : inside; outside;
puces
Raccourci global vers
les propriétés des liststyle : type position url();
listes
Curseurs
Action Propriété Valeur
default, pointer,
Apparence du curseur cursor : crosshair, help, wait,
text, move
8. Blocs Flux de document Marges
BORDER
MARGIN margin top
texte texte texte texte texte texte texte texte texte
PADDING margin
texte texte texte texte texte texte texte texte texte left
texte texte texte texte texte texte texte texte texte
left bloc A (marges)
top
HEIGHT
texte texte texte texte texte texte texte texte texte
texte texte texte texte texte texte texte texte texte
texte texte texte texte texte texte texte texte texte
texte texte texte texte texte texte texte texte texte bloc A (marges + relatif)
texte texte texte texte texte texte texte texte texte
WIDTH
texte texte texte texte texte texte texte texte texte
texte texte texte texte texte texte texte texte texte parent
texte texte texte texte texte texte texte texte texte bloc B
texte texte texte texte texte texte texte texte texte
PADDING
MARGIN
bloc A bloc C bloc A bloc C
{ width : { width : { width : 60% ; { width :
200px ; 200px ; float: left; } 40% ;
float: left; } float: right; } float:
right; }
bloc B
{ width : 100% ; }
bloc B
{ width : 100% ;
clear: both; }
parent
top bloc B bloc B
top
{ width : 100% ;} { width : 100% ;}
bloc A bloc A
{ position : absolute; { position : fixed;
left left : 20px; top : 20 bloc C left left : 20px; top : 20 bloc C
px; } { width : 100% ;} px; } { width : 100% ;}
