Les technologies du Web

Introduction
• Internet (Interconnected Networks) est l’infrastructure réseau
qui interconnecte des réseaux publics et privés d'ordinateurs à
l’échelle mondiale.

Services fournis sur Internet:

o Exploration des documents hypertextes: Web;

o Courrier électronique;

o Messagerie instantanée;

o Partage et transfert de fichiers;

o Communications téléphoniques.

2
Web
• Le Web (World Wide Web) est un service logiciel qui utilise le réseau Internet
pour permettre aux utilisateurs l’exploration et la consultation de documents,
appelés pages web, mis en ligne par des sites web.
• La navigation entre ces documents est assurée par des liens hypertextes, ou
hyperliens; ils sont ainsi appelés documents hypertextes.
• La mise en œuvre de ce système a nécessité l’utilisation d’un ensemble de
technologies, dites de base:
1. HTML est le langage de structuration des pages web (documents HTML);
2. URL (Uniform Resource Locator) est la technologie d’identification uniforme des
pages Web: adresse d'une page sur Internet.
3. HTTP (HyperText Transfert Protocol) est le protocole (Langage de
communication) qui assure la communication entre les serveurs qui donnent
accès aux documents et les clients qui les utilisent.

3
 Architecture du Web
Le Web est un système conçu selon une architecture logicielle dite client/serveur. Dans
cette architecture, le client et le serveur sont dotés d'applications logicielles qui
communiquent par le protocole http:
1. Client http permet l’interrogation des serveurs http par utilisation de requêtes http
et la récupération des documents hypertextes retournés en réponse. Cette
application est en général un navigateur (Internet Explorer, Firefox, Google
Chrome…) qui permet en plus d'interpréter et visualiser les documents hypertextes.
2. Serveur http donne accès aux sites et au documents hypertextes exposés sur le
réseau Internet par des serveurs Web.

4
Technologies
• HTML
Langage utilisé pour décrire et définir le contenu d'une
page web.

• CSS
Langage utilisé pour enrichir l'apparence du contenu d'une
page web.

• JavaScript
langage utilisé pour ajouter un côté interactif et dynamique
a une page web. 5
 HTML
• Le HTML Hypertext Markup Language est le langage à balises qui est
utilisé pour construire des documents HTML (pages web) pouvant être
visualisés sur internet par un navigateur.
• Une page Web peut incorporer du texte, des images, de l'animation et du
son.
• Pour créer un programme en HTML, nous avons simplement besoin d'un
éditeur de texte (bloc-notes, notepad++,…) et d'un navigateur internet
pour visualiser le rendu Web.
• Règles de base :
- Un fichier HTML "standard" doit impérativement avoir un nom de fichier (à ne
pas confondre avec le titre de la page) qui se termine par l'extension .html.
- La page d'accueil d'un site Web doit s'appeler index.html.
- Les commandes HTML peuvent être écrites en minuscules ou en majuscules.

6
Visualisation du code HTML d’une page Web

7
Eléments et balises
• Un élément HTML est une commande permettant de définir chaque
contenu d'une page web et également de passer certaines informations
utiles au navigateur pour l'afficher.

• Un élément HTML peut être soit constitué d’une paire de balises (ouvrante
et fermante) et d’un contenu, soit d’une balise unique appelée balise
orpheline.

8
Attributs
• Les attributs permettent de définir plus précisément un élément en lui
apportant des informations supplémentaires sur son apparence ou son
comportement.

• Un attribut contient toujours une valeur, qu’on peut parfois omettre dans le
cas des attributs ne possédant qu’une seule valeur par défaut.

9
Imbrication des balises
• Dans un code HTML on peut combiner plusieurs balises. Par exemple un
paragraphe peux comporter un texte à la fois en gras et en italique.
• Lorsque l'on combine dans un code plusieurs balises ouvrantes, il est
impératif de respecter leur hiérarchie: la première ouverte devra être la
dernière à être fermée.
Exemple avec balises chevauchées:
<p><b><u>Ici les balises sont mal </b>imbriquées</u></p>
Exemple avec balises correctement imbriquées:
<p><b><u>Ici les balises sont correctement imbriquées</u></b></p>

