HTML

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 120

HTML

MIAGE Casa
AMARY Soufiane
amasoufiane@gmail.com
Qu'est ce que l'HTML
• L'HTML (Hyper Text Markup Language) est un
langage qui permet de développer des site
web statique .

• Un fichier HTML contient des balises (qui


définissent la mise en page) et du texte.
Code VRAIMENT de base

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

</body>
</html>
Version HTML
• HTML 4 :
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML 1.1
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• HTML5 :
• <!DOCTYPE html>
Les balises

• Exemple :
• <head>
<title> ISTA</title> Titre du document
• </head>
Quelques balises utiles…
<h6> Titre de niveau 6
<h5> Titre de niveau 5
<h4> Titre de niveau 4
<h3> Titre de niveau 3
<h2> Titre de niveau 2
<h1> Titre de niveau 1
<strong> Mise en valeur (forte)
Le texte est généralement mis en gras.
<em> Mise en valeur (faible)
Et <i> Le texte est généralement mis en italique.
<B> Gras
<U> souligne le texte
Quelques balises utiles…

<S>texte </S> barre le texte


<SUB>texte </SUB> indice.
<SUP>texte </SUP> exposant.
<CENTER>… permet de centrer toutes les
</CENTER> lignes d'un texte
<PRE> ... </PRE>
• Les espaces (plusieurs à la suite), tabulations, retour
n'ont pas de valeur en HTML.
• La balise <PRE> ... </PRE> est utilisée pour inclure un
texte pré-formaté dans un document HTML.
• Les espacements, tabulations et retour… gardent alors
leur sens initial.
• L'option WIDTH=n peut-être utilisée pour limiter la
longueur de la ligne.
<PRE> ... </PRE>

<PRE>
MATIERES PROFESSEUR NB d'heures
-------------------------------------
HTML AMARY 20
Css AMARY 20
javascript AMARY 20
</PRE>
FONT
La taille dans <FONT SIZE=?> peut être indiquée avec un nombre de 1 à 7. La
valeur par défaut étant 3.

<FONT SIZE=5>texte</FONT>

<FONT face="verdana" COLOR="#0000FF" >en bleu</FONT>

couleur code
Bleu #0000FF
Vert #00FF00
Blanc #FFFFFF
Violet #8000FF
Rouge #FF0000
Jaune #FFFF00
Gris clair #C0C0C0
Noir #000000
Encore….
<img /> Inline Insère une image.
Utilisez les attributs src (pour indiquer l'adresse de l'image) et
alt (pour indiquer un texte de remplacement). Ces 2 attributs
sont obligatoires. Exemple :
<img src="Templates/images/smiley.png" alt=":)" />

<a> Inline Lien hypertexte.


Indiquez l'url de destination grâce à l'attirbut href :
<a href="autrepage.html">Rendez-vous sur l'autre page</a>

<br /> Inline Retour à la ligne

<p> Block Paragraphe

<hr /> Block Crée une ligne de séparation horizontale


Exercice
<ul> Block Liste à puces non numérotée. Vous devez mettre un <li></li> par élément
de la liste. Exemple :
<ul>
<li>Un élément</li>
<li>Un autre élément</li>
</ul>
<ol> Block Liste à puces numérotée. Vous devez mettre un <li></li> par élément de
la liste. Exemple :
<ol>
<li>Elément n°1</li>
<li>Elément n°2</li>
</ol>
<li> list- Permet de créer un élément de liste.
item Le type de la balise est particulier car elle n'est ni block ni inline. On dit
qu'elle est de type list-item.
<dl> Block Liste de définitions. Vous devez alterner chaque terme <dt> par sa
définition <dd>. Exemple :
<dl>
<dt>Porte</dt>
<dd>Ouverture dans un mur permettant d'entrer et de sortir</dd>
<dt>Théâtre</dt>
<dd>Lieu où l'on représente des ouvrages dramatiques</dd>
</dl>
<dt> Block Terme à définir
<dd> Block Définition du terme
Style de liste (ul)
valeur description
disc Définit le marqueur de
l'élément de la liste est un
puce
circle Définit le marqueur de
l'élément de la liste est un
cercle
square Définit le marqueur de
l'élément de la liste est un
carré

none Les éléments de la liste ne


