Développement Web : HTML

ENSA Khouribga
Pr. OURDOU Amal
Année Universitaire: 2023/2024

Développement web [Link]@[Link]

Le Fonctionnement du Web

Développement Web 2
Le Fonctionnement du Web

Comment ça marche le web ?

‒ Internet est basé sur une architecture de réseau nommée client-

serveur.
‒ Avec cette architecture, on distingue trois rôles:
 Le Serveur : une machine qui héberge les pages d'un site.
 L’administrateur : personne qui crée et met à jour le site.
 Le Client : personne qui consulte le site via Internet.

Développement Web 3
Le Fonctionnement du Web

Comment ça marche le web ?

Développement Web 4
Le Fonctionnement du Web

Comment ça marche le web ?

Développement Web 5
Le Fonctionnement du Web

Page Web : Technologies utilisés pour la création

Développement Web 6
Le Fonctionnement du Web

Site Web : Définition

‒ Un Site Web est un ensemble de page web liées entre elles et
regroupant plusieurs ressources web.
‒ Une Ressource Web est :
 Toute sorte de document accessible par le Web
 Page Web, images, vidéos, documents PDF, …
‒ On distingue deux types de Site Web:
1. Statique,
2. Dynamique.

Développement Web 7
Le Fonctionnement du Web

Site Web : Types

1. Site Web Statique : les pages ne sont pas mise à jour automatiquement.

Développement Web 8
Le Fonctionnement du Web

Site Web : Types

2. Site Web Dynamique: Mise à jour automatique des pages lorsque les
informations ont changées + Le contenu des pages Web est calculé
dynamiquement.

Développement Web 9
Généralités sur le Langage
HTML

Développement Web 10
Généralité sur le langage HTML

HTML : Définition
‒ HTML (HyperText Markup Language)
‒ Langage universel utilisé pour communiquer sur le Web.
‒ Reconnu par les navigateurs.
‒ Il permet de structurer le contenu d’une page Web
=> C'est donc en HTML que vous écrirez ce qui doit être affiché sur
la page : du texte, des liens, des images…
‒ Hypertexte, car il permet de créer des liens vers d’autres pages ou
d’autres parties d’une page.

Développement Web 11
Généralité sur le langage HTML

HTML : Principe de Balise

‒ Un langage de balise, pas un langage de programmation.
 les balises structure le contenue de la page (structure arborescente).
 Chaque balise a un rôle et donne du sens au contenu présenté.
 Une balise est un couple.
< nomBalise > texte </ nomBalise >
Exemple:

Développement Web 12
Généralité sur le langage HTML

HTML : Principe de Balise

‒ On peut imbriquer les balises les unes dans les autres.
<p> Hooo un bloc !! </p>
<div>
<p> Et un joli paragraphe </p>
<p> Et autre un joli paragraphe </p>
</div>

‒ Le nom des balises est prédéfini dans les spécifications HTML, on

ne peut donc PAS en inventer !

Développement Web 13
Généralité sur le langage HTML

HTML : Principe de Balise

 Attributs et valeurs
‒ Certaines balises peuvent être complétées par des attributs
précisant certains paramètres (l'adresse des liens, source d'une image
à afficher, etc.)
‒ Une balise peut contenir plusieurs attributs.

Développement Web 14
Généralité sur le langage HTML

HTML : Principe de Balise

 Attributs et valeurs (suite)
‒ Les attributs sont des éléments prédéfinis dans le HTML on ne
peut en « inventer » !
‒ On peut les mettre entre simple quote, double quote ou rien.
<div id=«toto»> ou bien <div id=toto>
‒ Les attributs sont toujours dans la balise ouvrante.

Développement Web 15
Généralité sur le langage HTML

HTML : Principe de Balise

 Attributs et valeurs (Exemple d’attribut)

‒ src = " " : donner la source (d’une image par exemple)
<img src="[Link]" width=400 height=250
alt="paysage nature" />

‒ href = " " : donner la destination d’un lien

<a href= "[Link] texte du lien </a>

Développement Web 16
 Généralité sur le langage HTML

HTML : Vos Premiers Outils

1. Editeur de texte : Il est recommandé d'utiliser un outil
Bloc-notes livré avec Windows un peu plus évolué comme
suffit (Pas de coloration Notepad++ ou tout autre équivalent
syntaxique + Nécessite de dans votre système d'exploitation.
connaître tout le langage)

Développement Web 17
Généralité sur le langage HTML

