Le langage HTML
Dr.Youssef LAHBABI
Docteur en Informatique de l’École Nationale Supérieure
d’Informatique et d’Analyse des Systèmes (ENSIAS),
Université Mohammed V, Rabat, Maroc.
Le langage HTML Dr. Youssef Lahbabi 2021-2022
HTML (Hyper Text Markup Langage c.a.d langage de marquage
hypertexte) est un langage universel que tous les ordinateurs en
théorie peuvent comprendre.
C'est un langage utilisé sur le Web.
Le langage HTML permet de publier des documents en ligne contenant
du texte, des tableaux, des images, des sons et des vidéos…
On peut naviguer sur une page HTML grâce aux clics sur
les liens Hypertexte.
Ces liens mènent vers d'autres documents.
Il existe des éditeurs HTML qui permettent de générer
automatiquement des pages HTML grâce à une interface graphique et
ceci sans connaître le langage HTML.
Mais ces logiciels ne sont pas toujours pratiques et il vaut mieux
connaître le langage pour intervenir directement sur le code HTML.
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Pour éditer et visualiser des pages HTML, il faut :
- Un navigateur :
Exemple 1 : Internet Explorer de Microsoft
Exemple 2: Mozilla Firefox
Exemple 3: Google Chrome
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Pour éditer et visualiser des pages HTML, il faut :
- Un éditeur de texte :
-Exemple 1: le Bloc-notes ou Notpad de
Windows
-Exemple 2: Notepad++
-Exemple 3: Visual Studio Code
-Exemple 4: Sublime Text
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Code HTML Page Web
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
HTML est un langage de balises (ou de tags).
Les balises encadrent le contenu d’un objet et
permettent de déterminer l’endroit exact où
commence et où se termine l’objet.
Exemples :
- Un document HTML commence par <HTML>
et se termine par </HTML>
- L’en-tête : <HEAD> … </HEAD>
- Le corps : <BODY> … </BODY>
Le langage HTML Dr. Youssef Lahbabi 2021-2022
• Les balises commençant par "/" sont des balises
"fermantes" et indiquent au navigateur d'arrêter
l'action de la balise correspondante.
Exemple : le prix du <B> pétrole </B> augmente
Seul le mot pétrole sera affiché en gras
• Il est possible d'écrire une balise en majuscules ou
en minuscules, (ou les deux à la fois), sans que cela
gène le navigateur.
<BODY> = <Body> = <body>
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Le code d’une page HTML de base
<HTML>
On enregistre ce texte sous
<HEAD> format html, c’est-à-dire un
<TITLE> fichier à extension htm ou html.
Bonjour Exemple test.htm
</TITLE>
</HEAD>
<BODY>
Ceci est ma première page
</BODY>
</HTML>
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
• La balise <META> L’entête
• cette balise donne des informations précises sur la page web
• elle est utile pour faire reconnaître votre page Web auprès des moteurs de recherche
• exemple : <META name=’’description’’ content=‘’description de votre page’’>
<META name=’’keywords’’ content=‘’mot-clé, mot-clé, mot-clé, …’’>
<HTML>
<HEAD>
<TITLE> La page Web du Master EVRM </TITLE>
<META name="author" content="Votre nom">
<META name="description" content="Cette page vous permettra de
trouver toutes les informations sur le Master d'Exploration et
valorisation des ressources minérales">
<META name="keywords" content="master, géologie, minéralogie,
pétrologie, ressources minérales …">
</HEAD>
… reste du document
<HTML>
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
Le corps
Le corps du document HTML
commence par la balise <BODY>
et se termine par la balise </BODY>
Le corps contient tous les éléments
affichés par le navigateur
La balise <BODY> vient juste après
l’entête d’un document
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
La mise en forme du texte
• Caractères gras :
<B> le texte qui doit être gras </B>
• Caractères italiques : <I> ... </I>
• Caractères soulignés : <U> ... </U>
• Défilement : <MARQUEE> … </MARQUEE >
• Indices : <SUB> ... </SUB>
• Exposants : <SUP> ... </SUP>
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
La couleur du texte
Balise: <FONT COLOR="#RRVVBB"> et </FONT>
RR, VV et BB sont des nombres exprimés en base 16 (hexadécimal)
représentant respectivement la proportion du Rouge, du Vert et du Bleu.
Exemples : #000000 représente le noir
#FFFFFF représente le blanc
#0000FF : bleu
#00FF00 : vert
#8000FF : violet
#FF0000 : rouge
#FFFF00 : jaune
#C0C0C0 : gris clair
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
La couleur du texte
On peut remplacer le code hexadécimal
par le nom de la couleur en anglais :
<FONT COLOR=red> texte </FONT> pour mettre un texte en rouge.
Quelques exemples :
- blue : bleu - aqua : bleu ciel
- yellow : jaune - green : vert
- black : noir - magenta
- white : blanc - olive : vert olive … etc
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
La police de caractère
Balise:
<FONT FACE="arial"> texte… </FONT>
(le texte sera affiché avec la police de caractère arial)
arial est une police de caractère comme :
albertus, verdana, Comic Sans MS …etc.
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Éléments et structure d’un document HTML
La taille des caractères
Balise: <FONT SIZE=Taille> texte… </FONT>
Exemple : <FONT SIZE=3> texte… </FONT>
(Affiche le texte avec une taille 3)
<FONT SIZE=+/-Taille> texte… </FONT>
Exemple : <FONT SIZE=+2> texte… </FONT>
(augmente la taille du texte de deux unités par rapport à la taille par défaut)
On peut également utiliser :
<H1> Le titre </H1> pour un titre de grande taille
<H2> Sous titre </H2> pour un sous titre de taille inférieur
<H3> La sous-section </H3> pour une sous-section de plus faible taille
Et ainsi de suite jusqu’à <H6> et </H6> qui correspondent à la plus petite taille.
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Les attributs du paragraphe
• La commande pour le retour à la ligne est : <BR>
(en HTML, la touche enter du clavier ne permet pas ce retour à la ligne)
La touche espace ne permet d’effectuer qu’un seul espace.
Pour ajouter d’autres espaces il faut taper à chaque fois:
• La commande pour insérer une tabulation est : <UL>… </UL>
• La commande pour insérer une ligne horizontale est : <HR>
• La commande pour commencer un nouveau paragraphe est : <P>
• On peut définir la position du texte sur la page en le mettant à
gauche, au centre ou à droite:
<P ALIGN=LEFT> Texte </P > justifie le texte à gauche
<P ALIGN=RIGHT > Texte </P > justifie le texte à droite
<P ALIGN=CENTER> Texte </P > centre le texte
(on peut utiliser aussi <CENTER> et </CENTER>
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Le style la page web
L'attribut BGCOLOR de la commande <BODY> permet de modifier la
couleur de fond de la page :
<BODY BGCOLOR = #couleur>
Exemple : <BODY BGCOLOR = #FF3366 > un fond de couleur rose
(On peut également utiliser le nom de la couleur en anglais: red…)
L'attribut BACKGROUND de la commande <BODY> permet de mettre
un fichier image comme arrière plan de la page web:
<BODY BACKGROUND = "IMAGE.JPG" >
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Mise en place des images
• Balise: <img src="Nom_Du_Fichier">
Attribut Signification Attribut Signification
src URL de l’image à alt Texte alternatif (texte s’affichant en
inclure cas de problème avec l’image
width Largeur de align Alignement de l’image
l’image (facultatif)
height Hauteur de border Contrôle la largeur de la bordure (0
l’image (facultatif) par défaut
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Mise en place des images
- Positionnement du texte par rapport à l’image :
• En haut: texte…
<img align=top src="Nom_Du_Fichier">
• Au milieu:
<img align=middle src="Nom_Du_Fichier"> texte…
• En bas:
<img align=bottom src="Nom_Du_Fichier">
texte…
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Mise en place des images
- Positionnement de l’image par rapport au texte :
• Image à gauche: Texte texte texte
Texte texte texte
<img align=left src="Nom_Du_Fichier"> Texte texte texte
• Image à droite : Texte texte texte
Texte texte texte
<img align=right src="Nom_Du_Fichier"> Texte texte texte
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Mise en place des images
- Redimensionnement de l’image :
Balise : <img src="Nom_Du_Fichier" width=X height=Y >
- X et Y sont des nombres entiers représentants la largeur et la
hauteur en pixels.
- Si vous n’utilisez pas ces attributs, l'image sera affichée en
grandeur réelle.
- Ajout d'un cadre à l'image :
Balise : <img src="Nom_Du_Fichier" border=X>
où X est un nombre entier représentant la largeur en pixels du cadre.
Le langage HTML Dr. Youssef Lahbabi 2021-2022
Mise en place des images
- On peut mettre plusieurs attributs à l'intérieur de la
balise "img" et leur ordre n'est pas important :
Exemple :
<img align=middle src="image.jpg" width=250 height=150 border=2 >
- Il faut respecter la casse:
Les systèmes d'exploitation qui gèrent les serveurs web font la
différence entre les majuscules et les minuscules, ainsi les
écritures suivantes sont différentes :
image.jpg, IMAGE.jpg, Image.jpg, image.JPG, Image.Jpg …etc.
Le langage HTML Dr. Youssef Lahbabi 2021-2022
