Html&css

Une page Web
GL & UML GL & UML
J-P Comet J-P Comet
Introduction
BD avancées et Interfaces Introduction
HTML
CSS Introduction à HTML 5 / CSS 3 HTML
CSS
Pour l’internaute (client)
Un navigateur
Mise en forme Mise en forme
de textes de textes Une URL
Modèle des Modèle des Un document
boı̂tes boı̂tes Des scripts (programmes)
Gestion du Gestion du Pour le fournisseur (serveur)
fond fond
Les tableaux Les tableaux Une adresse
Image, audio, Image, audio, Un serveur (ordinateur)
vidéo vidéo Un serveur (logiciel,
CSS avancé CSS avancé extensions)
Formulaires Formulaires
HTML Jean-Paul Comet (projet Bioinfo Formelle) HTML
Des documents (fichiers)
Des scripts (programmes)
Responsive Responsive
design design une infrastructure
EPU dept GB-BIMB - 5ème année physique
Université de Nice Sophia-Antipolis / Université Côte-d’Azur logicielle
17 septembre 2019
1/82 3/82
Domain Name server – adresse IP Introduction

GL & UML Je veux voir http://www.i3s.unice.fr/˜comet/SUPPORTS/index.php GL & UML
J-P Comet Mon navigateur veut récupérer ˜comet/SUPPORTS/index.php sur J-P Comet
http://www.i3s.unice.fr
Introduction Introduction
HTML HTML Pourquoi apprendre le HTML et le CSS
CSS CSS
2 langages de base, indispensables pour tout projet Web
Demande de résolution
2 standards qui ne possèdent pas de concurrent
Serveur
de textes www.i3s.unice.fr ??? DNS de textes
Modèle des Modèle des
boı̂tes boı̂tes Mais pourquoi ne pas directement utiliser ...
Gestion du Gestion du
fond
134.59.130.2
Serveur fond un framework (Wordpress, Symphony...) ?
but : améliorer la productivité des développeurs
Les tableaux DNS Les tableaux
Image, audio, Image, audio,
un éditeur Wysiwyg (Dreamweaver, BlueGriffon...) ?
Retourne le document
vidéo vidéo
CSS avancé CSS avancé une agence / freelance
(ou une erreur)
à 134.59.130.2,
HTML
Responsive
je souhaite la page
~comet/SUPPORTS/index.php
Serveur
DNS
HTML
Responsive
Apprendre le HTML et le CSS, un bon début pour
design design apprendre à développer... et pour comprendre les
professionnels du secteur.
Recherche de
~comet/SUPPORTS/index.php
4/82 5/82
HTML / CSS Les versions HTML & CSS
GL & UML GL & UML
J-P Comet HTML : HyperText Markup Language (sémantique) J-P Comet

Langage à balise Chaque version modifie un langage, apporte de nouvelles
Introduction
HTML Sert à marquer les différents contenus
Introduction
HTML
fonctionnalités
CSS Indique au navigateur : ceci est un paragraphe, un titre, CSS HTML : travail sur la version 5 (HTML5, HTML1 dès 1991)
Mise en forme
de textes une image... Mise en forme
de textes facilite l’insertion de contenu vidéo
Modèle des
boı̂tes
CSS : Cascading StyleSheets (mise en forme) Modèle des
boı̂tes simplifie la sémantique du contenu
Gestion du Langage de styles Gestion du
CSS : travail sur la version 3 (CSS3)
fond fond
Les tableaux sert à mettre en forme le contenu Les tableaux ombres, dégradés
Image, audio, pour changer la taille d’un texte, sa couleur, ajouter des Image, audio,
bordures arondies...
vidéo vidéo
CSS avancé bordures... CSS avancé
HTML ⇒ NE PAS UTILISER LE HTML POUR METTRE EN HTML
design FORME LE CONTENU (exemple1.html/exemple1.css) design
h1 {
font-weight:normal;
<h1> Un Titre </h1>
color: red;
<p> un paragraphe...</p>
}
6/82 7/82
Travail en local Editeur de texte

GL & UML GL & UML
J-P Comet J-P Comet
HTML HTML
CSS CSS Comment écrire en HTML et en CSS
Mise en forme Travailler en local : Mise en forme
de textes de textes Besoin d’un éditeur de texte ... et rien d’autre
Modèle des Travailler hors ligne Modèle des
boı̂tes
Sur son propre ordinateur boı̂tes L’éditeur de texte...
fond changements non visibles sur internet fond il en existe des milliers
Les tableaux
Intérêt : ne pas impacter directement son site Les tableaux la majorité sont gratuits
emacs, sublime text, komodo edit, notepad++
vidéo Travailler en production : vidéo
CSS avancé
Formulaires Travailler sur la version “live” de son site
CSS avancé
Formulaires
site pour tester son code HTML/CSS :
HTML
Tout changement impacte le site HTML jsbin.com, jsFiddle...
design design https ://validator.w3.org/
8/82 9/82
Eléments, Balises, attributs HTML Eléments, Balises, attributs HTML
GL & UML GL & UML
J-P Comet J-P Comet codes valides ⇒ limitation des bugs / amélioration du
Balise ouvrante/fermante : <p>...</p>
Introduction Introduction référencement.
HTML HTML 1 < ! D O C T Y P E html >
CSS CSS 2 <html >
Mise en forme Mise en forme 3 <head >
de textes de textes 4 <title > Première page HTML </title >
Modèle des Modèle des 5 <meta charset= " utf-8 " >
boı̂tes boı̂tes 6 </head >
7 <body >
8 ...
fond
Les tableaux
Balise orpheline : <br> ou <br/> (reconnu par xml) fond
Les tableaux
9 </body >
10 </html >
vidéo vidéo
CSS avancé CSS avancé Les bonnes pratiques :
Formulaires
HTML
Formulaires
HTML
L’indentation : plus propre et plus lisible
Responsive Responsive Les commentaires : mono-ligne ou multi-lignes.
design design

Attributs complètent les éléments : a pour anchor 
<img src="image.png" alt="Une belle image"> (orpheline) Mise en garde : on peut voir/inspecter l’intégralité du code
HTML... test sur wikipedia par exemple.
10/82 11/82
Les titres Les paragraphes / espaces / retours à la lignes

GL & UML l’élément title : s’inscrit dans la barre haute du navigateur GL & UML
J-P Comet h1 à h6 : heading à l’intérieur de la page J-P Comet

<p> ... </p> : paragraphes
1 < ! D O C T Y P E html >
Introduction 2
3
<html >
<head >
Introduction (passage à la ligne à chaque paragraphe)
HTML HTML
4 <title > Première page HTML </title >
CSS 5 <meta charset= " utf-8 " > CSS 1 < ! D O C T Y P E html >
Mise en forme 6 </head > Mise en forme 2 <html >
de textes 7 de textes 3 <head >
8 <body > 4 <title > Première page HTML </title >
Modèle des Modèle des 5 <meta charset= " utf-8 " >
boı̂tes 9 < ! - -Un titre très important -- > boı̂tes
10 <h1 > Mon titre principal </h1 > 6 </head >
Gestion du Gestion du 7
11
fond fond 8 <body >
12 < ! - -Un titre important -- >
Les tableaux 13 <h2 > Je suis un titre important </h2 > Les tableaux 9 < ! - -Deux titres h1 et h2 -- >
Image, audio, 14 Image, audio, 10 <h1 > Mon titre principal </h1 >
vidéo 15 < ! - -Un autre titre important -- > vidéo 11 <h2 > Je suis un titre important </h2 >
16 <h2 > Moi aussi , je suis un titre important </h2 > 12
CSS avancé CSS avancé
17 13 < ! - -Deux paragraphes différents -- >
Formulaires Formulaires 14 <p > Voici mon premier paragraphe. </p >
HTML 18 < ! - -Un titre un peu moins important -- > HTML
19 <h3 > Je suis un titre d importance moyenne </h3 > 15 <p > Et en voilà un second ! </p >
Responsive 20 Responsive 16 </body >
design 21 < ! - -Etc , etc. -- > design 17 </html >
22 <h4 > Un titre pas très important </h4 >
23 <h5 > Un titre peu important </h5 > Link
24 <h6 > Un titre vraiment peu important </h6 >
25
26
</body >
</html >
le nombres d’espaces ne compte pas
Link <br> : break
Généralement, si nos pages sont bien construites, nous ne dépassons
que rarement le niveau h3. 12/82 13/82
Les paragraphes / espaces / retours à la lignes strong / em / mark
GL & UML GL & UML
J-P Comet J-P Comet

<p> ... </p> : paragraphes <strong> ... </strong> : en gras
Introduction (passage à la ligne à chaque paragraphe) Introduction
HTML HTML
1 < ! D O C T Y P E html > 2 <html >
CSS CSS
2 <html > 3 <head >
Mise en forme Mise en forme 4 <title > Première page HTML </title >
de textes 3 <head > de textes
4 <title > Première page HTML </title > 5 <meta charset= " utf-8 " >
Modèle des 5 <meta charset= " utf-8 " > Modèle des 6 </head >
boı̂tes 6 </head > boı̂tes 7
Gestion du 7 Gestion du 8 <body >
fond 8 <body > fond 9 <h1 > Le langage HTML </h1 >
Les tableaux 9 < ! - -Les espaces ne seront pas affichés -- > Les tableaux 10
10 <h1 > Mon titre principal </h1 > 11 < ! - -Strong indique un texte très important -- >
Image, audio, Image, audio, 12 <p >
vidéo 11 <h2 > Je suis un titre important </h2 > vidéo
12 13 HTML signifie <strong > HyperText Markup Language </ st ro ng > . Ce
CSS avancé CSS avancé 14 langage est utilisé pour marquer sémantiquement un contenu.
13 < ! - -br nous sert à créer des retour à la ligne -- >
Formulaires 14 <p > Voici <br > mon <br > premier <br > paragraphe. </p > Formulaires 15 </p >
HTML 15 <p > Et en voilà un second ! </p > HTML 16 </body >
Responsive 16 </body > Responsive 17 </html >
design 17 </html > design
Link
Link
<em> ... </em> : italique
le nombres d’espaces ne compte pas
<mark> ... </mark> : surligné en jaune
<br> : break
13/82 14/82
Les listes Les listes

GL & UML GL & UML
J-P Comet J-P Comet
HTML HTML
CSS CSS
1 Les listes non-ordonnées : unordered list <ul>
Mise en forme
de textes
1 Les listes non-ordonnées : unordered list <ul> Mise en forme
de textes 2 Les listes ordonnées : ordered list <ol>
Modèle des 1 <ul > Modèle des
1 <ol >
boı̂tes 2 <li > ... </li > ( list item ) boı̂tes
2 <li > ... </li > ( list item )
Gestion du 3 <li > ... </li > Gestion du 3 <li > ... </li >
fond 4 </ul > fond 4 </ol >
Les tableaux Les tableaux 5 <ol type= " 1 " > ... </ol >
Image, audio, Image, audio, 6 <ol type= " I " > ... </ol >
vidéo vidéo 7 <ol type= " i " > ... </ol >
8 <ol type= " A " > ... </ol >
9 <ol type= " a " > ... </ol >
HTML HTML
design design
15/82 15/82
Les listes Les liens
GL & UML GL & UML
Un lien, en HTML, va généralement servir à ”transporter”
J-P Comet J-P Comet un utilisateur d’un endroit vers un autre après que celui-ci
ait cliqué dessus.
HTML HTML liens internes : les liens permettant de se déplacer d’une
CSS CSS page vers une autre à travers un même site
Mise en forme 1 Les listes non-ordonnées : unordered list <ul> Mise en forme
liens externes : permettant de se rendre sur d’autres sites.
de textes de textes
Modèle des
boı̂tes
2 Les listes ordonnées : ordered list <ol> Modèle des
boı̂tes
<a href="...">...</a>
<a href="http://www.wikipedia.fr">c’est ici
Gestion du 3 Les listes de définition : definition list <dl> Gestion du
fond fond qu’il faut cliquer</a>
Les tableaux 1 <dl > Les tableaux
Image, audio, 2 <dt > HTML </dt > ( description term ) Image, audio, <a href="adresse relative">...</a>
pour faire ouvrir dans un nouvel onglet : attribut target
vidéo 3 <dd > HTML signifie HyperText Markup Language. vidéo
4 </dd > ( description definition )
5 </dl >
Formulaires Formulaires 1 < ! D O C T Y P E html >
HTML HTML 2 <html >
Responsive Responsive 3 <head >
Link
design design 4 <title > Les liens en HTML </title >
5 <meta charset= " utf-8 " >
6 </head >
7 <body >
8 <p > Page de départ </p >
9 < ! - -Ce lien va s ’ ouvrir dans un nouvel onglet ou fenêtre -- >
10 <p > Vers <a href= " http: // wikipedia.org " target= " _blank " > Wikipédia< / a > </p >
11 </body >
12 </html >
Link
15/82 16/82
Les autres types de liens Afficher des images

GL & UML GL & UML
J-P Comet Pour se 1 < ! D O C T Y P E html > J-P Comet
déplacer dans
2
3
4
<html >
<head >
<title > Les liens en HTML </title >
Les formats :
Introduction 5 <meta c h a r s e t = " utf-8 " > Introduction GIF (Graphic Interchange Format) : vieux format à déconseiller sauf dans le cas d’images
HTML une page : 6
7
</head >
<body > HTML
animées.
BITMAP (ou BMP) : très bonne prise en charge par tous les navigateurs et éditeurs.
les ancres
CSS 8 <h1 > Les ancres </h1 > CSS
9 <p > Accès direct à <a href= " # ancre1 " > mon ancre n.1< / a > </p > Compression assez mauvaise...
Mise en forme 10 <h2 id= " ancre1 " > Une première ancre </h2 > Mise en forme PNG (Portable Network Graphic) : pour remplacer le format GIF. Gère la transparence. Bon
de textes 11 </body > de textes taux de compression. A utiliser pour les images qui ne sont pas des photographies.
12 </html >
Modèle des Modèle des JPEG (pour Joint Photographic Expert Group) : taux de compression jusqu’à 10 tout en
boı̂tes boı̂tes conservant une très bonne qualité.
fond Pour envoyer
2
3
4
<html >
<head >
<title > Les liens en HTML </title >
fond Le poids des images : attention au volume loué chez
Les tableaux
Image, audio, un mail ; 5
6
<meta c h a r s e t = " utf-8 " >
</head >
Les tableaux
Image, audio,
l’hébergeur / débit pour charger une page (équipements
7
mobiles...) ⇒ effet négatif du visiteur
<body >
vidéo 8 <h1 > Envoyer un mail </h1 > vidéo
CSS avancé 9 <p > M envoyer <a href= " m a i l t o : c o m e t @ u n i c e . f r " > un mail< / a > </p > CSS avancé
10 </body >
Formulaires 11 </html > Formulaires
HTML HTML 2 <html >
Responsive Pour afficher 1 < ! D O C T Y P E html >
Responsive 3
4
<head >
<title > Insérer des images </title >
design 2 design
ou
<html > 5 <meta c h a r s e t = " utf-8 " >
3 <head > 6 </head >
4 <title > Les liens en HTML </title > 7 <body >
télécharger
5 <meta c h a r s e t = " utf-8 " > 8 <h1 > Un joli coucher de soleil </h1 >
6 </head > 9 <img src= " sunset.png "
7 <body >
10
un fichier.
alt= " Un coucher de soleil " >
8 <h1 > Télécharger un fichier </h1 > 11 </body >
9 <p > Télécharger <a href= " cours.pdf " > le cours< / a > </p > 12 </html >
(download)
10 </body >
11 </html >
Dans l’attribut src, on peut mettre une adresse absolue d’une image sur le web
17/82 18/82
Compatibilité du code HTML Sélecteurs et propriétés
GL & UML GL & UML
J-P Comet J-P Comet

CSS : mettre en page un contenu et de changer son apparence en lui appliquant
Introduction Introduction des styles.
HTML maintenant : règles bien définies HTML
Pour appliquer un style à un élément HTML, il faut le sélectionner ou
CSS CSS
Mise en forme avant : chaque navigateur avait sa norme... Mise en forme
le cibler.
de textes de textes Un sélecteur va donc nous permettre de cibler un ou plusieurs éléments
Modèle des comme il y a des caractères réservés, Modèle des HTML
boı̂tes boı̂tes
Gestion du
< ⇒ < > ⇒ > & ⇒ & Gestion du Sélecteurs simples ou complexes
fond ⇒ non breaking space fond
Si l’on souhaite par exemple appliquer un style particulier à tous les
Les tableaux Les tableaux
Image, audio, Tester la validité de son code Image, audio, paragraphes de notre page web, on utilise le sélecteur CSS p.
vidéo vidéo Propriétés CSS : aspects (ou ”styles”) d’un élément HTML
CSS avancé le w3c (World Wide Web Consortium), qui gère l’évolution CSS avancé
la propriété color
Formulaires
HTML
des langages comme le HTML et le CSS entre autres, a Formulaires
HTML
mis à disposition des validateurs de code, gratuits. une ou plusieurs valeurs est/sont attachées à cette propriété
color: red;
design
HTML : https://validator.w3.org/ design
CSS : http://jigsaw.w3.org/css-validator/
19/82 22/82
Emplacement du code CSS Emplacement du code CSS

