L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M....

Développement de site web

L. GARNIER

L1 Info1B

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

Plan

1 Introduction

2 Un peu de style CSSLes couleursMise en forme du texteImage de fondLes pseudo-formats

3 Les listesLes listes de définitionsListe à puces

4 Les compteurs

5 Les tableauxLes tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux

6 Structuration d’une page xHTML

7 Les formulaires


Introduction

Plan

1 Introduction2 Un peu de style CSS

Les couleursMise en forme du texteImage de fondLes pseudo-formats


4 Les compteurs5 Les tableaux

Les tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux

6 Structuration d’une page xHTML7 Les formulaires[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/shad


Introduction

Salles I.E.M.

Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.


Introduction

Salles I.E.M.


http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/


Introduction

Salles I.E.M.



Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96


Introduction

Salles I.E.M.




Accès avec un client sftp (permet le transfert de fichiers) : filezilla


Introduction

Salles I.E.M.





Editeur : bluefish lancé par $ bluefish &


Introduction

Salles I.E.M.






Navigateur : firefox (iceweasel), chrome, opera...


Introduction

Salles I.E.M.






Navigateur : firefox (iceweasel), chrome, opera...

Dans les noms de fichiers et derépertoires, pas d’espace, pasd’accents.


Introduction

Le répertoire public_html

Dépôt du projet personnel (seul ou en binôme) au format zipdans le répertoire public_html


Introduction



Le répertoire public_html qui doit être accessible en Lecture/Execution pourtout 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 votrerépertoire personnel. La commande est la suivante sous Linux dans votrerépertoire personnel : $ chmod o+x . (le point fait parti de la syntaxe)

Merci à Philippe Cavret


Introduction








Introduction







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 relatifaucun sens


Introduction



Chemins relatifaucun sensDepuis html pour aller dans css../cssDepuis tp2 pour aller dans css../tp1/css


Introduction



Chemins relatifaucun sensDepuis html pour aller dans css../cssDepuis 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 = langagede marquage hypertexte extensible)


Introduction





Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jsp


Introduction





Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jspValidation des feuilles de styleshttp ://www.css-validator.org/


Introduction





Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jspValidation des feuilles de styleshttp ://www.css-validator.org/Quelques liens utileshttp ://www.la-grange.net/w3c/html4.01/cover.htmlhttp ://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 enanglais)

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

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


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!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


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!DOCTYPE html



<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="fr" lang="fr">


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!DOCTYPE html





<head>


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!DOCTYPE html





<head>

<title>Ma premiere page XHTML </title>


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!DOCTYPE html





<head>


</head>


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!DOCTYPE html





<head>


</head>

<body>


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!DOCTYPE html





<head>


</head>

<body>

Partie visible dans le navigateur</body>


Introduction

En-tête xhtml


✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule


<!DOCTYPE html





<head>


</head>

<body>


</html>


Introduction

Types de balises

Définition (balises ouvrante et fermante )

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


Introduction

Types de balises



<body>


Définition (balise auto-fermante )

Certaines balises ne vont pas par deux, la syntaxe est <syntaxe />.


Introduction

Types de balises



<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.


• les balises de titre<h1> Titre le plus gros possible </h1>


Introduction




bloc.



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


Introduction




bloc.




• les balises de paragraphe


Introduction




bloc.




• les balises de paragraphe<p> Je suis un paragraphe </p>


Introduction




bloc.





• la balise générique


Introduction




bloc.





• la balise générique<div> </div>


Introduction




bloc.






• la balise adresse


Introduction




bloc.






• la balise adresse<address> </address>


Introduction




bloc.







• la balise de citation (version bloc)


Introduction




bloc.







• 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






• la balise de lien hypertexte<p>... <a href="http://www.google.fr">

moteur de recherche google </a> ...</p>


Introduction








• la balise de mise en évidence


Introduction








• la balise de mise en évidence<strong>...</strong>


Introduction









• la balise générique


Introduction









• la balise générique<span> </span>


Introduction










• la balise de citation (version en ligne)


Introduction










• la balise de citation (version en ligne)<p>...<q>...</q>...</p>

• la balise de citation de titre ou d’événement


Introduction











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


Introduction








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

Les balises contenant em, i, sub et sup sont interdites dansle fichier html =⇒ CSS


