06/02/2025 19:07 HTML5

Table des matières

1. Elements HTML de base

1.1. Balises
1.2. Element
1.3. Attributs:

2. STRUCTURE D’UNE PAGE EN HTML5

3. BONNES PRATIQUES

4. Éléments de base
4.1. Exemples

5. Exercice d’application
5.1. Enoncé
5.2. Corrigé

6. Listes
6.1. Exemples
6.2. Exercice d’application

7. Liens
7.1. Liens internes
7.2. Liens externes
7.3. Autres types de liens

8. Images

9. Arrières-plans

10. Tableaux

11. Exercice

12. Les formulaires

12.1. Envoi de paramètres
12.2. Composantes
12.3. Zone de Saisie
12.4. Exemples de formulaires
12.5. Liste Déroulante
12.6. Zone de texte
12.7. Les FieldSet
12.8. required
12.9. pattern
12.10. L’attribut autofocus
12.11. Champ de type email
12.12. Champ de types date, time
12.13. Champ de type number
12.14. Champ de type range
12.15. Champ de type color
12.16. Formulaire avec complétion automatique

13. VALIDATION & COMPATIBILITE

[Link] 2/45
06/02/2025 19:07 HTML5

1. Elements HTML de base

Cette partie présente trois notions:

les balises HTML
Les éléments HTML
Les attributs HTML

[Link] 3/45
06/02/2025 19:07 HTML5

1.1. Balises

Les pages HTML sont composé de ce qu'on appelle des : BALISES

Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement ==>

Elles sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme ceci : <balise>

[Link] 4/45
06/02/2025 19:07 HTML5

1.2. Element

L’élément p définit un paragraphe <p>,

Les éléments h1, h2, … , h6 définissent des titres <h1> <h2> ..,

Les éléments sont généralement constitués d’une paire de balises :

Balise ouvrante : <p>

Balise fermante : </p>

Exception : balises orphelines comme <br/>

[Link] 5/45
06/02/2025 19:07 HTML5

1.3. Attributs:

Les attributs sont des propriétés utilisées pour donner des indications supplémentaires aux éléments.

Ex: Indiquer l'URL d’un lien.

[Link] 6/45
06/02/2025 19:07 HTML5

2. STRUCTURE D’UNE PAGE EN HTML5

Une page HTML est constitué de plusieurs parties à inclure OBLIGATOIREMENT dans votre page HTML , à savoir:

[Link] 7/45
06/02/2025 19:07 HTML5

3. BONNES PRATIQUES

Vous pouvez imbriquer des balises l’une dans l’autre mais vous devez les fermer dans le bon ordre : <a> <b> </b> </a>.

Indentez votre code et commentez le pour le rendre plus lisible, plus professionnel et plus simple à comprendre.

<!-- Voici un commentaire en HTML -->

Tout le monde peut voir votre code HTML ! N’écrivez donc pas d’infos sensibles

en commentaires comme des mots de passe !

[Link] 8/45
06/02/2025 19:07 HTML5

4. Éléments de base

L’élément p définit un paragraphe.

L’élément br crée un retour à la ligne.
Les éléments h1, h2,… jusqu’à h6 définissent des titres (par ordre d’importance).
L’élément strong est utilisé pour définir un contenu comme important.
L’élément em est utilisé pour définir un contenu comme assez important.
L’élément mark est utilisé pour faire ressortir du contenu.

[Link] 9/45
06/02/2025 19:07 HTML5

4.1. Exemples

Voici les codes de quelques couleurs basiques.

Bleu #0000FF Vert #00FF00

Blanc #FFFFFF Violet #8000FF

Rouge #FF0000 Jaune #FFFF00

[Link] 10/45
06/02/2025 19:07 HTML5

5. Exercice d’application

[Link] 11/45
06/02/2025 19:07 HTML5

5.1. Enoncé

Ecrivez cette phrase en utilisant la police de caractères Comic Sans MS : J’utilise la police Comic Sans MS. Puis un retour à la ligne
Ecrivez cette phrase en utilisant la police de caractères Arial : J’utilise la police Arial. Puis un retour à la ligne
Ecrivez cette phrase en utilisant la police de caractères Verdana : J’utilise la police Verdana.

