2 HTML

ROYAUME DU MAROC
‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail
ISMONTIC TANGER
MODULE 104: Sites web statiques
CRÉER UNE PAGE WEB EN HTML
ADDARRAZI ILHAM
2022-2023
Introduction
1. Un peu d’historique
Introduction
2. Les éditeurs:
Le langage Html est un langage qui permet de créer une page web . il est
l'abréviation de Hyper Text Markup Language .
Les éditeurs de texte sont des programmes simples et ciblés qui fournissent
une interface propre pour travailler avec le HTML:
Notepad++
Visual Studio Code
WebExpert
FrontPage
Dreamweaver
WebCreator
Sublime Text
La notion de balise
1. Définition:
La description d’un document HTML passe par l’utilisation de balises (Tags
en anglais).
Ces balises doivent être utilisées d'une certaine façon pour décrire
correctement la structure du document. Les balises indiquent au navigateur
comment afficher le document, certaines balises permettent d'intégrer
différents médias comme des images, des vidéos ou des musiques parmi le
texte de la page.
Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur
visite une page web, son navigateur analyse (ou parse en anglais) le document
et l'interprète afin d'afficher la page web correctement.
La notion de balise
2. Syntaxe:
Les balises HTML respectent une syntaxe simple et stricte
Un chevron ouvrant (<)
Le nom de la balise
Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un
signe égal (=) et d'une valeur entre doubles quotes ("").
Un chevron fermant (>)
< nom de balise [attribut=valeur]> [Contenu]</nom de balise>
Exemple:
La notion de balise
3. les catégories de balises :
Balises de structure d’un document
Balises de formatage
Balises de listes
Balises d’hyperliens
Balises d’objets multimédia
Balises de tableaux
Balises de formulaire
Balises génériques
1. Le DOCTYPE
L'inclusion du DOCTYPE dans un
document HTML assure que le navigateur
interprétera la version HTML ainsi déclarée:
En HTML 4 : <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht
ml1-transitional.dtd">
En HTML5 le doctype à déclarer est :
<!DOCTYPE html>.
2. L'élément racine <html>
Représente la racine d'un document HTML.
Tout autre élément du document doit être un
descendant de cet élément.
<! doctype html>

