HTML/CSS

1
Table des matières
1. Internet
2. HTML
3. CSS
4. Les formulaires

2
Internet
Historique
Concepts de base

3
 Chronologie 1/2
Historique
1969 : Le réseau ARPANET initial constituée de 4 ordinateurs (UCLA, Stanford Research Institute,
Santa Barbara, Salt Lake City ) est fonctionnel.
1973 : 35 machines connectées sur ARPANET
1975 : TCP + IP + UDP
1984 : TCP/IP au CERN
Terminologie dans les années 80 : apparition du mot « Internet »
« “Internet”, “l’Internet”, “internet” ou “l’internet” »
Amendement pour « l'internet » rejeté le 5 janvier 2016

4
 Chronologie 2/2
Historique
1990 : Tim Berners Lee du CERN propose l'idée du World Wide Web
1993 : Premier navigateur Mosaic
1994 : Création de Yahoo!
1994 : Tim Berners Lee fonde le World Wide Web Consortium (W3C)

5
Concepts de base
Réseaux
Architecture client/serveur
URL

6
 Le réseau
Protocoles TCP/IP :
couche réseau-hôte : carte réseau (Ethernet/Wifi) + Drivers
couche internet : gestion du routage, e.g. le protocole ICMP (Internet Control Message Protocol)
couche transport : régulation des flux de données, e.g. les protocole TCP (Transmission Control
Protocol) et UDP (User Datagram Protocol)
couche application : programmes utilisateurs tel que navigateur Web, FTP, Telnet, Ping, POP, SMTP,
…

7
 L'architecture client/serveur
La notion de client/serveur : mode de communication entre au moins deux ordinateurs
l’un ou les uns, qualifiés de clients, envoient des requêtes
l’autre ou les autres, qualifiés de serveurs, attendent ces requêtes et y répondent
Par extension, le client désigne également l’ordinateur sur lequel s’exécute le programme client, et le serveur
l’ordinateur sur lequel s’exécute le programme serveur.

8
 Le protocole
Le serveur et le client doivent donc utiliser le même protocole pour pouvoir communiquer:
HTTP (Hyper Text Transfert Protocol) pour les documents hypertextes (text, images, vidéos, sons);
FTP (File Transfert Protocol) pour le transfert des fichiers;
SMTP (Simple Mail Transfert Protocol) pour l’envoi des messages électroniques;
POP et IMAP pour la réception de messages électroniques.

9
 Exemple d'application : le mail
Le client : le logiciel de messagerie électronique envoie des requêtes et attends les réponses.
Le serveur : un logiciel serveur installé sur une machine traite les requêtes des clients.
L’émission de courrier :
Le client utilise SMTP pour envoyer des messages au serveur qui transmettra au serveur du destinataire
final.
La réception de courrier :
Le destinateur final récupère par POP/IMAP son courrier depuis son serveur qui reçoit les messages du
serveur de l'expéditeur
Le navigateur (Webmail) peut représenter une alternative au client de messagerie. Dans ce cas, les courriers
transitent par un serveur web.

10
 URL : Universal/Uniform Resource Locator
Accéder à une ressource/serveur ⇒ décrire où elle se trouve.
URL : Description de la localisation d’un fichier, une source de données, …, etc.
Une URL peut désigner :
un serveur ftp,
un fichier sur votre disque,
une adresse courrier,
une page Web publiée par un serveur (serveur de Web).

11
 URL
<protocole>://<nomserveur>[:port]/<chemin>

Le nom du protocole (HTTP, FTP)

Le nom du serveur (adresse IP, ou nom symbolique)
Le chemin d’accès à la ressource
Le nom de la ressource

12
 Description d'URL
Adresse IP : identifiant unique des ordinateurs (ex. 127.0.0.1).
Nom de Domaine / Nom de machine : nom symbolique d’une machine sur Internet (ex. ent.univ-st-etienne.fr)
DNS (Domain Name Service / Serveur) : Service de correspondance
IP ⇔ Nom de Domaine / Machine
Port : Valeur numérique unique pour chaque programme (ex. FTP/21, SMTP/25, HTTP/80, POP3/110)