HTML : Vos Premiers Outils

2. Browser (Navigateur Web) :

‒ Il permet de tester la page web.
‒ Vous pouvez utiliser par exemple: Mozilla Firefox, Internet
Explorer, Google Chrome, Opera, Safari, ou tout autre navigateur
auquel vous êtes habitués pour aller sur le web.
‒ Il est conseillé de tester son site régulièrement sur différents
navigateurs.

Développement Web 18
Généralité sur le langage HTML

Structure d’un document HTML

Décomposons balise par balise !!!

Développement Web 19
Généralité sur le langage HTML

Structure d’un document HTML

1. La notion de DOCTYPE :
Indique au navigateur le type de document.
2. La balise <html>:
 Tout document HTML commence par la balise <html> qui se ferme
en fin de document : </html>
 La balise contient nécessairement deux balises définissant l'entête
(<head>) et le corps (<body>) du document.
 L’attribut lang permet de spécifier la langue de traitement du
document global.

Développement Web 20
Généralité sur le langage HTML

Structure d’un document HTML

3. La balise <head> :
Détermine l’entête du document et contient les méta-informations
3.1. La balise <title> : qui sera le titre du document.
 Sert en référencement (repris dans les résultats de recherche)

 Affichée dans l’onglet du navigateur

Développement Web 21
Généralité sur le langage HTML

Structure d’un document HTML

3. La balise <head> : (suite)
3.2. La balise <meta> :
‒ C’est un élément vide pour lequel l’information est contenue
dans ses attributs.
‒ Ces informations ne sont donc pas visibles dans la page mais
elles sont destinées au serveur web, aux navigateurs et aux
moteurs de recherche.
‒ Chaque information est identifiée par un nom et un contenu.

Développement Web 22
 Généralité sur le langage HTML

Structure d’un document HTML

3. La balise <head> : (suite)
3.2. La balise <meta> : (suite)
 Exemple:
 Auteur :
<meta content="author" name= "author_name"/>
 Description :
<meta name="description" content="Description du contenu de la page" />
 Mots-clés :
<meta name="keywords" content="mot-clé1, mot-clé2" />
Développement Web 23
Généralité sur le langage HTML

Structure d’un document HTML

3. La balise <head> : (suite)
3.2. La balise <meta> : (suite)
 La balise <meta> et codage en utf-8 :
<meta charset="utf-8"/>
‒ Permet de définir l’encodage de caractère de la page
‒ Si ce codage est correctement déclaré, il sera possible de taper
directement lettres accentuées, c cédille ç et symbole euro€,
sans avoir à utiliser des entités HTML.

Développement Web 24
Généralité sur le langage HTML

Structure d’un document HTML

4. La balise <body> :
‒ Délimite le contenu de la page.
‒ Le contenu est constitué de texte, images et autres éléments qui
seront affichés.

Développement Web 25
Généralité sur le langage HTML

Structure d’un document HTML

 En Résumé :

Développement Web 26
Généralité sur le langage HTML

Structure d’un document HTML

 Les commentaires :
‒ Les commentaires peuvent être placés n'importe où dans un
document HTML à condition de ne pas être imbriqués.
‒ Ils sont placés entre les chaînes de caractère <!-- et -->.
Exemple :
<!-- Ceci est un commentaire -->

Développement Web 27
 Les Eléments de
Structuration de Contenu

Développement Web 28
Les Eléments de Structuration de Contenu

La Balise division : <div>

‒ <div> est un conteneur.
‒ Élément de type bloc qui peut inclure n’importe quel autre
balise HTML.
‒ Suivi d’un passage à la ligne automatique.
‒ Permet de regrouper d’autres blocs de HTML (paragraphes,
tableaux, etc.) et de leur donner un style CSS commun.

Développement Web 29
Les Eléments de Structuration de Contenu

La Balise division : <div>

Développement Web 30
Les Eléments de Structuration de Contenu

La Balise Paragraphe : <p>

‒ Les paragraphes sont des éléments de type « bloc »,

suivis d’un passage à la ligne et d'une marge par défaut.
‒ On peut imbriquer un paragraphe dans un div.
‒ On ne doit PAS mettre un paragraphe dans un
paragraphe.

Développement Web 31
Les Eléments de Structuration de Contenu

La Balise Paragraphe : <p>

Développement Web 32
Les Eléments de Structuration de Contenu

Les Titres : h1 à h6

‒ Il existe six niveaux de titre

