01 Generalites XHTML PDF

Développement de site web
L. GARNIER
L1 Info1B
L. GARNIER xhtml-css L1 Info1B. 1 / 86

Plan
1 Introduction
2 Un peu de style CSS
Les couleurs
Mise en forme du texte
Image de fond
Les pseudo-formats
3 Les listes
Les listes de définitions
Liste à puces
4 Les compteurs
5 Les tableaux
Les tableaux standards
Marges intérieures et extérieures
Fusion(s) de cellules
Les grands tableaux
6 Structuration d’une page xHTML
7 Les formulaires
Introduction
Plan
1 Introduction
Les couleurs
Image de fond
Les pseudo-formats
3 Les listes
Liste à puces
4 Les compteurs
5 Les tableaux
Les grands tableaux
7 Les formulaires
[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/sha
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe
quelle salle de l’I.E.M.

Introduction
Salles I.E.M.
http ://ufrsciencestech.u-
bourgogne.fr/licence1//Info1B_ConceptionDeSitesWeb/

Introduction
Salles I.E.M.
Editeur : bluefish lancé par $ bluefish &

Introduction
Salles I.E.M.
Navigateur : firefox (iceweasel), chrome, opera...
Exemple de fichiers Bluefish et CSS

Introduction
Salles I.E.M.
Navigateur : firefox (iceweasel), chrome, opera...
Exemple de fichiers Bluefish et CSS
Dans les noms de fichiers et de

répertoires, pas d’espace, pas
d’accents.
Introduction
Le répertoire private_html
Dépôt du projet personnel (seul ou en binôme) au format zip
ou tar.gz ou tgz dans le répertoire private_html

Introduction
Le répertoire public_html qui doit être accessible en Lecture/Execution pour

tout le monde. La commande à lancer sous Linux :
$ chmod -R a+rx public_html/

Introduction

Vous devez également donner le droit d’éxécution à tout le monde sur votre
répertoire personnel. La commande est la suivante sous Linux dans votre
répertoire personnel : $ chmod o+x . (le point fait parti de la syntaxe)
Merci à Philippe Cavret

Introduction

Site internet de l’I.E.M.

bourgogne.fr/licence1/Info1B_ConceptionDeSitesWeb/

Introduction

Site internet de l’I.E.M.

bourgogne.fr/licence1/Info1B_ConceptionDeSitesWeb/
http ://ufrsciencestech.u-bourgogne.fr/~garnier/
Introduction
Chemin absolu ou chemin relatif
Chemins absolus
/home/lionel/info12/tp1
/home/lionel/info12/tp1/html

Introduction
Chemins absolus Chemins relatif

/home/lionel/info12/tp1 aucun sens
/home/lionel/info12/tp1/html

Introduction

/home/lionel/info12/tp1/html Depuis html pour aller dans css
../css
Depuis tp2 pour aller dans css
../tp1/css

Introduction

/home/lionel/info12/tp1/html Depuis html pour aller dans css
../css
Depuis tp2 pour aller dans css
../tp1/css
Que des chemins relatifs, aucun chemin absolu

Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)

HTML = HyperText Markup Language

Introduction

XHTML = HTML + XML (Extensible HyperText Markup Language = langage

de marquage hypertexte extensible)

Introduction


Validation des pages HTML

http://validator.w3.org/
http://html5.validator.nu/
http ://www.wave.webaim.org/wave/index.jsp

Introduction



Validation des feuilles de styles
http://www.css-validator.org/

Introduction



Validation des feuilles de styles
http://www.css-validator.org/
Quelques liens utiles
http://www.la-grange.net/w3c/html4.01/cover.html
http://www.alsacreations.com/
http://openweb.eu.org/
http://www.w3schools.com/
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag en
anglais) écrites en minuscule
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
<?xml version="1.0" encoding="UTF-8"?>

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
<head>

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
<head>
<title>Ma premiere page XHTML </title>

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
<head>
</head>

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
<head>
</head>
<body>

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
<head>
</head>
<body>
Partie visible dans le navigateur
</body>

Introduction
En-tête xhtml
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿

<!DOCTYPE html
<head>
</head>
<body>
</body>
</html>

Introduction
Types de balises
Définition (balises ouvrante et fermante )

Une balise ouvrante est de la forme <syntaxe> tandis que sa balise
fermante est </syntaxe>.

Introduction
Types de balises

<body>
</body>
Définition (balise auto-fermante )
Certaines balises ne vont pas par deux, la syntaxe est <syntaxe />.

Introduction
Types de balises

<body>
</body>
Définition (balise auto-fermante )
Certaines balises ne vont pas par deux, la syntaxe est <syntaxe />.
Placée entre <head> et </head>, la syntaxe :

<link rel="stylesheet" type="text/css" href="chemin" />
permet de définir l’emplacement de la feuille de style (css)

Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )

Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.

Introduction

bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre

Introduction

bloc.
<h1> Titre le plus gros possible </h1>

Introduction

bloc.
<h6> Titre le plus petit possible </h6>

Introduction

bloc.
• les balises de paragraphe

Introduction

bloc.
<p> Je suis un paragraphe </p>

Introduction

bloc.
• la balise générique

Introduction

bloc.
<div> </div>

Introduction

bloc.
<div> </div>
• la balise adresse

Introduction

bloc.
<div> </div>
<address> </address>

Introduction

bloc.
<div> </div>
• la balise de citation (version bloc)

Introduction

bloc.
<div> </div>
• la balise de citation (version bloc)
<blockquote><p>...</p></blockquote>

Introduction
Les balises en ligne (inline)

Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.

Introduction

Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte

Introduction

<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>

Introduction

• la balise de mise en évidence

Introduction

<strong>...</strong>

Introduction


Introduction

<span> </span>

Introduction

<span> </span>
• la balise de citation (version en ligne)

Introduction

<span> </span>
<p>...<q>...</q>...</p>
• la balise de citation de titre ou d’événement

Introduction

<span> </span>
<p>...<q>...</q>...</p>
<p>...<cite>...</cite>...</p>

Introduction

<span> </span>
<p>...<q>...</q>...</p>
<p>...<cite>...</cite>...</p>
Les balises contenant em, i, sub et sup sont interdites dans

le fichier html =⇒ CSS

Un peu de style CSS
Plan
1 Introduction
Les couleurs
Image de fond
Les pseudo-formats
3 Les listes
Liste à puces
4 Les compteurs
5 Les tableaux
Les grands tableaux
7 Les formulaires
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N − {0; 1}. Les chiffres sont les
éléments de
{0; 1; · · · ; b − 1}

L’hexadécimal
éléments de
{0; 1; · · · ; b − 1}
et si nous ajoutons 1 au dernier chiffre b − 1, nous obtenons le nombre 10.

L’hexadécimal
éléments de
{0; 1; · · · ; b − 1}
• En base 10, les chiffres sont {0; 1; 2; 3; 4; 5; 6; 7; 8; 9} et 9 + 1 = 10

L’hexadécimal
éléments de
{0; 1; · · · ; b − 1}

• En base 2, les chiffres sont {0; 1} et 1 + 1 = 10

L’hexadécimal
éléments de
{0; 1; · · · ; b − 1}

• En base 16, les chiffres sont 0; 1; 2; 3; 4; 5; 6; 7; 8; 9; A; B; C; D; E; F et

F + 1 = 10

L’hexadécimal
éléments de
{0; 1; · · · ; b − 1}


F + 1 = 10
Définition (octet)
Un octet est la réunion de 8 bits. Les valeurs prises sont entre 0 et
28 − 1 = 255.

