Séance1 - Cours HTML

Hyper Text Markup Language
Mme. Fatima zahra SALMAM

salmam.f@ucd.ac.ma
2019/2020
Hyper Text Markup Language (HTML)
• HTML est utilisé pour créer des documents web qui peuvent
inclure des textes, images, sons, vidéos, animations, liens
...etc.
• HTML est un langage interprété par le navigateur pour la
description et le formatage de la page
• Un navigateur Web est un programme qui permet de
visualiser les sites Web. Il permet spécialement d’interpréter
le code HTML.
• Il existe de nombreux navigateurs différents, les principaux
sont :
2
Hyper Text Markup Language (HTML)
• L’extension (suffixe) d’un document HTML est : .htm ou .html

• HTML utilise des balises (tags) pour indiquer la façon dont le
document doit être affiché.
• Une balise est un élément HTML qui est composé d'une balise
ouvrante (son nom encadré par des chevrons), un contenu, et
d'une balise fermante (son nom précédé d'un slash / encadré
par des chevrons).
<nombalise> Contenu </nombalise>
3
Historique
• Depuis les premiers jours du Web, il y a eu plusieurs versions de

HTML:
Version Année
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
• HTML5 est la dernière version du HTML, il a été finalisée le 28

octobre 2014
4
Exemple d’un document HTML
<!DOCTYPE html>
<html>
<head>
<title>Exemple 1</title>
</head>
Valeur de l’attribut bgcolor
Balise ouvrante
<body bgcolor="gray">
Attribut de la balise <body>
<p> Ceci est un exemple de page web </p>
 Contenu
Juste un commentaire (Non interpréter par le navigateur)
</body>
</html> Balise fermante
5
Exemple d’un document HTML
Navigateur
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="gray">
<p> Ceci est un exemple de
page web </p>

</body>
</html>
Document HTML
Résultat de son interprétation par
le navigateur
6
Structure d’un document HTML
• Un document HTML est dévisé en deux sections principaux:

 Heading : cotient des informations qui décrivent le
document, comme le titre. La section heading est indiquée
par les balises <HEAD> et </HEAD>
 Body : c’est l'endroit où le texte, les graphiques et autres
éléments du document Web sont placés. La section Body
est indiquée par les balises <BODY> et </ BODY >
7
• <!DOCTYPE html>
Pour dire au navigateur quel type et version du document à
interpréter
• <HTML> ... </HTML>
Marqueurs de début et de fin du document HTML
• <HEAD> ... </HEAD>
Ensemble des méta informations relatives au document
• <TITLE> Mon titre </TITLE>
Titre du document qui apparaît sur la barre de titre du
navigateur
8
• <META>
Paramètres utiles notamment pour l’indexation du document
par les moteurs de recherche
<meta name="keywords" content="mot1, mot2, mot3, ...">
<meta name="description" content="ceci est ma
description">
• <BODY> ... </BODY>
Corps du document
• <!– Mon commentaire -->
pour insérer des commentaires dans le document
9
Le Paragraphe <HEAD> …</HEAD>
• Il contient des informations relatives au document,

notamment sur les scripts et les feuilles de style. Ces
informations ne sont pas affichées par les navigateurs.
• Quelques balises qui peuvent y être intégrées :
<SCRIPT>
 Contient le code du programme qui sera appelé dans une balise de
<BODY>
<STYLE>
 Définit les styles de présentation associée à des balises
<TITLE>
 C'est le titre du document affiché dans la barre de titre du navigateur.
10
Les balises
• Il y a deux types de balises:

 Balises doubles: Ce sont des balises ouvrantes/fermantes, dans
lesquelles on va pouvoir mettre d'autres balises ou du texte. La balise
fermante est identique à la balise ouvrante, à la différence qu'elle
contient un "/" pour indiquer à quel endroit on la ferme.
Exemple : <p> Ici du texte ou tout autre balise.</p>
 Balises simples: Ce sont des balises qui sont dites "vides", c'est-à-dire
qu'elles ne vont contenir aucune autre balise HTML. Ces balises n'ont
pas besoin d'être fermées.
Exemple <br> : permet un retour à la ligne
11
Les balises
• Certaines balises ouvrantes peuvent contenir des attributs

paramétrables en leurs assignant une valeur entre guillemets.
<balise attributs=‘’ valeur ’’> Contenu </balise>
 Balise (tag en anglais): Un mot clé du langage associant une propriété
particulière au contenu de la balise
 Attributs ils ne sont pas toujours obligatoires. Ils définissent les valeurs
spécifiques à appliquer sur le contenu.
 Contenu : Il représente du texte, des images ou d’autres balises
 </balise> : C’est une étiquette précisant la fin de la balise.
