Le langage HTML
Introduction au langage HTML :
Les pages Web visualisées dans un navigateur Internet sont écrites avec un langage nommé
HTML (HyperText Markup Language). C’est un langage de description de conte- nu et de
structure. Les pages HTML ont la particularité d’être indépendantes de toute plate-forme, et
donc bien adaptées à des échanges d’informations dans un environnement hétérogène comme
le Web. Le langage HTML est composé d’un ensemble de balises (tags). Une balise est un
élément spécial qui indique une action concernant la mise en page, la mise en forme ou la
structure logique d’un document.
Activité 1 :
1- Dans le répertoire de travail, créez un nouveau fichier [Link].
2- Recherchez une image d'extension jpg sur votre disque dur, pour la copier dans votre
répertoire de travail avec le nom [Link].
3- Double cliquez sur le fichier [Link].
4- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page
(menu affichage puis la commande source).
5- Saisissez le code HTML donné ci-dessous, enregistrez et testez (bouton rafraîchir).
❖ Le document HTML peut contenir un ensemble de balises tels que <HEAD>,
<BODY>, <TITLE>, <HTML>, <P>, <HR>, <IMG>, etc.
❖ Les balises du langage HTML sont inclues entre les signes inférieur (<) et
supérieur (>).
❖ Les balises du langage HTML ne sont pas sensibles à la casse. Pour plus de clarté,
nous utiliserons les majuscules.
❖ Syntaxiquement, les balises rencontrées peuvent être reparties en quatre
catégories:
♦ Des balises composées d'une partie ouvrante et d'une partie fermente, tel
que <BODY>....</BODY>,
♦ Des balises composées d'une seule partie ouvrante tel que : <BR>
♦ Des balises composées d'une partie ouvrante et d'une partie fermante avec
des propriétés, tel que :
<FONT SIZE="5"COLOR="blue">...</FONT>,
♦ Des balises composées d'une partie ouvrante avec des propriétés, tel que
<IMG SRC="[Link]" WIDTH="80" HEIGHT="78" >
Structure d’un document HTML :
❖ Un fichier HTML commence par la balise et finit par la balise
❖ La partie entête délimitée par et sert à définir le titre de la page Web qui sera affiché dans
la barre du titre du navigateur (entre ) et à indiquer un certain nombre d'informations
facultatives tel que les mots clés, la date de création,…A l’exception du titre, le contenu de
cette section n’est pas directement visible pour le visiteur.
❖ La partie corps du document délimitée par et est utilisée pour définir le contenu de la page
Web.
Les balises du langage HTML :
Activité 3 :
1- Dans votre répertoire de travail, créez un nouveau fichier [Link].
2- Double cliquez sur ce fichier.
3- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page. 4-
Saisissez le code HTML donné ci-dessous, enregistrez et testez.
Constatations :
❖ Le texte défini entre et sans balises (Merci), sera repris par le navigateur avec les
propriétés de mise en forme par défaut, de ce dernier.
❖ La balise permet un retour à la ligne, alors que provoque un passage à la ligne et décale la
ligne suivante d'environ une ligne (espacement interparagraphe).
❖ On remarque que la balise permet de changer la police, la couleur et la taille du texte.
❖ Les styles d'écriture : gras, italique et souligné s'appliquent respectivement avec les balises
(BOLD), (ITALIC) et (UNDERLINE).
❖ La balise permet d'appliquer un alignement centré.
❖ La balise permet d'insérer une ligne horizontale.
❖ Dans de la balise , la propriété width permet de définir la largeur de la ligne horizontale
qui est mesurée soit en pixels, soit en pourcentage par rapport à son conteneur.
❖ Le tableau suivant comporte les balises de mise en forme des caractères et des paragraph
Les titres
Le langage HTML fournit la possibilité de créer des titres avec plusieurs niveaux
hiérarchiques afin de subdiviser un document Web en plusieurs parties séparées.
Activité 4 :
1- Dans votre répertoire de travail, créez un nouveau fichier [Link].
2- Double cliquez sur ce fichier.
3- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page.
4- Saisissez le code HTML donné ci-dessous, enregistrez et testez.
Constatations :
❖ La balise qui permet de définir un titre est …; avec n varie de 1 à 6. Pour chaque titre, il y
a une taille qui décroit du niveau 1 au niveau 6.
❖ Les balises incluent des retours automatiques à la ligne. Cela signifie qu'il n'est pas
nécessaire d'ajouter pour commencer un nouveau paragraphe à la suite d'une balise de ce type
Les images
Activité 5 :
1- Dans votre répertoire de travail, créez un nouveau fichier [Link].
2- Créez un sous répertoire dans votre répertoire de travail, avec le nom images.
3- Copiez deux images d'extension JPG de votre disque dur, dans le répertoire images, et
renommez-les en [Link] et [Link].
4- Double cliquez sur ce fichier.
5- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page. 6-
Saisissez le code HTML donné ci-dessous, enregistrez et testez.
Constatations :
Dans les pages Web, l'insertion d'une image se fait avec la balise suivante :
❖ SRC="adresse" : définit l'adresse absolue ou relative de l'image à afficher.
❖ WIDTH="largeur" et HEIGHT="hauteur" : définissent la largeur et la hauteur de l'image
en pixels. ❖ ALT="texte" : permet de définir le texte de l'info bulle de l'image
❖ BORDER="taille" : définit la largeur de la bordure autour de l'image
. ❖ ALIGN="alignement" permet de définir l'alignement de l'image ("left", "center", "right").
Activité 6 :
1- Dans votre répertoire de travail, créez un nouveau fichier [Link].
2- Double cliquez sur ce fichier.
3- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page.
4- Saisissez le code HTML donné ci-dessous, enregistrez et testez de nouveau
Constatations :
❖ Pour mettre une image comme arrière plan d'une page, on utilise la propriété
BACKGROUND de la balise body:
❖ L'image d'arrière plan d'une page est utilisée avec l'effet de mosaïque (l'image est
dupliquée autant de fois que nécessaire afin de couvrir la totalité de la fenêtre de navigation).
Les listes
Les spécifications du langage HTML offrent la possibilité de créer des listes d'éléments.
Activité 7 :
1. Dans votre répertoire de travail, créez un nouveau fichier [Link].
2. Ouvrez ce fichier.
3. A l’aide de votre navigateur, accédez à la fenêtre d’édition du code source de la page.
4. Saisissez le code HTML donné ci-dessous, enregistrez et testez de nouveau.
Les tableaux:
Dans le langage HTML, les tableaux sont d'une importance capitale, en effet leur utilisation
ne se limite pas aux données tabulaires, mais sont aussi utilisés pour la mise en forme des
pages Web.
Activité 8
1- Dans votre répertoire de travail, créez un nouveau fichier [Link].
2- Ouvrez ce fichier.
3- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page.
4- Saisissez le code HTML donné ci-dessous, enregistrez et testez de nouveau
Les liens hypertextes
Le langage HTML permet de transformer les objets textes et les images en liens cliquables
pour nous amener vers d'autres emplacements que ce soit dans la même page ou vers une
autre page : c'est la notion de lien hypertexte.
Conceptuellement, les liens peuvent être répartis en deux catégories : - Lien externe : c'est
tout lien permettant d'appeler une page HTML à partir d'une autre page HTML. - Lien interne
: c'est tout lien permettant de pointer un endroit précis dans la page, à partir d'un autre endroit
de la même page HTML.
Activité 9 :
1- Dans votre répertoire de travail, créez un nouveau fichier [Link].
2- Ouvrez ce fichier.
3- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page.
4- Saisissez le code HTML donné ci-dessous, enregistrez et testez de nouveau.
Activité 10 :
1- Dans votre répertoire de travail, créez un nouveau fichier [Link].
2- Ouvrez ce fichier.
3- A l'aide de votre navigateur, accédez à la fenêtre d'édition du code source de la page.
4- Saisissez le code HTML donné ci-dessous, enregistrez et testez de nouveau.
La création de formulaires HTML
Jusqu'à présent, toutes les pages développées fonctionnent en mode consultation où la seule
interactivité entre le visiteur et le site est le système de liens hypertextes. Les pages Web
formulaires offrent une interactivité beaucoup plus riche, en proposant aux visiteurs divers
objets graphiques de saisie, de sélection et de choix.
Constatations :
❖ La page Web créée comporte un formulaire à remplir pour s'inscrire dans une institution
universitaire. Ce formulaire comporte plusieurs contrôles à savoir: zones de saisie, liste
déroulante, boutons, cases à cocher, boutons radio, etc.
❖ Les différents objets graphiques se trouvent entre et . Cette balise possède les attributs
suivants : ♦ACTION : Permet d'indiquer l'action à entreprendre lorsque le bouton de
validation est activé. ♦NAME : Le nom attribué au formulaire.
♦METHOD : Permet de spécifier la méthode d'envoi des données au serveur (deux méthodes
sont possibles : POST ou GET).
❖ Les balises définissant les composants du formulaire sont :
a - La zone de saisie
La définition du contrôle zone de saisie se fait à l'aide de la balise suivante :
Pour les zones de saisies cryptées (type mot de passe), on utilise Info INPUT
TYPE="password"
b - La zone de saisie à plusieurs lignes
La définition d'une zone de texte à plusieurs lignes se fait à l'aide de la syntaxe suivante :
texte par défaut Où NL représente le nombre de lignes et NC représente le nombre de
caractères par ligne.
c - Les cases d'options
La définition du contrôle cases d'options (bouton radio) se fait à l'aide de la balise suivante :
valeur2 Les boutons radio sont utilisés pour faire un et un seul choix, parmi un ensemble de
propositions
La valeur ( valeur2 ) est l'information qui va être affichée comme intitulé d'une case d'option
(qui n'est pas forcément égale à la valeur de la proprièté value(valeur1))
d - Les cases à cocher
La définition du contrôle cases à cocher (checkbox) se fait à l'aide de la balise suivante :
valeur2 Les boutons cases à cocher sont utilisés pour faire un ou plusieurs choix parmi un
ensemble de propositions
La valeur ( valeur2 ) est l'information qui va être affichée comme intitulé d'une case d'option
(qui n'est pas forcément égale à la valeur de la proprièté value(valeur1))
e - La liste de sélection
Les cadres
Le système de cadres est une fonctionnalité du HTML qui permet de découper la fenêtre de
navigation en plusieurs parties indépendantes. Chacune de ces parties peut alors contenir une
page HTML qui peut changer au fil de la navigation. Un exemple classique est un découpage
en deux parties gauche et droite, dans lequel la partie gauche joue le rôle d'un index
(sommaire) et la partie droite sert d'espace d'affichage. Dans une telle disposition, le visiteur
a en permanence accès à la liste des liens à gauche et chaque lien charge la page affichée dans
la partie de droite. Pour créer une page découpée en plusieurs cadres, il faut créer :
♦ Une page définissant la structure du découpage : lignes, colonnes, dimensions, … C'est
cette page qui devra être affichée dans le navigateur pour retrouver le système de cadres.
♦ Autant de pages Web que de cadres : chaque cadre contient initialement une page, qui peut
changer par la suite au cours de la navigation.
Activité 12 :
1- Dans votre répertoire de travail, créez trois nouveaux fichiers [Link], [Link] et
[Link].
2- Saisissez les codes HTML donné ci-dessous, dans les différents fichiers et ce
conformément au tableau suivant :
Exercices:
Exercice1
1. Créez un formulaire HTML qui permet à un utilisateur de saisir son nom, son email et
un message.
2. Ajoutez un bouton de soumission pour permettre à l'utilisateur de soumettre le
formulaire.
3. Utilisez les éléments de formulaire appropriés tels que <input> et <textarea>.
4. Ajoutez des étiquettes <label> pour chaque champ de saisie pour aider l'utilisateur à
comprendre quel type d'information est attendu.
5. Utilisez l'attribut required pour rendre certains champs obligatoires.
6. Utilisez l'attribut placeholder pour fournir un texte d'indication dans chaque champ
de saisie.
7. Utilisez l'attribut action pour spécifier l'URL du script de traitement de formulaire qui
gérera les données soumises par l'utilisateur.
Exercice2
1. Créez un formulaire HTML qui permet à l'utilisateur de sélectionner une couleur à partir
d'une liste prédéfinie.
2. Ajoutez un bouton de soumission pour permettre à l'utilisateur de soumettre le formulaire.
3. Utilisez l'élément de formulaire approprié, à savoir <select>.
4. Ajoutez des étiquettes <label> pour chaque champ de saisie pour aider l'utilisateur à
comprendre quel type d'information est attendu.
5. Utilisez l'attribut required pour rendre la sélection d'une couleur obligatoire.
6. Utilisez l'attribut name pour donner un nom au champ de formulaire afin de pouvoir
récupérer la valeur sélectionnée lors de la soumission du formulaire.
Exercice3:
Créez un formulaire HTML qui permet à l'utilisateur de sélectionner une date et une heure.
Ajoutez un bouton de soumission pour permettre à l'utilisateur de soumettre le formulaire.
Utilisez les éléments de formulaire appropriés tels que <input type="date"> et <input
type="time">.
Ajoutez des étiquettes <label> pour chaque champ de saisie pour aider l'utilisateur à
comprendre quel type d'information est attendu.
Utilisez l'attribut required pour rendre la sélection d'une date et d'une heure obligatoires.
Utilisez l'attribut name pour donner un nom à chaque champ de formulaire afin de pouvoir
récupérer les valeurs sélectionnées lors de la soumission du formulaire.