(pas un de plus ! ).
‒ Il est possible d’avoir plusieurs
titres de même niveau
‒ On ne peut pas mettre un Hn
dans un p, ou un p dans un Hn.

Développement Web 33
Les Eléments de Structuration de Contenu

La balise Blockquote

Développement Web 34
 Les Eléments de
« Mise en Forme »
de Texte

Développement Web 35
Les Eléments de « Mise en Forme » de Texte

L’ Elément <strong>

Développement Web 36
Les Eléments de « Mise en Forme » de Texte

L’ Elément <em>

Développement Web 37
Les Eléments de « Mise en Forme » de Texte

D’autres Eléments
‒ L’éléments <sup> permet d’afficher un texte exposant.

‒ L’éléments <sub> permet d’afficher un texte indice.

‒ L'élément représente des annotations et des petits caractères comme les

informations légales ou liées au copyright

Développement Web 38
Les Liens dans les Documents
HTML

Développement Web 39
Les Liens dans les Documents HTML

Fonction d’un Lien

‒ Le lien est un élément cliquable qui renvoie l’utilisateur sur une
nouvelle page (ou lui permet de télécharger un fichier)
‒ Il est souvent stylé différemment (bleu souligné par défaut)

‒ Il peut renvoyer :
 Vers un autre site (lien externe)
 Vers une autre page du site (lien interne)
 Vers des fichiers (image, .PDF, etc.)
Développement Web 40
Les Liens dans les Documents HTML

Fonction d’un Lien : balise <a>

‒ l’attribut href : indiquer vers quelle page on veut envoyer
l’utilisateur
‒ l’attribut title (Facultatif) : pour ajouter une infobulle au survol et
indiquer à l’utilisateur où il va arriver.

 Exemple 1 : Lien externe vers un autre site

Développement Web 41
Les Liens dans les Documents HTML

Fonction d’un Lien : balise <a>

 Exemple 2 : Liens internes et hiérarchisation du site
‒ Un site est constitué d'un ensemble de pages au sein d'un dossier
(appelé racine du site).
‒ Ces pages peuvent être organisées dans une hiérarchie de
sousdossiers.

Le fichier « racine »

Développement Web 42
Les Liens dans les Documents HTML

Exercice d’application
1. Créez un dossier « mon_premier_site »
2. Créez y deux fichier html : [Link] et [Link]
3. Créer les interfaces décrites ci-dessous

Développement Web 43
Les Liens dans les Documents HTML

Exercice d’application : Correction Partie 1

Développement Web 44
Les Liens dans les Documents HTML

Exercice d’application (Suite)

3. Ajoutez un répertoire « page_interne »
4. Ajoutez-y une page « [Link] »

Développement Web 45
Les Liens dans les Documents HTML

Exercice d’application (Suite)

Développement Web 46
Les Liens dans les Documents HTML

Exercice d’application (Suite)

 Code « [Link] » :

 Mise à jour « [Link] » :

Développement Web 47
 Les Eléments de Liste

Développement Web 48
Les Eléments de Liste

Les listes non Ordonnées : <ul>

‒ La balise <ul> permet de créer une liste non ordonnée (unordered list).
‒ Il faut l’ouvrir en début de liste et la fermer après le dernier élément de
la liste.
‒ La balise <li> permet de créer UN élément de la liste.

Développement Web 49
Les Eléments de Liste

Les listes ordonnées : <ol>

‒ La balise <ol> permet de créer une liste ordonnée et numéroté (ordered
list).
‒ Il faut l’ouvrir en début de liste et la fermer après le dernier élément de
la liste.
‒ La balise <li> permet de créer UN élément de la liste.

Développement Web 50
Les Eléments de Liste

Les listes ordonnées : <ol>

‒ Liste numérotée avec les chiffres romains:

 Ajouter l’attribut « type » au tag <ol> avec les valeurs
suivantes :
type = i ou type=I

‒ Liste numérotée avec des lettres:

 type = a ou type=A

Développement Web 51
Les Eléments de Liste

Les listes Imbriqués

‒ Les listes peuvent s'imbriquer.
‒ On peut mélanger <ul> et <ol> à condition de les fermer correctement.

Développement Web 52
Les Eléments de Liste

Les listes Imbriqués

‒ Les éléments <ul> et <ol> ne peuvent contenir que des éléments <li>.
‒ Chaque élément peut contenir des éléments de bloc (p, div, h1, …)

Développement Web 53
Les Tableaux en HTML

Développement Web 54
 Les Tableau HTML

