Licence : IA

Module :Programmation Web2

Année Universitaire: 2025/2026

Pr. Mohamed Rida FETHI

2
 HTML

Page web affichée par un navigateur graphique

3
 HTML

HTML, l'origine

❑ HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de Tim Berners
Lee, " inventeur " du Web.

❑ HTML est basé sur SGML (Structured Markup Language), qui est une vieille norme utilisée
pour la description de document. Elle est conçue pour les grosses documentations
techniques.

❑ HTML est une instance de SGML.

4
 HTML

Définition de HTML

❑ HTML est l'abréviation de HyperText Markup Language, qui se traduit en français par
Langage de balisage hypertexte.

❑ Langage de balisage : Utilise des balises pour structurer et organiser le contenu.

❑ Hypertexte : Permet de relier différentes pages ou ressources via des liens interactifs.

❑ HTML est le langage universel utilisé pour communiquer sur le Web.

❑ HTML est un langage de balisage utilisé pour structurer le contenu d'une page web.

5
 Licence : IA
Module : Programmation Web2
Année Universitaire: 2025/2026

Pr. Mohamed Rida FETHI

 HTML

Objectif de HTML
HTML est conçu pour structurer et présenter du contenu sur le Web. Son objectif principal est de
fournir une manière standardisée de créer des pages Web accessibles à tous les utilisateurs,
indépendamment des plateformes ou des navigateurs. Voici ses objectifs détaillés

1. Structurer le contenu
HTML permet d'organiser et de structurer le contenu d'une page Web

2. Créer des liens hypertextes

HTML permet de connecter des pages et des ressources via des liens hypertextes

3. Intégrer des contenus multimédias

HTML prend en charge l'incorporation de divers types de contenus multimédias

7
 HTML

Evolution html
L'évolution de HTML a été marquée par plusieurs versions importantes, reflétant les besoins
croissants du Web en termes de fonctionnalités, d'accessibilité, et de compatibilité. Voici un
résumé des étapes principales :

1. HTML 1.0 (1991)

•Création : Par Tim Berners-Lee.
•Caractéristiques :
• Version très basique, utilisée pour structurer du texte simple.
• Prise en charge des titres, paragraphes, liens hypertextes, et listes.
•Limites : Pas de support pour les tableaux, images ou mises en page avancées

8
 HTML

Evolution html
2. HTML 2.0 (1995)
•Standardisation : Publié par l'IETF (Internet Engineering Task Force).
•Caractéristiques :
•Ajout de tableaux pour organiser les données.
•Support des formulaires pour collecter des informations (champs de texte, boutons, etc.).
•Premières balises pour la gestion des images (<img>).
•Objectif : Étendre les capacités du Web tout en restant simple.

3. HTML 3.2 (1997)

•Adoption par le W3C : Organisation en charge de la standardisation.
•Caractéristiques :
•Prise en charge des feuilles de style CSS pour la mise en page.
•Ajout des balises <font> et <center> pour personnaliser l'apparence.
•Meilleure gestion des tableaux et des scripts.

9
 HTML

Evolution html

4. HTML 4.01 (1999)

•Version majeure : Considérée comme une étape clé du Web moderne.
•Caractéristiques :
•Support des cadres (frames) et des scripts JavaScript.
•Compatibilité avec les feuilles de style CSS.
•Améliorations pour l'accessibilité (balises <abbr>, <acronym>, etc.).

5. XHTML 1.0 (2000)

•Transition vers XML : XHTML est une version stricte de HTML basée sur XML.
•Caractéristiques :
• Syntaxe plus rigoureuse (les balises doivent être correctement fermées).
• Meilleure portabilité et compatibilité avec les appareils mobiles.

10
 HTML

Evolution html

6. HTML5 (2014 - Actuel)

•Version moderne : Développée par le W3C.
•Caractéristiques :
•Support des contenus multimédias (balises <audio> et <video>).
•Nouvelles API pour les applications Web (géolocalisation, stockage local, etc.).
•Balises sémantiques (<article>, <section>, <header>, <footer>) pour mieux structurer le contenu.
•Compatibilité avec les appareils mobiles (responsive design).

11
 HTML

La page HTML (source)

❑ Une page HTML est un fichier texte, enrichi d'un certain nombre de codes ou commandes,
appelés balises.
❑ Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères
"<" et ">". Exemple : <BALISE>.
❑ Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même
nom, mais précédée du caractère "/".