Un peu de style CSS

Plan








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} etF +1 = 10



L’hexadécimal



éléments de{0;1; · · · ;b−1}





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}





Définition (octet)

Un octet est la réunion de 8 bits. Les valeurs prises sont entre 0 et

28 −1 = 255.

28 = 24×2 =(

24)2

= 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#000000

#FFFFFF#FFFFFF

#FF0000#FF0000

#00FF00#00FF00

#00A000#00A000

#0000FF#0000FF

#A0A0A0#A0A0A0

#404040#404040

#FFFF00#FFFF00

#FF6000#FF6000

#00FFFF#00FFFF

#FF00FF#FF00FF



Les couleurs




#000000#000000

#FFFFFF#FFFFFF

#FF0000#FF0000

#00FF00#00FF00

#00A000#00A000

#0000FF#0000FF

#A0A0A0#A0A0A0

#404040#404040

#FFFF00#FFFF00

#FF6000#FF6000

#00FFFF#00FFFF

#FF00FF#FF00FF

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



Les couleurs




#000000#000000

#FFFFFF#FFFFFF

#FF0000#FF0000

#00FF00#00FF00

#00A000#00A000

#0000FF#0000FF

#A0A0A0#A0A0A0

#404040#404040

#FFFF00#FFFF00

#FF6000#FF6000

#00FFFF#00FFFF

#FF00FF#FF00FF

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;C : €



Les accents









é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <



Les accents









é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >



Les accents









é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «



Les accents









é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «» : »



Les accents









é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «» : »

© : &copie;



Les accents









é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «» : »

© : &copie;°: °



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




où valeur prend l’une des valeurs suivantes :• top

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



Alignement vertical





• bottom

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-ci



Alignement vertical





• bottom

• baseline

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élément



Alignement vertical





• bottom

• baseline

• middle

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de texte



Alignement vertical





• bottom

• baseline

• middle

• sub

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indice



Alignement vertical





• bottom

• baseline

• middle

• sub

• super

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposant



Alignement vertical





• bottom

• baseline

• middle

• sub

• super

• text-bottom

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposanttext-top : le haut de l’élément est aligné sur le haut de la ligne de texte



Alignement vertical





• bottom

• baseline

• middle

• sub

• super

• text-bottom

• text-top

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposanttext-top : le haut de l’élément est aligné sur le haut de la ligne de textetext-bottom : le bas de l’élément est aligné sur le bas de la ligne de texte



Alignement vertical

top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposanttext-top : le haut de l’élément est aligné sur le haut de la ligne de textetext-bottom : le bas de l’élément est aligné sur le bas de la ligne de texte

bottom

text-top

text-bottom

top

baseline



Unité de longueur

� Unité relative

• em : taille de la police de caractère (caractère m)



Unité de longueur

� Unité relative

• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)



Unité de longueur

� Unité relative

• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)• 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

• cm : centimètres• mm : millimètres



Unité de longueur

� Unité relative


� Unité absolue

• cm : centimètres• mm : millimètres• pt : points (1 pt =0,0352777 cm)



Unité de longueur

� Unité relative


� Unité absolue

• cm : centimètres• mm : millimètres• 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

• verdana

• helvetica



Famille de police




• arial

• verdana

• helvetica

• serif



Famille de police




• arial

• verdana

• helvetica

• serif

• sans-serif



Famille de police




• arial

• verdana

• helvetica

• serif

• sans-serif

• monospace



Famille de police




• arial

• verdana

• helvetica

• serif

• sans-serif

• monospace

Problème selon les O.S., les polices installées sur l’ordinateur...http://www.logz.org/art-407-tit-Les-meilleures-familles

-de-polices-compatibles-linux-windows-mac



Style de police

Définition (Style de police)

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




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

• x-small

• small

• medium

• large



Taille des polices




• xx-small

• x-small

• small

• medium

• large

• x-large



Taille des polices




• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large



Taille des polices


La taille de la police se fait par la syntaxe :

{font-size: valeur; }


• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

✿✿✿✿✿✿

Valeur✿✿✿✿✿✿✿

relative

✿✿✿✿✿✿✿✿

smaller : plus petit que l’élément parent.



Taille des polices





• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

✿✿✿✿✿✿✿

Valeurs✿✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿✿


✿✿✿✿✿✿✿

larger : plus grand que l’élément parent.



Taille des polices





• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

✿✿✿✿✿✿✿


relatives

✿✿✿✿✿✿✿✿


✿✿✿✿✿✿✿


✿✿✿✿✿✿✿✿

inherit : de la taille de l’élément parent.



Taille des polices





• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

• longueur



Taille des polices





• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

• longueur

•✿✿✿

%✿✿

✿✿✿✿✿✿✿


relatives

✿✿✿✿✿✿✿✿


✿✿✿✿✿✿✿


✿✿✿✿✿✿✿✿


✿✿✿

%✿✿

: pourcentage de la taille de l’élément parent.



Taille des polices





• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

• longueur

•✿✿✿

%✿✿

✿✿✿✿✿✿✿


relatives

✿✿✿✿✿✿✿✿


✿✿✿✿✿✿✿


✿✿✿✿✿✿✿✿


✿✿✿

%✿✿

: 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






bolder •✿✿✿✿✿✿✿✿

lighter

✿✿✿✿✿✿✿


relatives

✿✿✿✿✿✿✿


✿✿✿✿✿✿✿✿

lighter : moins gras que l’élément parent.



Poids des lettres






bolder •✿✿✿✿✿✿✿✿

lighter

✿✿✿✿✿✿✿


relatives

✿✿✿✿✿✿✿


✿✿✿✿✿✿✿✿


Il est aussi possible de spécifier un nombre qui est un multiple entier de 100.



Poids des lettres






bolder •✿✿✿✿✿✿✿✿

lighter

✿✿✿✿✿✿✿


relatives

✿✿✿✿✿✿✿


✿✿✿✿✿✿✿✿


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 : rienunderline : soulignement inférieur








•✿✿✿✿✿

none

• underline

• overline

✿✿✿✿✿

none : rienunderline : soulignement inférieuroverline : barre au-dessus du texte








•✿✿✿✿✿

none

• underline

• overline

• line-through

✿✿✿✿✿

none : rienunderline : soulignement inférieuroverline : barre au-dessus du texteline-through : texte barré








•✿✿✿✿✿

none

• underline

• overline

• line-through

✿✿✿✿✿

none : rienunderline : soulignement inférieuroverline : barre au-dessus du texteline-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 :


id="nom"


Dans le fichier css

#nom {. . .}






par la syntaxe :


id="nom"


Dans le fichier css

#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"


Dans le fichier css

#nom {. . .}



syntaxe :


class="nom"







par la syntaxe :


id="nom"


Dans le fichier css

#nom {. . .}



syntaxe :


class="nom"


Dans le fichier css

.nom {. . .}

Exemple de soulignement et autres





<h1>Text-décoration

</h1>






</h1>

Dans le fichier css

body{

font-weight: normal;

}






</h1>

Dans le fichier css

body{


}

h1{text-align:center;

}






</h1>

<p>

Dans le fichier css

body{


}


}






</h1>

<p>

<span class="souligne">

Texte souligné

</span> <br /><br />

Dans le fichier css

body{


}


}






</h1>

<p>


Texte souligné


Dans le fichier css

body{


}


}

.souligne{

text-decoration:underline;

color:red;

}






</h1>

<p>


Texte souligné



Texte souligné

Dans le fichier css

body{


}


}

.souligne{


color:red;

}






</h1>

<p>


Texte souligné



Texte souligné

<span class="defaut">

texte par défaut,

Dans le fichier css

body{


}


}

.souligne{


color:red;

}






</h1>

<p>


Texte souligné



Texte souligné


texte par défaut,

Dans le fichier css

body{


}


}

.souligne{


color:red;

}

.defaut{

text-decoration: none;

color:green;

}






</h1>

<p>


Texte souligné



Texte souligné


texte par défaut,

<span id="nenni">

QUE NENNI,

</span>

Dans le fichier css

body{


}


}

.souligne{


color:red;

}

.defaut{


color:green;

}






</h1>

<p>


Texte souligné



Texte souligné


texte par défaut,

<span id="nenni">

QUE NENNI,

</span>

Dans le fichier css

body{


}


}