13
HTML

14
 Le langage HTML
HTML : HyperTexte Markup Language
Langage de balisage pour structurer des pages web
Langage de description ≠ Langage de programmation
HTML correspond au code source interprêté dans un navigateur pour afficher une page web.

15
 Historique
1991 : HTML
1995 : HTML 2.0
1997 : HTML 3.2
1999 : HTML 4.01
2000 : XHTML
2014 : HTML5

16
4 types d'éléments
les balises
les attributs de balises
les commentaires
les entités

17
 Les balises
Une balise :
commence par un <
possède un nom
se termine par un >

18
 Les balises de zone
Les balises vont généralement par paires (ouvrante/fermante)
(ex : <p> </p> pour un paragraphe)
Le nom de la balise est écrit en minuscule
La balise fermante possède un / avant le nom de la balise
<balise>contenu</balise>

19
 Les balises ponctuelles
Les balises peuvent ne pas avoir de contenu
(ex: <br/> <br> pour un saut de ligne)
En HTML5 le slash de fin n'est pas obligatoire
<balise/>
<balise>

20
 Les attributs
Les attributs sont associés à une balise ouvrante
(ex: <img src="hello.jpg" alt="Hello"> pour afficher une image)
Ils possèdent un nom et une valeur
Certains attributs sont obligatoires pour certaines balises
On utilise généralement des " pour définir la valeur d'un attribut
<balise attribut="valeur">

21
 Les commentaires
Les commentaires ne sont pas affichés dans le navigateur
Ils sont visibles dans le code source Ctrl+U
<!-- Ceci est un commentaire -->

22
 Les entités
Les entités permettent d'afficher des caractères spéciaux (accents, signes, etc.)
Avec l'unicode, les entités sont surtout utilisés pour <, >, ", ' et & qui pourraient être confondu avec
le balisage HTML
&entite;
&#numero;

< &lt; &#60;

> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;

23
 Les entités : accents
Pour les accents, il existe différents suffixes : acute, grave, circ, uml mais en pratique, on ne les
utilise plus.
à : &agrave;
é : &eacute;
ö : &ouml;
î : &icirc;

Il existe d'autres entités : &nbsp; &euro; etc.

24
 La grammaire HTML
On peut définir 5 règles :
définir une balise de zone
définir une balise ponctuelle
paramétrer une balise à l'aide d'attributs
imbriquer des balises
ajouter des commentaires
Les espaces typographiques ne sont pas prises en compte en HTML sauf pour séparer 2 mots

25
Structure d'une page HTML

26
 Hello world
Créer un fichier avec l'extension .html
Insérer du code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre</title>
</head>
<body>
<!-- Commentaire : Hello world ! -->
Hello world &excl;
</body>
</html>

27
 L'entête <!DOCTYPE>

HTML 5
<!DOCTYPE html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

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

28
 La balise <html>
Une page HTML commence toujours par une balise <html>
Une page HTML finit toujours par une balise </html>
Entre ces deux balises, il y a toujours 2 autres balises de zone :
la zone d'entête (la tête) : <head></head>
la zone de contenu (le corps) : <body></body>

29
 La balise <head>
La balise d'entête contient les informations caractéristiques de la page :
encodage de la page (obligatoire)
<meta charset="utf-8">

titre de la page (obligatoire)

<title>Titre de la page</title>

30
 La balise <head>
Elle peut contenir d'autres informations
auteur, mots clés etc.
<meta name="description" content="Techniques Internet de base">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, SQL">
<meta name="author" content="Toto">

codes attachés (style, javascript)

Les informations ne sont pas visibles directement dans le rendu du navigateur (sauf le titre) mais sont visibles
dans le code source

31
 La balise <body>
La balise de contenu contient toutes les informations qui sont affichées par le navigateur :
le texte
les liens
les images
etc.

32
 Les balises de structure de la page