❑ Un fichier contenant du code source HTML se caractérise par l’extension .html.

12
 HTML

Structure générale d'une page HTML

<HTML>
<HEAD>
<TITLE> Titre du document</TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

13
 HTML

La page HTML (source)

<html>
<head>
<title>developpement web</title>
</head>
<body>
<h1>Bienvenue au cours Developpement Web</h1>
<img src="[Link]"/>
<p>
Ce cours a pour objectif de dresser un tableau complet de l'architecture
du <a href="[Link] et des technologies concernées
dans la construction d'un site.
</p>
</body>
</html> 14
 HTML

La page HTML (vue comme un arbre)

15
 HTML

Structure d’un document

Entre les deux balises<html></html>, on définit deux zones :
❑ l'en-tête, spécifié par les commandes:
<HEAD>

…..

</HEAD>

❑ Le corps, délimité par: <BODY> et </BODY>.

<BODY>

……

</BODY>

16
 HTML

Structure d’un document

1. L’en-tête
❑ On ne met généralement qu'une seule information, le Titre du document qui sera affiché en
haut de la fenêtre du navigateur.

❑ Le Titre est indiqué entre les balises <TITLE> et </TITLE>

Exemple :
<TITLE>developpement web</TITLE>.

17
 HTML

Structure d’un document

2. Le corps

❑ On met tout le document à afficher (texte, définition des images etc.).

Remarque:
Signalons l'existence d'une balise de commentaires, qui peut être utilisée partout
dans les documents HTML, définie comme suit :
<!-- Ceci est un commentaire --!>.

18
 HTML

La balise
Une balise HTML est un élément de base utilisé pour structurer et organiser le contenu d'une page Web.
Elle est définie par des mots-clés entourés de chevrons (< >) et indique au navigateur comment afficher
le contenu qu'elle englobe ou modifie.

Par exemple :

•<p> : indique un paragraphe.

•<img> : permet d’afficher une image.
Chaque balise peut avoir une ouverture (<tag>) et une fermeture (</tag>), sauf certaines
balises autofermantes comme <img> ou <br>.

19
 HTML

La balise

❑ Pour décrire un fichier hypertexte, le langage HTML insère des

balises dans le texte du document :

<marqueur> ici votre texte </marqueur>

Début de mise en forme Fin de mise en forme

Synonymes: marqueur, élément, tag.

20
 HTML

La balise
En HTML, les balises sont classées en deux catégories principales : paire et orpheline.
Voici leur définition et leurs caractéristiques :

1. Balises paires:

Les balises paires ont :

•Une balise d'ouverture (exemple : <tag>).
•Une balise de fermeture correspondante (exemple : </tag>).

Exemple:

<titre>Ceci est un titre</titre>

21
 HTML

La balise

En HTML, les balises sont classées en deux catégories principales : paire et orpheline.
Voici leur définition et leurs caractéristiques :

2. Balises orphelines (autofermantes)

Les balises orphelines n'ont pas de balise de fermeture. Elles sont utilisées seules et
ne contiennent pas de contenu.
Elles se terminent par une barre oblique (/) en HTML5 pour indiquer qu'elles sont autofermantes.

Exemple:

<img src="[Link]" alt="Description de l'image" />

22
 HTML

La balise

• Langage HTML: ensemble de balises

• Elément HTML : balise ouvrante + contenu + balise fermante

Exemple: <h1>Bienvenue au cours Développement Web</h1>

23
 HTML

La balise

❑ Ces balises peuvent être insérées n'importe où dans le texte, entre 2 phrases, mots, lettres …

<gras>Le <italique> cours </italique> HTML</gras>

Le cours HTML

24
 HTML

La balise

❑ Il faut respecter une logique d'imbrication:

Bon:
<gras><italique> Le cours HTML </italique> </gras>

Mauvais:

<gras><italique> Le cours HTML</gras></italique>

25
 HTML

La balise

❑ Le langage HTML est sensible à la casse, toujours écrire en minuscules.

Bon:
<gras><italique> Le cours HTML </italique> </gras>

Mauvais:
<GRAS><italique> Le cours HTML </italique> </GRAS>

<Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras>

<GRAS><ITALIQUE> Le cours HTML </italique> </GRAS>

26
 HTML

Le langage HTML Balises obligatoires

<!DOCTYPE html> La déclaration <!DOCTYPE html> est utilisée en HTML pour indiquer