<html>
….
Contenu de la page
….
</html>
a. l'élément de métadonnées (en-tête) du
document <head>
L'élément HTML <head> fournit des
informations générales (métadonnées) sur le
document, incluant son titre et des liens.
Les éléments qui peuvent être utilisés à
l'intérieur de l'élément <head>:
<title> : l'élément de titre du document
L'élément <title> définit le titre du document
(qui est affiché dans la barre de titre du
navigateur ou dans l'onglet de la page). Cet
élément ne peut contenir que du texte, les
balises qu'il contiendrait seraient ignorées.
document <head>
<title> : l'élément de titre du document
Exemple:
<! Doctype html>

<html>
<head>
<title>Et voici le titre de ma page !</title>
</head>
</html>
document <head>
<meta> : l'élément de métadonnées du
document
La balise <meta> fournit des métadonnées
sur le document HTML. Les métadonnées
ne seront pas affichées sur la page, mais
seulement interprétables par les machines.
Les Meta éléments sont généralement
utilisés pour spécifier la description de la
page, les mots clés, l’auteur du document,
dernière modification ou mise à jour, et
autres métadonnées.
Attribut Valeur Description
charset character_set Spécifie le codage des caractères du document HTML

Valeurs les plus utilisées:
UTF-8 : Unicode
ISO-8859-1 : Latin alphabet
<meta charset="UTF-8">
content text Donne la valeur associée à l'attribut http-equiv ou name

<meta name="author" content="x y z">
<meta http-equiv="refresh" content="30">
http-equiv content-type Fournit une en-tête HTTP pour l'information / la valeur de l'attribut
default-style content
refresh <meta http-equiv="content-type" content="text/html; charset=UTF-
8">
<meta http-equiv="default-style" content=“feuille de style
préférée">
name application-name Specifies a name for the metadata

author <meta name="description" content="Cours web">
description <meta name="keywords" content="HTML,CSS,JavaScript">
generator <meta name="author" content="x y z">
keywords <meta name="viewport" content="width=device-width,
viewport initial-scale=1.0">
a. l'élément de métadonnées (en-tête) du document <head>
Exemple1 :
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="description" content="cours HTML5">
<meta name="keywords" content="HTML 5,CSS 3,XML,JavaScript">
<meta name="author" content="x y z ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 5 –Exemple 1</title>
</head>
<body>

</body>
</html
b. <body> : l'élément pour le corps du document
L'élément HTML <body> représente le contenu
principal du document HTML. Il ne peut y avoir qu'un
élément <body> par document.
cette balise permet de délimiter la partie visible d'un
document et de définir quelques paramètres généraux
du document (essentiellement des couleurs). elle
possède les attributs suivants :
alink : La couleur du texte quand les liens
hypertextes sont sélectionnés.
background : L'URI d'une image à utiliser en tant
qu'arrière-plan.
bgcolor :Couleur d'arrière-plan pour le document.
link : La couleur du texte à utiliser pour les liens non
visités.
Vlink: La couleur de texte pour les liens hypertextes
visités.
text : La couleur à utiliser pour la police du texte
b. <body> : l'élément pour le corps du document
Exemple 2:
<!DOCTYPE html>
<html>
<head>
<title>HTML5- Exemple2</title>
</head>
<body bgcolor="black" text="white" >

Bonjour DEV
Le Technicien Spécialisé en Développement Digital est un professionnel
en charge du développement et de la maintenance des applications
informatiques
</body>
</html>
1. Mise en forme au niveau phrase :
gras <b>...</b> <strong>...</strong>
italique <i>...</i> <em>...</em>
souligné <u>...</u>
citation <cite></cite>
citation courte <q></q>
taille de caractère <font size=?>...</font> (de 1 a 7)
couleur de caractère <font color="#$$$$$$"></font>
a la ligne <br> aller à la ligne
commentaires 
centrage <center></center>
en-têtes <hn></hn> avec n=1 à 6
extrait de code source <code>à </code>
abréviation <abbr>à </abbr>
acronyme <acronym>à </acronym>
mettre en exposant <sup>à </sup>
mettre en indice <sub>à </sub>
plus gros <big>à </big>
plus petit <small>à </small>
: Exemple :
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="yellow" text="black" >

<h1>OFPPT</h1>
<h2>NTIC</h2>
<h3>Filiere TDI</h3>
<center><b><u>TDI </u></b></center>
<br><br>
<font size="4" color="red" >Le Technicien Spécialisé
en Développement Informatique </font> <b> TDI </b>
est un professionnel en charge du<i> développement </i>
et <u> de la maintenance des applications informatiques</u>.
</body>
</html>
: Résultat:
2. Mise en format niveau paragraphe :
• Aller à la ligne <br>
• Insérer un espace
• Commencer un nouveau paragraphe <p>
Ligne de séparation
• <HR> Trait horizontal (centré par défaut)
• <HR width="x%"> Largeur du trait en %
• <HR width=x> Largeur du trait en pixels
• <HR size=x> Hauteur du trait en pixels
• <HR align=halign> Trait centré (par défaut), aligné à gauche ou à droite
• <HR noshade> Trait sans effet d'ombrage
: Exemple :
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="yellow" text="black" >

<h1>OFPPT</h1>
<h2>NTIC</h2>
<h3>Filiere TDI</h3>
<center><b><u>TDI </u></b></center>
<br><br>
<p align="left">
<font size="4" color="red" >Le Technicien Spécialisé en Développement Informatique </font> <b> TDI </b>est un professionnel
en charge du<i> développement </i> et <u> de la maintenance des applications informatiques</u>
</p>
<hr>
<p align="right">
</p>
<p align="center">
</p>
</body>
</html>
: Résultat
3. Exercice d’application:
Ecrivez le code de la page suivante :
Les indices:
La police utilisée est "verdana",
Le code de la couleur utilisée
pour le titre est #003569
Le code de la couleur utilisée
pour le texte du corps de la
page est :#444444 (Il s'agit d'un
gris foncé).
Balises de listes
Il est possible en HTML de définir différents types de listes :
des listes non ordonnées (balise UL) ;
des listes ordonnées (balise OL) ;
des listes de définition (balise DL).
Les éléments des listes (balise LI)
Il est naturellement possible d'imbriquer plusieurs listes, qu'elles soient de même type ou
pas.
Balises de listes
2. Les listes non ordonnées (balise UL)
L’élément UL représente une liste non ordonnée, c’est-à-dire une liste
composée d’éléments sans hiérarchie ni ordre logique apparent ou qu’on
souhaite faire ressortir.
Chaque élément d’une liste non ordonnée est représenté par un élément HTML
LI.
Ces éléments de liste possèdent des marqueurs qui prennent la forme de puces
par défaut
L’attribut type : permet de préciser le type de numérotation utilisée pour
présenter la liste:
type = "disc" : petit cercle rempli
type = "circle" : petit cercle vide
type = "square" : petit carré
Balises de listes
Exemple : <li> 2<sup>éme</sup>trimestre
<ul type="disc">
<!DOCTYPE html> <li>Mars</li>
<html> <li>Avril</li>
<head> </ul>
<title>HTML5- Exemple2</title> </li>
</head> </ul>
<body> </li>
<h2>Année 2021/2022</h2> <li> 2<sup>éme</sup> semestre
<uL> <ul type="circle" >
<li> <li> 3<sup>éme</sup>trimestre</li>
1<sup>er</sup> semestre <li> 4<sup>éme</sup>trimestre</li>
<ul type="circle" >
<li> 1<sup>er</sup>trimestre </ul>
<ul type="square"> </li>
<li>Janvier</li> </uL>
<li>Fevrier</li> </body>
</ul> </html>
</li>
Balises de listes
Résultat:
Balises de listes
2. Les listes ordonnées (balise OL)
élément HTML <ol> représente une liste ordonnée. Les éléments d'une telle
liste sont généralement affichés avec un indicateur ordinal pouvant prendre la
forme de nombres, de lettres, de chiffres romains ou de points.
Chaque élément d’une liste ordonnée est représenté par un élément HTML LI.
L’attribut type : permet de préciser le type de numérotation utilisée pour
présenter la liste:
type = "1" : numérotation à l'aide de chiffres arabes (style par défaut)
type = "a" : numérotation à l'aide de lettres minuscules.
type = "A" : numérotation à l'aide de lettres majuscules.
type = "i" : numérotation à l'aide de chiffres romains en minuscules.
type = "I" : numérotation à l'aide de chiffres romains en majuscules.
Balises de listes
Exemple :
Balises de listes
Résultat:
Balises de listes
Ecrivez le code de la page suivante :

