 Les paragraphes sont définis par la balise<p> </p>et les sauts de ligne par la

balise<br />.

 Il existe six niveaux de titre, de<h1> </h1>à<h6> </h6>, à utiliser selon l'importance
du titre.

 On peut mettre en valeur certains mots avec les balises<strong>,<em>et<mark>.

 Pour créer des listes, on doit utiliser la balise<ul>(liste à puces, non ordonnée)
ou<ol>(liste ordonnée). À l'intérieur, on insère les éléments avec une balise<li>pour
chaque item.

 Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.

 Pour insérer un lien, on utilise la balise<a>avec l'attribu href pour indiquer l'adresse
de la page cible. Exemple :<a href="https://openclassrooms.com">.

 On peut faire un lien vers une autre page de son site simplement en écrivant le nom du
fichier :<a href="page2.html">. dans l’endredoit

 Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut
créer une ancre avec l'attribut id pour « marquer » un endroit dans la page, puis faire
un lien vers l'ancre comme ceci :<a href="#ancre">.

 Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela,
on rajouteratarget="_blank"à la balise<a>:

 ResizeImage.net permet de redimenssionner les images. Si on veut afficher un

minaiature

 Il existe plusieurs formats d'images adaptées au Web :

o JPEG : pour les photos ;

o PNG : pour toutes les autres illustrations ;

o GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être
animé.

 On insère une image avec la balise  <img />. Elle doit obligatoirement comporter au
moins ces deux attributs :  src(nom de l'image) et  alt(courte description de l'image).

 Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la
placer au sein d'une balise  <figure>. La balise  <figcaption>permet d'écrire la
légende de l'image.
le site www.caniuse.com qui propose des tables de compatibilité des fonctionnalités de
HTML et CSS sur différents navigateurs (et sur leurs différentes versions)

la liste des sélécteurs : vous voulez une liste complète, vous pouvez vous renseigner
directement à la source : sur le site du W3C ! C'est très complet.

Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en
forme. Par exemple, on peut viser :

 toutes les balises d'un même type, en écrivant simplement leur nom (h1par exemple) ;

 certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs
class ou id(.nomclasse ou #nomid) ;

 uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em).

Example de selecteurs :

A[attribut*="Valeur"] : une balise, un attribut et une valeur

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

A[attribut] : une balise qui possède un attribut

A + B : une balise qui en suit une autre

A B : une balise contenue dans une autre

* : sélecteur universel

La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur
son site. Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui
proposent en téléchargement un certain nombre de polices libres de droits. Je recommande en
particulier fontsquirrel.com car il permet de télécharger des packs prêts à l'emploi pour CSS 3.

Voici les différents formats de fichiers de polices qui existent et qu'il faut connaître :

 .ttf: TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
 .eot: Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes
versions. Ce format est propriétaire, produit par Microsoft.
 .otf: OpenType Font. Ne fonctionne pas sur Internet Explorer.
 .svg: SVG Font. Le seul format reconnu sur les iPhones et iPads pour le moment.
 .woff: Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne
sur IE9 et tous les autres navigateurs.
======= Formatage texte ===========================

font-size : taille absolue : en pixels, en centimètres ou millimètres. [font-size: 16px; | ou

cm, mm ]

taille relative : en pourcentage, « em » ou « ex » [xx-small/x-small /small /medium

/large /x-large /xx-large ou 1em pour taille normale, ou 0.8em pour small
taille]

exp :
p
{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}

Ou

@font-face { /* Définition d'une nouvelle police nommée CAC Champagne */

font-family: 'cac_champagneregular';
src: url('cac_champagne-webfont.eot');
src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
url('cac_champagne-webfont.woff') format('woff'),
url('cac_champagne-webfont.ttf') format('truetype'),
url('cac_champagne-webfont.svg#cac_champagneregular') format('svg');
}

h1 /* Utilisation de la police qu'on vient de définir sur les titres */