seront pas marqués
Style de liste (ul)
<ul style="list-style-type:disc">
<li>Java</li>
<li>Vb.net</li>
<li>C#</li>
</ul>
<ul style="list-style-type:circle">
<li>Java</li>
<li>Vb.net</li>
<li>C#</li>
</ul>
<ul style="list-style-type:square">
<li>Java</li>
<li>Vb.net</li>
<li>C#</li>
</ul>
Style de liste (ol)
Type Description
type="1" The list items will be numbered with numbers
(default)
type="A" Les éléments de la liste seront numérotés en
lettres majuscules
type="a" Les éléments de la liste seront numérotés en
minuscules
type="I" Les éléments de la liste seront numérotés avec
des numéros romains en majuscules
type="i" Les éléments de la liste seront numérotés avec
des numéros romains en minuscules
Style de liste (ol)
<ol type="1">
<li>Java</li>
<li>Vb.net</li>
<li>C#</li>
</ol>
<ol type="A">
<li>Java</li>
<li>Vb.net</li>
<li>C#</li>
</ol>
<ol type="a">
<li>Java</li>
<li>Vb.net</li>
<li>C#</li>
</ol>
Les attributs de la balise IMG
<img src="Chrysanthemum.jpg" width="1024" height="768" />
Les principaux attributs de la balise IMG sont les suivants :

SRC: Indique l'emplacement de l'image (il est obligatoire)

ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent.


Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au
milieu et en-dessous)

ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche


pas.

TITLE: Permet d'afficher une infobulle lors du survol de l'image par le


curseur.

WIDTH: Permet de spécifier la largeur de l'image.

HEIGHT: Permet de spécifier la hauteur de l'image.


<table> Block Délimite un tableau. Voici un exemple de tableau simple :
<table border="1">
<caption>Passagers du vol 377</caption>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>Etats-Unis</td>
</tr>
<tr>
<td>François</td>
<td>43 ans</td>
<td>France</td>
</tr>
</table>
<caption> - Permet de donner un titre au tableau

<table width="60%" border="1" cellpadding="2" cellspacing="0"


align="center" class="texte">
<caption><b><u>Descriptif de la table</u></b></caption>
<tr>
<th width="50%" align="center">Titre Col A</th>
<th width="50%" align="center">Titre Col B</th>
</tr>
<tr>
<td align="center">Valeur 1 Col A</td>
<td align="center">Valeur 1 Col B</td>
</tr>
<tr>
<td align="center">Valeur 2 Col A</td>
<td align="center">Valeur 2 Col B</td>
</tr>
</table>
Les balises :
<tr> - Ligne de tableau

<th> - Cellule d'en-tête du tableau (généralement mise en gras)


<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<td> - Cellule du tableau

<span> Inline Balise générique de type inline


<div> Block Balise générique de type block
Les commentaires

<!–- Voici un commentaire HTML -->

<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes

-->
Les couleurs utilisées dans BODY
• BGCOLOR=c pour le fond du document
• TEXT=c pour la couleur des caractères
• LINK=c pour la couleur des prises d'hypertextes non
utilisées
• VLINK=c pour la couleur des prises d'hypertextes
utilisées
• ALINK=c pour la couleur des prises d'hypertextes à
l'instant de la sélection
Les attributs de la balise <table>

1. align
2. Bgcolor
3. Border
4. Cellpadding
5. Cellspacing
6. Frame
7. rules
8. Width
align (alignement horizontal)

L'attribut align définit l'alignement horizontal du tableau sur


le document.
Trois valeurs peuvent s'appliquer :

•left :pour le placer à gauche (option par défaut).

•center :pour le centrer.

•right :pour le placer à droite.


bgcolor
• bgcolor (couleur d'arrière plan)
L'attribut bgcolor définit la couleur d'arrière
plan à utiliser.
<table width="57%" align="center" bgcolor="#FF0000">
<tr>
<td>AMARY</td>
<td>SOUFIANE</td>
</tr>
<tr>
<td>SAID</td>
<td>HASSAN</td>
</tr>
</table>
cellpadding (espacement dans la cellule)
• cellpadding définit l'espacement entre le
contenu d'une cellule et ses bords. La valeur
est exprimée en pixels

<table width="57%" border="1" align="center" cellpadding="20">


<tr>
<td>AMARY</td>
<td>SOUFIANE</td>
</tr>
<tr>
<td>SAID</td>
<td>HASSAN</td>
</tr>
</table>
cellspacing (espacement entre les cellules)
• cellspacing définit l'espacement à laisser entre
chaque cellules d'un tableau. La valeur
est exprimée en pixels.
<table width="57%" border="1" align="center" cellpadding="20"
cellspacing="10">
<tr>
<td>AMARY</td>
<td>SOUFIANE</td>
</tr>
<tr>
<td>SAID</td>
<td>HASSAN</td>
</tr>
</table>
width (largeur du tableau)
• L'attribut width définit la largeur permise au
tableau. La valeur peut être donnée en
pixels ou bien en pourcentage.
Les attributs de la balise <TR> et
<TD>
Attribut Valeur Fonction
LEFT alignement horizontal à gauche
ALIGN= CENTER alignement horizontal à centre
RIGHT alignement horizontal à droite
TOP alignement vertical en haut
VALIGN= MIDDLE alignement vertical au milieu
BOTTOM alignement vertical en bas
Les attributs de la balise <TR> et <TD>
Attribut Valeur Fonction
#RRGGBB(code couleur en
hexadécimal RGB)ou
BGCOLOR= Couleur du fond
name(nom de la couleur en
anglais)
largeur d'une cellule
WIDTH=
valeur numérique en pixel ou (Uniquement TD)
pourcentage par rapport aux hauteur
dimensions de la fenêtre du (certains navigateurs
HEIGHT=
navigateur. ne reconnaissent pas
cet attribut)