L’hexadécimal
éléments de
{0; 1; · · · ; b − 1}


F + 1 = 10
Définition (octet)
Un octet est la réunion de 8 bits. Les valeurs prises sont entre 0 et
28 − 1 = 255.
2
28 = 24×2 = 24 = 162
En hexadécimal, les valeurs prises sont entre 00 et FF
Les couleurs
• Couleurs prédéfinies :
blanc, noir, rouge, bleu, vert, jaune ...
http://zone47.com/xhtml/couleurs.php

Les couleurs
A écrire en français évidemment
• Couleurs en hexadécimal :#RRGGBB
#000000 #FF0000 #00A000 #A0A0A0 #FFFF00 #00FFFF

#000000 #FF0000 #00A000 #A0A0A0 #FFFF00 #00FFFF
#FFFFFF #00FF00 #0000FF #404040 #FF6000 #FF00FF


Les couleurs
#000000 #FF0000 #00A000 #A0A0A0 #FFFF00 #00FFFF

#000000 #FF0000 #00A000 #A0A0A0 #FFFF00 #00FFFF

http://fr.wikipedia.org/wiki/Liste_de_couleurs

Les couleurs
#000000 #FF0000 #00A000 #A0A0A0 #FFFF00 #00FFFF

#000000 #FF0000 #00A000 #A0A0A0 #FFFF00 #00FFFF

http://fr.wikipedia.org/wiki/Liste_de_couleurs
Logiciel Gimp et utilisation de la pipette

Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :

Les accents
• grave; pour un accent grave

Les accents
• acute; pour un accent aigu

Les accents
• circ; pour un accent circonflexe

Les accents
• uml; pour un tréma

Les accents
• cedil; pour une cédille

Les accents
é : é

Les accents
é : é
è : è

Les accents
é : é à : à
è : è

Les accents
é : é à : à
è : è î : î

Les accents
é : é à : à ü : ü

è : è î : î

Les accents
é : é à : à ü : ü

è : è î : î ç : ç

Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig;

Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig;
d’ : €
Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig; < : <

d’ : €
Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig; < : <

d’ : € > : >
Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig; < : < « : «

d’ : € > : >
Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig; < : < « : «

d’ : € > : > » : »
Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig; < : < « : « l’ : &copie;

d’ : € > : > » : »
Les accents
é : é à : à ü : ü

è : è î : î ç : ç
œ : &oelig; < : < « : « l’ : &copie;

d’ : € > : > » : » ř : °
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.

}
HTML : <h1> Alignement à droite </h1>

}
<h4> Alignement au centre </h4>

}
CSS : h1{text-align:right; }

}
h4{text-align:center; }

}
Exemple d’alignements

}
Exemple d’alignements
Valeur par défaut : left

Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :

Alignement vertical
• top
top : le contenu de la cellule est calé en haut de celle-ci

Alignement vertical
• top
• bottom

bottom : le contenu de la cellule est calé en bas de celle-ci

Alignement vertical
• top
• bottom
• baseline
par défaut, baseline : positionnement normal de l’élément

Alignement vertical
• top • middle
• bottom
• baseline
middle : le milieu de l’élément est aligné sur le milieu de la ligne de texte

Alignement vertical
• top • middle
• bottom • sub
• baseline
sub : l’élément est mis en indice

Alignement vertical
• top • middle
• bottom • sub
• baseline • super
super : l’élément est mis en exposant

Alignement vertical
• top • middle • text-bottom
• bottom • sub
• baseline • super
text-top : le haut de l’élément est aligné sur le haut de la ligne de texte

Alignement vertical
• top • middle • text-bottom
• bottom • sub
• baseline • super • text-top
text-bottom : le bas de l’élément est aligné sur le bas de la ligne de texte

Alignement vertical
text-bottom : le bas de l’élément est aligné sur le bas de la ligne de texte
top
text-top
baseline
text-bottom
bottom

Unité de longueur
Unité relative
• em : taille de la police de caractère (caractère m)

Unité de longueur
Unité relative
• ex : taille du caractère x minuscule (’x’)

Unité de longueur
Unité relative
• px : taille d’un pixel

Unité de longueur
Unité relative
Unité absolue

Unité de longueur
Unité relative
Unité absolue
• cm : centimètres

Unité de longueur
Unité relative
Unité absolue
• mm : millimètres

Unité de longueur
Unité relative
Unité absolue
• pt : points (1 pt =0, 0352777 cm)

Unité de longueur
Unité relative
Unité absolue
• pt : points (1 pt =0, 0352777 cm)
Pourcentage de la valeur de l’élément parent

Famille de police
Définition (Famille de police)

Le type de la police à utiliser se fait par la syntaxe :
{font-family: valeur; }

Famille de police

• arial

Famille de police

• arial
• verdana

Famille de police

• arial • helvetica
• verdana

Famille de police

• arial • helvetica
• verdana • serif

Famille de police

• arial • helvetica • sans-serif

• verdana • serif

Famille de police

• arial • helvetica • sans-serif

• verdana • serif • monospace

Style de police
Définition (Style de police)

Le style de la police se fait par la syntaxe :
{font-style: valeur; }

Style de police


Style de police

• normal

Style de police

• normal • italic

Style de police

• normal • italic • oblique

Style de police

• normal • italic • oblique

normal est la valeur par défaut

Taille des polices
Définition (Taille de la police)

La taille de la police se fait par la syntaxe :
{font-size: valeur; }

Taille des polices

• xx-small

Taille des polices

• xx-small
• x-small

Taille des polices

• xx-small
• x-small
• small

Taille des polices

• xx-small
• x-small
• small
• medium

Taille des polices

• xx-small • large
• x-small
• small
• medium

Taille des polices

• x-small • x-large
• small
• medium

Taille des polices

• small • xx-large
• medium

Taille des polices

• medium • smaller
✿✿✿✿✿✿✿✿
Valeur relative
✿✿✿✿✿✿✿✿✿✿✿✿✿
smaller
✿✿✿✿✿✿✿✿
: plus petit que l’élément parent.

Taille des polices

• xx-small • large • larger

✿✿✿✿✿✿✿
✿✿✿✿✿✿✿✿
Valeurs relatives
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
✿✿✿✿✿✿✿

Taille des polices


✿✿✿✿✿✿✿
• x-small • x-large • inherit
✿✿✿✿✿✿✿✿
✿✿✿✿✿✿✿✿
Valeurs relatives
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
smaller
✿✿✿✿✿✿✿✿
larger
✿✿✿✿✿✿✿
: plus grand que l’élément parent.
inherit
✿✿✿✿✿✿✿✿
: de la taille de l’élément parent.

Taille des polices


✿✿✿✿✿✿✿
✿✿✿✿✿✿✿✿
• small • xx-large • longueur
✿✿✿✿✿✿✿✿

Taille des polices


✿✿✿✿✿✿✿
✿✿✿✿✿✿✿✿
✿✿✿✿✿✿✿✿
• %
✿✿✿✿✿
Valeurs relatives
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
smaller
✿✿✿✿✿✿✿✿
larger
✿✿✿✿✿✿✿
inherit
✿✿✿✿✿✿✿✿
%
✿✿✿✿✿
: pourcentage de la taille de l’élément parent.

Taille des polices


