Langage HTML

Réalisé par :
Zakariyaa AIT EL MOUDEN
mouden.zakariyaa@outlook.com
Etudiant-Chercheur
FST Errachidia

© Langage HTML. par ZakariyaaAIT EL MOUDEN
 XML : eXtensible Markup Langage, langage de balisage
extensible, permettant de définir des différents espaces de
noms. Langage père du XHTML, contenu semi-structuré sou
format d’arbres. Un document XML est validable par un
schéma (DTD – DocumentType Definition).
 HTML : HyperTexte Martkup Language, est un langage de
balisage permettant d’écrire d’hypertexte et d’inclure des
images et des données multimédia dans des pages web, utilisé
souvent avec CSS et JavaScript.
2

1991 • HTML
1995 • HTML 2.0
1997 • HTML 3.2
1999 • HTML 4.01
2000 • XHTML
2014 • HTML5
2016 • HTML 5.1
3

 Peux coûteux : Un simple éditeur de texte suffit à écrire ses
premiers documents HTML
 Facile à aborder.
 Un bon moyen de dépasser les problèmes de compatibilité
entre des systèmes et des formats informatiques différents.
4

 La description d'un document HTML passe par l'utilisation de
BALISES (ou "TAGS" en anglais). Une balise est délimitée par les
signes "<" et ">" entre lesquels figure le nom de la balise. Par
exemple, la balise de retour à la ligne est <BR> La plupart du
temps, on utilise une balise de début et une balise de fin,
comme par exemple <html> et </html>.
 La fermeture d’une balise se fait en ajoutant un / avant le nom
de la balise.
Exemples : <font>….</font>
<b>….</b>
<form>…</form>
5

 Pour créer un fichier HTML, il suffit de créer un fichier texte
est changer son extension à une extension reconnu par le
langage HTML.
 Extensions HTML :
 .html
 .htm
 .xhtml
 .xht
 Après la création, on commence à taper notre contenu HTML
avec un éditeur de texte (ex. Notepad++, Sublime, ..)
6

<html>
<head>
<title>Titre de la page</title>
…
</head>
<body>
….
</body>
</html>
Entête de la page
Corps de la page
7

 Les balises <hx> (avec x = 1 6 )
Le langage HTML reconnaît six niveaux de d’en-tête
numérotés de 1 à 6. Le niveau le plus élevé est le 1, le plus
petit est le 6.
Résultat
8

Balise Résultats
 <I> texte </I> Met le texte en italique.
 <B> texte </B> Met le texte en gras.
 <U> texte </U> Souligne le texte.
 <S> texte </S> Barre le texte.
 <SUB> texte </SUB> Indicetexte.
 <SUP> texte </SUP> Exposanttexte.
 <BIG> texte </BIG> Texte de grande taille
 <SMALL> texte </SMALL> Texte de grande taille
9

Résultat
10

 La balise <font> permet de manipuler la taille, la couleur et
le style de l’écriture d’un texte, à travers ces attributs :
 size : La taille du texte, prend une valeur de 1 à 7, 1 pour
un texte de petite taille, et 7 pour un texte de grande taille.
 color : Pour changer la couleur du texte, elle accepte