HTML5 introduit des balises sémantiques
<section></section> définit une section/partie de la page
<article></article> définit un article/post/commentaire ou un autre contenu important de la
page.
<header></header> définit l'entête de la page/section
<footer></footer> définit le bas de page de la page/section
<aside></aside> définit un texte qui se rapporte au sujet de la page/section mais qui ne
correspond pas directement au contenu de la page
<nav></nav> définit les liens de de navigation

33
 Les balises de titre
<h1>Titre de niveau H1</h1>
<h2>Titre de niveau H2</h2>
<h3>Titre de niveau H3</h3>
<h4>Titre de niveau H4</h4>
<h5>Titre de niveau H5</h5>
<h6>Titre de niveau H6</h6>

34
 Les balises pour le texte
<p>Paragraphe</p>
<p>
<em>Emphase par défaut en italique</em>
<strong>Accentuation par défaut en gras</strong>
<br>Saut de ligne
<hr>ligne horizontale pour séparer du texte
</p>

D'autres balises peuvent être utilisées

<cite></cite> pour une citation
<code></code> pour du code
<pre></pre> pour du texte préformatté
<samp></samp> pour un exemple
<blocknote></blocknote> pour une note
<address></address> pour une adresse
 pour des indices
 pour des exposants
etc.

35
 Les balises pour les images
La balise <img> permet d'afficher une image
Les attributs src et alt sont obligatoires
src : URL de l'image
alt : Texte alternatif qui remplace une image ne pouvant être affichée ou qui est dicté par certains
logiciels d'accessibilité
<img src="inc/img/html5.png" alt="logo html5" height="120" width="120">
<img src="inc/img/html.png" alt="logo html">

36
 Les balises pour les figures
<figure>
<img src="inc/img/html5.png" alt="logo html5">
<figcaption>Titre de l'image</figcaption>
</figure>

37
 Format des images (JPEG)
Joint Photographic Experts Group / JPEG (.jpg, .jpeg) :
Format idéal pour les photos et les illustrations compliquées.
Contient des millions de couleurs.
La Compression de l’image se fait avec une perte de qualité qui va de 0% à 99%.

38
 Format des images (GIF)
Graphics Interchange Format / GIF (.gif) :
Très pratique pour les dessins et images avec peu de nuances.
Peut contenir 256 couleurs ou moins.
Gère la transparence et les animations.

39
 Format des images (PNG)
Portable Network Graphics / PNG (.png) :
Format libre de droits.
Images entrelacées (affichage progressif).
Convient pour tout type d’image, la transparence mais pas les animations.
Il existe en 8 bits (type GIF, 256 couleurs) et en 24 bits.

40
 Format des images (SVG)
Scalable Vector Graphics / SVG (.svg) :
Format pour les images vectorielles (pas de pixelisation).
Convient pour les images correspondant à des schémas, logos, etc.
Description textuelle des images
Peut s'utiliser nativement dans html avec la balise <svg>

41
 Les balises pour les liens
Lien hypertexte :
Mécanisme qui permet de naviguer d’une pages web à une autre.
Permet de ne plus apprendre les adresses des ressources
Associé à un texte ou une image sur lesquels on peut cliquer
l'attribut href permet de définir l'URL
l'attribut target permet d'ouvrir le lien dans un autre onglet
<p>
<a href="#html-link" target="_blank">Un élément dans la même page</a><br>
<a href="./index.html?print-pdf" target="_blank">Une page du même site</a><br>
<a href="https://duckduckgo.com" target="_blank">Une page d'un autre site</a><br>
</p>

42
 Les balises pour les listes
Les listes ordonnées/non-ordonnées
<ol><!-- ordererd list -->
<li>élément 1</li><!-- list item -->
<li>élément 2</li>
</ol>
<ul><!-- unordererd list -->
<li>élément 1</li>
<li>élément 2</li>
</ul>

Les listes de définitions

<dl><!-- definition list -->
<dt>terme 1</dt><!-- definition term -->
<dd>définition 1</dd><!-- definition description -->
<dt>terme 2</dt>
<dd>définition 2</dd>
</dl>