✿✿✿✿✿✿✿
✿✿✿✿✿✿✿✿
✿✿✿✿✿✿✿✿
• %
✿✿✿✿✿
Valeurs relatives
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
smaller
✿✿✿✿✿✿✿✿
larger
✿✿✿✿✿✿✿
inherit
✿✿✿✿✿✿✿✿
%
✿✿✿✿✿
: pourcentage de la taille de l’élément parent.
Exemple concernant la taille des polices

Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }

Poids des lettres
• normal

Poids des lettres
• normal • bold

Poids des lettres
• normal • bold • bolder

✿✿✿✿✿✿✿
Valeur relative
✿✿✿✿✿✿✿✿✿✿✿✿✿
bolder
✿✿✿✿✿✿✿
: plus gras que l’élément parent.

Poids des lettres

✿✿✿✿✿✿✿
• lighter
✿✿✿✿✿✿✿✿
Valeurs relatives
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
bolder
✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿✿
: moins gras que l’élément parent.

Poids des lettres

✿✿✿✿✿✿✿
• lighter
✿✿✿✿✿✿✿✿
Valeurs relatives
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
bolder
✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿✿
Il est aussi possible de spécifier un nombre qui est un multiple entier de 100.

Poids des lettres

✿✿✿✿✿✿✿
• lighter
✿✿✿✿✿✿✿✿
Valeurs relatives
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
bolder
✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿✿
Il est aussi possible de spécifier un nombre qui est un multiple entier de 100.
Exemple concernant le poids des polices

Espacement des lettres et mots
Définition (Espacement)
L’espacement des lettres se fait par la syntaxe :
{letter-spacing: valeur de l’espace ; }

L’espacement des mots se fait par la syntaxe :
{word-spacing: valeur de l’espace ; }

Exemple d’espacements de lettres et de mots

Trait horizontal :

Trait horizontal :
Balise <hr />, auto-fermante à placer hors des balises de blocs

<p> ...</p> ou autres.

Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }

• none
✿✿✿✿✿
none : rien
✿✿✿✿✿

• none
✿✿✿✿✿
• underline
none : rien
✿✿✿✿✿
underline : soulignement inférieur

• none
✿✿✿✿✿
• overline
• underline
none : rien
✿✿✿✿✿
overline : barre au-dessus du texte

• none
✿✿✿✿✿
• overline
• underline • line-through
none : rien
✿✿✿✿✿
line-through : texte barré

• none
✿✿✿✿✿
• overline
• underline • line-through
none : rien
✿✿✿✿✿
line-through : texte barré
Exemple de soulignement et autres

Identifiant et classe
Définition (Identifiant)
Un identifiant est utilisé une et une seule fois dans toute la page html et se fait
par la syntaxe :

par la syntaxe :
Dans le fichier html

id="nom"
où nom commence par une lettre

par la syntaxe :
Dans le fichier html Dans le fichier css

id="nom"
où nom commence par une lettre #nom {. . .}

par la syntaxe :

id="nom"
Définition (Classe)
Une classe peut-être utilisée plusieurs fois dans la page html et se fait par la
syntaxe :

par la syntaxe :

id="nom"
syntaxe :

class="nom"
où nom commence par une lettre

par la syntaxe :

id="nom"
syntaxe :

class="nom"
où nom commence par une lettre .nom {. . .}
Exemple de soulignement et autres

<h1>Text-décoration
</h1>

<h1>Text-décoration body{
</h1> font-weight: normal;
}

}
h1{text-align:center;
}

<p> }
h1{text-align:center;
}

<p> }
<span class="souligne"> h1{text-align:center;
Texte souligné }
</span> <br /><br />

<p> }
Texte souligné }
</span> <br /><br /> .souligne{
text-decoration:underline;
color:red;
}

<p> }
Texte souligné }
<span class="souligne"> text-decoration:underline;
Texte souligné color:red;
}

<p> }
Texte souligné }
<span class="defaut"> }
texte par défaut,

<p> }
Texte souligné }
texte par défaut, .defaut{
text-decoration: none;
color:green;
}

<p> }
Texte souligné }
<span id="nenni"> text-decoration: none;
QUE NENNI, color:green;
</span> }

<p> }
Texte souligné }
</span> }
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}
<p> }
Texte souligné }
</span> }
</span> #nenni{
font-size: larger;
color:magenta;
font-weight:900;
}
<p> }
Texte souligné }
</span> }
</span> #nenni{
texte toujours font-size: larger;
souligné color:magenta;
font-weight:900;
}
<p> }
Texte souligné }
</span> }
</span> #nenni{
</span> font-weight:900;
}
<p> }
Texte souligné }
</span> }
</span> #nenni{
</span> font-weight:900;
</p> }
Le texte non souligné l’est quand même : le span
<span class="souligne"> prend le dessus sur le span
<span class="defaut">.
.souligne{
text-decoration: none;
color:green;
}
</span>
texte toujours
souligné
</span>

Il est possible de simplifier le css en enlevant tous les span
<span class="souligne">, il y a deux solutions :

• il suffit de définir le style sur le paragraphe ce qui donne dans le css :
p{
color:red;
}

p{
color:red;
}
L’inconvénient est que tous les paragraphes auront ce style.

p{
color:red;
}
• il suffit de donner un identifiant au paragraphe ce qui donne dans le
fichier html :
<p id="pSouligne">

p{
color:red;
}
• il suffit de donner un identifiant au paragraphe ce qui donne dans le
fichier html :
<p id="pSouligne">
et dans le fichier css :
#pSouligne{
color:red;
}

Un peu de style CSS Image de fond
Body et image de fond

Pour définir une image de fond, il suffit d’écrire dans le fichier css :


body{
background-image:url("chemin_relatif");
}


body{
}
Exemple d’une image de fond jpeg
où le motif est :


body{
}
où le motif est :
Attention, deux extensions possibles : jpg et jpeg.


body{
}
où le motif est :

Exemple d’une image de fond gif


body{
}
Il est possible de répéter l’image ou non en ajoutant la syntaxe

background-repeat:valeur; où valeur peut valoir :
•
•
•
•


body{
}

• repeat
✿✿✿✿✿✿✿
pour une répétition de l’image, exemple ;
•
•
•


body{
}

• repeat
✿✿✿✿✿✿✿
• no-repeat pour aucune répétition de l’image, exemple ;
•
•


body{
}

• repeat
✿✿✿✿✿✿✿
• repeat-x pour une répétition horizontale de l’image, exemple ;
•


body{
}

• repeat
✿✿✿✿✿✿✿
• repeat-y pour une répétition verticale de l’image, exemple.


body{
}
repeat pour une répétition de l’image, exemple ;
• ✿✿✿✿✿✿✿
Il est possible de placer l’image dans la page en ajoutant la syntaxe

background-position:valeurg valeurh;


body{
}
• ✿✿✿✿✿✿✿

background-position:valeurg valeurh; où valeurg désigne la
position par rapport au côté gauche de la page


body{
}
• ✿✿✿✿✿✿✿

position par rapport au côté gauche de la page tandis que valeurh désigne
la position par rapport au haut de la page.


body{
}
• ✿✿✿✿✿✿✿

L’argument valeurg peut prendre les valeurs left, center ou right.


body{
}
• ✿✿✿✿✿✿✿

L’argument valeurh peut prendre les valeurs top, center ou bottom.


L’argument valeurh peut prendre les valeurs top, center ou bottom.
Il faut empêcher le déplacement de l’image avec le défilement de la page

en ajoutant : background-attachement:fixed; (la valeur par défaut est
scroll).
✿✿✿✿✿✿✿

body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}

body{
}
Exemple


body{
}
Exemple
Pour background-position , il est possible d’utiliser des pourcentages,

cm...


