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

Développement de site web

L. GARNIER

L1 Info1B

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

1 Introduction

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

3 Les listesLes listes de définitionsListe à puces

4 Les compteurs

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

6 Structuration d’une page xHTML

7 Les formulaires

Introduction

1 Introduction2 Un peu de style CSS

Les couleursMise en forme du texteImage de fondLes pseudo-formats

4 Les compteurs5 Les tableaux

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

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

Introduction

Salles I.E.M.

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

Introduction

Salles I.E.M.

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

Introduction

Salles I.E.M.

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

Introduction

Salles I.E.M.

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

Introduction

Salles I.E.M.

Editeur : bluefish lancé par $ bluefish &

Introduction

Salles I.E.M.

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

Introduction

Salles I.E.M.

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

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

Introduction

Le répertoire public_html

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

Introduction

Le répertoire public_html qui doit être accessible en Lecture/Execution pourtout le monde. La commande à lancer sous Linux :$ chmod -R a+rx public_html/

Introduction

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

Merci à Philippe Cavret

Introduction

http ://ufrsciencestech.u-bourgogne.fr/~garnier/

Introduction

Chemin absolu ou chemin relatif

Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html

Introduction

Chemins relatifaucun sens

Introduction

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

Introduction

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

Que des chemins relatifs, aucun chemin absolu

Introduction

Définition d’HTML et de xhtml

Définition (HTML et xhtml)

HTML = HyperText Markup Language

Introduction

XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)

Introduction

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

Introduction

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

Introduction

Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jspValidation des feuilles de styleshttp ://www.css-validator.org/Quelques liens utileshttp ://www.la-grange.net/w3c/html4.01/cover.htmlhttp ://www.alsacreations.com/http ://openweb.eu.org/http ://www.w3schools.com/

Introduction

En-tête xhtml

Un document HTML est un fichier texte qui contient des balises (tag enanglais)

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

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

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

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

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

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

<head>

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

<head>

<title>Ma premiere page XHTML </title>

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

<head>

</head>

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

<head>

</head>

<body>

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

<head>

</head>

<body>

Partie visible dans le navigateur</body>

Introduction

En-tête xhtml

✿✿✿✿✿

écrites✿✿✿

en✿✿✿✿✿✿✿✿✿✿

minuscule

<!DOCTYPE html

<head>

</head>

<body>

</html>

Introduction

Types de balises

Définition (balises ouvrante et fermante )

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

Introduction

Types de balises

<body>

Définition (balise auto-fermante )

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

Introduction

Types de balises

<body>

Définition (balise auto-fermante )

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

Placée entre <head> et </head>, la syntaxe :<link rel="stylesheet" type="text/css" href="chemin" />

permet de définir l’emplacement de la feuille de style (css)

Introduction

Balise de blocs (block)

Définition (balises de bloc, une ouvrante et une fermante )

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

Introduction

Les balises de blocs les plus courantes sont :

• les balises de titre

Introduction

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

Introduction

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

Introduction

• les balises de paragraphe

Introduction

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

Introduction

• la balise générique

Introduction

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

Introduction

• la balise adresse

Introduction

• la balise adresse<address> </address>

Introduction

• la balise de citation (version bloc)

Introduction

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

Introduction

Les balises en ligne (inline)

Définition (balises en ligne, une ouvrante et une fermante )

Une balise en ligne ne génère aucun espace avant ou après et est contenu

dans une balise de bloc.

Introduction

Les balises en ligne les plus courantes sont :

• la balise de lien hypertexte

Introduction

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

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

Introduction

• la balise de mise en évidence

Introduction

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

Introduction

• la balise générique

Introduction

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

Introduction

• la balise de citation (version en ligne)

Introduction

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

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

Introduction

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

Introduction

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

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

Un peu de style CSS

Un peu de style CSS Les couleurs

L’hexadécimal

Définition (chiffres en base b)

Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les

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

L’hexadécimal

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

et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.

L’hexadécimal

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

• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10

L’hexadécimal

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

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

L’hexadécimal

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

• En base 16, les chiffres sont {0;1;2;3;4;5;6;7;8;9;A;B;C;D;E ;F} etF +1 = 10

L’hexadécimal

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

Définition (octet)

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

28 −1 = 255.

L’hexadécimal

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

Définition (octet)

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

28 −1 = 255.