<html lang="fr"> au navigateur quelle version de HTML est utilisée dans le document.

<head>
<meta charset= " UTF-8" />
<title>Titre de la page</title>
</head>
<body>
<!--ceci est un commentaire du créateur de la page -->
Contenu du document (Texte, images, etc ..)
</body>
</html>

27
 HTML

Le langage HTML Balises obligatoires

<!DOCTYPE html>
Utilisée pour indiquer la langue principale du contenu
<html lang="fr"> d'une page Web
<head>
<meta "charset=UTF-8" />
<title>Titre de la page</title>
</head>
<body>
<!--ceci est un commentaire du créateur de la page -->
Contenu du document (Texte, images, etc ..)
</body>
</html>

28
 HTML

Le langage HTML Balises obligatoires

La balise <meta charset="UTF-8"> en HTML est

<!DOCTYPE html> utilisée pour spécifier l'encodage des caractères du
<html lang="fr"> document Web. Elle est généralement placée dans
l'élément <head> d'une page HTML
<head>
<meta "charset=UTF-8" />
<title>Titre de la page</title>
</head>
<body>
<!--ceci est un commentaire du créateur de la page -->
Contenu du document (Texte, images, etc ..)
</body>
</html>

29
 HTML

Les attributs
Un attribut en HTML est une information supplémentaire ajoutée à une balise pour en
modifier ou préciser son comportement. Les attributs se placent à l’intérieur de la balise
d’ouverture et prennent souvent la forme :nom_attribut="valeur".

❑ Caractéristiques des attributs :

[Link] accompagnent une balise. Exemple : <img src="[Link]" alt="Une image">.

[Link] sont toujours définis dans la balise d’ouverture.
[Link] prennent une valeur (souvent entourée de guillemets " ").

30
Les attributs
❑ Les balises peuvent posséder un ou plusieurs attributs qui permettent de spécifier l'action de la
balise. Toujours mettre la valeur de l'attribut entre guillemets.

<marqueur attribut="argument">texte</marqueur>

<marqueur attribut1="argument" attribut2="argument">texte</marqueur>

31
 HTML

Les attributs d’une balise

<balise att1=valAtt 1 att2=valAtt2 ….> contenu</balise>

Exemple:

<p align="center"> Fabriquer un site web </p>

Balise d'ouverture
Balise de fermeture
texte
un attribut de l’élément P
affecte la valeur center à l’attribut align

32
 HTML

Les commentaires

<!–- Voici un commentaire HTML -->

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

-->

33
 HTML

Rappels
❑ Les noms d' éléments sont sensibles à la casse et sont écrits en minuscules.

❑ Une balise <html> contenant une seule balise <head> et une seule balise
<body>.

❑ Les noms d'attributs sont sensibles à la casse, doivent être écrits en minuscules
et encadrées par des guillemets. Tous les attributs doivent recevoir une valeur.

❑ Les balises fermantes sont obligatoires.

❑ Les éléments vides sont signalés par une balise spéciale. ( ex: <br />).

34
 HTML

Les attributs de la balise <body>

❖ Pour colorer le texte de votre page :

L'attribut est : text="code_de_couleur"
Exemple : <body text="#000000"> ou <body text="black">

❖ Pour colorer le fond d'écran de votre page :

L'attribut est : bgcolor="code_de_couleur"
Exemple : <body bgcolor="#0099CC">

❖ Pour colorer les liens de votre page :

L'attribut est : link="code_de_couleur"
Exemple : <body link="#003366">

❖ Pour colorer les liens actifs de votre page :

L'attribut est : alink="code_de_couleur"
Exemple : <body alink="#00FF00">

35
 HTML

Les attributs de la balise <body>

❖ Pour colorer les liens visités de votre page :

L'attribut est : vlink="code_de_couleur"
Exemple : <body vlink="#CCFF66">

❖ Pour mettre une image de fond d'écran sur votre page :

L'attribut est : background="votre image "
Exemple : <body background="[Link]">

❖ leftmargin et topmargin :
L'attribut est : leftmargin="nbre de pixels"
Exemple : <body leftmargin="0"> Pour définir les marges du texte . nous nous servons de l'attribut
leftmargin pour la marge à gauche et de topmargin pour la marge en haut de la page. Les valeurs sont
exprimées en pixels.

36
 HTML

Les attributs de la balise <body>

❖ Tous ces attributs peuvent se cumuler :