{
font-family: 'cac_champagneregular', Arial, serif;
}

Font-style :Italic / oblique / normal

font-weight : bold / normal
text-decoration : underline / line-through / overline / blink / none
text-align : left / center / right / justify

balises dites universelles : ( n’ont aucun effet que d’isolet une partie à l’intérieur d’un
text pour lui appliquer un style différent :
 <span> </span>: c'est une balise de type inline, ( cad de la même famille que
<strong>et<em> ) Pour sélectionner certains mots uniquement au sein d’un
paragraphe
 <div> </div> une balise de type block, qui entoure un bloc de texte ( de la même
famille <p>,<h1> )
<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !
</p>

Objet flotant ( à définir dans le css):

.imageflottante
{
float: left; /* ou right */
}
Stoper le flotting :
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>
Et css
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}

========================Couleurs ===================================
******************** Couleur texte **********************
p
{
color: #FFFFFF; /* ou nom_couleur , ou bien rgb(Rouge, Vert, Bleu)
}

****************** Couleurs de fond ********************

/* On travaille sur la balise body, donc sur TOUTE la page */

body
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}

En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur
prendront le même style par défaut ( héritage ) à moins qu’on leur définit un style différent. Cela ne
fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront
héritées

****************** Background image ******************

body
{
background-image: url("neige.png"); /* ou url http:// ou relative */
background-attachment: fixed; /* Le fond restera fixe, l’autre valeur est « scroll » */
}

background-attachment permet de « fixer » le fond. L'effet obtenu est intéressant car on voit
alors le texte « glisser » par-dessus le fond.
Autres propriétés :
background-repeat: no-repeat; /* repeat-x [le fond sera répété uniquement sur la première ligne,
horizontalement.] , repeat-y [sur la première colonne, verticalement], repeat [en mosaïque
(par défaut)]
background-position : 30px 50px; /* position du fond par rapport au coin supérieur gauche
de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe). */

ou bien : top , right, left, center, bottom, ou combinaison de ces mots

ou une combinaison dite : Super-propriété » appeléebackgrounddont la valeur peut combiner plusieurs

des propriétés vues précédemment :background-image,background-repeat,background-
attachmentetbackground-position. n'importe quel ordre et on peut zappé une propriété si on veut

body
{
background: url("soleil.png") fixed no-repeat top right;
}

Ou plusieurs images de fond :

body
{
background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; /* l’ordre de
déclaration est important, la première sera en première position par rapport à l’autre dans la
superposition*/
}
On peut appliquer un fond à n'importe quel élément, pas seulement <body>

****** opacity
p
{
opacity: 0.6; /* à un élément de la page, tout le contenu de cet élément sera rendu transparent
(même les images, les autres blocs à l'intérieur, etc.) */
}
Si vous voulez juste rendre seulement la couleur de fond transparente : RGBa à priviligier
p
{
background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié transparent */
}

============================== BORDURES ===================================

Super-propriété border qui regroupe l'ensemble des propriétés ( border-width en px ,
border-color en name/hexa/RGB , border-style [none / solid / dotted / dotted
/ double / groove / groove / inset / outset … )

Pour appliquer seulement à des partie de la bordure on a les superpropriétés suivantees :

border-top
border-bottom
border-left
border-right

ou plus au niveau de chaque détail avec :

border-top-width
border-top-color
...
p
{
border-left: 2px solid black;
 border-right: 2px solid black;
}

******** bordures arrondies

p
{
border-radius: 10px;
}
L'arrondi pour chaque coin :
p
{
border-radius: 10px 5px 10px 5px; /* haut gauche, haut droit, bas droit, bas gauche */
}
Ou
p
{
border-radius: 20px / 10px; /* courbes elliptiques */
}

********** Ombres
Des boites : box-shadow
p
{
box-shadow: 6px 6px 0px black; /* décalage horizontal de l'ombre, décalage vertical de l'ombre,
l'adoucissement du dégradé, la couleur de l'ombre */
}