body{
}
Exemple

cm...
body{
background-position: 50% 25% ;
}


body{
}
Exemple

cm...
body{
background-position: 50% 25% ;
}
Exemple

Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :

Pseudo-format
Pour toutes les balises

Pseudo-format
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;

Pseudo-format
Pour les balises de lien hypertexte

Pseudo-format
• a:link
✿✿✿✿✿✿
permet de définir les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur n’a pas visité la page.
• a:active permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur clique dessus ;

Pseudo-format
• a:link
✿✿✿✿✿✿
• a:visited permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur a déjà visité la page ;

Pseudo-format
• a:link
✿✿✿✿✿✿
Pour les balises de lien hypertexte et de formulaire

Pseudo-format
• a:link
✿✿✿✿✿✿
Pour les balises de lien hypertexte et de formulaire
• b:focus permet de modifier les propriétés du style de la balise b
lorsque l’utilisateur clique dessus ou lorsque l’utilisateur utilise les
touches de tabulation pour se déplacer dans la page.
Les listes
Plan
1 Introduction
Les couleurs
Image de fond
Les pseudo-formats
3 Les listes
Liste à puces
4 Les compteurs
5 Les tableaux
Les grands tableaux
7 Les formulaires
Les listes
Types de listes
Il existe trois types de listes :

Les listes
Types de listes

• les listes de définitions ;
Exemple

Les listes
Types de listes

Exemple
• les listes ordonnées ;
Exemple

Les listes
Types de listes

Exemple
Exemple
• les listes non ordonnées ;
Exemple

Les listes
Types de listes

Exemple
Exemple
• les listes non ordonnées ;
Exemple
U NELISTE NE SE MET NI DANS UN TITRE NI DANS UN
PARAGRAPHE .

Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)

Une liste de définition est une énumération de style lexique.


La liste commence par <dl> et se termine par </dl>.


L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.


L’élément de définition se met entre <dd> et </dd>.
Exemple


Exemple
<h1> Liste de définition </h1>

<dl>


Exemple

<dl>
<dt>Football</dt>


Exemple

<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>


Exemple

<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>


Exemple

<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>


Exemple

<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu de balle</dd>


Exemple

<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu à 1 ou 2</dd>


Exemple

<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu à 1 ou 2</dd>
</dl>
Exemple de style avec une liste de définition
Exemple

Exemple
Partie HTML
<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>

Exemple
Partie HTML
<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>

Exemple
Partie HTML
<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>

Exemple
Partie HTML
<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>

Exemple
Partie HTML
<dl>
<dt>Football</dt>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>
Partie CSS
dt{
color: blue;
text-decoration: underline;
}

Exemple
Partie HTML dd{
<dl> background-color: black;
<dt>Football</dt> color: white;
<dd>Jeu de ballon</dd> }
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>
Partie CSS
dt{
color: blue;
}

Exemple
Partie HTML dd{
<dd>Jeu à 11</dd> #dd1{
<dt>Tennis</dt> color:yellow;
<dd id="dd1">Jeu de margin-right: 5cm;
balle</dd> margin-left: 5cm;
<dd id="dd2">Jeu à padding-left: 3cm;
1 ou 2</dd> border : solid green 0.1em;
}
</dl>
Partie CSS
dt{
color: blue;
}

Exemple
Partie HTML dd{
<dd>Jeu à 11</dd> #dd1{
<dt>Tennis</dt> color:yellow;
<dd id="dd1">Jeu de margin-right: 5cm;
balle</dd> margin-left: 5cm;
<dd id="dd2">Jeu à padding-left: 3cm;
1 ou 2</dd> border : solid green 0.1em;
}
</dl>
#dd2{
Partie CSS margin-left: 5cm;
dt{ width:150px;
color: blue; color:yellow;
text-decoration: underline; border : solid green 0.1em;
} }

Les listes Liste à puces
Définition de liste à puces, ul et ol
Définition (Liste à puces)

Une liste à puce peut être ordonnée ou non :


• une liste ordonnée commence par <ol> et se termine par </ol>.


• une liste non ordonnée commence par <ul> et se termine par </ul>.


Le texte qui suit une puce se met entre <li> et </li>.
Exemple de liste à puces non ordonnée


Le texte qui suit une puce se met entre <li> et </li>.
Exemple de liste à puces ordonnée

Exemple de liste non ordonnée
<h1> Liste non ordonnée </h1>

<p>Quelques sports de ballons</p>


<ul>


<ul>
<li>Football</li>


<ul>
<li>Football</li>
<li>Handball</li>
<li>Rugby</li>
<li>Basket-ball</li>


<ul>
<li>Football</li>
<li>Handball</li>
<li>Rugby</li>
<li>Basket-ball</li>
</ul>

Exemple de liste ordonnée

Partie HTML
<h1>Liste ordonnée</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
en 2016
</p>

Partie HTML
le plus de titre de
champion de France
en 2016
</p>
<ol>

Partie HTML
le plus de titre de
champion de France
en 2016
</p>
<ol>
<li>Saint-Etienne (10)</li>

Partie HTML
le plus de titre de
champion de France
en 2016
</p>
<ol>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>

Partie HTML <li>Lyon (7)

</li>
le plus de titre de
champion de France
en 2016
</p>
<ol>
<li>Nantes (8)</li>
<li>Monaco (7)</li>


</li>
<li>Bordeaux (6)</li>
le plus de titre de
champion de France
en 2016
</p>
<ol>
<li>Nantes (8)</li>
<li>Monaco (7)</li>


</li>
<li>Reims (6)
le plus de titre de
</li>
champion de France
<li>Paris (6)
en 2016
</li>
</p>
<ol>
<li>Nantes (8)</li>
<li>Monaco (7)</li>


</li>
<li>Reims (6)
le plus de titre de
</li>
champion de France
<li>Paris (6)
en 2016
</li>
</p>
</ol>
<ol>
<li>Nantes (8)</li>
<li>Monaco (7)</li>


</li>
<li>Reims (6)
le plus de titre de
</li>
champion de France
<li>Paris (6)
en 2016
</li>
</p>
</ol>
<ol>
<li>Saint-Etienne (10)</li> Partie CSS
<li>Marseille (9)</li> .pas{
<li>Nantes (8)</li> list-style-type: none;
<li>Monaco (7)</li> }

Partie HTML <li class="pas">Lyon (7)

</li>
<li class="pas">Reims (6)
le plus de titre de
</li>
champion de France
<li class="pas">Paris (6)
en 2016
</li>
</p>
</ol>
<ol>


</li>
le plus de titre de
</li>
champion de France
en 2016
</li>
</p>
</ol>
<ol>


</li>
le plus de titre de
</li>
champion de France
en 2016
</li>
</p>
</ol>
<ol>
Pour toute une liste, on applique le style list-style-type directement à

<ol> ou à <ul>.
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :

cas d’une liste non ordonnée

none =⇒ pas de puce ;


disc
✿✿✿✿✿
=⇒ disque noir ;


disc
✿✿✿✿✿
=⇒ disque noir ;
circle =⇒ cercle noir ;


disc
✿✿✿✿✿
=⇒ disque noir ;
square =⇒ carré noir.
Listes à puces non ordonnées


disc
✿✿✿✿✿
=⇒ disque noir ;
cas d’une liste ordonnée
decimal
✿✿✿✿✿✿✿✿
=⇒ nombres entiers : 1, 2,
3... ;


