Sous-sections

• 8.1 Les propriétés du document
• 8.2 Les propriétés des paragraphes
• 8.3 Les propriétés des mots
• 8.4 Liens et images

8. Création de documents pour Internet

Les documents disponibles sur Internet sont en fait ce que l'on appelle de l'hypertexte. Grâce à un client spécifique (un navigateur) il est possible de les lire directement à l'écran de votre ordinateur sans avoir besoin d'autres logiciels de type traitement de texte, par exemple.

L'hypertexte se distingue par la capacité d'insérer au sein du document des liens (des références) vers des parties différentes du même document ou vers tout autre document disponible sur la Toile Mondiale. Comme nous l'avons déjà vu, ces documents sont distribués sur le réseau via le protocole HTTP et ils doivent être écrits avec un langage de marquage hypertexte pour être accessible. Historiquement, le langage HTML (développé par Timberners-Lee au CERN) est le premier langage qui a été accepté en tant que standard mondial et cela dans ses différentes versions. Actuellement XML (eXtended Mark-up Language) est en train de le supplanter mais la quasi-totalité des documents disponibles sont encore écrit en HTML.

HTML s'inspire d'une approche du document assez différente de la composition par un éditeur WSYWIG: les propriétés des différents éléments du texte sont marquées par des balises entourant ces éléments. Par exemple, pour mettre en italiques un mot, on pourrait le coder de la manière suivante: bla bla $<$ début italiques $>$ texte en italique $<$ fin italiques $>$ bla bla. Ce qui donnerait, une fois interprété par le logiciel adéquat: bla bla texte en italique bla bla. Cette approche permet notamment l'écriture d'une page HTML avec n'importe quel éditeur de texte (Edit de MS-DOS ou Notepad sous Windows). Il existe bien sûr des éditeurs sophistiqués qui aident la composition des balises ou même des éditeurs WSYWIG qui cachent les balises. Mais sans une compréhension du HTML, ces éditeurs finiront toujours par donner des résultats imprévus pour une composition qui se veut précise.

Pour qu'un document soit rendu comme on le désire, il faut donc que tous ses éléments soient codés avec des balises adéquates qui indiquent les propriétés qu'on veut leur attribuer. Comme dans tout document, ces éléments appartiennent à plusieurs niveaux:

1. Le document lui-même: on précise alors les propriétés du document lui-même (le langage de codage utilisé, le langage naturel dans lequel il est écrit...) et les propriétés par défaut du texte contenu dans le document.

2. Le paragraphe: on définit, pour chaque paragraphe, ses propriétés (son alignement, son style qui est sa place dans la hiérarchie du document...) si elles sont différentes des propriétés par défaut.

3. Le mot: on définit, pour chaque mot s'éloignant des propriétés par défaut, les propriétés particulières qui lui correspondent (son style, sa taille, sa couleur...).

4. Le caractère: il est rare de modifier les proprié tés d'un caractère étant donné que cela ne correspond pas à une unité logique du document.

Il est aussi possible de définir ces propriétés une fois pour toutes dans une feuille de style CSS et de l'appliquer à tous les documents du même type. cela permet d'établir une cohérence entre tous les documents d'un site, par exemple.

Nous allons considérer dans la suite les propriétés les plus utilisées dans la création d'un document HTML simple pour Internet.

8.1 Les propriétés du document

Les navigateurs (Internet Explorer et Mozilla) comprennent plusieurs langages et plusieurs versions de chaque langage de marquage (HTML 1.0...4.0, XML...). Pour pouvoir correctement interpréter un document, on doit donc commencer par leur signaler le langage que nous utilisons dans le formatage :
$<$ !DOCTYPE HTML PUBLIC ''-//IETF//DTD HTML 2.0//EN''$>$
$<$ HTML$>$
Le contenu du document doit être placé ici.
$<$ /HTML$>$

La première ligne indique le type du document, on peut souvent l'oublier même si sa description facilite la tâche du navigateur. La seconde ligne indique qu'à partir de ce point le document sera codé en HTML et cela jusqu'à la balise de fin.