Ou
p
{
box-shadow: 6px 6px 6px black inset; /* inset => ombre à l’interieur du box */
}

**** text-shadow
p
{
text-shadow: 2px 2px 4px black;
}

====================== Les apparences dynamiques ===============

 a:hover , p:hover /* au survol de l’élément */
a /* Liens par défaut (non survolés) */
{
text-decoration: none;
color: red;
font-style: italic;
}
a:hover /* Apparence au survol des liens */
{
text-decoration: underline;
color: green;
}
 :active: au moment du clic
a:active /* Quand le visiteur clique sur le lien */
{
background-color: #FFCC66;
}
 :focus: lorsque l'élément est sélectionné
a:focus /* Quand le visiteur sélectionne le lien */
{
background-color: #FFCC66;
}
 :visited : déjà visité, par exemple : un style à un lien vers une
page qui a déjà été vue.
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
color: #AAA; /* Appliquer une couleur grise */
}

=========================

Pour être exact,widthetheightr (en px, ou pourcentage) eprésentent la largeur et la hauteur du

contenu des blocs. Si le bloc a des marges, celles-ci s'ajouteront à la largeur et la hauteur.
Les pourcentages seront utiles pour créer un design qui s'adapte automatiquement à la résolution
d'écran du visiteur.

 padding: indique la taille de la marge intérieure. À exprimer en général en pixels (px).

 margin: indique la taille de la marge extérieure. Là encore, on utilise le plus souvent

des pixels.

(utiliser top, bottom, right et left pour les deux en haut ).

Pour centrer, il faut respecter les règles suivantes : (Il n'est cependant pas possible de centrer
verticalement un bloc avec cette technique. Seul le centrage horizontal est permis.)

 donnez une largeur au bloc (avec la propriété width) ;

 indiquez que vous voulez des marges extérieures automatiques, comme ceci :margin:
auto;.

Le contenu Quand ça dépasse… :

 overflow: couper un bloc [visible, hidden, scroll, auto]
 word-wrap: couper les textes trop larges et les ramener à la ligner suivante. [break-word]
Je conseille d'utiliser cette fonctionnalité dès qu'un bloc est susceptible de contenir du texte saisi par
des utilisateurs (par exemple sur les forums de votre futur site). Sans cette astuce, on peut « casser »
facilement le design d'un site (en écrivant par exemple une longue suite de « aaaaaaaaaaa »).

=================== Flexbox  pour la mise en page des sites web ==========================

Ancienne méthodes : tableaux Html, ensuite float, puis inline-block  et enfin la flexbox

Div, les blocs se placent l’un au dessous de l’autre.

Par contre le flex :

#conteneur /* Les blocs se placent par défaut côte à côte. Magique ! */
{
display: flex;
}

La direction  :

flex-direction : row | column | row-reverse | column-reverse

Le retour à la ligne

flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */

Allignement  :

Les éléments sont organisés soit horizontalement (par défaut).

 Si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical.

 Si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.

Aligner sur l'axe principal

justify-content : flex-start | flex-end | center | space-between | space-around |

ça marche aussi si vos éléments sont dans une direction verticale avec flex-direction: column;

Aligner sur l'axe secondaire

Avec align-items , nous pouvons changer leur alignement sur l'axe secondaire.

align-items : stretch | flex-start | flex-end | center | baseline

exp : centrage horizontal et vertical dans le conteneur ( de l’élément )

#conteneur
{
display: flex;
justify-content: center;
align-items: center;
}
Ou tout simplement aussi :

#conteneur{
display: flex; }
.element{
margin: auto;}

Aligner un seul élément ( à déclarer au niveau de l’élément, sa classe )

align-self : stretch | flex-start | flex-end | center | baseline
Répartir plusieurs lignes