Balises de listes
4. Les listes de définition (balise DL).
L'élément HTML <DL> représente une liste de descriptions sous la forme d'une
liste de paires associant des termes (fournis par des éléments <DT>) et leurs
descriptions ou définitions (fournies par des éléments <DD>).
On utilisera par exemple cet élément pour implémenter un glossaire.
.
Balises de listes
Exemple :
Balises de listes
Résultat:
Les liens hypertextes sont définis à l'aide de l'élément <A>. Le texte de cet
élément constitue la zone sur laquelle cliquer pour exécuter un lien :
<A HREF="adresse de destination">Nom du lien</A>
L'adresse de destination peut être une URL ou bien un nom de fichier situé sur
le même serveur. Dans ces deux cas on parle de lien externe. Mais un lien peut
aussi diriger vers un marqueur, ou une étiquette, situé dans la même page. Il
s'agit alors d'un lien interne.
Les liens pointent souvent vers d'autres documents HTML mais ce n'est pas
obligatoire. On peut diriger un lien vers n'importe quel type de document. Le
navigateur lance alors le "visualiseur" adapté ou bien propose d'enregistrer le
fichier sur le disque local.
.
1. lien externe.
Exemple :
1. lien externe.
Résultat:
2. lien interne
L'attribut name permet de nommer un endroit du document pour y faire
référence ensuite. L'utilisation de la balise A avec cet attribut n'a pas d'effet
visible sur le document ; en particulier, il n'y a pas de lien hypertexte produit.
En tout début de page, on peut par exemple placer le code suivant.
<p id="haut"><h1>titre de la page</h1></p>
Cela permettra dans la suite de faire des liens vers ce haut de page.
Pour faire référence à une ancre interne à la page, on donne dans HREF le nom
attribué à l'ancre avec l'attribut NAME précédé du symbole #.
Retour en<a href="#haut">haut de la page</a>.
Retour en haut de la page
2. lien interne.
Exemple :
3. L'attribut target
Cet attribut précise l'endroit où devra apparaître la page désignée par href.
target = "_blank"
le lien s'ouvre en utilisant une nouvelle fenêtre ; la page d'origine (celle
contenant le lien) reste donc visible.
target = "_top"
pertinent seulement lorsque l'on se trouve sur une page contenant des
frames ; le lien s'ouvre alors en utilisant l'ensemble de la fenêtre.
target = "_self"
 le contexte de navigation actuel. (Par défaut)