[Link] 12/45
06/02/2025 19:07 HTML5

5.2. Corrigé

<font face="Comic Sans MS"> J’utilise la police Comic Sans MS </font>

<br />

<font face="Arial"> J’utilise la police </font>

<br />

<font face="Verdana"> J’utilise la police </font>

[Link] 13/45
06/02/2025 19:07 HTML5

6. Listes

Il existe plusieurs types de listes:

ORDONNEES
NON-ORDONNEES
DE DEFINITIONS
IMBRIQUEES

Liste non ordonnée:

Pour créer une liste non ordonnée, on utilise les éléments ul (pour la liste) et li (pour les éléments de la liste)

Liste ordonnée:
Pour créer une liste ordonnée, on utilise ol et li.

Liste de définition

Les listes de définition sont utilisées pour définir des termes.

On utilise les éléments dl ( Créer la liste ), dt (Créer le terme à définir) et dd (la déscription du terme)
Le terme à définir doit toujours être placé avant la description.
On peut avoir plusieurs descriptions pour le même terme ou plusieurs termes pour une description.

Liste imbriquée:

Exemple:

On peut imbriquer une liste non ordonnée dans une liste ordonnée
On peut imbriquer une liste non ordonnée dans une liste de définition

[Link] 14/45
06/02/2025 19:07 HTML5

6.1. Exemples

[Link] 15/45
06/02/2025 19:07 HTML5

6.2. Exercice d’application

L’attribut «type» définit comment les nombres ordinaux doivent être affichés.

Il peut valoir les caractères suivants:

a : lettres minuscules
A : lettres majuscules
i : nombres romains en minuscules
I : nombres romains en majuscules
1 : nombres

[Link] 16/45
06/02/2025 19:07 HTML5

7. Liens

[Link] 17/45
06/02/2025 19:07 HTML5

7.1. Liens internes

Un liens interne est un lien entre deux pages d’un même site.

Pour créer des liens, on utilise l’élément ‘a’ avec son attribut ‘href’.

Supposons que j'ai créé une page HTML nommé page1 et je veux accéder à une page de mon site nommée page2,
pour créer des liens internes, on utilise un chemin relatif, il existe 3 cas :
page1 et page2 sont dans le même dossier ==> href = « [Link] »
page2 est dans un sous-dossier ==> href = « sous_dossier/[Link] »
page2 est dans le dossier parent ==> href=« ../[Link] »

[Link] 18/45
06/02/2025 19:07 HTML5

7.2. Liens externes

Un lien externe est un lien d’un site vers un autre site.

Pour créer des liens, on utilise l’élément ‘a’ avec son attribut ‘href’.
Pour des liens externes, on spécifie un chemin absolu. La valeur de l’attribut href est l’adresse du site.
Pour ouvrir le lien dans une nouvelle fenêtre / onglet, on utilise l’attribut ‘target’ avec la valeur « _blank ».

[Link] 19/45
06/02/2025 19:07 HTML5

7.3. Autres types de liens

Il existe d'autres types de liens:

Lien menant à un autre endroit de la même page web : spécifier un id puis #.

Lien pour envoyer un mail avec mailto:
Lienpourtéléchargerunfichierenprécisantunchemin relatif/absolu.

[Link] 20/45
06/02/2025 19:07 HTML5

8. Images

Pour insérer une image:

<IMG SRC="Adresse de l'image" /> Afficher l'image qui se trouve à l'adresse.

La balise image possède de nombreux attributs.
Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image" activée
Dimensions: width=? height=? Hauteur et largeur (en pixels)
border=? (en pixels) Bordure
changer l'alligenement align= (top, middle, left, right …)
Image comme lien: <a HREF="[Link]"><img SRC="[Link]"></a>

[Link] 21/45
06/02/2025 19:07 HTML5

9. Arrières-plans

Le langage HTML permet d'agrémenter la présentation du document d'un arrière-

plan [background] coloré ou à l’utilisation d’une image ce qui apporte un élément "artistique" à votre page. La balise à
utiliser ne pose pas de problème :

Avec Couleur: <BODY BGCOLOR="#ff9955ss">

Avec Image: <BODY BACKGROUND="[Link]">

[Link] 22/45
06/02/2025 19:07 HTML5