disc
✿✿✿✿✿
=⇒ disque noir ;
decimal
✿✿✿✿✿✿✿✿
3... ;
decimal-leading-zero =⇒
nombres entiers avec deux chiffres
minimum : 01, 02, 03... ;

cas d’une liste non ordonnée upper-roman =⇒ nombres romains

en majuscule : I, II, III... ;
disc
✿✿✿✿✿
=⇒ disque noir ;
decimal
✿✿✿✿✿✿✿✿
3... ;
minimum : 01, 02, 03... ;


disc =⇒ disque noir ; lower-roman =⇒ nombres romains
✿✿✿✿✿
circle =⇒ cercle noir ; en minuscule : i, ii, iii... ;
decimal
✿✿✿✿✿✿✿✿
3... ;
minimum : 01, 02, 03... ;


✿✿✿✿✿
upper-alpha ou upper-latin =⇒
lettres majuscules : A, B, C... ;
decimal
✿✿✿✿✿✿✿✿
3... ;
minimum : 01, 02, 03... ;


✿✿✿✿✿
Listes à puces non ordonnées lower-alpha ou lower-latin=⇒
cas d’une liste ordonnée lettres minuscules : a, b, c... ;
decimal
✿✿✿✿✿✿✿✿
3... ;
minimum : 01, 02, 03... ;


✿✿✿✿✿
Listes à puces non ordonnées lower-alpha ou lower-latin=⇒
cas d’une liste ordonnée lettres minuscules : a, b, c... ;
lower-greek =⇒ lettres grecques :
decimal
✿✿✿✿✿✿✿✿
=⇒ nombres entiers : 1, 2, α, β, γ...
3... ;
decimal-leading-zero =⇒ Listes à puces ordonnées
minimum : 01, 02, 03... ;

Une image comme puce dans une liste

Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée


Syntaxe HTML
<ul>
<li>Le 1er septembre 1939,
la guerre commence


Syntaxe HTML
<ul>
la guerre commence
<ul>


Syntaxe HTML
<ul>
la guerre commence
<ul>
<li>en France</li>


Syntaxe HTML
<ul>
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>


Syntaxe HTML
<ul>
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>


Syntaxe HTML
<ul>
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>


Syntaxe HTML
<ul>
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le


Syntaxe HTML
<ul>
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
l’armistice le
<ul>


Syntaxe HTML <li>le 1er mai 1940</li>

<ul>
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
l’armistice le
<ul>



<ul> <li>le 17 juin 1940</li>
<li>Le 1er septembre 1939, </ul>
la guerre commence </li>
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
l’armistice le
<ul>



<ul> </ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
l’armistice le
<ul>



<ul> </ul>
<li>en France</li> Syntaxe CSS
<li>en Pologne</li> ul{/*style de la premiere liste*/
</ul> list-style-image:url("Vert.gif");
</li> }
l’armistice le
<ul>



<ul> </ul>
<li>en France</li> Syntaxe CSS
<li>en Pologne</li> ul{/*style de la premiere liste*/
</ul> list-style-image:url("Vert.gif");
</li> }
<li>La France demande ul ul{/*style des sous-listes*/
l’armistice le list-style-image:url("Red.gif");
<ul> }


<!- -Commentaire dans un fichier html- ->

<ul> <!- -premiere liste- ->


<li> <!- -premiere puce de la premiere liste- ->


<ul> <!- -premiere sous-liste- ->


<li><!- -premiere puce- -></li>


<li><!- -seconde puce- -> </li>


</ul><!- -fin de la premiere sous-liste- ->


</li> <!- -fin de la premiere puce de la premiere liste- ->


<li><!- -seconde puce de la premiere liste- ->


<ul> <!- -seconde sous-liste- ->






</ul><!- -fin de la seconde sous-liste- ->


</li> <!- -fin de la seconde puce de la premiere liste- ->


</li> <!- -fin de la seconde puce de la premiere liste- ->
</ul> <!- -fin de la premiere liste- ->

Les compteurs
Plan
1 Introduction
Les couleurs
Image de fond
Les pseudo-formats
3 Les listes
Liste à puces
4 Les compteurs
5 Les tableaux
Les grands tableaux
7 Les formulaires
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aide

de compteurs.

Les compteurs
Définition

de compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :

Les compteurs
Définition

de compteurs.
ElementParent{

Les compteurs
Définition

de compteurs.
ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}

Les compteurs
Définition

de compteurs.
ElementParent{
}
2 La seconde étape consiste, dans l’élément contenant le compteur, à :
ElementContenantCompteur:before{

Les compteurs
Définition

de compteurs.
ElementParent{
}
• incrémenter le compteur
counter-increment: nomCompteur ValeurDIncrementation;

Les compteurs
Définition

de compteurs.
ElementParent{
}
• incrémenter le compteur
• définir le style et l’afficher
counter-increment: nomCompteur ValeurDIncrementation;
content: "Nom " counter(nomCompteur,StyleCompteur) ":";
}

Les compteurs
Conter un compteur de titre h1

Un compteur de titre h1

Les compteurs