Tableau HTML : Introduction

 Définition :
‒ Un tableau sert à organiser des informations structurées sous forme
tabulaire.
‒ Il se compose de lignes organisées elles-mêmes en cellules
 Création :
‒ La balise <table></table> permet d’indiquer le début et la fin du
tableau.
‒ La balise <tr> </tr> caractérise une nouvelle ligne.
‒ La balise <td> </td> marque le contenu d’une cellule dans une ligne

Développement Web 55
 Les Tableau HTML

Tableau HTML : Exemple simple

Remarque: Le nombre d’éléments <td> doit rester le même dans la mesure ou chaque ligne
possède un même nombre de cellules, qui correspond au nombre du colonnes du tableau.

Développement Web 56
Les Tableau HTML

Tableau HTML : Entête & Bordure

 Entête : <th> peut remplacer <td> pour créer
une cellule d’entête au tableau.
 Par défaut affiché en gras et centré dans les
navigateurs.
 Bordure : ajouter l’attribut « border » à la balise
table : <table border> …</table>
 border="x" : x est l’épaisseur de la bordure
 (x=1 par défaut)

Développement Web 57
 Les Tableau HTML

Tableau HTML : Titre

‒ On utilise la balise <caption> pour
donner un titre au tableau.
‒ La balise se place au début du
tableau.

Développement Web 58
 Les Tableau HTML

Tableau HTML : Fusion de Cellules

‒ Il est possible de fusionner
certaines cellules entre elles avec
l’attribut:
colspan=" nombredecellules"
qui se place sur la cellule (th ou td).
‒ La valeur numérique de cet
attribut précise le nombre de
colonnes du tableau que couvre
la cellule.

Développement Web 59
 Les Tableau HTML

Tableau HTML : Fusion de Lignes

Il est possible de fusionner des
lignes avec l’attribut:
rowspan=" nombredelignes"
qui se place sur la cellule (th ou td)

Développement Web 60
 Les Tableau HTML

Tableau HTML : Autres Attributs

 width="x" : largeur du tableau ( x = nombre ou % par rapport à la
largeur de la fenêtre)
 height="x": hauteur du tableau
 bgcolor=couleur de fond des cellules (Ex: bgcolor="aqua")
 cellspacing="x" : espace entre deux cellules du tableau
 cellpadding="x" : espace libre (pixels) entre le texte et le bord de
la cellule qui le contient.
 ALIGN="x" : alignement (x= left, right ou center)
…
Développement Web 61
Les Tableau HTML

Tableau HTML :
Exercice
d’application

Développement Web 62
Les Tableau HTML

Tableau HTML : Exercice d’application

Développement Web 63
 Les Formulaires

Développement Web 64
Les Formulaires

Les formulaires sont partout autour de nous !

‒ Le formulaire sert à récupérer des données que l’utilisateur va entrer et
les envoyer au serveur.
‒ A chaque formulaire est associé un programme sur un serveur qui sera
chargé de collecter les données pour les traiter (ce programme pourra être un
en ASP, PHP, ...)

Développement Web 6565

Les Formulaires

Les formulaires : Création

‒ Balise principale du formulaire <form> </form>
‒ Deux méthodes :
 method="get" : limitée à 255 caractères, informations passées
dans la barre d’adresse.
 method="post" : envoie les données dans le corps de la requête
sans passer par la barre d’adresse, c’est la méthode la plus utilisée.
‒ Action : l’adresse du fichier ou programme qui va traiter les
données.

Développement Web 6666

Les Formulaires

Les formulaires : Exemple simple

Remarque : Par défaut si elle est vide, c’est comme n’importe quel élément,
rien n’est affiché

Développement Web 6767

Les Formulaires

Les formulaires : Zone de texte monoligne

‒ La balise de base : <input>
‒ Elle est auto-fermante.
‒ Ne génère pas de retour à la ligne.
‒ Il faut lui donner un nom avec l’attribut « name » pour que l’on
puisse récupérer sa valeur (éviter les espaces dans le name).
‒ Le nom n’est PAS visible sur la page

Développement Web 6868

Les Formulaires

Les formulaires : Zone de texte monoligne

Attributs Supplémentaires :
‒ value="default_value" : Donner une valeur par défaut au champs
avec l’attribut.

‒ type =" " : Préciser le type de valeur supporter par ce champs.

 type = int, float, date, url, password, …
‒ maxlength=" " : le nombre de caractères maximum acceptés dans le
champ.

