Édition de pages web — 1^re partie

Table des matières

1. Les outils
2. L'architecture du site
3. L'armature de page web
4. Le contenu de la page
5. Index

Les outils

On peut créer des pages web de plusieurs manières.

1. En utilisant un traitement de texte disposant d'un traducteur permettant d'enregistrer un document au format HTML. C'est la méthode la plus simple, mais elle offre peu de possibilités, et le code généré est souvent très imparfait. Néanmoins, si vous disposez d'un long document ayant déjà été mis en page sur traitement de texte, et que vous voulez l'intégrer rapidement à votre site, ce peut être une solution efficace. La démarche à suivre sera à peu près la suivante: après avoir ouvert le document avec votre traitement de texte, chercher dans le menu Fichier la commande Enregistrer sous, puis dans la rubrique type de document, choisir document html (correspondant aussi à l'extension .htm pour les pécéistes).

2. Avec un éditeur html. L'édition d'une page web de cette manière donne généralement accès à deux fenêtres, l'une intitulée Aperçu ou Visualisation, et l'autre Source ou HTML. Sur la fenêtre Aperçu on visualise (à peu près) le résultat que l'on va obtenir; sur Source apparait le codage html qui permet d'obtenir ce résultat. L'intérêt d'un éditeur html est qu'on peut éditer directement dans la fenêtre Aperçu à l'aide des menus. Le code est fabriqué automatiquement dans fenêtre Source, ce qui permet de débuter sans aucune notion de HTML à la base et de s'initier au langage html en regardant comment est codé tel ou tel effet, et bien sûr, pour les plus expérimentés, de retoucher le code si nécessaire.

3. À l'aide d'un éditeur de texte. En procédant ainsi, on travaille uniquement sur le code. On peut cependant très bien utiliser simultanément un navigateur pour visualiser la page.

Quelle que soit la méthode empolyée, il est recommandé de s'initier au langage html afin de produire des pages correctement écrites.

L'architecture du site

Tous les noms des fichiers et dossiers que vous inclurez dans votre site ne devront comporter que les caractères suivants: lettres non accentuées, chiffres, tirets ("moins" et "espace souligné"). L'usage des majuscules est déconseillé. Les fichiers comporteront en plus un suffixe explicite. Les fichiers les plus couramment inclus dans des sites web sont les suivants:

Il est recommandé de donner à vos dossiers et vos fichiers des noms évocateurs, en particulier pour la page d'accueil, qu'il convient d'appeler index.html (ou éventuellement index.htm pour les pécéistes).

Il est conseillé de vous préoccuper au plus tôt de l'organisation de votre site. Commencez par créer un dossier au nom évocateur, comme mon_site_web ou site_web_gaston, par exemple. Dans ce dossier seront placées toutes les pièces de votre site, à commencer par la page d'accueil. Il est conseillé par la suite de grouper les autres pages par sujet dans des dossiers si elles sont amenées à être nombreuses, de rassembler, par exemples, les images dans un dossier img, les fichiers de feuilles de style dans un dossier css, les scripts dans un dossier cgi-bin, etc. Si vous déplacez par la suite des dossiers ou des fichiers de votre site, il faudra modifier les liens de vos pages correspondants.

L'armature de la page web

Une commande HTML s'appelle une instruction. Toutes les instructions HTML sont codées à l'aide de balises, qui figurent toutes entre < et >. Ces balises fournissent toutes sortes de renseignements qui seront interprétés par le navigateur.

Il existe plusieurs types de balises. Les conteneurs permettent d'encadrer une partie de texte, appelée élément. L'élément est donc placé entre la balise <[conteneur]> et la balise de fermeture correspondante </[conteneur]>. Dans le cas d'élément vide, on indiquera <[balise] />.

Certaines balises peuvent ou doivent être complétées par un ou plusieurs attributs pour lesquels il faut préciser une valeur. On pourra donc trouver: <[conteneur] [attribut 0]="[valeur 0]" [attribut 1]="[valeur 1]"> accompagné de la balise de fermeture correspondante qui reste inchangée, ou alors <[balise] [attribut 0]="[valeur 0]" [attribut 1]="[valeur 1] /"> si cette dernière est inexistante. Les balises commençant par ! sont un peu spéciales et ne suivent pas le même schéma.

Les noms de balises et d'attributs doivent être écrits en minuscules depuis XHTML 1.0 bien que l'usage était plutôt d'écrire les noms de balises en majuscules jusque là.

Des commentaires peuvent figurer à n'importe quel endroit du document. Ils ne seront pas affichés par le navigateur. Un commentaire se place entre <!-- et --> et contient une suite de caractères non vide et sans occurrence de --. N'hésitez pas à vous en servir pour annoter votre document, y laisser des questions que vous vous posez, des idées d'améliorations, ou des morceaux de codes inachevés.

Toutes vos pages commenceront par une balise XML, car le langage HTML respecte le standard XML, depuis XHTML 1.0. L'instruction correspondante sera en principe:
<?xml version="1.0" encoding="UTF-8"?>

Quelques explications.
version: version du langage XML.
encoding: table de caractères utilisée ; celle mentionnée ici est celle par défaut.