Ainsi, toutes les balises HTML sont formées d'un indicateur de début: $<$ balise $>$ et d'un indicateur de fin: $<$ /balise $>$ .

La balise de début HTML est suivi par l'en-tête du document qui contient le titre du document mais aussi des balises meta qui facilite l'indexation correcte de ce document par les moteurs de recherche :
$<$ HEAD$>$
$<$ META NAME=''Author'' Content=''Murat Yildizoglu''$>$
$<$ meta http-equiv=''Description'' name=''Description'' content=''description de la page ''$>$
$<$ meta http-equiv=''Keywords'' name=''Keywords'' content='' mots-clé de la page''$>$
$<$ TITLE$>$ Introduction à HTML $<$ /TITLE$>$
$<$ /HEAD$>$ .

Ce titre s'affichera dans la barre de titre du navigateur.

Vient en suite le corps du document qui débute avec une balise $<$ BODY$>$ et qui se termine avec une balise $<$ /BODY$>$ . .
$<$ BODY BACKGROUND=''papierblue.jpg'' BGCOLOR=''WHITE'' TEXT=''BLACK'' LINK=''NAVY'' VLINK=''BLUE'' ALINK=''AQUA''$>$

Cette balise détermine donc les propriétés par défaut du document en ce qui concerne l'arrière-plan, la couleur du texte...

On peut alors commencer à introduire les paragraphes composants notre document.

8.2 Les propriétés des paragraphes

Ces propriétés détermine le niveau logique qu'occupe le paragraphe dans le texte et son style.

En effet, notre document contiendra en général des titres de différents niveaux et des paragraphes de texte.

Les titres sont entourés par les balises $<$ Hx $>$ et $<$ /Hx $>$ où x va de $1$ jusqu'à $6$. Ainsi, les tires de niveau 1 se codent-ils: $<$ H1$>$ Titre niveau 1 $<$ /H1$>$ .

Les paragraphes composant le corps du texte se placent entre les titres et on peut leur attribuer des propriétés d'alignement. Chaque paragraphe du document commence par une balise $<$ P$>$ et se termine par une balise $<$ /P$>$ . Si un paragraphe est centré, il doit être entouré des balises $<$ P ALIGN=''center''$>$ Ceci est un paragraphe centr&eacute;$<$ /P$>$ . On n'a pas besoin d'indiquer l'alignement pour les paragraphes qui utilisent celui par défaut (à gauche).

Les paragraphes peuvent aussi composer des listes (numérotés ou non). On doit alors utiliser les balises de liste pour l'indiquer. Il existe deux types de listes: ordonnée et non ordonnée. Les listes ordonnées sont entourées de balises $<$ OL$>$ et $<$ /OL$>$ . Les listes non-ordonnées utilisent les balisent $<$ UL$>$ et $<$ /UL$>$ . Chaque élément de la liste est entouré des balises $<$ LI$>$ et $<$ /LI$>$ (LI: List Item).

Une liste ordonnée se code donc de la manière suivante:
$<$ OL$>$
$<$ LI$>$ Premier &eacute;l&eacute;ment $<$ /LI$>$
$<$ LI$>$ Second &eacute;l&eacute;ment $<$ /LI$>$
$<$ /OL$>$

8.3 Les propriétés des mots

Les mots peuvent être entourés des balises indiquant leurs styles ou leur couleur.

8.3.1 Les styles de mot

Les styles standards des traitements de texte sont aussi disponible en HTML:

Gras:

le texte en gras (bold) s'entoure des balises $<$ B$>$ et $<$ /B$>$ ;

Italiques:

le texte en italiques s'entoure des balises $<$ I$>$ et $<$ /I$>$ ;

Souligné:

le texte souligné (Underline) s'entoure des balises $<$ U$>$ et $<$ /U$>$ .

Les propriétés de la police utilisé peut aussi être fixé grâce à la balise $<$ FONT$>$ . Mais cette balise est aussi utile pour changer la couleur d'un mot.

