Pr Bendahmane
11 September 2023 1
Fin 1989 :
Tim Berners Lee présente le projet
▪ « World Wide Web » pages Web
Le Web = manière d’utiliser Internet
Tout se fond dans “le Web”
11 September 2023 2
1
Besoins exprimés par les chercheurs
Le Web est composé de pages Web (= pages HTML) sur des
serveurs web
Chacune des pages web est repérée par une adresse unique
appelée URL
11 September 2023 3
Les organisations fournissent des informations à plus de
monde possible en utilisant le Web. L’information est
mise à disposition comme pages HTML statiques.
11 September 2023 4
2
Le Hypertext Transfer Protocol, plus connu sous
l'abréviation HTTP, littéralement le « protocole de
transfert hypertexte », est un protocole de
communication client-serveur développé pour le
World Wide Web. Il est utilisé pour échanger toute
sorte de données entre client HTTP et serveur HTTP.
11 September 2023 5
http://www.doctissimo.fr/html/dossiers/allergies.htm
Protocole Serveur Chemin Ressource
11 September 2023 6
3
Logiciel client capable d’interroger les
serveurs web et d’exploiter leurs resultats
permet de surfer sur le Net et d'afficher sur
votre écran les "pages" qu'il a interceptées.
11 September 2023 7
Navigateurs
Internet Explorer
Mozilla Firefox
Google Chrome
11 September 2023 8
4
Hyper Text Transfert Protocole over SSL :
Protocole de transfert de fichiers Hyper Texte
via le protocle de chiffrement SSL.
11 September 2023 9
L’utilisateur accepte un certificat avant de
continuer
11 September 2023 10
5
Nécessaire pour les pages d’administrations et les
11 September 2023
pages de payement en ligne 11
L’évolution du Web a entraîné celle des
langages dédié à son utilisation :
Langage de mise en forme :
HTML
XHTML
VRML
WML
…
11 September 2023 12
6
Langages de scripts (coté client):
Javascript
Jscript
VBScript
…
11 September 2023 13
Langages de scripts (coté serveur):
PHP
JSP
ASP
…Autres langages utilisées dans les applications
Web:
Java
C#
Perl
…
11 September 2023 14
7
Les serveurs Web ne sont pas liés a une
architecture matérielle, aussi existent-ils pour
plusieurs systèmes d’exploitation.
Les serveurs Web les plus utilisés sont :
Apache Httpd
IIS
SunOne
Tomcat …
11 September 2023 15
Vous avez besoin :
d'un éditeur de texte : Bloc note,Notepad..
d’un navigateur
Vous n’avez pas besoin :
d'être connecté pour écrire, voir et peaufiner vos pages
Html.
11 September 2023 16
8
Lets Go !!!!!!!!!
11 September 2023 17
Le langage Html est un langage qui permet de créer une
page web . il est l'abréviation de Hyper Text Markup
Language
Version 5 ,DHTML (Dynamic HTML) …
XHTML : reformulation du HTML en XML
11 September 2023 18
9
11 September 2023 19
11 September 2023 20
10
<html>
<head>
<title>
Bonjour monde
</title>
</head>
<body>
Ceci est tout simple
</body>
</html>
11 September 2023 21
Le langage HTML n'est pas un langage de
programmation proprement dit ! comme le c /
c++ , vb …etc . Ce sont "simplement" des balises
(ou tag en anglais) pour mettre en forme du
texte et des images !
11 September 2023 22
11
NB : les caractères blancs (espaces,
tabulations et retours à la ligne) ne sont pas
interprétés
11 September 2023 23
Définir un dossier et une arborescence pour le
site
Donner une extension html ou htm aux
fichiers crées
Tester l’affichage dans les navigateurs
importants
Internet explorer
Firefox
11 September 2023 24
12
Une balise est une "instruction" comprise entre
crochets < > qui possède un nom et parfois des
attributs.
La plupart doivent être fermées
▪ Exemple : <b> votre texte </b>
Peuvent posséder des attributs
<balise attribut1=valeur_num attribut2=“valeur_alpha-
numérique”> … </balise>
11 September 2023 25
Un document html "standard" doit impérativement
commencer par <HTML> et finir par </HTML>.
Les commandes HTML ont une marque de début et
une marque de fin. Certaines marques de fin sont
facultatives.
11 September 2023 26
13
Les commandes HTML utilisent les caractères < et >
comme délimiteurs.
Les commandes HTML peuvent être écrites en
minuscules ou en majuscules.
Tout ce qui n'est pas compris entre "<" et ">" est
tout simplement considéré comme du texte à
afficher.
11 September 2023 27
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
<HEAD> Ceci est le début de la zone d'en-tête.
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.
11 September 2023 28
14
sert à indiquer le
type du document
Entête de la page
Corp de la page
11 September 2023 29
11 September 2023 30
15
11 September 2023 31
Voici enfin le moment de créer votre première page HTML.
Allez au boulot !!!!!!!!!!!
11 September 2023 32
16
11 September 2023 33
Imbrication : le chevauchement des balises
n’est pas permis
<h1><b> bla bla </h1></b>
11 September 2023 34
17
BASE permet de conserver une trace de l’URL du document, par
exemple :
<BASE HREF= “ http://hote/repertoire/document.html ”>
Ceci autorise l’écriture d’URL dans le reste du document sous forme
partielle, basée sur l’URL de base, par exemple :
<IMG SRC= “ images/monimage.gif ”> peut être écrit à la place de
<IMG SRC= “ http://hote/repertoire/images/monimage.gif ”>
11 September 2023 35
- META intègre des informations spéciales concernant le document,
informations qui ne sont pas définies par d’autres éléments HTML.
- <META NAME="Auteur" CONTENT="Johann">
11 September 2023 36
18
- TITLE indique le nom du document HTML, qui sera affiché dans la barre
de titre.
- Exemple:
<HEAD><TITLE>Guide HTML</TITLE> </HEAD>
11 September 2023 37
H1 -> H6 Définit 6 niveaux pour les titres. Chaque niveau possède son
propre style.
11 September 2023 38
19
Paramètres : L’attribut ALIGN spécifie l’alignement horizontal
d’un titre
ALIGN = LEFT/RIGHT/CENTER
<H1 align="right">
11 September 2023 39
P Constitue un nouveau paragraphe = un double retour à la
ligne.
: L’attribut ALIGN spécifie l’alignement horizontal
Paramètres
d’un paragraphe
ALIGN = LEFT/RIGHT/CENTER
<P align="right">
11 September 2023 40
20
11 September 2023 41
Pour aligner du texte, on peut utilisé l'attribut ALIGN
avec la balise <P> lui affectant la valeur Center , ou le
tag <CENTER>. Il existe une balise permettant d'aligner
différents éléments. c'est le tag :
<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
11 September 2023 44
21
Le tag <BLOCKQUOTE> permet de décaler le
paragraphe à droite
11 September 2023 45
Pour afficher les symboles <, >, &, " sans
qu'ils ne soient interprétés comme des
délimiteurs de marqueurs, il faut utiliser
les codes suivant :
11 September 2023 46
22
< <
> >
& &
" "
11 September 2023 47
Code Majuscule obtenue Code Minuscule obtenue
Á Á á á
À À à à
  â â
