2-HTML - Partie1

ROYAUME DU MAROC
‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail
ISMONTIC TANGER
MODULE 104: Sites web statiques
CRÉER UNE PAGE WEB EN HTML
ADDARRAZI ILHAM
2023-2024
Introduction
1. Un peu d’historique
Introduction
2. Les éditeurs:
Le langage Html est un langage qui permet de créer une page web .Il est
l'abréviation de Hyper Text Markup Language .
Les éditeurs de texte sont des programmes simples et ciblés qui fournissent
une interface propre pour travailler avec le HTML:
Notepad++
Visual Studio Code
WebExpert
FrontPage
Dreamweaver
WebCreator
Sublime Text
Introduction
2. Les éditeurs:
Visual Studio Code: souvent abrégé en VS Code, est un éditeur de code
source gratuit et open source développé par Microsoft. Il est devenu l'un des
éditeurs de code les plus populaires et les plus utilisés par les développeurs de
logiciels et les programmeurs du monde entier. Voici quelques caractéristiques
et informations importantes sur Visual Studio Code :
Gratuit et open source
Polyvalence
Extensions
Extensions
Terminal intégré
Personnalisation
Etc
La notion de balise
1. Définition:
La description d’un document HTML passe par l’utilisation de balises (Tags
en anglais).
Ces balises doivent être utilisées d'une certaine façon pour décrire
correctement la structure du document. Les balises indiquent au navigateur
comment afficher le document, certaines balises permettent d'intégrer
différents médias comme des images, des vidéos ou des musiques parmi le
texte de la page.
Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur
visite une page web, son navigateur analyse (ou parse en anglais) le document
et l'interprète afin d'afficher la page web correctement.
La notion de balise
2. Syntaxe:
Les balises HTML respectent une syntaxe simple et stricte
Un chevron ouvrant (<)
Le nom de la balise
Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un
signe égal (=) et d'une valeur entre doubles quotes ("").
Un chevron fermant (>)
< nom de balise [attribut=valeur]> [Contenu]</nom de balise>
Exemple:
La notion de balise
3. les catégories de balises :
Balises de structure d’un document
Balises de formatage
Balises de listes
Balises d’hyperliens
Balises d’objets multimédia
Balises de tableaux
Balises de formulaire
Balises génériques
1. Le DOCTYPE
L'inclusion du DOCTYPE dans un
document HTML assure que le navigateur
interprétera la version HTML ainsi déclarée:
En HTML 4 : <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht
ml1-transitional.dtd">
En HTML5 le doctype à déclarer est :
<!DOCTYPE html>.
2. L'élément racine <html>
Représente la racine d'un document HTML.
Tout autre élément du document doit être un
descendant de cet élément.
<! doctype html>