Balises d’insertion d’images
Les images peuvent être des éléments importants du document. Une page web
contenant des images est immédiatement plus attractives que vide de toute
illustration.
Seuls les formats d'images suivants sont acceptés en standard dans les
spécifications du W3C :
Les images JPEG (.JPG)
Les images PNG
Les images GIF
La balise servant à placer une image est img, suivie de l'attribut src, sous la
forme :
<img src="chemin/nomImage" />
La balise image possède de nombreux attributs :
alt="****" (texte alternatif, pour les browsers n'ayant pas l'option "image"
activée)
width=? height=? (dimensions : hauteur et largeur (en pixels))
border=? (bordure en pixels)
align : top, middle, bottom, left, right
Exemple :
Résultat:
4. Image réactives
Chaque image insérée dans une page HTML peut être rendue cliquable, c’est à
dire qu’elles deviennent un lien vers une page web.
La limitation de cette technique réside dans le fait que l’on ne peut attribuer
qu’une seule adresse URL par image, or il est parfois nécessaire qu’une seule et
même image soit le support de plusieurs liens différents.
La balise <map> sert à définir des zones de liens appelées zones réactives sur
une image. Son utilisation est couplée à la balise <img />.
4. Image réactives
Insertion de l’image
On insert tout d’abord l’image dans la page HTML, avec tous les attributs
nécessaires :
<img src="image.jpg" alt="commentaire" usemap="#nom-de-la-carte"
width="1000" height="400" name="nom-de-l-image" />
Création de la carte
Il faut ensuite créer la carte qui va contenir les différentes zones réactives. Cette
carte est créée à l’aide de la balise <map>. Cette balise possède l’attribut
name=nom-de-la-carte, où nom-de-la-carte correspond au usemap de l’image.
4. Image réactives
Le conteneur <map> contient autant de balises <area /> qu’il y a de zones
réactives.
Syntaxe :
<map name="nom-de-la-carte">
<area [...] />
<area [...] />
<area [...] />
</map>
4. Image réactives
Zones réactives:
A chaque zone réactive est associée une balise <area /> dont les attributs sont:
name : le nom de la zone,
shape : la forme géométrique (cercle, rectangle ou polygone),
coords : les coordonnées de la zone, séparées par des virgules,
href : lien hypertexte de la zone,
alt : le texte alternatif.

4. Image réactives
Zone rectangulaire: Une zone rectangulaire est définie par la balise <area
shape="rect" />. L’attribut coords prend pour valeur les coordonnées des coins
supérieur gauche et inférieur droit, séparées par des virgule
<area shape="rect" coords="x1,y1,x2,y2" href="rectangle.html" />

4. Image réactives
Une zone circulaire : est définie par la balise <area shape="circle" />. L’attribut
coords prend pour valeur la liste des coordonnées du centre du cercle et son
rayon.
<area shape="circle" coords="x1,y1,r" href="cercle.html" />

4. Image réactives
Une zone polygonale est définie par la balise <area shape="poly" />. L’attribut
coords prend pour valeur la liste des coordonnées de chacun des points (avec un
« retour » sur le point de départ).
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x1,y1“

href="polygone.html" />
Exemple :
Résultat:
4. Image réactives
Exercice d’application En cliquant sur la tasse du café, on obtient
Soit l’image suivante : l’image suivante :
A savoir que les coordonnés de la tasse

sont : 337,300,44
Balises d’insertion des tableaux
Un tableau en HTML représente un ensemble organisé de donnée.
Chaque cellule peut contenir du texte, des listes, des images, des liens
hypertextes, des éléments de formulaire...
Un tableau est un ensemble de lignes et de colonnes. L’intersection entre une
ligne et une colonne est une cellule de tableau.
Un tableau est décrit par différents éléments :
L'élément TABLE correspond au tableau lui-même.