.souligne{


color:red;

}

.defaut{


color:green;

}

#nenni{

font-size: larger;

color:magenta;

font-weight:900;

}L. GARNIER xhtml-css L1 Info1B. 25 / 85





</h1>

<p>


Texte souligné



Texte souligné


texte par défaut,

<span id="nenni">

QUE NENNI,

</span>

</span>

Dans le fichier css

body{


}


}

.souligne{


color:red;

}

.defaut{


color:green;

}

#nenni{

font-size: larger;

color:magenta;

font-weight:900;






</h1>

<p>


Texte souligné



Texte souligné


texte par défaut,

<span id="nenni">

QUE NENNI,

</span>

</span>

texte toujours nouveau

souligné

Dans le fichier css

body{


}


}

.souligne{


color:red;

}

.defaut{


color:green;

}

#nenni{

font-size: larger;

color:magenta;

font-weight:900;






</h1>

<p>


Texte souligné



Texte souligné


texte par défaut,

<span id="nenni">

QUE NENNI,

</span>

</span>


souligné

</span>

Dans le fichier css

body{


}


}

.souligne{


color:red;

}

.defaut{


color:green;

}

#nenni{

font-size: larger;

color:magenta;

font-weight:900;






</h1>

<p>


Texte souligné



Texte souligné


texte par défaut,

<span id="nenni">

QUE NENNI,

</span>

</span>


souligné

</span>

</p>

Dans le fichier css

body{


}


}

.souligne{


color:red;

}

.defaut{


color:green;

}

#nenni{

font-size: larger;

color:magenta;

font-weight:900;




Le texte non souligné l’est quand même : le span<span class="souligne"> prend le dessus sur le span<span class="defaut">.


Texte souligné


texte par défaut,

</span>


souligné

</span>

.souligne{


color:red;

}

.defaut{


color:green;

}




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;

}







color:red;

}

L’inconvénient est que tous les paragraphes auront ce style.







color:red;

}


• il suffit de donner un identifiant au paragraphe ce qui donne dans lefichier html :

<p id="pSouligne">







color:red;

}


• il suffit de donner un identifiant au paragraphe ce qui donne dans lefichier 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 :




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

background-image:url("chemin_relatif");

}






}

Exemple d’une image de fond jpeg

où le motif est :






}


où le motif est :

Attention, deux extensions possibles : jpg et jpeg.






}


où le motif est :


Exemple d’une image de fond gif






}



Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :

••••






}




•✿✿✿✿✿✿✿

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






}




•✿✿✿✿✿✿✿

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






}




•✿✿✿✿✿✿✿

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






}




•✿✿✿✿✿✿✿

repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;• repeat-y pour une répétition verticale de l’image, exemple.






}


•✿✿✿✿✿✿✿


Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh;






}


•✿✿✿✿✿✿✿


Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page






}


•✿✿✿✿✿✿✿


Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.






}


•✿✿✿✿✿✿✿


Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.L’argument valeurg peut prendre les valeurs left, center ou right.






}


•✿✿✿✿✿✿✿


Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.L’argument valeurg peut prendre les valeurs left, center ou right.L’argument valeurh peut prendre les valeurs top, center ou bottom.




Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.L’argument valeurg peut prendre les valeurs left, center ou right.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 pageen 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

Pour background-position , il est possible d’utiliser des pourcentages,cm...body{




background-position: 50% 25% ;

}




body{





}Exemple

Pour background-position , il est possible d’utiliser des pourcentages,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: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







•✿✿✿✿✿✿







� Pour les balises de lien hypertexte et de formulaire



Pseudo-format







•✿✿✿✿✿✿







� 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








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

UNE LISTE 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>.






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<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;


}

dd{

background-color: black;

color: white;

}




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;


}

dd{


color: white;

}

#dd1{

color:yellow;

margin-right: 5cm;

margin-left: 5cm;

padding-left: 3cm;

border : solid green 0.1em;

}




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;


}

dd{


color: white;

}

#dd1{

color:yellow;

margin-right: 5cm;

margin-left: 5cm;

padding-left: 3cm;


}

#dd2{

margin-left: 5cm;

width:150px;

color:yellow;


}


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

</p>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>

<li>Saint-Etienne (10)</li>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>


<li>Marseille (9)</li>