<html>
….
Contenu de la page
….
</html>
a. l'élément de métadonnées (en-tête) du
document <head>
L'élément HTML <head> fournit des
informations générales (métadonnées) sur le
document, incluant son titre et des liens.
Les éléments qui peuvent être utilisés à
l'intérieur de l'élément <head>:
<title> : l'élément de titre du document
L'élément <title> définit le titre du document
(qui est affiché dans la barre de titre du
navigateur ou dans l'onglet de la page). Cet
élément ne peut contenir que du texte, les
balises qu'il contiendrait seraient ignorées.
document <head>
<title> : l'élément de titre du document
Exemple:
<! Doctype html>

<html>
<head>
<title>Et voici le titre de ma page !</title>
</head>
</html>
document <head>
<meta> : l'élément de métadonnées du
document
La balise <meta> fournit des métadonnées
sur le document HTML. Les métadonnées
ne seront pas affichées sur la page, mais
seulement interprétables par les machines.
Les Meta éléments sont généralement
utilisés pour spécifier la description de la
page, les mots clés, l’auteur du document,
dernière modification ou mise à jour, et
autres métadonnées.
Attribut Valeur Description
charset character_set Spécifie le codage des caractères du document HTML

Valeurs les plus utilisées:
UTF-8 : Unicode
ISO-8859-1 : Latin alphabet
<meta charset="UTF-8">
content text Donne la valeur associée à l'attribut http-equiv ou name

<meta name="author" content="x y z">
<meta http-equiv="refresh" content="30">
http-equiv content-type Fournit une en-tête HTTP pour l'information / la valeur de l'attribut
default-style content
refresh <meta http-equiv="content-type" content="text/html; charset=UTF-
8">
<meta http-equiv="default-style" content=“feuille de style
préférée">
name application-name Specifies a name for the metadata

author <meta name="description" content="Cours web">
description <meta name="keywords" content="HTML,CSS,JavaScript">
generator <meta name="author" content="x y z">
keywords <meta name="viewport" content="width=device-width,
viewport initial-scale=1.0">
a. l'élément de métadonnées (en-tête) du document <head>
Exemple1 :
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="description" content="cours HTML5">
<meta name="keywords" content="HTML 5,CSS 3,XML,JavaScript">
<meta name="author" content="x y z ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 5 –Exemple 1</title>
</head>
<body>

</body>
</html
b. <body> : l'élément pour le corps du document
L'élément HTML <body> représente le contenu
principal du document HTML. Il ne peut y avoir qu'un
élément <body> par document.
cette balise permet de délimiter la partie visible d'un
document et de définir quelques paramètres généraux
du document (essentiellement des couleurs). elle
possède les attributs suivants :
alink : La couleur du texte quand les liens
hypertextes sont sélectionnés.
background : L'URI d'une image à utiliser en tant
qu'arrière-plan.
bgcolor :Couleur d'arrière-plan pour le document.
link : La couleur du texte à utiliser pour les liens non
visités.
Vlink: La couleur de texte pour les liens hypertextes
visités.
text : La couleur à utiliser pour la police du texte
b. <body> : l'élément pour le corps du document
Exemple 2:
<!DOCTYPE html>
<html>
<head>
<title>HTML5- Exemple2</title>
</head>
<body bgcolor="black" text="white" >

Bonjour DEV
Le Technicien Spécialisé en Développement Digital est un professionnel
en charge du développement et de la maintenance des applications
informatiques
</body>
</html>
1. Mise en forme au niveau phrase :
gras <b>...</b> <strong>...</strong>
italique <i>...</i> <em>...</em>
souligné <u>...</u>
citation <cite></cite>
citation courte <q></q>
taille de caractère <font size=?>...</font> (de 1 a 7)
couleur de caractère <font color="#$$$$$$"></font>
a la ligne <br> aller à la ligne
commentaires 
centrage <center></center>
en-têtes <hn></hn> avec n=1 à 6
extrait de code source <code>à </code>
abréviation <abbr>à </abbr>
acronyme <acronym>à </acronym>
mettre en exposant <sup>à </sup>
mettre en indice <sub>à </sub>
plus gros <big>à </big>
plus petit <small>à </small>
: Exemple :
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="yellow" text="black" >

<h1>OFPPT</h1>
<h2>NTIC</h2>
<h3>Filiere TDI</h3>
<center><b><u>TDI </u></b></center>
<br><br>
<font size="4" color="red" >Le Technicien Spécialisé
en Développement Informatique </font> <b> TDI </b>
est un professionnel en charge du<i> développement </i>
et <u> de la maintenance des applications informatiques</u>.
</body>
</html>
: Résultat:
2. Mise en format niveau paragraphe :
• Aller à la ligne <br>
• Insérer un espace
• Commencer un nouveau paragraphe <p>
Ligne de séparation
• <HR> Trait horizontal (centré par défaut)
• <HR width="x%"> Largeur du trait en %
• <HR width=x> Largeur du trait en pixels
• <HR size=x> Hauteur du trait en pixels
• <HR align=halign> Trait centré (par défaut), aligné à gauche ou à droite
• <HR noshade> Trait sans effet d'ombrage
: Exemple :
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="yellow" text="black" >

<h1>OFPPT</h1>
<h2>NTIC</h2>
<h3>Filiere TDI</h3>
<center><b><u>TDI </u></b></center>
<br><br>
<p align="left">
<font size="4" color="red" >Le Technicien Spécialisé en Développement Informatique </font> <b> TDI </b>est un professionnel
en charge du<i> développement </i> et <u> de la maintenance des applications informatiques</u>
</p>
<hr>
<p align="right">
</p>
<p align="center">
</p>
</body>
</html>
: Résultat
3. Exercice d’application: (mini-contrôle)
Ecrivez le code de la page suivante :
Les indices:
La police utilisée est "verdana",
Le code de la couleur utilisée
pour le titre est #003569
Le code de la couleur utilisée
pour le texte du corps de la
page est :#444444 (Il s'agit d'un
gris foncé).
Rendre le mot agréable gras et
italique.
taille d’ecriture est 0.8 em pour
le texte
Balises de listes
Il est possible en HTML de définir différents types de listes :
des listes non ordonnées (balise UL) ;
des listes ordonnées (balise OL) ;
des listes de définition (balise DL).
Les éléments des listes (balise LI)
Il est naturellement possible d'imbriquer plusieurs listes, qu'elles soient de même type ou
pas.
Balises de listes
2. Les listes non ordonnées (balise UL)
L’élément UL représente une liste non ordonnée, c’est-à-dire une liste
composée d’éléments sans hiérarchie ni ordre logique apparent ou qu’on
souhaite faire ressortir.
Chaque élément d’une liste non ordonnée est représenté par un élément HTML
LI.
Ces éléments de liste possèdent des marqueurs qui prennent la forme de puces
par défaut
L’attribut type : permet de préciser le type de numérotation utilisée pour
présenter la liste:
type = "disc" : petit cercle rempli
type = "circle" : petit cercle vide
type = "square" : petit carré
Balises de listes
Exemple : <li> 2<sup>éme</sup>trimestre
<ul type="disc">
<!DOCTYPE html> <li>Mars</li>
<html> <li>Avril</li>
<head> </ul>
<title>HTML5- Exemple2</title> </li>
</head> </ul>
<body> </li>
<h2>Année 2021/2022</h2> <li> 2<sup>éme</sup> semestre
<uL> <ul type="circle" >
<li> <li> 3<sup>éme</sup>trimestre</li>
1<sup>er</sup> semestre <li> 4<sup>éme</sup>trimestre</li>
<ul type="circle" >
<li> 1<sup>er</sup>trimestre </ul>
<ul type="square"> </li>
<li>Janvier</li> </uL>
<li>Fevrier</li> </body>
</ul> </html>
</li>
Balises de listes
Résultat:
Balises de listes
2. Les listes ordonnées (balise OL)
élément HTML <ol> représente une liste ordonnée. Les éléments d'une telle
liste sont généralement affichés avec un indicateur ordinal pouvant prendre la
forme de nombres, de lettres, de chiffres romains ou de points.
Chaque élément d’une liste ordonnée est représenté par un élément HTML LI.
L’attribut type : permet de préciser le type de numérotation utilisée pour
présenter la liste:
type = "1" : numérotation à l'aide de chiffres arabes (style par défaut)
type = "a" : numérotation à l'aide de lettres minuscules.
type = "A" : numérotation à l'aide de lettres majuscules.
type = "i" : numérotation à l'aide de chiffres romains en minuscules.
type = "I" : numérotation à l'aide de chiffres romains en majuscules.
Balises de listes
Exemple :
Balises de listes
Résultat:
Balises de listes
3. Exercice d’application:
Ecrivez le code de la page suivante :