Développement Web 6969

Les Formulaires

Les formulaires : Zone de texte monoligne

Attributs Supplémentaires :
‒ placeholder = " " : donne une indication de ce que devrait contenir
le champ.

Développement Web 7070

Les Formulaires

Les formulaires : Le label

‒ Son rôle est de décrire à un être humain la fonction du champ
(puisque name est invisible).
‒ Pour associer le label au champs :
le for et l’id doivent
 Ajouter un for="nom" au label. être identiques mais
 Ajouter id="nom" au champ. peuvent être différents
du name.

Développement Web 7171

Les Formulaires

Les formulaires : Zone de texte multilignes

‒ La balise de base : <textarea>
‒ C’est une balise qu’il faut ouvrir et fermer.
‒ Attributs utiles :
 name
 row : indique le nombre de lignes
 col : indique le nombre de colonnes

Développement Web 7272

Les Formulaires

Les formulaires : Case à cocher

‒ Une case à cocher est un type de la balise <input> :
<input type="checkbox">
‒ Plusieurs cases, toutes peuvent être cochées.
‒ On peut mettre le label à gauche ou à droite
‒ Les cases à cocher peuvent avoir un attribut name distincts, ou
identique.
‒ Si la case est cochée, il renvoie « on » lors du traitement.

Développement Web 7373

Les Formulaires

Les formulaires : Case à cocher

On peut pré-cocher
une checkbox avec:
checked="checked"
ou just checked

Développement Web 7474

Les Formulaires

Les formulaires : Boutons radio

‒ Le bouton radio est un type de la balise <input> :
<input type=radio>
‒ Un seul choix possible parmi tous les éléments.
‒ La value est importante : c’est elle qui est renvoyée au serveur.

Développement Web 7575

Les Formulaires

Les formulaires : Groupe Boutons radio

Pour que le navigateur comprenne que des éléments forment un groupe, il faut
leur donner le même attribut name.

Développement Web 7676

Les Formulaires

Les formulaires : Liste déroulante

 La balise de base : <select>

Développement Web 7777

Les Formulaires

Les formulaires : Bouton d’envoi

‒ Pour envoyer le formulaire on utilise :

 L’attribut value=" " est obligatoire et permet de donner

le « titre » du bouton.
 Le formulaire est envoyé pour traitement au fichier que
l’on a défini dans action=" ".

Développement Web 7878

Les Formulaires

Les formulaires : Petit résumé des champs

input type = text

input type = checkbox

input type = radio

input type= submit

select + option

textarea
Développement Web 7979
Les Formulaires

Les formulaires : Bouton de Reset

 Pour remettre à zéro toutes les données du formulaire

on utilise input type="reset"

Développement Web 8080

Les Formulaires

Les formulaires : Bouton

‒ Syntaxe différente de la balise input.

‒ Possibilité d'ajouter des images à l'intérieur (balise non
auto-fermante)

Développement Web 8181

Les Formulaires

Les formulaires : Désactiver un champs

‒ L’attribut disabled="disabled" peut-être utilisé pour désactiver

un champ.
Exemple : désactiver le champ d’envoi jusqu’à ce que toutes les
données soient remplies.
‒ Note : on peut aussi juste mettre disabled en attribut.

Développement Web 8282

Les Formulaires

Les formulaires : Champs mot de passe

‒ input type="password" : permet de masquer un mot de passe

Développement Web 8383

Les Formulaires

Les formulaires : Uploader un fichier

Pour télécharger vers le serveur un fichier on utilise

input type="file".

Développement Web 8484

Les Formulaires

Les formulaires : Cacher un champ

‒ On peut cacher un champ avec <input type="hidden"> .
‒ Permet d’envoyer des données sans que l’utilisateur ne les voie
(rien ne sera afficher).

Développement Web 8585

Les Formulaires

Les formulaires : Exercice

Développement Web 8686

 Les Images

Développement Web 87
Les Images

La balise <img>

‒ Peut-être insérée dans le corps du texte.

‒ On la place généralement dans un <p> ou un <div> mais
peut se placer n’importe où dans le body.
‒ Balise auto-fermante
‒ L’attribut src="[Link]" : donner le chemin vers la
source de l’image.

Développement Web 8888

Les Images

La balise <img> et attribut « alt »

‒ Un attribut alt="description du contenu de l'image" : texte
alternatif qui décrit le contenu de l’image et la remplace si l’image
n’est pas téléchargée.

