HTML Partie1

Programmation WEB
Génie Informatique (S2) Pr. Meriem HOUMER

CHAPITRE 1:
INTRODUCTION
2
PRINCIPES DE PUBLICATION
 Un site est
✓ Réalisé par un concepteur

✓ Hébergé sur un serveur
✓ Consulté par des utilisateurs
 Le site est déposé par le concepteur chez l’hébergeur
 Site web : ensemble de pages web
 Page web : un document HTML+ documents utilisés (ex: images, sons, vidéo, etc.)
Conception d’un site = réalisation d’un ensemble de pages connectées entre elles par
des liens hypertextes 3
CONCEPTS FONDAMENTAUX
 Pour créer un site web, on doit donner des instructions à l'ordinateur.

➢ Il ne suffit pas simplement de taper le texte qui devra figurer dans le site.
➢ Il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages,
etc.
4
PRINCIPES DE PUBLICATION
 Pour héberger votre site web il vous faut:
✓ Un nom de domaine ;
✓ Un hébergeur pour l’héberger sur un serveur web ;
✓ Un logiciel FTP (File Transfer Protocol) client (ou SSH comme PSCP ou putty)
pour communiquer avec le serveur (avec ssh de manière sécurisée) :
 FileZilla
 WISE-FTP
 Transmit
 Cyberduck
 FireFTP
5
 etc.
 Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web.
✓ HTML (HyperText Markup Language): Langage de balisage utilisé pour la
création de pages web, permettant notamment de définir des liens hypertextes. Son rôle
est de gérer et organiser le contenu.
✓ CSS (Cascading Style Sheets): Les feuilles de style en cascade, généralement
appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui
décrit la présentation des documents HTMLet XML.
6
HTML seulement HTML + CSS

7
LES DIFFÉRENTES VERSIONS DE HTML ET CSS
❑ Les versions de l’HTML
 HTML1 : C'est la toute première version créée par Tim Berners-Lee en 1991.
 HTML 2 : Proposée en 1994. Cette version pose les bases des versions
suivantes du HTML. Les règles et le fonctionnement de cette version sont

donnés par le W3C (World Wide Web Consortium).
 HTML 3 : Apparue en 1996, cette nouvelle version du HTML rajoute de
nombreuses possibilités au langage, comme les tableaux, les applets, les scripts,
le positionnement du texte autour des images, etc. 8
 HTML 4 : apparue en 1998 et propose l'utilisation de frames (qui découpent une
page web en plusieurs parties), des tableaux plus complexes, des améliorations
sur les formulaires, etc. Mais surtout, cette version permet pour la première fois
d'exploiter des feuilles de style (CSS)
 HTML 5 : c'est la dernière version. Elle apporte de nombreuses améliorations,
comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du

contenu, de nouvelles fonctionnalités pour les formulaires, etc.
9
❑ Les versions de CSS
 CSS 1 : la première version du CSS proposé en 1996. Elle pose les bases de ce
langage qui permet de présenter sa page web, comme les couleurs, les marges,
les polices de caractères, etc.
 CSS 2 : apparue en 1999 puis complétée par CSS 2.1. Cette version permet
d’utiliser des techniques de positionnement très précises,
 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement
attendues comme les bordures arrondies, les dégradés, les ombres, etc. 10
CHAPITRE 2:
HTML (HyperText Markup Language)
11
 Le langage HTML est basé sur deux concept.
✓ Balises: façon d’indiquer le formatage des éléments
✓ Hypertexte : façon d’inter-relier des documents multimédias
 Un document HTML est un fichier texte, construit suivant une syntaxe précise
✓ Structuré par des balises
✓ Interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, etc.)
✓ Créé dans un éditeur de pages web (FrontPage, Dreamweaver,…) ou tout

éditeur de texte (bloc-notes, wordpad, jedit)
12
 Le langage HTML est basé sur deux concept.