10. Tableaux

Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.

Les balises de base sont donc :

Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau

Définition de l’en-tête du tableau [Table Header] <TH></TH>
Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne
Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule

Autres balises:

<tbody> permet de regrouper un ou plusieurs éléments <tr> afin de former le corps d'un tableau <table>.
<thead> définit un ensemble de lignes qui définit l'en-tête des colonnes d'un tableau.
<tfoot> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.

L'élément <tbody>, ainsi que les éléments <thead> et <tfoot>, fournit des informations sémantiques qui sont utilisées pour l'affichage à
l'écran, l'impression et l'accessibilité.

Bordure de cadre [Border] <TABLE border=?> </TABLE>

L'espace entre les cellules ou l'épaisseur des lignes du quadrillage: <TABLE cellspacing=?>
L'enrobage des cellules ou l'espace entre le bord et le contenu: <TABLE cellpadding=?>
La largeur de la table <TABLE width=?>
Largeur d'une cellule <TD width=?> en pixels ou <TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes <TD colspan=?>

Remarque:

les cellules peuvent contenir tous les éléments Html :

du texte
des images
des liens
et même des tableaux

EXEMPLE :

Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales.

<CENTER><TABLE width=60% border=1>

<TR>

<TD width=33%>cellule1</TD>

<TD width=33%>cel. 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE></CENTER>

Exemple 1 :

Exemple 2 :

[Link] 23/45
06/02/2025 19:07 HTML5

Solution Exemple 1 :

<TABLE width=60% border=1>

<TR>

<TD colspan=3>cellule 1</TD>

</TR>

<TR>

<TD width=33%>cellule 1</TD>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE>

Solution Exemple 2 :

<TABLE width=60% border=1>

<TR>

<TD width=33% rowspan=2>cellule 1</TD>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

<TR>

<TD width=33%>cel 2</TD>

<TD width=34%>3</TD>

</TR>

</TABLE>

[Link] 24/45
06/02/2025 19:07 HTML5

11. Exercice

[Link] 25/45
06/02/2025 19:07 HTML5

12. Les formulaires

Les formulaires sont utilisés pour échanger des données entre le poste client et le serveur. Cet échange de données fait appel à des
programmes spéciaux s’exécutant sur le serveur.

L’utilisateur remplit le formulaire et le valide ce qui a pour effet d’envoyer des données vers le serveur
Le script s’exécute sur le serveur qui effectue un traitement en produisant éventuellement des résultats
Les résultats sont transmis en code HTML au poste client. Ils sont affichés par le navigateur

[Link] 26/45
06/02/2025 19:07 HTML5

12.1. Envoi de paramètres

Un formulaire est délimité par les balises <FORM> et </FORM>.

<FORM METHOD="POST" ou "GET" ACTION="url">

...!– champs de saisie --!

</FORM>

Champs de saisie se trouvent entre ces deux balises. Les données saisies sont transmises selon deux méthodes indiquées par
l’attribut METHOD au script (sur le serveur)
METHOD = GET : correspond à un envoi des données codées dans l'URL, et séparées de l'adresse du script par un point d'interrogation
METHOD = POST : permet l’envoi de listes de données plus longues (les paramètres sont envoyés indépendamment de l’adresse
URL du script).
Action : indique l'adresse d'envoi (script , [Link] email, …)
Enctype : (facultatif) spécifie le codage des données dans l'URL

[Link] 27/45
06/02/2025 19:07 HTML5

12.2. Composantes

Un formulaire peut contenir plusieurs types de zone de saisie. Le choix d'un type par rapport à un autre dépend du besoin et du choix du
développeur. Aussi, il faut bien choisir le type approprié à une situation.

[Link] 28/45
06/02/2025 19:07 HTML5

28/07/2022

Filière LP_RSI , FSSM, UCA

34

[Link] 29/45
06/02/2025 19:07 HTML5

12.3. Zone de Saisie

Les zones de saisie sont définies par la balise <INPUT> qui possède les attributs suivants :

NAME : nom du champ de saisie ;

TYPE : type de champ ;
text : texte ;
password : mot de passe checkbox : boite à cocher radio : boite d’option Email : champ email
Datetime-local : champ date SIZE : taille du champ
MAXLENGHT : nombre maximum de caractères à saisir

