Création des sites Web
Enseignant : Anis AMMA
Année Scolaire : 2024 / 2
HTML 5
O b j e c ti f s :
A p p r e n d r e l a c r é a ti o n e t l a
s t r u c t u r a ti o n d ’ u n s i t e w e b
HTML ?
H y p e r Te x t M a r k u p L a n g u a g e
La structure minimale obligatoire d’un
document HTML :
3
FR
Balises de premier niveau
B a l i s e s d ’e n - t ê t e
De premier niveau D’en-tête
• <HTML> : balise principale • <META> : Métadonnées de la page web
• <Head> : En-tête de la page (charset, mots-clés, etc.)
• <BODY> : Corps de la page • <TITLE> : Titre de la page
• <STYLE> : Code CSS
• <LINK> : Liaison avec une feuille de style
Attributs • <SCRIPT> : Code JavaScript
<balise nom_attribut=”valeur” …>
• <meta charset= utf-8 name=viewport content= width=device-width,initial-scale=1.0>
description
Keywords
author 4
FR
Balises de structuration du texte
<h1> Titre de niveau 1 <abbr> Abréviation
<h2> Titre de niveau 2 <blockquote> Citation (longue)
<h3> Titre de niveau 3 <cite> Citation du titre d'une œuvre ou
<h4> Titre de niveau 4 d'un évènement
<h5> Titre de niveau 5 <q> Citation (courte)
<h6> Titre de niveau 6 <sup> Exposant
<br /> Retour à la ligne <sub> Indice
<p> Paragraphe <strong> Mise en valeur forte
<hr /> Ligne de séparation horizontale <em> Mise en valeur normale
<address> Adresse du contact <mark> Mise en valeur visuelle
<pre> Affichage formaté (pour les codes <progress> Barre de progression
sources) 5
FR
Balises de listes
<ul> liste non ordonnée (liste à puces)
<li> Element1 de la liste</li>
<li> Element2 de la liste </li>
<li> Element3 de la liste </li> <dl> liste de définitions
</ul> <dt> Terme à définir</dt>
<dd> définition 1 du terme</dd>
<ol> liste ordonnée (liste à numéros) <dd> définition 2 du terme</dd>
<li> Element1 de la liste </li> </dl> dresse de contact
<li> Element2 de la liste </li>
<li> Element3 de la liste </li>
</ol>
6
Balises de tableau FR
<table>
<caption> titre du tableau</caption>
<tr> ligne
<th> titre première colonne</th>
<th> titre deuxième colonne</th>
</tr>
<tr> ligne
<td> contenu de la première colonne</td>
<td> contenu de la deuxième colonne</td>
</tr>
….
</table> 7
Balises de tableau FR
8
FR
Balises médias
<img /> Image
<figure> Figure (image, code, etc.)
<figcaption> Description de la figure
<audio> Son
<video> Vidéo
<source> Format source pour les balises <audio> et <video>
Exemple :
<video src= os.mp4 controls=controls width= 300 height=
400 >
</video>
9
FR
Balises médias
10
FR
Balises de liens
Liens externes :
Lien vers un site :
<a href=adresse de la page à visiter> Texte du lien vers le site</a>
Lien vers un fichier téléchargeable :
<a href=nom_fichier.extension> Texte du lien vers le fichier</a>
Lien vers une adresse électronique :
<a href=mailto : user@[Link]> Contactez-nous</a>
11
FR
Balises de liens
Liens interne :
Lien vers un endroit dans la même page (Exemple : vers le titre de la page) :
<a href=#ancre> Cliquer ici</a>
<h1
id=ancre id=ancre>…………………………..</h1>
Pour identifier la balise
12
Image mappée FR
Pour permettre à l'utilisateur de cliquer à l'intérieur d'une image afin
d'avoir une réponse de la page en rapport avec l'objet désigné dans l'image,
on utilise une carte d'image.
13
FR
Image mappée
<img src=fichier_image.ext usemap= #nom_map>
<map name= nom_map>
<area shape= type_cadrage coords= cordonnées href=
page_à_ouvrir>
…
</map>
Zone
Zone de Zone de
l’image
de
l’image Par défaut
l’image
default
circle poly
rect
14
FR
Image mappée
<area shape =circle coords= 150, 50, 20 …>
Rayon
FR
Image mappée
<area shape =rect coords= 20, 50, 250, 300 …>
Balises d’un formulaire FR
Les formulaires permettent d’interagir avec l’utilisateur en lui proposant d’entrer des
informations.
En HTML : uniquement l’interface de formulaire
Un formulaire HTML est placé à l’intérieur d’une balise <form> … </form>
<form> : formulaire
<fieldset> : groupe de champ
<legend> : Titre d’un groupe de champ
<label> : libellé d’un champ
<textarea> : zone de saisie multiligne
<select> : liste déroulante
<optgroup> : groupe d’éléments d’une liste déroulante
<option> : élément d’une liste déroulante
<input/> : champ du formulaire
Balises <input/> FR
text
<input type= ? >
password
radio
checkbox
date
number
tel
time
email
range
button
reset
submit
Balises <select> FR
<select>
<option> choix 1 </option>
<option> choix 2 </option>
<option> choix 3 </option>
</select>
<select>
<optgroup label= Groupe 1>
<option> Choix 1 grpe 1 </option>
<option> Choix 2 grpe 1 </option>
</optgroup>
<optgroup label= Groupe 2 >
<option> Choix 1 grpe 2 </option>
<option> Choix 2 grpe 2 </option>
<option> Choix 3 grpe 2 </option>
</optgroup>
</select>