Exemple :
<body text="code_de_couleur" bgcolor="code_de_couleur" link="code_de_couleur" alink="code_de_couleur"
vlink="code_de_couleur">

37
 HTML

Formater un texte

1.Définition

Formater un texte signifie appliquer une structure et des styles spécifiques pour améliorer son
apparence, sa lisibilité ou pour mettre en avant certaines informations importantes. Cela inclut l'utilisation
de techniques et d'outils pour modifier l'apparence du texte, comme sa taille, sa couleur, son alignement,
sa police, ou encore son style (gras, italique, souligné, etc.).

2. Objectifs du formatage de texte :

•Rendre le contenu lisible : Faciliter la compréhension en organisant le texte.
•Attirer l’attention : Mettre en valeur des parties importantes du texte.
•Structurer le contenu : Hiérarchiser les idées grâce à des paragraphes, des titres ou des listes.

38
 HTML

Formater un texte
❖ Comment formater un texte en gras :
<b> définit un texte gras puis se termine par </b>
La règle: <b>Votre Texte en Gras</b>
Exemple: Votre Texte en Gras
❖ Comment formater un texte en italique :
<i> définit un texte en Italique puis se termine par </i>
La règle: <i>Votre Texte en Italique</i>
Exemple: Votre Texte en Italique
❖ Comment formater un texte souligné :
<u> définit un texte souligné puis se termine par </u>
La règle: <u>Votre Texte Souligné</u>
Exemple: Votre Texte Souligné

❖ Comment formater un indice :

_{définit un texte en indice puis se termine par}
La règle : Votre Texte _{en indice}
Exemple : Votre Texteen indice
39
 HTML

Formater un texte
❖ Comment formater un exposant:
^{définit un texte en exposant puis se termine par}
La règle: Votre Texte ^{en exposant}
Exemple: Votre Texteen exposant
❖ Comment formater un texte rayé:
<s> définit un texte rayé puis se termine par </s>
La règle: <s>Votre Texte Rayé</s>
Exemple: Votre Texte Rayé
❖ Comment formater un texte en couleur:
<font color="code_de_couleur"> définit un texte en couleur puis
se termine par </font>
La règle: <font color="#0000ff">Votre Texte en Couleur</font>
Exemple : Votre Texte en Couleur
❖ Comment formater une police:
<font face="Police de caractère "> définit une police de
caractère et se termine par </font>
La règle: <font face="arial">Votre Texte police arial </font>
Exemple: Votre Texte en Police arial 40
 HTML

Formater un texte
❖ Comment faire un retour à la ligne :
<br> définit un retour à la ligne
Exemple:
Texte de ma première ligne<br>
Texte de ma seconde ligne<br>
❖ Comment formater une ligne:
<hr> définit un paragraphe puis se termine par </hr>
La règle: <hr width="150" size="4" align=center color =
#00ff00 >Votre ligne de" longeur = 150 pixels" "largeur =
4pixels" "Alignée au centre" "couleur verte"
Exemple:

Width et Size peuvent être exprimé en % de la page, la régle est par exemple "width = 10%"

41
 HTML

Formater un paragraphe

<p> définit un paragraphe puis se termine par </p>

La règle: <p align="right">Votre Paragraphe Aligné </p>
Exemple:
Votre Paragraphe Aligné à Gauche avec left
Votre Paragraphe Aligné au Centre avec Center
Votre Paragraphe Aligné à Droite avec right

❖ Tous ces balises de formats peuvent se cumuler :

Exemple:
<b><i><u><s><font color="blue">Ecrire en gras, en italique, en souligné, rayé
et en couleur</font></s></u></i></b>
Résultat: Ecrire en gras, en italique, en souligné, rayé et en couleur

42
 HTML

Titres avec la balise <h>

Il existe six styles prédéfinis pour les titres, allant de H1 à H6
Exemple:

<h1>Titre H1</h1>

<h2>Titre H2</h2>

<h3>Titre H3</h3>

<h4>Titre H4</h4>

<h5>Titre H5</h5>

<h6>Titre H6</h6>

43
 HTML

Exercice d’application

Ecrire le code source d’une page HTML (‘ [Link] ‘) ayant les caractéristiques suivantes :
1. Le titre : « un exemple en html »
2. Une ligne d’en-tête centrée, de taille maximale dont le texte sera « Question 5 », et suivie d’un trait
horizontal occupant 50% de la largeur de la page.
3. Un paragraphe contenant le texte suivant :
Ceci est un paragraphe sera grand intérêt, mais qui présente la caractéristique fondamentale d’être
assez long pour dépasser la langueur d’une ligne. Au besoin, on le rallongera en le recopiant
plusieurs fois (copier/coller)!.

