Login


A voir

Un problème avec un appareil électroménager ?
Vous cherchez un renseignement ?
Trouvez une réponse sur www.tout-electromenager.fr

Cours

Vous êtes ici : Matières (informatique) > Thèmes (Créer un site web statique) > Cours (Partie 1 : La structure de base d'une page WEB)

Cette création est mise à disposition sous un contrat Creative Commons Creative Commons License .

Auteur : E.RAVRAT

Dernière mise à jour : lundi 08 Septembre 2008 à 15:43:27

Créer sa page web
Partie 1 : La structure d'une page web

L'objectif de cette partie est de vous permettre de créer une page web à l 'aide du langage XHTML 1.0.

Cette partie concerne un chapitre composé de 3 parties :

XHTML (The Extensible HyperText Markup Language (« XHTML 1.0 Le langage de balisage hypertexte extensible »)) est un langage de balisage servant à l'écriture de pages du World Wide Web. Il est le successeur du langage HTML (Hypertext Markup Language). Il se base sur la syntaxe définie par XML (Extensible Markup Language).
Si vous ne connaissez pas HTML et XML, cela ne vous gênera absolument pas pour créer votre page web à l'issue des trois parties composant ce chapitre.

Table des matières

Avant de commencer, choisir un éditeur de code

Pour créer une page web, vous allez écrire des lignes de code. On appelle une ligne de code une ligne de texte utilisant la syntaxe d'un langage. Ici, cela sera donc XHTML dans sa version 1.0.
Ainsi lorsque vous rédigez un document vous utilisez un traitement de texte (word, writer,...), et bien pour écrire une page web, vous allez utilisez un éditeur spécialement conçu pour ce genre d'exercice.
il en existe une  multitude, ainsi deux éditeurs gratuits retiennent ma préférence :

Personnellement, j'utilise pspad qui offre beaucoup plus de fonctionnalités mais qui du coup a une interface plus chargée.

Haut de page

La structure de base de toute page HTML

Si l'on utilise le langage XHTML, le terme de page HTML est encore utilisé. Sachez donc que pour ce cours, si je parle de page HTML, il s'agit bien d'utiliser le langage XHTML.

Mon objectif n'est pas de vous apprendre tous les éléments qui composent une page HTML, mais seulement de vous présenter ce qu'il faut savoir pour débuter.

Afin de vous donner une première idée de ce qu'est une page de code, nous allons voir à quoi cela ressemble.
Il faut savoir que le code d'une page HTML est interprété par votre navigateur (internet explorer, firefox, opera, netscape, konqueror, safari,...). Il est possible de voir le code d'une page. Je vous invite à visualiser le code source de la page que vous êtes en train de lire.
Procédez comme indiqué ci-après :
Avec internet explorer, faire affichage puis source dans la barre de menu,
avec firefox, faire affichage puis code source de la page. (je vous conseille fortement d'utiliser ce navigateur en complément d'internet explorer,. La partie 3 de ce chapitre l'utilise). Vous pouvez le télécharger ici.

Voici une photo écran (cliquez sur l'image) :
code source d'une page HTML

On peut remarquer que chaque élément de texte est encadré avec des éléments de ce type :
A titre d'exemple : <p>du texte ici</p>.
Si l'on dit que XHTML est un langage à balise, c'est  parce chaque élément de la page est encadré par des balises. Ici <p></p> sont deux balises. La première marquant le début d'un paragraphe, la seconde la fin d'un paragraphe. Ce sont grâce à ces balises que votre navigateur sait comment structurer votre page. La partie 2 de ce chapitre propose une initiation aux balises les plus utilisées.

Lancez pspad pour créer un nouveau fichier (fichier, nouveau, choisir XHTML).
screen shot pspad

A ce moment, pspad a généré du code automatiquement. Supprimez la totalité de ce code pour ainsi être certain d'avoir la même page de code que moi.

Pour éviter les problèmes d'encodage, configurez pspad en choisissant l'encodage UTF-8 (dans la barre de menu, cliquez sur Format puis sur UTF-8. Pensez à faire ce réglage pour chaque nouveau fichier et avant de commencer à coder.
photo écran de la configuration de l'encodage de la page sur pspad

Nommez votre fichier en l'enregistrant dès à présent  (fichier, enregistrer sous)
ici je donne le nom suivant  "maPageWeb.html". Effectivement, les fichiers html portent l'extension ".html" comme un fichier word porte l'extension ".doc".

Remarque : les sauts de ligne et les tabulations qui figurent dans votre page de code ne sont pas visibles à l'écran.

Tapez le code suivant dans votre éditeur tout en faisant attention à la signification de chaque élément indiqué dans "<!--   -->". Vous remarquerez que le code est indenté, c'est-à-dire qu'il n'est pas collé contre la marge. Chaque élément est décalé par rapport à son élément parent. Ici <head> est à l'intérieur de <html> , la balise <head> est donc l'enfant de <html>. Dès qu'une balise est enfant d'une autre balise, elle doit être indentée. (utilisez la touche tabulation)

<html> <!-- cette balise indique au navigateur qu'il s'agit d'un document HTML -->
    <head> <!-- cette balise indique qu'il s'agit de l'entête de la page -->
    </head> <!-- cette balise indique qu'il s'agit de la fin de l'entête de la page -->
   
    <body> <!-- cette balise indique qu'il s'agit du début du corps de la page -->
    </body> <!-- cette balise indique qu'il s'agit de la fin du corps de la page -->
</html> <!-- cette balise indique qu'il s'agit de la fin du document HTML -->

Les éléments qui figurent entre "<!--" et "-->" constituent des commentaires. Le navigateur n'en tient pas compte. Ils s'avèrent très utile pour commenter son code.

Après avoir enregistré votre travail (icone icone enregistrer le code HTML), cliquez sur votre fichier nommé maPageWeb.html afin qu'elle s'ouvre avec internet explorer ou firefox. Si vous utilisiez internet explorer et que vous avez installé firefox, vous devez faire clic droit, ouvrir avec, puis cliquez sur le bouton parcourir, enfin ouvrez le dossier nommé "Mozilla Firefox et cliquez sur firefox.exe. Terminez en cliquant sur ok. Par la suite, firefox devrait apparaître dans la liste des programmes proposés lorsque vous faites le clicl droit et ouvrir avec.

Que voyez vous à l'écran ? afficher/masquer la réponse

Rien du tout !
Les balises <html>, <head> et <body> servent à indiquer à votre navigateur qu'il s'agit d'un document HTML avec un entête et un corps (ce qu'il affiche en réalité). Puisque la balise <body> est vide, le navigateur n'affiche rien du tout.

Pourquoi chaque balise compose-t-elle une paire ? afficher/masquer la réponse

Chaque balise se compose d'une paire car il y a une balise marquant le début et une balise marquant la fin. Tout élément doit être encadré de cette façon. La balise qui marque la fin reprend la balise marquant le début avec le caractère slash "/" avant le nom de la balise :
<html> </html>
<head> </head>
<body> </body>

A quoi sert la balise <html> ? afficher/masquer la réponse

Elle sert à indiquer au navigateur qu'il s'agit d'un document HTML.

Grâce à quelle balise le navigateur sait-il que le document HTML est terminé ? afficher/masquer la réponse

Grâce à la balise HTML fermante : </html>

Quelle balise comprend l'entête du document ? afficher/masquer la réponse

La balise <head>.

Quelle balise va recevoir le contenu à afficher à l'écran du visiteur d'une page web ? afficher/masquer la réponse

La balise <body> qui indique le corps de la page.

Des majuscules sont-elles utilisées dans le nom des balises ? afficher/masquer la réponse

Non ! Il ne faut JAMAIS utiliser de majuscules dans le nom d'une balise (exception faite du doctype, voir la suite)

Haut de page

Le doctype

Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web. Les DOCTYPEs sont des composants primordiaux pour les pages conformes aux normes . Lorsque vous ommetez le doctype, vous pouvez rencontrez des problèmes d'affichage. Là encore c'est une bonne habitude à prendre de le préciser systématiquement sur chaque page.

Il est toujours précisé en début de fichier.

Voici à quoi doit ressembler votre page de code finale :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
    </head>
   
    <body>
    </body>
</html>

Haut de page

La balise <html>

Les balises HTML ouvrantes peuvent contenir des attributs auxquels on affecte une valeur.
Exemple :

<nomBalise attribut1="valeurAttribuée" attribut2="valeurAttribuée" >

Adaptez votre code pour qu'il soit identique à cela :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    </head>
   
    <body>
    </body>
</html>
 

Ici, nous venons d'attribuer deux attributs à la balise html. Sachez juste qu'ils sont là pour préciser quelle syntaxe du langage doit être utilisée et quelle langue est utilisée. Vous devrez toujours penser à ajouter ces deux attribus pour que votre page soit valide XHTML, c'est-à-dire qu'elle réponde à la norme fixée. Si vous les ommetez, cela n'aura aucune influence sur votre page web. Il s'agit seulement de prendre de bonnes habitudes.

Haut de page

Donner du contenu à notre entête (balise <head>)

La balise <head> donne des informations sur la page affichée. C'est ce que l'on appelle un entête. Il n'est pas affiché à l'écran mais reste visible dans le code source.

Cependant un élément d'entête est visible, c'est le nom de la page. Lorsque vous surfez sur le net et que vous affichez une page, tout en haut à gauche, vous avez le nom de la page. Ce nom est indiqué à l'aide de la balise <title> qui signifie titre. Elle se place entre les balises <head> puisque c'est une information d'entête.

Votre code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>ma première page web !!!</title>              
    </head>
   
    <body>
    </body>
</html>
 

Affichez votre page web en cliquant dessus (n'oubliez pas d'enregistrer les modifications !)

Voici le résultat obtenu :
résultat de la balise title

Vous pouvez constater que l'accent a mal été encodé.

J'ai précisé en début de cours qu'il fallait encoder vos fichiers en UTF-8. Et c'est bien pour cela que l'on peut constater un problème d'encodage. Les navigateurs choisissent généralement un encodage différent par défaut.  Il faut alors lui indiquer l'encodage qu'il doit utiliser pour afficher les pages.

Nous allons ajouter une balise qui indique au navigateur quel encodage il doit utiliser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>ma première page web !!!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
   
    <body>
    </body>
</html>
 

Voici le résultat après actualisation de la page dans le  navigateur :
resultat balise title

L'accent est désormais affiché correctement.

Haut de page

Passer le test du validateur du W3C

Si vous avez bien respecté les consignes, votre page devrait être valide XHTML 1.0 strict. Cela signifie qu'elle respecte le standard défini par un consortium qu'est le W3C

Pour vérifier que votre page est valide, copiez votre code source puis allez à cette adresse : http://www.w3.org/

Cliquez sur HTML validator (colonne de gauche) :
photo écran du lien à cliquer

Ensuite cliquez sur l'onglet Validate input .
photo écran du bouton à cliquer

Enfin, dans la zone située sous l'onglet, collez votre code source sélectionné précédemment.
photo écran du code à soumettre au validateur

Puis cliquez sur checked.
Là vous devriez constater que votre page est valide !
photo écran d'une validation ok

Précédemment, je vous ai dit qu'il ne fallait jamais utiliser de majuscule dans le nom des balises. Nous allons faire un test en remplaçant une minuscule par une majuscule dans le nom d'une balise (ici la balise title).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <titLe>ma première page web !!!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
   
    <body>
    </body>
</html>

Enregistrez la modification puis validez à nouveau votre code comme précédemment.
photo écran d'un échec de validation
Votre code n'est plus valide !!! Il peut y avoir de nombreuses raisons pour que votre page ne soit pas valide. Vous les découvrirez au fur et à mesure de vos validations.

Corrigez votre code en remplaçant le l majuscule de title pas un l minuscule puis enregistrez la modification.

Afin d'être sûr de partir sur de bonnes bases, voici le code de base d'une page XHTML que vous pouvez copier-coller sur votre éditeur afin d'être valide W3C :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Ici le titre de ma page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
   
    <body>
    </body>
</html>

Maintenant que vous connaissez la structure de base d'une page XHTML, vous pouvez vous rendre sur la partie 2 de cours : La sémantique avec XHTML

Haut de page