Vous êtes sur la page 1sur 78

Université Abdelmalek Essaâdi

Faculté des Sciences et Techniques d’Al-Hoceima


Département de Mathématiques et Informatique
Filière : LST-MI – S6
Année universitaire : 2018 - 2019

Cours du module M31 : Technologies du Web


Chapitre 2 : Langage HTML

Pr. A. El Mhouti FSTH


Plan

 Introduction à HTML
 Concepts de base de HTML
 Eléments
 Balises
 Attributs
 Structure d’un document HTML
 Organisation et mise en forme du texte
 Les liens et les ancres
 Les images et les figures
 Les tableaux
 Les formulaires
 Les frames

Pr. A. El Mhouti 2 FSTH


Introduction à HTML
Introduction à HTML
Généralités

 HTML : HyperText Markup Language (langage de balisage d'hypertexte).

 HTML est un langage informatique utilisant des textes et des balises afin de
gérer et d’organiser le contenu des pages Web (texte, liens, images… ).

 HTML permet également de mettre en forme le contenu des pages Web : les
couleurs, les images, les polices …

 HTML n'est pas à proprement parlé un langage de programmation, mais plutôt


un langage qui permet de mettre en forme du contenu.

 HTML fait son apparition dès 1991 lors du lancement du Web.

Pr. A. El Mhouti 4 FSTH


Introduction à HTML
Généralités

 HTML permet de créer des documents interopérables avec des équipements


très variés de manière conforme aux exigences de l’accessibilité du web.

 HTML est souvent utilisé conjointement avec le langage de programmation


JavaScript des feuilles de style en cascade (CSS).

 Pour créer un fichier HTML on peut utiliser un simple éditeur de texte.


 Pour visionner un fichier en HTML on utilise un navigateur (un logiciel qui lit le
code HTML et l'interprète).
Pr. A. El Mhouti 5 FSTH
Introduction à HTML
Historique

 Années 1990 : HTML est créé par Tim Berner-Lee au CERN.

 1995 : HTML 2.0 : normalisation par l’IETF (Internet Engineering Task Force).

 1996 : HTML 3.2 : ajout des tables, des applets (Java), etc.

 1996 : normalisation par le W3C (World Wide Web Consortium).

 1998 : HTML 4.01 : ajout des feuilles de styles, des frames, etc.

 2000 : XHTML 1.0 : reformulation de HTML 4 en XML 1.0.

 2002-2006 : XHTML 2.0.

 2007-maintenant : HTML5 : apporte de nombreuses améliorations : meilleur


agencement du contenu, nouvelles fonctionnalités pour les formulaires, possibilité
d'inclure facilement des vidéos, etc.

Pr. A. El Mhouti 6 FSTH


Concepts de base de HTML
(Eléments, balises, attributs)
Concepts de base de HTML
Eléments

 HTML repose sur l’utilisation d’éléments délimités par des balises.


 Les éléments sont utilisés pour structurer et présenter le contenu des
différents blocs (titres, paragraphes, images, …) et lui donner du sens.
 Selon l’élément utilisé, le navigateur va reconnaître la nature du contenu.

 Exemple : L’élément p suivant sert à définir un paragraphe :

Pr. A. El Mhouti 8 FSTH


Concepts de base de HTML
Balises

 Un élément est délimité par des balises : <element> ….contenu ….. </element>.
 Les balises HTML sont les éléments de base du codage HTML d’une page web.
 Un élément HTML peut être constitué d’une :
 paire de balises (ouvrante et fermante) et d’un contenu.
 balise unique qu’on dit orpheline (pas besoin de balise de fin).

 Exemples :
 L’élément p est constitué d’une
paire de balises et d’un contenu.

 L’élément br (retour à la ligne)


n’est constitué que d’une
balise orpheline.
Pr. A. El Mhouti 9 FSTH
Concepts de base de HTML
Attributs

 La balise ouvrante d’un élément HTML peut contenir des attributs.


 Les attributs sont des valeurs supplémentaires qui permettent d'apporter
certaines précisions à des éléments afin d'adapter leur comportement.
 Un attribut contient toujours une valeur : attribut="valeur"
 Exemple : L’élément img (pour insérer une image) à deux attributs : src et alt.
 src : nom et emplacement de l’image
 alt : texte alternatif dans le cas où l’image ne serait pas disponible.

Pr. A. El Mhouti 10 FSTH


Structure d’un document HTML
Structure d’un document HTML
Créer une page web avec un éditeur

 Pour écrire du code HTML, on utilise des éditeurs de texte dédiés à l'écriture de
code :
 Sublime Text
 Notepad++
 Brackets
 jEdit
 TextWrangler
 jEdit
 Pspad, …

 Un document HTML à pour extension .html (par exemple : test.html).


 Le navigateur web interprète les balises HTML pour faire l’affichage de la page.

Pr. A. El Mhouti 12 FSTH


Structure d’un document HTML
Structure d’une page HTML

 Un document HTML est structuré comme suit :

En-tête de la page

Corps de la page

 DOCTYPE : sert à préciser le type du document.


 élément html : balise principale du code. Elle englobe le contenu de la page.
 élément head : entête de la page HTML.
 élément body : inclut le contenu visible de la page : textes, images, liens, vidéos, …

Pr. A. El Mhouti 13 FSTH


Structure d’un document HTML
En-tête <head> : balise <title>

 La balise <title> contient le titre de la page qui s’affiche dans la barre de titre du
navigateur.

Pr. A. El Mhouti 14 FSTH


Structure d’un document HTML
En-tête <head> : balises <meta>

 Les balises <meta> permettent de fournir des informations sur la page web.
 Les balises <meta> permettent de préciser plusieurs types d’information :
 Le type de codage utilisé.
 Une description (description) de la page.
 L'auteur (author) de la page.
 Une liste de mots clés (keywords) séparés par des virgules pour qualifier la page.
 Le logiciel utilisé (generator) pour réaliser la page, …

Pr. A. El Mhouti 15 FSTH


Structure d’un document HTML
Codage des caractères

 Il existe plusieurs façon de traduire les caractères alphabétiques en codes binaires :


 ASCII : les caractères sont codés sur 7 bits, (soit 27 = 128 caractères), ce qui n’est pas
suffisant pour stocker tous les caractères (accents, cédilles...)
 ISO 8859-1 (Latin-1) : les caractères sont codés sur 8 bits (soit 28 = 256 caractères)
 ISO 8859-15 (Latin-9) : les caractères sont codés sur 8 bits. Il ajoute notamment le
caractère euro (€) et les caractères œ et Œ à la place de certains caractères.
 Windows-1252 (AINSI) : un encodage propre aux ordinateurs Windows. Les
caractères sont codés sur 8 bits. Certains caractères diffèrent des codages ISO.
 MacRoman : est un encodage propre aux ordinateurs Apple Macintosh. S'il est lui
aussi codé sur 8 bits, certains caractères diffèrent des codages ISO et Windows-1252.
 UTF-8 (Unicode) : vise à donner à tout caractère un code unique et compatible sur
toutes les ordinateurs (Windows, Mac, Unix). UTF-8 est codé sur 8 à 32 bits ce qui
permet d'encoder un nombre de caractères quasi illimité.

Pr. A. El Mhouti 16 FSTH


Structure d’un document HTML
Codage des caractères

 A l'origine, les fichiers HTML sont encodé en ASCII (7 bits) (sans caractères spéciaux).
 Pour pallier à ce problème, HTML permet de traduire chaque caractère spécial par un
code alpha numérique : on indique entre des caractères & et ; la lettre et l'accent.

 Exemple : le caractère é doit être représenté par la chaine &eacute;

 Pour écrire des documents consultables sans problèmes quelque soit le type de codage,
il est nécessaire de coder les caractères accentués en utilisant ce codage particulier.
 Liste de tous les caractères accentués et spéciaux sur :
http://www.snv.jussieu.fr/archambault/cours/html/ressources/caracteres.html

Pr. A. El Mhouti 17 FSTH


Structure d’un document HTML
Codage des caractères

 Avantage de l'UTF-8 :
 L'UTF-8 est aujourd'hui compris par tous les navigateurs courants.
 Il permet d'encoder un nombre quasi illimité de caractères (plus de 4 milliards !).
 En utilisant l'UTF-8, on s'affranchit de la conversion des caractères spéciaux en
code HTML.
 Un "e" avec accent aigu (é) pourra donc être écrit directement "é" et non
"&eacute;" dans le code source.
 Pour écrire les pages HTML en UTF-8, il faut préciser dans l'entête de la page l'encodage
choisi grâce à une balise <meta> :

Pr. A. El Mhouti 18 FSTH


Structure d’un document HTML
Structure d’une page HTML

 Exemple 1 :

Pr. A. El Mhouti 19 FSTH


Organisation du texte
Organisation du texte
Commentaires : <!-- -->

 Un commentaire en HTML est un texte qui sert à ajouter des commentaires.


 Un commentaire n'est pas affiché, il n'est pas lu par le navigateur, cela ne
change rien à l'affichage de la page.
 Un commentaire est une balise HTML avec une forme bien spéciale :
<!-- Ceci est un commentaire -->
 Exemple :

Pr. A. El Mhouti 21 FSTH


Organisation du texte
Paragraphes : <p>

 La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à
l'intérieur de paragraphes.
 La balise <p> (paragraph) est utilisée pour délimiter les paragraphes :
<p> texte texte texte texte texte texte </p>

 Exemple :

Pr. A. El Mhouti 22 FSTH


Organisation du texte
Paragraphes : <p>

 En HTML, la touche "Entrée" ne crée pas un retour à la ligne.


 Pour écrire un 2ème paragraphe, il suffit d'utiliser une deuxième balise <p>.
 Une deuxième balise <p> provoque un retour à la ligne.
 En HTML, seule une espace qui est reconnu. Pour ajouter d'autres espaces, on doit
utiliser l'entité HTML &nbsp;

 Exemple 2 :

Pr. A. El Mhouti 23 FSTH


Organisation du texte
Retour à la ligne : <br>

 Pour aller à la ligne dans un même paragraphe, on utilise la balise <br/> (break).
 Cette balise doit apparaitre obligatoirement à l'intérieur d'un paragraphe.
 <p> : pour organiser le texte en paragraphes ;
 <br> : pour aller à la ligne.

 Exemple 2 :

Pr. A. El Mhouti 24 FSTH


Organisation du texte
Titres : <h1>, <h2>, <h3>, …

 HTML permet d'utiliser six niveaux de titres différents.


 <h1> </h1> : titre de niveau 1.
 <h2> </h2> : titre de niveau 2.
 <h3> </h3> : titre de niveau 3.
 <h4> </h4> : titre de niveau 4.
 <h5> </h5> : titre de niveau 5.
 <h6> </h6> : titre de niveau 6.
 Exemple 3 :

Pr. A. El Mhouti 25 FSTH


Les listes
Liste non ordonnée (listes à puces ) : <ul>

 Une liste non ordonnée permet de créer une liste d'éléments à puces sans notion
d'ordre.
 Pour créer une liste non ordonnée en HTML on utilise la balise <ul> (unordred list).
 Pour créer un élément de la liste on utilise la balise <li>.
 Exemple 4 :

 Remarque :
Il est possible d’imbriquer des listes à puces (créer une liste à puces dans une liste à
puces) en ouvrant une seconde balise <ul> à l'intérieur d'un élément<li> </li>.

Pr. A. El Mhouti 26 FSTH


Les listes
Liste ordonnée: <ol>

 Une liste ordonnée permet de créer une liste d'éléments numérotés.


 Pour créer une liste non ordonnée en HTML on utilise la balise <ol>.
 Pour créer un élément de la liste on utilise la balise <li>.
 Exemple 5 :

Pr. A. El Mhouti 27 FSTH


Les listes
Type de puce

 Pour choisir le type de puce, on utilise l'attribut type de la balise <ol> ou <ul>.
 Pour une liste ordonnée (ol), l'attribut type peut prendre les valeurs suivantes :
 type="1" => suite numérique.
 type="a" => suite alphabétique.
 type="A" => suite alphabétique en majuscule.
 type="I" => suite numérique en chiffres romains.

 Pour une liste non-ordonnée (ul), l'attribut type peut avoir les valeurs :
 type="disc" => rond plein.
 type="circle" => rond vide.
 type="square" => carré.

 Exemple 6:

Pr. A. El Mhouti 28 FSTH


Mise en forme du texte
Styles simples : gras, italique, souligné, sur-brillé, …

 HTML propose plusieurs balises pour introduire des styles de mise en forme :
 mettre en gras un texte : <b>, <strong>.
 mettre en italique un texte : <i>, <em> (emphase).
 souligner un texte : <u>.
 sur-biller un texte : <mark>.
 mettre en plus grand un texte : <big>.
 mettre en plus petit un texte : <small>.

 Exemple 6-1 :

Pr. A. El Mhouti 29 FSTH


Mise en forme du texte
Alignement

 Les balises p, h1, h2 (...) supportent un attribut align qui permet de modifier
l'alignement horizontal du texte. Cet attribut peut prendre les valeurs suivantes :
 left : aligné à gauche (par défaut).
 right : aligné à droite.
 center : centré.
 justify : justifié (aligné à droite et à gauche).

 Exemple 6-2 :

 Remarque :
 La balise <center> texte </center> permet également de centrer un texte.
Pr. A. El Mhouti 30 FSTH
Mise en forme du texte
Forme des caractères : taille, police, couleur

 Il est possible de modifier la forme des caractères d'un texte avec la balise <font>.
 Utiliser <font> Mon texte </font> seul n'aura aucun effet. Ce sont les attributs de
cette balise qui sont intéressants :
 attribut size : permet de préciser la taille du texte allant de "1" à "7".
 attribut face : permet de préciser la police utilisée ("verdana", "times",...).
 attribut color : précise la couleur du texte ("red", "blue", "green"…).
Autre couleurs : http://formation.upyupy.fr/html-xhtml/couleurs-html/
 Exemple 6-3 :

Pr. A. El Mhouti 31 FSTH


Mise en forme du texte
Autre balises de mise en forme

 Il existe d'autres balises de mise en forme :


 <blockquote> : généralement utilisée pour des citations. Elle se comporte
comme un paragraphe avec un décalage horizontal en plus.
 <sup> : pour mettre un mot en exposant.
 <sub> : pour mettre un mot en indice.

 Exemple 6-4 :

Pr. A. El Mhouti 32 FSTH


Mise en forme du texte
Texte pré-formaté

 Pour insérer un texte pré-formaté et l’afficher tel quel, on utilise la balise <pre>.
 La balise <pre> permet de restituer le texte dans le code source de la même
manière qu'il a été tapé : les espaces multiples, tabulations et sauts de ligne avec la
touche « Entrée » seront préservés.
 Exemple 6-5 :

Pr. A. El Mhouti 33 FSTH


Les liens et les ancres
Les liens
Créer un lien : <a>

 En, HTML, pour créer un lien vers une autre page on utilise la balise <a>.
 Pour indiquer vers quelle page le lien doit conduire, on spécifie l’URL de la page à
l’aide de l’attribut href.

 Exemple 7 : On peut placer le lien au sein d'un paragraphe :

 Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà ouvert la page, le lien
s'affiche en violet.
Pr. A. El Mhouti 35 FSTH
Les liens
Créer un lien : <a>

 L’URL peut être un lien vers :


un autre site :

une autre page du site :

une ancre : c’est un point de repère mis dans les pages HTML lorsqu'elles sont très
longues. Elle permet de faire un lien vers le bas dans la même page.
Pour cela, il faut que l’ancre soit déjà créée. La valeur de href est : href=#id-ancre.
Exemple 8 :

une ancre située dans une autre page : c’est un lien qui ouvre une autre page ET
qui amène directement à une ancre située plus bas sur cette page.

Pr. A. El Mhouti 36 FSTH


Les liens
Cas pratiques d'utilisation des liens

 Un lien qui affiche une info bulle au survol :


L'attribut title="infobulle" affiche une bulle d'aide lorsqu'on pointe sur le lien.

Exemple 9 :

 Un lien qui ouvre une nouvelle fenêtre :


L’attribut atarget="_blank" force l'ouverture d'un lien dans une nouvelle fenêtre :

Pr. A. El Mhouti 37 FSTH


Les liens
Cas pratiques d'utilisation des liens

 Un lien pour envoyer un e-mail :


Il suffit de faire commencer le lien par mailto: et d'écrire l'adresse e-mail.
Exemple 9 :

 Un lien pour télécharger un fichier :


On procède exactement comme si on fait un lien vers une page web, mais en
indiquant cette fois le nom du fichier à télécharger.
Exemple 9 :

Pr. A. El Mhouti 38 FSTH


Les images et les figures
Les images
Insérer une image : <img>

 Pour insérer une image dans un document HTML on utilise la balise <img>.
 <img/> est une balise de type orpheline (pas besoin de l'écrire en 2 exemplaires).
 La balise <img/> doit être accompagnée de deux attributs obligatoires :
 src : permet d'indiquer où se trouve l'image que l'on veut insérer.
Exemple 10 : src="images/fleur.png"

 alt : un texte alternatif qui décrit ce que contient l'image. Ce texte sera
affiché à la place de l'image si celle-ci ne peut pas être téléchargée.
Exemple 10 : alt="Une fleur".

 Remarque :
 Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe
(<p> </p>).

Pr. A. El Mhouti 40 FSTH


Les images
Insérer une image : <img>

 Ajouter une info-bulle au survol :


L'attribut title="infobulle" affiche une bulle d'aide lorsqu'on pointe sur l’image.
Cet attribut est facultatif (contrairement à l'attribut alt).
Exemple 10 :

Ajouter une bordure :


 L'attribut border permet de spécifier la largeur de la bordure de l'image (de 0 à n).
Exemple 10 :

Pr. A. El Mhouti 41 FSTH


Les images
Insérer une image : <img>

 Définir la taille de l’image :


 Les attributs width et height permettent de spécifier respectivement la
largeur et la hauteur de l'image.
 Si ces attributs ne sont pas renseignés, le navigateur calculera lui même la
taille des images.
Exemple 10-1 :

Pr. A. El Mhouti 42 FSTH


Les images
Insérer une image : <img>

 Miniature cliquable :
Si l’image est très grosse, il est conseillé d'en afficher la miniature sur le site. Puis
ajouter un lien sur cette miniature conduisant vers l'image en taille originale.
On va se disposer de deux versions de l’image : la miniature et l'image d'origine.

Montagne_mini.jpeg
montagne.jpeg
Exemple 11 :

Pr. A. El Mhouti 43 FSTH


Les images
Insérer une image : <img>

 Remarques importantes :
 le nom de l'image dans l'attribut src doit être identique au nom du fichier
image.
 si l'image n'est pas situé dans le même répertoire, il faut préciser le chemin
pour y accéder : src="images/montagne.jpg".
 Il faut préciser l'extension du fichier image et respecter la casse des caractères.
 le nom de l'image ne doit comprendre des caractères spéciaux autre que les
tirets (pas d'espace, pas d'accents, etc...).

Pr. A. El Mhouti 44 FSTH


Les figures
Insérer une figure : <figure>

 Une figure vient enrichir/illustrer le texte pour compléter les informations de la


page.
 Une figure peut être de différents types :
 images
 codes source
 citations, …

 Pour insérer une figure en HTML on utilise la balise <figure>.


 Pour ajouter une légende, on utilise la balise <figcaption> à l'intérieur de la
balise <figure>.
 Exemple 12 :

Pr. A. El Mhouti 45 FSTH


Les figures
Insérer une figure : <figure>

 Remarques :
 Une image doit être située dans un paragraphe (placée à l'intérieur d'une
balise <p> </p>).
 Si on fait de l’image une figure, l'image peut être située en-dehors d'un
paragraphe.
 Une figure peut comporter plusieurs images. Par exemple :

Pr. A. El Mhouti 46 FSTH


Les tableaux
Les tableaux
Principales balises

 La balise <table> permet de créer un tableau.


 La balise <tr> permet de créer une nouvelle ligne dans le tableau.
 Dans une ligne <tr> … </tr>, on crée des cellules grâce aux balises <td>.
 Dans une cellule <td> et </td>, on met le contenu de la case (texte, image...).
 La balise <td> peut être remplacée par <th> si la case est un intitulé de colonne.
 Exemple 13 :

Pr. A. El Mhouti 48 FSTH


Les tableaux
Principales balises

 Les balises <th> (intitulés de colonne) peuvent être placée n'importe où dans le
tableau.
 Exemple 14 :

Pr. A. El Mhouti 49 FSTH


Les tableaux
Attributs de la balise <table> : border

 L'attribut border de la balise <table> permet d’afficher les bordures des cellules.
 Exemple 13 :

Pr. A. El Mhouti 50 FSTH


Les tableaux
Attributs de la balise <table> : cellpadding

 L'attribut cellpadding de la balise <table> permet de modifier l'espacement entre le


texte et les bords des cellules.
 Exemple 13 :

Pr. A. El Mhouti 51 FSTH


Les tableaux
Attributs de la balise <table> : cellspacing

 L'attribut cellspacing de la balise <table> permet de modifier l'espacement entre


cellules.
 Exemple 13 :

Pr. A. El Mhouti 52 FSTH


Les tableaux
Attributs de la balise <table> : width

 L'attribut width de la balise <table> permet de spécifier la largeur du tableau. Cette


valeur est indiquée en pixel (width="400") ou en pourcentage (width="100%").
 Exemple 13 :

Pr. A. El Mhouti 53 FSTH


Les tableaux
Attributs pour les cellules <td> et <th> : width

 L'attribut width de la balise <td> ou <th> permet de spécifier la largeur de la cellule.


 Remarques :
 La largeur peut être spécifiée en pixel (width="100") ou en % (width="33%").
 Si on utilise des pourcentages, le total doit être égal à 100%
 Si on utilise des pixels, le total ne doit pas dépasser la largeur du tableau.
100%

10% 30% 60%

 Il n'est pas utile de préciser la largeur de chaque cellule. On donne la largeur


de la 1ère cellule d'une colonne, et celle ci sera valable pour toute la colonne.

Pr. A. El Mhouti 54 FSTH


Les tableaux
Attributs pour les cellules <td> et <th> : width

 Exemple 15 :

Pr. A. El Mhouti 55 FSTH


Les tableaux
Attributs pour les cellules <td> et <th> : align, valign

 L'attribut align permet de préciser l'alignement horizontal du texte d’une cellule.


 align peut prendre les valeurs suivantes :
 left (texte aligné à gauche)
 center (texte aligné au centre)
 right (texte aligné à droite)
 justify (texte justifié, peut utilisé sur le web car pas bien rendu)

 L'attribut valign permet de préciser l'alignement vertical du texte d’une cellule.


 valign peut prendre les valeurs suivantes :
 top (texte aligné en haut)
 middle (texte aligné au milieu)
 bottom (texte aligné en bas)

Pr. A. El Mhouti 56 FSTH


Les tableaux
Attributs pour les cellules <td> et <th> : align, valign

 Exemple 16 :

Pr. A. El Mhouti 57 FSTH


Les tableaux
Fusion de colonnes

 L'attribut colspan de la balise <td> permet de fusionner un nombre de colonnes.


 colspan prend comme valeur le nombre de colonnes à fusionner.
 Exemple 17 :

Pr. A. El Mhouti 58 FSTH


Les tableaux
Fusion de lignes

 L'attribut rowspan de la balise <td> permet de fusionner un nombre de lignes.


 rowspan prend comme valeur le nombre de lignes à fusionner.
 Exemple 18 :

Pr. A. El Mhouti 59 FSTH


Les tableaux
Couleurs

 Principaux attributs de mise en forme d’un tableau et des cellules :


Couleur du fond du Couleur du fond d’une Couleur de la bordure Couleur de l’ombre
tableau cellule (quadrillage) du quadrillage
<table
<table
<table <td bordercolordark="green"
bordercolor="green"
bgcolor="red"> bgcolor="yellow"> bordercolorlight="yellow"
>
>

 Exemple 19 :

Pr. A. El Mhouti 60 FSTH


Les formulaires
Les formulaires
Présentation

 Un formulaire HTML permet de saisir et de transmettre des informations. Il est


composé d'un ou plusieurs éléments (items, widgets..).
 Les éléments d’un formulaire peuvent être des zones de texte, des boîtes à
sélection, des cases à cocher, des boutons radio, …
 Exemple :

Pr. A. El Mhouti 62 FSTH


Les formulaires
Créer un formulaire : <form>

 Un formulaire est déclaré grâce à la balise <form> dont on précisera généralement


trois attributs :
 name : nom du formulaire
 action : chemin vers la page ou les données du formulaire seront envoyées
(script php, script asp …).
 method : la méthode d'envoi des données qui est soit "POST" soit "GET".

 Exemple : Déclaration d'un formulaire :

Pr. A. El Mhouti 63 FSTH


Les formulaires
Champs de saisie : <input >

Champ de texte :
 Un champ de texte est inséré grâce à la balise <input> en précisant les attributs :
 type="texte ": précise qu’il s’agit d’un champ de texte.
 name : permet de spécifier le nom de la variable qui sera envoyée.
 value : permet de spécifier une valeur par défaut (valeur avec laquelle le
champ sera affiché pré-rempli).
 Exemple 20 :

Pr. A. El Mhouti 64 FSTH


Les formulaires
Champs de saisie : <input >

Champ de mot de passe :


 Un champ de mot de passe est inséré avec la balise <input> en précisant les attributs:
 type="password": précise qu’il s’agit d’un champ de mot de passe.
 name : permet de spécifier le nom de la variable qui sera envoyée.
 value : permet de spécifier une valeur par défaut (valeur avec laquelle le
champ sera affiché pré-rempli).
 Exemple 20 :

Pr. A. El Mhouti 65 FSTH


Les formulaires
Champs de saisie : <input >

Case à cocher :
 Une case à cocher est insérée grâce à la balise <input> en précisant les attributs :

 type="checkbox" : précise qu’il s’agit d’une case à cocher.


 name : permet de spécifier le nom de la variable qui sera envoyée.
 value : permet de spécifier la valeur qui sera envoyée si la case est cochée.

 Exemple 21 :

 Remarque :
On peut afficher une case pré-cochée en précisant l’attribut checked="checked".

Pr. A. El Mhouti 66 FSTH


Les formulaires
Champs de saisie : <input >

Bouton radio (bouton d 'option) :


 Un bouton radio est inséré grâce à la balise <input> en précisant les attributs :

 type="radio": précise qu’il s’agit d’un bouton radio.


 name : permet de spécifier le nom de la variable qui sera envoyée.
 value : permet de spécifier la valeur à envoyer si l'option est sélectionnée.

 NB: Les boutons radios n'autorisent qu'un seul choix (les checkbox permettent de
cocher plusieurs cases).
 Exemple 22 :

 Remarque :
On peut afficher un bouton radio pré-coché en précisant l’attribut checked="checked" .
Pr. A. El Mhouti 67 FSTH
Les formulaires
Champs de saisie : <input >

 Bouton d'envoi : inséré grâce à la balise <input> en précisant les attributs :


 type="submit": pour un bouton d’envoi .
 value : pour spécifier le texte qui sera affiché sur le bouton.
 Lors du clique sur ce bouton, les données du formulaires seront envoyées à la page
précisée par l'attribut action du formulaire.

 Bouton d'annulation (reset) : inséré grâce à la balise <input> en précisant les attributs :
 type="reset": pour un bouton reset.
 value : pour spécifier le texte qui sera affiché sur le bouton.

 Bouton simple : inséré grâce à la balise <input> en précisant les attributs :


 type="button": pour un bouton simple.
 value : permet de spécifier le texte qui sera affiché sur le bouton.
 On peut attribuer à ce type de bouton une action avec une commande JavaScript.

 Exemple 23 :

Pr. A. El Mhouti 68 FSTH


Les formulaires
Champ de texte (zone de texte) : <textarea>

 Un champs texte est une «zone de texte» sur plusieurs lignes.


 Un champ texte est insérée grâce à la balise <textarea> en précisant les attributs :
 name : spécifie le nom de la variable qui sera envoyée.
 rows : permet de préciser le nombre de lignes de la zone de texte.
 cols : permet de préciser le nombre de caractère par ligne de la zone de texte.
 Le texte placé entre les balises <textarea> et </textarea> permet de spécifier
une valeur par défaut (valeur avec laquelle le champ sera affiché pré-rempli).
 Exemple 24 :

Pr. A. El Mhouti 69 FSTH


Les formulaires
Champs de sélection (liste déroulante ): <select>

 Les champs de sélection permettent de proposer une liste déroulante de choix.


 Un champ de sélection est inséré grâce à la balise <select> en précisant l’attribut
name permettant de spécifier le nom de la variable qui sera envoyée.

 La balise <select> doit contenir autant de couple <option> et </option> que nous
avons de choix dans la liste déroulante .
 Pour chaque balise <option>, nous précisons :
 L’attribut value : qui précise le nom de la variable qui sera envoyée.
 Le texte : qui sera affiché pour l'utilisateur (placé entre <option> et </option>).
 L’attribut selected="selected" : qui affiche le champ présélectionnée.

 Exemple 25 :

Pr. A. El Mhouti 70 FSTH


Les formulaires
Regrouper les éléments du formulaire : <fieldset>

 La balise <fieldset> permet de regrouper plusieurs éléments d’un formulaire.


 <fieldset> créé un contour autour des balises du formulaire qu'elle regroupe.
 La balise <legend> (placée dans la balise <fieldset>) permet d’ajouter une légende
décrivant le groupe d’éléments du formulaire.

 Exemple 25-1 :

Pr. A. El Mhouti 71 FSTH


Les formulaires
Exemple complet

 Exemple 26 :

Pr. A. El Mhouti 72 FSTH


Les frames
(cadre)
Les frames
Présentation

 Avec le langage HTML, il es possible de diviser une fenêtre en cadres ou plusieurs zones
appelées frames.
 Grâce aux frames (cadres), il est possible d'afficher plusieurs pages HTML, chacune dans
un frame (zone ou cadre) différent.
 Exemple : Page Web divisée en trois frames :

Pr. A. El Mhouti 74 FSTH


Les frames
Créer des frames

 La balise <frameset> permet de définir le nombre de frames et leurs dimensions.


Les deux principaux attributs sont :
 rows="H1,H2,...Hn" : permet de créer des frames horizontales (Exemple 1).

 cols="L1,L2,...Ln" : permet de créer des frames verticales (Exemple 2).


 Remarques :
 Les hauteurs et largeurs peuvent être données en pixels ou en pourcentage.

 Les deux attributs rows et cols peuvent être utilisés conjointement (Exemple 3).
 Dans un document HTML, la balise <frameset> remplace la balise <body>.

Exemple 1 Exemple 2 Exemple 3


Pr. A. El Mhouti 75 FSTH
Les frames
Créer des frames

 Pour définir le contenu de chacune des zones au sein de la balise <frameset>, on


utilise la balise <frame>.
 Exemple 27 :

Pr. A. El Mhouti 76 FSTH


Les frames
Créer des frames

 Pour définir le contenu de chacun des cadres, la balise <frame> doit contenir les deux
attributs :
 src=url : pour indiquer le fichier à placer dans la zone.
 name : le nom de la zone afin qu'elle puisse devenir la cible d'un lien (on utilisera
alors l'attribut target de la balise <a> pour y accéder).

 Exemple 28 :

Pr. A. El Mhouti 77 FSTH


Les frames
Créer des frames

 Les balises <frameset> peuvent être imbriquées.


 Exemple 29 : Une page contenant trois zones : A, B et C :

Pr. A. El Mhouti 78 FSTH

Vous aimerez peut-être aussi