L'élément TR est utilisé pour définir chacune des lignes du tableau.
L'élément TD est utilisé pour chaque cellule.
Les tableaux HTML vont être créés ligne par ligne.

A chaque fois que nous voudrons ajouter une ligne dans notre tableau, nous
utiliserons un nouvel élément tr.
Il est possible d’ajouter autant d’éléments td au sein de chacune de lignes.
Chaque élément td va représenter une cellule dans le tableau.
Les balises TH permet d’ajouter une cellule d’entête.
Exemple :
Resulat
Les attributs de la balise <table>
Cette balise permet de délimiter un tableau et de définir quelques unes de ses caractéristiques:
attribut bgcolor : pour définir la couleur de fond du tableau
attribut border : pour spécifier l'épaisseur du trait utilisé pour tracer les bords du
tableau.
attribut bordercolor : pour indiquer la couleur du bord du tableau.
attribut cellspacing : pour définir l'espacement entre les cases du tableau.
attribut cellspadding : pour définir l'espacement entre les bords du tableau et le
contenu des cases.
attribut width : pour fixer la largeur du tableau, en pourcentage de la largeur de la page
ou en pixels.
En plus :
on peut donner un "titre" au tableau entre <caption> … </caption>, en dehors des définitions
de lignes ou de cellules.
on peut ranger les lignes entre <thead> …. </thead>pour indiquer qu'elles font partie de l'en-
tête.
on peut ranger les lignes entre <tfoot> … </tfoot>pour indiquer qu'elles font partie du pied du
tableau
on peut ranger les lignes entre <tbody>… </tbody>pour indiquer qu'elles font partie des
données
Exemple :
Resultat:
Exercice d’application:
Donner le document html qui permet d'obtenir:
Les deux attributs colspan et rowspan permettent respectivement de fusionner
horizontalement et verticalement les cellules d'un tableau:
L’attribut colspan, qui permet de faire une fusion de cellule sur une même
rangée (horizontale donc). En ajoutant un attribut colspan qui prend pour
valeur un nombre entier (supérieur à 0), vous pouvez indiquer la largeur en
nombre de cellule que prendra la balise <td>.
attribut rowspan : qui permet de faire une fusion de cellule sur une même ligne
(verticale donc). indiquer sur combien de lignes d'étend la case.

Exemple :
Resultat:
Exercices d’application
Exercice 1
Ecrivez le code pour obtenir les tables suivantes :
Exercice d’application
Exercice 2:
Ecrivez le code pour obtenir les tables suivantes (imaginez un contenu réel):
Balises multimédia
1. Balise audio:
L'élément HTML <audio> est utilisé afin d'intégrer un contenu sonore dans un
document. Il peut contenir une ou plusieurs sources audio représentées avec
l'attribut src ou l'élément <source> : le navigateur choisira celle qui convient le
mieux. Il peut également être la destination de médias diffusés en continu, en
utilisant un MediaStream.
Formats : audio/mpeg, audio/ogg, audio/wav
Ses attributs:
Balises multimédia
1. Balise audio:
Exemple:
Resultat:
Balises multimédia
2. Balise video:
L'élément <video> vous permet d'intégrer de la vidéo très facilement.
Actuellement, 3 formats vidéo pris en charge pour l'élément <video>: MP4,
WebM, et Ogg
Balises multimédia
2. Balise video:
Exemple:
Resultat:
Balises multimédia
3. Balise Iframe:
La balise iframe était à l'origine présente pour permettre d'intégrer un document

dans un autre.
Avec la balise iframe il est possible d'incorporer la page B dans le contenu de la

