INTRODUCTION À HTML5 / CSS3
L’HTML5 est
une évolution de HTML 4 et de XHTML c’est à dire que tout ce que vous savez
faire en HTML reste valide.
Les
nouveautés dans le code HTML
Nouvelle DOCTYPE
beaucoup
plus facile : <!DOCTYPE html>
La
balise Figure
<figure>
<img src="path/to/image"
alt="About image" />
<figcaption> <p>This is
an image</p></figcaption>
</figure>
Un
contenu éditable
Les nouveaux
navigateurs ont un attribut nouvelle qui peut être appliquée à des éléments,
appelés
Comme son
nom l'indique, ce qui permet à l'utilisateur de modifier tout le texte contenu
dans l'élément, y compris ses enfants.
<ul contenteditable="true
>
<li>Break mechanical cab
<li>Drive to abandoned
<li>Watch video of self
</ul>
E-mail
Inputs
Dans les
anciens navigateurs qui ne comprennent pas ce type, ils vont tout simplement
revenir à une zone de texte ordinaire. :
<input
type=’email’ id="email"
name="email" />
Placeholders
Avant, nous
devions utiliser un peu de JAVASCRIPT pour créer des placeholder pour les
champs de saisie
L'attribut placeholder
remèdes ceci : <input name="email"
type="email" placholder=’a@a.fr’ />
Le
local storage
Le Local
Storage est une manière élégante de stocker dans le navigateur des informations
facilement. Par exemple, pour écrire puis lire une valeur dans le Local Storage
localStorage.setItem(‘name’ , ‘jogn’)
alert(localStorage.getItem(’name’)
Les
balise sémantiques
L’HTML5 introduit
également un ensemble de nouvelles balises afin de donner plus de sémantique
(de sens) à nos pages
Par exemple,
au lieu d’utiliser une
pouvons
utiliser tout simplement la balise <div> avec id=’header’ nous pouvons
utiliser <header>
<header> : Qui indique que l’élément est une
en-tete
<footer> : Qui indique que l’élément est un
pied
<nav> : Qui indique un élément de
navigation tel qu’un menu
<aside> : Qui correspond à une zone
secondaire non liée au contenu principal de la page
<article> : Qui représente une portion de la
page qui garde un sens même séparée de l’ensemble de la page
L’attribut
required
Cet attribut
permet d’indiquer qu’un champ est obligatoire.: <input type="text" required />
Les
expressions régulières
Avec HTML5,
on a plus besoin de JAVASCRIPT pour le faire
Ainsi, on peut mettre un champs qui n’accepte
qu’une chaine alphabétique d’une longueur entre 4 et 10 caractères : <input type="text"
name= ‘name’ pattern=’[A-Za-z]{4,10}" >
Le
support audio
On a plus
besoin des plugin pour intégrer un lecteur audio
<audio autoplay="autoplay
controls=’controls’>
<source src="file.ogg"
/>
<source src="file.mp3"
/>
<a href="file.mp3">Download
this file.</a>
</audio>
Le
support vidéo
De même que
la balise <audio>!
<video controls preload>
<source src="cohagenPhoneCall.ogv
codecs='vorbis, theora'" type=’video/ogg’>
<source src="cohagenPhoneCall.mp4"
type="’video/mp4 'codecs='avc1.42E01E, mp4a.40.2'"
</video>
CSS3
Je résume ici la plupart des
propriétés de mise en forme du texte.
Propriété
|
Valeurs (exemples)
|
Description
|
font-family
|
police1, police2, police3, serif, sans-serif,
monospace
|
Nom de police
|
@font-face
|
Nom et source de la police
|
Police personnalisée
|
font-size
|
1.3em, 16px, 120%...
|
Taille du texte
|
font-weight
|
bold, normal
|
Gras
|
font-style
|
italic, oblique, normal
|
Italique
|
text-decoration
|
underline, overline, line-through, blink, none
|
Soulignement, ligne au-dessus, barré ou clignotant
|
font-variant
|
small-caps, normal
|
Petites capitales
|
text-transform
|
capitalize, lowercase, uppercase
|
Capitales
|
font
|
-
|
Super propriété de police. Combine : font-weight,font-style, font-size, font-variant, font-family.
|
text-align
|
left, center, right, justify
|
Alignement horizontal
|
vertical-align
|
baseline, middle, sub, super, top, bottom
|
Alignement vertical (cellules de tableau ou élémentsinline-block uniquement)
|
line-height
|
18px, 120%, normal...
|
Hauteur de ligne
|
text-indent
|
25px
|
Alinéa
|
white-space
|
pre, nowrap, normal
|
Césure
|
word-wrap
|
break-word, normal
|
Césure forcée
|
text-shadow
|
5px 5px 2px blue
(horizontale, verticale, fondu, couleur) |
Ombre de texte
|
Propriétés de couleur et
de fond
Propriété
|
Valeurs (exemples)
|
Description
|
color
|
nom, rgb(rouge,vert,bleu),
rgba(rouge,vert,bleu,transparence), #CF1A20...
|
Couleur du texte
|
background-color
|
Identique à color
|
Couleur de fond
|
background-image
|
url('image.png')
|
Image de fond
|
background-attachment
|
fixed, scroll
|
Fond fixe
|
background-repeat
|
repeat-x, repeat-y, no-repeat, repeat
|
Répétition du fond
|
background-position
|
(x y), top, center, bottom, left, right
|
Position du fond
|
background
|
-
|
Super propriété du fond. Combine :background-image, background-repeat, background-attachment,background-position
|
opacity
|
0.5
|
Transparence
|
Propriétés des boîtes
Propriété
|
Valeurs (exemples)
|
Description
|
width
|
150px, 80%...
|
Largeur
|
height
|
150px, 80%...
|
Hauteur
|
min-width
|
150px, 80%...
|
Largeur minimale
|
max-width
|
150px, 80%...
|
Largeur maximale
|
min-height
|
150px, 80%...
|
Hauteur minimale
|
max-height
|
150px, 80%...
|
Hauteur maximale
|
margin-top
|
23px
|
Marge en haut
|
margin-left
|
23px
|
Marge à gauche
|
margin-right
|
23px
|
Marge à droite
|
margin-bottom
|
23px
|
Marge en bas
|
margin
|
23px 5px 23px 5px
(haut, droite, bas, gauche) |
Super-propriété de marge.
Combine : margin-top, margin-right,margin-bottom, margin-left. |
padding-left
|
23px
|
Marge intérieure à gauche
|
padding-right
|
23px
|
Marge intérieure à droite
|
padding-bottom
|
23px
|
Marge intérieure en bas
|
padding-top
|
23px
|
Marge intérieure en haut
|
padding
|
23px 5px 23px 5px
(haut, droite, bas, gauche) |
Super-propriété de marge intérieure.
Combine : padding-top, padding-right,padding-bottom, padding-left. |
border-width
|
3px
|
Épaisseur de bordure
|
border-color
|
nom, rgb(rouge,vert,bleu),
rgba(rouge,vert,bleu,transparence), #CF1A20...
|
Couleur de bordure
|
border-style
|
solid, dotted, dashed, double, groove, ridge, inset, outset
|
Type de bordure
|
border
|
3px solid black
|
Super-propriété de bordure. Combineborder-width, border-color, border-style.
Existe aussi en version border-top, border-right, border-bottom, border-left. |
border-radius
|
5px
|
Bordure arrondie
|
box-shadow
|
6px 6px 0px black
(horizontale, verticale, fondu, couleur) |
Ombre de boîte
|
Propriétés de
positionnement et d'affichage
Propriété
|
Valeurs (exemples)
|
Description
|
display
|
block, inline, inline-block, table, table-cell, none...
|
Type d'élément (block, inline, inline-block, none…)
|
visibility
|
visible, hidden
|
Visibilité
|
clip
|
rect (0px, 60px, 30px, 0px)
rect (haut, droite, bas, gauche) |
Affichage d'une partie de l'élément
|
overflow
|
auto, scroll, visible, hidden
|
Comportement en cas de dépassement
|
float
|
left, right, none
|
Flottant
|
clear
|
left, right, both, none
|
Arrêt d'un flottant
|
position
|
relative, absolute, static
|
Positionnement
|
top
|
20px
|
Position par rapport au haut
|
bottom
|
20px
|
Position par rapport au bas
|
left
|
20px
|
Position par rapport à la gauche
|
right
|
20px
|
Position par rapport à la droite
|
z-index
|
10
|
Ordre d'affichage en cas de superposition.
La plus grande valeur est affichée par-dessus les autres. |
Propriétés des listes
Propriété
|
Valeurs (exemples)
|
Description
|
list-style-type
|
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha,
upper-alpha, none
|
Type de liste
|
list-style-position
|
inside, outside
|
Position en retrait
|
list-style-image
|
url('puce.png')
|
Puce personnalisée
|
list-style
|
-
|
Super-propriété de liste. Combine list-style-type, list-style-position,list-style-image.
|
Propriétés des tableaux
Propriété
|
Valeurs (exemples)
|
Description
|
border-collapse
|
collapse, separate
|
Fusion des bordures
|
empty-cells
|
hide, show
|
Affichage des cellules vides
|
caption-side
|
bottom, top
|
Position du titre du tableau
|