Entre () :
:nth-child(n) selector matches every element that is the nth child, regardless of
type, of its parent
n can be a number(1,2,..), a keyword (like odd, even), or a formula(3n+1 for
instance).
.element:nth-child(1){
order: 3;}
.element:nth-child(2){
order: 1;}
.element:nth-child(3){
order: 2;}

align-content : flex-start | flex-end | center | space-between | space-around | stretch (par

défaut)

faire grossir ou maigrir les éléments

flex

.element:nth-
child(2){
flex: 1;}

.element:nth-child(1){
 flex: 2;} /* grossir 2 fois plus que le second élément */
.element:nth-child(2){
flex: 1;}
Flex : Combine flex-grow  (capacité à grossir),flex-shrink  (capacité à maigrir) etflex-
basis  (taille par défaut).

======================= Position ==================================

Relative, absolute, fixe

============== Tableaux =====================================

<table> </table> : déclarer un tableau
<tr> </tr> indique le début et la fin d'une ligne du tableau ;
<td> </td>: indique le début et la fin du contenu d'une cellule
<th> </th> : indique le début et la fin du contenu d'une cellule d’entête
<caption> </caption> : titre d’un tableau

Css :

caption-side : top / bottom

border-collapse : collapse / separate et
td th
{
border: 1px solid black;
}

Diviser un gros tableau ( dans cet ordre  !!!)  :

l'en-tête (en haut) <thead></thead>
le pied du tableau (en bas) <tfoot></tfoot>
le corps (au centre) <tbody></tbody>

Fusion  :
Pour effectuer une fusion, on rajoute un attribut à la balise <td>
La fusion de colonnes : colspan
La fusion de lignes rowspan
Exp : <td colspan="2"> fusionner deux cellulles colonnes.!</td>
Ou : <td rowspan="2">fusionner deux lignes </td>

====================== Formulaires ======================================

<form> </form>
Problème n°1 : comment envoyer le texte => method="get" les infos seront envoyé avec
htt:// ou method="post"
Problème n°2 : une fois que les données ont été envoyées, comment les traiter ? => action

zone de texte monoligne <input type="text" name="pseudo" />

zone de texte multiligne :

<form method="post" action="traitement.php">

<p>
 <label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo"
id="pseudo" />
</p>
</form>

Name : réfère à la variable du formulaire que l’élément concerne

Id : pour identifier l'élément HTML pour pouvoir y accéder et le manipuler.
Pour lier le label au champ, il faut lui donner un attribut forqui a la même valeur que l'iddu champ

<input /> attributs supplémentaires

Size
Maxlength
Value
Placeholder

Zone de mot de passe

type="password"

Zone de texte multiligne

<textarea> </textarea>

Html Attributs : name / label / rows / cols / value

En CSS : width et height

zones de saisie enrichies

<input type="email" />
<input type="url" />
<input type="tel" /> : Sur iPhone, par exemple, un clavier adapté s'affiche lorsqu'on doit
remplir le champ
<input type="number" /> ( avec : min / max / step ( par exemple, 2 par deux
chiffres)
<input type="range" /> ( avec min, max et step)
<input type="color" /> => palette sera affichée pour le choix de la couleur
<input type="date" /> on peut utiliser soit : date, time , week, month,
datetime, datetime-local
<input type="search" /> ( selon navigateur par exemple champ avec une petite
loupe et éventuellement mémoriser les dernières recherches effectuées par le visiteur.)

Les cases à cocher

<form method="post" action="traitement.php">
<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />
<input type="checkbox" name="epinards" id="epinards" /> <label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
</p>
</form>
Checked par default :
<input type="checkbox" name="choix" checked />
Les radio bouttons
<form method="post" action="traitement.php">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15
ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-
25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-
40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que
ça ?!</label>
</p>
</form>

Les listes déroulantes

<select> </select> indique le début et la fin de la liste déroulante
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</select>
</p>
</form>

Une option checked par default :

<option value="canada" selected>Canada</option>
grouper vos options avec la balise<optgroup> </optgroup>

<form method="post" action="traitement.php">

<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</p>
</form>
Regrouper les champs
<fieldset> Chaque<fieldset>peut contenir une légende avec la balise <legend>
<form method="post" action="traitement.php">
<fieldset>
<legend>Vos coordonnées</legend> <!-- Titre du fieldset -->

<label for="nom">Quel est votre nom ?</label>

<input type="text" name="nom" id="nom" />

<label for="prenom">Quel est votre prénom ?</label>

<input type="text" name="prenom" id="prenom" />

<label for="email">Quel est votre e-mail ?</label>

<input type="email" name="email" id="email" />

</fieldset>
…
</form>
Sélectionner automatiquement un champ (curseur dessus) :
<input type="text" name="prenom" id="prenom" autofocus />

Rendre un champ obligatoire

<input type="text" name="prenom" id="prenom" required />

 Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi,

qu'il doit impérativement être rempli ( sauf old navidateur, ou il faut utiliser du Js
pour traiter )