page A.
Généralement, elle est utilisée pour intégrer une ressource type : GoogleMap,
Animation, etc.
Balises multimédia
3. Balise Iframe:
Exemple 1 :
Balises multimédia
3. Balise Iframe:
Exemple 1 :
Balises multimédia
3. Balise Iframe:
Resultat:
Balises multimédia
4. Balise Object:
L'élément HTML <object> représente une ressource externe qui peut être
interprétée comme une image, un contexte de navigation imbriqué ou une
ressource à traiter comme un plugin.
Exemple 1 :
<object data="multi/test.pdf" type="application/pdf"
width="100%" height="360">
alt:<a href="multi/test.pdf">pdf</a>
</object>
Resultat:
>
Balises de structuration
1. Balise <div>
La balise <div> définit une division ou une section dans un document HTML.
La balise <div> est un conteneur qui peut inclure tous les tags html
(paragraphes, tables ..., et également d'autres divisions). Elle sert à structurer le
document en plusieurs sections.
2. Balise <span>
La balise <span> ne produit aucun effet visuel mais sert à appliquer un effet de
style CCS aux éléments qu’elle contient (un texte par exemple)
Balises sémantiques
Les éléments sémantiques sont une des innovations significatives en HTML5.
Avant leur apparition, toutes les balises des pages Web étaient créées à l'aide des
éléments <div>, auxquels étaient attribués des identificateurs (id) ou des classes
(class).
Pour placer des panneaux latéraux, des en-têtes, des pieds de page, des éléments
de navigation et d'autres blocs de construction, des blocs div avec les valeurs
appropriées.
HTML5 introduit de nouveaux éléments sémantiques pour la structuration, le
regroupement du contenu et le balisage du contenu du texte. Ils décrivent
clairement quel contenu ils ont (il y avait <div id = "footer">, devenu <footer>).
1. Élément <header>
L’élément <header> forme le bloc d’en-tête ou le “chapeau” du document. Il est
utilisé en tant qu’un conteneur pour regrouper les éléments de saisie et de
navigation (logo, menu de navigation, formulaire de recherche, etc.).
2. Élément <nav>
L’élément <nav> forme le bloc principal des liens de navigation. Notez que ce
ne sont pas tous les liens du document HTML, qui peuvent être placés dans
l’élément <nav>, il ne peut inclure que de gros blocs de navigation.
3. Élément <article>
L’élément <article> définit un bloc indépendant, dans lequel les enregistrements
sont regroupés (articles, publications des blogs, commentaires, etc.)
4. Élément <section>
L’élément <section> est utilisé pour regrouper le contenu thématique (table des
matières, programme, sections etc.)\
5. Élément <aside>
L’élément <aside> définit une section contenant des informations
complémentaires au département principal. Cette information est facultative et
si vous la supprimez, le contenu principal ne sera pas affecté. Ces informations
peuvent être des commentaires, des informations de référence, des listes de
termes, une collection de liens etc.
6. Élément <footer>
L'élément <footer> forme le pied de la section ou de l'élément racine dans
lequel il se trouve. En règle générale, il contient des informations sur les droits
d'auteur, les coordonnées, les liens de navigation, etc
Insérer les balises sémantiques de disposition dans les cellules du tableau comme
cité ci-dessous:
7. Exercice d’application: (Travail a faire a la maison)

Insérer les balises sémantiques de disposition dans les cellules du tableau comme
cité ci-dessous:
7. Autres balises
La balise <figure> spécifie contenu autonome, comme illustrations, schémas,
photos, listes de codes, etc Alors que le contenu de l'élément <figure> est liée
au flux principal, la position est indépendante du flux principal, et s'il a été
retiré, il ne devrait pas affecter le flux du document.
La balise <figcaption> définit une légende pour un élément <figure>
Exemple:
7. Autre balises
La balise <time> définit soit un temps (horloge de 24 heures), ou une date dans
le calendrier grégorien, éventuellement avec un temps et un décalage de fuseau
horaire.
Cet élément peut être utilisé comme un moyen d'encoder les dates et heures de
façon lisible à la machine de sorte que, par exemple, les agents utilisateurs
peuvent offrir à ajouter des rappels d'anniversaire ou événements prévus au
calendrier de l'utilisateur, et les moteurs de recherche peuvent produire des
résultats de recherche plus intelligents.
Exemple:
7. Autre balises
La balise <mark> définit texte marqué.
Utilisez la balise <mark> si vous voulez mettre en évidence une partie de votre
texte.
Exemple:
Résultat:
7. Autre balises
La balise <details> spécifie des détails supplémentaires, que l'utilisateur peut
afficher ou masquer à la demande. La balise <details> peut être utilisé pour
créer un widget de interactif que l'utilisateur peut ouvrir et fermer. Tout type de
contenu peut être mis à l'intérieur de la balise <details>.
Le contenu d'un élément <details> ne doit pas être visible sauf si l'attribut
ouvert est défini.
La balise <summary> définit une en-tête visible de l'élément <details>. Le titre
peut être cliqué pour voir / cacher les détails.
Exemple:
Les formulaires
Un formulaire HTML permet de rendre la page Web plus interactive en la
rendant capable de dialoguer avec l'internaute à travers des champs de saisie et
boutons.
Un formulaire permet à l'internaute de saisir du texte ou de valider un choix ou
encore de sélectionner une entrée.
Ces informations seront ensuite (dans la plupart des cas) envoyées au serveur
pour les traiter.
C'est très utile surtout quand il s'agit d'une page Web dynamique.
Les formulaires
1. Balise <form>
La balise <form> délimite les champs du formulaire (zones de texte,
boutons...). Elle peut avoir plusieurs attributs dont voici les plus fréquents:
L'attribut name: permet d'identifier le formulaire par un nom. On peut
mettre n'importe quel nom (à conditions qu'il ne contienne que les
caractères conventionnels comme les lettres et les chiffres). Le nom du
formulaire est unique. En effet, nous pouvons déclarer plusieurs formulaires
dans la même page, pour les distinguer les uns des autres il suffit de leur
donner des noms différents.
L'attribut method: permet de spécifier la méthode à utiliser pour envoyer le
formulaire au serveur. En effet, l'objectif d'un formulaire c'est de transférer
les données saisies par le client au serveur (on dit généralement poster ou
soumettre le formulaire). En HTML, il existe deux méthodes pour envoyer
un formulaire: GET et POST:
Les formulaires
1. Balise <form>
L'attribut method:
 La méthode GET (method="get") est la valeur par défaut si on ne précise