43
 Les listes imbriquées
<ul>
<li>élément 1</li>
<li>élément 2
<ul>
<li>élément 2.1
<ul>
<li>élément 2.1.1</li>
</ul>
</li>
<li>élément 2.2</li>
</ul>
</li>
<li>élément 3
<ol>
<li>élément 3.1</li>
<li>élément 3.2</li>
</ol>
</li>
</ul>

44
 Les balises pour les tableaux
HTML offre 4 balises pour créer des tableaux
<table></table> début et fin de tableau
<tr></tr> Ligne du tableau
<th></th> Cellule du tableau (entête)
<td></td> Cellule du tableau (contenu)
Balises sémantiques
<caption></caption> légende du tableau
<thead></thead>, <tbody></tbody>, <tfoot></tfoot> structure du tableau

45
 Exemple d'un tableau
<table>
<caption>Les chiffres</caption>
<tr>
<th>A</th><th>B</th><th>C</th><th>D</th>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td>
</tr>
</table>

46
 Les attributs pour les tableaux
Il est possible de fusionner des cellules <td>, <th>
Fusionner des colonnes : attribut colspan
Fusionner des lignes : attribut rowspan
Les valeurs associées aux attributs correspondent au nombre de cellules à fusionner

47
 Exemple d'un tableau avancé
<table>
<caption>Les chiffres</caption>
<tr>
<th>A</th><th>B</th><th>C</th><th>D</th>
</tr>
<tr>
<td rowspan="2">1</td><td colspan="3">2</td>
</tr>
<tr>
<td>3</td><td>4</td><td>5</td>
</tr>
</table>
<!--
<style>table, td, th { border: 1px solid black; }</style>
-->

48
 Les balises neutres et attributs globaux
Balises neutres
<span></span> : balise de type inline (pas de retour à la ligne)
<div></div> : balise de type block (retour à la ligne)
Attributs globaux (toutes les balises)
id : identifiant unique dans la page associé à une balise
class : classe qui peut-être associée à plusieurs éléments dans la page
title : information affichée au survol de la souris

49
 Exemple d'utilisation de balises neutres
texte
<div id="id" class="class">
texte
<span class="class" title="title">
texte
</span>
texte
</div>
texte

50
CSS

51
 Le langage CSS
CSS : Cascading Style Sheets
Langage qui définit comment les balises HTML doivent être affichées par le navigateur
HTML pour le fond, CSS pour la forme

52
 Historique
1996 : CSS 1 (base)
1998 : CSS 2 (position, z-index, type de media)
2004-2011 : CSS 2.1 (correction de CSS 2)
2011-2014 : CSS 3 (modules indépendants)

53
 La syntaxe
/* commentaire */
selecteur { propriété: valeur; }
selecteur1, selecteur2 {
propriété1: valeur1;
propriété2: valeur2;
}

54
 Les sélecteurs de bases
le sélecteur universel * tous les éléments de la page
les balises nom toutes les balises « nom » de la page
les identifiants #id l'élément d'identifiant « id »
les classes .class tous les éléments avec la classe « class »
la combinaison simple nom.class toutes les balises « nom » avec la classe « class »

55
Comment appliquer du CSS à une page HTML

56
 Mise en place du CSS (Méthodes à éviter)
Directement dans le HTML
balise <style> dans <head>
Directement dans les balises
attribut style
<head>
<style>p {color: red;}</style>
</head>
<body>
<p>paragraphe</p>
<p style="color: blue;">paragraphe</p>
</body>

57
 Mise en place du CSS (Méthode conseillée)
En utilisant un fichier externe .css
balise <link> dans <head>
<head>
<link rel="stylesheet" type="text/css" href="inc/css/link.css">
<link rel="stylesheet" href="inc/css/link.css">
</head>
<body>
<p>paragraphe</p>
<p>paragraphe</p>
</body>

58
 Exemple