NB : On dispose de pseudo-formats en CSS pour changer le style des éléments requis ( :required) et
invalides (:invalid). N'oubliez pas non plus que vous disposez du pseudo-format :focuspour
changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.
:required {
background-color: red;
}
Le bouton d'envoi
<input type="submit" value="Envoyer" />
Lorsque vous cliquez sur le bouton « Envoyer », le formulaire vous amène alors à la page indiquée
dans l'attribut action.

======================= Insertion audio ====================

Consulter Caniuse.com pour la compatibilité navigateurs avec le format audio et video à proposer.
Proposer plusieurs format
<audio controls>
<source src="hype_home.mp3"> Veuillez mettre à jour votre navigateur !
<source src="hype_home.ogg"> ce texte ne sera affiché que si le navigateur ne peut pas jouer l’audio
</audio>
Attributs :
Controls / width / loop / autoplay / preload ( auto / metadata / none)

======================= Insertion Video ====================

WebM codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus
sérieux de H.264 à l'heure actuelle
Exp :
<video src="sintel.webm" controls poster="sintel.jpg" width="600"></video>

Attributs :
Poster / controls / width / height / loop / autoplay / preload (auto /
metadata / none).

NB : Les proportions de la vidéo sont toujours conservées.

Exple : plusieurs formats pour etre sure qu’il n’y a pas d’incompatibilité
<video controls poster="sintel.jpg" width="600">
<source src="sintel.mp4">
<source src="sintel.webm">
<source src="sintel.ogv">
</video>

NB : Les iPhone, iPad et iPod ne reconnaissent à l'heure actuelle que le format H.264 (fichier .mp4)…
et uniquement si celui-ci apparaît en premier dans la liste ! Je vous recommande donc d'indiquer le
format H.264 en premier pour assurer une compatibilité maximale. ( H.264 n’est pas open source, il
faut payer pour l’utiliser !!!)

NB : Comment protéger ma vidéo, je ne veux pas qu'on puisse la copier facilement !
Ce n'est pas possible. il faut bien de toute façon qu'il la télécharge d'une manière ou d'une autre !

=========================== responsive design & media query =======================

Chargement d'une feuille de style différente

<link rel="stylesheet" href="style.css" />

<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />

Chargement des règles directement dans la feuille de style

@media screen and (max-width: 1280px)

{
/* Rédigez vos propriétés CSS ici */
}

Color / height / width / device-height / device-width / orientation / media

(screen | handheld | print | tv | projection | all )

NB : On peut rajouter le préfixe min-ou max-devant la plupart de ces règles. Ainsi, min-width
signifie « Largeur minimale » ,max-height« Hauteur maximale », etc.
La différence entre width et device-width se perçoit surtout sur les navigateurs mobiles des
smartphones. Ne pas utiliser handheld car non reconnus sur les navigateurs mobiles sauf opera.

