Technologies du Web

Université Ziane ACHOUR -DJELFA

02 février 2020

Technologies du Web 02 février 2020 1 / 107

Structure d’un document HTML

Technologies du Web 20 / 107

Généralités

HTML est se réfère aucode qui

structure tous les éléments d’une
page web. Il ne définit pas lestyle de
la page et n’ajoute pas
d’interactivité complexe. Il laisse tout
ça au CSS et au JavaScript.
Il sert à indiquer au navigateur
(internet explorer, firefox, safari . . . )
comment afficher la page web
Figure : HTML 5

Technologies du Web 21 / 107

Généralités

le HTML5 sert principalemenent à :

Afficher un contenue (texte, image, . . . )
Créer des liens hypertext et relier les pages entre elles
Structuré un document (titre, paragraphe . . . )
Indiquez au navigateur ce qu’il doit afficher
Bien indexer votre page web dans les moteur de recherches (choix de
balise, mot-clé . . . )

Technologies du Web 22 / 107

Principe de balisage
Qu’est ce qu’une balise HTML 5 ?

Un document HTML est un fichier texte qui contient des balises (ou tag en
anglais). Ces balises sert à :
Décrire correctement la structure du document.
Définir au navigateur comment afficher le document.
Intégrer différents médias comme les images, vidéos ou audio.

Technologies du Web 23 / 107

Principe de balisage
La syntaxe des balises
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 (>)

Figure : Syntaxe d’une balise

Technologies du Web 24 / 107
Principe de balisage
Balise imbriquée

Figure : Exemple de balises imbriquées

Technologies du Web 25 / 107

Principe de balisage
Structure d’un document en HTML 5

Figure : Structure d’un document HTML

Technologies du Web 26 / 107

Les principales balises HTML

Figure : Structure de base d’un document HTML

Technologies du Web 27 / 107

Les principales balises HTML

Technologies du Web 28 / 107

Les principales balises HTML

Figure : Page HTML

Technologies du Web 29 / 107

Les principales balises HTML

Plusieurs balises ont été introduites avec HTML5 pour délimiter les diffé-
rentes zones qui constituent la page web :
- <header> : en-tête ;
- <footer> : pied de page ;
- <nav> : liens principaux de navigation ;
- <section> : section de page ;
- <aside> : informations complémentaires ;
- <article> : article indépendant.

Technologies du Web 30 / 107

XML

Le langage XML (eXtended Markup Language) est un format général de

documents orienté texte. Il s’est imposé comme un standard incontournable
de l’informatique. Il est aussi bien utilisé pour le stockage de documents
que pour la transmission de données entre applications. Sa simplicité, sa
flexibilité et ses possibilités d’extension ont permis de l’adapter à de multiples
domaines allant des données géographiques au dessin vectoriel en passant par
les échanges commerciaux. De nombreuses technologies se sont développées
autour de XML et enrichissent ainsi son environnement.

Technologies du Web 31 / 107

Intérêts XML

Séparation stricte entre contenu et présentation

Simplicité, universalité et extensibilité
Format texte avec gestion des caractères spéciaux
Structuration forte
Modèles de documents (DTD)
Format libre

Technologies du Web 32 / 107

Pourquoi XML ?

Figure : Exemple information HTML

Technologies du Web 33 / 107

Pourquoi XML ?

Figure : Exemple information XML

Technologies du Web 34 / 107

document type definition : DTD

Le rôle d’une DTD (Document Type Definition) est de définir précisément

la structure d’un document. Il s’agit d’un certain nombre de contraintes que
doit respecter un document pour être valide. Ces contraintes spécifient quels
sont les éléments qui peuvent apparaître dans le contenu d’un élément, l’ordre
éventuel de ces éléments et la présence de texte brut. Elles définissent aussi,
pour chaque élément, les attributs autorisés et les attributs obligatoires.

Technologies du Web 35 / 107

document type definition : DTD

Figure : Exemple DTD

Technologies du Web 36 / 107

document type definition : DTD

Pour chacun des éléments, on définit sa composition par

< !ELEMENT nom_element (structure)>
- <firsname>, <surname>, <birthday>, ... sont des éléments qui
peuvent contenir du texte comme l’indique #PCDATA. On parle de
contenu mixte
Deux autres types pour les éléments existent, EMPTY et ANY, empty
signifie que l’élément est vide, ANY indique que l’élément peut
comporter tout autre élément déclaré dans la DTD.

Technologies du Web 37 / 107

document type definition : DTD

Figure : Exemple d’un document XML

Technologies du Web 38 / 107
Les URLs

Technologies du Web 39 / 107

Que veut dire URL ?

URL est l’acronyme de Uniform Resource Locator ou en français localisateur

uniforme de ressource.
Une URL c’est une adresse web, c’est ce qui vous permet d’accéder à un site
internet. Par exemple :
www.univ-djelfa.dz
www.djelfa.info/
https ://st.univ-djelfa.dz/en/pages/132/telecommunication-
department

Technologies du Web 40 / 107

les différents composants d’une URL

le protocole : le plus souvent c’est un ”http ://”, mais ça peut être

