Partie I – Qu`est-ce qu`une page Web
Partie I – Qu'est-ce qu'une page Web
1. Structure de base
Une page Web de base est un fichier texte (ASCII) écrit en HTML (Hyper Text Marking Language).
Sous ce nom barbare se cache quelque chose de très simple. La syntaxe HTML consiste à indiquer aux
navigateurs le formatage des éléments de la page sous forme de balises (tags en anglais).
Une page Web contient essentiellement :
–des paragraphes de texte
–des images
–des liens
Il y aura donc des balises pour mettre en forme les paragraphes et le texte qu'ils contiennent
(alignement, italique, gras, etc.), des balises pour indiquer une image à un endroit précis de la page,
des balises pour indiquer qu'une portion de texte ou une image fait office de lien vers une autre
page ou un autre site Web.
Voici la structure de base d'une page Web :
<html>
<head>
..... entête de la page (indications diverses : titre, mots clefs, etc.)
</head>
<body>
.... corps de la page (textes, images, liens)
</body>
</html> Fig. I-1
Voici un exemple de page fonctionnelle :
<html>
<head>
<title>Ma première page Web</title>
<meta name= « keywords » content= « football sport féminisme » >
</head>
<body>
<h1>Ma première page Web</h1>
<p> Il est <b>important</b> de bien commencer </p>
</body>
</html> Fig. I-2
Cours Bawet – Conception de pages Web p. 1
Une page Web doit impérativement avoir la structure de la Fig. I-1. Elle indique aux navigateurs qu'il
s'agit d'une page écrite en HTML.
Les premières balises : <html> ... </html> indiquent aux navigateurs que tout ce qui se trouve entre ces
deux balises peut être interprété comme du HTML.
Les balises <head> .... </head> indiquent que ce qui se trouve entre elles est une entête. On y met
généralement des informations générales sur la page :
–le titre (de 50 caractères maximum entre deux balises ): <title>Titre de la page</title>. Il est
important car 1) il apparaîtra dans la barre de titre du navigateur et il sera utilisé par les moteurs de
recherche pour repérer votre page et la stocker dans une base de données.
–les mots clés (permettant également aux moteurs de recherche de répertorier la page dans leur base
de données) : <meta name= « keywords » content= « football, sport, féminisme » >
–d'autres informations sur la conception de la page qui ne sont pas essentielles pour son
fonctionnement
Les balises <body> ... </body> entourent le corps du document. C'est à cet endroit que l'on place le
contenu de la page : textes, images, liens, etc.
Excercice I.1 :
–Ouvrez Mozilla
–Allez dans le menu « Fenêtre » et choisissez « Composeur »
Une nouvelle fenêtre s'ouvre. Il s'agit d'un éditeur fonctionnant comme un traitement de texte.
Dans la barre inférieure, se trouvent des onglets : « Normal », « Montrer les balises HTML»,
<HTML> Source », « Prévisualisation »
–Le mode « Normal » vous permet de composer votre document comme
dans un traitement de texte ordinaire
–Le mode « <HTML> Source » vous permet de voir le code HTML généré
automatiquement par l'éditeur
–Le mode « Montrer les balises HTML» ne montre que les balises introduites
–Le mode « Prévisualisation » donne un aperçu de la page avant publication
sur le Net
–Cliquez sur « <HTML> Source »
Que voyez-vous ?
Mozilla génère automatiquement un document HTML. Entre les balises d'entête <head></head>, il
place une indication sur le type de document (text/html) et la méthode d'encodage des caractères (ISO-
8859-1):
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Le reste est laissé à notre entière discrétion.
Excercice I.2 :
En mode HTML, tapez l'exemple de la Fig. I.2 et regardez ce que cela donne en mode « Normal »
Le fichier HTML doit être enregistré sous le format texte (ASCII) avec l'extension .htm (version
Microsoft) ou .html (version Unix/Linux que nous privilégions ici)
Mozilla met l'extension .html automatiquement. Si vous utilisez un autre éditeur de texte (WordPad,
Kedit, Xedit, etc.), vous devrez probablement la mettre vous-même.
Cours Bawet – Conception de pages Web p. 2
2. Les principales balises de mise en page
A part les balises de structure imposées <html>, <head>, <body>, toutes les autres balises concernent
la mise en page du contenu et sont laissées à l'entière disposition des concepteurs. C'est à vous de
jouer...
Voici les principales balises :
<h1> ... </h1> : Titre de 1er niveau
<h2> ... </h2> : Titre de 2ème niveau
<h3> ... </h3> : Titre de 3ème niveau
<h4> ... </h4> : Titre de 2ème niveau
<h5> ... </h5> : Titre de 2ème niveau
<p> ... </p> : Délimitation de paragraphe
<b> ... </b> : Texte en gras
<i> ... </i> : Texte en italique
<u> ... </u> : Texte souligné (à éviter car peut être confondu avec des liens)
<s> ... </s> : Text barré (peu utilisé)
<sub> ... </sub> : Indice en bas
<sup> ... </sup> : Exposant ou n° de note
<center> ... </center> : Texte centré
<br> : Retour à la ligne (pas de balise fermante)
<hr> : Ligne horizontale (pas de balise fermante)
Excercice I.3 :
A l'aide des balises de mise en forme ci-dessus, composer une page qui ressemble à ceci :
Mon petit site
1 Présentation
Ce site risque d'être intéressant.
1.1 Ce que je veux dire :
• pratiquement tout
• encore plus
Tapez le texte et les balises en mode HTML de Mozilla Composeur et faites Ctrl-S pour sauver
régulièrement votre travail. Mozilla passe automatiquement en mode « Normal » après un Ctrl-S.
Autres éléments de mise en page :
Les puces :
Comme dans une composition normale ne traitement de texte, on dispose en HTML de puces
numérotées ou non.
Les puces numérotées se marquent comme suit :
Cours Bawet – Conception de pages Web p. 3
<ol>
<li>puce numéro 1</li>
<li>puce numéro 2</li>
<li>etc</li>
</ol>
Les puces sans numéros comme suit :
<ul>
<li>premier point</li>
<li>deuxième point</li>
<li>etc</li>
</ul>
Excercice I.4 :
Faites la liste numérotée suivante :
1. fromage
2. Saucisson
3. produit vaisselle
de deux manières :
–en mode HTML
–en mode éditeur (en utilisant les boutons de la barre d'outils)
Comparez les résultats au niveau du code HTML
Les tableaux :
C'est l 'équivalent des tableaux d'un traitement de texte classique à l'exception des possibilités de sous-
division des cellules. On peut toutefois imbriquer les tableaux les uns dans les autres pour arriver au
même résultat.
Voici un exemple de tableau de 3 lignes et 2 colonnes :
<table >
<tr>
<td> cellule 1 1
</td>
<td> cellule 2 1
</td>
</tr>
<tr>
<td> cellule 1 2
</td>
<td> cellule 2 2
</td>
</tr>
<tr>
<td> cellule 1 3
</td>
<td> cellule 2 3
</td>
</tr>
</table>
Cours Bawet – Conception de pages Web p. 4
Ce qui donne ceci en mode « Normal » :
cellule 1 1 cellule 2 1
cellule 1 2 cellule 2 2
cellule 1 3 cellule 2 3
Exercice I.5 :
Utiliser le mode « Normal » pour insérer un tableau.
Indice : menu « Insertion » ...
Regardez le résultat et comparez avec le résultat ci-dessus
Essayez de découvrir la raison de la différence...
Note : La balise <th> ... </th> est utilisée à la place de <td> pour mettre des titres dans les tableaux.
3.Les principales balises d'insertion
Outre les balises de mise en page, il existe une série de balises qui permettent d'insérer des objets
dans la page Web.
Les deux principales sont :
–la balise de placement d'une image : <img> :
<img src= « nom du fichier »>
–la balise de placement d'un lien : <a> :
<a href= « URL du lien »>texte du lien </a>
Insertion d'une image :
La balise <img> est plus complexe que les balises de mise en page. Elle requiert, en effet, le nom du
fichier que l'on veut insérer. Pour cela, il faut préciser la source de l'image (d'où la syntaxe src= dans la
balise) : si l'image se trouve dans le même répertoire que la page Web, il suffit de taper son nom, par
exemple : <img src= « ballon.jpg » >
Si, par contre, l'image se trouve dans un autre répertoire (par exemple un sous-répertoire « images »),
alors il faut préciser le chemin : <img src= « /images/ballon.jpg » >
Dans le dernier cas, il faut penser que la page Web est destinée à être hébergée sur une autre machine
que la vôtre (sur un serveur distant). Il faut donc être attentif à reproduire la même hiérarchie de
répertoires sur les deux machines.
Vérifiez toujours que la balise <img> ne contient pas de chemin propre à votre ordinateur, comme par
exemple : <img src= « C: /Mes Documents/Divers/Pages/Images /ballon.jpg » >
Ce genre de chemin ne correspondra à rien sur le serveur distant et l'image ne s'affichera pas. Faites
au plus simple : un sous-répertoire « images », un sous-répertoire « sons » (si nécessaire), pas plus !
Important : Ajoutez un texte alternatif à votre image : <img src= « ballon.jpg » alt= « un ballon » >.
Ceci permet au vieux navigateurs d'afficher le texte au lieu de l'image et aux aveugles d'entendre
quelque chose à la place de l'image.
Insertion d'un lien :
La balise <a> est également complexe. Elle requiert l'URL du lien et l'objet qui fera office de lien sur la
page (texte souligné ou image, par exemple).
Voici les principaux type de liens :
Cours Bawet – Conception de pages Web p. 5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
1
/
60
100%