44
 HTML

Les listes
❖ Listes à puces:
<UL>
<LI> texte 1 </LI>
<LI> texte 2 </LI>
</UL>
Résultat:
• texte 1
• texte 2

Remarques utiles:
<UL> peut prendre d'autres arguments, que voici:
<UL TYPE=disc>
<UL TYPE=circle>
<UL TYPE=square>

45
 HTML

Les listes
❖ Listes numérotées :
<OL>
<LI> texte 1 </LI>
<LI> texte 2 </LI>
</OL>
Résultat:
1. texte 1
2. texte 2
Remarques utiles:
<OL> peut prendre d'autres arguments, que voici:
<OL TYPE=i> Numérotation du type i,ii,iii...
<OL TYPE=I> Numérotation du type I, II, III, IV...
<OL TYPE=A> Numérotation du type A, B, C, D...
<OL TYPE=a> Numérotation du type a, b, c, d...
<OL START=5> Numérotation du type 5, 6, 7, 8...

46
 HTML

Les listes
❖ Listes de définition :
<DL>
<DT>Terme 1 à définir</DT>
<DD>Définition du terme 1</DD>
<DT>Terme 2 à définir</DT>
<DD>Définition du terme 2</DD>
<DD>suite du terme 2</DD>
</DL>
Résultat:

Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2
suite du terme 2

47
HTML

Exercice d’application
Ecrire le code source de la page suivante:

48
 HTML

L’insertion d'images

❖ La balise <img>
En HTML, les images sont définies avec le tag <img>.
Ce tag est vide, ce qui signifie qu'il n'est pas fermé et qu'il contient uniquement des attributs.

Exemple:
<img src="[Link]" />

49
 HTML

L’insertion d'images
Les attributs:

1. src
Le rôle: Définit l'URL de l'image à afficher.

La règle: <img src="[Link]" >

2. alt
Le rôle: Fournit une description textuelle de l'image, utile pour l'accessibilité et s'affiche si
l'image ne peut pas être chargée.
La règle: <img src="[Link]" alt="Une belle image de la nature">

3. width et height
Le rôle: Spécifient la largeur et la hauteur de l'image (en pixels ou en pourcentage).
La règle: <img src="[Link]" alt="Image redimensionnée" width="300" height="200">

50
 HTML

L’insertion d'images
Les attributs:

4. title
Le rôle: Ajoute une info-bulle affichée lorsque l'utilisateur passe la souris sur l'image.

La règle: <img src="[Link]" alt="Description" title="Info-bulle sur l'image">

51
 HTML

Les liens
Une des fonctionnalités les plus importantes du langage HTML est la possibilité de créer des liens vers d'autres
documents. Ces documents peuvent être des documents HTML, des images, du son, des films. Le navigateur
Web présente ce lien sous forme de mots soulignés ou d'image encadrée que l'on appelle lien. Ce lien est soit un
fichier local, soit une URL.

❖ Syntaxe de base:

<a href ="URL ou Adresse"> texte ou image </a>

52
 HTML

Les liens
❖ Les types principaux de liens

Il existe quatre types principaux de liens :

1. Liens vers un document complet distant
Ces liens permettent de diriger l'utilisateur vers une autre page ou un site externe. Le lien est défini par une
URL complète (absolue).

Exemple:
<a href="[Link] Example</a>

Remarque:

•href: L'attribut définit l'URL de la page cible.

•Description: Le texte entre les balises <a> et </a> est cliquable.

53
 HTML

Les liens
❖ Les types principaux de liens

Il existe quatre types principaux de liens :

2. Liens vers un document interne
Ces liens pointent vers une autre page du même site web. L'URL peut être relative ou absolue.

Exemple:
1. URL relative:
<a href="[Link]">Aller à la Page 2</a>

2. URL absolue sur le même site:

<a href="[Link] à la Page 2</a>

54
 HTML

Les liens
❖ Les types principaux de liens

Il existe quatre types principaux de liens :

3. Liens vers une ancre dans le même document

Ces liens permettent de diriger l'utilisateur vers une section spécifique de la page actuelle ou d'une autre page.
Une ancre est définie par l'attribut id dans l'élément cible.
Exemple:
1. Exemple (même page):