12
Logiciels de développement
• N’importe quel éditeur de texte peut être utilisé pour créer

des documents HTML.
• Parmi les plus utilisé sous:
– Windows: Bloc-notes, Sublime Text, Notepad++, jEdit…
– Mac OS X: Sublime Text, jEdit, Smultron , TextWrangler…
– Linux: vim, Sublime Text, jEdit, Kate …
13
Tâche 1: Votre premier page html
• Lancez l’éditeur de texte Bloc-notes ou bien Notepad++ et

recopiez le code suivant :
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<p> Ceci est un exemple de page web </p>
</body>
</html>
14
Les attributs
• Les attributs se trouvent toujours dans la balise d’ouverture et

ils ne sont pas toujours obligatoires.
• Les attributs sont séparés par des espaces.
• Chaque attribut a une valeur : attribut="valeur"
• L’ordre des attributs n’a aucune importance
15
Les attributs
Attribut standard:
 id: identification (identité) nom UNIQUE de l'élément
 style: (style) code CSS
 bgcolor: couleur pour le fond
 background: Image de fond
 text: imposer une couleur pour le texte
 title: (titre) texte visible au survole de la souris
 lang: language (langue) abréviation de la langue (en, fr etc.)
16
Tâche2: utilisation des attributs
• Ajouter les attributs avec les valeurs suivantes à la balise

<body>:
 bgcolor="gray"
 text="red"
17
Balises de titres
• Les titres HTML sont définis avec les balises <h1> à <h6>.
<h1> définit le titre le plus important.
<h6> définit le titre le moins important.
18
Mise en forme du texte
  Commentaire ignoré par le navigateur

 <BR> retour à la ligne
 <BLOCKQUOTE>...</BLOCKQUOTE> Citation (introduit un
retrait du texte)
 <CENTER>...</CENTER> Centre tout élément compris dans
la balise
 <DIV align=halign> ...</DIV> Aligne l'élément, halign peut
avoir les valeurs center, left, right, justify
 <P>...</P>
 <P align=halign>...</P> Paragraphe
19
Tâche 3
• Modifier votre document HTML et ajouter les deux titres

et le paragraphe suivants :
<h1> Université Chouaib Doukkali </h1>
<h2> Ecole Nationale des sciences appliquées</h2>
<p>
L’ENSAJ est une école qui forme des futures ingénieures
</p>
• Centrer les deux titres à l’aide de la balise <center>
20
Résultat de la Tâche 3
21
Mise en forme des caractères
 <B>...</B> Texte en gras

 <BIG>...</BIG> Agrandissement de la taille des caractères
 <EM>...</EM> Texte en italique
 <FONT color=colcod>...</FONT> Texte en couleur
 <FONT size=X>...</FONT> Taille des caractères (X a une valeur de 1à 7)
 <I>...</I> Texte en italique
 <PRE>...</PRE> Texte préformaté, affichage des espaces et des sauts
de ligne
 <SMALL>...</SMALL> Réduction de la taille des caractères
 <STRONG>...</STRONG> Mise en gras du texte
 <SUB>...</SUB> Texte en indice
 <SUP>...</SUP> Texte en exposant
 <U>...</U> Texte souligné
22
Tâche 4: Mise en forme des caractères
• Mettez en gras le premier mot « L’ENSAJ », puis en

italique, et après soulignez le.
23

Séance1 - Cours HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Séance1 - Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Hyper Text Markup Language

Mme. Fatima zahra SALMAM

• L’extension (suffixe) d’un document HTML est : .htm ou .html

• Depuis les premiers jours du Web, il y a eu plusieurs versions de

• HTML5 est la dernière version du HTML, il a été finalisée le 28

• Un document HTML est dévisé en deux sections principaux:

• Il contient des informations relatives au document,

• Il y a deux types de balises:

• Certaines balises ouvrantes peuvent contenir des attributs

 Contenu : Il représente du texte, des images ou d’autres balises

 </balise> : C’est une étiquette précisant la fin de la balise.

• N’importe quel éditeur de texte peut être utilisé pour créer

• Lancez l’éditeur de texte Bloc-notes ou bien Notepad++ et

<p> Ceci est un exemple de page web </p>

• Les attributs se trouvent toujours dans la balise d’ouverture et

• Ajouter les attributs avec les valeurs suivantes à la balise

  Commentaire ignoré par le navigateur

• Modifier votre document HTML et ajouter les deux titres

 <B>...</B> Texte en gras

• Mettez en gras le premier mot « L’ENSAJ », puis en

Vous aimerez peut-être aussi