l. garnier l1 info1bufrsciencestech.u-bourgogne.fr/licence1/info1b...introduction salles i.e.m....
TRANSCRIPT
![Page 1: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/1.jpg)
Développement de site web
L. GARNIER
L1 Info1B
L. GARNIER xhtml-css L1 Info1B. 1 / 85
![Page 2: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/2.jpg)
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
L. GARNIER xhtml-css L1 Info1B. 2 / 85
![Page 3: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/3.jpg)
Introduction
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
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
L. GARNIER xhtml-css L1 Info1B. 3 / 85
![Page 4: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/4.jpg)
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
L. GARNIER xhtml-css L1 Info1B. 4 / 85
![Page 5: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/5.jpg)
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
L. GARNIER xhtml-css L1 Info1B. 4 / 85
![Page 6: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/6.jpg)
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
L. GARNIER xhtml-css L1 Info1B. 4 / 85
![Page 7: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/7.jpg)
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
L. GARNIER xhtml-css L1 Info1B. 4 / 85
![Page 8: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/8.jpg)
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
Editeur : bluefish lancé par $ bluefish &
L. GARNIER xhtml-css L1 Info1B. 4 / 85
![Page 9: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/9.jpg)
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
Editeur : bluefish lancé par $ bluefish &
Navigateur : firefox (iceweasel), chrome, opera...
L. GARNIER xhtml-css L1 Info1B. 4 / 85
![Page 10: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/10.jpg)
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
Editeur : bluefish lancé par $ bluefish &
Navigateur : firefox (iceweasel), chrome, opera...
Dans les noms de fichiers et derépertoires, pas d’espace, pasd’accents.
L. GARNIER xhtml-css L1 Info1B. 4 / 85
![Page 11: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/11.jpg)
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
L. GARNIER xhtml-css L1 Info1B. 5 / 85
![Page 12: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/12.jpg)
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
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/
L. GARNIER xhtml-css L1 Info1B. 5 / 85
![Page 13: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/13.jpg)
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
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/
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
L. GARNIER xhtml-css L1 Info1B. 5 / 85
![Page 14: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/14.jpg)
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
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/
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
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
L. GARNIER xhtml-css L1 Info1B. 5 / 85
![Page 15: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/15.jpg)
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
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/
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
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
http ://ufrsciencestech.u-bourgogne.fr/~garnier/
L. GARNIER xhtml-css L1 Info1B. 5 / 85
![Page 16: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/16.jpg)
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
L. GARNIER xhtml-css L1 Info1B. 6 / 85
![Page 17: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/17.jpg)
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
Chemins relatifaucun sens
L. GARNIER xhtml-css L1 Info1B. 6 / 85
![Page 18: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/18.jpg)
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
Chemins relatifaucun sensDepuis html pour aller dans css../cssDepuis tp2 pour aller dans css../tp1/css
L. GARNIER xhtml-css L1 Info1B. 6 / 85
![Page 19: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/19.jpg)
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
Chemins relatifaucun sensDepuis html pour aller dans css../cssDepuis tp2 pour aller dans css../tp1/css
Que des chemins relatifs, aucun chemin absolu
L. GARNIER xhtml-css L1 Info1B. 6 / 85
![Page 20: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/20.jpg)
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
L. GARNIER xhtml-css L1 Info1B. 7 / 85
![Page 21: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/21.jpg)
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
L. GARNIER xhtml-css L1 Info1B. 7 / 85
![Page 22: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/22.jpg)
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jsp
L. GARNIER xhtml-css L1 Info1B. 7 / 85
![Page 23: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/23.jpg)
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
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/
L. GARNIER xhtml-css L1 Info1B. 7 / 85
![Page 24: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/24.jpg)
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
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/
L. GARNIER xhtml-css L1 Info1B. 7 / 85
![Page 25: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/25.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 26: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/26.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 27: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/27.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 28: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/28.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 29: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/29.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 30: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/30.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<title>Ma premiere page XHTML </title>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 31: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/31.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<title>Ma premiere page XHTML </title>
</head>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 32: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/32.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<title>Ma premiere page XHTML </title>
</head>
<body>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 33: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/33.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<title>Ma premiere page XHTML </title>
</head>
<body>
Partie visible dans le navigateur</body>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 34: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/34.jpg)
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<title>Ma premiere page XHTML </title>
</head>
<body>
Partie visible dans le navigateur</body>
</html>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
![Page 35: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/35.jpg)
Introduction
Types de balises
Définition (balises ouvrante et fermante )
Une balise ouvrante est de la forme <syntaxe> tandis que sa balisefermante est </syntaxe>.
L. GARNIER xhtml-css L1 Info1B. 9 / 85
![Page 36: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/36.jpg)
Introduction
Types de balises
Définition (balises ouvrante et fermante )
Une balise ouvrante est de la forme <syntaxe> tandis que sa balisefermante est </syntaxe>.
<body>
Partie visible dans le navigateur</body>
Définition (balise auto-fermante )
Certaines balises ne vont pas par deux, la syntaxe est <syntaxe />.
L. GARNIER xhtml-css L1 Info1B. 9 / 85
![Page 37: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/37.jpg)
Introduction
Types de balises
Définition (balises ouvrante et fermante )
Une balise ouvrante est de la forme <syntaxe> tandis que sa balisefermante est </syntaxe>.
<body>
Partie visible dans le navigateur</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)
L. GARNIER xhtml-css L1 Info1B. 9 / 85
![Page 38: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/38.jpg)
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.
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 39: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/39.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 40: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/40.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 41: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/41.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 42: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/42.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 43: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/43.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 44: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/44.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 45: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/45.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 46: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/46.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 47: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/47.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse<address> </address>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 48: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/48.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse<address> </address>
• la balise de citation (version bloc)
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 49: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/49.jpg)
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.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse<address> </address>
• la balise de citation (version bloc)<blockquote><p>...</p></blockquote>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
![Page 50: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/50.jpg)
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.
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 51: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/51.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 52: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/52.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 53: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/53.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 54: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/54.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 55: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/55.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 56: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/56.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 57: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/57.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 58: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/58.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)<p>...<q>...</q>...</p>
• la balise de citation de titre ou d’événement
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 59: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/59.jpg)
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.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)<p>...<q>...</q>...</p>
• la balise de citation de titre ou d’événement<p>...<cite>...</cite>...</p>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 60: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/60.jpg)
Introduction
Les balises en ligne (inline)
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)<p>...<q>...</q>...</p>
• 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
L. GARNIER xhtml-css L1 Info1B. 11 / 85
![Page 61: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/61.jpg)
Un peu de style CSS
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
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
L. GARNIER xhtml-css L1 Info1B. 12 / 85
![Page 62: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/62.jpg)
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. GARNIER xhtml-css L1 Info1B. 13 / 85
![Page 63: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/63.jpg)
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}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
L. GARNIER xhtml-css L1 Info1B. 13 / 85
![Page 64: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/64.jpg)
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}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
L. GARNIER xhtml-css L1 Info1B. 13 / 85
![Page 65: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/65.jpg)
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}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
L. GARNIER xhtml-css L1 Info1B. 13 / 85
![Page 66: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/66.jpg)
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}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
• 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. GARNIER xhtml-css L1 Info1B. 13 / 85
![Page 67: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/67.jpg)
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}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
• 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
Définition (octet)
Un octet est la réunion de 8 bits. Les valeurs prises sont entre 0 et
28 −1 = 255.
L. GARNIER xhtml-css L1 Info1B. 13 / 85
![Page 68: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/68.jpg)
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}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
• 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
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
L. GARNIER xhtml-css L1 Info1B. 13 / 85
![Page 69: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/69.jpg)
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
L. GARNIER xhtml-css L1 Info1B. 14 / 85
![Page 70: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/70.jpg)
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
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
L. GARNIER xhtml-css L1 Info1B. 14 / 85
![Page 71: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/71.jpg)
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
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
http://fr.wikipedia.org/wiki/Liste_de_couleurs
L. GARNIER xhtml-css L1 Info1B. 14 / 85
![Page 72: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/72.jpg)
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
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
http://fr.wikipedia.org/wiki/Liste_de_couleurs
Logiciel Gimp et utilisation de la pipette
L. GARNIER xhtml-css L1 Info1B. 14 / 85
![Page 73: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/73.jpg)
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 :
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 74: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/74.jpg)
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 :
• grave; pour un accent grave
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 75: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/75.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 76: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/76.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 77: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/77.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 78: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/78.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 79: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/79.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : é
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 80: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/80.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 81: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/81.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : à
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 82: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/82.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 83: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/83.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : ü
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 84: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/84.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 85: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/85.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œ
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 86: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/86.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 87: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/87.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 88: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/88.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 89: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/89.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 90: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/90.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «» : »
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 91: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/91.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «» : »
© : &copie;
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 92: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/92.jpg)
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 :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «» : »
© : &copie;°: °
L. GARNIER xhtml-css L1 Info1B. 15 / 85
![Page 93: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/93.jpg)
Un peu de style CSS Mise en forme du texte
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.
L. GARNIER xhtml-css L1 Info1B. 16 / 85
![Page 94: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/94.jpg)
Un peu de style CSS Mise en forme du texte
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>
L. GARNIER xhtml-css L1 Info1B. 16 / 85
![Page 95: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/95.jpg)
Un peu de style CSS Mise en forme du texte
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>
L. GARNIER xhtml-css L1 Info1B. 16 / 85
![Page 96: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/96.jpg)
Un peu de style CSS Mise en forme du texte
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; }
L. GARNIER xhtml-css L1 Info1B. 16 / 85
![Page 97: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/97.jpg)
Un peu de style CSS Mise en forme du texte
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; }
L. GARNIER xhtml-css L1 Info1B. 16 / 85
![Page 98: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/98.jpg)
Un peu de style CSS Mise en forme du texte
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
L. GARNIER xhtml-css L1 Info1B. 16 / 85
![Page 99: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/99.jpg)
Un peu de style CSS Mise en forme du texte
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
Valeur par défaut : left
L. GARNIER xhtml-css L1 Info1B. 16 / 85
![Page 100: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/100.jpg)
Un peu de style CSS Mise en forme du texte
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 :
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 101: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/101.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
top : le contenu de la cellule est calé en haut de celle-ci
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 102: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/102.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
• 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 103: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/103.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
• 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 104: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/104.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
• 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 105: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/105.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
• 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 106: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/106.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
• 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 107: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/107.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
• 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 108: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/108.jpg)
Un peu de style CSS Mise en forme du texte
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 :• top
• 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 109: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/109.jpg)
Un peu de style CSS Mise en forme du 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
L. GARNIER xhtml-css L1 Info1B. 17 / 85
![Page 110: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/110.jpg)
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 111: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/111.jpg)
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 112: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/112.jpg)
Un peu de style CSS Mise en forme du texte
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
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 113: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/113.jpg)
Un peu de style CSS Mise en forme du texte
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é absolue
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 114: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/114.jpg)
Un peu de style CSS Mise en forme du texte
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é absolue
• cm : centimètres
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 115: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/115.jpg)
Un peu de style CSS Mise en forme du texte
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é absolue
• cm : centimètres• mm : millimètres
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 116: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/116.jpg)
Un peu de style CSS Mise en forme du texte
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é absolue
• cm : centimètres• mm : millimètres• pt : points (1 pt =0,0352777 cm)
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 117: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/117.jpg)
Un peu de style CSS Mise en forme du texte
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é absolue
• cm : centimètres• mm : millimètres• pt : points (1 pt =0,0352777 cm)
� Pourcentage de la valeur de l’élément parent
L. GARNIER xhtml-css L1 Info1B. 18 / 85
![Page 118: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/118.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 119: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/119.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 120: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/120.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 121: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/121.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 122: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/122.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
• serif
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 123: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/123.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
• serif
• sans-serif
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 124: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/124.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
• serif
• sans-serif
• monospace
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 125: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/125.jpg)
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• 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
L. GARNIER xhtml-css L1 Info1B. 19 / 85
![Page 126: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/126.jpg)
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 20 / 85
![Page 127: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/127.jpg)
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 20 / 85
![Page 128: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/128.jpg)
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal
L. GARNIER xhtml-css L1 Info1B. 20 / 85
![Page 129: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/129.jpg)
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • italic
L. GARNIER xhtml-css L1 Info1B. 20 / 85
![Page 130: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/130.jpg)
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • italic • oblique
L. GARNIER xhtml-css L1 Info1B. 20 / 85
![Page 131: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/131.jpg)
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • italic • oblique
normal est la valeur par défaut
L. GARNIER xhtml-css L1 Info1B. 20 / 85
![Page 132: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/132.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 133: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/133.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 134: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/134.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 135: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/135.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 136: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/136.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 137: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/137.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 138: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/138.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 139: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/139.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 140: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/140.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
✿✿✿✿✿✿
Valeur✿✿✿✿✿✿✿
relative
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 141: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/141.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 142: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/142.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
✿✿✿✿✿✿✿✿
inherit : de la taille de l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 143: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/143.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
• longueur
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 144: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/144.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
• longueur
•✿✿✿
%✿✿
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
✿✿✿✿✿✿✿✿
inherit : de la taille de l’élément parent.
✿✿✿
%✿✿
: pourcentage de la taille de l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 145: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/145.jpg)
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
• longueur
•✿✿✿
%✿✿
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
✿✿✿✿✿✿✿✿
inherit : de la taille de l’élément parent.
✿✿✿
%✿✿
: pourcentage de la taille de l’élément parent.
Exemple concernant la taille des polices
L. GARNIER xhtml-css L1 Info1B. 21 / 85
![Page 146: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/146.jpg)
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 22 / 85
![Page 147: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/147.jpg)
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal
L. GARNIER xhtml-css L1 Info1B. 22 / 85
![Page 148: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/148.jpg)
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold
L. GARNIER xhtml-css L1 Info1B. 22 / 85
![Page 149: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/149.jpg)
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder
✿✿✿✿✿✿
Valeur✿✿✿✿✿✿✿
relative
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 22 / 85
![Page 150: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/150.jpg)
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder •✿✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
✿✿✿✿✿✿✿✿
lighter : moins gras que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 22 / 85
![Page 151: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/151.jpg)
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder •✿✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
✿✿✿✿✿✿✿✿
lighter : moins gras que l’élément parent.
Il est aussi possible de spécifier un nombre qui est un multiple entier de 100.
L. GARNIER xhtml-css L1 Info1B. 22 / 85
![Page 152: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/152.jpg)
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder •✿✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
✿✿✿✿✿✿✿✿
lighter : moins gras que l’élément parent.
Il est aussi possible de spécifier un nombre qui est un multiple entier de 100.
Exemple concernant le poids des polices
L. GARNIER xhtml-css L1 Info1B. 22 / 85
![Page 153: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/153.jpg)
Un peu de style CSS Mise en forme du texte
Espacement des lettres et mots
Définition (Espacement)
L’espacement des lettres se fait par la syntaxe :
{letter-spacing: valeur de l’espace ; }
L. GARNIER xhtml-css L1 Info1B. 23 / 85
![Page 154: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/154.jpg)
Un peu de style CSS Mise en forme du texte
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 ; }
L. GARNIER xhtml-css L1 Info1B. 23 / 85
![Page 155: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/155.jpg)
Un peu de style CSS Mise en forme du texte
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
L. GARNIER xhtml-css L1 Info1B. 23 / 85
![Page 156: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/156.jpg)
Un peu de style CSS Mise en forme du texte
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 :
L. GARNIER xhtml-css L1 Info1B. 23 / 85
![Page 157: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/157.jpg)
Un peu de style CSS Mise en forme du texte
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 :
Balise <hr/>, auto-fermante à placer hors des balises de blocs<p> ...</p> ou autres.
L. GARNIER xhtml-css L1 Info1B. 23 / 85
![Page 158: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/158.jpg)
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 24 / 85
![Page 159: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/159.jpg)
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
✿✿✿✿✿
none : rien
L. GARNIER xhtml-css L1 Info1B. 24 / 85
![Page 160: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/160.jpg)
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
✿✿✿✿✿
none : rienunderline : soulignement inférieur
L. GARNIER xhtml-css L1 Info1B. 24 / 85
![Page 161: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/161.jpg)
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
• overline
✿✿✿✿✿
none : rienunderline : soulignement inférieuroverline : barre au-dessus du texte
L. GARNIER xhtml-css L1 Info1B. 24 / 85
![Page 162: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/162.jpg)
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
• overline
• line-through
✿✿✿✿✿
none : rienunderline : soulignement inférieuroverline : barre au-dessus du texteline-through : texte barré
L. GARNIER xhtml-css L1 Info1B. 24 / 85
![Page 163: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/163.jpg)
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
• overline
• line-through
✿✿✿✿✿
none : rienunderline : soulignement inférieuroverline : barre au-dessus du texteline-through : texte barré
Exemple de soulignement et autres
L. GARNIER xhtml-css L1 Info1B. 24 / 85
![Page 164: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/164.jpg)
Un peu de style CSS Mise en forme du texte
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 :
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 165: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/165.jpg)
Un peu de style CSS Mise en forme du texte
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 :
Dans le fichier html
id="nom"
où nom commence par une lettre
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 166: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/166.jpg)
Un peu de style CSS Mise en forme du texte
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 :
Dans le fichier html
id="nom"
où nom commence par une lettre
Dans le fichier css
#nom {. . .}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 167: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/167.jpg)
Un peu de style CSS Mise en forme du texte
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 :
Dans le fichier html
id="nom"
où nom commence par une lettre
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 :
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 168: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/168.jpg)
Un peu de style CSS Mise en forme du texte
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 :
Dans le fichier html
id="nom"
où nom commence par une lettre
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 :
Dans le fichier html
class="nom"
où nom commence par une lettre
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 169: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/169.jpg)
Un peu de style CSS Mise en forme du texte
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 :
Dans le fichier html
id="nom"
où nom commence par une lettre
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 :
Dans le fichier html
class="nom"
où nom commence par une lettre
Dans le fichier css
.nom {. . .}
Exemple de soulignement et autres
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 170: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/170.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 171: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/171.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
Dans le fichier css
body{
font-weight: normal;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 172: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/172.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 173: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/173.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 174: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/174.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 175: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/175.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 176: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/176.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 177: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/177.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 178: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/178.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 179: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/179.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 180: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/180.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 181: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/181.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 182: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/182.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
texte toujours nouveau
souligné
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 183: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/183.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
texte toujours nouveau
souligné
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 184: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/184.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
texte toujours nouveau
souligné
</span>
</p>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 185: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/185.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Le texte non souligné l’est quand même : le span<span class="souligne"> prend le dessus sur le span<span class="defaut">.
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
</span>
texte toujours nouveau
souligné
</span>
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 186: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/186.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Il est possible de simplifier le css en enlevant tous les span<span class="souligne">, il y a deux solutions :
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 187: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/187.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
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{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 188: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/188.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
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{
text-decoration:underline;
color:red;
}
L’inconvénient est que tous les paragraphes auront ce style.
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 189: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/189.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
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{
text-decoration:underline;
color:red;
}
L’inconvénient est que tous les paragraphes auront ce style.
• il suffit de donner un identifiant au paragraphe ce qui donne dans lefichier html :
<p id="pSouligne">
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 190: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/190.jpg)
Un peu de style CSS Mise en forme du texte
Identifiant et classe
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{
text-decoration:underline;
color:red;
}
L’inconvénient est que tous les paragraphes auront ce style.
• il suffit de donner un identifiant au paragraphe ce qui donne dans lefichier html :
<p id="pSouligne">
et dans le fichier css :#pSouligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
![Page 191: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/191.jpg)
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 :
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 192: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/192.jpg)
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");
}
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 193: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/193.jpg)
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");
}
Exemple d’une image de fond jpeg
où le motif est :
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 194: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/194.jpg)
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");
}
Exemple d’une image de fond jpeg
où le motif est :
Attention, deux extensions possibles : jpg et jpeg.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 195: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/195.jpg)
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");
}
Exemple d’une image de fond jpeg
où le motif est :
Attention, deux extensions possibles : jpg et jpeg.
Exemple d’une image de fond gif
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 196: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/196.jpg)
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");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
••••
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 197: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/197.jpg)
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");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
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 ;•••
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 198: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/198.jpg)
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");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
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 ;• no-repeat pour aucune répétition de l’image, exemple ;••
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 199: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/199.jpg)
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");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
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 ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;•
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 200: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/200.jpg)
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");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
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 ;• 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.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 201: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/201.jpg)
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");
}
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 ;• 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;
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 202: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/202.jpg)
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");
}
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 ;• 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; où valeurg désigne laposition par rapport au côté gauche de la page
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 203: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/203.jpg)
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");
}
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 ;• 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; 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. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 204: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/204.jpg)
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");
}
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 ;• 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; 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. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 205: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/205.jpg)
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");
}
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 ;• 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; 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.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 206: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/206.jpg)
Un peu de style CSS Image de fond
Body et image de fond
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).
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 207: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/207.jpg)
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 208: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/208.jpg)
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 209: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/209.jpg)
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
Pour background-position , il est possible d’utiliser des pourcentages,cm...
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 210: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/210.jpg)
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
Pour background-position , il est possible d’utiliser des pourcentages,cm...body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 25% ;
}
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 211: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/211.jpg)
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
Pour background-position , il est possible d’utiliser des pourcentages,cm...body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 25% ;
}Exemple
L. GARNIER xhtml-css L1 Info1B. 26 / 85
![Page 212: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/212.jpg)
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 :
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 213: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/213.jpg)
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 :
� Pour toutes les balises
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 214: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/214.jpg)
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 :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 215: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/215.jpg)
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 :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 216: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/216.jpg)
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 :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
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 ;
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 217: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/217.jpg)
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 :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
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 ;
• 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 ;
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 218: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/218.jpg)
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 :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
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 ;
• 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 ;
� Pour les balises de lien hypertexte et de formulaire
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 219: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/219.jpg)
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 :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
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 ;
• 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 ;
� 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.
L. GARNIER xhtml-css L1 Info1B. 27 / 85
![Page 220: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/220.jpg)
Les listes
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
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
L. GARNIER xhtml-css L1 Info1B. 28 / 85
![Page 221: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/221.jpg)
Les listes
Types de listes
Il existe trois types de listes :
L. GARNIER xhtml-css L1 Info1B. 29 / 85
![Page 222: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/222.jpg)
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
L. GARNIER xhtml-css L1 Info1B. 29 / 85
![Page 223: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/223.jpg)
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
• les listes ordonnées ;
Exemple
L. GARNIER xhtml-css L1 Info1B. 29 / 85
![Page 224: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/224.jpg)
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
• les listes ordonnées ;
Exemple
• les listes non ordonnées ;
Exemple
L. GARNIER xhtml-css L1 Info1B. 29 / 85
![Page 225: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/225.jpg)
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
• les listes ordonnées ;
Exemple
• les listes non ordonnées ;
Exemple
UNE LISTE NE SE MET NI DANS UN TITRE NI DANS UN
PARAGRAPHE.
L. GARNIER xhtml-css L1 Info1B. 29 / 85
![Page 226: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/226.jpg)
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.
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 227: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/227.jpg)
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. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 228: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/228.jpg)
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. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 229: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/229.jpg)
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
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 230: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/230.jpg)
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
<h1> Liste de définition </h1>
<dl>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 231: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/231.jpg)
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
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 232: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/232.jpg)
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
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 233: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/233.jpg)
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
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 234: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/234.jpg)
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
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 235: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/235.jpg)
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
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu de balle</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 236: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/236.jpg)
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
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu de balle</dd>
<dd>Jeu à 1 ou 2</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 237: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/237.jpg)
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
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu de balle</dd>
<dd>Jeu à 1 ou 2</dd>
</dl>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
![Page 238: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/238.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 239: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/239.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 240: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/240.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 241: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/241.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<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>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 242: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/242.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<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>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 243: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/243.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<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;
text-decoration: underline;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 244: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/244.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<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;
text-decoration: underline;
}
dd{
background-color: black;
color: white;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 245: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/245.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<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;
text-decoration: underline;
}
dd{
background-color: black;
color: white;
}
#dd1{
color:yellow;
margin-right: 5cm;
margin-left: 5cm;
padding-left: 3cm;
border : solid green 0.1em;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 246: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/246.jpg)
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<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;
text-decoration: underline;
}
dd{
background-color: black;
color: white;
}
#dd1{
color:yellow;
margin-right: 5cm;
margin-left: 5cm;
padding-left: 3cm;
border : solid green 0.1em;
}
#dd2{
margin-left: 5cm;
width:150px;
color:yellow;
border : solid green 0.1em;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
![Page 247: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/247.jpg)
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 :
L. GARNIER xhtml-css L1 Info1B. 32 / 85
![Page 248: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/248.jpg)
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>.
L. GARNIER xhtml-css L1 Info1B. 32 / 85
![Page 249: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/249.jpg)
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>.
L. GARNIER xhtml-css L1 Info1B. 32 / 85
![Page 250: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/250.jpg)
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
L. GARNIER xhtml-css L1 Info1B. 32 / 85
![Page 251: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/251.jpg)
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
Exemple de liste à puces ordonnée
L. GARNIER xhtml-css L1 Info1B. 32 / 85
![Page 252: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/252.jpg)
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
![Page 253: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/253.jpg)
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
![Page 254: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/254.jpg)
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
<li>Football</li>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
![Page 255: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/255.jpg)
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
<li>Football</li>
<li>Handball</li>
<li>Rugby</li>
<li>Basket-ball</li>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
![Page 256: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/256.jpg)
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
<li>Football</li>
<li>Handball</li>
<li>Rugby</li>
<li>Basket-ball</li>
</ul>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
![Page 257: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/257.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 258: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/258.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 259: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/259.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 260: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/260.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 261: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/261.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 262: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/262.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 263: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/263.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 264: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/264.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li>Reims (6)
</li>
<li>Paris (6)
</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 265: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/265.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li>Reims (6)
</li>
<li>Paris (6)
</li>
</ol>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 266: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/266.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li>Reims (6)
</li>
<li>Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 267: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/267.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li class="pas">Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li class="pas">Reims (6)
</li>
<li class="pas">Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 268: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/268.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li class="pas">Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li class="pas">Reims (6)
</li>
<li class="pas">Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
Exemple de liste à puces ordonnée
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 269: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/269.jpg)
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li class="pas">Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li class="pas">Reims (6)
</li>
<li class="pas">Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
Exemple de liste à puces ordonnée
Pour toute une liste, on applique le style list-style-type directement à<ol> ou à <ul>.
L. GARNIER xhtml-css L1 Info1B. 34 / 85
![Page 270: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/270.jpg)
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 271: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/271.jpg)
Les listes Liste à puces
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 ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 272: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/272.jpg)
Les listes Liste à puces
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 ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 273: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/273.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 274: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/274.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 275: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/275.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 276: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/276.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 277: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/277.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
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... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 278: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/278.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
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... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 279: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/279.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
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... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;upper-alpha ou upper-latin =⇒lettres majuscules : A, B, C... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 280: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/280.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
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... ;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... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 281: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/281.jpg)
Les listes Liste à puces
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 ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
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... ;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
L. GARNIER xhtml-css L1 Info1B. 35 / 85
![Page 282: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/282.jpg)
Les listes Liste à puces
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
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 283: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/283.jpg)
Les listes Liste à puces
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
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 284: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/284.jpg)
Les listes Liste à puces
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
<ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 285: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/285.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 286: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/286.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 287: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/287.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 288: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/288.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 289: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/289.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 290: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/290.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 291: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/291.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 292: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/292.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</ul>
</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 293: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/293.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</ul>
</li>
</ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 294: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/294.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</ul>
</li>
</ul>
Syntaxe CSSul{/*style de la premiere liste*/
list-style-image:url("Vert.gif");
}
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 295: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/295.jpg)
Les listes Liste à puces
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
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</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");
}
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 296: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/296.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 297: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/297.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 298: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/298.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 299: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/299.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 300: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/300.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 301: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/301.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 302: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/302.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 303: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/303.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 304: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/304.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 305: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/305.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 306: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/306.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 307: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/307.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
<li><!--premiere puce--></li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 308: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/308.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 309: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/309.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la seconde sous-liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 310: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/310.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la seconde sous-liste-->
</li> <!--fin de la seconde puce de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 311: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/311.jpg)
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--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-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la seconde sous-liste-->
</li> <!--fin de la seconde puce de la premiere liste-->
</ul> <!--fin de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
![Page 312: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/312.jpg)
Les compteurs
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
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
L. GARNIER xhtml-css L1 Info1B. 37 / 85
![Page 313: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/313.jpg)
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
L. GARNIER xhtml-css L1 Info1B. 38 / 85
![Page 314: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/314.jpg)
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :
L. GARNIER xhtml-css L1 Info1B. 38 / 85
![Page 315: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/315.jpg)
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
![Page 316: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/316.jpg)
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
![Page 317: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/317.jpg)
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
2 La seconde étape consiste, dans l’élément contenant le compteur, à :
ElementContenantCompteur:before{
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
![Page 318: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/318.jpg)
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
2 La seconde étape consiste, dans l’élément contenant le compteur, à :
• incrémenter le compteur
ElementContenantCompteur:before{
counter-increment: nomCompteur ValeurDIncrementation;
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
![Page 319: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/319.jpg)
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
2 La seconde étape consiste, dans l’élément contenant le compteur, à :
• incrémenter le compteur• définir le style et l’afficherElementContenantCompteur:before{
counter-increment: nomCompteur ValeurDIncrementation;
content: "Nom " counter(nomCompteur,StyleCompteur) ":";
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
![Page 320: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/320.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 321: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/321.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 322: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/322.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 323: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/323.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 324: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/324.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 325: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/325.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
Un compteur de titre h1
L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 326: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/326.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 327: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/327.jpg)
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Section " counter(section,upper-greek) "." ;
}L. GARNIER xhtml-css L1 Info1B. 39 / 85
![Page 328: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/328.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 329: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/329.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<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>
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 330: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/330.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<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{
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 331: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/331.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<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*/
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 332: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/332.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<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;
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 333: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/333.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<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;
}
ol li:before{
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 334: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/334.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<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;
}
ol li:before{
counter-increment : jeux 4 ;
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 335: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/335.jpg)
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<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;
}
ol li:before{
counter-increment : jeux 4 ;
/* par defaut, la numerotation est en decimal*/
content : "Olympiades " counter(jeux) " : " ;
}
L. GARNIER xhtml-css L1 Info1B. 40 / 85
![Page 336: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/336.jpg)
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
L. GARNIER xhtml-css L1 Info1B. 41 / 85
![Page 337: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/337.jpg)
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<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>
L. GARNIER xhtml-css L1 Info1B. 41 / 85
![Page 338: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/338.jpg)
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<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;
list-style-type : none;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
![Page 339: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/339.jpg)
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<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;
list-style-type : none;
}
ol{
counter-reset : cpt2 0;
list-style-type : none;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
![Page 340: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/340.jpg)
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<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;
list-style-type : none;
}
ol{
counter-reset : cpt2 0;
list-style-type : none;
}
ol li:before{
counter-increment : cpt1 ;
content : "Ville " counter(cpt1,upper-roman) " : " ;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
![Page 341: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/341.jpg)
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<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;
list-style-type : none;
}
ol{
counter-reset : cpt2 0;
list-style-type : none;
}
ol li:before{
counter-increment : cpt1 ;
content : "Ville " counter(cpt1,upper-roman) " : " ;
}
ol li ol li:before{
counter-increment : cpt2 ;
content : "Epreuve " counter(cpt1,upper-roman) "."
counter(cpt2,lower-roman)" : " ;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
![Page 342: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/342.jpg)
Les tableaux
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
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
L. GARNIER xhtml-css L1 Info1B. 42 / 85
![Page 343: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/343.jpg)
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>.
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 344: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/344.jpg)
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.
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 345: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/345.jpg)
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>.
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 346: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/346.jpg)
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>.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
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 347: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/347.jpg)
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>.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
<table>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 348: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/348.jpg)
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>.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
<table>
<tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 349: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/349.jpg)
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>.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
<table>
<tr>
<th>Je suis un titre de cellule</th>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 350: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/350.jpg)
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>.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
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 351: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/351.jpg)
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>.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
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 352: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/352.jpg)
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>.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
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 353: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/353.jpg)
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>.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
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
</tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 354: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/354.jpg)
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>.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
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
</tr>
</table>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
![Page 355: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/355.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Par défaut, un tableau n’a pas de bordure =⇒ CSS
Un tableau à deux lignes et deux colonnes avec bordures
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 356: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/356.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Par défaut, un tableau n’a pas de bordure =⇒ CSS
Un tableau à deux lignes et deux colonnes avec bordures
HTML<table>
<tr>
<th>Premier titre de cellule</th>
<th>Second titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
<td>Je suis une cellule</td>
</tr>
</table>
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 357: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/357.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Par défaut, un tableau n’a pas de bordure =⇒ CSS
Un tableau à deux lignes et deux colonnes avec bordures
HTML<table>
<tr>
<th>Premier titre de cellule</th>
<th>Second titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
<td>Je suis une cellule</td>
</tr>
</table>
CSStable{
border-style: solid;
}
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 358: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/358.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 359: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/359.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 360: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/360.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 361: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/361.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 362: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/362.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 363: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/363.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
/*coller les bordures, par defaut separate*/
border-collapse: collapse;
}
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 364: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/364.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
/*coller les bordures, par defaut separate*/
border-collapse: collapse;
}
td,th{
border: 2px solid red ;
/*Regroupe les trois proprietes des bordures*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 365: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/365.jpg)
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
/*coller les bordures, par defaut separate*/
border-collapse: collapse;
}
td,th{
border: 2px solid red ;
/*Regroupe les trois proprietes des bordures*/
border-collapse: collapse; /*coller les bordures*/
}
L. GARNIER xhtml-css L1 Info1B. 44 / 85
![Page 366: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/366.jpg)
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
L. GARNIER xhtml-css L1 Info1B. 45 / 85
![Page 367: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/367.jpg)
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
Styles des bordures d’un tableau
L. GARNIER xhtml-css L1 Info1B. 45 / 85
![Page 368: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/368.jpg)
Les tableaux Les tableaux standards
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
L. GARNIER xhtml-css L1 Info1B. 45 / 85
![Page 369: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/369.jpg)
Les tableaux Les tableaux standards
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 ;
L. GARNIER xhtml-css L1 Info1B. 45 / 85
![Page 370: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/370.jpg)
Les tableaux Les tableaux standards
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 ;
L. GARNIER xhtml-css L1 Info1B. 45 / 85
![Page 371: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/371.jpg)
Les tableaux Les tableaux standards
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 ;
L. GARNIER xhtml-css L1 Info1B. 45 / 85
![Page 372: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/372.jpg)
Les tableaux Les tableaux standards
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 ;
• en bas via border-bottom-toto.
Sudoku
L. GARNIER xhtml-css L1 Info1B. 45 / 85
![Page 373: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/373.jpg)
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).
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 374: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/374.jpg)
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).
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
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 375: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/375.jpg)
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).
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
<h1> Marges intérieures et extérieures </h1>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 376: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/376.jpg)
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).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.
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 377: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/377.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
<div>
<hr />
</div>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 378: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/378.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
<div>
<table>
</table>
<hr />
</div>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 379: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/379.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
<div>
<table>
<tr>
</tr>
<tr>
</tr>
</table>
<hr />
</div>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 380: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/380.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<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>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 381: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/381.jpg)
Les tableaux Marges intérieures et extérieures
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;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 382: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/382.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 2
<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;
}
<h1> Marges intérieures
et extérieures </h1>
<hr />
<div>
<hr />
</div>
div{
border : 5px dashed green;
padding-left: 50px;
padding-top: 1cm;
padding-right: 10px;
padding-bottom: 2cm;
margin : 1cm;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 383: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/383.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 3
<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-collapse: collapse;
border: 7px solid blue;
font-size: 0.75cm;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 384: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/384.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 4
<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-collapse: collapse;
border: 7px solid blue;
font-size: 0.75cm;
}
td{
border: 7px dashed blue;
width: 12cm;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 385: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/385.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 5
<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{
border: 7px dashed blue;
width: 12cm;
}
.cl1{
padding-left: 1cm;
padding-top: 3cm;
border-bottom-style: solid;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 386: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/386.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 6
<table>
<tr>
<td class="cl1" >p-left:1cm;
</td>
<td class="cl1" >p-top:3cm;
</td>
</tr>
<tr>
<td class="cl2" >p-right:2cm;
</td>
<td class="cl2" >p-bottom:3cm;
</td>
</tr>
</table>
td{
border: 7px dashed blue;
width: 12cm;
}
.cl1{
padding-left: 1cm;
padding-top: 3cm;
border-bottom-style: solid;
}
.cl2{
padding-right: 2cm;
padding-bottom: 3cm;
border-top-style: solid;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 387: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/387.jpg)
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape finale
<table>
<tr>
<td class="cl1" >p-left:1cm;
</td>
<td class="cl1" >p-top:3cm;
</td>
</tr>
<tr>
<td class="cl2" >p-right:2cm;
</td>
<td class="cl2" >p-bottom:3cm;
</td>
</tr>
</table>
td{
border: 7px dashed blue;
width: 12cm;
}
.cl1{
padding-left: 1cm;
padding-top: 3cm;
border-bottom-style: solid;
}
.cl2{
padding-right: 2cm;
padding-bottom: 3cm;
border-top-style: solid;
/* pour padding-right*/
text-align: right;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
![Page 388: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/388.jpg)
Les tableaux Marges intérieures et extérieures
Donner un titre à un tableau
Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>,
L. GARNIER xhtml-css L1 Info1B. 47 / 85
![Page 389: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/389.jpg)
Les tableaux Marges intérieures et extérieures
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
L. GARNIER xhtml-css L1 Info1B. 47 / 85
![Page 390: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/390.jpg)
Les tableaux Marges intérieures et extérieures
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
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
L. GARNIER xhtml-css L1 Info1B. 47 / 85
![Page 391: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/391.jpg)
Les tableaux Marges intérieures et extérieures
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
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
Titre en bas d’un tableau
L. GARNIER xhtml-css L1 Info1B. 47 / 85
![Page 392: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/392.jpg)
Les tableaux Marges intérieures et extérieures
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
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
Titre en bas d’un tableau
HTML
<table>
<caption>Statistisque sur les
genres</caption>
<tr>· · ·</table>
L. GARNIER xhtml-css L1 Info1B. 47 / 85
![Page 393: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/393.jpg)
Les tableaux Marges intérieures et extérieures
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
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
Titre en bas d’un tableau
HTML
<table>
<caption>Statistisque sur les
genres</caption>
<tr>· · ·</table>
CSS
caption{
caption-side: bottom;
text-align: right;
}
L. GARNIER xhtml-css L1 Info1B. 47 / 85
![Page 394: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/394.jpg)
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
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 395: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/395.jpg)
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
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 396: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/396.jpg)
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
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 397: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/397.jpg)
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 cellulesDeuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 398: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/398.jpg)
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 cellulesDeuxième ligne : fusion des deux dernières cellulesDeuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 399: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/399.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 400: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/400.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
</table>
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 401: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/401.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
</table>
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 402: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/402.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th >Une
sélection de nos
meilleurs vins</th>
</tr>
</table>
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 403: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/403.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 404: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/404.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 405: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/405.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 406: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/406.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td >En rupture
</td>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 407: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/407.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 408: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/408.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 409: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/409.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 410: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/410.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td >Bouteille
de 75cl</td>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 411: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/411.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</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
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 412: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/412.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 413: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/413.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 414: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/414.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 415: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/415.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 416: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/416.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 417: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/417.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
<td>Vin de paille</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 418: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/418.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
<td>Vin de paille</td>
<td>Bouteille
de 37,5cl</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 419: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/419.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
<td>Vin de paille</td>
<td>Bouteille
de 37,5cl</td>
<td>25- € </td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 420: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/420.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 1
HTML CSS
table{
border: 10px outset green;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 421: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/421.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 2
HTML CSS
table{
border: 10px outset green;
}
caption{
caption-side: bottom;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 422: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/422.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 3
HTML CSS
table{
border: 10px outset green;
}
caption{
caption-side: bottom;
} th{
border : 5px double #cccccc;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 423: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/423.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 4
HTML
<td >Chassagne-
Montrachet</td>
<td >Volnay</td>
<td >Vin jaune
</td>
<td >Vin de paille
</td>
CSS
table{
border: 10px outset green;
}
caption{
caption-side: bottom;
} th{
border : 5px double #cccccc;
}
.td1{
width:70%;
border:inset 5px #6699cc;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 424: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/424.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 4
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{
caption-side: bottom;
} th{
border : 5px double #cccccc;
}
.td1{
width:70%;
border:inset 5px #6699cc;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 425: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/425.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 5
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>
<td >19-
€</td>
<td >24-
€ </td>
<td >25-
€ </td>
CSS
th{
border : 5px double #cccccc;
}
.td1{
width:70%;
border:inset 5px #6699cc;
}
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 426: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/426.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 5
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>
<td class="td2" >19-
€</td>
<td class="td2" >24-
€ </td>
<td class="td2" >25-
€ </td>
CSS
.td1{
width:70%;
border:inset 5px #6699cc;
}
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 427: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/427.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 6
HTML<td class="td2" >19-
€</td>
<td class="td2" >24-
€ </td>
<td class="td2" >25-
€ </td>
<td colspan="2">
En rupture</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 428: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/428.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 6
HTML<td class="td2" >19-
€</td>
<td class="td2" >24-
€ </td>
<td class="td2" >25-
€ </td>
<td id="td3" colspan="2">
En rupture</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 429: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/429.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape finale
HTML
<td id="td3" colspan="2">
En rupture</td>
<td rowspan="2">
Bouteille de 75cl</td>
<td >
Bouteille de 37,5cl</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
.td4{
width :15%;
border:outset 5px #ff00cc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 430: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/430.jpg)
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape finale
HTML
<td id="td3" colspan="2">
En rupture</td>
<td class="td4" rowspan="2">
Bouteille de 75cl</td>
<td class="td4" >
Bouteille de 37,5cl</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
.td4{
width :15%;
border:outset 5px #ff00cc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
![Page 431: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/431.jpg)
Les tableaux Fusion(s) de cellules
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 :
L. GARNIER xhtml-css L1 Info1B. 49 / 85
![Page 432: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/432.jpg)
Les tableaux Fusion(s) de cellules
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 ;
L. GARNIER xhtml-css L1 Info1B. 49 / 85
![Page 433: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/433.jpg)
Les tableaux Fusion(s) de cellules
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.
L. GARNIER xhtml-css L1 Info1B. 49 / 85
![Page 434: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/434.jpg)
Les tableaux Fusion(s) de cellules
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*/
L. GARNIER xhtml-css L1 Info1B. 49 / 85
![Page 435: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/435.jpg)
Les tableaux Fusion(s) de cellules
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*/
border-spacing: 1.0cm 1.75cm;
}
Sans espace Avec espace
L. GARNIER xhtml-css L1 Info1B. 49 / 85
![Page 436: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/436.jpg)
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 437: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/437.jpg)
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 ;
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 438: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/438.jpg)
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 ;2 un pied de tableau tfoot ;
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 439: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/439.jpg)
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 ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 440: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/440.jpg)
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 ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
DANS L’ORDRE : thead, tfoot PUIS tbody.
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 441: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/441.jpg)
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 ;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>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 442: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/442.jpg)
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 ;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>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 443: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/443.jpg)
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 ;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>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
<tfoot>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</tfoot>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 444: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/444.jpg)
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 ;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>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
<tfoot>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
...
<td>...</td>
</tr>
</tbody>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 445: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/445.jpg)
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 ;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>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
<tfoot>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
...
<td>...</td>
</tr>
</tbody>
</table>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
![Page 446: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/446.jpg)
Structuration d’une page xHTML
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
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
L. GARNIER xhtml-css L1 Info1B. 51 / 85
![Page 447: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/447.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 448: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/448.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 449: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/449.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.bandeau { width :600px ;
height :40px ;
background-
color :#00CCFF ;
padding-top : 10px ;
}
.pied_page {
width :600px ;
height :40px ;
background-
color :#33FF99 ;
padding-top : 10px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 450: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/450.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.bandeau { width :600px ;
height :40px ;
background-
color :#00CCFF ;
padding-top : 10px ;
}
.pied_page {
width :600px ;
height :40px ;
background-
color :#33FF99 ;
padding-top : 10px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 451: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/451.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 452: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/452.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 453: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/453.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 454: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/454.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div class="menu">Ceci
est le menu</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 455: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/455.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div class="menu">Ceci
est le menu</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
.menu { float :left ;
width :100px ;
height :200px ;
background-
color :#FF6699 ;
padding-top : 200px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85
![Page 456: L. GARNIER L1 Info1Bufrsciencestech.u-bourgogne.fr/licence1/Info1B...Introduction Salles I.E.M. Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importe quelle](https://reader030.vdocuments.site/reader030/viewer/2022040111/5e583285e4af9f2faf1d0d5f/html5/thumbnails/456.jpg)
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div class="menu">Ceci
est le menu</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
.menu { float :left ;
width :100px ;
height :200px ;
background-
color :#FF6699 ;
padding-top : 200px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85