<li>Nantes (8)</li>

<li>Monaco (7)</li>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

</li>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

</li>

<li>Bordeaux (6)</li>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

</li>


<li>Reims (6)

</li>

<li>Paris (6)

</li>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

</li>


<li>Reims (6)

</li>

<li>Paris (6)

</li>

</ol>





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

</li>


<li>Reims (6)

</li>

<li>Paris (6)

</li>

</ol>

Partie CSS

.pas{

list-style-type: none;

}





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>

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

</li>


<li class="pas">Reims (6)

</li>

<li class="pas">Paris (6)

</li>

</ol>

Partie CSS

.pas{


}





Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>


</li>



</li>


</li>

</ol>

Partie CSS

.pas{


}






Partie HTML


</h1>


le plus de titre de

champion de France

</p>

<ol>



<li>Nantes (8)</li>

<li>Monaco (7)</li>


</li>



</li>


</li>

</ol>

Partie CSS

.pas{


}


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 ;circle =⇒ cercle noir ;square =⇒ carré noir.

Listes à puces non ordonnées







✿✿✿✿✿



cas d’une liste ordonnée

✿✿✿✿✿✿✿✿

decimal =⇒ nombres entiers : 1, 2,3... ;







✿✿✿✿✿




✿✿✿✿✿✿✿✿

decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;







✿✿✿✿✿




✿✿✿✿✿✿✿✿


upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;







✿✿✿✿✿




✿✿✿✿✿✿✿✿


upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;







✿✿✿✿✿




✿✿✿✿✿✿✿✿


upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;upper-alpha ou upper-latin =⇒lettres majuscules : A, B, C... ;







✿✿✿✿✿




✿✿✿✿✿✿✿✿


upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;upper-alpha ou upper-latin =⇒lettres majuscules : A, B, C... ;lower-alpha ou lower-latin=⇒lettres minuscules : a, b, c... ;







✿✿✿✿✿




✿✿✿✿✿✿✿✿


upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;upper-alpha ou upper-latin =⇒lettres majuscules : A, B, C... ;lower-alpha ou lower-latin=⇒lettres minuscules : a, b, c... ;lower-greek =⇒ lettres grecques :α, β , γ...

Listes à puces ordonnées



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<ul>


la guerre commence

<ul>

<li>en France</li>

<li>en Pologne</li>

</ul>

</li>


l’armistice le

<ul>

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








Syntaxe HTML<ul>


la guerre commence

<ul>

<li>en France</li>

<li>en Pologne</li>

</ul>

</li>


l’armistice le

<ul>


<li>le 17 juin 1940</li>

</ul>

</li>








Syntaxe HTML<ul>


la guerre commence

<ul>

<li>en France</li>

<li>en Pologne</li>

</ul>

</li>


l’armistice le

<ul>



</ul>

</li>

</ul>








Syntaxe HTML<ul>


la guerre commence

<ul>

<li>en France</li>

<li>en Pologne</li>

</ul>

</li>


l’armistice le

<ul>



</ul>

</li>

</ul>

Syntaxe CSSul{/*style de la premiere liste*/

list-style-image:url("Vert.gif");

}








Syntaxe HTML<ul>


la guerre commence

<ul>

<li>en France</li>

<li>en Pologne</li>

</ul>

</li>


l’armistice le

<ul>



</ul>

</li>

</ul>

Syntaxe CSSul{/*style de la premiere liste*/

list-style-image:url("Vert.gif");

}

ul ul{/*style des sous-listes*/

list-style-image:url("Red.gif");

}


</ul>

</li>

</ul>

</li>

</li> 

</ul>

Les compteurs

Plan








Les compteurs

Définition

Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.


Les compteurs

Définition


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


Les compteurs

Définition


1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{

}


Les compteurs

Définition



counter-reset:nomCompteur ValeurInitiale;

}


Les compteurs

Définition




}

2 La seconde étape consiste, dans l’élément contenant le compteur, à :

ElementContenantCompteur:before{

}


Les compteurs

Définition




}


• incrémenter le compteur

ElementContenantCompteur:before{

counter-increment: nomCompteur ValeurDIncrementation;

}


Les compteurs

Définition




}


