HTML 4 avec XHTML et CSS (chap.11-15)

Elizabeth Castro
HTML 4 avec XHTML et CSS
Trad. Bernard Jolivalt
Ed. CampusPress, coll. Le Programmeur, 2006

Précédemment :
Notes sur les chapitres 1 à 5 – 6 à 10

Aux suivants !

Chapitre 11 / Mettre en page avec des styles

Ecrire les éléments div dans un ordre logique, contrôler leur disposition avec les styles.

.cache {display: none; } : empêche l’affichage des éléments de classe « cache ».
.invisible {visibility: hidden; } : affiche un espace vide à la place des éléments de classe « invisible ».
.bloc {display: block; } : transforme en blocs les éléments en ligne de classe « bloc ».
.liste {display: list-item; } : transforme en listes les éléments en ligne de classe « liste ».
div#id {position: absolute; left: 25%; } : décale la gauche de l’élément div dont l’identifiant est « id » à 25% de la largeur du navigateur.
.superieur {position: relative; top: -10px; } : décale les éléments de classe « superieur » de 10 pixels vers le haut, sans affecter les autres éléments.

Arrière-plan :
body {
background-color: red;
background-image: url(image.gif);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left; }
=
body {background: red url(image.gif) repeat-x fixed top left; }

Bordures :
div.class {
border-width: 5px;
border-bottom-width: 10px;
border-style: solid[none/dotted/dashed...];
border-color: black; }
=
div.class {
border: 5px solid black;
border-bottom: 10px; }
=
div.class {
border: solid #000000;
border-width: 5px 5px 10px 5px; }

Espacement (entre le contenu d’un élément et ses bordures) :
div.class {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 2px; }
=
div.class {padding: 10px 5px 20px 2px; }

Marges (entre un élément et les autres) :
div.class {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 2px; }
=
div.class {margin: 10px 5px 20px 2px; }

Empilement :
div#derriere {z-index: 25; }
div#devant {z-index: 500; }
=> L’élément dont la valeur du z-index est plus élevée s’affichera devant l’autre élément.

Débordement :
div#id {width: 100px; height: 150px; overflow: auto; }
=> Si le contenu de l’élément ne peut s’afficher entièrement dans les dimensions indiquées, des barres de défilement apparaîtront.

Flottement :
XHTML :
<div id= »id1″></div>
<div id= »id2″></div> Texte
CSS (1) :
div#id1 {float: right; }
div#id2 {float: right; }
=> L’élément div dont l’identifiant est « id1″ flottera à droite de l’élément div dont l’identifiant est « id2″ qui flottera à droite du texte.
CSS (2) :
div#id1 {float: right; }
div#id2 {float: right; clear: right; }
=> L’élément div dont l’identifiant est « id2″ flottera à droite, sous l’élément div dont l’identifiant est « id1″ qui flottera à droite du texte.

Chapitre 12 / Des feuilles de style pour l’impression

Feuilles de style selon le support :
<link rel=”stylesheet” media= »screen » type=”text/css” href=”screen.css” />
<link rel=”stylesheet” media= »print » type=”text/css” href=”print.css” />
<link rel=”stylesheet” media= »handheld » type=”text/css” href=”handheld.css” />

Pour l’impression :
- Utiliser des tailles de police mesurées en points (pt) ;
- Eviter veuves et orphelins : {widows: 3; orphans: 3; } ;
- Masquer les parties indésirables avec {display: none; } ;
- Supprimer l’arrière-plan ;
- Utiliser des couleurs qui passent bien en N&B.

Chapitre 13 / Les listes

Liste non numérotée :
<ul>
<li>1er item</lI>
<li>2ème item</li>
</ul>

Liste numérotée :
<ol start= »5″>
<li>5ème item</lI>
<li>6ème item</li>
</ol>

Liste de définitions :
<dl>
<dt>1er terme</dt>
<dd>1ère définition</dd>
<dt>2ème terme</dt>
<dd>2ème définition</dd>
</dl>