GL & UML GL & UML
J-P Comet 3 endroits possibles : J-P Comet
Introduction
1 dans un élément HTML style dans le <head> de la page
Introduction
3 endroits possibles :
HTML
CSS
HTML
CSS
1 dans un élément HTML style dans le <head> de la page
2 <html >
Mise en forme 3 <head > Mise en forme 2 dans la balise ouvrante des éléments HTML
de textes 4 <title > Les rôles du HTML et du CSS </title > de textes
Modèle des 5 <style > Modèle des 1 < ! D O C T Y P E html >
boı̂tes 6 body { b a c k g r o u n d - c o l o r : orange; } boı̂tes 2 <html >
7 p { color: blue; 3 <head >
8 f o n t - s i z e : 20 px; } 4 <title > o ù écrire le CSS </title >
fond fond
9 </style > 5 <meta c ha rs et = " utf-8 " / >
Les tableaux 10 </head > Les tableaux 6 </head >
Image, audio, 11 Image, audio, 7 <body style= " ba c k g r ou nd -co lo r: orange; " >
vidéo 12 <body > vidéo 8 <h1 > Un Titre de niveau 1 </h1 >
CSS avancé 13 <h1 > Un Titre de niveau 1 </h1 > CSS avancé 9 <p style= " color: blue; font-size: 20 px; " > un paragraphe...
14 <p > un paragraphe... </p > </p >
15 <p > un autre paragraphe... </p > 10 <p > un autre paragraphe... </p >
HTML HTML
16 </body > 11 </body >
Responsive 17 </html > Responsive 12 </html >
design design
Link Link
2 dans la balise ouvrante des éléments HTML 3 dans un fichier CSS séparé
3 dans un fichier CSS séparé
23/82 23/82
Emplacement du code CSS Commentaires / indentation
GL & UML 3 endroits possibles : GL & UML
J-P Comet 1 dans un élément HTML style dans le <head> de la page J-P Comet
Introduction 2 dans la balise ouvrante des éléments HTML Introduction

HTML 3 dans un fichier CSS séparé HTML
CSS CSS
Mise en forme 1 body { Mise en forme 1 /* je suis un commentaire */
de textes 2 b a c k g r o u n d - c o l o r : orange; de textes 2 body {
Modèle des 3 } Modèle des 3 b a c k g r o u n d - c o l o r : orange;
boı̂tes 4 boı̂tes 4 }
5 p{
6 color: blue;
fond fond 6 /* Un deuxième commentaire
7 f o n t - s i z e : 20 px;
Les tableaux Les tableaux 7 * sur plusieurs lignes */
8 }
8
9 p{
vidéo 1 vidéo
< ! D O C T Y P E html > 10 /* color: blue; */
CSS avancé 2 <html > CSS avancé 11 f o n t - s i z e : 20 px
Formulaires 3 <head > Formulaires 12 }
HTML 4 <title > Les rôles du HTML et du CSS </title > HTML
Responsive 5 <meta charset= " utf-8 " / > Responsive
design 6 <li nk rel= " stylesheet " href= " styles.css " > design
7 </head >
8
9 <body >
10 <h1 > Un Titre de niveau 1 </h1 >
11 <p > un paragraphe... </p >
12 <p > un autre paragraphe... </p >
13 </body >
14 </html >
Link
23/82 24/82
Sélecteurs simples HTML/CSS - les attributs id et class

GL & UML GL & UML
1 sélécteurs CSS simples basés sur des élements HTML : Les sélecteurs #id et .class permettent de cibler un
J-P Comet
1 /* Notre titre h1 va s ’ afficher en rouge */
J-P Comet
élément en particulier plutôt qu’un type d’élément. Link
2 h1 {
Introduction 3 color: red; Introduction 1 < ! D O C T Y P E html >
HTML 4 f o n t - s i z e : 36 px; HTML 2 <html >
5 f o n t - s t y l e : italic; 3 <head >
CSS CSS
6 } 4 <title > Les bases en CSS </title >
Mise en forme 7 Mise en forme 5 <meta c ha rs et = " utf-8 " / >
de textes 8 /* les paragraphes en gras et en bleu */ de textes 6 <li nk rel= " stylesheet " href= " styles.css " >
Modèle des 9 p{ Modèle des 7 </head >
boı̂tes 10 color: blue; boı̂tes 8 <body >
Gestion du 11 f o n t - w e i g h t : bold; Gestion du 9 <h1 > Un Titre de niveau 1 </h1 >
fond 12 } fond 10 <p id= " p1 " > un paragraphe... </p >
13 11 <p class= " p1 " > un autre paragraphe... </p >
14 /* le texte des liens en vert et gras */ 12 </body >
Image, audio, 15 a{ Image, audio, 13 </html >
vidéo 16 color: green; vidéo
CSS avancé 17 f o n t - w e i g h t : bold; CSS avancé 1 # p1 { /* cibler un paragraphe qui a un id */
Formulaires 18 } Formulaires 2 color: blue; }
HTML HTML 3 . p1 { /* cibler un paragraphe qui a un class */
Responsive
design
2 Appliquer un style à différents types d’éléments Responsive
design
4 color: red; }
1 h1 , p { Différences et utilisation avancée

2 color: blue;
3 } Chaque id doit avoir une valeur unique tandis que plusieurs attributs
class peuvent posséder la même valeur.
3 Préférence et limitation des sélecteurs simples : class permet d’appliquer le même style à différents (types)
Comment appliquer une couleur différente à deux paragraphes différents avec le sélecteur simple p ? d’éléments HTML d’un seul coup.
4 deux attributs id et class 25/82
Si conflit, c’est le style du sélecteur le plus précis qui est appliqué.
26/82
L’héritage en CSS L’héritage en CSS
GL & UML
CSS : Cascading StyleSheets, ou Feuilles de Style en
GL & UML
CSS : Cascading StyleSheets, ou Feuilles de Style en
J-P Comet
Cascades.
J-P Comet
Cascades.
Introduction Introduction tout élément HTML enfant va hériter, en cascades ,
tout élément HTML enfant va hériter, en cascades ,
HTML HTML
des styles de ses parents.
CSS des styles de ses parents. CSS
Mise en forme
tous les éléments à l’intérieur de body héritent des styles Mise en forme tous les éléments à l’intérieur de body héritent des styles
de textes de textes
Modèle des de body. Modèle des de body.
boı̂tes
Gestion du 1 < ! D O C T Y P E html >
boı̂tes
Gestion du
Priorité et ordre en CSS Link
fond 2 <html > fond 1 < ! D O C T Y P E html >
Les tableaux 3 <head > Les tableaux 2 <html >
4 <title > L héritage en CSS </title > 3 <head >
Image, audio, 5 <meta charset= " utf-8 " / > Image, audio,
vidéo vidéo 4 <title > L héritage en CSS </title >
6 <li nk rel= " stylesheet " href= " styles.css " > 5 <meta ch ar se t= " utf-8 " / >
CSS avancé 7 </head > CSS avancé 6 <li nk rel= " stylesheet " href= " styles.css " >
Formulaires 8 <body > Formulaires 7 </head >
HTML 9 <h1 > Un Titre de niveau 1 </h1 > HTML 8 <body >
Responsive 10 <p > un paragraphe... </p > Responsive 9 <h1 > Un Titre de niveau 1 </h1 >
design 11 <p > un autre paragraphe... </p > design 10 <p > un paragraphe avec du <strong > texte important </strong >
12 </body > ... </p >
13 </html > 11 <p id= " para3 " > un autre <strong > paragraphe </ st ro ng > ... </p >
12 <p > un dernier paragraphe... </p >
13 </body >
1 body {
14 </html >
2 color: purple;
3 }
1 body { color: purple; }
2 p { color: blue; }
Priorité et ordre en CSS 3
4
# para3 {
strong {
color:
color:
red;
green;
}
}
27/82 27/82
Priorité et ordre en CSS (emplacement) HTML/CSS - Block vs inline