<h2 id="section1">Section 1</h2> <a href="#section1">Aller à la Section 1</a>

2. Exemple (autre page):

<a href="[Link]#section2">Aller à la Section 2 de Page 2</a>

55
 HTML

Les liens
❖ Les types principaux de liens

Il existe quatre types principaux de liens :

4. Liens vers des ressources téléchargeables
Ces liens permettent aux utilisateurs de télécharger un fichier (document, image, vidéo, etc.)
au lieu de l'ouvrir directement dans le navigateur.

Exemple:

<a href="[Link]" download>Télécharger le PDF</a>

Remarque:

download : Indique que le fichier doit être téléchargé.

56
 HTML

Les liens
❖ Remarques
1. URL Relative
Une URL relative donne le chemin de la ressource par rapport à la position actuelle (page ou dossier) dans la
structure du site.
Structure: chemin/vers/ressource
Exemple:

1. Fichier dans le même répertoire:

Si vous êtes sur une page [Link] dans le dossier site, et que vous voulez accéder à [Link] dans le même dossier :

<a href="[Link]">Voir la photo</a>

2. Navigation dans les répertoires :
❑Accéder à un fichier dans un sous-dossier :
<a href="images/[Link]">Voir la photo</a>
❑ Revenir au dossier parent :
<a href="../[Link]">Contactez-nous</a> 57
 HTML

Les liens
❖ Remarques
2. URL Absolue
Une URL absolue donne l'emplacement complet de la ressource, incluant le protocole (par exemple, http
ou https), le domaine, et parfois le chemin complet.

Structure: protocole://nom-domaine/chemin/ressource
Exemple: <a href="[Link] la photo</a>

3. La cible d'un lien

