Html-Part 1

M2 RT
TECHNOLOGIES DU WEB
UMBB/FS/Dep.ISE
S.MECHID
07/10/2023 MECHID SAMIRA "[email protected]" 1

HyperText Markup Language
(HTML)

Définitions
HyperText Markup Language est normalisé par le W3C

(World Wide Web Consortium) regroupant industriels
(Microsoft, Google, Apple. . . ) et académiques (INRIA, MIT. . . )

Définitions
HTML est un langage qui alterne texte et balises (tags)

(langage de balisage hypertexte servant à la publication de
pages web sur Internet ) crée par Tim Berners-Lee en 1989
HTML est basé sur SGML(Standard Generalized Markup
Language) et permet la description des pages web (Structure,
Affichage et lien )

Versions HTML
 1990: HTML 1
 1995: HTML 2
 1995: HTML+ et HTML3 ( non standards)
 1997: HTML 3.2 et HTML 4 (W3C)
 2000: XHTML 1.0 (HTML 4 réécrit en XML)
 2001: XHTML 1.1
 2003: XHTML 2 (évolution de XHTML 1 abandonnée en
2009)
 2008: HTML 5/ XHTML 5 (finalisé en 2014)
Définitions
HTML ne décrit pas la présentation le rôle de CSS
HTML ne décrit pas le comportement dynamique
rôle de JavaScript et des langages côté serveur
.
Contexte d’exécution d’ HTML ?
fournir
l'information dialogue avec un
structurée en code Modèle client-serveur serveur selon le
HTML protocole HTTP
 peut être par un
module Le client utilise
d'interfaçage le moteur de rendu
avec une base de
Le serveur Le client
données.

Balises HTML
Les balises permettent de structurer chaque

partie du document et servent par exemple au
navigateur pour réaliser la mise en page du
document
De la forme : <tag></tag> ou <tag />

Peut porter de 0 à n attributs

Structures principales d’un document HTML
La structure de premier niveau du document aura donc la

forme suivante :
<HTML>
Corps du document
</HTML>

Un document est structuré en deux parties principales :

l’en-tête <head> ... </head>
le corps <body> ... </body>

Un document est structuré en deux parties principales :
l’en-tête <head> ... </head>
le corps <body> ... </body>

Balises
<balise attributs>contenu</balise>
ou (balise sans contenu)
<balise attributs>
Balise : mot clé désignant un élément particulier

contenu : peut contenir du texte ou d’autres balises
attributs : représente les différents paramètres associés
à l’élément, sous la forme d’une liste de nom
Balises
<balise attributs>
Exemple
<title>Cours HTML </title>
<a href="/home/default.html">
BONJOUR

Balises
<balise attributs>
Exemple
Attributs

Balises
<balise attributs>
Remarque
Les balises sont ouvertes et refermées dans l’ordre
 et non 

Structure d’un document précise un
.<!DOCTYPE html>
document
<html>
HTML utilisé.
<head>
<meta content="text/html; charset=UTF-8" http-
equiv="content-type">
<title>Cours DAW</title>
</head> Fournir des
informations au sujet
du document
<body> délimitent le corps
du document
</body>
</html>
Structure d’un document
1. <head>…</head>
 Définit la tête du document HTML.

 Le navigateur n'affichera pas cette partie.
 Ne contient que des méta-données (titre et
informations descriptives).
 Fait appel aux scripts (JS) et styles (CSS) de la page

1. <head>…</head>
 Balise <title>
• Définit le titre d'un document et est placé dans la
tête <head>

1. <head>…</head>
 Balises <meta>
Indiquer différentes informations :
description de la page web, ses mots-clés, son auteur,
les règles spécifiques destinées aux robots des
moteurs de recherche,
L’encodage de la page web...
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
</head>
Unicode : répertoire de caractères, assignant à chaque caractère, de

quelque langue que ce soit, un nombre entier.
Jeu de caractères : moyen de représenter concrètement, par une suite de
0 ou de 1, un caractère Unicode.
utf-8 présente l’avantage de pouvoir représenter tous les caractères
d’Unicode, de manière compatible avec l’ancien encodage ASCII.

<meta name="keywords" content="Liste des mots clés">
<head>
<meta name="keywords" content="web, html,css">
<title></title>
</head>
Indique aux moteurs de recherche les mots clés en rapport

avec notre site.

D’autres balises meta :

Balise META : <meta name="robots" content="Valeurs">
Exemples:
<meta name= "robots" content= " index ", " follow" >
Valeurs peut prendre :
index :La page sera indexée par le robot
Noindex :La page ne sera pas indexée par le robot
Follow :Les liens dans la page seront indexés
Nofollow :Les liens dans la page ne seront pas indexés

Balise META : <meta name= "revisit-after" content="nombre
de jours">
Permet de spécifier au spider (robot du moteur) de réindexer votre