10
La structure minimale d’un code HTML
<!DOCTYPE html>
<html>
<head>
<title> Titre </title>
<meta charset="utf-8">
</head>
doctype sert à indiquer le type du document.
<body>
html balise racine qui sert à représenter la page en soi: on y insère
</body> tout le contenu de notre page à l’intérieur de celui-ci.
</html>
head contient des éléments qui vont servir à fournir des informations
sur la page au navigateur, comme le titre de la page ou encore le type
d’encodage utilisé pour que celui-ci puisse afficher les caractères de
texte correctement.

body contient tous les éléments définissant les contenus visibles de la

page, et notamment les différents textes présents dans la page, les
images, etc…

11
L’élément body
L'élément body représente le contenu principal du document HTML. Il ne peut y avoir
qu'une balise <body> par document. On peut l'utiliser avec des attributs pour mettre
en forme tout le document.
Attribut Effet
text="couleur" Colorer le texte de la page
bgcolor="couleur" Colorer le fond d'écran de la page
link="couleur" Colorer les liens de la page
alink="couleur" Colorer les liens actifs de la page
vlink="couleur" Colorer les liens visités de la page
background=" image" Mettre une image de fond d'écran sur la page
lang="langue" Site rédigé en plusieurs langues
topmargin="taille"
Définir les marges du texte
leftmargin="taille"
Exemple:
<body text="black" bgcolor="yellow" link="blue" alink="red" vlink="green">

12
L'indentation et les commentaires
• Commentaire: texte qui sert simplement de mémo, Il n'est ni affiché
ni lu par l'ordinateur.
• Laisse des indications sur le fonctionnement de la page Web
• Définit par une balise HTML de forme spéciale:
<!-- Ceci est un commentaire -->
• Indentation: création des retrait en début de chaque ligne de code
dans l'éditeur de façon cohérente et logique pour structurer et
organiser le programme HTML.
• Code plus propre et plus lisible, donc plus compréhensible;
• Détection plus facile des éléments et des différentes partie du code.
• Détection plus facile des erreurs potentielles du code;

13
 L'indentation et les commentaires
• Commentaire: texte qui sert simplement de mémo, Il n'est ni affiché
ni lu par l'ordinateur.
• Laisse des indications sur le fonctionnement de la page Web
• Définit par une balise HTML de forme spéciale:
<!-- Ceci est un commentaire -->
<!DOCTYPE html> <!DOCTYPE html>
•
<html> Indentation: création des retrait e n début de chaque ligne de code
<html>
<head> dans l'éditeur de façon cohéren te et logique <head>pour structurer et
<!-- En-tête de la page --> <!-- En-tête de la page -->
organiser le programme
<meta charset="utf-8" />
HTML. <meta charset="utf-8" />
<title>Titre</title> <title>Titre</title>
</head>
• Code plus propre et plus lisible , d onc plus compréhensible;
</head>
• Détection plus facile des élém ents et des différentes partie du code.
<body> • <body>du code;
Détection plus facile des erreu rs p otentielles
<!-- Corps de la page --> <!-- Corps de la page -->
<p>Bonjour tout le monde!</p> <p>Bonjour tout le monde!</p>
</body> </body>
</html> </html>

14
 Les titres d'un document HTML
Les éléments <h1> à <h6> représentent six niveaux de titres dans un document, <h1> est
le plus important et <h6> est le moins important. Un élément de titre décrit brièvement
le sujet de la section qu'il introduit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Niveaux de titres</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>