aucune valeur pour l'attribut method. Cette méthode permet d'envoyer les
données du formulaires à travers l'URL en utilisant les symboles ? pour
préciser la suite de données et & pour séparer les données entre elles.
 La méthode POST (method="post") permet d'envoyer les données du
formulaire au serveur à travers une entête. Pour simplifier, on va dire que
les données et la page ne font qu'un. Les informations ne seront donc pas
visibles sur l'URL. La méthode POST permet aussi de poster un volume
de données plus important que celui transmis par GET.
Les formulaires
1. Balise <form>
L'attribut action: Quand un formulaire est rempli par l'internaute, il est
posté au serveur pour le traitement. Il faut donc désigner la page qui se
chargera du traitement des données. Cette page est spécifiée dans l'attribut
action.
Si l'attribut action est vide ou n'est pas mentionné, alors c'est la page
courante (celle qui contient le formulaire) qui sera la page action.
Les formulaires
2. Balise <input>
La zone de texte est le champ de formulaire le plus célèbre. Il permet d'écrire un
texte sur une seule ligne (comme le nom ou le login par exemple). Pour créer
une zone de texte on fait appel à la balise <input>. Il s'agit d'une balise
orpheline (pas de </input>).
Notez que la plupart des champs de formulaire existants sont déclarés aussi à
l'aide de la même balise <input>. Pour distinguer une zone de texte d'un bouton
par exemple, on fait appel à l'attribut type. Détaillons les attributs les plus
utilisées pour les inputs
Attribut type: L'attribut type permet de définir le type de champ à
intégrer. Voici les valeurs à mettre pour cet attribut et qui permettent d'avoir
les champs les plus fréquents:
 text: Permet d'avoir une zone de texte normale (adapté pour les noms,
emails, login...)
 password: Permet d'avoir une zone de mot de passe où les caractères
sont masqués.
Les formulaires
2. Balise <input>
 radio: Pour créer un bouton radio. Il s'agit d'un petit cercle qu'on peut
cocher et qui permet de faire un choix unique. Le fait de cocher un autre
bouton radio décoche le premier.
 checkbox: Permet de créer une case à cocher. C'est un petit carré qu'on