8.3.2 La balise $<$ FONT$>$

La balise $<$ FONT$>$ permet de fixer la police utilisée, la couleur du texte et sa taille absolue ou relative par rapport au texte qui l'entoure.

• $<$ FONT SIZE=''$x$''$>$ détermine la taille du texte. $x$ peut être une valeur absolue $\left( 1,2,3,4...\right)$ ou une valeur relative $\left( +1,-2,...\right) .$

• $<$ FONT COLOR=''$x$''$>$ détermine la couleur du texte. $x$ peut correspondre à un nom de couleur (blue, black, white...) ou à la valeur héxadécimale correspondant à la couleur dans la gamme RGB (Red-Green-Blue). Par exemple COLOR=''#0000FF'' correspond à la couleur bleu.

• $<$ FONT FACE=''Arial,Helvetica,sans-serif''$>$ détermine la police qui sera utilisée pour ce texte. On doit uniquement utiliser les polices qui sont généralement disponibles sur toutes les machines. Il faut toujours finir la liste par un nom gé nérique comme sans-serif (sans empattement - de type Arial) ou serif (avec empattement - de type Times).

La portée de cette balise se termine avec la balise de fin $<$ /FONT$>$ . On peut aussi combiner plusieurs propriétés dans une seule balise $<$ FONT$>$ :
$<$ FONT SIZE=''+1'' COLOR=''#0000FF''$>$ Plus grand et en bleu $<$ /FONT$>$ .

Ces propriétés sont alors suffisantes pour composer un texte simple en HTML. Mais la grande force de ce langage est l'hypertexte, c-à-d sa capacité à mettre les documents en relation par le biais des références (liens). La possibilité d'inclure des graphiques améliore aussi la convivialité des pages web.

8.4 Liens et images

8.4.1 Les liens

Deux types de liens sont utilisés pour les renvois: le lien vers un autre document ou le lien vers une autre partie du texte.

On peut mettre son texte en relation vers un autre document traitant du même sujet ou complétant le document. Les liens sont introduit grâce à la balise ancre $<$ A$>$ $<$ /A$>$ . Cette balise permet de préciser une destination mais aussi un repère dans le texte.

Pour renvoyer vers un document extérieur on utilise cette balise de la manière suivante:
$<$ A HREF=''http://www.w3c.org/''$>$ WWWW Consortium $<$ /A$>$ contient la spécification complète du langage HTML.

La balise ouvrante contient la référence vers un site extérieur ou même vers un document sur le même site:
$<$ A HREF=''mon_site/page2.html''$>$ Suite du document $<$ /A$>$ . Le texte contenu entre la balise ouvrante et celle fermante est l'hyperlien qui apparaîtra souligné dans le navigateur. Il suffit alors de cliquer avec la souris sur ce lien pour lire la page correspondante.

Les renvois dans le même document se font par le biais des marqueurs qu'on introduit. On peut par exemple introduire un marqueur dans le premier paragraphe du document $<$ A NAME=''début''$>$ $<$ /A$>$ et ainsi permettre au lecteur de retourner au début en cliquant sur des liens qu'on place ailleurs dans le document: $<$ A HREF=''#début''$>$ Aller au début $<$ /A$>$ .

8.4.2 Les images

Les images s'intègrent très facilement dans une page web. On peut même les placer à l'intérieur d'un lien. Pour insérer une image dans une page on utilise la balise $<$ IMG$>$ :
$<$ IMG SRC=''images/ma_photo.jpg'' BORDER=''0'' ALT=''Moi-même'' ALIGN=''LEFT''$>$

Le premier argument indique l'emplacement du fichier contenant l'image. Actuellement, la majorité des navigateurs ne comprennent que les format JPG et GIF. Le premier est utilisé pour les photos, le second pour les dessins. Depuis l'apparition d'un problème de copyright pour le format GIF, un nouveau format (PNG) est apparu mais seules les dernières versions des navigateurs savent l'afficher.