Les règles peuvent être combinées à l'aide :

Only / and / not
La zone d'affichage simulée est appelée le viewport : c'est la largeur de la fenêtre du navigateur sur
le mobile.

NB : Pour cibler les smartphones, plutôt que d'utiliser max-width, il peut être intéressant de
recourir àmax-device-width: c'est la largeur du périphérique. Les périphériques mobiles ne
dépassant pas 480 px de large, on pourra viser uniquement les navigateurs mobiles avec cette media
query :
@media all and (max-device-width: 480px)
{
/* Vos règles CSS pour les mobiles ici */
}

======== Technologies liées à HTML5 (Canvas, SVG, Web Sockets…) ==========

La plupart de ces technologies s'utilisent avec JavaScript. Il s'agit donc de nouvelles fonctionnalités
que l'on peut utiliser en JavaScript.

Canvas : permet de dessiner au sein de la page web, à l'intérieur de la balise HTML <canvas>. On
peut dessiner des formes (triangles, cercles…) mais aussi ajouter des images, les manipuler, appliquer
des filtres graphiques… Au final, cela nous permet de réaliser aujourd'hui de véritables jeux et des
applications graphiques directement dans des pages web ! 

SVG : permet de créer des dessins vectoriels au sein des pages web. À la différence de Canvas, ces
dessins peuvent être agrandis à l'infini (c'est le principe du vectoriel). Le logicielInkscape est connu
pour permettre de dessiner des SVG. 

Drag & Drop : permet de faire « glisser-déposer » des objets dans la page web, de la même façon
qu'on peut faire glisser-déposer des fichiers sur son bureau. Gmail l'utilise pour permettre d'ajouter
facilement des pièces jointes à un e-mail.

File API : permet d'accéder aux fichiers stockés sur la machine du visiteur (avec son autorisation). On
l'utilisera notamment en combinaison avec le Drag & Drop.

 Géolocalisation : pour localiser le visiteur et lui proposer des services liés au lieu où il se
trouve (ex. : les horaires des salles de cinéma proches). La localisation n'est pas toujours très
précise, mais cela peut permettre de repérer un visiteur à quelques kilomètres près (avec son
accord).

 Web Storage : permet de stocker un grand nombre d'informations sur la machine du

visiteur. C'est une alternative plus puissante aux traditionnels cookies. Les informations sont
hiérarchisées, comme dans une base de données.

 Appcache : permet de demander au navigateur de mettre en cache certains fichiers, qu'il ne

cherchera alors plus à télécharger systématiquement. Très utile pour créer des applications
web qui peuvent fonctionner même en mode « hors ligne » (déconnecté).

 Web Sockets : permet des échanges plus rapides, en temps réel, entre le navigateur du
visiteur et le serveur qui gère le site web (c'est une sorte d'AJAX amélioré). C'est un peu
l'avenir des applications web, qui pourront devenir aussi réactives que les vrais programmes.
 WebGL : permet d'introduire de la 3D dans les pages web, en utilisant le standard de la 3D
OpenGL (figure suivante). Les scènes 3D sont directement gérées par la carte graphique.

================ Les sites web dynamiques (PHP, JEE, ASP .NET…) =============

JavaScript est régulièrement utilisé aujourd'hui pour faire de l'AJAX (Asynchronous JavaScript And
XML). Cette technique permet de modifier une partie de la page web que le visiteur consulte en
échangeant des données avec le serveur. Cela donne l'impression que les pages sont plus
dynamiques et plus réactives. Le visiteur n'a plus besoin de recharger systématiquement toute la
page.

Annexe :

To check the HTML code :

http://validator.w3.org

Memento des balises HTML :

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-
css3/1608357-memento-des-balises-html

Design de sites  :
sites web comme https://html5up.net/, qui vous proposent des idées de design et qui peuvent
même vous donner le code HTML / CSS tout prêt !