peut cocher ou décocher. Il est destiné à faire des choix multiples.
 file: Permet de créer le champ de chargement de fichier (comme une
pièce jointe d'un email).
 hidden: Pour créer un champ caché. C'est comme une zone de texte mais
qui n'est pas visible sur le navigateur. Il sert à stocker provisoirement des
données jusqu'à la phase de traitement.
Les formulaires
2. Balise <input>
 button: Permet de créer un bouton simple. A la base, ce bouton ne fait
aucune opération. Il faut donc le programmer.
 reset: Permet de créer un bouton d'annulation. Si le formulaire contient
des champs qu'on a déjà saisi, ce bouton permet de tout initialiser.
 submit: C'est le bouton d'envoi. C'est lui qui permet de poster le
formulaire vers la page définie dans l'attribut action de la balise <form>.
Les formulaires
2. Balise <input>
Attribut name : permet de donner un nom au champ de formulaire. Le nom
sert d'identifiant du champ et doit être unique.
Attribut value : sert à définir la valeur par défaut d'un champ. S'il s'agit
d'une zone de texte, le fait de déclarer l'attribut value force le navigateur à
initialiser ce champ avec le texte faisant office de valeur de l'attribut. Si le
champs est un bouton, alors le texte de l'attribut value constitue l'étiquette
(ou label). C'est le texte visible sur le bouton. Pour les boutons radio ou les
cases à cocher, le texte de l'attribut value n'est pas visible sur le navigateur
mais il est très utile (si on fait appel à des programmes comme Javascript).
Attribut size : contient un entier comme valeur. Il définit la largeur du
champ en caractères. Par défaut, une zone de texte mesure 20 caractères
(cela veut dire qu'on peut voir jusqu'à 20 caractères à la fois même si le
texte est plus grand).
Les formulaires
2. Balise <input>
Attribut checked: est un attribut booléen. Explicitement il est déclaré
comme ceci: checked="true", mais il suffit de déclarer checked tout seul
pour que le navigateur sache qu'il est activé. Cet attribut s'applique
uniquement sur les boutons radio (type="radio") et les cases à cocher
(type="checkbox"). S'il est déclaré alors le bouton est automatiquement
coché au chargement de la page.
Les formulaires
3. Balise <select>
La balise <select> permet de déclarer une liste de sélection (ou liste déroulante).
Elle dispose également l’attribut name. Pour remplir cette liste avec les valeurs
(appelées options) on doit déclarer une autre balise à l'intérieur, c'est la balise
<option>.
Dans la balise <option> on déclare le mot à afficher (en tant qu'élément de la
liste).
La balise <option> dispose d'un attribut booléen du nom de selected. Si cet
attribut est déclaré, c'est l'option qui le contient qui sera automatiquement
sélectionnée au chargement de la page.
On peut appliquer un cadre qui entoure notre formulaire grâce à la balise

<fieldset> et une légende en guise de titre avec la balise <legend>

2 HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

2 HTML

Transféré par

Droits d'auteur :

Formats disponibles

ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

MODULE 104: Sites web statiques

CRÉER UNE PAGE WEB EN HTML

<! doctype html>

<! Doctype html>

charset character_set Spécifie le codage des caractères du document HTML

content text Donne la valeur associée à l'attribut http-equiv ou name

name application-name Specifies a name for the metadata

<body bgcolor="black" text="white" >

<body bgcolor="yellow" text="black" >

<body bgcolor="yellow" text="black" >

Ecrivez le code de la page suivante :

name : le nom de la zone,

shape : la forme géométrique (cercle, rectangle ou polygone),

coords : les coordonnées de la zone, séparées par des virgules,

href : lien hypertexte de la zone,

alt : le texte alternatif.

<area shape="rect" coords="x1,y1,x2,y2" href="rectangle.html" />

<area shape="circle" coords="x1,y1,r" href="cercle.html" />

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x1,y1“

A savoir que les coordonnés de la tasse

L'élément TABLE correspond au tableau lui-même.

Les tableaux HTML vont être créés ligne par ligne.

rangée (horizontale donc). En ajoutant un attribut colspan qui prend pour

valeur un nombre entier (supérieur à 0), vous pouvez indiquer la largeur en

nombre de cellule que prendra la balise <td>.

(verticale donc). indiquer sur combien de lignes d'étend la case.

La balise iframe était à l'origine présente pour permettre d'intégrer un document

Avec la balise iframe il est possible d'incorporer la page B dans le contenu de la

7. Exercice d’application: (Travail a faire a la maison)

rendant capable de dialoguer avec l'internaute à travers des champs de saisie et

Un formulaire permet à l'internaute de saisir du texte ou de valider un choix ou

encore de sélectionner une entrée.

pour les traiter.

On peut appliquer un cadre qui entoure notre formulaire grâce à la balise

Vous aimerez peut-être aussi