15
Formatage des paragraphes
Elément Effet
<p>Texte </p> Définir un paragraphe
<p align="center">Texte </p> Définir un paragraphe avec alignement centré
<br> Définir un retour à la ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Paragraphes</title>
</head>
<body>
<p align="left"> Bonjour
et bienvenue sur mon site! </p>
<p> Bonjour <br> et bienvenue sur mon site! </p>
</body>
</html>
16
Formatage du texte en HTML
Formater un texte signifie simplement tout simplement modifier l'apparence
du texte (on dit qu'on le « met en forme »).
Elément Effet
<b>Texte </b> Définir un texte en gras
<i>Texte </i> Définir un texte en italique
<u>Texte </u> Souligner un texte
^Texte Mettre un texte en exposant
_Texte Mettre un texte en indice
<s>Texte </s> Rayer un texte
<font face="Police de caractère"> texte </font> Définir une police de caractère
<font size ="taille">Texte </font> Définir la taille d'un texte
<font color="couleur">Texte</font> Définir la couleur d'un texte

17
Les listes
Les listes nous permettent souvent de mieux structurer un texte et d'ordonner ses
informations.

Les listes de définitions:

Fraises Les balises <dl></dl> définissent la liste.
Fruit de la famille des Rosacées
Framboises
Les balises <dt></dt> définissent le terme à définir.
Fruit recouvert de poils Les balises <dd></dd> définissent la signification
microscopiques du terme.
Cerises
Fruit charnu à noyau

les listes non ordonnées ou listes à puces:

🞄 Fraises
La balises <ul></ul> définissent la liste.
🞄 Framboises
🞄 Cerises
La balises <li></li> définissent une entrée de la liste

les listes ordonnées ou listes numérotées:

1. Fraises La balises <ol></ol> définissent la liste.
2. Framboises
La balises <li></li> définissent une entrée de la liste
3. Cerises
18
Listes de définitions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listes de définitions</title>
</head>

<body>
<h2>Mes fruits préférés:</h2>
<dl>
<dt>Fraises</dt>
<dd>Fruit de la famille des Rosacées</dd>
<dt>Framboises</dt>
<dd>Fruit recouvert de
poils<br>microscopiques</dd>
<dt>Cerises</dt>
<dd>Fruit charnu à noyau</dd>
</dl>
</body>
</html>

19
Listes non ordonnées
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listes à puces</title>
</head>

<body>
<h2>Mes fruits préférés</h2>
<ul type="disc">
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
</body>
</html>

Attribut de ul Effet
Type="marqueur" Définir le type de marqueur de la liste (disc,circle,square)

20
Listes ordonnées
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listes numérotées</title>
</head>

<body>
<h2>Mes fruits préférés</h2>
<ol type="3" start="1" reversed>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
</body>
</html>

Attribut de ol Effet
Type="marqueur" Définir le type de marqueur de la liste (1,i,I,A,a)
start="numéro" Indiquer la valeur du marqueur du début
reversed Inverser le sens de numérotation (du bas vers le haut)
21
Insertion d'une ligne de séparation
• On peut insère une ligne horizontale de séparation de paragraphes
dans un document HTML grâce à l'élément <hr> .

Attribut Effet
size="taille" Détermine l'épaisseur du trait
align="alignement" Précise l'alignement du trait
color="couleur" Spécifier la couleur du trait
width="largeur" Définir la longueur du trait en pixel ou en pourcentage

Exemple:
<hr width="50%" size="4" color="blue" align="center">

22
Insertion d'images
• Il existe différents formats d'image (jpg, png, gif,…) que l'on peut utiliser et
on doit les choisir selon le type d'image:
– JPEG : pour les photos ;
– PNG : pour toutes les autres graphiques;
– GIF : image limitée en nombre de couleurs mais qui peut être aussi animée.
• On peut insérer une image dans une page Web soit à titre décoratif ou à
titre illustratif.
– S'elle n'apporte aucune information, c'est juste à titre décoratif, placez l'image
dans un élément paragraphe.
– S'elle apporte une information au texte, placez l'image dans un élément figure.
• On peut insérer une image .png ou une icone .ico dans la barre du titre
d'une page Web.
– Ajouter dans la partie entête la balise: <link rel="icon" href="favicon.ico" >

23
Insertion d'images
On insère une image avec la balise orpheline <img>, elle doit obligatoirement
comporter au moins les deux attributs: src et alt.
Attribut Effet
src="chemin\nom" Préciser le chemin vers le fichier image et son nom
Préciser un texte alternatif qui s'affichera si l'image ne peut pas
alt="texte descriptif"
s'afficher
border="taille" Spécifier la taille de la bordure de l'image
width="largeur" Définir la largeur de l'image
heigth="hauteur" Définir la hauteur de l'image
title="aide" Afficher une info bulle d'aide au parcours de l'image
align="alignement" Aligner l'image par rapport au texte(top, middle, bottom, left, right)
vspace="marge verticale" Définir la marge verticale par rapport à l'image
hspace="marge horizontale" Définir la marge horizontale par rapport à l'image

Exemple:
<p><img src="images/decanat.jpg" width="270" height="295" alt=" logo
l'ISMS - ESP" border="0" title="logo l'ISMS"></p>

24
Insertion de figures
• On peut insérer une figure dans un document HTML grâce à
l'élément <figure> .
Exemple:
<figure> <img src="images/isms.jpg" alt=" logo ISMS "> </figure>

• On peut accompagner une figure d'une légende par utilisation de

l'élément <figcaption>.
Exemple
<figure align="center">
<img src="images/isms.jpg" alt="Photo de la Fpt">
<figcaption>Logo ISMS - ESP</figcaption>
</figure>

25
Liens hypertexte
• Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une
nouvelle page. On peut insérer dans cet élément toute sorte de textes, images et autres
balises.

• Un lien sera représenté dans le code par la balise <a>. Tout ce qui sera dans cette balise
fera office de lien. L'adresse de destination doit se trouver dans l'attribut href.

Exemple de lien avec texte:

<a href="adresse/de/destination.html">Texte du lien</a>

Exemple de lien image :

<a href="adresse/de/destination.html"><img src="adresse/de/l/image"></a>

• L'attribut title, quant à lui, permet de renseigner un petit descriptif sur le contenu de la
page cible, et est un atout non négligeable en matière de référencement et
d'accessibilité.

26
Liens hypertexte
Les liens externes:
• Les liens externes peuvent être vers des pages Web, vers des téléchargement de
fichiers, vers des adresse électronique ( mailto: suivi de l'adresse e-mail ),...
Exemples:
<a href="https://www.mozilla.org/fr/"><b>Site mozilla</b></a>
<a href="fichier.doc"><b>télécharger le fichier</b></a>
<a href="mailto:[email protected]"><b>Mon adresse mail</b></a>

Lien vers une ancre:

• Une ancre est une sorte de point de repère qu'on peut mettre une page HTML
lorsqu'elle est très longues. Il est utile de faire un lien amenant aux parties
intéressantes du document.
– Utilisez l'attribut name pour donner un nom à l'ancre:
<a name="mon_ancre">Titre</a>
– Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href
contiendra un dièse (#) suivi du nom de l'ancre:
<a href="#mon_ancre">Aller vers l'ancre</a>
27
Les tableaux
Les tableaux permettent de diviser la page en zones et de remplir ces zones avec des
objets (textes, images, couleurs).
Balise Effet
<table> et </table> Définir un tableau
<tr> et </tr> Définir une rangée
<th> et </th> Définir une ligne d'entête (facultatif)
<td> et </td> Définir une cellule
<caption> texte </caption Ajouter une légende au tableau avec possibilité d'alignement

Attribut de table Effet

bgcolor="couleur" Mettre un fond de couleur
width="50%" Largeur du tableau (en % ou en pixels)
border="taille" Taille des bords (0=pas de bords)
bordercolor="couleur" Couleur des bordures
cellpadding="valeur" Marges intérieures des cellules
cellspacing="valeur" Espacement entre les cellules
rowspan="nombre de cellules" Fusionner plusieurs cellules adjacentes sur une colonne
colspan="nombre de cellules" Fusionner plusieurs cellules adjacentes sur une ligne
28
Les tableaux
<body>
<table border="2" cellpadding="4" cellspacing="2" bgcolor="aquamarine">
<tr>
<td>Cellule 1</td>
<td colspan="2">2 cellules fusionnées (sur la même ligne)</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
<td rowspan=2>2 cellules fusionnées (sur la même colonne)</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>
</body>

29