<head>
<style>
/* * { color: red; } */
p { background-color: green; }
#unique { text-align: center; }
.multiple { color: white; }
</style>
</head>
<body>
<h1>titre</h1>
<p class="multiple">paragraphe</p>
<p id="unique" class="multiple">paragraphe</p>
</body>

59
 La couleur
Propriétés basiques:
color : couleur du texte
background-color : couleur du fond

60
 La gestion de la couleur en CSS
En CSS2 17 couleurs supportés officiellement
noir et blanc : black, gray, silver, white
couleurs primaires : red, lime, blue
couleurs secondaries : yellow, aqua, fuchsia
autres couleurs : maroon, orange, olive, purple, green, navy, teal
Il en existe beaucoup, beaucoup d'autres inspirées du SVG
Pas forcément supportées par tous les navigateurs…

61
 Les couleurs simples
Possibilité de définir des couleurs en hexadécimal #RVB;
#000 : noir : black
#f00 : rouge : red
#0f0 : vert : lime (pas green)
#00f : bleu : blue
#fff : blanc : white
16 valeurs possibles pour chaque couleur : 0-9a-f
4096 couleurs différentes

62
 Les couleurs complètes
Possibilité de définir des couleurs en hexadécimal #RRVVBB;
#000000 : noir
#ff0000 : rouge
#00ff00 : vert
#0000ff : bleu
#ffffff : blanc
256 valeurs possibles pour chaque couleur : 00-ff
16 millions de couleurs

63
 Exemple couleurs