Développement Web 8989

Les Images

Attributs « width » et « height »

‒ Les attributs width et height peuvent être ajoutés pour donner
une taille à l’image .
‒ Sans width/height le navigateur « devine » la taille ce qui crée
des sauts de page quand l’image se charge.
‒ En général, il vaut mieux la redimensionner avant dans un
logiciel, plutôt que charger une grande image et la redimensionner.

Développement Web 9090

Les Images

Attribut « title »
 Attribut facultatif qui permet d’afficher une info-bulle au
survol de l’image.

Développement Web 9191

 Structurer votre Page

Développement Web 92
Structurer votre Page

Les balises Structurantes de HTML 5

‒ Nouvelle balises HTML 5 pour l’organisation d’une page :

header, footer, article, section, nav, aside.
 cela ne va pas beaucoup changer l'apparence de notre site
pour le moment, mais il sera bien construit et prêt à être mis
en forme ensuite !

Développement Web 9393

Structurer votre Page

Les balises Structurantes : header

‒ Il s'agit généralement d'une grande bande horizontale, située en

haut du site avec un grand titre et/ou un logo.
‒ C'est à cet endroit qu'on a toujours la même information sur le
site, quelle que soit la page du site sur laquelle on est.

Développement Web 9494

Structurer votre Page

Les balises Structurantes : header

La figure suivante représente le site du W3C (qui se charge des nouvelles
versions de HTML et CSS notamment). La partie encadrée en rouge
correspondrait à l'en-tête :

Développement Web 9595

Structurer votre Page

Les balises Structurantes : footer

‒ À l'inverse de l'en-tête, le pied de page (<footer>) se trouve en
général tout en bas du document.
‒ C'est un endroit où on place des informations communes à
l'ensemble du site mais qui ne sont pas primordiales pour le site en tant
que tel.
Exemple : liens de contact, le nom de l'auteur, les copyright, etc.

Développement Web 9696

Structurer votre Page

Les balises Structurantes : footer

Développement Web 9797

Structurer votre Page

Balises Structurantes : Barre de navigation

‒ La balise utilisée : <nav>
‒ Elle regroupe tous les principaux liens de navigation du site.
Vous y placerez par exemple le menu principal de votre site.
Exemple : menu réalisé sous forme de liste à puces à l'intérieur
de la balise <nav> :

Développement Web 9898

Structurer votre Page

Balises Structurantes : Barre de navigation

Développement Web 9999

Structurer votre Page

Balises Structurantes : Section de page

‒ Une zone importante, située au centre dont le contenu est

spécifique selon la page visitée.
‒ La balise de base : <section>
‒ Elle sert à regrouper des contenus en fonction de leur
thématique.

Développement Web 100

100
Structurer votre Page

Balises Structurantes : Section de page

Développement Web 101

101
Structurer votre Page

Balises Structurantes : aside

‒ La balise de base : <aside>
‒ Elle est conçue pour contenir des informations complémentaires au
document que l'on visualise.
‒ Ces informations sont généralement placées sur le côté (bien que ce
ne soit pas une obligation).
‒ Il peut y avoir plusieurs blocs <aside> dans la page.

Développement Web 102

102
Structurer votre Page

Balises Structurantes : aside

Développement Web 103

103
Structurer votre Page

Balises Structurantes : Article

‒ La balise de base : <article>
‒ Elle sert à englober une portion généralement autonome de la
page. C'est une partie de la page qui pourrait ainsi être reprise sur
un autre site.
‒ C'est le cas par exemple des actualités (articles de journaux ou de
blogs).

Développement Web 104

104
Structurer votre Page

Balises Structurantes : Article

Développement Web 105

105
Structurer votre Page

Balises Structurantes : Remarques

Développement Web 106

106
Structurer votre Page

Balises Structurantes : Exemple

Développement Web 107

107
Structurer votre Page

Balises Structurantes : Exemple

Développement Web 108

108
Structurer votre Page

Balises Structurantes
Remarque : Je ne comprends pas l'intérêt de ces balises. On peut
très bien obtenir le même résultat sans les utiliser !

Explication : C'est vrai. En fait, ces balises sont seulement là pour

expliquer à l'ordinateur « Ceci est l'en-tête », « Ceci est mon pied de
page », etc. Elles n'indiquent pas, contrairement à ce qu'on pourrait
penser, où doit être placé le contenu. C'est le rôle du CSS, comme nous
le verrons ultérieurement ...

Développement Web 109

109