site suivant l'intervalle en jours donnée
Exemple :
<meta name= "revisit-after" content= " 15 days">


Balise META : <meta name= "author" content="nom d’auteur
de la page">
Permet d'identifier l'auteur du site (de la page)
Exemple :
<meta name= " author" content= " L2 section B">

2. <body>…</body>
Contenu de la partie <body>
 Texte et mise en forme
 Liens hypertextes
 Les images
 Les listes
 Les tableaux
 Les formulaires
 Audio et vidéo

Mise en forme de titres

La balise de début et la balise de fin génèrent

automatiquement un espace de type nouveau paragraphe
(passage à la ligne avec espace correspondant environ au
saut d'une ligne).

Mise en forme des caractères

Les styles
Gras : … 
………… 
Italique : ... ou …. 
Souligné : … 
Texte en exposant : 
Texte en indice : 
Texte préformaté : <pre>

Spécification d’une police locale

Exemple

Remarque
SIZE : taille de la police
1 … 7 (taille absolue)
+1, +2... (taille relative par rapport à la valeur par défaut)
Mise en forme des paragraphes

Les balises ... permet de délimiter un paragraphe.

Tous les paragraphes de texte doivent être balisés ainsi
 … 

Alignement des paragraphes situés et 
Pour passer (ou sauter) une ligne, utiliser des 

Les listes
Il y a deux types de liste dans les listes classiques :

– Les listes ordonnées : liste numérotée (<OL> ... </OL>))
– Les listes non-ordonnées : liste à puces (<UL> ... </UL>)
<LI> Marqueur des éléments d’une liste
Ainsi que Listes imbriquées : <ol> / <ul>
Et
Les lexiques sont délimités par les balises <dl> ... </dl>
(definition list) et leurs entrées par les balises <dt> ... </dt>
(term) et <dd> ... </dd> (definition).

Les listes (liste à puces)

Les listes (liste numérotée)

Les listes (liste imbriquée)

Les listes
Remarque
Il existe plusieurs options pour choisir la forme de la puce
Option TYPE="disc|circle|square" dans <UL>
Exemple
<ul style="list-style-type: square;">

Les listes
Exemples :
<ol style="list-style-type:lower-alpha">
<li>x </li>
<li>y</li>
<li>z</li>
</ol>
a. X
b. y
c. z
<ol start="3" style="list-style-type:upper-alpha">

<li>x </li>
<li>y</li>
C. X
<li>z</li> D. Y
</ol> E. z

Les listes (Les lexiques)

La balise Div
La balise <div> est un conteneur qui peut inclure tous les