La table de caractères UTF-8 peut vous éviter de coder les accents. Cependant, vous pouvez aussi utiliser la table ISO d'Europe de l'Ouest pour utiliser des caractères spéciaux ne disposant pas de code HTML si votre logiciel n'est pas compatible UNICODE ou si vous voulez vous assurer de la compatibilité avec les anciens navigateur non encore compatibles UNICODE. Vous devez alors remplacer la valeur UTF-8 par ISO-8859-1.

Suivra de la déclaration de type de document, à l'aide de la balise <!DOCTYPE>. Elle indique en outre la version du langage HTML utilisée. L'instruction sera en général:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Quelques explications.
PUBLIC: document public, destiné au libre accès sur Internet.
W3C: désigne le World Wide Web Consortium, qui fixe la norme HTML.
DTD: définition de type de document (Document Type Definition).
XHTML 1.1: dernière version du langage HTML officialisée par le W3C (reformulation de HTML 4.01 en XML).
EN: anglais (langue dans laquelle sont écrites les instructions), c'est actuellement la seule langue disponible.
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd: adresse de référence pour ce type de documents.

Ensuite doit figurer la balise <html>. Cette balise existe depuis la première version de HTML, elle définit la structure externe d'une page. La balise de fermeture se place en fin de document, il n'y aura plus aucune instruction après elle.
La balise <html> peut contenir les attributs suivants:

Puis figure l'en-tête du document, annoncé par la balise <head>. Cet en-tête peut contenir diverses informations utiles au navigateur et aux moteurs de recherche qui rencensent les pages du web.
La balise <head> peut contenir les attributs suivants:

• dir
• xml:lang

Il n'est nécessaire de spéscifier les attributs dir et xml:lang dans une balise que s'ils diffèrent du conteneur de celle-ci le plus proche, soit ici la balise <html>.
D'une manière générale, il est inutile de spécifier la même information dans des éléments emboités. Par contre, il est intéressant de la mentionner si celle-ci change.

L'en-tête doit au moins contenir la balise <title>, dans laquelle on trouvera le titre du document. Ce titre apparaitra sur la barre de titre de la fenêtre de navigation lors de la consultation de votre page, et dans les réponses d'un moteur de recherche, dans le cas où celui-ci a référencé votre page et que cette dernière correspond à la requête de demandée. Ce titre convient donc d'être clair et bref: indiquer à quel site appartient la page et donner une idée précise de son contenu.
La balise <title> peut contenir les attributs suivants:

• dir
• xml:lang

Si vous n'utilisez pas UNICODE, vous avez droit, pour le titre de votre document comme dans le corps de la page, aux lettres sans ornementation, aux chiffres, à l'espace, au saut de ligne, au retour chariot, à l'apostrophe, au trait d'union, à la plupart des signes de ponctuation et quelques caractères supplémentaires. Voici la liste complète des caractères directement utilisables.
a...z A...Z 0...9 ' " - , . ; : ! ? ( ) [ ] = * + @ { } / _ ~ # % $ \ | `
Un grand nombre de caractères nécessitent d'être codés pour s'afficher correctement. C'est le cas des lettres accentuées et de nombreux autres caractères spéciaux. Voici la liste de ceux dont vous risquez d'avoir le plus besoin:

Le caractère " n'a pas besoin d'être codé, mais doit l'être quand il définit la valeur d'un attribut, sans quoi il serait interprété comme un marqueur de fin de valeur, puisque les valeurs sont entre guillemets.

On pourrait aussi utiliser le code Unicode (qui n'apparait pas dans le tableau ci-dessus), ou ISO si on utilise la table de caractères correspondante, mais lorsque le code HTML correspondant existe, cela n'a pas vraiment d'intérêt.

Enfin vient le corps du document avec la balise <body>. C'est lui qui contient le texte de la page, les informations sur ce qui va être affiché et les indications de mise en page.
La balise <body> peut contenir les attributs suivants:

• dir
• xml:lang

La balise de fermeture se place en fin de document, juste avant la balise </html>.

En principe, votre page vierge devrait ressembler à ceci:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="eo">
<head>
<title></title>
</head>

<body>
</body>
</html>

Naturellement, s'il s'agit d'une page francophone, remplacez xml:lang="eo" par xml:lang="fr".

Le contenu de la page

Après la balise <body>, vous pouvez saisir le texte que vous voudrez afficher sur votre page.

Le saut de ligne et le retour chariot seront traités comme une espace par le navigateur. Ils sont cependant utiles pour obtenir une page où l'on se repère rapidement.
Pour indiquer au navigateur qu'il doit changer de ligne, on utilise la balise <br>, qui n'a pas de contenu. Cette balise s'écrit donc <br />.

L'espace quant à elle n'est pas prise en compte dans les deux cas suivants: lorsqu'elle se situe en début de ligne et lorsqu'elle est précédée par une autre espace.

Enfin, il est conseillé de placer le texte dans les balises appropriées chaque fois qu'elles existent, afin de former des titres, des paragraphes, des listes, etc. Idéalement, tout texte devrait être inclus dans ce type de balises. Celles-ci seront introduites au cours des chapitres suivants.

Index

[ table des matières ] [ cours précédent ] [ cours suivant ] [ index ]

[ Accueil ] [ Parent ] [ ]