“https ://” ou “ftp ://”.
http, pour la consultation de pages web
ftp, pour la consultation de sites FTP
telnet, pour la connexion à un terminal distant
mailto, pour l’envoi d’un courrier électronique
le nom de domaine : univ-djelfa.dz par exemple. C’est l’adresse du
site ou se trouve la page.
le dossier : /en ou /pages par exemple pour l’URL de cet article de
blog. Le dossier n’est pas toujours présent dans une URL.
la page : /telecommunication-department dans ce cas. C’est le nom
du fichier de la page sur le serveur.

Technologies du Web 41 / 107

Les liens HyperText

Technologies du Web 42 / 107

Les liens HyperText

Les liens hypertextes sont ces éléments des pages web qui les lient entre elles
et permettent de naviguer de l’une à l’autre lorsque l’on clique dessus. Les
liens hypertextes sont soit des images soit des parties de texte cliquables,
que les concepteurs de page web signalent en général, par convention, en
les soulignant. Au survol de la souris, le curseur se transforme en une petite
main. Au clic sur le texte ou l’image, une nouvelle page se charge dans le
navigateur.

Technologies du Web 43 / 107

Les liens HyperText

Les liens HyperText en HTML se composent de deux éléments principaux :

un texte ou une image cliquables affichés dans la fenêtre de ton
navigateur,
l’URL de la ressource vers laquelle « pointe » le lien en question,
URL qui indique sa localisation sur l’un des millions d’ordinateurs
serveurs du Word Wide Web.

Technologies du Web 44 / 107

Utilisation des liens HyperText en HTML
Lien Locale

Technologies du Web 45 / 107

Utilisation des liens HyperText en HTML
Lien Externe

Technologies du Web 46 / 107

Utilisation des liens HyperText en HTML
Lien Dans le même document

Technologies du Web 47 / 107

Les Frames

L’utilisation de cadres (les "frames") permet de diviser l’écran du navigateur

en plusieurs zones. Chaque zone peut contenir une page html.

Technologies du Web 48 / 107

Les Frames
L’élément FRAMESET

Il permet de définir le nombre de zones et leurs dimensions. Les deux princi-

paux attributs sont rows et code.
ROWS="h1,h2,...hn"
permet de faire des zones horizontales.
COLS="l1,l2,...ln"
permet de faire zones verticales.

Technologies du Web 49 / 107

Les Frames
L’élément FRAMESET

Quelques exemples
- <FRAMESET rows="25%,25%,50%"> ... </FRAMESET>
- <FRAMESET rows="*,*,2*"> ... </FRAMESET>
- <FRAMESET cols="100,*"> ... </FRAMESET>
- <FRAMESET cols="100,50%,*"> ... </FRAMESET>
- <FRAMESET rows="*,*,*" cols="80,*,*,*"> ... </FRAMESET>

Technologies du Web 50 / 107

Les frames
Les éléments FRAMESET peuvent être imbriqués :

Figure : Exemple Frameset imbriqués

Technologies du Web 51 / 107

Les Frames
L’élément FRAME

L’élément FRAME permet de définir le contenu de chacune des zones. Pour

cela, on utilise deux attributs :
src=url pour indiquer le fichier à placer dans la zone
name=nomDeZonepermet de nommer la zone afin qu’elle puisse
devenir la cible d’un lien (on utilisera alors l’attribut target de la balise
<A> pour y accéder.

Technologies du Web 52 / 107

Les Frames

Technologies du Web 53 / 107

Les Frames

Figure : Exemple Frameset avec frame

Technologies du Web 54 / 107

Les frames

D’autres attributs permettent de préciser différents paramètres :

marginwidth
précise la largeur des marges latérales (nombre de pixels)
marginheight
précise la hauteur des marges hautes et basses (nombre de pixels)
scrolling
précise si l’on doit afficher un ascenseur ou nom — les valeurs
possibles sont yes, no et auto (valeur par défaut)
noresize
Indique que la taille de la zone ne peut pas être modifiée par
l’utilisateur.
frameborder
Indique si le cadre doit être séparé des autres cadres (1 pour oui
—valeur par défaut, 0 pour non)

Technologies du Web 55 / 107

Les Frames
Envoyer un lien vers un cadre

Figure : Exemple d’un lien vers un frame

Technologies du Web 56 / 107

CSS
Les feuilles de style

L’utilisation de feuilles de styles permet de séparer la forme du fond présente

de nombreux avantages. En particulier la conception et la maintenance des
sites sont simplifiés. De plus leur utilisation permet d’améliorer l’accessibi-
lité des sites de façon sensible, sans altérer du tout la qualité visuelle des
documents, bien au contraire.

Technologies du Web 57 / 107

CSS
Principes généraux

Voici un exemple de règle CSS permettant d’afficher les entêtes principaux

(H1) en bleu :

Une règle CSS est composée de 2 parties : un sélecteur (ici H1) et une
déclaration (color :blue). Une déclaration à elle-même deux parties : une
propriété (color) et une valeur (blue).
La liste des propriétés : https ://www.w3.org/Style/CSS/all-properties.en.html

Technologies du Web 58 / 107

CSS

Les sélecteurs sont les éléments HTML, on peut donc indiquer pour chaque
élément un ensemble de déclarations (lorsqu’il y en a plusieurs, on les sé-
pare avec des points virgules). De même si des déclarations s’appliquent à
plusieurs sélecteurs, on peut les regrouper.

Technologies du Web 59 / 107

CSS
Placer une feuille de style

où styles.css est le nom du fichier contenant les styles.

Technologies du Web 60 / 107