28 = 24×2 =(

En hexadécimal, les valeurs prises sont entre 00 et FF

Les couleurs

• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php

Les couleurs

A écrire en français évidemment

• Couleurs en hexadécimal :#RRGGBB

#000000#000000

#FFFFFF#FFFFFF

#FF0000#FF0000

#00FF00#00FF00

#00A000#00A000

#0000FF#0000FF

#A0A0A0#A0A0A0

#404040#404040

#FFFF00#FFFF00

#FF6000#FF6000

#00FFFF#00FFFF

#FF00FF#FF00FF

Les couleurs

#000000#000000

#FFFFFF#FFFFFF

#FF0000#FF0000

#00FF00#00FF00

#00A000#00A000

#0000FF#0000FF

#A0A0A0#A0A0A0

#404040#404040

#FFFF00#FFFF00

#FF6000#FF6000

#00FFFF#00FFFF

#FF00FF#FF00FF

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

Les couleurs

#000000#000000

#FFFFFF#FFFFFF

#FF0000#FF0000

#00FF00#00FF00

#00A000#00A000

#0000FF#0000FF

#A0A0A0#A0A0A0

#404040#404040

#FFFF00#FFFF00

#FF6000#FF6000

#00FFFF#00FFFF

#FF00FF#FF00FF

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

Logiciel Gimp et utilisation de la pipette

Un peu de style CSS Mise en forme du texte

Les accents

Définition (Accents grave, aigu, circonflexe et autre)

Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est

précédée de & et est suivie de :

Les accents

• grave; pour un accent grave

Les accents

• acute; pour un accent aigu

Les accents

• circ; pour un accent circonflexe

Les accents

• uml; pour un tréma

Les accents

• cedil; pour une cédille

Les accents

é : é

Les accents

é : éè : è

Les accents

é : éè : è

à : à

Les accents

é : éè : è

à : àî : î

Les accents

é : éè : è

à : àî : î

ü : ü

Les accents

é : éè : è

à : àî : î

ü : üç : ç

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «» : »

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «» : »

Les accents

é : éè : è

à : àî : î

ü : üç : ç

œ : &oelig;C : €

< : <> : >

« : «» : »

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

Alignement vertical

Définition (vertical-align)

La syntaxe pour aligner du texte de façon verticale est :

{vertical-align: valeur; }

où valeur prend l’une des valeurs suivantes :

Alignement vertical

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

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

Alignement vertical

• bottom

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

Alignement vertical

• bottom

• baseline

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

Alignement vertical

• bottom

• baseline

• middle

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

Alignement vertical

• bottom

• baseline

• middle

• sub

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

Alignement vertical

• bottom

• baseline

• middle

• sub

• super

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

Alignement vertical

• bottom

• baseline

• middle

• sub

• super

• text-bottom

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

Alignement vertical

• bottom

• baseline

• middle

• sub

• super

• text-bottom

• text-top

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

Alignement vertical

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

bottom

text-top

text-bottom

baseline

Unité de longueur

� Unité relative

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

Unité de longueur

� Unité relative

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

Unité de longueur

� Unité relative

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

Unité de longueur

� Unité relative

� Unité absolue

Unité de longueur

� Unité relative

� Unité absolue

• cm : centimètres

Unité de longueur

� Unité relative

� Unité absolue

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

Unité de longueur

� Unité relative

� Unité absolue

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

Unité de longueur

� Unité relative

� Unité absolue

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

� Pourcentage de la valeur de l’élément parent

Famille de police

Définition (Famille de police)

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

Famille de police

• arial

Famille de police

• arial

• verdana

Famille de police

• arial

• verdana

• helvetica

Famille de police

• arial

• verdana

• helvetica

• serif

Famille de police

• arial

• verdana

• helvetica

• serif

• sans-serif

Famille de police

• arial

• verdana

• helvetica

• serif

• sans-serif

• monospace

Famille de police

• arial

• verdana

• helvetica

• serif

• sans-serif

• monospace

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

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

Style de police

Définition (Style de police)

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

Style de police

• normal

Style de police

• normal • italic

Style de police

• normal • italic • oblique

Style de police

• normal • italic • oblique

normal est la valeur par défaut

Taille des polices

Définition (Taille de la police)

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

Taille des polices

• xx-small

Taille des polices

• xx-small

• x-small

Taille des polices

• xx-small

• x-small

• small

Taille des polices

• xx-small

• x-small

• small

• medium

Taille des polices

• xx-small

• x-small

• small

• medium

• large

Taille des polices

• xx-small

• x-small

• small

• medium

• large

• x-large

Taille des polices

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

Taille des polices

La taille de la police se fait par la syntaxe :

{font-size: valeur; }

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

✿✿✿✿✿✿

Valeur✿✿✿✿✿✿✿

relative

✿✿✿✿✿✿✿✿

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

Taille des polices

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

✿✿✿✿✿✿✿

Valeurs✿✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿✿

✿✿✿✿✿✿✿

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

Taille des polices

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿✿

✿✿✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

Taille des polices

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

• longueur

Taille des polices

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

• longueur

•✿✿✿

%✿✿

✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿✿

✿✿✿✿✿✿✿

✿✿✿✿✿✿✿✿

✿✿✿

%✿✿

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

Taille des polices

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

•✿✿✿✿✿✿✿✿

smaller

•✿✿✿✿✿✿✿

larger

•✿✿✿✿✿✿✿✿

inherit

• longueur

•✿✿✿

%✿✿

✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿✿

✿✿✿✿✿✿✿

✿✿✿✿✿✿✿✿

✿✿✿

%✿✿

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

Exemple concernant la taille des polices

Poids des lettres

Définition (font-weight)

Le poids de la police à utiliser se fait par la syntaxe :

{font-weight: valeur; }

Poids des lettres

• normal

Poids des lettres

• normal • bold

Poids des lettres

• normal • bold •✿✿✿✿✿✿✿

bolder

✿✿✿✿✿✿

Valeur✿✿✿✿✿✿✿

relative

✿✿✿✿✿✿✿

bolder : plus gras que l’élément parent.

Poids des lettres

bolder •✿✿✿✿✿✿✿✿

lighter

✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

Poids des lettres

bolder •✿✿✿✿✿✿✿✿

lighter

✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

Poids des lettres

bolder •✿✿✿✿✿✿✿✿

lighter

✿✿✿✿✿✿✿

relatives

✿✿✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

Exemple concernant le poids des polices

Espacement des lettres et mots

Définition (Espacement)

L’espacement des lettres se fait par la syntaxe :

{letter-spacing: valeur de l’espace ; }

L’espacement des mots se fait par la syntaxe :

{word-spacing: valeur de l’espace ; }

Exemple d’espacements de lettres et de mots

Trait horizontal :

Balise <hr/>, auto-fermante à placer hors des balises de blocs<p> ...</p> ou autres.

Soulignement et autres

Définition (Soulignement)

Un texte souligné, barré ou autre se fait par la syntaxe :

{text-decoration: valeur; }

•✿✿✿✿✿

✿✿✿✿✿

none : rien

•✿✿✿✿✿

• underline

✿✿✿✿✿

none : rienunderline : soulignement inférieur

•✿✿✿✿✿

• underline

• overline

✿✿✿✿✿

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

•✿✿✿✿✿

• underline

• overline

• line-through

✿✿✿✿✿

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

•✿✿✿✿✿

• underline

• overline

• line-through

✿✿✿✿✿

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

Exemple de soulignement et autres

Identifiant et classe

Définition (Identifiant)

Un identifiant est utilisé une et une seule fois dans toute la page html et se fait

par la syntaxe :

Dans le fichier html

id="nom"

où nom commence par une lettre

par la syntaxe :

id="nom"

Dans le fichier css

#nom {. . .}

par la syntaxe :

id="nom"

Dans le fichier css

#nom {. . .}

Définition (Classe)

Une classe peut-être utilisée plusieurs fois dans la page html et se fait par la

syntaxe :

par la syntaxe :

id="nom"

Dans le fichier css

#nom {. . .}

syntaxe :

class="nom"

par la syntaxe :

id="nom"

Dans le fichier css

#nom {. . .}

syntaxe :

class="nom"

Dans le fichier css

.nom {. . .}

Exemple de soulignement et autres

<h1>Text-décoration

Dans le fichier css

font-weight: normal;

Dans le fichier css

h1{text-align:center;

Dans le fichier css

Texte souligné

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

Dans le fichier css

Texte souligné

Dans le fichier css

.souligne{

text-decoration:underline;

color:red;

Texte souligné

Dans le fichier css

.souligne{

color:red;

Texte souligné

texte par défaut,

Dans le fichier css

.souligne{

color:red;

Texte souligné

texte par défaut,

Dans le fichier css

.souligne{

color:red;

.defaut{

text-decoration: none;

color:green;

Texte souligné

texte par défaut,

QUE NENNI,

</span>

Dans le fichier css

.souligne{

color:red;

.defaut{

color:green;

Texte souligné

texte par défaut,

QUE NENNI,

</span>

Dans le fichier css

.souligne{

color:red;

.defaut{

color:green;

#nenni{

font-size: larger;

color:magenta;

font-weight:900;

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

Texte souligné

texte par défaut,

QUE NENNI,

</span>

Dans le fichier css

.souligne{

color:red;

.defaut{

color:green;

#nenni{

font-size: larger;

color:magenta;

font-weight:900;

Texte souligné

texte par défaut,

QUE NENNI,

</span>

texte toujours nouveau

souligné

Dans le fichier css

.souligne{

color:red;

.defaut{

color:green;

#nenni{

font-size: larger;

color:magenta;

font-weight:900;

Texte souligné

texte par défaut,

QUE NENNI,

</span>

souligné

</span>

Dans le fichier css

.souligne{

color:red;

.defaut{

color:green;

#nenni{

font-size: larger;

color:magenta;

font-weight:900;

Texte souligné

texte par défaut,

QUE NENNI,

</span>

souligné

</span>

Dans le fichier css

.souligne{

color:red;

.defaut{

color:green;

#nenni{

font-size: larger;

color:magenta;

font-weight:900;

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

Texte souligné

texte par défaut,

</span>

souligné

</span>

.souligne{

color:red;

.defaut{

color:green;

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

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

color:red;

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

color:red;

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

color:red;

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

et dans le fichier css :#pSouligne{

color:red;

Un peu de style CSS Image de fond

Body et image de fond

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

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

background-image:url("chemin_relatif");

Exemple d’une image de fond jpeg

où le motif est :

Attention, deux extensions possibles : jpg et jpeg.

où le motif est :

Exemple d’une image de fond gif

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

••••

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

•✿✿✿✿✿✿✿

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

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

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

}Exemple

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

background-position: 50% 25% ;

}Exemple

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

background-position: 50% 25% ;

}Exemple

Un peu de style CSS Les pseudo-formats

Pseudo-format

Définition (Pseudo-format)

Un pseudo-format permet d’appliquer un style lors d’un événement :

Pseudo-format

� Pour toutes les balises

Pseudo-format

• b:hover permet de modifier les propriétés du style de la balise b lorsque la

souris passe dessus ;

Pseudo-format

� Pour les balises de lien hypertexte

Pseudo-format

•✿✿✿✿✿✿

a:link permet de définir les propriétés du style de la balise de lien

hypertexte a lorsque l’utilisateur n’a pas visité la page.

• a:active permet de modifier les propriétés du style de la balise de lien

hypertexte a lorsque l’utilisateur clique dessus ;

Pseudo-format

•✿✿✿✿✿✿

• a:visited permet de modifier les propriétés du style de la balise de lien

hypertexte a lorsque l’utilisateur a déjà visité la page ;

Pseudo-format

•✿✿✿✿✿✿

� Pour les balises de lien hypertexte et de formulaire

Pseudo-format

•✿✿✿✿✿✿

� Pour les balises de lien hypertexte et de formulaire

• b:focus permet de modifier les propriétés du style de la balise b

lorsque l’utilisateur clique dessus ou lorsque l’utilisateur utilise les

touches de tabulation pour se déplacer dans la page.

Les listes

Types de listes

Il existe trois types de listes :

Les listes

Types de listes

• les listes de définitions ;

Exemple

Les listes

Types de listes

Exemple

• les listes ordonnées ;

Exemple

Les listes

Types de listes

Exemple

• les listes non ordonnées ;

Exemple

Les listes

Types de listes

Exemple

• les listes non ordonnées ;

Exemple

UNE LISTE NE SE MET NI DANS UN TITRE NI DANS UN

PARAGRAPHE.

Les listes Les listes de définitions

Liste de définition : DL

Définition (Liste de définition)

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

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

La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.

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

Exemple

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

Exemple

<dt>Football</dt>

Exemple

<dt>Football</dt>

<dd>Jeu de ballon</dd>

Exemple

<dt>Football</dt>

Exemple

<dt>Football</dt>

<dt>Tennis</dt>

Exemple

<dt>Football</dt>

<dt>Tennis</dt>

<dd>Jeu de balle</dd>

Exemple

<dt>Football</dt>

<dt>Tennis</dt>

Exemple

<dt>Football</dt>

<dt>Tennis</dt>

Exemple de style avec une liste de définition

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

<dd id="dd1">Jeu de

balle</dd>

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

<dd id="dd1">Jeu de

balle</dd>

<dd id="dd2">Jeu à

1 ou 2</dd>

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

<dd id="dd1">Jeu de

balle</dd>

<dd id="dd2">Jeu à

1 ou 2</dd>

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

<dd id="dd1">Jeu de

balle</dd>

<dd id="dd2">Jeu à

1 ou 2</dd>

Partie CSS

color: blue;

text-decoration: underline;

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

<dd id="dd1">Jeu de

balle</dd>

<dd id="dd2">Jeu à

1 ou 2</dd>

Partie CSS

color: blue;

background-color: black;

color: white;

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

<dd id="dd1">Jeu de

balle</dd>

<dd id="dd2">Jeu à

1 ou 2</dd>

Partie CSS

color: blue;

color: white;

color:yellow;

margin-right: 5cm;

margin-left: 5cm;

padding-left: 3cm;

border : solid green 0.1em;

Exemple

Partie HTML<dl>

<dt>Football</dt>

<dt>Tennis</dt>

<dd id="dd1">Jeu de

balle</dd>

<dd id="dd2">Jeu à

1 ou 2</dd>

Partie CSS

color: blue;

color: white;

color:yellow;

margin-right: 5cm;

margin-left: 5cm;

padding-left: 3cm;

margin-left: 5cm;

width:150px;

color:yellow;

Les listes Liste à puces

Définition de liste à puces, ul et ol

Définition (Liste à puces)

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

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

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

Le texte qui suit une puce se met entre <li> et </li>.

Exemple de liste à puces non ordonnée

Le texte qui suit une puce se met entre <li> et </li>.

Exemple de liste à puces ordonnée

Exemple de liste non ordonnée

<h1> Liste non ordonnée </h1>

<p>Quelques sports de ballons</p>

<li>Football</li>

<li>Handball</li>

<li>Rugby</li>

<li>Basket-ball</li>

<li>Football</li>

<li>Handball</li>

<li>Rugby</li>

<li>Basket-ball</li>

Exemple de liste ordonnée

Partie HTML

<h1> Liste ordonnée

<p>Les clubs de football ayant

le plus de titre de

champion de France

Partie HTML

le plus de titre de

champion de France

Partie HTML

le plus de titre de

champion de France

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

Partie HTML

le plus de titre de

champion de France

<li>Marseille (9)</li>

<li>Nantes (8)</li>

<li>Monaco (7)</li>

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

<li>Bordeaux (6)</li>

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

<li>Reims (6)

<li>Paris (6)

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

<li>Reims (6)

<li>Paris (6)

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

<li>Lyon (7)

<li>Reims (6)

<li>Paris (6)

Partie CSS

list-style-type: none;

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

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

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

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

Partie CSS

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

Partie CSS

Partie HTML

le plus de titre de

champion de France

<li>Nantes (8)</li>

<li>Monaco (7)</li>

Partie CSS

Pour toute une liste, on applique le style list-style-type directement à<ol> ou à <ul>.

Valeurs possibles de list-style-type

Les valeurs possibles de list-style-type sont :

cas d’une liste non ordonnée

none =⇒ pas de puce ;

✿✿✿✿✿

disc =⇒ disque noir ;

✿✿✿✿✿

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

✿✿✿✿✿

disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.

Listes à puces non ordonnées

✿✿✿✿✿

cas d’une liste ordonnée

✿✿✿✿✿✿✿✿

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

✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

✿✿✿✿✿

✿✿✿✿✿✿✿✿

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

Listes à puces ordonnées

Une image comme puce dans une liste

Définition (Une image à la place d’une puce dans une liste non ordonnée)

La commande list-style-image : url("Chemin"); permet de

remplacer une puce d’une liste non ordonnée par une image.

Des images comme puces dans une liste non ordonnée

Syntaxe HTML<ul>

<li>Le 1er septembre 1939,

la guerre commence

Syntaxe HTML<ul>

la guerre commence

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

<li>La France demande

l’armistice le

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

l’armistice le

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

l’armistice le

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

l’armistice le

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

l’armistice le

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

l’armistice le

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

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

Syntaxe HTML<ul>

la guerre commence

<li>en France</li>

<li>en Pologne</li>

l’armistice le

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

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

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

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

</ul>

</li>

</ul>

</li>

</ul>

Les compteurs

Définition

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

Les compteurs

Définition

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

Les compteurs

Définition

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

Les compteurs

Définition

counter-reset:nomCompteur ValeurInitiale;

Les compteurs

Définition

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

ElementContenantCompteur:before{

Les compteurs

Définition

• incrémenter le compteur

ElementContenantCompteur:before{

counter-increment: nomCompteur ValeurDIncrementation;

Les compteurs

Définition

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

counter-increment: nomCompteur ValeurDIncrementation;

content: "Nom " counter(nomCompteur,StyleCompteur) ":";

Les compteurs

Conter un compteur de titre h1

Un compteur de titre h1

Les compteurs

counter-reset : section -1;

Les compteurs

h1:before{

counter-increment: section 2;

Les compteurs

h1:before{

content : "Titre " counter(section,upper-roman) "/ " ;

Les compteurs

h1:before{

Les compteurs

h1:before{

Les compteurs

h1:before{

content : "Section " counter(section,upper-greek) "." ;

Les compteurs

Conter un compteur de liste ordonnée

Un compteur de liste ordonnée

Les compteurs

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

Les compteurs

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

Les compteurs

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

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

Les compteurs

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

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

list-style-type : none;

Les compteurs

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

ol li:before{

Les compteurs

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

ol li:before{

counter-increment : jeux 4 ;

Les compteurs

<li>Barcelone</li>

<li>Atlanta </li>

<li>Sydney </li>

<li>Athènes </li>

<li>Pékin </li>

<li>Londres </li>

ol li:before{

counter-increment : jeux 4 ;

/* par defaut, la numerotation est en decimal*/

content : "Olympiades " counter(jeux) " : " ;

Les compteurs

Conter des compteurs de listes ordonnées

Les compteurs

<li>Barcelone

<li>basket</li>

<li>plongeon</li>

<li>Atlanta

Les compteurs

<li>Barcelone

<li>basket</li>

<li>plongeon</li>

<li>Atlanta

.ville1{

counter-reset : cpt1 0;

Les compteurs

<li>Barcelone

<li>basket</li>

<li>plongeon</li>

<li>Atlanta

.ville1{

Les compteurs

<li>Barcelone

<li>basket</li>

<li>plongeon</li>

<li>Atlanta

.ville1{

ol li:before{

counter-increment : cpt1 ;

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

Les compteurs

<li>Barcelone

<li>basket</li>

<li>plongeon</li>

<li>Atlanta

.ville1{

ol li:before{

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

ol li ol li:before{

content : "Epreuve " counter(cpt1,upper-roman) "."

counter(cpt2,lower-roman)" : " ;

Les tableaux

Les tableaux Les tableaux standards

Syntaxe pour définir un tableau

Définition (Définition d’un tableau)

Un tableau est defini entre les balises <table> et </table>.

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

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

Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la

colonne, les balises <td> et </td> sont remplacées respectivement par

<th> et </th>.

Un pauvre tableau

<th> et </th>.

Un pauvre tableau

<table>

<th> et </th>.

Un pauvre tableau

<table>

<th> et </th>.

Un pauvre tableau

<table>

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

<th> et </th>.

Un pauvre tableau

<table>

<th> et </th>.

Un pauvre tableau

<table>

<th> et </th>.

Un pauvre tableau

<table>

<td>Je suis une cellule</td>

<th> et </th>.

Un pauvre tableau

<table>

<th> et </th>.

Un pauvre tableau

<table>

</table>

Tableau et bordures

Par défaut, un tableau n’a pas de bordure =⇒ CSS

Un tableau à deux lignes et deux colonnes avec bordures

Tableau et bordures

HTML<table>

<th>Premier titre de cellule</th>

<th>Second titre de cellule</th>

</table>

Tableau et bordures

HTML<table>

<th>Premier titre de cellule</th>

<th>Second titre de cellule</th>

</table>

CSStable{

border-style: solid;

Tableau et bordures

td,th{

border-style: double; /*style des bordures, deux traits*/

Tableau et bordures

td,th{

border-color: red; /*couleur des bordures*/

Tableau et bordures

td,th{

border-width: 10px; /*epaisseur des bordures*/

Tableau et bordures

td,th{

table{

border-style: solid;/*style des bordures, un trait*/

Tableau et bordures

td,th{

table{

/*coller les bordures, par defaut separate*/

border-collapse: collapse;

Tableau et bordures

td,th{

table{

td,th{

border: 2px solid red ;

/*Regroupe les trois proprietes des bordures*/

Tableau et bordures

td,th{

table{

td,th{

border: 2px solid red ;

/*Regroupe les trois proprietes des bordures*/

border-collapse: collapse; /*coller les bordures*/

Valeur possible pour border-style

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

Styles des bordures d’un tableau

Hormis pour border-collapse, les propriétés border-toto sontapplicables aux listes, puces, paragraphes, titres, div et span.

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

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

• à gauche via border-left-toto ;

• à droite via border-right-toto ;

• au-dessus via border-top-toto ;

• en bas via border-bottom-toto.

Sudoku

Les tableaux Marges intérieures et extérieures

Marges

Définition (Marges)

Les marges extérieures (resp. intérieures) se définissent par margin (resp.

padding).

Marges

padding).

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

right, soit top, soit left, soit bottom.

Marges Marges sans CSS

Marges

padding).

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

right, soit top, soit left, soit bottom.

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

Marges

padding).Pour différencier les côtés, les marges extérieures (resp. intérieures) se

définissent par margin-cote (resp. padding-cote) où cote vaut soitright, soit top, soit left, soit bottom.

<hr />

Marges

<hr />

</div>

Marges

<hr />

<table>

</table>

<hr />

</div>

Marges

<hr />

<table>

</table>

<hr />

</div>

Marges

<hr />

<table>

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

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

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

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

</table>

<hr />

</div>

Marges

Marges Marges sans CSS Etape 1

<h1> Marges intérieures

et extérieures </h1>

<hr />

border : 3px dashed red;

margin-left: 10%;

padding-left: 20%;

padding-bottom: 1cm;

margin-bottom: 2cm;

Marges

<hr />

border : 3px dashed red;

margin-left: 10%;

padding-left: 20%;

margin-bottom: 2cm;

<hr />

</div>

border : 5px dashed green;

padding-left: 50px;

padding-top: 1cm;

padding-right: 10px;

margin : 1cm;

Marges

<table>

<td >p-left:1cm;

<td >p-top:3cm;

<td >p-right:2cm;

<td >p-bottom:3cm;

</table>

table{

border: 7px solid blue;

font-size: 0.75cm;

Marges

<table>

<td >p-left:1cm;

<td >p-top:3cm;

<td >p-right:2cm;

<td >p-bottom:3cm;

</table>

table{

border: 7px solid blue;

font-size: 0.75cm;

border: 7px dashed blue;

width: 12cm;

Marges

<table>

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

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

<td >p-right:2cm;

<td >p-bottom:3cm;

</table>

width: 12cm;

padding-left: 1cm;

padding-top: 3cm;

border-bottom-style: solid;

Marges

<table>

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

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

</table>

width: 12cm;

padding-left: 1cm;

padding-top: 3cm;

padding-right: 2cm;

border-top-style: solid;

Marges

Marges Marges sans CSS Etape finale

<table>

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

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

</table>

width: 12cm;

padding-left: 1cm;

padding-top: 3cm;

padding-right: 2cm;

border-top-style: solid;

/* pour padding-right*/

text-align: right;

Donner un titre à un tableau

Définition (Titre)

Le titre d’un tableau se met entre <caption> et </caption>,

Définition (Titre)

Le titre d’un tableau se met entre <caption> et </caption>, juste après

le mot <table>.

Titre à un tableau

Définition (Titre)

le mot <table>.

Titre à un tableau

La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit

✿✿✿✿

top, soit bottom

Définition (Titre)

le mot <table>.

Titre à un tableau

✿✿✿✿

top, soit bottom

Titre en bas d’un tableau

Définition (Titre)

le mot <table>.

Titre à un tableau

✿✿✿✿

top, soit bottom

<table>

<caption>Statistisque sur les

genres</caption>

Définition (Titre)

le mot <table>.

Titre à un tableau

✿✿✿✿

top, soit bottom

<table>

<caption>Statistisque sur les

genres</caption>

caption{

caption-side: bottom;

text-align: right;

Les tableaux Fusion(s) de cellules

Plusieurs cellules sur une ligne ou une colonne

Définition (Fusion de cellules)

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

rowspan="NbeDeCellulles").

Fusions de cellules dans un tableau

Une sélection de nos meilleurs vins

Chassagne-Montrachet En rupture

Volnay Bouteille de 75cl 19CVin jaune 24C

Vin de paille Bouteille de 37,5cl 25C

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

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

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

Fusions de cellules dans un tableau sans CSS

<table>

</table>

<table>

<caption>A boire avec

modération</caption>

</table>

<table>

<th >Une

sélection de nos

meilleurs vins</th>

</table>

<table>

<th colspan="3" >Une

sélection de nos

meilleurs vins</th>

</table>

<table>

sélection de nos

meilleurs vins</th>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td >Chassagne-Montrachet

</table>

<table>

sélection de nos

meilleurs vins</th>

<td >En rupture

</table>

<table>

sélection de nos

meilleurs vins</th>

<td colspan="2" >En rupture

</table>

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

<table>

sélection de nos

meilleurs vins</th>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

<td >Bouteille

de 75cl</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

<td rowspan="2" >Bouteille

de 75cl</td>

</table>

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

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

<td>Vin jaune</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

<td>Vin jaune</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

<td>Vin jaune</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

<td>Vin jaune</td>

<td>Vin de paille</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

<td>Vin jaune</td>

<td>Bouteille

de 37,5cl</td>

</table>

<table>

sélection de nos

meilleurs vins</th>

<td>Volnay</td>

de 75cl</td>

<td>Vin jaune</td>

<td>Bouteille

de 37,5cl</td>

</table>

Sans CSS Résultat final Etape 1

HTML CSS

table{

border: 10px outset green;

HTML CSS

table{

caption{

HTML CSS

table{

caption{

border : 5px double #cccccc;

<td >Chassagne-

Montrachet</td>

<td >Volnay</td>

<td >Vin jaune

<td >Vin de paille

table{

caption{

width:70%;

border:inset 5px #6699cc;

<td class="td1" >Chassagne-

Montrachet</td>

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

<td class="td1" >Vin jaune

<td class="td1" >Vin de paille

caption{

width:70%;

HTML<td class="td1" >Chassagne-

Montrachet</td>

<td >19-

€</td>

<td >24-

€ </td>

<td >25-

€ </td>

width:70%;

border:outset 5px #00ffcc;

text-align:right;

HTML<td class="td1" >Chassagne-

Montrachet</td>

<td class="td2" >19-

€</td>

€ </td>

width:70%;

text-align:right;

HTML<td class="td2" >19-

€</td>

€ </td>

En rupture</td>

text-align:right;

border:dashed 5px #ffcccc;

text-align:center;

HTML<td class="td2" >19-

€</td>

€ </td>

En rupture</td>

text-align:right;

text-align:center;

Sans CSS Résultat final Etape finale

En rupture</td>

Bouteille de 75cl</td>

Bouteille de 37,5cl</td>

text-align:right;

text-align:center;

width :15%;

border:outset 5px #ff00cc;

text-align:center;

Sans CSS Résultat final Etape finale

En rupture</td>

Bouteille de 75cl</td>

Bouteille de 37,5cl</td>

text-align:right;

text-align:center;

width :15%;

border:outset 5px #ff00cc;

text-align:center;

Espacement entre les cellules

Définition (Espace entre les cellules)

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

• border-spacing : valeurNumerique; donne la valeur

d’espacement des quatre côtés des cellules ;

• border-spacing : valeurNumeriqueH valeurNumeriqueV;

donne la valeur d’espacement horizontaux via valeurNumeriqueH et

verticaux via valeurNumeriqueV.

table{

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

table{

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

border-spacing: 1.0cm 1.75cm;

Sans espace Avec espace

Les tableaux Les grands tableaux

Tableaux par morceaux

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

1 un en-tête de tableau thead ;

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

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

DANS L’ORDRE : thead, tfoot PUIS tbody.

Exemple de grand tableau

<table>

<caption>Le titre</caption>

<table>

<thead>

</thead>

<table>

<thead>

</thead>

<tfoot>

</tfoot>

<table>

<thead>

</thead>

<tfoot>

</tfoot>

<tbody>

</tbody>

<table>

<thead>

</thead>

<tfoot>

</tfoot>

<tbody>

</tbody>

</table>

Structuration d’une page xHTML

Balise <div>...</div>

html css capture

html css capture<body>

class="bandeau">Ceci

est le bandeau</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 ;

</body>

.bandeau { width :600px ;

height :40px ;

background-

color :#00CCFF ;

.pied_page {

width :600px ;

height :40px ;

background-

color :#33FF99 ;

class="contenu">Ceci

est le contenu</div>

</body>

.contenu { width :600px ;

height :200px ;

background-

color :#FFCC00 ;

padding-top : 200px ; }

</body>

height :200px ;

background-

color :#FFCC00 ;

<div class="menu">Ceci

est le menu</div>

</body>

height :200px ;

background-

color :#FFCC00 ;

est le menu</div>

</body>

height :200px ;

background-

color :#FFCC00 ;

.menu { float :left ;

width :100px ;

height :200px ;

background-

color :#FF6699 ;

est le menu</div>

</body>

height :200px ;

background-

color :#FFCC00 ;

.menu { float :left ;

width :100px ;

height :200px ;

background-

color :#FF6699 ;

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

Documents

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

Linux Tome1

Linux Scripting

Commandes Linux

La station de travail Linux - dsfc.net Linux... · La station de travail Linux Denis Szalkowski Formateur Consultant

Formation Unix/Linux utilisation en ligne de commandesilecs.info/formations/Linux-LPI/linux-utilisation-4pp.pdf · p. 1 Formation Unix/Linux utilisation en ligne de commande Guillaume

Guide pratique de la compatibilité matérielle avec Linux - The Linux

Linux commandes

Linux Pentesting Kali linux 2 - pdf.websafe.fr · Linux Kali linux 2.0 - Partie 2 - Dans notre précédent numéro, nous avons présenté différents moyens d’obtenir la distribution

Cours linux

Utilizare Linux

Linux Embarque

Admin Linux

Composition musicale sous GNU/Linux - esaracco.fr · Dossier Composition musicale 2 Linux+ 04/2008 Dossier Composition musicale 3 linux@software.com.pl Composition musicale sous GNU/Linux

Tutoriel Linux

Formation Linux

Linux PCMCIA HOWTO - Linux Documentation Project

Редакция Cinnamon - Main Page - Linux Mint · Введение в Linux Mint Linux Mint – компьютерная операционная система, предназначенная

Linux Pres

Linux Desktop

Administration Linux