COLSPAN: pour fusionner les colonnes .

ROWSPAN : pour fusionner les lignes .


COLSPAN
<TABLE>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>

Item 1 Item 2
Item 3 Item 4 Item 5
ROWSPAN
<TABLE >
<TR>
<TH COLSPAN=2>Titre 1</TH>
<TH COLSPAN=2>Titre 2</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD> Titre 1 Titre 2
<TD>C</TD>

</TR>
<TD>D</TD> A B C D
<TR>
<TD>E</TD>
E F G H
<TD>F</TD>
<TD>G</TD>
<TD>H</TD>
</TR>
</TABLE>
Exercice 3: Les tableaux
36
multi-fenêtres
un document multi-fenêtres a la même structure
qu'un document HTML normal, à cette différence
près que les balises d'encadrement <BODY> sont
remplacées par des balises <FRAMESET> qui
encadrent la description des sous-documents
HTML qu'elles contiennent.
• <FRAMSET> : C'est la balise d'encadrement
d'une fenêtre.
• Entre les balises <FRAMESET> et
</FRAMESET> ne peuvent apparaître que les
balises <FRAME>, <NOFRAME> ou un autre
jeu de balises FRAMSET
• Exemples
<FRAMESET ROWS="20%,60%,20%">
<FRAMESET ROWS="100,*,100">
<FRAMESET COLS="20%,80%">
Exemple n°1
<FRAMESET COLS="20%,80%">
<FRAME SRC="frame1.html" NAME="gauche">
<FRAME SRC="frame2.html" NAME="droite">
</FRAMESET>

frame1.html frame2.html
Exemple n°2
<FRAMESET ROWS="20%,80%">
<FRAME SRC="frame1.html" NAME="haut">
<FRAME SRC="frame2.html" NAME="bas">
</FRAMESET>

frame1.html

frame2.html
Exemple n°3
<FRAMESET COLS="20%,80%">
<FRAME SRC="frame1.html" NAME="gauche">

<FRAMESET ROWS="50%, 50%">

<FRAME SRC="frame2.html" NAME="droit_haut">

<FRAME SRC="frame3.html" NAME="droit_bas">

</FRAMESET>

frame2.html

frame1.html
frame3.html
Les formulaires
L'élément <form> permet de créer des formulaires, qui peuvent contenir des cases
à cocher, des boutons radio, des listes déroulantes … les données recueillies sont
transmises à un programme qui s'exécutera sur le serveur web et vous retournera
le résultat.

<form action="mon_programme.pl">

… éléments du formulaire

</form>
Zone de texte

<FORM METHOD="POST" ACTION="p2.html">

<input type="text" name="nom" size="60"/>

</FORM>
Zone de texte ( password)

<FORM METHOD="POST" ACTION="p2.html">

<input type="password" name="nom" size="60"/>

</FORM>
Bouton Submit

<FORM METHOD="POST" ACTION="p2.html">

<input type="password" name="nom" size="60"/>

<input type="submit" value="Envoi">

</FORM>
Bouton Reset

<FORM METHOD="POST" ACTION="p2.html">

<input type="password" name="nom" size="60"/>

<input type="reset" value="Efface">

</FORM>
Zone de texte ( password)

<FORM METHOD="POST" ACTION="p2.html">

<input type="password" name="nom"


size="60"/>

</FORM>
checkbox

<FORM METHOD="POST" ACTION="p2.html">

<input type="checkbox" name="pfm" value="linux" checked>