Balises de listes
4. Les listes de définition (balise DL).
L'élément HTML <DL> représente une liste de descriptions sous la forme d'une
liste de paires associant des termes (fournis par des éléments <DT>) et leurs
descriptions ou définitions (fournies par des éléments <DD>).
On utilisera par exemple cet élément pour implémenter un glossaire.
.
Balises de listes
Exemple :
Balises de listes
Résultat:
Les liens hypertextes sont définis à l'aide de l'élément <A>. Le texte de cet
élément constitue la zone sur laquelle cliquer pour exécuter un lien :
<A HREF="adresse de destination">Nom du lien</A>
L'adresse de destination peut être une URL ou bien un nom de fichier situé sur
le même serveur. Dans ces deux cas on parle de lien externe. Mais un lien peut
aussi diriger vers un marqueur, ou une étiquette, situé dans la même page. Il
s'agit alors d'un lien interne.
Les liens pointent souvent vers d'autres documents HTML mais ce n'est pas
obligatoire. On peut diriger un lien vers n'importe quel type de document. Le
navigateur lance alors le "visualiseur" adapté ou bien propose d'enregistrer le
fichier sur le disque local.
.
1. lien externe.
Exemple :
1. lien externe.
Résultat:
2. lien interne
L'attribut name permet de nommer un endroit du document pour y faire
référence ensuite. L'utilisation de la balise A avec cet attribut n'a pas d'effet
visible sur le document ; en particulier, il n'y a pas de lien hypertexte produit.
En tout début de page, on peut par exemple placer le code suivant.
<p id="haut"><h1>titre de la page</h1></p>
Cela permettra dans la suite de faire des liens vers ce haut de page.
Pour faire référence à une ancre interne à la page, on donne dans HREF le nom
attribué à l'ancre avec l'attribut NAME précédé du symbole #.
Retour en<a href="#haut">haut de la page</a>.
Retour en haut de la page
2. lien interne.
Exemple :
3. L'attribut target
Cet attribut précise l'endroit où devra apparaître la page désignée par href.
target = "_blank"
le lien s'ouvre en utilisant une nouvelle fenêtre ; la page d'origine (celle
contenant le lien) reste donc visible.
target = "_top"
pertinent seulement lorsque l'on se trouve sur une page contenant des
frames ; le lien s'ouvre alors en utilisant l'ensemble de la fenêtre.
target = "_self"
 le contexte de navigation actuel. (Par défaut)
