Cours Du Module M31: Technologies Du Web: Chapitre 2: Langage HTML

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

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).
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.

Concepts de base de HTML
(Eléments, balises, attributs)
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 :

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

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.

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, …

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.

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, …

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

 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 é
 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

 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
"é" 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> :

Structure d’une page HTML
 Exemple 1 :

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 :

 Exemple :

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 :

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
 Exemple 2 :

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 :

Titres : <h1>, <h2>, <h3>, …
 HTML permet d'utiliser six niveaux de titres différents.

 <h1> </h1> : titre de niveau 1.
 Exemple 3 :

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

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 :

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:

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 :

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.
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 :

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 :

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 :

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

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 :

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 :

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>).

Les images
 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 :

Les images
 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 :

Les images
 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 :

Les images
 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...).

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 :

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 :

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 :

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

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

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 :

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

cellules.
 Exemple 13 :

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 :

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.

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

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)

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

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 :

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 :

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 :

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 :

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 :

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 :

Les formulaires
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.
 value : permet de spécifier une valeur par défaut (valeur avec laquelle le
champ sera affiché pré-rempli).
 Exemple 20 :

Les formulaires
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.

 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".

Les formulaires
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.

 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" .
Les formulaires
 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 :

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 :

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 :

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 :

Les formulaires
Exemple complet
 Exemple 26 :

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 :

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

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 :

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 :

Les frames
Créer des frames
 Les balises <frameset> peuvent être imbriquées.

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

Cours Du Module M31: Technologies Du Web: Chapitre 2: Langage HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Cours Du Module M31: Technologies Du Web: Chapitre 2: Langage HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Université Abdelmalek Essaâdi

Faculté des Sciences et Techniques d’Al-Hoceima

Cours du module M31 : Technologies du Web

Pr. A. El Mhouti FSTH

Pr. A. El Mhouti 2 FSTH

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

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

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

Pr. A. El Mhouti 4 FSTH

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

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

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

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

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

 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

Pr. A. El Mhouti 6 FSTH

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

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

Pr. A. El Mhouti 8 FSTH

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

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

Pr. A. El Mhouti 10 FSTH

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

Pr. A. El Mhouti 12 FSTH

 Un document HTML est structuré comme suit :

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

Pr. A. El Mhouti 13 FSTH

Pr. A. El Mhouti 14 FSTH

Pr. A. El Mhouti 15 FSTH

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

Pr. A. El Mhouti 16 FSTH

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

Pr. A. El Mhouti 17 FSTH

Pr. A. El Mhouti 18 FSTH

Pr. A. El Mhouti 19 FSTH

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

Pr. A. El Mhouti 21 FSTH

Pr. A. El Mhouti 22 FSTH

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

Pr. A. El Mhouti 23 FSTH

Pr. A. El Mhouti 24 FSTH

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

Pr. A. El Mhouti 25 FSTH

Pr. A. El Mhouti 26 FSTH

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

Pr. A. El Mhouti 27 FSTH

Pr. A. El Mhouti 28 FSTH

Pr. A. El Mhouti 29 FSTH

Pr. A. El Mhouti 31 FSTH

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

Pr. A. El Mhouti 32 FSTH

Pr. A. El Mhouti 33 FSTH

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

 L’URL peut être un lien vers :

une autre page du site :

Pr. A. El Mhouti 36 FSTH

 Un lien qui affiche une info bulle au survol :

 Un lien qui ouvre une nouvelle fenêtre :

Pr. A. El Mhouti 37 FSTH

 Un lien pour envoyer un e-mail :

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

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