L'attribut TARGET permet d'indiquer dans quelle fenêtre va s'ouvrir le document correspondant au lien.
Les valeurs prédéfinies par TARGET sont :
_blank : affichage dans une nouvelle fenêtre de navigateur.
_self : affichage dans la même fenêtre (c'est la valeur par défaut).
Il existe d'autres valeurs que l'on verra en étudiant les frames.
Exemple : ouverture de la page d'accueil de la FSTE dans une nouvelle fenêtre :
<A HREF=" [Link] TARGET=_blank> Le site </A>

58
 HTML

Les liens
Exercice d’application
Créez une page html appelée lien1, avec pour titre page1, contenant le texte : "voici la page correspondant au
premier lien". Enregistrez cette page dans le dossier "Exemple lien".
Créez une deuxième page html appelée lien2, avec pour titre page2, contenant le texte : "voici la page
correspondant au deuxième lien". Enregistrez cette page dans le dossier "pages html".
Dans la page Amodifier, ajoutez les liens suivants :
- sur l'ancre correspondant au texte "lien1", faites un lien vers la page lien1. Cette page devra apparaître dans la
même fenêtre.
- sur l'ancre correspondant à la deuxième photo, faites un lien vers la page lien2. Cette page devra apparaître dans
une nouvelle fenêtre.
Dans la page liens1, ajouter à la fin une ancre pour revenir à la page Amodifier.
Faites en sorte que de cliquer sur l'image de l'arobase permette de vous écrire à votre adresse mail.
59
 HTML

Tableaux
1. Définition
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets
(textes, images, couleurs), permettant un contrôle amélioré de la position des objets. Ces tables peuvent
avoir un fond et des bords visibles ou non.
2. Syntaxe
<table >
<tr>
<td> </td>
<td> </td>
</tr>
</table>
3. Explication

<TABLE> et </TABLE> : pour définir un tableau

<TR> et </TR> : définit une ligne dans le tableau.
<TD> et </TD> : pour une cellule
60
 HTML

Tableaux
4. Exemple :

<table width=50% border="1">

<tr>
<td><img src="[Link]"></td>
<td>bienvenue</td>
</tr>
</table>

5. Remarque:

A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes
de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle du fond de la cellule, de
mettre des liens, des images, modifier les couleurs et les épaisseurs de bordure, etc...

61
 HTML

Tableaux
Attributs de la balise <table>

❑ <table bgcolor="votre couleur"> : mettre un fond de couleur.

❑ <table width="50%"> : Occupation en % de la page, vous pouvez aussi travailler en pixels.

❑ <table border="1"> Taille des bords (0=pas de bords).

❑ bordercolor="votre couleur" :couleur des bordures.

❑ cellpadding=" " :Espacement interne des cellules.

❑ cellspacing=" " :Espacement entre les cellules.

62
 HTML

Tableaux
Attributs de la balise <td>
1. colspan:
Description: Définit le nombre de colonnes que la cellule doit occuper. Nombre entier (par défaut 1).
Syntaxe: <td colspan="3">Cette cellule s'étend sur 3 colonnes</td>

2. rowspan:
Description: Définit le nombre de lignes que la cellule doit occuper. Nombre entier (par défaut 1).
Syntaxe: <td rowspan="2">Cette cellule s'étend sur 2 lignes</td>

3. align :
Description: Définit l'alignement horizontal du contenu. Valeurs possibles (left ,center ,right)
Syntaxe: <td align="center">Texte centré</td>

63
 HTML

Tableaux
Attributs de la balise <td>

4. valign:
Description: Définit l'alignement vertical du contenu. (top ,middle,bottom).
Syntaxe: <td valign="top">Texte en haut</td>

5. width:
DescriptionSpécifie la largeur de la cellule.
Syntaxe: <td width="100">Largeur de 100 pixels</td>

6. height :
Description: Spécifie la hauteur de la cellule.
Syntaxe: <td height="50">Hauteur de 50 pixels</td>

64
 HTML

Tableaux

Exercice d’application
Ecrire le code source de la page suivante:

65
 HTML

Formulaire HTML
Un formulaire HTML est une structure utilisée pour collecter des données auprès des utilisateurs
et les transmettre à un serveur pour traitement. Il est défini par la balise <form> et contient divers
éléments interactifs comme des champs de texte, des cases à cocher, des boutons, etc.

❖ Syntaxe de base:

<form >

... Champs de saisie ...

</form>

66
 HTML

Formulaire HTML
Les éléments de formulaire

❑Champ de texte :
<input type="text" id="nom" value="valeur initiale">
Exemple:
<form>

nom: <input type="text" id="nom" >

adresse: <input type="text " id="adresse" >
ville <input type="text" id="adresse" >

</form>

67
 HTML

Formulaire HTML
Les éléments de formulaire

❑ Champ mot de passe :

<input type="password" name="pw" value= " " >

68
 HTML

Formulaire HTML
Les éléments de formulaire
❑ Case à cocher :
<input type="checkbox" name="nom" value="valeur_envoyee" [CHECKED] >

69
 HTML

Formulaire HTML
Les éléments de formulaire

❑ Boutons radio:
<input type="radio" name="nom_de_groupe« value="valeur_envoyee" [CHECKED] >

Exemple

70
 HTML

Formulaire HTML
Les éléments de formulaire
❑ Liste de sélection :
<select name="nom">
<option value="code">libellé</option>
<option value="code" [SELECTED]>libellé</option>
</select>
Exemple

71
 HTML

Formulaire HTML
Les éléments de formulaire
❑ Zones de texte :
<textarea name="nom" cols="30" rows="8">Contenu initial</textarea>

72
 HTML

Formulaire HTML
Les éléments de formulaire
❑ Champ caché :
Un champ caché en HTML est un élément <input> de type hidden. Il est utilisé pour transmettre des
données au serveur sans que l'utilisateur puisse les voir ou les modifier directement. Ce champ est
invisible dans la page web, mais ses valeurs sont envoyées lorsque le formulaire est soumis.

Syntaxe

<input type="hidden" name="nom" value="valeur">

73
 HTML

Formulaire HTML
Les éléments de formulaire

❑ Bouton d'envoi

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

74
 HTML

Formulaire HTML
Les éléments de formulaire

❑ Bouton d'annulation ou «reset»

❑ Bouton simple

75
 HTML

Formulaire HTML
Exercice d’application:
Ecrire le code source de la page suivante:

Remarque
Champ de fonction :
Enseignant, Etudiant, Ingénieur,
Retraité, Autre.

76
 HTML

Formulaire HTML
Autres types de formulaire
❑ Le champ <input type=color>
<input type="color" name="color1" />

Exemple

77
 HTML

Formulaire HTML
Autres types de formulaire

❑ <input type=date>
<input type="date" name="bday" />
Exemple

78
 HTML

Formulaire HTML
Autres types de formulaire

❑ <input type=datetime-local>
Permet de choisir la date et l’heure
<input type="datetime-local“ name="bdaytime" />

Exemple

79