body{

Les compteurs

body{
counter-reset : section -1;
}

Les compteurs

body{
}
h1:before{
counter-increment: section 2;

Les compteurs

body{
}
h1:before{
content : "Titre " counter(section,upper-roman) "/ " ;
}

Les compteurs

body{
}
h1:before{
}

Les compteurs

body{
}
h1:before{
}
body{
}
h1:before{

Les compteurs

body{
}
h1:before{
}
body{
}
h1:before{
content : "Section " counter(section,lower-greek) "." ;
}
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée

Les compteurs
<ol> <li>Pékin </li>

<li>Barcelone</li> <li>Londres </li>
<li>Atlanta </li> <li>Rio </li>
<li>Sydney </li> </ol>
<li>Athènes </li>

Les compteurs

<li>Athènes </li>
ol{

Les compteurs

<li>Athènes </li>
ol{
counter-reset : jeux 1988; /* 1992 − 4 = 1988*/

Les compteurs

<li>Athènes </li>
ol{
/*on enleve les puces avant li*/
list-style-type : none;

Les compteurs

<li>Athènes </li>
ol{
}
ol li:before{

Les compteurs

<li>Athènes </li>
ol{
}
ol li:before{
counter-increment : jeux 4 ;

Les compteurs

<li>Athènes </li>
ol{
}
ol li:before{
counter-increment : jeux 4 ;
/* par defaut, la numerotation est en decimal*/
content : "Olympiades " counter(jeux) " : " ;
}
Les compteurs
Conter des compteurs de listes ordonnées


Les compteurs

<ol class="ville1"> <li>Atlanta

<li>Barcelone <ol>
<ol> <li>Foot</li>
<li>basket</li> <li>judo</li>
<li>plongeon</li> </ol>
</ol> </li>
</li> </ol>

Les compteurs


<li>Barcelone <ol>
<ol> <li>Foot</li>
</ol> </li>
</li> </ol>
.ville1{
counter-reset : cpt1 0;
}

Les compteurs


<li>Barcelone <ol>
<ol> <li>Foot</li>
</ol> </li>
</li> </ol>
.ville1{ ol{
counter-reset : cpt1 0; counter-reset : cpt2 0;
list-style-type : none; list-style-type : none;
} }

Les compteurs


<li>Barcelone <ol>
<ol> <li>Foot</li>
</ol> </li>
</li> </ol>
.ville1{ ol{
} }
ol li:before{
counter-increment : cpt1 ;
content : "Ville " counter(cpt1,upper-roman) " : " ;
}

Les compteurs


<li>Barcelone <ol>
<ol> <li>Foot</li>
</ol> </li>
</li> </ol>
.ville1{ ol{
} }
ol li:before{
content : "Ville " counter(cpt1,upper-roman) " : " ;
}
ol li ol li:before{
content : "Epreuve " counter(cpt1,upper-roman) "."
counter(cpt2,lower-roman)" : " ;
}

Les tableaux
Plan
1 Introduction
Les couleurs
Image de fond
Les pseudo-formats
3 Les listes
Liste à puces
4 Les compteurs
5 Les tableaux
Les grands tableaux
7 Les formulaires
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau

Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.


Chaque ligne commence par <tr>, se termine par </tr> et contient au
moins une cellule.


moins une cellule.
Chaque cellule commence par <td> et se termine par </td>.


moins une cellule.
Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>
<tr>


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>
<tr>
<th>Je suis un titre de cellule</th>


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>
<tr>
</tr>


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>
<tr>
</tr>
<tr>


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>
<tr>
</tr>
<tr>
<td>Je suis une cellule</td>


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>
<tr>
</tr>
<tr>
</tr>


moins une cellule.
<th> et </th>.
Un pauvre tableau
<table>
<tr>
</tr>
<tr>
</tr>
</table>
Tableau et bordures
Par défaut, un tableau n’a pas de bordure =⇒ CSS
Un tableau à deux lignes et deux colonnes avec bordures

Tableau et bordures
HTML
<table>
<tr>
<th>Premier titre de cellule</th>
<th>Second titre de cellule</th>
</tr>
<tr>
</tr>
</table>

Tableau et bordures
HTML
<table>
<tr>
<th>Premier titre de cellule</th>
<th>Second titre de cellule</th>
</tr>
<tr>
</tr>
</table>
CSS
table{
border-style: solid;
}
Tableau et bordures

Tableau et bordures
td,th{
border-style: double; /*style des bordures, deux traits*/

Tableau et bordures
td,th{
border-color: red; /*couleur des bordures*/

Tableau et bordures
td,th{
border-width: 10px; /*epaisseur des bordures*/
}

Tableau et bordures
td,th{
}
table{
border-style: solid;/*style des bordures, un trait*/

Tableau et bordures
td,th{
}
table{
/*coller les bordures, par defaut separate*/
border-collapse: collapse;
}

Tableau et bordures
td,th{
}
table{
}
td,th{
border: 2px solid red ;
/*Regroupe les trois proprietes des bordures*/

Tableau et bordures
td,th{
}
table{
}
td,th{
border: 2px solid red ;
/*Regroupe les trois proprietes des bordures*/
border-collapse: collapse; /*coller les bordures*/
}
Valeur possible pour border-style

Un espace dans une page html s’effectue par la syntaxe .


Styles des bordures d’un tableau


Hormis pour border-collapse, les propriétés border-toto sont

applicables aux listes, puces, paragraphes, titres, div et span.
Bordures appliquées à d’autres éléments qu’un tableau



De plus, pour chaque propriété border-toto, il est possible de spécifier les

propriétés :
• à gauche via border-left-toto ;




propriétés :
• à droite via border-right-toto ;




propriétés :
• au-dessus via border-top-toto ;




propriétés :
• au-dessus via border-top-toto ;
• en bas via border-bottom-toto.
Sudoku

Les tableaux Marges intérieures et extérieures
Marges
Définition (Marges)
Les marges extérieures (resp. intérieures) se définissent par margin (resp.
padding).

Marges
padding).
Pour différencier les côtés, les marges extérieures (resp. intérieures) se
définissent par margin-cote (resp. padding-cote) où cote vaut soit
right, soit top, soit left, soit bottom.
Marges Marges sans CSS

Marges
padding).
<h1> Marges intérieures et extérieures </h1>

Marges
padding).

<hr />

Marges

<hr />
<div>
<hr />
</div>

Marges

<hr />
<div>
<table>
</table>
<hr />
</div>

Marges

<hr />
<div>
<table>
<tr>
</tr>
<tr>
</tr>
</table>
<hr />
</div>

Marges

<hr />
<div>
<table>
<tr>
<td class="cl1">padding-left : 1cm;</td>
<td class="cl1">padding-top: 3cm;</td>
</tr>
<tr>
<td class="cl2">padding-right: 2cm;</td>
<td class="cl2">padding-bottom: 3cm; </td>
</tr>
</table>
<hr />
</div>

Marges
Marges Marges sans CSS Etape 1
<h1> Marges intérieures h1 {

et extérieures </h1> border : 3px dashed red;
<hr /> margin-left: 10%;
padding-left: 20%;
padding-bottom: 1cm;
margin-bottom: 2cm;
}

Marges
<h1> Marges intérieures h1 {

et extérieures </h1> border : 3px dashed red;
<hr /> margin-left: 10%;
padding-left: 20%;
padding-bottom: 1cm;
margin-bottom: 2cm;
}
<h1> Marges intérieures div{

et extérieures </h1> border : 5px dashed green;
<hr /> padding-left: 50px;
<div> padding-top: 1cm;
<hr /> padding-right: 10px;
</div> padding-bottom: 2cm;
margin : 1cm;
}
Marges
<table> table{
<tr> border-collapse: collapse;
<td >p-left:1cm; border: 7px solid blue;
</td> font-size: 0.75cm;
<td >p-top:3cm; }
</td>
</tr>
<tr>
<td >p-right:2cm;
</td>
<td >p-bottom:3cm;
</td>
</tr>
</table>

Marges
<table> table{
<tr> border-collapse: collapse;
<td >p-left:1cm; border: 7px solid blue;
</td> font-size: 0.75cm;
<td >p-top:3cm; }
</td> td{
</tr> border: 7px dashed blue;
<tr> width: 12cm;
<td >p-right:2cm; }
</td>
<td >p-bottom:3cm;
</td>
</tr>
</table>

Marges
<table> td{
<tr> border: 7px dashed blue;
<td class="cl1" >p-left:1cm; width: 12cm;
</td> }
<td class="cl1" >p-top:3cm; .cl1{
</td> padding-left: 1cm;
</tr> padding-top: 3cm;
<tr> border-bottom-style: solid;
<td >p-right:2cm; }
</td>
<td >p-bottom:3cm;
</td>
</tr>
</table>

Marges
<table> td{
</td> }
<td class="cl2" >p-right:2cm; }
</td> .cl2{
<td class="cl2" >p-bottom:3cm; padding-right: 2cm;
</td> padding-bottom: 3cm;
</tr> border-top-style: solid;
</table> }

Marges
Marges Marges sans CSS Etape finale
<table> td{
</td> }
<td class="cl2" >p-right:2cm; }
</td> .cl2{
<td class="cl2" >p-bottom:3cm; padding-right: 2cm;
</td> padding-bottom: 3cm;
</tr> border-top-style: solid;
</table> /* pour padding-right*/
text-align: right;
}
Donner un titre à un tableau

Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>, juste après le
mot <table>.
Titre à un tableau


Définition (Titre)
mot <table>.
Titre à un tableau
La position du titre se fait par la syntaxe caption-side:valeur; où
valeur peut prendre comme valeur, soit top, ✿✿✿✿
soit bottom


Définition (Titre)
mot <table>.
Titre à un tableau
soit bottom
Titre en bas d’un tableau


Définition (Titre)
mot <table>.
Titre à un tableau
soit bottom
HTML
<table>
<caption>Statistisque sur les
genres</caption>
<tr>· · ·
</table>


Définition (Titre)
mot <table>.
Titre à un tableau
soit bottom
HTML CSS
<table>
<caption>Statistisque sur les caption{
genres</caption> caption-side: bottom;
<tr>· · · text-align: right;
</table> }

Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Définition (Fusion de cellules)

La fusion de deux cellules consécutives dans une même ligne (resp. colonne)
se fait par la syntaxe colspan="NbeDeCellulles" (resp.
rowspan="NbeDeCellulles").
Fusions de cellules dans un tableau



Une sélection de nos meilleurs vins
Chassagne-Montrachet En rupture
Volnay Bouteille de 75cl 19d’
Vin jaune 24d’
Vin de paille Bouteille de 37,5cl 25d’



Vin jaune 24d’
Première ligne : en-tête, fusion des trois cellules



Vin jaune 24d’
Deuxième ligne : fusion des deux dernières cellules



Vin jaune 24d’
Deuxième colonne : fusion des troisième et quatrième cellules


Fusions de cellules dans un tableau sans CSS


<table>
</table>


<table>
<caption>A boire avec
modération</caption>
</table>


<table>
<tr>
<th >Une
sélection de nos
meilleurs vins</th>
</tr>
</table>


<table>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
</table>


<table>
<tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</tr>
</table>


<table>
<tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
</tr>
</table>


<table>
<tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</td>
<td >En rupture
</td>
</tr>
</table>


<table>
<tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</td>
<td colspan="2" >En rupture
</td>
</tr>
</table>


<table>
<tr> </tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</td>
</td>
</tr>
<tr> </table>


<table>
<tr> </tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</td>
</td>
</tr>
<tr> </table>
<td>Volnay</td>


<table> <td >Bouteille
<caption>A boire avec de 75cl</td>
<tr> </tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</td>
</td>
</tr>
<tr> </table>
<td>Volnay</td>


<table> <td rowspan="2" >Bouteille
<tr> </tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</td>
</td>
</tr>
<tr> </table>
<td>Volnay</td>

modération</caption> <td>19- €</td>
<tr> </tr>
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</td>
</td>
</tr>
<tr> </table>
<td>Volnay</td>

<tr> </tr>
<th colspan="3" >Une <tr>
sélection de nos
meilleurs vins</th>
</tr> </tr>
<tr>
</td>
</td>
</tr>
<tr> </table>
<td>Volnay</td>

<tr> </tr>
sélection de nos <td>Vin jaune</td>
meilleurs vins</th>
</tr> </tr>
<tr>
</td>
</td>
</tr>
<tr> </table>
<td>Volnay</td>

<tr> </tr>
meilleurs vins</th> <td>24- € </td>
</tr> </tr>
<tr>
</td>
</td>
</tr>
<tr> </table>
<td>Volnay</td>

<tr> </tr>
</tr> </tr>
<tr> <tr>
</td>
</td>
</tr> </tr>
<tr> </table>
<td>Volnay</td>

<tr> </tr>
</tr> </tr>
<tr> <tr>
<td >Chassagne-Montrachet <td>Vin de paille</td>
</td>
</td>
</tr> </tr>
<tr> </table>
<td>Volnay</td>

<tr> </tr>
</tr> </tr>
<tr> <tr>
</td> <td>Bouteille
<td colspan="2" >En rupture de 37,5cl</td>
</td>
</tr> </tr>
<tr> </table>
<td>Volnay</td>

<tr> </tr>
</tr> </tr>
<tr> <tr>
</td> <td>Bouteille
<td colspan="2" >En rupture de 37,5cl</td>
</td> <td>25- € </td>
</tr> </tr>
<tr> </table>
<td>Volnay</td>
Sans CSS Résultat final Etape 1
HTML CSS
table{
border: 10px outset green;
}

HTML CSS
table{
}
caption{
caption-side: bottom;
}

HTML CSS
table{
}
caption{
} th{
border : 5px double #cccccc;
}

HTML CSS
table{
}
caption{
<td >Chassagne- } th{
Montrachet</td> border : 5px double #cccccc;
<td >Volnay</td> }
<td >Vin jaune .td1{
</td> width:70%;
<td >Vin de paille border:inset 5px #6699cc;
</td> }

HTML CSS
caption{
<td class="td1" >Chassagne- } th{
Montrachet</td> border : 5px double #cccccc;
<td class="td1" >Volnay</td> }
<td class="td1" >Vin jaune .td1{
</td> width:70%;
<td class="td1" >Vin de paille border:inset 5px #6699cc;
</td> }

HTML CSS
<td class="td1" >Chassagne-
th{
Montrachet</td>
border : 5px double #cccccc;
<td class="td1" >Volnay</td>
}
<td class="td1" >Vin jaune
.td1{
</td>
width:70%;
<td class="td1" >Vin de paille
border:inset 5px #6699cc;
</td>
}
.td2{
<td >19-
border:outset 5px #00ffcc;
€</td>
text-align:right;
<td >24-
}
€ </td>
<td >25-
€ </td>

HTML CSS
<td class="td1" >Chassagne-
.td1{
Montrachet</td>
width:70%;
<td class="td1" >Volnay</td>
border:inset 5px #6699cc;
<td class="td1" >Vin jaune
}
</td>
.td2{
<td class="td1" >Vin de paille
</td>
text-align:right;
}
<td class="td2" >19-
€</td>
€ </td>
€ </td>

HTML CSS
€</td> .td2{
<td class="td2" >24- border:outset 5px #00ffcc;
€ </td> text-align:right;
<td class="td2" >25- }
€ </td> #td3{
border:dashed 5px #ffcccc;
<td colspan="2"> text-align:center;
En rupture</td> }

HTML CSS
€</td> .td2{
<td class="td2" >24- border:outset 5px #00ffcc;
€ </td> text-align:right;
<td class="td2" >25- }
€ </td> #td3{
<td id="td3" colspan="2"> text-align:center;
En rupture</td> }

Sans CSS Résultat final Etape finale
HTML CSS
.td2{
text-align:right;
}
#td3{
En rupture</td> }
.td4{
<td rowspan="2"> width :15%;
Bouteille de 75cl</td> border:outset 5px #ff00cc;
<td > text-align:center;
Bouteille de 37,5cl</td> }

Sans CSS Résultat final Etape finale
HTML CSS
.td2{
text-align:right;
}
#td3{
En rupture</td> }
.td4{
<td class="td4" rowspan="2"> width :15%;
Bouteille de 75cl</td> border:outset 5px #ff00cc;
<td class="td4" > text-align:center;
Bouteille de 37,5cl</td> }

Espacement entre les cellules
Définition (Espace entre les cellules)

L’espace entre cellules d’un tableau se fait via border-spacing et deux cas
sont à distinguer :


• border-spacing : valeurNumerique; donne la valeur
d’espacement des quatre côtés des cellules ;


• border-spacing : valeurNumeriqueH valeurNumeriqueV;
donne la valeur d’espacement horizontaux via valeurNumeriqueH et
verticaux via valeurNumeriqueV.


table{
border: 10px outset green;/* rien de nouveau*/


table{
border: 10px outset green;/* rien de nouveau*/
border-spacing: 1.0cm 1.75cm;
}
Sans espace Avec espace

Les tableaux Les grands tableaux
Tableaux par morceaux

Lorsque les tableaux sont volumineux, il est possible de le fractionner en trois
parties :


parties :
1 un en-tête de tableau thead ;


parties :
2 un pied de tableau tfoot ;


parties :
3 un corps de tableau tbody


parties :
DANS L’ ORDRE : thead, tfoot PUIS tbody.


parties :
Exemple de grand tableau
<table>
<caption>Le titre</caption>


parties :
<table>
<caption>Le titre</caption>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>


parties :
<table> </tr>
<caption>Le titre</caption> </tfoot>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
<tfoot>
<tr> <th> ... </th>
...
<th>... </th>

parties :
<table> </tr>
<thead> <tbody>
<tr> <th> ... </th> <tr>
... <td>...</td>
<th>... </th> ...
</tr> <td>...</td>
</thead> </tr>
<tfoot> </tbody>
<tr> <th> ... </th>
...
<th>... </th>

parties :
<table> </tr>
<thead> <tbody>
<tr> <th> ... </th> <tr>
... <td>...</td>
<th>... </th> ...
</tr> <td>...</td>
</thead> </tr>
<tfoot> </tbody>
<tr> <th> ... </th> </table>
...
<th>... </th>
Structuration d’une page xHTML
Plan
1 Introduction
Les couleurs
Image de fond
Les pseudo-formats
3 Les listes
Liste à puces
4 Les compteurs
5 Les tableaux
Les grands tableaux
7 Les formulaires
Balise <div>...</div>
html css capture

html css capture

<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>

html css capture

<body> .bandeau { width :600px ;
<div height :40px ;
class="bandeau">Ceci background-
est le bandeau</div> color :#00CCFF ;
padding-top : 10px ;
}
.pied_page {
width :600px ;
height :40px ;
<div background-
class="pied_page">Ceci color :#33FF99 ;
est le pied de page</div> padding-top : 10px ;
</body> }

html css capture

<body> .bandeau { width :600px ;
<div height :40px ;
class="bandeau">Ceci background-
est le bandeau</div> color :#00CCFF ;
padding-top : 10px ;
}
.pied_page {
width :600px ;
height :40px ;
<div background-
class="pied_page">Ceci color :#33FF99 ;
</body> }

html css capture

<body>
<div
<div
class="contenu">Ceci
est le contenu</div>
<div
</body>

html css capture

<body>
<div
.contenu { width :600px ;

height :200px ;
<div
background-
color :#FFCC00 ;
padding-top : 200px ; }
<div
</body>

html css capture

<body>
<div

height :200px ;
<div
background-
color :#FFCC00 ;
<div
</body>

html css capture

<body>
<div
<div class="menu">Ceci
est le menu</div>
height :200px ;
<div
background-
color :#FFCC00 ;
<div
</body>

html css capture

<body>
<div .contenu { width :600px ;
class="bandeau">Ceci height :200px ;
est le bandeau</div> background-
<div class="menu">Ceci color :#FFCC00 ;
est le menu</div> padding-top : 200px ; }
<div .menu { float :left ;
class="contenu">Ceci width :100px ;
est le contenu</div> height :200px ;
<div background-
class="pied_page">Ceci color :#FF6699 ;
</body> }

html css capture

<body>
<div .contenu { width :600px ;
class="bandeau">Ceci height :200px ;
est le bandeau</div> background-
<div class="menu">Ceci color :#FFCC00 ;
est le menu</div> padding-top : 200px ; }
<div .menu { float :left ;
class="contenu">Ceci width :100px ;
est le contenu</div> height :200px ;
<div background-
class="pied_page">Ceci color :#FF6699 ;
</body> }

Le Document Object Mode D.O.M.
<head>
<meta... />
<title>D.O.M.</title>
<link.../>
</head>
<body>
<h1>Un <a href="www.google.fr" >lien</a> </h1>
<ul>
<li> Une <span>puce</span></li>
</ul>
<div id="div1">
<p> je suis un <span>paragraphe</span></p>
<div id="div2">
<h2>Titre</h2>
<p>paragraphe</p>
</div> Exemple de D.O.M.
</div>
</body>
</html>
Le Document Object Mode D.O.M.
html
head body
meta link title h1 ul div
a li p div
span span h2 p

Les formulaires
Plan
1 Introduction
Les couleurs
Image de fond
Les pseudo-formats
3 Les listes
Liste à puces
4 Les compteurs
5 Les tableaux
Les grands tableaux
7 Les formulaires
Les formulaires
Vers les formulaires
Les formulaires

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1

Les formulaires
Titre1
balise meta + ancres

01 Generalites XHTML PDF

Transféré par

Droits d'auteur :

Formats disponibles

01 Generalites XHTML PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

01 Generalites XHTML PDF

Transféré par

Droits d'auteur :

Formats disponibles

Développement de site web

L. GARNIER xhtml-css L1 Info1B. 1 / 86

L. GARNIER xhtml-css L1 Info1B. 4 / 86

L. GARNIER xhtml-css L1 Info1B. 4 / 86

L. GARNIER xhtml-css L1 Info1B. 4 / 86

Exemple de fichiers Bluefish et CSS

L. GARNIER xhtml-css L1 Info1B. 4 / 86

Exemple de fichiers Bluefish et CSS

Dans les noms de fichiers et de

L. GARNIER xhtml-css L1 Info1B. 5 / 86

Le répertoire public_html qui doit être accessible en Lecture/Execution pour

L. GARNIER xhtml-css L1 Info1B. 5 / 86

Le répertoire public_html qui doit être accessible en Lecture/Execution pour

Merci à Philippe Cavret

L. GARNIER xhtml-css L1 Info1B. 5 / 86

Le répertoire public_html qui doit être accessible en Lecture/Execution pour

Merci à Philippe Cavret

Site internet de l’I.E.M.

L. GARNIER xhtml-css L1 Info1B. 5 / 86

Le répertoire public_html qui doit être accessible en Lecture/Execution pour

Merci à Philippe Cavret

Site internet de l’I.E.M.

Chemin absolu ou chemin relatif

L. GARNIER xhtml-css L1 Info1B. 6 / 86

Chemin absolu ou chemin relatif

Chemins absolus Chemins relatif

L. GARNIER xhtml-css L1 Info1B. 6 / 86

Chemin absolu ou chemin relatif

Chemins absolus Chemins relatif

L. GARNIER xhtml-css L1 Info1B. 6 / 86

Chemin absolu ou chemin relatif

Chemins absolus Chemins relatif

Que des chemins relatifs, aucun chemin absolu

Définition d’HTML et de xhtml

Définition (HTML et xhtml)

L. GARNIER xhtml-css L1 Info1B. 7 / 86

Définition d’HTML et de xhtml

Définition (HTML et xhtml)

XHTML = HTML + XML (Extensible HyperText Markup Language = langage

L. GARNIER xhtml-css L1 Info1B. 7 / 86

Définition d’HTML et de xhtml

Définition (HTML et xhtml)

XHTML = HTML + XML (Extensible HyperText Markup Language = langage

Validation des pages HTML

L. GARNIER xhtml-css L1 Info1B. 7 / 86

Définition d’HTML et de xhtml

Définition (HTML et xhtml)

XHTML = HTML + XML (Extensible HyperText Markup Language = langage

Validation des pages HTML

L. GARNIER xhtml-css L1 Info1B. 7 / 86

Définition d’HTML et de xhtml

Définition (HTML et xhtml)

XHTML = HTML + XML (Extensible HyperText Markup Language = langage

Validation des pages HTML

L. GARNIER xhtml-css L1 Info1B. 8 / 86

<?xml version="1.0" encoding="UTF-8"?>

L. GARNIER xhtml-css L1 Info1B. 8 / 86

<?xml version="1.0" encoding="UTF-8"?>

L. GARNIER xhtml-css L1 Info1B. 8 / 86