Linux<BR>
<input type="checkbox" name="pfm" value="dos"> Dos<BR>
<input type="checkbox" name="pfm" value="win"> Windows

</FORM>
radio

<FORM METHOD="POST" ACTION="p2.html">

<input type="radio" name="media" value="cd" checked/>


<input type="radio" name="media" value="dk"/>

</FORM>
SELECT
Cet élément sert à définir des listes (menus déroulant ou
ascenseurs). Elle s'utilise avec l'élément OPTION.

<FORM METHOD="POST" ACTION="p2.html">


<select name="menu">
<option> Pomme </option>
<option> Banane </option>
<option> Orange </option>
<option selected> Citron </option>
<option> Pêche </option>
<option> Poire </option>

</select >
</FORM>
TEXTAREA

Permet de créer une zone de texte en spécifiant sa taille


grâce aux attributs ROWS et COLS.
<FORM METHOD="POST" ACTION="p2.html">
<textarea name="comm" rows=10 cols=40>
Tapez vos commentaires ici
</textarea>
</FORM>
Eléments de formulaire

<input name="my_choice" type="radio"> …


</input>
Définit les entrées de données dans le
formulaire
Principaux attributs

name = "chaine", associe un nom aux données entrées dans cet élément input ( ex:
civilite pour un choix Mme, Mlle, Mr de type radio, on affectera dans le CGI la valeur
cochée à la variable civilite, ce qui donne en Perl:
$civilite=$CGI->param(civilite)
input=cgi.parse()
input[civilite]

type = "button, checkbox, file, hidden, image, radio, reset, submit, text …"
HTML5 Input Types
•color
•date
•datetime-local
•email
•month
•number
•range
•search
•tel
•time
•url
•week
Le champ <input type=color>
• Choisissez une couleur: <input type="color"
name="favcolor" />
<input type=date>
• Anniversaire: <input type="date" name="bday"
/>
<input type=datetime-local>
• Permet de choisir la date et l’heure
• Support idem type=date
• Anniversaire : <input type="datetime-local"
name="bdaytime" />
<input type=time>
• Heure du rendez-vous :
<input type="time" name=“rdv_time" />

• Supporté par Opera pour le moment


<input type=week>
• Choisissez la semaine :
<input type="week" name=“no_semaine" />
<input type=month>
• <input type="month" name="bdaymonth" />
• Idem date mais permet de choisir juste le mois
• Support Opera aujourd’hui
<input type=email> validation
• Validation + messages d’erreurs. Parfois
tooltips lors de la saisie

• Et lors de la soumission
<input type=number>
• <input type="number" name="quantity"
min="1" max="5" />

• Attributs possibles : max, min, step, value


(valeur par défaut)
• Clavier contextuel sur mobiles, validations
idem type=email
• Support Opera, Chrome, Safari…
<input type=range>
<input type="range" name=“n" min="1" max="10"
/>

• Attributs : idem que ceux de type=number


• Poppe un clavier contextuel sur mobile
• Support idem (Opera, Chrome, Safari)
<input type=range>
• Exemple avec feedback
<input id="slider1" type="range" max="500" step="10"
onchange="printValue('slider1','rangeValue1')"/>
<input id="rangeValue1" type="text" size="2"/>

Et une fonction JavaScript


<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
</script>
<input type=tel>
• Telephone: <input type="tel" name="usrtel"
/>
• Intérêt principal : tablettes, smartphones !
<input type=url>
Homepage: <input type="url" name="homepage"
/>

• Idem, soumis à validation par défaut, peuvent


être stylés (required, invalid)
<input type=search>
<label for="mysearch2">Enter your
search string here : </label>
<input id="mysearch2"
type="search"
placeholder="search">

• Meilleur affichage dans Chrome et Safari, petite croix


pour vider le champs, possibilité de mettre un
“placeholder” (val par défaut grisée), attribut “result”
<input type="email" name="user_email">

<input type="date" name="anniversaire">

<input type="time" name="wakeup">

<input type="datetime" name="rdv">

<input type="month" name="holidays">


<input type="number" name="howmuch">
<input type="number" step="8">

<input type="number" step="8" value="0" min="0" max="64">


<input type="range">

<input type="range" value="15" max="50" min="0" step="5">

<input type="color" value="#fad345" name="textcolor">


Le champ <output>
• Représente le résultat d'un calcul ou d'une sortie produite par
le navigateur ou le serveur.
• évite de faire certains feedbacks qu’on faisait auparavant en
JavaScript
<form oninput="o.value=a.value*b.value">
<input name="a" value="2" type="number">
x <input name="b" value="3" type="number">
= <output name="o">6</output>
</form>

Si tôt qu’on a saisi les deux premières valeurs le champ


<output> est mis à jour, pas besoin de JavaScript !
Le champ <output>
<div id="so">
</div>
<input id="nb1" name="nb1" type="number"> +
<input id="nb2" name="nb2" type="number">
<button onclick="produit1()">calculer</button>
<script>
function produit1()
{
var nb1=document.getElementById("nb1").value;
var nb2=document.getElementById("nb2").value;
var somme=nb1*nb2;
document.getElementById("so").innerHTML =somme;
}
</script>
Le champ <output>

oninput="o.value=parseInt(ht.value)+
parseInt(tva.value)+parseInt(remise.v
alue)"
Le champ <datalist>
• Cette balise sert à créer une liste de
suggestions associée à un champ (comme
dans Google Suggest).
• L'id du tag <datalist> doit être identique à la
valeur de l’attribut "list " du champ <input>
associé.
Le champs <datalist>, exemple
<input list="langage_programmation" name="pr" />
<datalist id="langage_programmation">
<option value="JAVA">
<option value="C#">
<option value="VB">
<option value="ASP">
<option value="PHP">
</datalist>

Le champs de saisie va proposer une liste avec


de l’auto-complétion :
<datalist>

• Supporté par : Firefox, Opera, IE10

• Pour les navigateurs qui ne le supportent pas,


on peut utiliser un <select> dans le <datalist>
+ du JavaScript
Attribut autofocus
• Permet de mettre le focus sur un champ
particulier d’un formulaire, sitôt la page chargée
entièrement dans le navigateur.

<form action="demo_form.asp">
Nom:<input type="text" name="nom"
autofocus="autofocus"/><br />
Prénom: <input type="text" name="pre"/><br />
<input type="submit"/>
</form>
Pseudo classes CSS
<input type="text" value="optional"><br/>
<br/>
<input type="text" value="required" required>
<input type="time" value="06:06" required><br/>
<br/>
<input type="text" value="lettres9" pattern="[ a-zA-Z]*">
Effacez le chiffre, pour rendre ce champ valide.

• Avec comme CSS :


<style>
input:optional {background-color: silver}
input:required {background-color: fuchsia}
input:invalid {background-color: red}
</style>
Attribut required
• Cet attribut indique qu’un champ input ne
peut demeurer vide
• S’applique aux types text, search, url, tel,
email, password, date pickers, number,
checkbox, radio, et file
• <input type="text" required>
• Utile car peut être stylé via CSS
input:required {
background-color: green;
}
Attribut novalidate
• <input type="submit"
formnovalidate="formnovalidate"
value=“Soumettre sans valider" />
• Permet de soumettre un formulaire même
s’il contient des champs qui doivent être
validés et qui sont incorrects
• Ex : un formulaire qui a un champ email ou
un champ required et qui ne sont pas
remplis
• En général, deux boutons de soumission
Attribut pattern
• Permet de faire des validations complexes (à
la volée ou à la soumission)
• Exemple :
• Code sur trois lettres : <input type="text"
name="country_code" pattern="[A-Za-z]{3}"
title=“Code 3 lettres" />
Contrôles de formulaires en HTML5
• Depuis le HTML5, le contrôle des formulaires est
possible directement dans l’input html grâce à l’attribut
pattern et à sa valeur sous la forme d’une regex.
• Une regex est une expression régulière, autrement dit
un filtre de contrôle de texte très puissant vérifiant la
validité d’une information.
• Avant le HTML5, le contrôle des formulaires devait se
faire en JavaScript et son utilisation était moins
pratique.
• L’attribut pattern est compatible sur les navigateurs:
Firefox 4+ , Chrome 5+ ,Opera 9.6+ , Internet explorer
10+
Contrôles de formulaires en HTML5
• <input type="text" pattern="regex"
title="Aide de saisie">
• Dans ce champ, l’attribut pattern peut
accepter une regex et l’attribut title permet
d’afficher une infobulle avec une indication sur
le format du champ attendu.
• L’avantage du contrôle de formulaire est de
mettre en valeur le champ mal rempli afin
d’obliger l’utilisateur à le corriger.
Voici la boite à outils permettant
d’améliorer le filtre:
• [0-9] : Les caractère allant de « 0 » à « 9 »
autrement dit un chiffre.
• [a-zA-Z] : De « a » à « z » et de « A » à « Z »
• [a-zA-ZÀ-ÿ] : De « a » à « z » et de « A » à « Z
» et « À » à « ÿ » bref tous les mots
• [\(-\+] : Ça marche aussi avec les caractères
spéciaux (en bleu), pour les utiliser, il faut
placer un antislash avant, lire: De « ( » à « + »
Caractère spécial Echappement
\ \\
• Pour rechercher un . \.
caractère faisant $ \$
[ \[
partie des caractères ] \]
spéciaux, il suffit de ( \(
le faire précéder ) \)
{ \{
d'un antislash (sauf } \}
entre crochets) : ^ \^
? \?
* \*
+ \+
- \-
Début et fin de chaîne
• Les symboles ^ et $ indiquent respectivement
le début et la fin d'une chaîne, et permettent
donc de la délimiter.

"^debut": chaîne qui commence par


"debut"
"fin$": chaîne qui se termine par "fin"
"^chaîne$": chaîne qui commence et se
termine par "chaîne"
"abc": chaîne contenant la chaîne "abc"
Nombre d'occurences
• "abc+": chaîne qui contient "ab" suivie de un
ou plusieurs "c" ("abc", "abcc", etc.)
• "abc*": chaîne qui contient "ab" suivie de zéro
ou plusieurs "c" ("ab", "abc", etc.)
• "abc?": chaîne qui contient "ab" suivie de zéro
ou un "c" ("ab" ou "abc" uniquement)
• "^abc+": chaîne commençant par "ab" suivie
de un ou plusieurs "c" ("abc", "abcc", etc.)
• [^0-9] : Tous les caractères sauf ceux entre « 0
» et « 9 »
• ICI|LA : Le pipe | correspond à un ‘ou’, lisez
ICI ou LA.
• U{2,4} : Limite d’occurence min et max du
caractère, lisez « UU ou « UUU » ou « UUUU »
• BA.ON : Le « . » remplace n’importe quel
caractère, lisez: BAtON ou BALON ou BAdON…
Les accolades {X,Y}
• Les accolades {X,Y} permettent de donner des
limites précises de nombre d'occurences.
"abc{2}": chaîne qui contient "ab" suivie de deux "c" ("abcc")

"abc{2,}": chaîne qui contient "ab" suivie de deux "c" ou plus


("abcc" etc..)

"abc{2,4}": chaîne qui contient "ab" suivie 2, 3 ou 4 "c"


("abcc" .. "abcccc")
Parenthèses capturantes

• Les parenthèses ( ) permettent de représenter


une séquence de caractères et de capturer le
résultat

"a(bc)+": chaîne qui contient "a" suivie de


au moins une occurence de la chaîne "bc"
Opérateur OU
• La barre verticale | se comporte en tant
qu'opérateur OU

"(un|le)": chaîne qui contient "un" ou "le"


"(une|la) table": chaîne qui correspond à "une table
" ou "la table "
"soufiane\.((net)|(com)|(org))": chaîne qui
correspond à : " soufiane.net" " soufiane.com" "
soufiane.org"
Caractère quelconque
• Le point (.) indique n'importe une occurence
de n'importe quel caractère.

"^.{3}$": chaîne qui contient 3 caractères ".*":


Tous les caractères
Liste de caractères
• Les crochets [ ] définissent une liste de
caractères autorisés (ou interdits).
• Le signe - permet quand à lui de définir un
intervalle.
• Le caractère ^ après le premier crochet
indique quand à lui une interdiction.
Liste de caractères

"[abc]": chaîne qui contient un "a", un "b", ou un "c".

"[a-z]": chaîne qui contient un caractère compris


entre "a" et "z".

"[^a-zA-Z]": chaîne qui ne commence pas par une


lettre.
Liste de caractères

"[-ag]": chaîne qui contient un moins (-), un "a",


ou un "g"

"[a-g]": chaîne qui contient un caractère


compris entre "a" et "g"

"[\+?{}.]": chaîne qui contient un de ces cinq


caractères
Caractères spéciaux
Caractère Utilité
spécial
\d Permet de capturer un caractère numérique. \d est ainsi équivalent
à [0-9].
\r Permet de capturer un retour chariot.
\s Permet de capturer un "caractère blanc" (espace, retour chariot,
tabulation, saut de ligne, saut de page).
\S Permet de capturer un "caractère non blanc" (tous les caractères
sauf espace, retour chariot, tabulation, saut de ligne, saut de page).
\t Permet de capturer une tabulation horizontale.
\v Permet de capturer une tabulation verticale.
\w Permet de capturer un caractère alphanumérique (y compris le
caractère _). \w est ainsi équivalent à [a-zA-Z0-9_].
\W Permet de capturer un caractère non alphanumérique. \W est ainsi
équivalent à [^a-zA-Z0-9_].
Tableau récapitulatif(1/2)
Caractère Utilité
\ Le caractère antislash représente lui-même ou le caractère spécial
qui le suit.
[] Les crochets définissent une liste de caractères.
() Les parenthèses définissent un élément composé de l'expression
régulière qu'elle contient.
{} Les accolades lorsqu'elles contiennent un ou plusieurs chiffres
séparés par des virgules représentent le nombre d'occurences de
l'élément les précédant (par exemple p{2,5} correspond
à ppp, pppp ou ppppp
- Un moins entre deux caractères dans une liste représente un
intervalle (par exemple [a-d] représente [abcd]).
. Le caractère point représente un caractère quelconque.
* Le caractère astérisque indique un nombre d'occurences
indéterminé (y compris aucune) de l'élément le précédant.
Tableau récapitulatif(2/2)
+ Le caractère plus indique une ou plusieurs occurences de
l'élément le précédant.
? Le caractère "point d'interrogation" indique une occurence
éventuelle (0 ou 1) de l'élément le précédant.
^  Placé en début d'expression il signifie "chaîne
commençant par .. "
 Utilisé entre crochet, immédiatement après le crochet
ouvrant, il signifie "ne contenant pas les caractères
suivants...
[abc] Permet de rechercher les caractères compris entre les
crochets.
[^abc] Permet de rechercher tous les caractères sauf ceux compris
entre les crochets.
$ Placé en fin d'expression il signifie "chaîne finissant par ... "
API de validité
• On peut aussi implémenter son propre gestionnaire
de validité, grâce à l’API de validité
• La fonction JavaScript setCustomValidity() permet de
personnaliser les messages d'erreur. Elle prend en
paramètre une chaîne de caractère. Lorsque cette
chaîne est vide, l'élément est considéré comme étant
valide.
• Supporté par Firefox pour le moment…
API de validité exemple(1/2)
<form>
Mot de passe: <input type="password" id="password1"
oninput="checkPasswords()">
Répétez mot de passe: <input type="password" id="password2"
oninput="checkPasswords()">

<input type="submit" />


</form>
<script>
function checkPasswords()
{
var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');
if (password1.value != password2.value) {
password2.setCustomValidity('Les mots de passe ne correspondent pas.');
} else
{
password2.setCustomValidity('');
}
API de validité exemple(1/2)
<script>
function checkPasswords()
{
var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');
if (password1.value != password2.value)
{
password2.setCustomValidity('Les mots de passe ne
correspondent pas.');
} else
{
password2.setCustomValidity('');
}
}

</script>
placeholder
placeholder est un attribut qui permet de renseigner un
texte indicatif par défaut dans un champ de formulaire.
C'est une valeur qui s'efface dès que l'utilisateur active le
champ de formulaire

<input type="text" placeholder="Entrez un


pseudo">
required
L'attribut required permet de rendre obligatoire le remplissage d'un champ et
bloquer la validation du formulaire si l'un des champs (concernés par cet
attribut) n'a pas été renseigné.

<!-- sans valeur -->


<input type="text" required>

<!-- avec la valeur required -->


<input type="text" required="required">
Tags de structuration
Eléments de section, article, nav, aside,
header, footer
• Ce sont des éléments de structure, plus précis que <span>
ou <div>
• Etablis à partir de statistiques d’utilisation des ids et classes
les plus populaires du web,
– <div class="aside"> devient <aside> pour les menus sur le côté
• En devenant standards, on peut plus facilement leur
appliquer une CSS standard, partageable,
• Les navigateurs peuvent les reconnaître et proposer un
rendu spécifique,
Synthèse (1)
Nom Détails
Section générique regroupant un même sujet, une même
<section> fonctionnalité, de préférence avec un en-tête, ou bien section
d'application web
Section de contenu indépendante, pouvant être extraite
<article> individuellement du document ou syndiquée (flux RSS ou
équivalent), sans pénaliser sa compréhension
Section possédant des liens de navigation principaux (au sein du
<nav>
document ou vers d'autres pages)
Section dont le contenu est un complément par rapport à ce qui
<aside> l'entoure, qui n'est pas forcément en lien direct avec le contenu
mais qui peut apporter des informations supplémentaires.
Section d'introduction d'un article, d'une autre section ou du
<header>
document entier (en-tête de page).
Section de conclusion d'une section ou d'un article, voire du
<footer>
document entier (pied de page).
Synthèse (2)
Exemple de structure globale
<header>
<h1>Nouveaux éléments de section, article, header,
footer, aside, nav</h1>
</header>
<!-- nav principale -->
<nav>nav
<ul>
<li><a href="#">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
</ul>
</nav>
<!-- Main -->
<section id="main">
<article> .. </article>
</section>
Chaque article peut avoir sa propre
structure
<article>
<header>
<h1>Titre de l'article</h1>
<p>Auteur : bidule</p>
</header>
<p>
The short answer is that I enjoy wearing shorts,
the long answer is...
</p>
<p>Contenu de l'article</p>

</article>

http://w3c.github.io/html/sections.html#the-article-
element
<detail> et <summary>
• On clique sur la flèche et « ça s’ouvre » :
<details>
<summary>développement informatique </summary>
<p> - Le développeur multimédia</p>
<p> - Le développeur logiciel</p>
<p> - concepteur de logiciel</p>
</details>
<detail> et <summary> suite…

• Support pour le moment uniquement sur


Browsers basés sur WebKit (Chrome, Safari,
Android)
• On peut imbriquer des blocs <details> les uns
dans les autres
Le tag <mark>
• C’est un « highlighter », pour mettre du texte
au stabilo !
<p>Le projet est à rendre<mark>au
format .zip</mark> lundi
prochain.</p>
• Donne :
Le tag <mark> suite…
• Peut être utilisé à l’intérieur d’autres tags, par
exemple dans un <pre>, un <code> un <b> etc
<pre><code>
<mark>var</mark> i = 3;
</code></pre>
<p>Le mot-clé var permet de
déclarer une variable en
JavaScript.</p>
Le tag <time>
• Sert à indiquer une date dans un format lisible
par les machines
– Ex : utilisable par extensions Chrome ou Firefow
pour des alertes aux anniversaires, pour insertion
automatique dans Google Calendar, etc
• Non supporté pour le moment… support partiel
dans Opera
<p>Nous ouvrons à <time>10:00</time> chaque
matin.</p>

<p>J’ai rendez-vous le <time datetime="2012-


02-14">lundi 14 février 2012</time>.</p>
Le tag <time>, syntaxe très complète
• <time datetime="1905"> L’année 1905
• <time datetime="1905-11"> Novembre 1905
• <time datetime="11-13"> Le 13 November
• <time datetime="1905-W21"> semaine 21 de l’année 1905
• <time datetime="1905-11-13T09:00"> : avec l’heure
• <time datetime="1905-11-13 09:00"> : idem
• <datetime="09:00Z"> 9h du matrin, GMT.
• <datetime="09:00-05"> 9h du matin, GMT – 5 heures.
• Nombreuses autres options pour exprimer des durées, des
événements périodiques, voir
http://www.brucelawson.co.uk/2012/best-of-time/
video
L'attribut controls ajoute des contrôles vidéo, tels que
lecture, pause.

<video width="320" height="240" controls>


<source src="movie1.mp4" type="video/mp4">
<source src="movie1.ogg" type="video/ogg">
</video>

Pour démarrer automatiquement une vidéo, utilisez l'attribut


autoplay:

<video width="320" height="240" autoplay>


<source src="movie1.mp4" type="video/mp4">
<source src="movie1.ogg" type="video/ogg">
</video>
video
• Html 5 support trios type d’extension :mp4 , webM , ogg
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

File Format Media Type


MP4 video/mp4
WebM video/webm
Ogg video/ogg
video
<div style="text-align:center">
<button
onclick="FplayPause()">Play/Pause</button>
<button onclick="FGrand()">Grand</button>
<button onclick="Fpetite()">Petit</button>
<button onclick="FNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="1.mp4" type="video/mp4">
<source src="1.ogg" type="video/ogg">
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function FplayPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function FGrand() { myVideo.width = 500; }


function Fpetite() { myVideo.width = 280; }
function FNormal() { myVideo.width = 400; }
</script>
audio
<audio controls>
<source src="1.ogg" type="audio/ogg">
<source src="1.mp3" type="audio/mpeg">
<source src="1.wav" type="audio/wav">
</audio>
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
<audio>
autoplay
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">

</audio>

loop
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
YouTube Videos
<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

<iframe width="420" height="315"


src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

<iframe width="420" height="315"


src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8
k&loop=1">
</iframe>

Vous aimerez peut-être aussi