✓ Balises: façon d’indiquer le formatage des éléments
✓ Hypertexte : façon d’inter-relier des documents multimédias
 Un document HTML est un fichier texte, construit suivant une syntaxe précise
✓ Structuré par des balises
✓ Interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, etc.)
✓ Créé dans un éditeur de pages web (FrontPage, Dreamweaver,…) ou tout

éditeur de texte (bloc-notes, wordpad, jedit)
13
 Caractéristiques:
✓ Il repose sur le protocole HTTP (HyperText Transfert Protocol) qui represente

un protocole de communication client-serveur développé pour le WWW.
✓ C’est un langage de définition de documents
✓ Ce n’est pas un langage de programmation (c’est un standard, c'est-à-dire qu'il

s'agit de recommandations publiées par le W3C)
✓ Il est interprété par tous les navigateurs.
✓ Il peut être employé sous Windows, MacOS, Unix, Linux, Solaris…

14
Code HTML Page Web
Pour voir le code HTML d'une page : Clic droit sur la page -> Affichage la Code source de la page / Inspecter
15
Les balises (ou tags)
 Comme HTML est un langage permettant de décrire la structure d’un document
Web, pour ce faire:
✓ Il faut encadrer chacune des différentes structures du texte par une paire de
balises.
✓ Une balise est un mot clé encadré par 2 chevrons < et > et Correspondent à des
informations sur la page web ou sur une zone de la page
✓ Ces balises sont bien sur invisible au moment de l’affichage du document

16
 La plupart des balises vont par paire:

✓ La balise initiale (ouvrante)
✓ La balise terminale (Fermente): la même que celle du début, mais le chevron <
est remplacé par </
 Un texte balisé aura donc cette apparence:
..texte <balise> texte affecté par la balise </balise>

suite du texte…
17
 Exemple de saisie pour passer un groupe de caractères en gras :

texte maigre <B> texte en gras </B> texte maigre
 Certaines balises initiales renferment des valeurs particulières, appelées attributs, qui
précisent des paramètres
o Exemples: <a href="http://www.developpez.com/"></a>
 Les balises orphelines:
✓ Ce sont des balises autofermente qui servent le plus souvent à insérer un élément
à un endroit précis.
18
o Exemples: <image nom="photo.jpg" />
 Il en existe plusieurs types de balises:

✓ Balises de premier niveau
✓ Balises d’en tête
✓ Balises de structuration du texte
✓ Balises de listes
✓ Balises de tableau
✓ Balises de formulaire
✓ Balises sectionnantes
✓ Balises génériques 19
Structure de base d'une page HTML5
(Balises de premier niveau et d’en tête)
20
Le code d'une page Web est constitué comme suit :

 Déclaration de Type de Document (DTD où bien le Doctype) :
✓ Doctype: séries d’informations que le navigateur web a besoin pour définir que
nous voulons créer un site web.
✓ Si vous avez adopté la démarche de mise en conformité de votre site Web avec
les Standards (X)HTML et CSS définis au sein du W3C, votre DTD Sera:
21
La balise doctype contient une déclaration qui donne les informations suivantes :
✓ Type du document PUBLIC
✓ La version du langage XHTML 1.0
✓ La langue de la page web EN pour l'anglais, FR pour le français, etc...
➢ Toute page XHTML doit contenir cette ligne au début du code.
 En HTML5, le code doctype est plus allégé et simplifié:
<!DOCTYPE HTML>
22
 Balises de premier niveau et d’en tête:
Balise Description
<html> Balise principale
Balise <head> En-tête de la page
1er niveau
<body> Corps de la page
<meta /> Métadonnées de la page web (charset, mots-clés, etc.)
<link /> Liaison avec une feuille de style

Balise <script> Code JavaScript
d’en tête
<style> Code CSS
<title> Titre de la page

23

✓ <HTML> …</HTML>: Tout le code HTML de la page Web doit être écrit
entre ces deux balise.
<html lang="fr">
Code HTML
</html>
✓ <HEAD> …</HEAD> : C'est entre ces 2 balises que vont être contenues
des informations sur la page (le titre, l'auteur, le contenu, les mots clés, le
jeu de caractères utilisé etc.), ainsi que des scripts JavaScript et
<META NAME="… " CONTENT="…">
24

✓ <META /> : Meta information. Permet de spécifier par exemple le codage
des caractères, le nom de l’auteur du document, la date de création et de
multiples informations permettant de caractériser la page HTML.
o Exemple:
<meta charset="utf-8"/>: Cette balise indique l'encodage utilisé dans
votre fichier
<meta name="author" content="nom de l’auteur" />
<meta name="copyright" content="propriétaire du copyright" />
……..
25
✓ <TITLE> …</TITLE> : A l'intérieur de l'entête

✓ Le texte qu'elle contiennent constituera le titre de la page apparaissant
physiquement en haut de la fenêtre du navigateur.
✓ <BODY> …</BODY> : Le corps, a proprement parler de la page web sera

contenu entre ces 2 balises.
 Les balises ne sont pas sensibles à la casse : <HTML> équivalent à <Html> qui
est équivalent à <html>
 Commentaires :  26

✓ La structure d'une page Web :
N.B: Enregistrez le document avec l’extension . Html ou . Htm 27

 La balise d'ouverture peut recevoir les paramètres suivant:
✓ la couleur de fond : BGCOLOR="#RRVVBB"
✓ la couleur du texte : TEXT="#RRVVBB"
✓ la couleur des liens : LINK="#RRVVBB"
✓ la couleur des liens lors de sélections :VLINK="#RRVVBB"
✓ la couleur des liens déjà visités : ALINK="#RRVVBB "
✓ Image en fond : BACKGROUND="image.gif"

28
 Les principales couleurs prédéfinies
29
Voir aussi http://www.css-faciles.com/couleurs-css.php
✓ Exemple :
30
La Mise en forme du texte
(Balises de structuration du texte )
31
 Les balises de formatage de texte:

✓ <B>…</B> : permet de mettre en caractères gras (bold)
✓ <STRONG>…</STRONG> : rend l'aspect plus gras que le
précédent.
✓ <BIG>…</BIG> : augmentent le texte concerné d'un degré par
rapport au texte environnant. Si celui-ci est de niveau 7, ces
balises sont sans effet.
✓ <SMALL>…</SMALL> : effet inverse au précédent.
✓ <STRIKE>…</STRIKE> : barre le texte compris entre ces 2
balises. 32
✓ <I>…</I> : met le texte compris entre ces 2 balises en italique.
✓ <em>…</em> : met en valeur votre texte. C'est le navigateur
qui choisit comment afficher les mots « texte en italique ».
✓ <U>…</U> : souligne le texte compris entre ces 2 balises.
✓ <SUB>…</SUB> : met le texte compris entre ces 2 balises en
indice.
✓ <SUP>…</SUP> : met le texte compris entre ces 2 balises en
exposant.
✓ <Hn> …</Hn> : où n va de 1 (+gros) à 6 (+petit) 33
<HGROUP>
<H1> Un texte de taille H1. </H1>
</HGROUP>
34
 Choisir une police de caractère:

<FONT [size= n] [color= couleur] [face= police]>…</FONT>
✓ Ces balises permettent de choisir pour le texte qu'elles
encadrent, la police, la taille et la couleur utilisées.
✓ Le nombre n est compris entre 1 (plus petite taille) et 7 (plus
grande taille), où 3 est la taille par défaut.
o Exemple:
<FONT size=4 color="#000080" face="Arial">
Un texte en Arial bleu marine de taille 4.
35
</FONT>
 Les paragraphes:
✓ <p>…</p>: Définit un nouveau paragraphe
✓ 4 alignements sont disponible. Il sont définit dans l’attribut
align dans un paragraphe :
o Align=“left” (par défaut) 
o Align=“center” 
o Align=“right” <!-- À droite->
o Align=“justify” <!-- Justifié->
o Exemple: <p align= left >Alignement gauche</p>
36
 Les divisions:
✓ <div>…</div> : c'est une balise de type block, qui entoure un
bloc de texte.
o Il est une fréquemment utilisée dans la construction d'un
design, comme nous le verrons plus tard.
o Les balises <p>, <h1>, etc. sont de la même famille. Ces
balises ont quelque chose en commun : elles créent un
nouveau «bloc» dans la page et provoquent donc
obligatoirement un retour à la ligne.
37
✓ <BR/> balise sans fermeture provoque un retour en début de

ligne suivante.
✓ <CENTER>…</CENTER> : version moderne de <DIV ALIGN =
center>
✓ <PRE>…</PRE> : Permet de restituer un texte tel que
l'utilisateur l'a tapé en respectant les espaces, les RC (sans
<BR/>)
✓ <BLOCKQUOTE>…</BLOCKQUOTE> : Citation (longue)
✓ <q>…</q>: Citation (courte)
38
 Lignes horizontales:
La balise <HR/> permet de tracer une ligne horizontale
Attributs de cette balise:
✓ ALIGN : Permet d'aligner la ligne horizontale sur la page.
✓ Valeurs : RIGHT, LEFT ou CENTER
✓ WIDTH : Spécifie la largeur de la ligne (en pixels ou % de la
fenêtre)
✓ SIZE : Épaisseur de la ligne (de 1 à 10)
✓ NOSHADE : S'il est présent, l'effet d'ombre (3D) est annulé
39
 Les liens:
✓ <A>…</A> permet de définir une ancre c’est-à-dire un point
d’origine. Cette balise permet donc de définir le point de départ
d’une action.
✓ Cette action peut être un déplacement vers un autre site, un
déplacement vers une autre page du même site ou un
déplacement à l’intérieur de la page actuelle.
o Liens hypertextes (externe)
o Liens vers un signet du même document (interne)
40
 Liens hypertextes :
✓ On définit un lien hypertexte c’est-à-dire un lien vers une autre
page web à l’aide de l’attribut « href » de la balise <A>
✓ La structure d’un lien est la suivante :
<a href="page.html"> le texte associé </a>
✓ C’est en cliquant sur le texte associé que le «déplacement» se
fera.
✓ Il est possible de définir des liens vers d’autres sites ou des
liens vers des pages d’un même site.
41
<A ="_ blank "> …</A>
✓ TARGET= cadre lieu de chargement de la page
Valeurs possibles Description
_blank Ouverture de la page cible dans une nouvelle fenêtre
_parent Ouverture de la page cible dans le cadre parent
_self Ouverture de la page cible dans le cadre hôte
_top Ouverture de la page cible dans la fenêtre hôte
Nom du cadre Ouverture de la page cible dans le cadre portant le nom cité
42
✓ Les attributs de la balise <A>:

o ONCLICK= action
➢ action à exécuter lorsque le lien est cliqué
o ONMOUSEOVER= action
➢ action à exécuter lorsque la souris survole le lien
o ONMOUSEOUT= action
➢ action à exécuter lorsque la souris ne survole plus le lien
✓ Pour ces derniers attributs, le plus souvent, l'action est
réalisée par un script. 43
✓ Remarque:
La couleur des liens doit être définie avec un attribut du tag
<body> : link
o Exemple:
<body text=" blue" link="#00FF00">

<a href="page.html">Cliquez ici !</a>
</body>
44
✓ De même, il existe les attributs vlink et alink.

➢ Vlink: donne la couleur des liens visités.
➢ Alink: la couleur des liens activés.
o Exemple:
<body text=" navy" link="#00FF00« alink="blue" vlink="red">

<a href="page.html">Cliquez ici !</a> </body>
45
 Liens vers un signet du même document :

✓ Les liens servent aussi à se déplacer au sein d’un même
document.
✓ Pour définir un lien interne, on a donc besoin de deux ancres :
une ancre sera utilisée pour définir le lien hypertexte, l’autre
pour définir la destination de ce lien (appelée également ancre
nommée).
✓ Pour définir la destination, on utilise le commutateur name de
la balise de définition d’ancre <a>.
46
 Liens vers un signet du même document :

✓ La définition se fait de cette façon : <a name="lenom"> la
destination </a>.
✓ Pour définir le lien, nous utilisons le commutateur href.
✓ Dans ce cas, la valeur associée au commutateur est la valeur du
commutateur name de l’ancre nommée, précédée du symbole
#, ce symbole permet d’indiquer au navigateur que l’on reste
dans la même page:
✓ <a href="#lenom"> texte cliquable </a>.
47
 Les images:
Les formats utilisés :
✓ JPEG : offre un très bon taux de compression, d’autant plus
que l’on peu moduler ce taux pour obtenir des images de plus
ou moins bonne qualité
✓ GIF : offre un taux de compression moins bon et une palette
de couleur plus restreinte.
➢ Images : coûteux à télécharger (penser au texte de
remplacement)
➢ Stocker des images dans des répertoires séparés 48
 Les images (syntaxe):

<img src="Adresse de l’image">
✓ L’image ne fait pas partie de votre document, le browser va la
chercher sur le serveur
✓ Préciser taille et hauteur de l’image pour une meilleur fluidité
d’affichage
✓ Image comme ancre : <a href="lien.html"><img

src="image.jpeg"></a>
49
 Les images (attributs):
✓ src : chemin de l’accès de l’image à appeler
✓ title : le texte qui apparaît dans l’info-bulle
✓ id : donne une identification à l’image
✓ style : définit les styles des images avec lesfeuilles de style
✓ border : définit la taille de la bordure
✓ vspace : définit l’espace vertical entre l’image et le texte
✓ hspace : définit l’espace horizontal entre l’image et le texte 50

✓ align : définit l’alignement
➢ top aligne l’image sur le plus haut élément de la ligne.
➢ texttop aligne l’image sur le plus haut du texte de la ligne.
➢ absmiddle centre l’image sur le milieu du plus grand élément.
➢ middle centre sur la ligne de base.
➢ absbottom aligne le bas de l’image sur le bas du plus grand
élément.
➢ bottom aligne le bas de l’image sur le plus bas du texte.
➢ baseligne aligne le bas de l’image sur la ligne de base.
51
o Exemple:
52
✓ width : définit la largeur en pixels de l’image
✓ height : définit la hauteur en pixels de l’image
✓ alt : définit le texte qui apparaîtra si l’image ne se s’affiche pas
✓ name : définit le nom de l’image (Servlets, PHP,…)
53
54
 Les images mappées:
✓ HTML offre la possibilité de définir différents endroits de
l'image comme liens c-à-d vous pouvez avoir plusieurs liens

dans une image en utilisant la balise <map>
Syntaxe :
<img src="image.jpeg" usemap="#endroit"> : définition
<map name=" endroit "> : appel
55
✓ <area> indique les parties de l'image qui vont servir de lien.
✓ Les attributs du tag <area> :
➢ shape pour la forme à définir
➢ coords pour les coordonnées des points caractérisant la
forme
➢ href pour l'url associée
56
✓ L’attribut shape définit la forme de la zone cliquable :
➢ default pour la région entière
➢ rect pour définir un rectangle
➢ circle pour définir un cercle
➢ poly pour définir un polygone
✓ Voir logiciel pour le découpage
57
<area shape="rect" coords=“x1,y1,x2,y2" href="page.html">
58
<area shape="circ" coords=“x1,y1,R“ href="page1.html">
59
<area shape="poly"coords="x1,y1,x2,y2,…,xn,yn" href="page2.html">
60
o Exemple:
61

HTML Partie1

Transféré par

Informations du document

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 Partie1

Transféré par

Droits d'auteur :

Formats disponibles

Programmation WEB

Génie Informatique (S2) Pr. Meriem HOUMER

✓ Réalisé par un concepteur

 Le site est déposé par le concepteur chez l’hébergeur

 Site web : ensemble de pages web

 Pour créer un site web, on doit donner des instructions à l'ordinateur.

 Pour héberger votre site web il vous faut:

✓ Un hébergeur pour l’héberger sur un serveur web ;

✓ HTML (HyperText Markup Language): Langage de balisage utilisé pour la

✓ CSS (Cascading Style Sheets): Les feuilles de style en cascade, généralement

HTML seulement HTML + CSS

❑ Les versions de l’HTML

suivantes du HTML. Les règles et le fonctionnement de cette version sont

 HTML 3 : Apparue en 1996, cette nouvelle version du HTML rajoute de

 HTML 4 : apparue en 1998 et propose l'utilisation de frames (qui découpent une

 HTML 5 : c'est la dernière version. Elle apporte de nombreuses améliorations,

comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du

❑ Les versions de CSS

d’utiliser des techniques de positionnement très précises,

 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement

 Le langage HTML est basé sur deux concept.

✓ Balises: façon d’indiquer le formatage des éléments

✓ Hypertexte : façon d’inter-relier des documents multimédias

✓ Structuré par des balises

✓ Interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, etc.)