à à ã Ã
Å Å
Ä Ä &aulm; ä
&Aelig; Æ æ æ
Ç Ç ç ç
É É é é
È È è è
Ê Ê ê ê
11 September 2023 48
23
<br> saut de ligne (sans balise fermante)
<hr> ligne horizontale
▪ Paramètres :
SIZE : spécifie l’épaisseur de la barre
WIDTH : Spécifie la longueur de la ligne
ALIGN : Spécifie l’alignement de la ligne
<hr size=epaisseur width=largeur align=alignement color=couleur >
11 September 2023 49
11 September 2023 50
24
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<!--C'est fini-->
</BODY>
</HTML>
11 September 2023 51
<sup> le texte sera mis en exposant
<sub> le texte sera mis en indice
<s> le texte sera barré
<u> le texte sera souligné
11 September 2023 52
25
Avec la balise <font> on peut jouer sur la taille
( size =“1” ), la taille relative ( size =“+1” ) , la
couleur ( color =“green” ) et la police des
caractères ( face =“Lucinda,Arial” )
<FONT SIZE=5>texte</FONT>
<FONT COLOR=blue face= arial size= 20> coucou</FONT>
11 September 2023 53
Les couleurs peuvent être indiquées par un codage
hexadécimal ou par une désignation significative
plus facile à mémoriser.
Le code couleur se compose de 3 valeurs
hexadécimales
Rouge
Verte
Bleue
11 September 2023 54
26
La couleur html se présente comme
#RRGGBB
Exemples :
white : #FFFFFF
gray : #808080
green : #00FF00
orange : #FFA500
11 September 2023 55
Voici les codes de quelques couleurs
basiques.
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000
11 September 2023 56
27
Faire l’atelier N°1
11 September 2023 57
Réaliser la page Web simple illustrée par la
copie écran ci-dessous.
11 September 2023 58
28
BACKGROUND : Permet de mettre une image dans le fond de la page.
Exemple : <BODY BACKGROUND="cahier.gif">
BGCOLOR : Permet de changer la couleur de l'arrière plan sans avoir à
charger une image, là aussi, il faudra veiller à ce que le texte et les liens
soient visibles dans tous les cas. Par défaut, le fond de page est en blanc,
le texte en noir, les liens en bleu souligné, les liens activés en rouge et les
liens visités en violet.
11 September 2023 60
Option de body
▪ TEXT : Permet de changer la couleur du texte, par défaut cette
couleur est en principe le noir, mais elle peut-être changée dans les
préférences du browser.
▪ LINK : Permet de changer la couleur des liens.
▪ ALINK : Permet de changer la couleur des liens sélectionnés.
▪ VLINK : Permet de changer la couleur des liens déjà visités.
<BODY BGCOLOR="couleur" TEXT="couleur" LINK="couleur"
ALINK="couleur" VLINK="couleur">.
11 September 2023 61
29
<UL>
<LH>Entête en option</LH>
<LI>Point numéro1
<LI>Point numéro2
<LI>Point numéro3
<LI>Point numéro4
</UL>
11 September 2023 62
<OL>
<LH>Entête en option</LH>
<LI>Point numéro1
<LI>Point numéro2
<LI>Point numéro3
<LI>Point numéro4
</OL>
11 September 2023 63
30
11 September 2023 64
11 September 2023 65
31
11 September 2023 66
11 September 2023 67
32
11 September 2023 68
11 September 2023 69
33
11 September 2023 72
Lien externe :
<a href=“URL cible”> … </a>
<a href="https://www.nticrabat.com"> NTIC</a>
Lien local :
<a href="../index.html"> ... </a>
(c’est une adresse relative)
<a href="file:///lecteur:/répertoire/index.html"> ... </a>
(c’est une adresse absolue)
11 September 2023 74
34
11 September 2023 75
11 September 2023 76
35
11 September 2023 77
Des liens peuvent aussi pointer vers un
endroit précis du même document ou d'un
autre fichier. C'est ce qu'on appelle les ancres,
ancrages ou pointeurs [Anchor].
11 September 2023 78
36
On veut se positionner dans cet exemple en haut de
la page (le titre).
▪ Identifier la cible avec <A NAME="titre">Texte ou image</A>
▪ utiliser le marqueur: <A HREF="#Titre">pour y aller</A>
11 September 2023 79
11 September 2023 80
37
11 September 2023 81
11 September 2023 82
38
<img src=“chemin” alt =“texte” > ou
<img src=URL>
<img src=“mon_image.gif” align=TOP>
<a href=“URL”> <img … > </a>
11 September 2023 84
11 September 2023 85
39
11 September 2023 86
11 September 2023 87
40
11 September 2023 89
11 September 2023 90
41
11 September 2023 91
11 September 2023 92
42
Tableaux
collspan=2
cellspacing=1
rowspan=2
cellspdding=3 Texe !!
width=40%
11 September 2023 93
11 September 2023 94
43
11 September 2023 96
11 September 2023 98
44
11 September 2023 101
<table border="1">
<tr>
<th>Prénom</th>
<th>Ville</th> Une table HTML est définie avec l'étiquette <table>
</tr>
Chaque ligne de table est définie avec l'étiquette <tr>.
<tr> L’en- tête de table est définie avec l' étiquette <th>
<td>Mohamed</td> Par défaut, les titres des tableaux sont en gras et centré. Une
table de données / cellule est définie avec l' étiquette <td>.
<td>Casablanca</td>
</tr>
<tr>
<td>Ali</td>
<td>Fes</td>
</tr>
</table>
11 September 2023 103
45
<table border="1">
<thead>
<tr>
<th>Prénom</th>
<th>Ville</th>
</tr>
</thead> L'élément <thead> définit l'en-tête des colonnes d'un tableau.
<tbody> L’élément <tbody> définit le corps du tableau
<tr> L’élément <tfoot> définit le pied du tableau
<td>Mohamed</td>
<td>Casablanca</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Ali</td>
<td>Fes</td>
</tr>
</tfoot>
</table>
11 September 2023 104
11 September 2023 105
46
11 September 2023 107
47