Champ de saisie sur une ligne

<INPUT NAME="nom_champ" TYPE="text" value="qqs mots" />

Saisie d’un mot de passe

<INPUT NAME="password" TYPE= "Password" / >

Cases à cocher (sélection de plusieurs éléments)

<INPUT NAME="pain" TYPE=CHECKBOX value=1> 1

<INPUT NAME="vin" TYPE=CHECKBOX value=2 CHECKED>2

<INPUT NAME="potage" TYPE=CHECKBOX value=3> 3

Cases à option ou boutons radio (sélection d’un seul élément)

<INPUT NAME="X" TYPE=RADIO VALUE="2">tiède

<INPUT NAME="X" TYPE=RADIO CHECKED VALUE="1">froid

Les Boutons

Le déclenchement de l’envoi des paramètres peut s’effectuer avec un bouton «Envoi» :

<INPUT TYPE=SUBMIT VALUE="Envoyer">

La remise à leur valeur initiale des paramètres peut également s’effectuer ave un bouton «Reset»

<INPUT TYPE=RESET VALUE="Rétablir">

Exemple 1 :

[Link] 30/45
06/02/2025 19:07 HTML5

12.4. Exemples de formulaires

Exemple 1 :

<FORM METHOD=GET ACTION="[Link]

Merci de bien vouloir indiquer votre nom :

<INPUT NAME="Nom" TYPE=Text SIZE=32 MAXLENGTH=32>

<p><INPUT TYPE=SUBMIT VALUE="Envoyer">

<INPUT TYPE=RESET VALUE="Rétablir"></p>

</FORM>

Exemple 2 :

<form action="[Link] method="post">

Entrez votre prénom: <input type="text" name="prenom">

<br>

Entrez votre nom : <input type="text" name="nom" size="25">

<br>

Entrez un mot de passe : <input type="password" name="pass"

size=10 maxlenght=10>

<br><br>

<input type="submit" value="Envoyer" name="submit">

<input type="reset" value="Effacer les données" name="reset">

</form>

Exemple 3 :

<FORM METHOD=GET ACTION="[Link] nom : <INPUT NAME="Nom" TYPE=Text MAXLENGTH=32>

<br>

[Link] 31/45
06/02/2025 19:07 HTML5
prenom : <INPUT NAME="prenom" TYPE=Text MAXLENGTH=32>

<br>

Sexe:

<INPUT NAME="X" TYPE=RADIO VALUE="2">Homme

<INPUT NAME="X" TYPE=RADIO CHECKED VALUE="1">Femme

<br>

<P><INPUT TYPE=SUBMIT VALUE="Envoyer">

<INPUT TYPE=RESET VALUE="Rétablir"></p>

Exemple 4 :

<FORM METHOD=GET ACTION="[Link]

nom : <INPUT NAME="Nom" TYPE=Text MAXLENGTH=32>

<br>

prenom : <INPUT NAME="prenom" TYPE=Text MAXLENGTH=32>

<br>

Loisirs :

<INPUT NAME="foot" TYPE=CHECKBOX value=1> foot

<INPUT NAME="lecture" TYPE=CHECKBOX value=2 CHECKED>lecture

<INPUT NAME="voyage" TYPE=CHECKBOX value=3> voyage

<br>

<P><INPUT TYPE=SUBMIT VALUE="Envoyer">

<INPUT TYPE=RESET VALUE="Rétablir"></p>

[Link] 32/45
06/02/2025 19:07 HTML5

12.5. Liste Déroulante

Les balises <select> et </select> : créent une liste déroulante.