GL & UML GL & UML
Si on écrit le CSS à différents endroits, et si il y a un conflit, le
J-P Comet
style appliqué sera par ordre de priorité J-P Comet
Introduction
HTML
le style directement (grâce à l’attribut style) Introduction
HTML tout élément est soit de type block (bloc), soit de
CSS le style écrit dans l’élément HTML style qui sera retenu. CSS
type inline (en ligne).
de textes le style écrit dans un fichier CSS séparé Link de textes <p> : block <strong> : inline
boı̂tes 1 < ! D O C T Y P E html > boı̂tes de type block :
2 <html >
Gestion du
fond 3 <head >
Gestion du
fond commence sur une nouvelle ligne
4 <title > L héritage en CSS </title >
Les tableaux Les tableaux 1 h1 { color: green; }
5 <meta charset= " utf-8 " / >
Image, audio, 6 <li nk rel= " stylesheet " href= " styles2.css " > Image, audio, 2 p { color: blue ! important;
vidéo 7 <style > h1 { color: purple; } vidéo 3 border: 4 px solid #88 BB11; }
CSS avancé 8 p { color: red; } </style > CSS avancé
Formulaires 9
10
</head >
<body >
Formulaires <p>, <h1>, <h2>, <ol>, <ul>, <form>, <div>
HTML HTML
Responsive
11
12
<h1 > Un Titre de niveau 1 </h1 >
<p > un paragraphe avec du <strong > texte important </strong >
Responsive de type inline
design design
13
... </p >
<p > un autre <strong > paragraphe </strong > ... </p >
s’insère dans une ligne
14 <p > un dernier paragraphe... </p > <strong>, <em>, <a>, <img>, <span>
15 </body >
16 </html >
1 h1 { color: green; }
2 p { color: blue ! important; }
28/82 29/82
HTML/CSS - Div et span HTML/CSS - Div et span
GL & UML
<div> et <span> : aucune valeur sémantique
GL & UML
<div> et <span> : aucune valeur sémantique
J-P Comet
ce sont des conteneurs :
J-P Comet
ce sont des conteneurs :
Introduction
<div> est un élement de type block Link Introduction <div> est un élement de type block Link
HTML
CSS 1 < ! D O C T Y P E html > <html > <head >
HTML
CSS
<span> est un élement de type inline Link
Mise en forme 2 <title > Eléments Div et Span </title > Mise en forme 1 < ! D O C T Y P E html > <html > <head >
de textes 3 <meta charset= " utf-8 " / > de textes 2 <title > Eléments div et span </title >
4 <li nk rel= " stylesheet " href= " c ss - t e s t -d i v- 1 . cs s " > 3 <meta charset= " utf-8 " / >
Modèle des 5 </head > Modèle des
boı̂tes boı̂tes 4 <li nk rel= " stylesheet " href= " 02 - c s s - t e s t - s p a n - 1 . c s s " >
6 <body > 5 </head >
Gestion du 7 <h1 > Div et Span </h1 > Gestion du
6 <body >
fond 8 <div class= " div-para " > fond
7 <h1 > Div et Span </h1 >
Les tableaux 9 <p > L élément p est un élément de type block </p > Les tableaux 8 <div class= " green " >
Image, audio, 10 <p > un <strong > autre </strong > paragraphe... </p > Image, audio, 9 <p > L élément p est un <span class= " blue " > élément de type
vidéo 11 </div > vidéo block </span > </p >
12 </body > 10 <p > un <strong > autre </ st ro ng > paragraphe... </p >
13 </html > 11 </div >
12 </body >
HTML HTML
1 /* notation hexadécimales pour les couleurs */ 13 </html >
Responsive 2 . div-para { b a c k g r o u n d - c o l o r : #88 BB11; Responsive
design 3 f o n t - w e i g h t : bold; } design 1 /* notation hexadécimales pour les couleurs */
2 . green { b a c k g r o u n d - c o l o r : #88 BB11;
3 f o n t - w e i g h t : bold; }
4 . blue { b a c k g r o u n d - c o l o r : #1188 BB; }
<span> est un élement de type inline Link

30/82 30/82
font-family et les google fonts font-family et les google fonts

GL & UML GL & UML
font-family : permet de définir la police du texte. Les web safe fonts : lues par tous les navigateurs
J-P Comet J-P Comet
tous les navigateurs ne supportent pas tous les mêmes Les familles génériques regroupent un ensemble de polices
Introduction Introduction Famille générique Police Famille générique Police
HTML polices. HTML Serif Times New Roman, Sans-serif Arial,
CSS
Mise en forme
le navigateur lit les différentes polices renseignées dans CSS
Mise en forme Monospace
Georgia
Courier New, Cursive
Verdana
Comic sans MS
de textes font-family dans l’ordre et utiliser la première qu’il de textes Lucida Console
Modèle des
boı̂tes
connaı̂t. Modèle des
boı̂tes Les fonts google (lues par (quasiment) tous les
Gestion du
fond
1
2
< ! D O C T Y P E html >
<html >
Gestion du
fond
navigateurs) : https://fonts.google.com/
Les tableaux 3 <head > Les tableaux 1 < ! D O C T Y P E html > <html > <head >
4 <title > Font-family </title > 2 <title > Propriétés de type font </title >
5 <meta charset= " utf-8 " > 3 <meta charset= " utf-8 " >
vidéo vidéo
6 <li nk rel= " stylesheet " href= " c s s - t e s t - f o n t - 1 . c s s " > 4 <li nk rel= " stylesheet " href= " c s s - t e s t - f o n t - 2 . c s s " >
CSS avancé 7 </head > CSS avancé
5 <li nk rel= " stylesheet " href= " http: // f o n t s . g o o g l e a p i s . c o m
Formulaires 8 <body > Formulaires / css ? family=Open + Sans " >
HTML 9 <h1 > La propriété font-family </h1 > HTML 6 </head >
Responsive 10 <p > Un premier paragraphe. </p > Responsive 7 <body >
design 11 <p > Un autre paragraphe </p > design 8 <h1 > Les propriétés de type font </h1 >
12 </body > 9 <p class= " p1 " > Un premier paragraphe </p >
13 </html > 10 <p class= " p2 " > Un autre paragraphe </p >
11 </body >
1 body { 12 </html >
2 f o n t - f a m i l y : " Source code pro " , Verdana , sans-serif;
3 } 1 body { f o n t - f a m i l y : " Open sans " , Georgia , serif; }
Link Link
32/82 33/82
Les propriétés de ”font-” Les propriétés de ”font-”
GL & UML GL & UML
font-size
J-P Comet J-P Comet
en valeur absolue : mm, cm, in, pt (1/72 in), ou pc ( pica 1
2
< ! D O C T Y P E html > <html > <head >
<title > Les espaces </title >
Introduction = 1pc = 12pt) Introduction 3
4
<meta charset= " utf-8 " >
<li nk rel= " stylesheet " href= " 03 - c s s - t e s t - e s p a c e m e n t . c s s " >
HTML
en valeur relative : % (pourcentage), em (fonte parente), HTML
5 </head >
CSS CSS 6
Mise en forme ex (caract. x), px (pixels) Mise en forme 7 <body >
de textes
inherit : valeur de l’élément parent de textes 8
9
<h1 > Gestion des espaces </h1 >
<p class= " p1 " > Un premier paragraphe </p >
boı̂tes font-style boı̂tes 10
11
<p class= " p2 " > rf.ecinu@temoc </p >
</body >
fond normal / italic / oblique (force l’oblique même si la police fond
12 </html >
Les tableaux
Image, audio,
ne connaı̂t pas l’italic) / inherit Les tableaux
Image, audio, 1 . p1 { le tter-spaci ng: 5 px;
2
vidéo
font-weight vidéo
3
word-spacing: 500\%;
/* Le texte ira de gauche vers la droite ! */
}
4
Formulaires normal / lighter / bold / bolder Formulaires 5
. p2 { f o n t - f a m i l y : " Courier New " ; f o n t - w e i g h t : bold; color: green;
text-indent : 200 px; t e x t - a l i g n : left;
HTML HTML
Responsive
100 / 200 / 300 / 400= normal / ... / 700=bold / 800 / Responsive
6 let ter-spa cin g: -24px; }
design 900 design
inherit / initial
les espacements
line-height : 20px / 50%
letter-spacing : 20px / 10% Link
word-spacing : 10px / 10%

34/82 35/82
Couleur et Opacité d’un texte Les propriétés de type text

GL & UML
color : GL & UML
text-* / font-*
J-P Comet nom de couleur (red, blue...) J-P Comet
text-align : left / right / center / justify /
valeur hexadécimale (#AA8811...) inherit
valeur RGB ou RGBa :
HTML HTML
text-transform : lowercase / uppercase /
CSS color: RGB(255,120,000); CSS
Mise en forme Mise en forme capitalize / inherit / none (héritage)
de textes Opacity : ∈ [0, 1] de textes
Modèle des Modèle des text-decoration : underline / overline /
RGBa(250,000,000,0.8)
boı̂tes
Gestion du
boı̂tes
Gestion du
line-through / inherit / initial / none
1 < ! D O C T Y P E html > <html > <head >
fond
Les tableaux
2 <title > Couleur et opacité </title > fond
Les tableaux
text-indent : -50px, 20px, 20px,
Image, audio, 4 </head > Image, audio, text-shadow : ombres... nécessite 4 valeurs
vidéo 5 <body > vidéo
CSS avancé 6 <h1 > Couleur et opacité des textes </h1 >
Link CSS avancé La projection horizontale de l’ombre (en px) ;
7 <p class= " p1 " > Un premier paragraphe </p >
Formulaires 8 <p class= " p2 " > Un autre paragraphe </p > Formulaires La projection verticale de l’ombre (en px) ;
HTML HTML
Responsive
9
10 </html >
</body >
Responsive Le rayon de propagation de l’ombre (le radius , en px) ;
design design La couleur de l’ombre (comme color).
1 /* couleur de fond + transparence */
2 body { b a c k g r o u n d - c o l o r : \#008080; } 1 /* Ombre gris-foncé en bas à droite */
3 h1 { color: orange; 2 h1 { text-shadow: 10 px 10 px 6 px #444; }
4 opacity: 0.5; } 3 /* Ombre bleue en bas à gauche */
5 /* Quasiment transparent */ 4 . p1 { f o n t - s i z e : 30 px;
6 . p1 { color: \# FFF; 5 text-shadow: -10px 10 px 6 px blue; }
7 opacity: 0.2; } 6 /* Ombre rouge centrée sur le texte */
8 /* Quasiment opaque */ 7 . p2 { f o n t - s i z e : 30 px;
9 . p2 { color: RGBa (255 ,000 ,000 ,0.9) ; } 8 text-shadow: 0 px 0 px 6 px RGB (200 ,000 ,025) ; }
36/82 37/82
Le modèle des boı̂tes Width & Height
GL & UML GL & UML
La hauteur par défaut d’un élément est déterminée par son
J-P Comet
tout élément HTML J-P Comet contenu.
peut être considéré height : valeur absolue / valeur relative / auto
Introduction
HTML
comme une boı̂te Introduction
HTML La largeur d’un élément est déterminée par son type :
CSS rectangulaire (type CSS de type block : occupe tout l’espace disponible
de textes block ou inline) de textes de type inline : largeur nécessaire au contenu
Modèle des Modèle des width : valeur absolue / valeur relative / auto
boı̂tes boı̂tes
Gestion du 1 < ! D O C T Y P E html > <html > <head > Gestion du 1 < ! D O C T Y P E html > <html > <head >
fond 2 <title > Le modèle des boites </title > fond 2 <title > Le modèle des boı̂tes </title >
Les tableaux 3 <meta charset= " utf-8 " > Les tableaux 3 <meta c ha rs et = " utf-8 " >
Image, audio, 4 <li nk rel= " stylesheet " href= " 04 - c s s - t e s t - l e s b o i t e s - 1 . c s s " > Image, audio, 4 <li nk rel= " stylesheet " href= " 04 - c s s - t e s t - l e s b o i t e s - 2 . c s s " >
vidéo 5 </head > vidéo 5 </head >
6 <body > 6 <body >
CSS avancé CSS avancé 7
7 <div > <div >
Formulaires 8 <h1 > Le modèle des boites </h1 > Formulaires 8 <h1 > Le modèle des boı̂tes </h1 >
HTML 9 <p > Un premier paragraphe </p > HTML 9 <p class= " para1 " > Un premier paragraphe. </p >
Responsive 10 <p > Un autre paragraphe </p > Responsive 10 <p class= " para2 " > Un autre paragraphe </p >
design 11 </div > design 11 </div >
12 Et voila , c est fini. 12 </body >
13 </body > 13 </html >
14 </html >
1 div { b a c k g r o u n d - c o l o r : #088; width: 440 px; }
1 div { 2 h1 { width: 400 px; background-color: white;
2 b a c k g r o u n d - c o l o r : #088; width: 50\%; padding: 20 px; 3 height: 50 px; border: 1 px solid black; }
3 border: 40 px solid #0 C0; margin: 30 px; 4 . para1 { width: 400 px; background-color: red;
4 } 5 p ad di ng : 50 px; border: 5 px solid # A04; }
Link 39/82 Link 40/82
Les bordures Les marges / Les ombres

GL & UML
border-style : solid / dotted / dashed / groove/ridge/inset/outset GL & UML
padding-top, padding-right, padding-bottom,
J-P Comet
border-width : 3px ; J-P Comet
padding-left, padding
Introduction border-color : red / #AA1188 ; Introduction margin-top, margin-right, margin-bottom,
HTML HTML
CSS
border:
n 2px solid yellow; CSS
margin-left, margin
border-top: ... ; border-right: ... ;
Mise en forme Mise en forme "margin: auto;" centrage dans le block parent (largeur déf + type block)
de textes border-bottom: ... ; border-left: ... ; de textes
Modèle des Arrondi : border-radius: 5px; Modèle des box-shadow
boı̂tes boı̂tes
Gestion du border-top-left-radius: 5px; border-top-right-radius: 5px; Gestion du 1 < ! D O C T Y P E html > <html > <head >
fond border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; fond 2 <title > Le modèle des boı̂tes </title > <meta charset= " utf-8 " >
3 <li nk rel= " stylesheet " href= " c s s - t e s t - s h a d o w - 2 . c s s " >
1 < ! D O C T Y P E html > <html > <head > 4 </head >
Image, audio, 2 <title > Le modèle des boı̂tes </title > <meta charset= " utf-8 " > Image, audio, 5 <body >
vidéo 3 <li nk rel= " stylesheet " href= " c s s - t e s t - b o r d e r - 1 . c s s " > vidéo 6 <div >
CSS avancé 4 </head > CSS avancé 7 <h1 > Les ombres des boı̂tes </h1 >
Formulaires 5 <body > Formulaires 8 <p class= " para1 " > Un premier paragraphe. </p >
HTML 6 <div > HTML 9 <p class= " para2 " > Un autre paragraphe </p >
Responsive 7 <h1 > Les bordures </h1 > Responsive 10 </div >
design 8 <p class= " para1 " > Un premier paragraphe. </p > design 11 </body >
9 <p class= " para2 " > Un autre paragraphe </p > 12 </html >
10 </div >
11 </body > 1 div { b a c k g r o u n d - c o l o r : #08090 B; width: 400 px; Link
12 </html > Link 2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px;
3 b o x - s h a d o w : 6 px 6 px 15 px orange; }
1 div { b a c k g r o u n d - c o l o r : #48 B; width: 400 px; 4 . para1 { width: 50%; margin: 0 px auto; padding: 20 px;
2 border: 10 px ridge #444; b o r d e r - r a d i u s : 25 px; } 5 border: 4 px solid # BB0; b o x - s h a d o w : -6px -6px 15 px yellow; }
3 . para1 { b o r d e r - w i d t h : 10 px; width: 75%; 6 . para2 { width: 50%; margin: 50 px auto; pa dd in g: 20 px;
4 b o r d e r - s t y l e : inset; b o r d e r - t o p - l e f t - r a d i u s : 10 px; 7 border: 2 px solid #0 B0; b o x - s h a d o w : -4px 4 px 15 px lime inset;
5 b o r d e r - c o l o r : yellow; b o r d e r - b o t t o m - r i g h t - r a d i u s : 10 px; } }
41/82 42/82
La propriété display La propriété display
GL & UML GL & UML
display: block
display: inline
J-P Comet J-P Comet 1 < ! D O C T Y P E html > <html > <head >
1 < ! D O C T Y P E html > <html > <head > 2 <title > Le modèle des boı̂tes </title >
Introduction 2 <title > Le modèle des boı̂tes </title > Introduction 3 <meta charset= " utf-8 " >
3 <meta charset= " utf-8 " > 4 <li nk rel= " stylesheet " href= " c s s - t e s t - d i s p l a y - b l o c k . c s s " >
HTML HTML
4 <li nk rel= " stylesheet " href= " c s s - t e s t - d i s p l a y - i n l i n e . c s s 5 </head >
CSS "> CSS 6 <body >
Mise en forme 5 </head > Mise en forme 7 <div >
de textes 6 <body > de textes 8 <h1 > Display </h1 >
Modèle des 7 <div > Modèle des 9 <p class= " para1 " > Un <span > premier </span > paragraphe. </p >
boı̂tes 8 <h1 > Display </h1 > boı̂tes 10 <p class= " para2 " > Un <span id= " sp2 " > autre </span >
9 <p class= " para1 " > Un premier paragraphe. </p > paragraphe </p >
10 <p class= " para2 " > Un autre paragraphe </p > 11 </div >
fond fond
11 </div > 12 </body >
Les tableaux 12 </body > Les tableaux 13 </html >
Image, audio, 13 </html > Image, audio,
vidéo vidéo 1 div { b a c k g r o u n d - c o l o r : #89 B; width: 400 px;
CSS avancé CSS avancé 2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px;
1 div { b a c k g r o u n d - c o l o r : #89 B; width: 400 px;
Formulaires 2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px; Formulaires 3 b o x - s h a d o w : 3 px 3 px 9 px orange; }
HTML 3 b o x - s h a d o w : 3 px 3 px 9 px orange; } HTML 4 span { border: 1 px solid black; }
Responsive 4 . para1 , . para2 { display: inline; } Responsive 5 # sp2 { display: block; }
design design
Link
Link
43/82 43/82
La propriété display La propriété display

GL & UML display: inline-block GL & UML display: none
J-P Comet 1 < ! D O C T Y P E html > <html > <head > J-P Comet 1 < ! D O C T Y P E html > <html > <head >
2 <title > Le modèle des boı̂tes </title > 2 <title > Le modèle des boı̂tes </title >
3 <meta charset= " utf-8 " > 3 <meta charset= " utf-8 " >
4 <li nk rel= " stylesheet " href= " c s s - t e s t - d i s p l a y - i n l i n e b l o c k . c s s " 4 <li nk rel= " stylesheet " href= " c s s - t e s t - d i s p l a y - n o n e . c s s " >
HTML > HTML 5 </head >
CSS 5 </head > CSS 6 <body >
Mise en forme 6 <body > Mise en forme 7 <div >
de textes 7 <div > de textes 8 <h1 > Display </h1 >
8 <h1 > Display </h1 > 9 <p class= " para1 " > Un premier paragraphe. </p >
9 <p class= " para1 " > Un premier paragraphe. </p > 10 <p class= " para2 " > Un autre paragraphe </p >
boı̂tes boı̂tes
Gestion du 11 </div > Gestion du 12 </body >
fond 12 </body > fond 13 </html >
Les tableaux 13 </html > Les tableaux
Image, audio, Image, audio, 1 div { b a c k g r o u n d - c o l o r : #89 B; width: 400 px;
vidéo 1 div { b a c k g r o u n d - c o l o r : #89 B; width: 400 px; vidéo 2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px;
CSS avancé 2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px; CSS avancé 3 b o x - s h a d o w : 3 px 3 px 9 px orange; }
3 b o x - s h a d o w : 3 px 3 px 9 px orange; } 4 . para1 { display: inline-block; border: 1 px solid black; width:
4 . para1 { display: inline-block; border: 1 px solid black; width: 55%; }
HTML HTML
55%; } 5 . para2 { display: none; border: 1 px solid black; width:
Responsive 5 . para2 { display: inline-block; border: 1 px solid black; width: Responsive 40%; }
design 40%; } design
Link
Link
43/82 43/82
Le positionnement : position Le positionnement : position
GL & UML GL & UML
position: static position: relative
J-P Comet J-P Comet
2 <title > Le modèle des boı̂tes </title >
Introduction Introduction 2 <title > Le modèle des boı̂tes </title >
HTML 4 <li nk rel= " stylesheet " href= " c s s - t e s t - p o s i t i o n - s t a t i c . c s s " > HTML
4 <li nk rel= " stylesheet " href= " c s s - t e s t - p o s i t i o n - r e l a t i v e . c s s " >
CSS 5 </head > CSS 5 </head >
6 <body >
Mise en forme Mise en forme 6 <body >
7 <div >
de textes de textes 7 <div >
8 <h1 > Position </h1 >
Modèle des Modèle des 8 <h1 > Position </h1 >
9 <p class= " para1 " > Un premier paragraphe. </p >
boı̂tes boı̂tes 9 <p class= " para1 " > Un premier paragraphe. </p >
10 <p class= " para2 " > Un autre paragraphe </p >
10 <p class= " para2 " > Un autre paragraphe </p >
Gestion du 11 </div > Gestion du
11 </div >
fond 12 </body > fond
12 </body >
Les tableaux 13 </html > Les tableaux 13 </html >
vidéo 1 div { b a c k g r o u n d - c o l o r : #89 B; width: 400 px; vidéo
2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px; } 1 div { b a c k g r o u n d - c o l o r : #89 B; width: 400 px;
3 . para1 { p o s i t i o n : static; top: 100 px; left: 50 px; } 2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px; }
Formulaires Formulaires 3 . para1 { p o s i t i o n : relative; left: 50 px; }
HTML HTML
design design
Link
Link
top et left n’ont aucun effet sur un élément positionné
Déplacement par rapport à la position par défaut.
avec position:static
44/82 44/82

GL & UML position:fixed GL & UML position: absolute (par rapport au parent)
J-P Comet 1 < ! D O C T Y P E html > <html > <head > J-P Comet 1 < ! D O C T Y P E html > <html > <head >
2 <title > Le modèle des boı̂tes </title > 2 <title > Le modèle des boı̂tes </title > <meta ch ar se t= " utf-8 " >
3 <meta charset= " utf-8 " > 3 <li nk rel= " stylesheet " href= " c s s - t e s t - p o s i t i o n - a b s . c s s " >
4 <li nk rel= " stylesheet " href= " c s s - t e s t - p o s i t i o n - f i x e d . c s s " > 4 </head >
HTML 5 </head > HTML 5 <body >
CSS 6 <body > CSS 6 <h1 > Position </h1 > < ! - - h1 à l extérieur de div ! -- >
Mise en forme 7 <div > Mise en forme 7 <div >
de textes 8 <h1 > Position </h1 > de textes 8 <p class= " para1 " > Un premier paragraphe. </p >
9 <p class= " para1 " > Un premier paragraphe. </p > 9 <p class= " para2 " > Un autre paragraphe </p >
boı̂tes boı̂tes
11 <p > b <br > <br > <br > l <br > <br > <br > <br > <br > a <br > <br > <br > </p > 11 <p > B <br > <br > <br > l <br > <br > <br > a <br > <br > <br > </p >
Gestion du 12 <p > b <br > <br > <br > l <br > <br > <br > <br > <br > a <br > <br > <br > </p > Gestion du 12 <p > B <br > <br > <br > l <br > <br > <br > a <br > <br > <br > </p >
fond 13 <p > b <br > <br > <br > l <br > <br > <br > <br > <br > a <br > <br > <br > </p > fond 13 <p > B <br > <br > <br > l <br > <br > <br > a <br > <br > <br > </p >
Les tableaux 14 </div > Les tableaux 14 </body >
Image, audio, 15 </body > Image, audio, 15 </html >
vidéo 16 </html > vidéo
CSS avancé CSS avancé 1 h1 { p o s i t i o n : absolute; bottom: 0 px; right: 0 px; }
1 h1 { b a c k g r o u n d - c o l o r : #89 B; width: 200 px; 2 div { border: 5 px solid #777; width: 300 px;
2 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px; 3 b o r d e r - r a d i u s : 15 px; b a c k g r o u n d - c o l o r : #89 B;
HTML HTML
3 p o s i t i o n : fixed; top: 0 px; left: 200 px; 4 p o s i t i o n : fixed; top: 50 px; left: 100 px; }
Responsive 4 } Responsive 5 . para1 { p o s i t i o n : absolute; right: 0 px; top: 10 px; }
design design
Link Link
44/82 44/82
GL & UML GL & UML
z-index: 1 / 2 / ... z-index: 1 / 2 / ...
J-P Comet J-P Comet
1 < ! D O C T Y P E html > <html > <head > 1 < ! D O C T Y P E html > <html > <head >
2 <title > Le modèle des boı̂tes </title > 2 <title > Le modèle des boı̂tes </title >
Introduction 3 <meta charset= " utf-8 " > Introduction 3 <meta charset= " utf-8 " >
HTML 4 <li nk rel= " stylesheet " href= " c s s - t e s t - p o s t i o n - z . c s s " > HTML 4 <li nk rel= " stylesheet " href= " c s s - t e s t - p o s t i o n - z . c s s " >
CSS 5 </head > CSS 5 </head >
Mise en forme 6 <body > Mise en forme 6 <body >
de textes 7 <h1 > Position et z-index </h1 > de textes 7 <h1 > Position et z-index </h1 >
8 <div > 8 <div >
Modèle des 9 <p class= " para1 " > Un premier paragraphe. </p > Modèle des 9 <p class= " para1 " > Un premier paragraphe. </p >
boı̂tes 10 <p class= " para2 " > Un autre paragraphe </p > boı̂tes 10 <p class= " para2 " > Un autre paragraphe </p >
Gestion du 11 </div > Gestion du 11 </div >
fond 12 </body > fond 12 </body >
Les tableaux 13 </html > Les tableaux 13 </html >
vidéo 1 h1 { b a c k g r o u n d - c o l o r : # AA2; p o s i t i o n : absolute; vidéo 1 h1 { b a c k g r o u n d - c o l o r : # AA2; p o s i t i o n : absolute;
CSS avancé 2 top: 10 px; left: 130 px; CSS avancé 2 top: 10 px; left: 130 px;
Formulaires 3 } Formulaires 3 z-index: 2; }
HTML 4 div { b a c k g r o u n d - c o l o r : #89 B; width: 300 px; HTML 4 div { b a c k g r o u n d - c o l o r : #89 B; width: 300 px;
Responsive 5 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px; Responsive 5 border: 5 px solid #777; b o r d e r - r a d i u s : 15 px;
design 6 p o s i t i o n : fixed; top: 50 px; design 6 p o s i t i o n : fixed; top: 50 px;
7 left: 100 px; } 7 left: 100 px; z-index: 1; }
Link Link
44/82 44/82
La propriété float / clear La propriété float / clear

GL & UML GL & UML
La propriété float fait sortir un élément du flux normal de
La propriété float fait sortir un élément du flux normal de
J-P Comet J-P Comet la page. 3 points à retenir :
la page. 3 points à retenir : 1 Les éléments suivant un élément flottant se positionnent à côté par
Introduction 1 Les éléments suivant un élément flottant se positionnent à côté par Introduction défaut (pour annuler, clear)
HTML défaut (pour annuler, clear) HTML 2 la propriété float n’a aucun effet sur une position:absolute.
CSS 2 la propriété float n’a aucun effet sur une position:absolute. CSS
3 Un élément flottera toujours dans les limites du parent.
de textes 3 Un élément flottera toujours dans les limites du parent. de textes
1 < ! D O C T Y P E html > <html > <head > ... </head >
Modèle des Modèle des 2 <body >
boı̂tes 1 < ! D O C T Y P E html > <html > <head > ... </head > boı̂tes 3 <h1 > Alignement & flottement </h1 >
Gestion du 2 <body > Gestion du 4 <div >
fond 3 <h1 > Alignement & flottement </h1 > fond 5 <p class= " para1 " > Un premier paragraphe. </p >
Les tableaux 4 <div > Les tableaux 6 <p class= " para2 " > Un autre paragraphe </p >
5 <p class= " para1 " > Un premier paragraphe. </p > 7 </div >
6 <p class= " para2 " > Un autre paragraphe </p > 8 </body >
vidéo vidéo
7 </div > 9 </html >
CSS avancé 8 </body > CSS avancé
Formulaires 9 </html > Formulaires 1 h1 { b a c k g r o u n d - c o l o r : # AA2; width: 300 px; float: left; }
HTML HTML 2 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777;
Responsive Responsive 3 width: 300 px;
1 h1 { b a c k g r o u n d - c o l o r : # AA2; width: 200 px; float: left; }
design design 4 }
2 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777;
3 width: 200 px; float: right; }
4 . para1 { float: right; }
Link
Link
45/82 45/82
La propriété float / clear La propriété overflow
GL & UML
La propriété float fait sortir un élément du flux normal de GL & UML
J-P Comet la page. 3 points à retenir : J-P Comet

1 Les éléments suivant un élément flottant se positionnent à côté par
Introduction défaut (pour annuler, clear) Introduction
HTML 2 la propriété float n’a aucun effet sur une position:absolute. HTML
CSS CSS
Mise en forme
3 Un élément flottera toujours dans les limites du parent. Mise en forme Un élément flottant peut déborder de son élément parent.
de textes de textes
Modèle des
1
2
< ! D O C T Y P E html > <html > <head > ... </head >
<body > Modèle des la propriété overflow permet de cacher (ou pas) ce qui
boı̂tes 3 <h1 > Alignement & flottement </h1 > boı̂tes dépasse
Gestion du 4 <div > Gestion du
fond 5 <p class= " para1 " > Un premier paragraphe. </p > fond Visible : valeur par défaut (rien ne sera coupé) ;
6
Hidden : ce qui dépasse sera coupé ;
Les tableaux <p class= " para2 " > Un autre paragraphe </p > Les tableaux
Image, audio, 7 </div > Image, audio,
vidéo 8
9
</body >
</html >
vidéo Scroll : coupe de qui dépasse et ajoute une barre de
défilement afin d’avoir accès à tout le contenu ;
Formulaires 1 Formulaires
Auto : Laisse le navigateur décider du meilleur choix ;
h1 { b a c k g r o u n d - c o l o r : # AA2; width: 300 px; float: left; }
HTML 2 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777; HTML
Responsive
design
3
4 }
width: 300 px; clear: left; Responsive
design
Initial et inherit.
Link
45/82 46/82
La propriété overflow La propriété overflow

GL & UML
Un élément flottant peut déborder de son élément parent. GL & UML
Un élément flottant peut déborder de son élément parent.
J-P Comet
la propriété overflow permet de cacher (ou pas) ce qui J-P Comet
la propriété overflow permet de cacher (ou pas) ce qui
Introduction dépasse Introduction dépasse
HTML HTML
1 < ! D O C T Y P E html > <html > <head > ... </head > 1 < ! D O C T Y P E html > <html > <head > ... </head >
CSS CSS
2 <body > 2 <body >
Mise en forme 3 <h1 > Alignement & flottement </h1 > Mise en forme 3 <h1 > Alignement & flottement </h1 >
de textes 4 <div > de textes 4 <div >
Modèle des 5 <p class= " para1 " > Un premier paragraphe , <br > <br > Modèle des 5 <p class= " para1 " > Un premier paragraphe , <br > <br >
boı̂tes 6 qui va dépasser de notre div. </p > boı̂tes 6 qui va dépasser de notre div. </p >
Gestion du 7 <p class= " para2 " > Un autre paragraphe , <br > <br > Gestion du 7 <p class= " para2 " > Un autre paragraphe , <br > <br >
fond 8 qui va également dépasser. </p > fond 8 qui va également dépasser. </p >
Les tableaux 9 </div > Les tableaux 9 </div >
10 </body > 10 </body >
Image, audio, 11 </html > Image, audio, 11 </html >
vidéo vidéo
CSS avancé 1 h1 { b a c k g r o u n d - c o l o r : # AA2; width: 300 px; } CSS avancé 1 h1 { b a c k g r o u n d - c o l o r : # AA2; width: 300 px; }
Formulaires 2 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777; Formulaires 2 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777;
HTML 3 width: 200 px; height: 50 px; HTML 3 width: 200 px; height: 50 px;
Responsive 4 o v e r f l o w : visible; } Responsive 4 o v e r f l o w : hidden; }
design 5 . para1 , . para2 { float: left; } design 5 . para1 , . para2 { float: left; }
Link Link
46/82 46/82
La propriété overflow Aligner des éléments HTML grâce au CSS
GL & UML
Un élément flottant peut déborder de son élément parent. GL & UML 1
2
<body >
J-P Comet
la propriété overflow permet de cacher (ou pas) ce qui J-P Comet 3
4
<h1 > Alignement & flottement </h1 >
<div >
Introduction dépasse Introduction
5
6
<p class= " para1 " > Un premier paragraphe. </p >
<p class= " para2 " > Un autre paragraphe </p >
HTML HTML 7 </div >
1 < ! D O C T Y P E html > <html > <head > ... </head > 8 </body >
CSS CSS
2 <body > 9 </html >
Mise en forme 3 <h1 > Alignement & flottement </h1 > Mise en forme
de textes 4 <div > de textes
Modèle des
boı̂tes
5 <p class= " para1 " > Un premier paragraphe , <br > <br > Modèle des
boı̂tes
Centrer horizontalement avec margin
6 qui va dépasser de notre div. </p >
Gestion du 7 <p class= " para2 " > Un autre paragraphe , <br > <br > Gestion du 1 h1 { b a c k g r o u n d - c o l o r : # AA2; width: 400 px;
fond 8 qui va également dépasser. </p > fond 2 margin: 0 px auto; t e x t - a l i g n : center; }
9 </div > 3 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777;
10 </body > 4 width: 300 px; margin: 30 px auto; }
Image, audio, 11 </html > Image, audio,
vidéo vidéo
CSS avancé 1 h1 { b a c k g r o u n d - c o l o r : # AA2; width: 300 px; } CSS avancé
Formulaires 2 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777; Formulaires
HTML 3 width: 200 px; height: 50 px; HTML
Responsive 4 o v e r f l o w : auto; /* scroll: */ Responsive
design 5 . para1 , . para2 { float: left; } design
Link
Aligner horizontalement un élément HTML grâce à la

Link
46/82
propriété CSS position 47/82
Aligner horizontalement en utilisant float
Aligner des éléments HTML grâce au CSS Aligner des éléments HTML grâce au CSS
GL & UML 1 < ! D O C T Y P E html > <html > <head > ... </head > GL & UML 1 < ! D O C T Y P E html > <html > <head > ... </head >
2 <body > 2 <body >
J-P Comet 3 <h1 > Alignement & flottement </h1 > J-P Comet 3 <h1 > Alignement & flottement </h1 >
4 <div > 4 <div >
5 <p class= " para1 " > Un premier paragraphe. </p > 5 <p class= " para1 " > Un premier paragraphe. </p >
Introduction 6 <p class= " para2 " > Un autre paragraphe </p > Introduction 6 <p class= " para2 " > Un autre paragraphe </p >
HTML 7 </div > HTML 7 </div >
CSS 8 </body > CSS 8 </body >
Mise en forme 9 </html > Mise en forme 9 </html >
de textes de textes
Modèle des
boı̂tes
Centrer horizontalement avec margin Modèle des
boı̂tes
Centrer horizontalement avec margin
Gestion du Aligner horizontalement un élément HTML grâce à la Gestion du Aligner horizontalement un élément HTML grâce à la
fond fond
Les tableaux propriété CSS position Les tableaux propriété CSS position
Image, audio,
vidéo
1 h1 { b a c k g r o u n d - c o l o r : # AA2; p o s i t i o n : absolute; Image, audio,
vidéo
2 left: 20%; right: 20%; t e x t - a l i g n : center; }
CSS avancé 3 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777; CSS avancé 1 h1 { b a c k g r o u n d - c o l o r : # AA2; width: 200 px; float: left; }
Formulaires 4 width: 300 px; p o s i t i o n : absolute; Formulaires 2 div { b a c k g r o u n d - c o l o r : #89 B; border: 5 px solid #777;
HTML 5 right: 10 px; bottom: 10 px; } HTML 3 width: 200 px; float: right; }
4 . para1 { float: right; }
design design
Link
Link
47/82 47/82
La couleur de fond en CSS La couleur de fond en CSS
GL & UML GL & UML
J-P Comet J-P Comet
HTML background-color HTML background-color
CSS CSS
Mise en forme
background-image: url(sunset.jpg); Mise en forme
background-image: url(sunset.jpg);
de textes
background-size: 100px 100px; de textes
background-size: 100px 100px;
boı̂tes boı̂tes
fond fond
vidéo vidéo
HTML HTML
design design
Link Link
50/82 50/82

GL & UML GL & UML
J-P Comet J-P Comet
CSS CSS
Mise en forme
de textes
background-size: 100% 200%; de textes
background-size: 100%;
boı̂tes boı̂tes
fond fond
vidéo vidéo
HTML HTML
design design
Link Link
50/82 50/82
GL & UML GL & UML
J-P Comet J-P Comet
CSS CSS
Mise en forme
de textes
background-size: 28%; background-repeat: repeat; de textes
background-size: 28%; background-repeat: repeat-x;
boı̂tes boı̂tes
fond fond
vidéo vidéo
HTML HTML
design design
Link Link
50/82 50/82

GL & UML GL & UML
J-P Comet J-P Comet
CSS CSS
Mise en forme
de textes
background-size: 28%; background-repeat: repeat-y; de textes
background-size: 28%; background-repeat: no-repeat;
boı̂tes boı̂tes
fond fond
vidéo vidéo
HTML HTML
design design
Link Link
50/82 50/82
La couleur de fond en CSS Modifier la position d’une image de fond en CSS
GL & UML GL & UML
J-P Comet J-P Comet
Introduction background-color Introduction

HTML HTML background-position: top right; | 30px 70px;
CSS background-image: url(sunset.jpg); CSS
de textes
background-size: 28%; background-repeat: no-repeat; de textes
boı̂tes boı̂tes
fond fond
Les tableaux
Image, audio,
Les tableaux
Image, audio,
Plusieurs images
vidéo vidéo 1 body {
CSS avancé CSS avancé 2 b a c k g r o u n d - i m a g e : url ( sunset.jpg ) ,
Formulaires Formulaires 3 url ( sunsetNB.jpg ) ;
HTML HTML 4 b a c k g r o u n d - s i z e : 28%;
Responsive Responsive 5 b a c k g r o u n d - r e p e a t : no-repeat , no-repeat;
design design 6 b a c k g r o u n d - a t t a c h m e n t : fixed , fixed;
7 b a c k g r o u n d - p o s i t i o n : top right , top left;
8 }
background-attachment: fixed / scroll;
Link
50/82 51/82
Modifier la position d’une image de fond en CSS Les dégradés linéaires et radiaux
GL & UML GL & UML
J-P Comet J-P Comet

Tous les navigateurs n’ont pas la même norme...
HTML background-position: top right; | 30px 70px; HTML
1
2
/* On commence toujours par préciser les versions préfixées
* d ’ une propriété , pour finir par la version non préfixée.
CSS CSS 3 * Cela permet à chaque version de chaque navigateur de
Mise en forme Mise en forme 4 *" piocher " la bonne version pour lui.
de textes de textes 5 * Les prefixes:
Modèle des Modèle des 6 * -webkit- : Safari et Chrome -o- : Opéra
boı̂tes boı̂tes 7 * -moz- : Mozilla Firefox -ms- : Internet Explorer
8 */
9 body {
fond fond
10 b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t ( left , blue , white , red ) ;
Les tableaux
Image, audio,
Plusieurs images Les tableaux
Image, audio,
11
12
b a c k g r o u n d : - o- l i ne a r - g r ad i e n t ( right , blue , white , red ) ;
b a c k g r o u n d : - m o z - l i n e a r - g r a d i e n t ( right , blue , white , red ) ;
vidéo 1 body { vidéo 13 b a c k g r o u n d : - m s - l i n e a r - g r a d i e n t ( to right , blue , white , red ) ;
CSS avancé 2 b a c k g r o u n d - i m a g e : url ( sunsetNB.jpg ) , CSS avancé 14 b a c k g r o u n d : linear- gra dient ( to right , blue , white , red ) ;
Formulaires 3 url ( sunset.jpg ) ; Formulaires 15 }
HTML 4 b a c k g r o u n d - s i z e : 28% , 100%; HTML
Responsive 5 b a c k g r o u n d - r e p e a t : no-repeat , no-repeat; Responsive
design 6 b a c k g r o u n d - a t t a c h m e n t : fixed , fixed; design
7 b a c k g r o u n d - p o s i t i o n : top left , top left;
8 }
51/82 52/82
Les dégradés linéaires et radiaux Les dégradés linéaires et radiaux
GL & UML GL & UML
J-P Comet J-P Comet

Tous les navigateurs n’ont pas la même norme... Tous les navigateurs n’ont pas la même norme...
1 /* On commence toujours par préciser les versions préfixées 1 /* On commence toujours par préciser les versions préfixées
HTML HTML
2 * d ’ une propriété , pour finir par la version non préfixée. 2 * d ’ une propriété , pour finir par la version non préfixée.
CSS 3 * Cela permet à chaque version de chaque navigateur de CSS 3 * Cela permet à chaque version de chaque navigateur de
Mise en forme 4 *" piocher " la bonne version pour lui. Mise en forme 4 *" piocher " la bonne version pour lui.
de textes 5 * Les prefixes: de textes 5 * Les prefixes:
Modèle des 6 * -webkit- : Safari et Chrome -o- : Opéra Modèle des 6 * -webkit- : Safari et Chrome -o- : Opéra
boı̂tes 7 * -moz- : Mozilla Firefox -ms- : Internet Explorer boı̂tes 7 * -moz- : Mozilla Firefox -ms- : Internet Explorer
8 */ 8 */
9 body { 9 body {
fond fond
10 b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t ( top left , blue , white , red ) ; 10 b a c k g r o u n d : - w e b k i t - l i n e a r - g r a d i e n t (45 deg , blue , white , red ) ;
Les tableaux 11 b a c k g r o u n d : - o- l i ne a r- g r ad i en t ( bottom right , blue , white , red ) ; Les tableaux 11 b a c k g r o u n d : - o- l i ne a r - g r ad i e n t (45 deg , blue , white , red ) ;
Image, audio, 12 b a c k g r o u n d : - m o z - l i n e a r - g r a d i e n t ( bottom right , blue , white , red ) ; Image, audio, 12 b a c k g r o u n d : - m o z - l i n e a r - g r a d i e n t (45 deg , blue , white , red ) ;
vidéo 13 b a c k g r o u n d : linear-gradient ( to bottom right , blue , white , red ) ; vidéo 13 b a c k g r o u n d : linear- gra dient (45 deg , blue , white , red ) ;
CSS avancé 14 height: 200 px; CSS avancé 14 height: 200 px;
Formulaires 15 } Formulaires 15 }
HTML HTML
design design
52/82 52/82
Les dégradés linéaires et radiaux Les dégradés linéaires et radiaux

GL & UML GL & UML
J-P Comet J-P Comet

Tous les navigateurs n’ont pas la même norme... Tous les navigateurs n’ont pas la même norme...
1 /* On commence toujours par préciser les versions préfixées 1 /* On commence toujours par préciser les versions préfixées
HTML HTML
2 * d ’ une propriété , pour finir par la version non préfixée. 2 * d ’ une propriété , pour finir par la version non préfixée.
CSS 3 * Cela permet à chaque version de chaque navigateur de CSS 3 * Cela permet à chaque version de chaque navigateur de
Mise en forme 4 *" piocher " la bonne version pour lui. Mise en forme 4 *" piocher " la bonne version pour lui.
de textes 5 * Les prefixes: de textes 5 * Les prefixes:
Modèle des 6 * -webkit- : Safari et Chrome -o- : Opéra Modèle des 6 * -webkit- : Safari et Chrome -o- : Opéra
boı̂tes 7 * -moz- : Mozilla Firefox -ms- : Internet Explorer boı̂tes 7 * -moz- : Mozilla Firefox -ms- : Internet Explorer
8 */ 8 */
9 body { 9 body {
fond fond
10 b a c k g r o u n d : - w e b k i t - r a d i a l - g r a d i e n t ( circle , blue , white , red ) ; 10 b a c k g r o u n d : - w e b k i t - r a d i a l - g r a d i e n t (30% 50% , closest-side , blue , white , red ) ;
Les tableaux 11 b a c k g r o u n d : - o- r a di a l- g r ad i en t ( circle , blue , white , red ) ; Les tableaux 11 b a c k g r o u n d : - o- r a di a l - g r ad i e n t (30% 50% , closest-side , blue , white , red ) ;
Image, audio, 12 b a c k g r o u n d : - m o z - r a d i a l - g r a d i e n t ( circle , blue , white , red ) ; Image, audio, 12 b a c k g r o u n d : - m o z - r a d i a l - g r a d i e n t (30% 50% , closest-side , blue , white , red ) ;
vidéo 13 b a c k g r o u n d : radial-gradient ( circle , blue , white , red ) ; vidéo 13 b a c k g r o u n d : radial- gra dient ( closest-side at 30% 50% , blue , white , red ) ;
CSS avancé 14 height: 200 px; CSS avancé 14 height: 100 px;
Formulaires 15 } Formulaires 15 }
HTML HTML
design design
52/82 52/82
Créer un tableau simple Créer un tableau simple
GL & UML GL & UML
<table> <tr> <td>
J-P Comet J-P Comet
1 < ! D O C T Y P E html > <html > <head > ... </head >
2 <body > border
Introduction 3 <h1 > Un tableau simple </h1 > Introduction
4 <table > 1 td {
HTML HTML
5 <tr > < ! - - table row -- > 2 border: 2 px solid black;
CSS CSS 3 }
6 <td > Nom </td > < ! - - table data -- >
Mise en forme 7 <td > Prénom </td > < ! - - table data -- > Mise en forme 4 tr {
de textes 8 <td > Age </td > < ! - - table data -- > de textes 5 outline: 3 px solid green; */
Modèle des 9 </tr > Modèle des 6 }
boı̂tes 10 <tr > < ! - - table row -- > boı̂tes 7 table {
11 <td > Jean </td > < ! - - table data -- > 8 border: 6 px solid red;
12 <td > Pierre </td > < ! - - table data -- > 9 }
fond fond
13 <td > 25 ans </td > < ! - - table data -- > Link
14 </tr >
Image, audio, 15 <tr > < ! - - table row -- > Image, audio,
vidéo 16 <td > Paul </td > < ! - - table data -- > vidéo
CSS avancé 17 <td > Bocuse </td > < ! - - table data -- > CSS avancé 1 td {
Formulaires 18 <td > 23 ans </td > < ! - - table data -- > Formulaires 2 border: 2 px solid black;
HTML 19 </tr > HTML 3 }
Responsive 20 </table > Responsive 4 tr {
design 21 </body > </html > design 5
6 }
7 table {
8 b o r d e r - c o l l a p s e : collapse;
9 }
Link Link
55/82 55/82
Créer un tableau simple Créer un tableau structuré

GL & UML padding (marge intérieure) à td / background-color. GL & UML
ligne d’entête : <thead>
J-P Comet 1 < ! D O C T Y P E html > <html > <head > ... </head > <body > J-P Comet 1 < ! D O C T Y P E html > <html > <head > ... </head > <body >
2 <h1 > Un tableau simple </h1 > 2 <h1 > Un tableau simple </h1 >
3 <table > 3 <table >
4 <tr class= " line-odd " > < ! - - table row -- > 4 <th ead class= " tablehead " >
HTML 5 <td > Nom </td > < ! - - table data -- > HTML
5 <tr > < ! - - table row -- >
CSS 6 <td > Prénom </td > < ! - - table data -- > CSS 6 <td > Nom </td > < ! - - table data -- >
Mise en forme 7 <td > Age </td > < ! - - table data -- > Mise en forme 7 <td > Prénom </td > < ! - - table data -- >
de textes 8 </tr > de textes 8 <td > Age </td > < ! - - table data -- >
9 <tr class= " line-even " > 9 </tr > </th ead >
10 <td > Jean </td > 10 <tr class= " line-even " >
boı̂tes boı̂tes
11 <td > Pierre </td > 11 <td > Jean </td >
Gestion du 12 <td > 25 ans </td > Gestion du
fond fond 12 <td > Pierre </td >
13 </tr > 13 <td > 25 ans </td >
Les tableaux 14 <tr class= " line-odd " > Les tableaux 14 </tr >
Image, audio, 15 <td > Paul </td > Image, audio, 15 <tr class= " line-odd " >
vidéo 16 <td > Bocuse </td > vidéo 16 <td > Paul </td >
CSS avancé 17 <td > 23 ans </td > CSS avancé 17 <td > Bocuse </td >
18 </tr > 18 <td > 23 ans </td >
Formulaires 19 </table > Formulaires
HTML HTML 19 </tr >
20 </body > 20 </table >
Responsive 21 </html > Link Responsive 21 </body >
design design 22 </html >
1 td { border: 2 px solid black;
2 padding: 10 px 15 px; } 1 td { border: 2 px solid black; Link
3 table { b o r d e r - c o l l a p s e : collapse; } 2 padding: 10 px 15 px; }
4 . line-odd { b a c k g r o u n d - c o l o r : # BBB; } 3 table { b o r d e r - c o l l a p s e : collapse; }
5 . line-even { b a c k g r o u n d - c o l o r : # EEE; 4 . tablehead { b a c k g r o u n d - c o l o r : #99 BB22; }
6 } 5 . line-odd { b a c k g r o u n d - c o l o r : # BBB; }
6 . line-even { b a c k g r o u n d - c o l o r : # EEE; }
55/82 56/82
Créer un tableau structuré fusionner des cellules
GL & UML ligne de fin de tableau : <tfoot> GL & UML
colspan et rowspan
J-P Comet 1 < ! D O C T Y P E html > <html > <head > ... </head > <body > J-P Comet 1 < ! D O C T Y P E html > <html > <head > ... </head > <body >
2 <h1 > Un tableau structuré </h1 >
2 <h1 > Fusionner des cellules </h1 >
3 <table >
Introduction Introduction 3 <table >
4 <th ead > <tr > <th > Mois </th > <th > Dépense </th > </tr > </th ead >
HTML HTML 4 <tr >
5 <tfoot > <tr > <td > Somme </td > <td > 1350 </td > </tr > </tfoot >
5 <th colspan= " 3 " > Prénom ( s ) </th >
CSS 6 <tbody > CSS 6 <th colspan= " 2 " > Adresse ( s ) e-mail </th > </tr >
Mise en forme 7 <tr class= " ligne-paire " > Mise en forme 7 <tr >
de textes 8 <td > Janvier </td > de textes 8 <td > Jean </td > <td colspan= " 2 " > Paul </td >
9 <td > 450 </td >
Modèle des Modèle des 9 <td colspan= " 2 " > j e a n - p a u l . c o m e t @ u n i c e . f r </td > </tr >
10 </tr >
boı̂tes boı̂tes 10 <tr >
11 <tr class= " ligne-impaire " >
Gestion du Gestion du 11 <td > Marie </td > <td > Hélène </td > <td > Fanny </td >
12 <td > Février </td >
fond fond 12 <td > f a n n y .c @g mai l. com </td >
13 <td > 520 </td >
13 <td > f . c e s ty @g mai l. com </td > </tr >
Les tableaux 14 </tr > Les tableaux
14 </table >
Image, audio, 15 <tr class= " ligne-paire " > Image, audio, 15 </body > </html >
vidéo 16 <td > Mars </td > vidéo
17 <td > 380 </td >
CSS avancé CSS avancé 1 table { b o r d e r - c o l l a p s e : collapse; }
18 </tr >
Formulaires 19 </tbody > Formulaires 2 th { f o n t - w e i g h t : normal; }
HTML 20 </table > HTML 3 td , th { border: 1 px solid black;
Responsive 21 </body > Responsive 4 pa dd in g: 10 px 15 px;
design 22 </html > Link design 5 t e x t - a l i g n : center; }
1 table { b o r d e r - c o l l a p s e : collapse; }
2 thead , tfoot {
3 b a c k g r o u n d - c o l o r : RGB (168 , 197 , 36) ;
4 color: # FFF; text-transform: uppercase; }
Link
5 . ligne-impaire { b a c k g r o u n d - c o l o r : # BBB; }
6 . ligne-paire { b a c k g r o u n d - c o l o r : # EEE; }
7 th { f o n t - w e i g h t : normal; }
8 td , th { border: 1 px solid black;
9 padding: 10 px 15 px; }
56/82 57/82
fusionner des cellules fusionner des cellules

GL & UML GL & UML
J-P Comet colspan et rowspan J-P Comet Ajouter une légende

1 < ! D O C T Y P E html > <html > <head > ... </head > <body > 1 < ! D O C T Y P E html > <html > <head > ... </head > <body >
Introduction 2 <h1 > Fusionner des cellules </h1 > Introduction 2 <h1 > Fusionner des cellules </h1 >
HTML 3 <table > HTML 3 <table > <cap ti on > Liste des inscrits < / c a p t i o n >
CSS 4 <tr > <th > Prénom </th > <th > Nom </th > <th > e-mail </th > </tr > CSS 4 <tr > <th > Prénom </th > <th > Nom </th > <th > e-mail </th > </tr >
5 <tr > <td > Jean </td > 5 <tr > <td > Jean </td >
6 <td rowspan= " 2 " > Comet </td > 6 <td rowspan= " 2 " > Comet </td >
de textes de textes
7 <td > j e a n . c o m e t @ u n i c e . f r </td > </tr > 7 <td > j e a n . c o m e t @ u n i c e . f r </td > </tr >
Modèle des 8 <tr > Modèle des 8 <tr >
boı̂tes 9 <td > Paul </td > <td > p a u l . c o m e t @ g m a i l . c o m </td > </tr > boı̂tes 9 <td > Paul </td > <td > p a u l . c o m e t @ g m a i l . c o m </td > </tr >
Gestion du 10 </table > Gestion du 10 </table >
fond 11 </body > </html > fond 11 </body > </html >
Image, audio, 1 table { b o r d e r - c o l l a p s e : collapse; } Image, audio, 1 table { b o r d e r - c o l l a p s e : collapse; }
vidéo 2 th { f o n t - w e i g h t : normal; } vidéo 2 th { f o n t - w e i g h t : normal; }
CSS avancé 3 td , th { border: 1 px solid black; padding: 10 px 15 px; CSS avancé 3 td , th { border: 1 px solid black; padding: 10 px 15 px;
Formulaires 4 t e x t - a l i g n : center; Formulaires 4 t e x t - a l i g n : center; }
HTML 5 } HTML 5 caption { t e x t - a l i g n : right; caption-side: bottom; f o n t - w e i g h t : bolder; }
design design
Link Link
57/82 57/82
Insérer une image Insérer du contenu audio
GL & UML GL & UML
J-P Comet J-P Comet Les navigateurs ne supportent pas tous les mêmes formats
Introduction Code HTML : Introduction
Navigateur
Chrome
MP3
Oui
Ogg
Oui
Wav
Oui
HTML 1 < ! D O C T Y P E html > <html > <head > ... </head > HTML Safari Oui Non Oui
CSS 2 <body > CSS Firefox Oui Oui Oui
Mise en forme 3 <h1 > Insérer une image </h1 > Mise en forme HTML Internet Explorer Oui Non Non
de textes 4 <img src= " sunset.png " alt= " coucher de soleil " > de textes Opera Oui Oui Oui
5 </body >
Modèle des Modèle des 1 < ! D O C T Y P E html >
6 </html >
boı̂tes boı̂tes 2 <html > <head >
Gestion du Gestion du 3 <title > L audio </title >
fond Mise en forme CSS : fond 4 <meta charset= " utf-8 " >
Les tableaux Les tableaux 5 <li nk rel= " stylesheet " href= " c s s - t e s t - a u d i o 1 . c s s " >
Image, audio, ajustement en CSS Image, audio,
6
7
</head >
<body >
vidéo vidéo
8 <h1 > L audio </h1 >
CSS avancé 1 img { width: 400 px; } CSS avancé 9 <audio controls preload= " metadata " loop >
Formulaires Formulaires 10 < ! - - preload= " metadata "/" auto "/" none "
HTML
Responsive
positionnement HTML
Responsive
11
12
autoplay | loop | muted
<source src= " magic.mp3 " >
-- >
design design 13 <source src= " magic.ogg " >

1 img { width: 400 px; display: block; } 14 <source src= " magic.wav " >
15 Il serait temps de mettre à jour votre navigateur...
16 < / audio >
cadre Link 17 </body >
18 </html >
1 img { padding: 10 px; border: 1 px solid # CCC; Link
2 b o x - s h a d o w : 0 px 0 px 17 px # BBB; }
59/82 60/82
Insérer un contenu vidéo Short hand et long hand

GL & UML GL & UML font : font-style, font-weight, font-size, line-height, font-family.
Les navigateurs ne supportent pas tous les mêmes formats 1 p { f o n t - s t y l e : italic; f o n t - w e i g h t : normal;
J-P Comet Navigateur MP4 Ogg WebM J-P Comet
2 f o n t - s i z e : 16 px; l i n e - h e i g h t : 24 px;
HTML Chrome Oui Oui Oui 3 f o n t - f a m i l y : Verdana , sans-serif; }
Introduction Safari Oui Non Non Introduction
1 p { font: italic normal 16 px /24 px Verdana , sans-serif; }
HTML 1 < ! D O C T Y P E html > <html > <head > Firefox Oui Oui Oui HTML
CSS 2 ... </head > <body > Internet Explorer Oui Non Non CSS
Mise en forme 3 <h1 > La vidéo </h1 > Opera Oui Oui Oui
Mise en forme border : border-width, border-style, border-color
de textes 4 <video controls preload= " metadata " loop poster= " eclipse.png " de textes
Modèle des
width=300px
Modèle des padding : padding-top, padding-right, padding-bottom, padding-left
5 < ! - - preload= " metadata "/" auto "/" none "
boı̂tes boı̂tes
Gestion du
6
7
autoplay | loop | muted -- >
<source src= " e c l i p s e _ d u _ s o l e i l _ d u _ 2 6 _ f e v r i e r _ 2 0 1 7 . m p 4 " > Gestion du margin : margin-top, margin-right, margin-bottom, margin-left.
fond 8 <source src= " e c l i p s e _ d u _ s o l e i l _ d u _ 2 6 _ f e v r i e r _ 2 0 1 7 . o g g " > fond
1 h1 {
Les tableaux 9 Il serait temps de mettre à jour votre navigateur... Les tableaux 2 b o r d e r - w i d t h : 5 px; p a d d i n g - t o p : 20 px; m a r g i n - t o p : 20 px;
Image, audio, 10 </video > Image, audio, 3 b o r d e r - s t y l e : solide; p a d d i n g - r i g h t : 15 px; m a r g i n - r i g h t : 15 px
vidéo 11 vidéo 4 b o r d e r - c o l o r : blue; p a d d i n g - b o t t o m : 0 px; m a r g i n - b o t t o m : 10 px;
12 <iframe width= " 560 " height= " 315 " src= " https: // www.youtube.com 5 p a d d i n g - l e f t : 50 px; m a r g i n - l e f t : 5 px; }
/... " frameborder= " 0 " all ow fullscreen > </iframe >
Formulaires 13 </body > Formulaires 1 h1 { border: 5 px solid blue;
HTML 14 </html > HTML 2 padding: 20 px 15 px 0 px 50 px;
Responsive Responsive 3 margin: 20 px 15 px 10 px 50 px; }
design Link design
figure et figcaption background : background-color, background-image, background-repeat,

1 <figure > background-attachment, background-position
2 <img src= " ... " alt= " ... " >
1 h1 { b a c k g r o u n d - c o l o r : # FFF; b a c k g r o u n d - i m a g e : url ( " sunset.png " ) ;
3 <figcaption >
2 b a c k g r o u n d - r e p e a t : no-repeat; b a c k g r o u n d - a t t a c h m e n t : scroll;
4 La légende de ma figure
3 b a c k g r o u n d - p o s i t i o n : top left; }
5 < / figcaption >
6 < / figure > 1 h1 { b a c k g r o u n d : # FFF url ( " sunset.png " ) no-repeat scroll top left; }
61/82 63/82
Les sélecteurs avancés Les sélecteurs avancés
GL & UML GL & UML Sélectionner un élément par rapport à un autre
J-P Comet J-P Comet 1 < ! D O C T Y P E html > <html > <head > ... </head >
Le sélecteur CSS universel * 2 <body >
3 <div class= " page-conta iner " >
1 < ! D O C T Y P E html > 4 <h1 > Sélecteurs CSS avancés </h1 >
HTML 2 <html > <head > ... </head > <body > HTML 5 <div class= " test " >
CSS 3 <h1 > Sélecteurs CSS avancés </h1 > CSS 6 <p > Un premier paragraphe dans un div </p >
Mise en forme 4 <p > Un paragraphe </p > Mise en forme 7 <p > Un <strong > paragraphe important </strong > </p >
de textes 5 <p > Un <strong > paragraphe important </strong > </p > de textes 8 </div >
6 </body > 9 <div >
7 </html > 10 <p > Un paragraphe dans un deuxième div </p >
boı̂tes boı̂tes
11 </div >
Gestion du Gestion du 12 <p > Un paragraphe hors div </p >
fond 1 *{ border: 1 px solid black; fond 13 </div >
Les tableaux 2 padding: 5 px; Les tableaux 14 </body >
3 margin: 5 px; } 15 </html >
vidéo vidéo 1 . test p { f o n t - s i z e : 20 px; color: blue; } /* ts les p dans . test */
2 div + p { b a c k g r o u n d - c o l o r : orange; } /* ts les p après div */
3 body > div { border: 1 px solid black; } /* div fils de body */
HTML HTML
Link
design design
grouper les sélecteurs Link

1 h1 , strong { f o n t - s i z e : 20 px; color: blue; }
64/82 64/82
Les sélecteurs avancés Les sélecteurs avancés

Les sélecteurs CSS d’attributs selecteur[attribut] Les sélecteurs CSS d’attributs selecteur[attribut]
GL & UML GL & UML
J-P Comet J-P Comet

1 < ! D O C T Y P E html > <html > <head > ... </head > 1 < ! D O C T Y P E html > <html > <head > ... </head >
2 <body > 2 <body >
Introduction 3 <div class= " page-container " > Introduction 3 <div class= " page-c ontainer " >
HTML 4 <h1 > Sélecteurs CSS avancés </h1 > HTML 4 <h1 > Sélecteurs CSS avancés </h1 >
CSS 5 CSS 5
6 <div > 6 <div >
7 <p > Un <a href= " http: // w ww.google.com " 7 <p > Un <a href= " http: // www.google.com "
de textes de textes
8 target= " _blank " > lien< / a > vers google </p > 8 target= " _blank " > lien< / a > vers google </p >
Modèle des 9 </div > Modèle des 9 </div >
boı̂tes 10 <p > Un <a href= " http: // ww w . s t ar tp age .c om " > boı̂tes 10 <p > Un <a href= " http: // w ww .s tar tp age .c om "
Gestion du 11 lien< / a > vers startpage </p > Gestion du 11 target= " _top " > lien< / a > vers startpage </p >
fond 12 </div > fond 12 </div >
Les tableaux 13 </body > Les tableaux 13 </body >
14 </html > 14 </html >
vidéo 1 a [ target ]{ color: orange; f o n t - w e i g h t : bold; vidéo 1 a [ target ]{ color: orange; f o n t - w e i g h t : bold; }
CSS avancé 2 } CSS avancé 2 a [ target= " _top " ]{ f o n t - s i z e : 30 px; }
HTML HTML
design design
Link Link
64/82 64/82
Les pseudo classes CSS Les pseudo classes CSS
GL & UML
but : changer le style d’un élément selon son état, c-a-d de GL & UML
J-P Comet façon quasi dynamique (gras sous la souris / couleur une J-P Comet :first-child et :last-child
Introduction
fois cliqué...) Introduction 1 < ! D O C T Y P E html >
HTML :link pour un lien non visité HTML 2 <html >
3
:visited pour un lien visité
CSS CSS <head >
4 <title > Pseudo classes </title >
de textes :hover pour un lien sous la souris de textes
5
6 </head >
<meta charset= " utf-8 " >
Modèle des
boı̂tes
:active pour un lien lors du clic Modèle des
boı̂tes
7
8 <body >
Gestion du 1 < ! D O C T Y P E html > <html > <head > ... </head > <body > Gestion du 9 <h1 > Pseudo classes CSS </h1 >
fond 2 <div class= " page-container " > fond 10
Les tableaux 3 <h1 > Sélecteurs CSS avancés </h1 > Les tableaux 11 <p > Un premier paragraphe hors div </p >
4 12 <div class= " test " >
5 <div > 13 <p > Un premier paragraphe DANS un div </p >
vidéo vidéo
6 <p > Un <a href= " http: // www.google.com " target= " _blank " > lien< / 14 <p > Un deuxième paragraphe DANS un div </p >
CSS avancé CSS avancé 15 <p > Un troisième paragraphe DANS un div </p >
a > vers google </p >
Formulaires 7 <p > Un <a href= " http: // www .s tar tp ag e . c om " target= " _top " > lien< Formulaires 16 <p > Un quatrième paragraphe DANS un div </p >
HTML / a > vers startpage </p > HTML 17 </div >
Responsive 8 </div > Responsive 18 <p > Un paragraphe hors div </p >
design 9 </div > design 19 <p > Un autre paragraphe hors div </p >
10 </body > 20 <p > Un dernier paragraphe hors div </p >
11 </html > 21 </body >
22 </html >
Link
1 h1:hover { color: orange; f o n t - f a m i l y : Verdana , sans-serif; }
2 a:link { color: blue; t e x t - d e c o r a t i o n : underline; } 1 p:first-child { color: orange; }
3 a:visited { color: green; t e x t - d e c o r a t i o n : none; 2 p:last-child { color: green; }
4 f o n t - s i z e : 45 px; f o n t - w e i g h t : bolder; }
5 a:hover { color: orange; f o n t - s i z e : 150%; } Link
6 p:hover { color: green; }
65/82 65/82
Les pseudo classes CSS Les pseudo classes CSS

:nth-child(int) et :nth-child(mot-clef)
GL & UML GL & UML
J-P Comet J-P Comet

2 <html >
Introduction 3 <head > Introduction
HTML 4 <title > Pseudo classes CSS </title > HTML
CSS 5 <meta charset= " utf-8 " > CSS
6 </head >
7
de textes de textes
8 <body >
Modèle des 9 <h1 > Titre de niveau 1 </h1 > < ! - - 1 er enfant -- > Modèle des
boı̂tes 10 <h2 > Titre de niveau 2 </h2 > < ! - - 2 eme enfant -- > boı̂tes
Gestion du 11 <p > Un premier paragraphe </p > < ! - - 3 eme enfant -- > Gestion du
fond 12 <p > Un deuxième paragraphe </p > < ! - - 4 eme enfant -- > fond
Les tableaux 13 <div > < ! - - 5 eme enfant -- > Les tableaux
14 <h2 > Un autre titre de niveau 2 </h2 > < ! - - 1 er enfant -- >
15 <p > Un troisième paragraphe </p > < ! - - 2 eme enfant -- >
vidéo vidéo
16 <p > Un quatrième paragraphe </p > < ! - - 3 eme enfant -- >
CSS avancé 17 </div > CSS avancé
Formulaires 18 </body > Formulaires
HTML 19 </html > HTML
design 1 /* tous les elts p qui sont des enfants pairs */ design
2 p:nth-child ( even ) {
3 color: purple;
4 }
5
6 /* tous les elts h2 qui sont le 2 ème enfant d ’ un élément parent */
7 h2:nth-child (2) {
8 color: green;
9 }
Link 65/82 65/82

CSS - Pseudo éléments CSS - Pseudo éléments
GL & UML
::first-letter sélectionne la première lettre (block) GL & UML
::first-letter sélectionne la première lettre (block)
J-P Comet
1 < ! D O C T Y P E html > <htm > <head > ... </head > <body >
J-P Comet
::first-line sélectionne la première ligne (block)
2 <h1 > Fêtes </h1 >
Introduction 3 <div > Introduction 1 < ! D O C T Y P E html > <htm > <head > ... </head > <body >
HTML 4 <p > La valse est jolie , </p > HTML 2 <h1 > Fêtes </h1 >
CSS 5 <p > Les grands élans du coeur le sont CSS 3 <div >
aussi , </p > 4 <p > La valse est jolie , </p >
Mise en forme Mise en forme 5
6 <p > Rues , </p > <p > Les grands élans du coeur le sont
de textes de textes
7 <p > Une roue valsait éperdument. </p > aussi , </p >
Modèle des 8 <p > Des roues , des robes , des chapeaux Modèle des 6 <p > Rues , </p >
boı̂tes , des roses. </p > boı̂tes 7 <p > Une roue valsait éperdument. </p >
Gestion du 9 <p > Arrosée , </p > Gestion du 8 <p > Des roues , des robes , des chapeaux
fond 10 <p > La plante sera prête pour la fête fond , des roses. </p >
Les tableaux à souhaiter. </p > Les tableaux 9 <p > Arrosée , </p >
11 </div > 10 <p > La plante sera prête pour la fête
12 <p > Paul ELUARD - Recueil: " Exemples " </p > à souhaiter. </p >
vidéo vidéo
13 </body > 11 </div >
CSS avancé 14 </html > CSS avancé 12 <p > Paul ELUARD - Recueil: " Exemples " </p >
Formulaires Link Formulaires 13 </body >
HTML HTML 14 </html >
1 div > p::first-letter {
Responsive 2 f o n t - s i z e : 30 px; Responsive Link
design 3 color: # A92; } design 1 div { width: 300 px; }
2 div > p::first-line {
::first-line sélectionne la première ligne (block) 3
4
f o n t - s i z e : 30 px;
color: # A92; }
::selection sélectionne la partie d’un élément
::selection sélectionne la partie d’un élément
sélectionnée (par un double clic)
::before insère du contenu au début d’un élément
::after insère du contenu à la fin d’un élément 66/82 66/82
::after insère du contenu à la fin d’un élément
CSS - Pseudo éléments CSS - Pseudo éléments

GL & UML
::first-letter sélectionne la première lettre (block) GL & UML
::first-letter sélectionne la première lettre (block)
J-P Comet
::first-line sélectionne la première ligne (block) J-P Comet
::first-line sélectionne la première ligne (block)
Introduction ::selection sélectionne la partie d’un élément Introduction ::selection sélectionne la partie d’un élément
HTML
CSS
sélectionnée (par un double clic) HTML
CSS
Mise en forme 1 < ! D O C T Y P E html > <htm > <head > ... </head > <body > Mise en forme ::before insère du contenu au début d’un élément
de textes de textes
2 <h1 > Fêtes </h1 >
Modèle des 3 <div > Modèle des
boı̂tes 4 <p > La valse est jolie , </p > boı̂tes
1 < ! D O C T Y P E html > <htm > <head > ... </head > <body >
Gestion du 5 <p > Les grands élans du coeur le sont Gestion du 2 <h1 > Fêtes </h1 >
fond aussi , </p > fond 3 <div >
6 <p > Rues , </p >
Les tableaux Les tableaux 4 <p > La valse est jolie , </p >
7 <p > Une roue valsait éperdument. </p >
Image, audio, Image, audio, 5 <p > Les grands élans du coeur le sont
8 <p > Des roues , des robes , des chapeaux
vidéo vidéo aussi , </p >
, des roses. </p >
CSS avancé CSS avancé 6 <p > Rues , </p >
9 <p > Arrosée , </p >
7 <p > Une roue valsait éperdument. </p >
Formulaires 10 <p > La plante sera prête pour la fête Formulaires 8 <p > Des roues , des robes , des chapeaux ,
HTML à souhaiter. </p > HTML des roses. </p >
Responsive 11 </div > Responsive 9 <p > Arrosée , </p >
design 12 <p > Paul ELUARD - Recueil: " Exemples " </p > design 10 <p > La plante sera prête pour la fête à
13 </body >
souhaiter. </p >
14 </html >
11 </div >
Link 12 <p > Paul ELUARD - Recueil: " Exemples " </p >
1 div { width: 300 px; } 13 </body >
2 div > p::selection { 14 </html >
b a c k g r o u n d - c o l o r : orange; } Link
3 div > p: :- moz -s ele ct ion {
1 div { width: 300 px; }
b a c k g r o u n d - c o l o r : orange; }
2 div::before { content: " du texte <strong > avant

</strong > " ;}
66/82 3 div::after { content: url ( " sunset.jpg " ) ; 66/82

}
Les sprites d’images Les transitions
GL & UML GL & UML
modifient la valeur d’une propriété CSS de façon fluide
J-P Comet Un sprite d’images : une collection d’images J-P Comet transition : notation short-hand de
transition-delay
Introduction réduire le nombre de requêtes Introduction transition-duration (obligatoire, en s)
HTML 1 < ! D O C T Y P E html > <htm > <head > ... </head > <body > HTML transition-property (obligatoire)
CSS 2 <h1 > Sprites </h1 > CSS
transition-timing-function
Mise en forme 3 <div class= " social " > Mise en forme
de textes 4 <a href= " http: // facebook.com " id= " fb " > <a > de textes
Modèle des 5 <a href= " http: // twitter.com " id= " tw " > <a > Modèle des 1 < ! D O C T Y P E html > <html > <head > ... </head > <body >
boı̂tes 6 <a href= " http: // linkedin.com " id= " lk " > <a > boı̂tes 2 <h1 > Les transitions en CSS </h1 >
7 </div > 3 <div class= " div-un " >
Gestion du 8 </body > Gestion du
4 <p > Un premier paragraphe </p >
fond 9 </html > fond
5 <p > Un deuxième paragraphe </p >
Les tableaux Les tableaux 6 <p > Un troisième paragraphe </p >
Image, audio, Link Image, audio, 7 </div >
vidéo vidéo 8 </body > </html >
CSS avancé 1 # fb , # tw , # lk { CSS avancé
Formulaires 2 p o s i t i o n : absolute; display: block; Formulaires 1 . div-un { width: 200 px; height: 200 px;
HTML 3 width: 50 px; height: 50 px } HTML 2 b a c k g r o u n d - c o l o r : #06 D;
Responsive 4 # fb { left: 25 px; top: 100 px; Responsive 3 border: 5 px solid purple;
design 5 b a c k g r o u n d : url ( " l ogo s- soc ia ux. pn g " ) 0 px 0 design 4 - w e b k i t - t r a n s i t i o n : width 2s , b ack g r ound- col or 5 s;
px; } 5 - m o z - t r a n s i t i o n : width 2s , b ack g r ound- col or 5 s;
6 # tw { left: 125 px; top: 100 px; 6 - o - t r a n s i t i o n : width 2s , b ack g r ound- col or 5 s;
7 b a c k g r o u n d : url ( " l ogo s- soc ia ux. pn g " ) -50px 0 7 t r a n s i t i o n : width 2s , b ack g r ound- col or 5 s;
px; } 8 }
8 # lk { left: 225 px; top: 100 px; 9 . div-un:hover {
9 b a c k g r o u n d : url ( " l ogo s- soc ia ux. pn g " ) -100px 10 width: 400 px;
-50px; } 11 b a c k g r o u n d - c o l o r : red;
12 }
Link
67/82 68/82
Les transitions Les animations

GL & UML
modifient la valeur d’une propriété CSS de façon fluide GL & UML
J-P Comet transition : notation short-hand de J-P Comet
Introduction
transition-delay
Introduction
@keyframes : règle en CSS, qui modifie
transition-duration (obligatoire, en s)
HTML
transition-property (obligatoire) HTML progressivement le style d’un élément.
CSS CSS
transition-timing-function
Mise en forme Mise en forme animation : notation short-hand pour
de textes de textes
Modèle des
boı̂tes
1
2
<h1 > Les transitions en CSS </h1 >
<body > Modèle des
boı̂tes
animation-name : nom à réutiliser dans la déclaration du
Gestion du 3 <div class= " div-un " > Gestion du @keyframes
4 <p > Un premier paragraphe </p >
fond
5 <p > Un deuxième paragraphe </p >
fond
animation-duration : durée de l’animation, en s
Image, audio,
6
7
<p > Un troisième paragraphe </p >
</div > Image, audio, animation-timing-function : courbe de vitesse de
vidéo 8 </body > </html > vidéo
l’animation
Formulaires Formulaires animation-delay : délai de l’animation ;
1 . div-un { width: 200 px; height: 200 px;
HTML
2 b a c k g r o u n d - c o l o r : #06 D;
HTML animation-iteration-count : nombre de fois que
Responsive 3 Responsive
design 4
border: 5 px solid purple;
- w e b k i t - t r a n s i t i o n : 3 s width 2 s ease , ba ckg r oun d -color 5s ease; design l’animation doit être jouée
5
6
- m o z - t r a n s i t i o n : 3 s width 2 s ease , bac k gro u nd -color
- o - t r a n s i t i o n : 3 s width 2 s ease , bac k gro u nd -color
5s
5s
ease;
ease;
animation-direction : spécifie si l’animation doit se
7 t r a n s i t i o n : 3 s width 2 s ease , bac k gro u nd -color 5s ease; jouer à l’envers ou selon des cycles alternés, c’est-à-dire en
8 } /* ease = ease-in-out /
9 ease-in / ease-out / ease-in-out / linear */ changeant de sens à chaque fois.
10 . div-un:hover { width: 400 px;
11 b a c k g r o u n d - c o l o r : red; }
69/82 70/82
Les animations Les animations
GL & UML 1er exemple (anim1.html) GL & UML
J-P Comet 1 < ! D O C T Y P E html > <html > <head > ... </head > <body > J-P Comet 2ème exemple (anim2.html)
2 <h1 > Les animations en CSS </h1 >
3 <div > </div > 1 div { width: 150 px; height: 150 px; b a c k g r o u n d - c o l o r : green;
4 </body > 2 p o s i t i o n : relative;
HTML 5 </html > HTML 3 - w e b k i t - a n i m a t i o n - n a m e : chgt-couleur; /* Chrome , Safari , Opera */
CSS CSS 4 - w e b k i t - a n i m a t i o n - d u r a t i o n : 4 s;
Mise en forme Link Mise en forme 5 - w e b k i t - a n i m a t i o n - i t e r a t i o n - c o u n t : infinite;
de textes de textes 6 - w e b k i t - a n i m a t i o n - d i r e c t i o n : alternate;
1 div { width: 100 px; height: 100 px; b a c k g r o u n d - c o l o r : blue; 7 - m o z - a n i m a t i o n - n a m e : chgt-couleur; /* Mozilla */
2 - w e b k i t - a n i m a t i o n - n a m e : chgt-couleur; /* Chrome , Safari , Opera */ 8 - m o z - a n i m a t i o n - d u r a t i o n : 4 s;
boı̂tes boı̂tes
3 - w e b k i t - a n i m a t i o n - d u r a t i o n : 5 s; 9 - m o z - a n i m a t i o n - i t e r a t i o n - c o u n t : infinite;
Gestion du 4 - m o z - a n i m a t i o n - n a m e : chgt-couleur; /* Mozilla */ Gestion du 10 - m o z - a n i m a t i o n - d i r e c t i o n : alternate;
fond 5 - m o z - a n i m a t i o n - d u r a t i o n : 5 s; fond 11 a n i m a t i o n - n a m e : chgt-couleur;
Les tableaux 6 a n i m a t i o n - n a m e : chgt-couleur; Les tableaux 12 a n i m a t i o n - d u r a t i o n : 4 s;
Image, audio, 7 a n i m a t i o n - d u r a t i o n : 2 s; Image, audio, 13 a n i m a t i o n - i t e r a t i o n - c o u n t : infinite;
vidéo 8 a n i m a t i o n - i t e r a t i o n - c o u n t : 3; vidéo 14 a n i m a t i o n - d i r e c t i o n : alternate; }
9 } 15 /* Pour Chrome , Safari et Opéra */
10 /* Pour Chrome , Safari et Opéra */ 16 @ -w e b ki t -k e y fr a me s chgt-couleur { [...] }
Formulaires Formulaires 17 /* Pour Mozilla */
11 @ -w e b k i t -k e y fr a me s chgt-couleur {
HTML HTML 18 @moz-keyfram es chgt-couleur { [...] }
12 from { b a c k g r o u n d - c o l o r : blue; }
Responsive 13 to { b a c k g r o u n d - c o l o r : orange; } Responsive 19 /* Syntaxe standard */
design 14 } design 20 @keyframes chgt-couleur {
15 /* Pour Mozilla */ 21 0% { b a c k g r o u n d - c o l o r : green; top: 0 px; left: 0 px }
16 @moz-keyframes chgt-couleur { 22 25% { b a c k g r o u n d - c o l o r : yellow; top: 0 px; left: 300 px }
17 from { b a c k g r o u n d - c o l o r : blue; } 23 50% { b a c k g r o u n d - c o l o r : red; top: 300 px; left: 300 px }
18 to { b a c k g r o u n d - c o l o r : orange; } 24 75% { b a c k g r o u n d - c o l o r : blue; top: 300 px; left: 0 px }
19 } 25 100% { b a c k g r o u n d - c o l o r : green; top: 0 px; left: 0 px } }
20 /* Syntaxe standard */
21 @keyframes chgt-couleur { Link
22 from { b a c k g r o u n d - c o l o r : blue; }
23 to { b a c k g r o u n d - c o l o r : orange; }
24 }
70/82 70/82
Les formulaires en HTML Les formulaires simples

GL & UML GL & UML
J-P Comet J-P Comet

Les éléments du formulaires
Elément Définition
form Définit un formulaire
Introduction Introduction input Définit un champ de données pour l’utilisateur
HTML HTML label Définit une légende pour un élément input
CSS CSS textarea Définit un champ de texte long
Mise en forme Mise en forme select Définit une liste de choix
de textes permettre de recueillir des données envoyées par nos de textes optgroup
option
Définit un groupe d’options dans une liste
Définit une option dans une liste
boı̂tes utilisateurs. boı̂tes
fieldset
legend
Permet de regrouper les éléments d’un formulaire en différentes parties
Ajoute une légende à un élément fieldset
fond problème : comment traiter ces données (inscription...) fond 1er exemple :
Les tableaux
Image, audio,
nécessité d’autres languages côté serveur (PHP / SQL) Les tableaux
Image, audio, 1 < ! D O C T Y P E html > <html > <head > ... </head > <body >
2 <h1 > Les formulaires HTML </h1 >
Mise en guarde :
vidéo vidéo
CSS avancé CSS avancé 3
4
« se mefier des données récupérées via un formulaire »
<form method= " post " action= " traitement.php " >
Formulaires Formulaires 5 // Ici nous allons créer notre formulaire
HTML HTML 6 < / form >
Responsive Responsive 7 </body >
design design 8 </html >
method=”post” ou ”get”
get : faire transiter les données par l’URL (en clair/ pb taille)
post : les envoyer par HTTP post transaction.
action=”traitement.php”
adresse relative de la page dans laquelle les données doivent être traitées
72/82 73/82
Un exemple complet L’élément HTML input
GL & UML GL & UML
J-P Comet J-P Comet

Input type = ”text” : monoligne
Input type = ”password” : monoligne rempli avec des ”*”
HTML HTML
Input type = ”date”
CSS CSS
de textes de textes
1 <form method= " post " action= " trai tem ent2.php " >
Modèle des Modèle des 2 <label for= " d1 " > date de naissance : < / label >
boı̂tes boı̂tes 3 <input type= " date " name= " d1 " id= " date1 " >
Gestion du Gestion du 4 <br > <br >
fond fond 5 <input type= " submit " value= " Envoyer Date " >
Les tableaux Les tableaux 6 < / form >
vidéo vidéo
CSS avancé
Formulaires
CSS avancé
Formulaires
Input type = ”email”
HTML HTML
Responsive Responsive Input type = ”url”
design design
Input type = ”number”
1 <form method= " post " action= " trai tem ent2.php " >
2 <label for= " n1 " > entrez un nombre : < / label >
3 <input type= " number " name= " n1 " id= " date1 " >
4 <br > <br >
5 <input type= " submit " value= " Envoyer nombre " >
6 < / form >
74/82 75/82
L’élément HTML input L’élément HTML input

GL & UML GL & UML Input type = ”checkbox”
1 <form method= " post " action= " t raitement.php " >
J-P Comet J-P Comet 2 Quel ( s ) sport ( s ) pratiquez vous ? <br >
3 <input type= " checkbox " name= " sport " value= " natation " id= " natation " >
4 <label for= " natation " > Natation < / label > <br >
5 <input type= " checkbox " name= " sport " value= " boxe " id= " boxe " >
HTML HTML 6 <label for= " boxe " > Boxe < / label > <br >
CSS Input type = ”radio” CSS 7 <input type= " checkbox " name= " sport " value= " course " id= " course " >
Mise en forme Mise en forme 8 <label for= " course " > Course à pied < / label > <br >
de textes 1 <form method= " post " action= " traitement.php " > de textes 9 <input type= " checkbox " name= " sport " value= " aviron " id= " aviron " >
2 10 <label for= " aviron " > Aviron < / label > <br >
Modèle des Homme ou femme ? <br > Modèle des
3 11 <input type= " checkbox " name= " sport " value= " escalade " id= " escalade " >
boı̂tes <input type= " radio " name= " sexe " value= " homme " id= " homme " > boı̂tes
4 <label for= " homme " > Un homme < / label > <br > 12 <label for= " escalade " > Escalade < / label > <br > <br >
fond 5 <input type= " radio " name= " sexe " value= " femme " id= " femme " > fond
6 <label for= " femme " > Une femme < / label > <br > <br > 14 O ù avez vous voyagé ? <br >
Les tableaux Les tableaux 15 <input type= " checkbox " name= " voyage " value= " australie " id= " australie " >
7
Image, audio, 8 Majeur ou mineur ? <br > Image, audio, 16 <label for= " australie " > Australie < / label > <br >
vidéo 9 <input type= " radio " name= " age " value= " mineur " id= " mineur " > vidéo 17 <input type= " checkbox " name= " voyage " value= " islande " id= " islande " >
CSS avancé 10 <label for= " mineur " > Mineur < / label > <br > CSS avancé 18 <label for= " islande " > Islande < / label > <br >
11 <input type= " radio " name= " age " value= " majeur " id= " majeur " > 19 <input type= " checkbox " name= " voyage " value= " maroc " id= " maroc " >
Formulaires Formulaires 20 <label for= " maroc " > Maroc < / label > <br >
HTML 12 <label for= " majeur " > Majeur < / label > <br > HTML
13 < / form > 21 <input type= " checkbox " name= " voyage " value= " canada " id= " canada " >
Responsive Responsive 22 <label for= " canada " > Canada < / label > <br >
design design 23
24 <input type= " submit " value= " Envoyer le formulaire " >
25 < / form >
75/82 75/82
L’élément HTML input Ameliorer un formulaire avec des attributs
Autocomplete Permet l’autocomplétion d’un champ
GL & UML Liste d’options ”select” GL & UML Autofocus Force le focus sur un champ
1 <form method= " post " action= " traitement.php " > Min et Max Permettent de définir une valeur minimale et maximale pour un champ
J-P Comet 2 O ù habitez vous ? <br > J-P Comet Placeholder Donne un exemple de données attendues
3 <select name= " pays " > Checked Pré-coche une case
Introduction 4 <option value= " france " > France< / option > Introduction Selected Pré-sélectionne une option dans une liste
HTML 5 <option value= " belgique " > Belgique< / option > HTML Required Force le remplissage d’un champ
6 <option value= " canada " > Canada< / option >
CSS
Mise en forme
7 <option value= " maroc " > Maroc< / option >
CSS
Mise en forme
autocomplete
8 <option value= " tunisie " > Tunisie< / option >
de textes 9 <option value= " algerie " > Algerie< / option > de textes 1 <input type= " text " name= " pseudo " id= " pseudo " autocomplete= " on " >
Modèle des 10 <option value= " togo " > Togo< / option > Modèle des
boı̂tes 11 <option value= " rwanda " > Rwanda< / option > boı̂tes
Gestion du 12 < / select > Gestion du
fond 13 <input type= " submit " value= " Envoyer ! " > fond autofocus
14 < / form >
Les tableaux Les tableaux 1 <form method= " post " action= " traitement.php " >
Image, audio, 1 <form method= " post " action= " traitement.php " > Image, audio, 2 <label for= " pre " > Entrez votre prénom : < / label >
vidéo 2 <select name= " pays " > vidéo 3 <input type= " text " name= " prenom " id= " pre " autocomplete= " on " >
CSS avancé 3 <optgroup label= " Europe " > CSS avancé 4 <label for= " nom " > Entrez votre nom : < / label >
4 <option value= " france " > France< / option > 5 <input type= " text " name= " nom " id= " nom " autofocus >
Formulaires 5 <option value= " belgique " > Belgique< / option > Formulaires
HTML HTML 6 <input type= " submit " value= " Envoyer " >
6 < / optgroup > 7 < / form >
Responsive 7 <optgroup label= " Amérique " > Responsive
design 8 <option value= " canada " > Canada< / option > design
9 < / optgroup >
10
11
<optgroup label= " Afrique " >
<option value= " maroc " > Maroc< / option >
min / max
12 <option value= " tunisie " > Tunisie< / option >
1 <label for= " chiffre " > Choisissez un chiffre entre 1 et 10 : < / label >
13 <option value= " algerie " > Algerie< / option >
2 <input type= " number " name= " chiffre " id= " chiffre " min= " 1 " max= " 10 " >
14 <option value= " togo " > Togo< / option >
15 <option value= " rwanda " > Rwanda< / option >
16 < / optgroup >
17 < / select >
18 <input type= " submit " value= " Envoyer ! " >
75/82 76/82
19 < / form >
Ameliorer un formulaire avec des attributs Ameliorer un formulaire avec des attributs
GL & UML GL & UML Autocomplete Permet l’autocomplétion d’un champ
Autofocus Force le focus sur un champ
Min et Max Permettent de définir une valeur minimale et maximale pour un champ Autofocus Force le focus sur un champ
J-P Comet Placeholder Donne un exemple de données attendues J-P Comet Min et Max Permettent de définir une valeur minimale et maximale pour un champ
Checked Pré-coche une case Placeholder Donne un exemple de données attendues
Introduction Selected Pré-sélectionne une option dans une liste Introduction Checked Pré-coche une case
HTML Required Force le remplissage d’un champ HTML Selected Pré-sélectionne une option dans une liste
Required Force le remplissage d’un champ
CSS
placeholder CSS
Mise en forme
de textes
Mise en forme
de textes
placeholder
1 <input type= " text " name= " prenom " id= " pre " placeholder= " Ex: Jean " >
Modèle des Modèle des 1 <input type= " text " name= " prenom " id= " pre " placeholder= " Ex: Jean " >
boı̂tes boı̂tes
Gestion du
checked / selected Gestion du
fond fond
checked / selected
1 <form method= " post " action= " traitement.php " >
Image, audio, 2 Homme ou femme ? <br > Image, audio, 1 <form method= " post " action= " traitement.php " >
vidéo 3 <input type= " radio " name= " sexe " value= " homme " id= " homme " checked > vidéo 2 Homme ou femme ? <br >
CSS avancé 4 <label for= " homme " > Un homme < / label > <br > CSS avancé 3 <input type= " radio " name= " sexe " value= " homme " id= " homme " checked >
Formulaires 5 <input type= " radio " name= " sexe " value= " femme " id= " femme " > Formulaires 4 <label for= " homme " > Un homme < / label > <br >
HTML 6 <label for= " femme " > Une femme < / label > <br > <br > HTML 5 <input type= " radio " name= " sexe " value= " femme " id= " femme " >
7 6 <label for= " femme " > Une femme < / label > <br > <br >
Responsive Responsive 7
8 O ù avez vous voyagé ? <br >
design design 8 O ù avez vous voyagé ? <br >
9 <input type= " checkbox " name= " trip " value= " australie " id= " austr " >
10 <label for= " austr " > Australie < / label > <br > 9 <input type= " checkbox " name= " trip " value= " australie " id= " austr " >
11 <input type= " checkbox " name= " trip " value= " islande " id= " island " > 10 <label for= " austr " > Australie < / label > <br >
12 <label for= " island " > Islande < / label > <br > 11 <input type= " checkbox " name= " trip " value= " islande " id= " island " >
13 <input type= " checkbox " name= " trip " value= " maroc " id= " mar " checked > 12 <label for= " island " > Islande < / label > <br >
14 <label for= " mar " > Maroc < / label > <br > 13 <input type= " checkbox " name= " trip " value= " maroc " id= " mar " checked >
15 <input type= " checkbox " name= " trip " value= " canada " id= " can " checked > 14 <label for= " mar " > Maroc < / label > <br >
16 <label for= " can " > Canada < / label > <br > 15 <input type= " checkbox " name= " trip " value= " canada " id= " can " checked >
17 < / form > 16 <label for= " can " > Canada < / label > <br >
17 < / form >
76/82 76/82
Ameliorer un formulaire avec des attributs Organiser et mettre en forme un formulaire
GL & UML
GL & UML
fieldset : permet de regrouper certains éléments
Autofocus Force le focus sur un champ
J-P Comet J-P Comet 1 < ! D O C T Y P E html > <html > <head > ... </head > <body >
Min et Max Permettent de définir une valeur minimale et maximale pour un champ
Placeholder Donne un exemple de données attendues 2 <h1 > Les formulaires HTML </h1 >
Introduction Checked Pré-coche une case Introduction 3 <form method= " post " action= " traitement.php " >
Selected Pré-sélectionne une option dans une liste 4 <fieldset >
HTML HTML
5 <legend > Informations personnelles : < / legend >
CSS Required Force le remplissage d’un champ CSS 6 <label for= " prenom " > Entrez votre prénom : < / label >
Mise en forme
de textes
selected Mise en forme
de textes
7
8
<input type= " text " name= " prenom " id= " prenom " > <br >
<label for= " nom " > Entrez votre nom : < / label >
Modèle des 1 <form method= " post " action= " traitement.php " > Modèle des 9 <input type= " text " name= " nom " id= " nom " > <br >
boı̂tes 2 O ù habitez vous ? <br > boı̂tes 10 <label for= " mail " > Choisissez un pseudo : < / label >
Gestion du 3 <select name= " pays " > Gestion du 11 <input type= " email " name= " mail " id= " mail " > <br >
fond 4 <option value= " france " > France< / option > fond 12 < / fieldset >
5 <option value= " belgique " selected > Belgique< / option > 13 <fieldset >
Les tableaux Les tableaux 14 <legend > Informations su ppl ém entaire s : < / legend >
6 <option value= " canada " > Canada< / option >
Image, audio, 7 <option value= " maroc " > Maroc< / option > Image, audio, 15 Hobbies <br >
vidéo 8 <option value= " tunisie " > Tunisie< / option > vidéo 16 <input type= " checkbox " name= " hobbies " value= " Informatique "
CSS avancé 9 <option value= " algerie " > Algerie< / option > CSS avancé 17 id= " info " >
Formulaires 10 <option value= " togo " > Togo< / option > Formulaires 18 <label for= " info " > Informatique< / label >
HTML 11 <option value= " rwanda " > Rwanda< / option > HTML 19 <input type= " checkbox " name= " hobbies " value= " Sport " id= "
12 < / select > sport " >
Responsive Responsive 20 <label for= " sport " > Sport< / label >
design 13 < / form > design 21 <input type= " checkbox " name= " hobbies " value= " Voyages " id= "
required 22
voyage " >
<label for= " voyage " > Voyages< / label >
1 <label for= " pseudo " > Entrez un pseudo : < / label > 23 <input type= " checkbox " name= " hobbies " value= " Musique " id= "
2 <input type= " text " name= " pseudo " id= " pseudo " required > <br > musique " >
3 <label for= " pass " > Choisissez un mot de passe : < / label > 24 <label for= " musique " > Musique< / label >
4 <input type= " password " name= " pass " id= " pass " required > <br > 25 < / fieldset >
26 <input type= " submit " value= " Envoyer " >
27 < / form >
28 </body > </html >
76/82 77/82
Organiser et mettre en forme un formulaire Organiser et mettre en forme un formulaire

GL & UML GL & UML
J-P Comet J-P Comet

fieldset : permet de regrouper certains éléments
Introduction
HTML
Introduction
HTML
Mettre en forme un formulaire grâce au CSS
CSS fieldset : permet de regrouper certains éléments CSS 1 body { f o n t - s i z e : 16 px; f o n t - f a m i l y : Verdana sans-serif; color: #333;}
Mise en forme Mise en forme 2 # section-1 {
de textes de textes 3 b a c k g r o u n d - c o l o r : rgba (168 , 197 , 36 , 0.6) ;
Modèle des Modèle des 4 padding: 10 px; margin: 20 px 0 px; }
boı̂tes boı̂tes 5 # section-2 {
6 b a c k g r o u n d - c o l o r : rgba (36 ,168 ,197 ,0.6) ;
Gestion du Gestion du 7 padding: 10 px; margin: 20 px 0 px; }
fond fond 8 # section-1:hover , # section-2: hov er {
Les tableaux Les tableaux 9 b o x - s h a d o w : 0 px 0 px 5 px #444;}
Image, audio, Image, audio, 10 legend { f o n t - w e i g h t : bolder; text- tra nsform: uppercase;
vidéo vidéo 11 f o n t - s i z e : 22 px; color: # D44; }
CSS avancé CSS avancé 12 # section-1 input { width: 300 px; height: 20 px; }
13 # section-2 input { width: 10 px; height: 20 px; }
Formulaires Formulaires 14 # section-1 label { di sp la y: inline-block;
HTML HTML 15 width: 200 px; pa dd in g: 10 px 0 px 15 px 40 px; }
Responsive Responsive 16 # section-2 label { di sp la y: inline-block;
design design 17 width: 100 px; pa dd in g: 5 px 0 px 15 px 10 px; }
18 input [ type= " submit " ]{
19 float: right; pa dd in g: 10 px; f o n t - s i z e : 16 px;
20 color: # fff; f o n t - w e i g h t : bold; text-t ran sform: uppercase;
21 b a c k g r o u n d - c o l o r : # fe6921; b o r d e r - r a d i u s : 5 px; }
22 input [ type= " submit " ]: hover {
23 b o x - s h a d o w : 0 px 0 px 3 px #555; b a c k g r o u n d - c o l o r : # e8ab2e; }
77/82 77/82
Organiser et mettre en forme un formulaire Introduction au ”responsive design”
GL & UML GL & UML
J-P Comet fieldset : permet de regrouper certains éléments J-P Comet
Introduction Mettre en forme un formulaire grâce au CSS Introduction

HTML HTML
CSS CSS
de textes de textes ensemble des techniques permettant d’adapter les pages
Modèle des
boı̂tes
Modèle des
boı̂tes web à toutes les tailles d’écrans (tablettes, smartphones...)
Gestion du
fond
Gestion du
fond
3 façons d’adapter son site
Les tableaux Les tableaux Créer un site dédié pour chaque terminal différent
vidéo vidéo Créer une application mobile en plus de notre site web
CSS avancé CSS avancé Utiliser les outils offerts par HTML/CSS et créer une
HTML HTML version responsive du site.
design design
Link
77/82 79/82
Le viewport et l’utilisation des pourcentages Le viewport et l’utilisation des pourcentages

GL & UML
viewport : taille de la fenêtre web des visiteurs. GL & UML
Utilisation des valeurs en pourcentage en CSS
J-P Comet J-P Comet
1 < ! D O C T Y P E html > <html > si l’élément body a une taille égale à 100%, une largeur de 50% pour un div
2 <head > enfant direct du body, la taille du div sera toujours égale à 50% de celle du
Introduction 3 <title > Responsive design </title > <meta charset:= " utf-8 " > Introduction
4 <meta name= " viewport " content= " width=device-width , i ni tia l- sca le =1. 0 " >
body.
HTML HTML
CSS 5 <li nk rel= " stylesheet " href= " styles.css " > CSS
Si les paragraphes à l’intérieur de votre div ont une lar-
Mise en forme
6 </head >
Mise en forme geur égale à 50% du div, les paragraphes occuperont 50% de la largeur du div.
7 <body >
de textes 8 <h1 > Responsive design </h1 > de textes
1 < ! D O C T Y P E html > <html > <head > ... </head > <body >
Modèle des 9 <img src= " sunset.jpg " alt= " coucher de soleil " > Modèle des 2 <h1 > Responsive ! </h1 >
boı̂tes 10 <p > La durée du crépuscule [...] </p > boı̂tes 3 <div >
Gestion du 11 </body > Gestion du 4 <p > un premier paragraphe </p >
fond 12 </html > fond 5 <p > un deuxième paragraphe </p >
Les tableaux Les tableaux 6 <p > un troisième paragraphe </p >
Image, audio, sans meta viewport avec meta viewport Image, audio, 7 </div >
vidéo vidéo 8 </body > </html >
CSS avancé CSS avancé 1 body { width: 100%; }
Formulaires Formulaires 2 div { width: 50%; border: 1 px solid black; b a c k g r o u n d - c o l o r : %#666; }
HTML HTML 3 p { width: 50%; border: 1 px solid black; b a c k g r o u n d - c o l o r : red; }
design design
Link
80/82 80/82
Media queries Media queries
GL & UML la règle CSS @media : appliquer différentes propriétés ou différentes GL & UML Utiliser les media queries pour changer l’agencement des
J-P Comet
valeurs à des éléments HTML selon la taille de l’écran et le type de media
J-P Comet
éléments HTML : display, position Link
utilisé (écran, imprimante, etc.). 1 < ! D O C T Y P E html > <html > <head > <title > Responsive design </title >
Introduction choix des éléments à afficher selon l’écran... Introduction 2 <meta charset= " utf-8 " >
3 <meta name= " viewport " content= " width=device-width , i n it ia l -s ca l e= 1. 0 " >
HTML @media screen : média doté d’un écran HTML 4 <li nk rel= " stylesheet " href= " 10 - r e s p o n s i v e d e s i g n - t e s t - 4 . c s s " >
CSS CSS 5
Mise en forme @media print : imprimante Mise en forme 6
</head >
<body >
de textes @media speech : lire à haute voix de textes 7
8
<h1 > Responsive design </h1 >
<div class= " div1 " >
boı̂tes @media all : pour tous les média boı̂tes 9 <p > Je suis un paragraphe appartenant au 1 r div. </p >
10 </div >
Gestion du 1 < ! D O C T Y P E html > <html > <head > ... </head > <body > Gestion du
11 <div class= " div2 " >
fond 2 <h1 > Responsive design </h1 > fond
12 <p > Je suis un paragraphe appartenant au 2 ème div. </p >
Les tableaux 3 </body > Les tableaux 13 </div >
Image, audio, 4 </html > Image, audio, 14 <div class= " div3 " >
vidéo 1 @media screen and ( max-width: 680 px ) { vidéo 15 <p > Je suis un paragraphe appartenant au 3 ème div. </p >
2 body { b a c k g r o u n d - c o l o r : orange; } } 16 </div >
CSS avancé 3 @media screen and ( min-width: 681 px ) and ( max-width: 1279 px ) { CSS avancé
17 <div class= " footer " >
Formulaires 4 body { b a c k g r o u n d - c o l o r : blue; } } Formulaires
18 <p > Je suis un pied de page. </p >
HTML 5 @media screen and ( min-width: 1280 px ) { HTML
19 </div >
Responsive 6 body { b a c k g r o u n d - c o l o r : green; } } Responsive 20 </body > </html >
design design
Link
81/82 81/82
Media queries Media queries

GL & UML Utiliser les media queries pour changer l’agencement des GL & UML Utiliser les media queries pour changer l’agencement des
J-P Comet
J-P Comet
1 body { margin: 0 px; padding: 0 px; } 1 @media screen and ( max-width: 780 px ) {
Introduction 2 Introduction 2 . div1 , . div2 , . div3 {
3 . div1 , . div2 , . div3 { 3 width: 100%;
HTML 4 display: inline-block; HTML 4 b o r d e r - r i g h t : none;
CSS 5 width: 28%; height: 100 px; CSS 5 b o r d e r - l e f t : none;
Mise en forme 6 border: 3 px solid \# AAA; margin: 1%; } Mise en forme 6 m a r g i n - l e f t : 0 px;
de textes 7 de textes 7 m a r g i n - r i g h t : 0 px;
Modèle des 8 . div1 { b a c k g r o u n d - c o l o r : orange; } Modèle des 8 }
boı̂tes 9 . div2 { b a c k g r o u n d - c o l o r : \#28 B; } boı̂tes 9 . footer {
10 . div3 { b a c k g r o u n d - c o l o r : \#2 B8; } 10 d is pl ay : none;
11 11 }
fond fond
12 . footer { width: 100%; height: 200 px; 12 }
Les tableaux 13 m a r g i n - t o p : 20 px; b o r d e r - t o p : 1 px solid black; Les tableaux
Image, audio, 14 t e x t - a l i g n : center; b a c k g r o u n d - c o l o r : \# CCC; } Image, audio,
vidéo vidéo
HTML HTML
design design
1 @media screen and ( o r i e n t a t i o n : l a n d s c a p e ) {

2 /* ... */
3 }
81/82 81/82

Html&css

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Html&css

Încărcat de

Drepturi de autor:

Formate disponibile

Une page Web

GL & UML GL & UML

J-P Comet J-P Comet

Domain Name server – adresse IP Introduction

J-P Comet HTML : HyperText Markup Language (sémantique) J-P Comet

Travail en local Editeur de texte

J-P Comet J-P Comet

Les titres Les paragraphes / espaces / retours à la lignes

J-P Comet h1 à h6 : heading à l’intérieur de la page J-P Comet

J-P Comet J-P Comet

Les listes Les listes

J-P Comet J-P Comet

Les autres types de liens Afficher des images

J-P Comet Pour se 1 < ! D O C T Y P E html > J-P Comet

J-P Comet J-P Comet

Emplacement du code CSS Emplacement du code CSS

J-P Comet 3 endroits possibles : J-P Comet

Introduction 2 dans la balise ouvrante des éléments HTML Introduction

Sélecteurs simples HTML/CSS - les attributs id et class

1 h1 , p { Différences et utilisation avancée

Priorité et ordre en CSS (emplacement) HTML/CSS - Block vs inline

<span> est un élement de type inline Link

font-family et les google fonts font-family et les google fonts

design 900 design

word-spacing : 10px / 10%

Couleur et Opacité d’un texte Les propriétés de type text

Link 39/82 Link 40/82

Les bordures Les marges / Les ombres

La propriété display La propriété display

Le positionnement : position Le positionnement : position

La propriété float / clear La propriété float / clear

J-P Comet la page. 3 points à retenir : J-P Comet

La propriété overflow La propriété overflow

Aligner horizontalement un élément HTML grâce à la

J-P Comet J-P Comet

La couleur de fond en CSS La couleur de fond en CSS

J-P Comet J-P Comet

J-P Comet J-P Comet

La couleur de fond en CSS La couleur de fond en CSS

J-P Comet J-P Comet

J-P Comet J-P Comet

Introduction background-color Introduction

J-P Comet J-P Comet

J-P Comet J-P Comet

Les dégradés linéaires et radiaux Les dégradés linéaires et radiaux

J-P Comet J-P Comet

Créer un tableau simple Créer un tableau structuré

fusionner des cellules fusionner des cellules

J-P Comet colspan et rowspan J-P Comet Ajouter une légende

design design 13 <source src= " magic.ogg " >

Insérer un contenu vidéo Short hand et long hand

figure et figcaption background : background-color, background-image, background-repeat,

grouper les sélecteurs Link

Les sélecteurs avancés Les sélecteurs avancés

J-P Comet J-P Comet

Les pseudo classes CSS Les pseudo classes CSS

J-P Comet J-P Comet

Link 65/82 65/82

CSS - Pseudo éléments CSS - Pseudo éléments

::before insère du contenu au début d’un élément

::after insère du contenu à la fin d’un élément

Les transitions Les animations

J-P Comet transition : notation short-hand de J-P Comet