Le second argument indique l'épaisseur du cadre qui sera dessiné autour de l'image. La valeur zéro correspond à l'absence de cadre.

Le troisième argument est util pour les personnes qui n'affichent pas les images dans le navigateur ou qui utilisent un navigateur en mode texte (comme lynx sous Unix). Ce texte est aussi affiché dans les navigateurs récents quand on laisse la souris sur l'image. Ce qui laisse une possibilité de compléter la signification de l'image par un petit texte explicatif.

Le dernier argument précise l'alignement de l'image sur la page. En l'occurrence le texte coulera à droite de l'image. Si l'on veut centrer l'image sur la page en l'isolant du texte, le plus simple est de l'inclure dans un paragraphe centrée qui lui est réservé.

Un petit document utilisant toutes ces propriétés s'écrirait donc de la manière suivante:

$<$ HTML$>$

$<$ HEAD$>$

$<$ META NAME=''Author'' Content=''Murat Yildizoglu''$>$

$<$ meta http-equiv=''Description'' name=''Description'' content='' ''$>$

$<$ meta http-equiv=''Keywords'' name=''Keywords'' content='' ''$>$

$<$ TITLE$>$ Introduction &agrave; HTML$<$ /TITLE$>$

$<$ /HEAD$>$

$<$ BODY BACKGROUND=''images/papierblue.jpg'' BGCOLOR=''WHITE'' TEXT=''BLACK'' LINK=''NAVY'' VLINK=''BLUE'' ALINK=''AQUA''$>$

$<$ A NAME=''début''$>$ $<$ /A$>$ $<$ H1$>$ Titre niveau 1$<$ /H1$>$

$<$ P ALIGN=''center''$>$ Ceci est un paragraphe centr&eacute;$<$ /P$>$

$<$ H2$>$ Titre niveau 2$<$ /H2$>$

$<$ H3$>$ Titre niveau 3$<$ /H3$>$

$<$ H4$>$ Titre niveau 3$<$ /H4$>$

Blabla...

$<$ OL$>$

$<$ LI$>$ Premier &eacute;l&eacute;ment $<$ /LI$>$

$<$ LI$>$ Second &eacute;l&eacute;ment $<$ /LI$>$

$<$ /OL$>$

$<$ P$>$ Un mot peut-&ecirc;tre en $<$ B$>$ gras $<$ /B$>$ ou en $<$ I$>$ italiques $<$ /I$>$ ou $<$ U$>$ soulign&eacute;$<$ /U$>$ ; ou $<$ B$>$ $<$ I$>$ $<$ U$>$ tout cela $<$ /U$>$ $<$ /I$>$ $<$ /B$>$ en m&ecirc;me temps.$<$ /P$>$

$<$ P$>$ $<$ FONT SIZE=''+1'' COLOR=''#0000FF''$>$ Plus grand et en bleu.$<$ /FONT$>$ $<$ /P$>$

$<$ P$>$ $<$ FONT FACE=''Arial,Helvetica,sans-serif''$>$ Avec une police sans empattement $<$ /FONT$>$ $<$ /P$>$

$<$ P$>$ $<$ A HREF=''http://www.w3c.org/''$>$ WWWW Consortium $<$ /A$>$ contient la sp&eacute;cification compl&egrave;te du langage HTML.$<$ /P$>$

$<$ P$>$ $<$ A HREF=''#début''$>$ Aller au début $<$ /A$>$ $<$ /P$>$

$<$ P$>$ $<$ IMG SRC=''ma_photo.jpg'' BORDER=''0'' ALT=''Moi dans mon bain'' ALIGN=''LEFT''$>$ $<$ /P$>$

$<$ /BODY$>$

$<$ /HTML$>$

Nous n'avons pas abordé ici des concepts plus complexes comme les tableaux ou les feuilles de styles ou les langages de scripts par faute de temps.

Une fois que vous avez composé votre site, il ne vous reste plus que le télécharger par FTP dans le répertoire qui vous est dédié sur le serveur web. Le monde entier pourra alors y accéder :-)