Balises d’insertion d’images
Les images peuvent être des éléments importants du document. Une page web
contenant des images est immédiatement plus attractives que vide de toute
illustration.
Seuls les formats d'images suivants sont acceptés en standard dans les
spécifications du W3C :
Les images JPEG (.JPG)
Les images PNG
Les images GIF
La balise servant à placer une image est img, suivie de l'attribut src, sous la
forme :
<img src="chemin/nomImage" />
La balise image possède de nombreux attributs :
alt="****" (texte alternatif, pour les browsers n'ayant pas l'option "image"
activée)
width=? height=? (dimensions : hauteur et largeur (en pixels))
border=? (bordure en pixels)
align : top, middle, bottom, left, right
Exemple :
Résultat:
4. Image réactives
Chaque image insérée dans une page HTML peut être rendue cliquable, c’est à
dire qu’elles deviennent un lien vers une page web.
La limitation de cette technique réside dans le fait que l’on ne peut attribuer
qu’une seule adresse URL par image, or il est parfois nécessaire qu’une seule et
même image soit le support de plusieurs liens différents.
La balise <map> sert à définir des zones de liens appelées zones réactives sur
une image. Son utilisation est couplée à la balise <img />.
4. Image réactives
Insertion de l’image
On insert tout d’abord l’image dans la page HTML, avec tous les attributs
nécessaires :
<img src="image.jpg" alt="commentaire" usemap="#nom-de-la-carte"
width="1000" height="400" name="nom-de-l-image" />
Création de la carte
Il faut ensuite créer la carte qui va contenir les différentes zones réactives. Cette
carte est créée à l’aide de la balise <map>. Cette balise possède l’attribut
name=nom-de-la-carte, où nom-de-la-carte correspond au usemap de l’image.
4. Image réactives
Le conteneur <map> contient autant de balises <area /> qu’il y a de zones
réactives.
Syntaxe :
<map name="nom-de-la-carte">
<area [...] />
<area [...] />
<area [...] />
</map>
4. Image réactives
Zones réactives:
A chaque zone réactive est associée une balise <area /> dont les attributs sont:
name : le nom de la zone,
shape : la forme géométrique (cercle, rectangle ou polygone),
coords : les coordonnées de la zone, séparées par des virgules,
href : lien hypertexte de la zone,
alt : le texte alternatif.

4. Image réactives
Zone rectangulaire: Une zone rectangulaire est définie par la balise <area
shape="rect" />. L’attribut coords prend pour valeur les coordonnées des coins
supérieur gauche et inférieur droit, séparées par des virgule
<area shape="rect" coords="x1,y1,x2,y2" href="rectangle.html" />

4. Image réactives
Une zone circulaire : est définie par la balise <area shape="circle" />. L’attribut
coords prend pour valeur la liste des coordonnées du centre du cercle et son
rayon.
<area shape="circle" coords="x1,y1,r" href="cercle.html" />

4. Image réactives
Une zone polygonale est définie par la balise <area shape="poly" />. L’attribut
coords prend pour valeur la liste des coordonnées de chacun des points (avec un
« retour » sur le point de départ).
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x1,y1“

href="polygone.html" />
Exemple :
Résultat:
4. Image réactives
Exercice d’application En cliquant sur la tasse du café, on obtient
Soit l’image suivante : l’image suivante :
A savoir que les coordonnés de la tasse

sont : 337,300,44

2-HTML - Partie1

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

2-HTML - Partie1

Transféré par

Droits d'auteur :

Formats disponibles

ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

MODULE 104: Sites web statiques

CRÉER UNE PAGE WEB EN HTML

<! doctype html>

<! Doctype html>

charset character_set Spécifie le codage des caractères du document HTML

content text Donne la valeur associée à l'attribut http-equiv ou name

name application-name Specifies a name for the metadata

<body bgcolor="black" text="white" >

<body bgcolor="yellow" text="black" >

<body bgcolor="yellow" text="black" >

Ecrivez le code de la page suivante :

name : le nom de la zone,

shape : la forme géométrique (cercle, rectangle ou polygone),

coords : les coordonnées de la zone, séparées par des virgules,

href : lien hypertexte de la zone,

alt : le texte alternatif.

<area shape="rect" coords="x1,y1,x2,y2" href="rectangle.html" />

<area shape="circle" coords="x1,y1,r" href="cercle.html" />

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x1,y1“

A savoir que les coordonnés de la tasse

Vous aimerez peut-être aussi