balises html (tels que les paragraphes les tableaux, les listes, les
images..., et également d'autres divisions).

La balise Div

Fusion de mots: 
o Regrouper un ensemble de mots dans un paragraphe (afin
d’appliquer un style particulier)
Exemple
<html>
<head>
</head>
<body>
 Ce cours est destiné pour les L2 Informatique
Le premier chapitre
est consacré pour le HTML 
</body>
</html>
Création de lignes horizontales

Les Tableaux
Les tableaux sont délimités par les balises <table>... </table> .

Les balises <tr> ... </tr> (table row) délimitent les lignes.
Les balises <td> ... </td> (table data) délimitent les cellules.
Exemple
<table>
<tr> <td> l1, c1 </td> <td> l1, c2 </td> </tr>
<tr> <td> l2, c1 </td> <td> l2, c2 </td> </tr>
</table>
Les Tableaux

Les Tableaux (Titre pour chaque colonne)

Les Tableaux
Remarques
 Il existe plusieurs options concernant les tables table, tr

et td
 On peut faire des fusions de cellules :
Fusion des colonnes : <colspan>
Fusion des lignes : <rowspan>
Exemple:

Les Tableaux
Remarques
Ajouter de la structure à un tableau en :

donnant une légende au tableau avec les balises <caption>...
</caption> juste après la balise ouvrante <table> .
remplaçant les <td> ... </td> qui contiennent des en-têtes (de
ligne, de colonne) par des <th> ... </th> (table header).

Les liens hypertextes (hyperliens)
On distingue plusieurs types de liens :
• lien interne : référence à une partie se trouvant à l'intérieur
du même document.
• lien externe : référence vers un autre document.
• lien exécutable : lien externe déclenchant un programme
informatique de traitement de données en réponse à une action.
• Les boutons

Les liens sont la base du Web. La cible ou l'extrémité d'un

lien peut se trouver sur n'importe quel ordinateur de la
planète.

Syntaxe : <a href=“”>…</a>
La balise <A> permet de décrire les liens hypertexte dans

un document.

On distingue :
 Les liens définissant un accès vers un document. L'attribut
utilisé dans ce cas est HREF, qui permet de définir l'adresse du
document à atteindre. Cette adresse peut être
une URL standard : <A HREF="URL">...</A>
une étiquette vers un point précis du document : <A
HREF="#LABEL">...</A> (Ancre)
 la combinaison des deux : <A HREF="URL#LABEL">...</A>

Exemples :
Liens externes
Liens internes

Exemple : (les ancres)

<a id="SAM">cours css</a>
Ensuite, on fait le lien avec cette ancre.
<a href="#SAM">CHAPITRE</a>

Liens d’action
Boutons

Liens absolus
Un lien absolu indique l'adresse complète du fichier. Il est
généralement utilisé pour afficher une page d'un autre site.
Exemples :
<a href="http://fr.wikipedia.org"></a>
<a href="mailto:[email protected]">Mon mail</a>

Liens relatifs
Un lien relatif indique l'adresse du fichier par rapport à la page
actuelle.
Exemples :
<a href="cours.html">Lien vers le fichier</a>
<a href="/images/image.png">Lien vers le fichier <a>

Les images
<img src="" alt="" />

Les images et les hyperliens
Syntaxe
<a href=""> <img src=""> </a>
Exemple
<a href="faculté.html"> <img src="image4.jpg"> </a>

▪
Les cadres <iframe>
Créer le cadre
Charger des pages dans le cadre

Html-Part 1

Transféré par

Droits d'auteur :

Formats disponibles

Html-Part 1

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

Html-Part 1

Transféré par

Droits d'auteur :

Formats disponibles

M2 RT

07/10/2023 MECHID SAMIRA "[email protected]" 1

07/10/2023 MECHID SAMIRA "[email protected]" 2

HyperText Markup Language est normalisé par le W3C

07/10/2023 MECHID SAMIRA "[email protected]" 3

HTML est un langage qui alterne texte et balises (tags)

07/10/2023 MECHID SAMIRA "[email protected]" 4

HTML ne décrit pas la présentation le rôle de CSS

HTML ne décrit pas le comportement dynamique

rôle de JavaScript et des langages côté serveur

07/10/2023 MECHID SAMIRA "[email protected]" 7

Les balises permettent de structurer chaque

De la forme : <tag></tag> ou <tag />

07/10/2023 MECHID SAMIRA "[email protected]" 8

La structure de premier niveau du document aura donc la

07/10/2023 MECHID SAMIRA "[email protected]" 9

Un document est structuré en deux parties principales :

07/10/2023 MECHID SAMIRA "[email protected]" 10

07/10/2023 MECHID SAMIRA "[email protected]" 11

Balise : mot clé désignant un élément particulier

07/10/2023 MECHID SAMIRA "[email protected]" 13

07/10/2023 MECHID SAMIRA "[email protected]" 14

07/10/2023 MECHID SAMIRA "[email protected]" 15

 Définit la tête du document HTML.

07/10/2023 MECHID SAMIRA "[email protected]" 17

07/10/2023 MECHID SAMIRA "[email protected]" 18

Unicode : répertoire de caractères, assignant à chaque caractère, de

07/10/2023 MECHID SAMIRA "[email protected]" 20

Indique aux moteurs de recherche les mots clés en rapport

07/10/2023 MECHID SAMIRA "[email protected]" 21

D’autres balises meta :

D’autres balises meta :

Permet de spécifier au spider (robot du moteur) de réindexer votre

07/10/2023 MECHID SAMIRA "[email protected]" 23

D’autres balises meta :

07/10/2023 MECHID SAMIRA "[email protected]" 24

07/10/2023 MECHID SAMIRA "[email protected]" 25

07/10/2023 MECHID SAMIRA "[email protected]" 26

La balise de début et la balise de fin génèrent

07/10/2023 MECHID SAMIRA "[email protected]" 27

07/10/2023 MECHID SAMIRA "[email protected]" 28

07/10/2023 MECHID SAMIRA "[email protected]" 29

<FONT FACE="police" COLOR="#RRVVBB" SIZE="s|+s|-s"

07/10/2023 MECHID SAMIRA "[email protected]" 31

Les balises <p> ... </p> permet de délimiter un paragraphe.

<P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> … </P>

Pour passer (ou sauter) une ligne, utiliser des <BR>

07/10/2023 MECHID SAMIRA "[email protected]" 32

Il y a deux types de liste dans les listes classiques :

07/10/2023 MECHID SAMIRA "[email protected]" 33

07/10/2023 MECHID SAMIRA "[email protected]" 34

07/10/2023 MECHID SAMIRA "[email protected]" 35

07/10/2023 MECHID SAMIRA "[email protected]" 36

Il existe plusieurs options pour choisir la forme de la puce

Option TYPE="disc|circle|square" dans <UL>

<ul style="list-style-type: square;">

07/10/2023 MECHID SAMIRA "[email protected]" 37

<ol start="3" style="list-style-type:upper-alpha">

07/10/2023 MECHID SAMIRA "[email protected]" 38