• incrémenter le compteur• définir le style et l’afficherElementContenantCompteur:before{

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,upper-greek) "." ;


Les compteurs

Conter un compteur de liste ordonnée

Un compteur de liste ordonnée


Les compteurs



<ol>

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

<li>Rio </li>

</ol>


Les compteurs



<ol>

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

<li>Rio </li>

</ol>

ol{


Les compteurs



<ol>

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

<li>Rio </li>

</ol>

ol{

counter-reset : jeux 1988; /* 1992−4 = 1988*/


Les compteurs



<ol>

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

<li>Rio </li>

</ol>

ol{

counter-reset : jeux 1988; /* 1992−4 = 1988*//*on enleve les puces avant li*/

list-style-type : none;


Les compteurs



<ol>

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

<li>Rio </li>

</ol>

ol{



}

ol li:before{


Les compteurs



<ol>

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

<li>Rio </li>

</ol>

ol{



}

ol li:before{

counter-increment : jeux 4 ;


Les compteurs



<ol>

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

<li>Rio </li>

</ol>

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>Barcelone

<ol>

<li>basket</li>

<li>plongeon</li>

</ol>

</li>

<li>Atlanta

<ol>

<li>Foot</li>

<li>judo</li>

</ol>

</ol>


Les compteurs



<ol class="ville1">

<li>Barcelone

<ol>

<li>basket</li>

<li>plongeon</li>

</ol>

</li>

<li>Atlanta

<ol>

<li>Foot</li>

<li>judo</li>

</ol>

</ol>

.ville1{

counter-reset : cpt1 0;


}


Les compteurs



<ol class="ville1">

<li>Barcelone

<ol>

<li>basket</li>

<li>plongeon</li>

</ol>

</li>

<li>Atlanta

<ol>

<li>Foot</li>

<li>judo</li>

</ol>

</ol>

.ville1{



}

ol{



}


Les compteurs



<ol class="ville1">

<li>Barcelone

<ol>

<li>basket</li>

<li>plongeon</li>

</ol>

</li>

<li>Atlanta

<ol>

<li>Foot</li>

<li>judo</li>

</ol>

</ol>

.ville1{



}

ol{



}

ol li:before{

counter-increment : cpt1 ;

content : "Ville " counter(cpt1,upper-roman) " : " ;

}


Les compteurs



<ol class="ville1">

<li>Barcelone

<ol>

<li>basket</li>

<li>plongeon</li>

</ol>

</li>

<li>Atlanta

<ol>

<li>Foot</li>

<li>judo</li>

</ol>

</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








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 aumoins une cellule.







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







Chaque cellule commence par <td> et se termine par </td>.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









<th> et </th>.

Un pauvre tableau

<table>









<th> et </th>.

Un pauvre tableau

<table>

<tr>









<th> et </th>.

Un pauvre tableau

<table>

<tr>

<th>Je suis un titre de cellule</th>









<th> et </th>.

Un pauvre tableau

<table>

<tr>


</tr>









<th> et </th>.

Un pauvre tableau

<table>

<tr>


</tr>

<tr>









<th> et </th>.

Un pauvre tableau

<table>

<tr>


</tr>

<tr>

<td>Je suis une cellule</td>









<th> et </th>.

Un pauvre tableau

<table>

<tr>


</tr>

<tr>


</tr>









<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>

CSStable{

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 sontapplicables aux listes, puces, paragraphes, titres, div et span.

Bordures appliquées à d’autre éléments qu’un tableau








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

• à gauche via border-left-toto ;










• à droite via border-right-toto ;











• au-dessus via border-top-toto ;











• 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) sedéfinissent par margin-cote (resp. padding-cote) où cote vaut soit

right, soit top, soit left, soit bottom.

Marges Marges sans CSS



Marges



padding).

Pour différencier les côtés, les marges extérieures (resp. intérieures) sedéfinissent par margin-cote (resp. padding-cote) où cote vaut soit

right, soit top, soit left, soit bottom.


<h1> Marges intérieures et extérieures </h1>



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 soitright, soit top, soit left, soit bottom.



<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

et extérieures </h1>

<hr />

h1 {

border : 3px dashed red;

margin-left: 10%;

padding-left: 20%;

padding-bottom: 1cm;

margin-bottom: 2cm;

}



Marges




<hr />

h1 {

border : 3px dashed red;

margin-left: 10%;

padding-left: 20%;


margin-bottom: 2cm;

}



<hr />

<div>

<hr />

</div>

div{

border : 5px dashed green;

padding-left: 50px;

padding-top: 1cm;

padding-right: 10px;


margin : 1cm;

}



Marges


<table>

<tr>

<td >p-left:1cm;

</td>

<td >p-top:3cm;

</td>

</tr>

<tr>

<td >p-right:2cm;

</td>

<td >p-bottom:3cm;

</td>

</tr>

</table>

table{


border: 7px solid blue;

font-size: 0.75cm;

}



Marges


<table>

<tr>

<td >p-left:1cm;

</td>

<td >p-top:3cm;

</td>

</tr>

<tr>

<td >p-right:2cm;

</td>

<td >p-bottom:3cm;

</td>

</tr>

</table>

table{


border: 7px solid blue;

font-size: 0.75cm;

}

td{

border: 7px dashed blue;

width: 12cm;

}



Marges


<table>

<tr>

<td class="cl1" >p-left:1cm;

</td>

<td class="cl1" >p-top:3cm;

</td>

</tr>

<tr>

<td >p-right:2cm;

</td>

<td >p-bottom:3cm;

</td>

</tr>

</table>

td{


width: 12cm;

}

.cl1{

padding-left: 1cm;

padding-top: 3cm;

border-bottom-style: solid;

}



Marges


<table>

<tr>


</td>


</td>

</tr>

<tr>

<td class="cl2" >p-right:2cm;

</td>

<td class="cl2" >p-bottom:3cm;

</td>

</tr>

</table>

td{


width: 12cm;

}

.cl1{

padding-left: 1cm;

padding-top: 3cm;


}

.cl2{

padding-right: 2cm;


border-top-style: solid;

}



Marges

Marges Marges sans CSS Etape finale

<table>

<tr>


</td>


</td>

</tr>

<tr>

<td class="cl2" >p-right:2cm;

</td>

<td class="cl2" >p-bottom:3cm;

</td>

</tr>

</table>

td{


width: 12cm;

}

.cl1{

padding-left: 1cm;

padding-top: 3cm;


}

.cl2{

padding-right: 2cm;


border-top-style: solid;

/* 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>,




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)


le 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)


le mot <table>.

Titre à un tableau


✿✿✿✿

top, soit bottom

Titre en bas d’un tableau




Définition (Titre)


le mot <table>.

Titre à un tableau


✿✿✿✿

top, soit bottom


HTML

<table>

<caption>Statistisque sur les

genres</caption>

<tr>· · ·</table>




Définition (Titre)


le mot <table>.

Titre à un tableau


✿✿✿✿

top, soit bottom


HTML

<table>

<caption>Statistisque sur les

genres</caption>

<tr>· · ·</table>

CSS

caption{

caption-side: bottom;

text-align: right;

}


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 19CVin jaune 24C

Vin de paille Bouteille de 37,5cl 25C












Première ligne : en-tête, fusion des trois cellules












Première ligne : en-tête, fusion des trois cellulesDeuxième ligne : fusion des deux dernières cellules












Première ligne : en-tête, fusion des trois cellulesDeuxième ligne : fusion des deux dernières cellulesDeuxième colonne : fusion des troisième et quatrième cellules




Fusions de cellules dans un tableau sans CSS





<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>

Deuxième ligne : fusion des deux dernières cellules





<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>

<td >Bouteille

de 75cl</td>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>

<td rowspan="2" >Bouteille

de 75cl</td>

</tr>

</table>

Deuxième colonne : fusion des troisième et quatrième cellules





<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

<tr>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

<tr>

<td>Vin jaune</td>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

<tr>

<td>Vin jaune</td>

<td>24- € </td>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

<tr>

<td>Vin jaune</td>

<td>24- € </td>

</tr>

<tr>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

<tr>

<td>Vin jaune</td>

<td>24- € </td>

</tr>

<tr>

<td>Vin de paille</td>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

<tr>

<td>Vin jaune</td>

<td>24- € </td>

</tr>

<tr>


<td>Bouteille

de 37,5cl</td>

</tr>

</table>






<table>



<tr>


sélection de nos

meilleurs vins</th>

</tr>

<tr>


</td>


</td>

</tr>

<tr>

<td>Volnay</td>


de 75cl</td>

<td>19- €</td>

</tr>

<tr>

<td>Vin jaune</td>

<td>24- € </td>

</tr>

<tr>


<td>Bouteille

de 37,5cl</td>

<td>25- € </td>

</tr>

</table>





Sans CSS Résultat final Etape 1

HTML CSS

table{

border: 10px outset green;

}





HTML CSS

table{


}

caption{


}





HTML CSS

table{


}

caption{


} th{

border : 5px double #cccccc;

}





HTML

<td >Chassagne-

Montrachet</td>

<td >Volnay</td>

<td >Vin jaune

</td>

<td >Vin de paille

</td>

CSS

table{


}

caption{


} th{


}

.td1{

width:70%;

border:inset 5px #6699cc;

}





HTML

<td class="td1" >Chassagne-

Montrachet</td>

<td class="td1" >Volnay</td>

<td class="td1" >Vin jaune

</td>

<td class="td1" >Vin de paille

</td>

CSS

caption{


} th{


}

.td1{

width:70%;


}





HTML<td class="td1" >Chassagne-

Montrachet</td>



</td>


</td>

<td >19-

€</td>

<td >24-

€ </td>

<td >25-

€ </td>

CSS

th{


}

.td1{

width:70%;


}

.td2{

border:outset 5px #00ffcc;

text-align:right;

}





HTML<td class="td1" >Chassagne-

Montrachet</td>



</td>


</td>

<td class="td2" >19-

€</td>


€ </td>


€ </td>

CSS

.td1{

width:70%;


}

.td2{


text-align:right;

}





HTML<td class="td2" >19-

€</td>


€ </td>


€ </td>

<td colspan="2">

En rupture</td>

CSS

.td2{


text-align:right;

}

#td3{

border:dashed 5px #ffcccc;

text-align:center;

}





HTML<td class="td2" >19-

€</td>


€ </td>


€ </td>

<td id="td3" colspan="2">

En rupture</td>

CSS

.td2{


text-align:right;

}

#td3{


text-align:center;

}




Sans CSS Résultat final Etape finale

HTML


En rupture</td>

<td rowspan="2">

Bouteille de 75cl</td>

<td >

Bouteille de 37,5cl</td>

CSS

.td2{


text-align:right;

}

#td3{


text-align:center;

}

.td4{

width :15%;

border:outset 5px #ff00cc;

text-align:center;

}




Sans CSS Résultat final Etape finale

HTML


En rupture</td>

<td class="td4" rowspan="2">

Bouteille de 75cl</td>

<td class="td4" >

Bouteille de 37,5cl</td>

CSS

.td2{


text-align:right;

}

#td3{


text-align:center;

}

.td4{

width :15%;

border:outset 5px #ff00cc;

text-align:center;

}



Espacement entre les cellules

Définition (Espace entre les cellules)

L’espace entre cellules d’un tableau se fait via border-spacing et deux cassont à 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 troisparties :





1 un en-tête de tableau thead ;





1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;





1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody






DANS L’ORDRE : thead, tfoot PUIS tbody.







Exemple de grand tableau

<table>

<caption>Le titre</caption>


Structuration d’une page xHTML

Plan









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>





<div



<div



</body>

.bandeau { width :600px ;

height :40px ;

background-

color :#00CCFF ;

padding-top : 10px ;

}

.pied_page {

width :600px ;

height :40px ;

background-

color :#33FF99 ;


}





<div



<div

class="contenu">Ceci

est le contenu</div>

<div



</body>





<div



<div



<div



</body>

.contenu { width :600px ;

height :200px ;

background-

color :#FFCC00 ;

padding-top : 200px ; }





<div



<div class="menu">Ceci

est le menu</div>

<div



<div



</body>


height :200px ;

background-

color :#FFCC00 ;






<div



<div class="menu">Ceci

est le menu</div>

<div



<div



</body>


height :200px ;

background-

color :#FFCC00 ;


.menu { float :left ;

width :100px ;

height :200px ;

background-

color :#FF6699 ;


}


L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M....

Documents

Transcript of L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M....