✓ Créé dans un éditeur de pages web (FrontPage, Dreamweaver,…) ou tout

 Le langage HTML est basé sur deux concept.

✓ Balises: façon d’indiquer le formatage des éléments

✓ Hypertexte : façon d’inter-relier des documents multimédias

✓ Structuré par des balises

✓ Interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, etc.)

✓ Créé dans un éditeur de pages web (FrontPage, Dreamweaver,…) ou tout

✓ Il repose sur le protocole HTTP (HyperText Transfert Protocol) qui represente

✓ Ce n’est pas un langage de programmation (c’est un standard, c'est-à-dire qu'il

✓ Il peut être employé sous Windows, MacOS, Unix, Linux, Solaris…

Code HTML Page Web

 Comme HTML est un langage permettant de décrire la structure d’un document

Web, pour ce faire:

informations sur la page web ou sur une zone de la page

✓ Ces balises sont bien sur invisible au moment de l’affichage du document

 La plupart des balises vont par paire:

..texte <balise> texte affecté par la balise </balise>

 Exemple de saisie pour passer un groupe de caractères en gras :

 Il en existe plusieurs types de balises:

Le code d'une page Web est constitué comme suit :

 En HTML5, le code doctype est plus allégé et simplifié:

 Balises de premier niveau et d’en tête:

<meta /> Métadonnées de la page web (charset, mots-clés, etc.)

<link /> Liaison avec une feuille de style

<title> Titre de la page

 Balises de premier niveau et d’en tête:

 Balises de premier niveau et d’en tête:

 Balises de premier niveau et d’en tête:

✓ <TITLE> …</TITLE> : A l'intérieur de l'entête

✓ <BODY> …</BODY> : Le corps, a proprement parler de la page web sera

 Commentaires :  26

✓ La structure d'une page Web :

N.B: Enregistrez le document avec l’extension . Html ou . Htm 27

 La balise d'ouverture peut recevoir les paramètres suivant:

✓ la couleur de fond : BGCOLOR="#RRVVBB"

✓ la couleur du texte : TEXT="#RRVVBB"

✓ la couleur des liens : LINK="#RRVVBB"

✓ la couleur des liens lors de sélections :VLINK="#RRVVBB"

✓ la couleur des liens déjà visités : ALINK="#RRVVBB "