Marqueurs de liste :
li {list-style-type: disc[none/circle/square/decimal/upper-alpha/lower-alpha/upper-roman/lower-roman; }
li {list-style-image: url(http://www.site.org/img/puce.gif); }

Marqueurs de listes numérotées imbriquées :
ol li {list-style-type: upper-roman; }
ol ol li {list-style-type: upper-alpha; }
ol ol li {list-style-type: decimal; }
ol ol ol li {list-style-type: lower-alpha; }

Chapitre 14 / Les tableaux

Centrer un tableau en XHTML (attribut désapprouvé) :
<table align= »center »>
<tbody>
<tr><td>&nbsp;</td></tr>
</tbody>
</table>

Centrer un bloc en CSS (à partir d’IE6) :
{margin-right: auto; margin-left: auto; }

Aligner le contenu d’un tableau en XHTML (attributs valides) :
<table>
<tbody>
<tr align= »left » valign= »top »><td>&nbsp;</td></tr>
</tbody>
</table>

Aligner le contenu d’un bloc en CSS :
div.class {text-align: justify; vertical-align: top;}

Chapitre 15 / Les cadres

Cadre flottant à droite :
iframe.classe {float: right; }
<iframe src= »page.html » name= »nom » width= »200px » height= »300px » scrolling= »auto » border= »0″ frameborder= »0″ class= »classe »>
Texte alternatif
</iframe>
Texte à afficher à gauche de l’iframe

Contenu incorporé sans cadre (IE6 ajoute des barres de défilement) :
<object type= »text/html » data= »page.html » width= »200px » height= »300px »>Texte alternatif</object>

Types MIME :
http://www.iana.org/assignments/media-types/

(To be continued…)

HTML 4 avec XHTML et CSS (chap.06-10)

Elizabeth Castro
HTML 4 avec XHTML et CSS
Trad. Bernard Jolivalt
Ed. CampusPress, coll. Le Programmeur, 2006

Précédemment :
Notes sur les chapitres 1 à 5

Aux suivants !

Chapitre 6 / Utiliser les images

Utiliser les CSS pour préciser la largeur de la bordure autour des images.

Pour faire flotter une image :
- <img src= »image.jpg » align= »left » />Texte : image flottant à gauche du texte ;
- <img src= »image.jpg » align= »right » />Texte : image flottant à droite du texte ;
- Utiliser de préférence les CSS.

<img src= »image.jpg » width= »50% » /> : l’image aura à l’affichage une largeur équivalente à la moitié de la largeur de l’élément dans lequel l’image est insérée.

Chapitre 7 / Les liens hypertexte

Le lien <a href= »#abc »>Texte</a> dirige au niveau de :
- L’ancre <a name= »abc »>Texte éventuel</a> ;
- Un élément tel que <div id= »abc »>Contenu</div> dont l’identifiant est « abc ».

URL intégrant des données de connexion au contenu d’un dossier FTP :
<a href= »login:password@ftp://ftp.site.org/dossier »>Texte</a>

Abréviations :
href : hypertext reference

Chapitre 8 / Créer des styles

- div.class {color: red; } s’appliquera aux éléments div de classe « class » ;
- div#id {color: red; } s’appliquera à l’élément div dont l’identifiant est « id » ;
- .class {color: red; } s’appliquera aux éléments de classe « class » ;
- #id {color: red; } s’appliquera à l’élément dont l’identifiant est « id » ;
- p em {color: red; } s’appliquera aux éléments em situés à l’intérieur des éléments p ;
- div#id p {color: red; } s’appliquera aux éléments p situés à l’intérieur de l’élément div dont l’identifiant est « id » ;
- p:first-letter {color: red; } s’appliquera à la première lettre des éléments p ;
- p:first-line {color: red; } s’appliquera à la première ligne des éléments p ;
- h1,h2 {color: red; } s’appliquera aux élements h1 et h2.

Le caractère * peut substituer le nom d’un élément.

Style des liens selon leur état :
a:link {color: red; text-decoration: none; }
a:visited {color: red; text-decoration: none; }
a:hover {color: red; text-decoration: underline; }
a:hover.current {color: red; text-decoration: none; cursor: default; }
a:active {color: red; text-decoration: underline; }
a:active.current {color: red; text-decoration: none; cursor: default; }

Chapitre 9 / Appliquer des styles

Feuille de style externe :
<head>
<title>Site – Titre</title>
<link rel= »stylesheet » type= »text/css » href= »css.css » />
</head>

Feuille de style interne :
<head>
<title>Site – Titre</title>
<style type= »text/css »>
<!–
body {color: blue; }
–>
</style>
</head>

Feuille de style importée :
<head>
<title>Site – Titre</title>
<style>
@import « css.css »;
</style>
</head>

Styles locaux :
<img src= »image.jpg » style= »color: red; border: solid » />

Commentaires dans une feuille de style :
/* Corps du texte en bleu */
body {color: blue; }

Chapitre 10 / Mettre en forme avec des styles

body {background: url(fond.gif) fixed; font-family: Arial, « Trebuchet MS », Verdana, sans-serif; }
h1 {font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 5px; color: blue; }
h2 {font-size: 20px; font-weight: bold; font-variant: small-caps; letter-spacing: 5px; color: blue; }
p {font-size: 12px; color: #000000; text-align: justify; text-indent: 15px; }
.italique {font-style: italic; }
.gras {font-weight: bold; }
.barre {text-decoration: line-through; }

(To be continued…)

HTML 4 avec XHTML et CSS (chap.01-05)

Bien. Nous sommes le jeudi 13 novembre, il est 8h30 et j’ai un peu de temps devant moi. Quelques jours, pour commencer. Il s’agit d’avancer en repartant sur des bases solides. Donc de les cimenter sans plus et plus attendre. Je m’y attelle. Ce bloc-notes voudra peut-être m’accompagner ?

Première étape :

Elizabeth Castro
HTML 4 avec XHTML et CSS
Trad. Bernard Jolivalt
Ed. CampusPress, coll. Le Programmeur, 2006

Soit ici, un certain nombre de points relevés en chemin contre l’oubli ou les mauvaises habitudes.

Chapitre 1 / Les blocs de construction d’une page web

Fermer la balise des éléments vides de contenu textuel.
Ex : <img src= »image.jpg » /> ou <br />

Utiliser comme valeur des attributs sans valeur le nom de ces attributs.
Ex : <hr noshade= »noshade » />

Préférer les valeurs de longueur relatives :
- 2em = le double de la taille de la police de l’élément ou de l’élément parent ;
- 50% = la moitié de la taille de la police de l’élément ou de l’élément parent ;
- line-height: 1,5 : l’interligne sera d’une fois et demie la taille de la police ;
- px : unité liée à la résolution de l’écran ;
- pt, mm, cm : unités absolues.

Préférer les URL relatives aux URL absolues :
- <a href= »fichier.html »>lien</a> si le fichier à appeler se trouve au même niveau que le fichier où est placé le lien ;
- <a href= »dossier/fichier.html »>lien</a> si le fichier à appeler se trouve dans un dossier enfant du dossier parent du fichier où est placé le lien ;
- <a href= »../dossier/fichier.html »>lien</a> si le fichier à appeler se trouve dans un dossier de niveau supérieur ;
- <a href= »../../dossier/fichier.html »>lien</a> si le fichier à appeler se trouve dans un dossier de niveau encore supérieur ;
- Dans les feuilles de style : background: url(« fond.jpg »);

Abréviations :
CSS : Cascading Style Sheet
FTP : File Transfert Protocol
HTTP : HyperText Transfert Protocol
URL : Uniform Ressource Locator
XHTML : Extensible HyperText Markup Language

Chapitre 2 / Les fichiers de pages web

Nommer « index » la page d’accueil par défaut (généralement, ou « default » sur un serveur Microsoft).

Placer une page par défaut dans chaque dossier dont on ne souhaite pas afficher la liste des éléments.

Chapitre 3 / La structure (X)HTML de base

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//FR » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » lang= »fr »>
<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″ />
<title>Site – Titre</title>
</head>
<body>
<div id= »article »>
<h1>Titre de niveau 1</h1>
<div id= »introduction »>
<p id= »chapeau »>Paragraphe 1</p>
<p class= »important »>Paragraphe 2</p>
</div>
<div id= »developpement »>
<!– ci-dessous le corps de l’article –>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<p>Texte <span class= »imptxt »>texte important</span> texte.</p>
<p>Ligne 1<br />
Ligne 2</p>
(…)
</div>
</div>
</body>
</html>

http://www.site.org/fichier.html#developpement pointe vers <div id= »developpement »>

Chapitre 4 / La mise en forme de base du (X)HTML

Gras :<b>Texte en gras</b> ou <strong>Texte en gras</strong>
Italique : <i>Texte en italique</i> ou <em>Texte en italique</em>
Barré : <del>Texte barré</del>
Lignes de code : <code>Code</code>
Citation : <blockquote>Citation</blockquote>

Chapitre 5 / Créer des images pour le web

Pour afficher progressivement une image de grande taille, choisir GIF entrelacé ou JPEG progressif.

(To be continued…)