comme valeur soit le nom de la couleur (red, yellow, green,
..) ou son code hexa ( de #000000 à #FFFFFF).
 face : Définit le style de la police, pour plus de sécurité, on
a tendance à mettre plusieurs polices à la suite.
Si l'internaute n'a pas la 1ere police, le navigateur affiche de
texte avec la police suivante et ainsi de suite...
11

Exemple
12

 <P> : Cette commande (fin de paragraphe) termine un
paragraphe et insère une ligne vide après le paragraphe.
 <PRE> : Les espaces (plusieurs à la suite), tabulations, retour
chariot n'ont pas de valeur en HTML. La commande <PRE>
est utilisée pour inclure un texte pré-formaté dans un
document HTML. Les espacements, tabulations et retour
chariot gardent alors leur sens initial.
13

 <BR> : Retour à la ligne.
 <HR> pour une ligne horizontale de séparation, ces attributs :
 WIDTH : fait varier la largeur de la ligne en % soit en pixel
(valeur par défaut 100%)
 SIZE : fait varier l'épaisseur de la ligne en pixel
 ALIGN : fait un alignement de la ligne suivant les 3 possibilités :
CENTER par rapport au centre de la fenêtre,
LEFT par rapport à la gauche de la fenêtre,
RIGHT par rapport à la droite de la fenêtre.
 NOSHADE :Tracer une ligne pleine
14

Résultat
15

 <ol> : Liste ordonnée (Ordered list)
 <lh> : (list head) l’entête de la liste
<li> : (list item) élément de la liste
L’attribut type de <ol> accepte les valeur : 1,A, a, I et i
Par défaut c’est type=1
16

 <ul> : Liste non ordonnée (Unordered list)
 <menu> : Les menus
Résultat
Résultat
17

 <dl> : Liste descriptive (Descriptive list)
 <lh> : l’entête de la liste
 <dt> : définit le terme
 <dd> : définit la description de chaque terme
Résultat
18

 <table> : Pour créer une table HTML, ces attributs
 Border = n :Tracer un cadre (n=0 pas de cadre)
 Width =% : Largeur de la table par rapport à la page web.
 Height =% : Hauteur de la table par rapport à la page web.
 Cellspacing = n : Espace en pixels entre cellules.
 Cellpadding = n : Espace en pixels entre le contenu de la
cellule et son cadre.
 Rules = rows/cells/all : Spécifie les parties des bordures
intérieures qui doivent être visibles.
 Align = left/center/right :Alignement de la table.
19

 <table> : Peut inclure d’autre balises :
 <caption>: Pour donner un titre à la table, son attribut
type = top/bottom permet de définir l’emplacement du titre.
 <tr>: Ligne de la table, ces attributs :
 Align = left/center/right
 Valign=top/middle/bottom :Alignement vertical
 <td>: Cellule de la table, ces attributs:
 Align etValign pareil que <tr>
 Colspan = n , fusionner n cellules horizontalement.
 Rowspan = n, fusionner n lignes verticalement.
 Nowrap : Sans enroulement du contenu.
20

Résultat
21

 <a href=’’le lien’’> texte cliquable </a>
Le lien de HREF peut être soit un chemin relatif ou absolue :
 Chemin relatif : Exprimé relativement au endroit du document.
<a href = ’’livres/page2.html’’> : le répertoire livres se situe au
même endroit du répertoire courant.
<a href =’’../../references/ref1.htm’’> : le répertoire references
se situe à deux pas en arrière à partir du répertoire courant.
<a href =’’accueil.html’’> : le document accueil.html existe dans le
répertoire courant.
 Chemin absolue : Exprimé depuis la racine des disques nommés.
<a href =’’E:/Study/MultiHexa/Web/TP/liens.htm’’>
22

Le lien de HREF peut être soit un lien vers un endroit dans la même
page web :
<a href=’’#CH1’’>Chapitre 1: Introduction </a>
<a href=’’#CH2’’>Chapitre 2: HTML</a>
….
<a name=’’CH1’’>Introduction </a>
....
<a name=’’CH2’’>Langage HTML</a>
….
23

Le lien de HREF peut être aussi un lien vers un endroit dans une
autre page web
<a href=’’fichier2.html#CH2’’>HTML</a>
Un lien vers un site :
<a href=’’https://www.w3schools.com/tags/tag_a.asp’’>
La baliseA</a>
Un lien d’envoi d’un email :
<a href=’mailto:mouden.zakariyaa@outlook.com’’>
Contactez nous </a>
24

 <img src=’’url’’> Pour insérer une image dans la page web.
Les attributs de <img> :
 SRC = ’’url’’ : url est le chemin relatif ou absolue de l’image.
 ALIGN = left/middle/right/top/bottom : alignement verticale
et horizontale de l’image.
 WIDTH = px ou % : Largeur en pourcentage ou en pixels.
 HEIGHT = px ou % : Hauteur en pourcentage ou en pixels.
 BORDER = n :Tracer un cadre de n pixels autour de l’image.
 ALT = ’’text’’ : Texte alternatif de l’image; affiché au cas où le
navigateur n’arrive pas à afficher l’image.
 VSPACE = m et HSPACE = n : Eloigner le texte de l’image de n
pixels au-dessus et au-dessous et de m pixels à gauche et à droite.
25

Résultat
Résultat
26

La balise BODY accepte les attributs suivants :
 BGCOLOR = c : Couleur de l’arrière plan.
 TEXT = c : Couleur du texte.
 LINK = c : Couleur des liens non visités.
 VLINK = c : Couleur des liens visités.
 ALINK = c : Couleur des liens à l’instant de la sélection.
 La valeur c peut être le nom de la couleurs ou son code Hexa.
27

Nom Code Hexa (RGB) Couleur
White #FFFFFF
Yellow #FFFF00
Violet #EE82EE
Black #000000
SkyBlue #87CEEB
Blue #0000FF
LightCyan #E0FFFF
LightGray #D3D3D3
Green #00FF00
Red #FF0000
Gold #FFD700
https://www.w3schools.com/tags/ref_colornames.asp
28

Résultat
L'élément HTML <marquee> est utilisé pour insérer une zone de texte défilante
(Non standard!)
29

 <form> définit un formulaire pour collecter les informations
des utilisateurs.
Le plus important élément de <form > est <input>
 <input type = ’’text’’> : pour une zone de texte
 <input type = ’’password’’> : pour la saisie des mots de passe.
30

 <input type = ’’radio’’> : pour la sélection d’un choix parmi
plusieurs propositions.
 <input type = ’’checkbox’’> : pour la sélection d’un choix
parmi plusieurs propositions.
31

 <input type = ’’select’’> : pour la sélection d’un choix parmi
plusieurs propositions sous forme d’un menu pop-up
 <input type = ’’textarea’’> : zone de texte multiligne.
32

Les formulaires doivent être complétés avant fermeture par
une commande permettant d'envoyer le contenu des champs
remplis au serveur HTTP.
 <input type = ’’submit’’> : pour un bouton de validation.
Les attributs de <form>
 L’attribut METHOD = post/get : permet de spécifier la
méthode HTTP de l’envoi des données.
 L’attribut ACTION = url : définit l’action effectuer après la
validation des données avec submit.
 L’utilisation des tables améliore l’affichage des formulaires.
33

 Eric BRASSART. Langage HTML. MCF IUT informatique
d’Amiens. Support de cours
 https://www.w3schools.com/
35

Langage HTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Langage HTML

Similaire à Langage HTML (20)

Plus de Zakariyaa AIT ELMOUDEN

Plus de Zakariyaa AIT ELMOUDEN (11)

Langage HTML