<head>
<style>
.vert-green { color: green; }
.vert-lime { color: #0f0; }
.vert-clair { color: #aaffaa; }
</style>
</head>
<body>
<p class="vert-green">vert</p>
<p class="vert-lime">vert</p>
<p class="vert-clair">vert</p>
</body>

64
 Les fonctions rgb, hsl
Il est possible d'éclaircir la couleur grâce à la propriété opacity
les valeurs sont comprises entre 0.0 et 1.0
Il est possible d'utiliser des fonctions rgb, hsl
rgb(red, green, blue) : 0-255 pour chaque couleur
hsl(hue, saturation, lightness) : hue de 0-360 (0, 360 : rouge, 120 : vert, 240 : bleu),
saturation et lightness pourcentage de 0% à 100%
Possibilité d'ajouter la transparence avec rgba et hsla, le dernier paramètre alpha est compris entre
0.0 et 1.0

65
 Exemple fonctions couleurs
<head>
<style>
.vert-rgb { color: rgb(0, 255, 0); }
.vert-hsl { color: hsl(120, 100%, 50%); }
.vert-rgb-clair { color: rgba(0, 255, 0, 0.24); }
.vert-hsl-clair { color: hsla(120, 100%, 50%, 0.24); }
.vert-opacity { color: #0f0; opacity: 0.24; }
</style>
</head>
<body>
<p class="vert-rgb">rgb</p>
<p class="vert-hsl">hsl</p>
<p class="vert-rgb-clair">rgba</p>
<p class="vert-hsl-clair">hsla</p>
<p class="vert-opacity">opacity</p>
</body>

66
Les propriétés CSS

67
 Le fond
<head>
<style>
.background-detail {
background-color: lime;
background-image: url("inc/img/css3.png");
background-repeat: repeat; /* no-repeat, repeat-x, repeat-y */
background-attachment: scroll; /* fixed, local */
background-position: center center; /* left, right / top bottom */
}
.background-shorthand {
background: lime url("inc/img/css3.png") repeat scroll center center;
}
</style>
</head>
<body>
<p class="background-detail">les<br> propriétés<br> background<br> en<br> détails</p>
<p class="background-shorthand">Une<br> seule<br> propriété<br> background</p>
</body>

68
 L'affichage en boîte

https://en.wikipedia.org/wiki/CSS_box_model

69
 La propriété margin
<head>
<style>
.margin-detail {
margin-top: 6px; /* auto, % */
margin-right: 24px;
margin-bottom: 42px;
margin-left: 84px;
}
.margin-shorthand {
margin: 6px 24px 42px 84px;
/* 3 valeurs : margin: (top) (right/left) (bottom); */
/* 2 valeurs : margin: (top/bottom) (right/left); */
/* 1 valeur : margin: (top/right/bottom/left); */
}
</style>
</head>
<body>
<p class="margin-detail">les<br> propriétés<br> margin<br> en<br> détails</p>
<p class="margin-shorthand">Une<br> seule<br> propriété<br> margin<br> pour tout</p>
</body>

70
 La propriété padding
<head>
<style>
.padding-detail {
padding-top: 6px; /* auto, % */
padding-right: 24px;
padding-bottom: 42px;
padding-left: 84px;
}
.padding-shorthand {
padding: 6px 24px 42px 84px;
/* 3 valeurs : padding: (top) (right/left) (bottom); */
/* 2 valeurs : padding: (top/bottom) (right/left); */
/* 1 valeur : padding: (top/right/bottom/left); */
}
</style>
</head>
<body>
<p class="padding-detail">les<br> propriétés<br> padding<br> en<br> détails</p>
<p class="padding-shorthand">Une<br> seule<br> propriété<br> padding<br> pour tout</p>
</body>

71
 La propriété border-style
<head>
<style>
.border-style-detail {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;
}
.border-style-shorthand {
border-style: solid dotted double dashed;
/* 3, 2 et 1 valeurs cf margin */
}
</style>
</head>
<body>
<p class="border-style-detail">les<br> propriétés<br> border-style en<br> détails</p>
<p class="border-style-shorthand">Une<br> seule<br> propriété<br> border-style</p>
</body>

72
 La propriété border-width
<head>
<style>
.border-width-detail {
border-style: solid;
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
.border-width-shorthand {
border-style: solid;
border-width: 1px 2px 3px 4px;
/* 3, 2 et 1 valeurs cf margin */
}
</style>
</head>
<body>
<p class="border-width-detail">les<br> propriétés<br> border-width<br> en détails</p>
<p class="border-width-shorthand">Une<br> seule<br> propriété<br> border-width</p>
</body>

73
 La propriété border-color
<head>
<style>
.border-color-detail {
border-style: solid; border-width: 3px;
border-top-color: black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
}
.border-color-shorthand {
border-style: solid; border-width: 3px;
border-color: black red blue green;
/* 3, 2 et 1 valeurs cf margin */
}
</style>
</head>
<body>
<p class="border-color-detail">les<br> propriétés<br> border-color<br> en< détails</p>
<p class="border-color-shorthand">Une<br> seule<br> propriété<br> border-color</p>
</body>

74
 La propriété border
<head>
<style>
.border-detail {
border-width: 1px;
border-style: solid;
border-color: black;
}
.border-shorthand {
border: 1px solid black;
}
</style>
</head>
<body>
<p class="border-detail">les<br> propriétés<br> border<br> en<br> détails</p>
<p class="border-shorthand">Une<br> seule<br> propriété<br> border<br> pour tout</p>
</body>

75
 Les dimensions en CSS
<head>
<style>
.dimension {
width: auto; /* px, % */
height: auto; /* px, % */
min-width: auto; /* px, % */
max-width: none; /* px, % */
min-height: auto; /* px, % */
max-height: none; /* px, % */
overflow: visible; /* hidden, scroll, auto */
}
</style>
</head>
<body>
<p class="dimension">les<br> propriétés<br> des<br> dimensions</p>
</body>

76
 La propriété display
display: block;
Éléments de la page qui commence sur une nouvelle ligne et qui prend toute la largeur disponible
(<div>, <h1> - <h6>, <p>, <header>, <footer>, <section>, etc.)
display: inline;
Éléments de la page qui ne commence pas sur une nouvelle ligne et qui prend juste la largeur nécessaire
(<span>, <a>, <img>, etc.)
La dimension d'un élément inline ne peut pas être modifié
display: inline-block; élément qui s'affiche comme un élément inline mais sur lequel ont peut modifier
les dimensions
display: none; masque l'élément sur la page

77
 La propriété position
<head>
<style>
.position {
position: static; /* relative, fixed, absolute */
top: auto; /* px, % */
left: auto;
bottom: auto;
right: auto;
}
</style>
</head>
<body>
<p class="position">les<br> propriétés<br> des<br> positions</p>
</body>

78
 La propriété float
<head>
<style>
.left {
float: left;
}
.right {
float: right;
/* clear: both; /* left, right */
}
</style>
</head>
<body>
<p class="left">float left</p>
<p class="right">float right</p>
</body>

79
 Les propriétés du texte
<head>
<style>
.text {
text-align: center; /* left, right, justify */
text-decoration: underline; /* overline, line-through */
text-transform: uppercase; /* lowercase, capitalize */
text-indent: 24px;
letter-spacing: 5px;
word-spacing: 10px;
line-height: 140%;
}
</style>
</head>
<body>
<p class="text">les<br> propriétés du<br> texte</p>
</body>

80
 Les propriétés de polices
<head>
<style>
.font-detail {
font-style: normal; /* italic, oblique */
font-variant: normal; /* small-caps */
font-weight: normal; /* bold, bolder, lighter */
font-size: medium; /* small, large, px, % */
font-family: "Times New Roman", Georgia, serif;
/* serif, sans-serif, cursive, fantasy, monospace */
}
.font-shorthand {
font: normal normal normal medium "Times New Roman", Georgia, serif;
/* font: medium "Times New Roman", Georgia, serif; */
}
</style>
</head>
<body>
<p class="font-detail">les<br> propriétés<br> d'une<br> police<br> en détails</p>
<p class="font-shorthand">Une<br> seule<br> propriété<br> font<br> pour tout</p>
</body>

81
 Les propriétés de tableaux
<head>
<style>
table, td { border: 1px solid black; }
.table {
border-collapse: separate; /* collapse */
border-spacing: 2px; /* px */
/* 2 valeurs : horizontal, vertical spacing */
/* 1 valeur : horizontal/vertical spacing */
}
</style>
</head>
<body>
<table class="table">
<tr><td>cellule</td><td>cellule</td></tr>
<tr><td>cellule</td><td>cellule</td></tr>
</table>
</body>

82
 Les propriétés des listes
<head>
<style>
.list-style-detail {
list-style-type: circle; /* square, upper-roman, lower-alpha */
list-style-position: inside; /* outside */
list-style-image: url('inc/img/css3.png');
}
.list-style-shorthand {
list-style: circle inside url('inc/img/css3.png');
}
</style>
</head>
<body>
<ul class="list-style-detail">
<li>élément 1</li><li>élément 2</li><li>élément 3</li>
</ul>
<ul class="list-style-shorthand">
<li>élément 1</li><li>élément 2</li><li>élément 3</li>
</ul>
</body>

83
 D'autre propriétés CSS
vertical-align: top; /* middle, bottom, etc. */
box-sizing: content-box; /* border-box */
z-index: auto;
animation
transition
counter-reset
pointer
etc.

84
HTML/CSS

85
 La combinaison de sélecteur
La descendance : A B
div p : toutes les balises <p> qui sont contenues dans une balise <div>
La descendance directe : A > B
div > p : toutes les balises <p> dont leur parent est une balise <div>
Les voisins : A ~ B
div ~ p : toutes les balises <p> qui suivent une balise <div>
Les voisins directs: A + B
div + p : toutes les balises <p> qui sont directement après une balise <div>

86
 Sélecteurs principaux pseudo-classe
Spécifiques à la balise <a>
:link : liens pas encore visités
:visited : liens visités
Pas spécifique
:hover : la souris survole l'élément (après :link et :visited)
:active : la souris agit sur l'élément (après :hover )

87
 Autres sélecteurs pseudo-classe
:first-child : premier enfant d'une balise
:last-child : dernier enfant d'une balise
:nth-child(n) : n-ième enfant d'une balise
:nth-child(2) : deuxième enfant d'une balise
:nth-child(2n) : enfants pairs d'une balise
:nth-child(2n+1) : enfants impairs d'une balise

88
 Sélecteur pseudo-éléments
::first-line : applique le style sur la première ligne du texte
::first-letter : applique le style sur la première lettre du texte
::before : permet d'ajouter du contenu avant la balise avec la propriété content
::after : permet d'ajouter du contenu après la balise avec la propriété content

89
 Sélecteur sur attribut
[attribut] : toutes les balises ayant cet attribut
[attribute=value] : toutes les balises ayant cet attribut dont la valeur est value
[attribute*="value"] : toutes les balises ayant cet attribut dont la valeur contient la valeur
value
[attribute^="value"] : toutes les balises ayant cet attribut dont la valeur commence par la
valeur value
[attribute$="value"] : toutes les balises ayant cet attribut dont la valeur finit par la valeur
value

90
 Les formulaires
Interaction avec l'utilisateur
Inscription/Connexion
Recherche, etc.
La balise <form></form>
attribut action pour indiquer quelle page va traîter les données
attribut method pour dire comment transférer les données (get/post)

91
 La balise <input>
<form>
<label>default: <input name="default" placeholder="placeholder"></label><br>
<label>text: <input name="text" type="text" value="value"></label><br>
<label>password: <input name="password" type="password"></label><br>
<label>submit: <input name="submit" type="submit" value="submit"></label><br>
<label>button: <input name="button" type="button" value="button"></label><br>
<label>checkbox: <input name="checkbox[]" type="checkbox" value="checkbox1"></label><br>
<label>checkbox: <input name="checkbox[]" type="checkbox" value="checkbox2"></label><br>
<label>radio: <input name="radio" type="radio" value="radio1"></label><br>
<label>radio: <input name="radio" type="radio" value="radio2"></label><br>
</form>

92
 Les attributes de la balise <input>
les attributs de base:
name permet d'identifier les données
value associe une valeur à une donnée identifiée
placeholder texte affiché quand value est vide
les attibuts avancés:
required : ne peut valider le formulaire si la valeur est vide
disabled : désactive et ignore les données associées
readonly : empêche la modification de la valeur
maxlength : longueur max autorisée pour value
pattern : permet de définir le format accepté

93
 La balise <input> avancé
<form>
<label for="idpassword">mot de passe: </label><br>
<label>password: <input type="password" id="idpassword" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Doit contenir un chiffre, une minuscule, une majuscule et au moins 8 caractères"></label><br>
<label>text: <input name="text" type="text" value="value" required="required"></label><br>
<label>disabled: <input name="disabled" type="text" value="value" disabled="disabled"></label><br>
<label>readonly: <input name="readonly" type="text" value="value" readonly="readonly"></label><br>
<label>maxlength: <input name="maxlength" type="text" value="value" maxlength="8"></label><br>
<button type="submit">valider</button>
</form>

94
La balise <input> version html5
color
date
datetime
email
number
tel
url
etc.

95
 La balise <select></select>
<form>
<select name="select">
<optgroup label="Group 1">
<option value="value1">Valeur 1</option>
<option value="value2">Valeur 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="value3">Valeur 3</option>
<option value="value4">Valeur 4</option>
</optgroup>
</select>
<select name="selectm" multiple="multiple">
<optgroup label="Group 1">
<option value="value1">Valeur 1</option>
<option value="value2">Valeur 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="value3">Valeur 3</option>
<option value="value4">Valeur 4</option>
</optgroup>
</select>
</form>

96
Les balises <textarea></textarea> et <button></button>
<form>
<textarea name="textarea" rows="2" cols="20">value</textarea>
<button type="button">button</button>
<button type="reset">reset</button>
<button type="submit">submit</button>
</form>

97
 La balise <fieldset></fieldset>
<form>
<fieldset>
<legend>Legend :</legend>
<label>Label : <input type="text"><br>
</fieldset>
</form>

98