==> Quelques Attributs : name, size (spécifie le nombre d'éléments visibles)…

Les balises <option> et </option> : ajoutent un élément à la liste déroulante créée avec un select.
On lui donne une valeur grâce à son attribut "value".

Exemple:

<select>

<option value= bleu> bleu </option>

<option value= rouge> rouge </option>

<option value= jaune> jaune </option>

</select>

[Link] 33/45
06/02/2025 19:07 HTML5

12.6. Zone de texte

La balise <textarea> et </textarea> délimite une zone de texte. On peut en spécifier la taille avec:

"rows" (nombre de lignes)

"cols" (nombre de colonnes).

Exemple :

<textarea name="texte" cols=40 rows=5> Texte de départ

</textarea>

[Link] 34/45
06/02/2025 19:07 HTML5

12.7. Les FieldSet

L'élément HTML <fieldset> est utilisé pour regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un
formulaire web.

<form action= "url" method="post">

<fieldset> <legend>Titre</legend>

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

<label for="radio">Cliquez moi</label>

</fieldset>

</form>

[Link] 35/45
06/02/2025 19:07 HTML5

12.8. 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é.

<form>

<input type="text" required>

<input type=submit />

</form>

[Link] 36/45
06/02/2025 19:07 HTML5

12.9. pattern

Les expressions régulières permettent de préciser le format attendu d’une chaine de caractères.

Ainsi, on peut mettre un champs qui n’accepte qu’une chaine alphabétique d’une longueur entre 4 et 10 caractères :

Exemple 1:

<input type="text" name="username" pattern="[A-Za-z]{4,10}">

Ce champ attend une valeur numérique d'au moins 5 chiffres précédés d'une lettre

majuscule comprise entre A et F.

Si le format n'est pas respecté, le navigateur en informe l'utilisateur.

Exemple 2:

<input type="text" pattern="[A-F][0-9]{5}">

[Link] 37/45
06/02/2025 19:07 HTML5

12.10. L’attribut autofocus

Encore une fois, HTML5 élimine les solutions JavaScript.

Si un champs particulier doit être sélectionné après le chargement dela page.

Exemple :

<input type="text" name="someInput" autofocus>

[Link] 38/45
06/02/2025 19:07 HTML5

12.11. Champ de type email

Toujours très proche du type text, ce champ est équivalent au type url, seul le format attendu change.

Ce champ attend au minium un caractère (caractère non accentué comprenant les

séparateurs tiret ou underscore) suivi d'un @ suivi à son tour d'un caractère.

Exemple d'entrée invalide : é@ç

Exemples d'entrées valides : -@_ , f@r

<input type="email" name="user_email">

[Link] 39/45
06/02/2025 19:07 HTML5

12.12. Champ de types date, time

Champ de type date

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

Champ de type time

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

[Link] 40/45
06/02/2025 19:07 HTML5

12.13. Champ de type number

Le type de champ number permet de renseigner une valeur numérique.

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

Le champ de formulaire est alors transformé en une sorte de boite permettant l'incrémentation et la décrémentation d'une valeur
numérique initiale (0 par défaut), lorsque la prise en charge par le navigateur est complète.

L'attribut step : Cet attribut permet de définir le pas de l'incrémentation.

Exemple: <input type="number" step="8">

Les attributs min et max : Ces deux attributs permettent de limiter le nombre dans un intervalle défini.

Exemple: <inputtype="number"step="8"value="0" min="0"max="64">

[Link] 41/45
06/02/2025 19:07 HTML5

12.14. Champ de type range

Cechampproposeuncontenuévaluéapproximatif,retourneunevaleur numérique qui correspond à la position du curseur.

Exemple:

Votre niveau en HTML

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

[Link] 42/45
06/02/2025 19:07 HTML5

12.15. Champ de type color

Ce type permet de transformer le champ pour

sélectionner un code couleur dans une palette.

La valeur attendue est une couleur au format héxadécimal (un

dièse suivi de 6 caractères alpha- numériques compris entre A
et F, et 0 et 9).

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

[Link] 43/45
06/02/2025 19:07 HTML5

12.16. Formulaire avec complétion automatique

<h1>Choix de prénom</h1>

<form id="send" action="#" method="get">

<fieldset>

<legend>Entrez votre prénom</legend>

<input type="text" name="le-prenom" list="prenoms" autocomplete="on"

autofocus="autofocus"/>

<datalist id="prenoms">

<option>Gérard</option>

<option>Alain</option>

<option>Albert</option>

</datalist>

</fieldset>

</form>

[Link] 44/45
06/02/2025 19:07 HTML5

13. VALIDATION & COMPATIBILITE

Le W3C met deux outils à notre disposition :

Validateur HTML : [Link]

Validateur CSS : [Link]

Vous devez vous efforcer d’avoir toujours un code valide.

[Link] 45/45