Dernière mise à jour :2008-07-24

informatique

Pour les débutant dans le monde du WEB

Les pages web visités à l'aide d'un navigateur web sont presque entièrement créé à l'aide d'un langage commun qui est le HTML. Le langage HTML n'est pas à proprement dire un langage de programmation. On ne peut le considérer ainsi car ce langage n'est pas compilé mais plutôt interprété par un logiciel quelconque. C'est ce qui fait que si vous regardez une page web dans un navigateur et que vous visionnez ensuite cette même page dans un autre navigateur, vous constaterez probablement de petites différences dans l'affichage dû à une interprétation différente de la part de chacun des navigateurs. Les deux principaux interpréteurs de code html sont certe Microsoft Internet Explorer et Netscape. Il est fort probable que le logiciel de navigation dont vous vous servez présentement pour faire la lecture de ce texte, est l'un de ceux-ci.

Il est à noter qu'il n'est pas nécessaire d'être branché sur le web pour visionner une page html. Dans cet exercice vous apprendrez les notions de base du langage HTML, vous ferez la création de votre première page web et vous visionnerez ensuite celle-ci dans votre navigateur préféré.

Base du HTML:

HTML signifit: HyperText Markup Language. Le principale but de ce langage est le formattage de documents. Le langage HTML est constitué du série d'éléments, chacun de ceux-ci étant dotté d'attributs. Les éléments sont représentés par des balises. Une balise est représentée par les symbole '<' et '>'. Le symbole '<' représente l'ouverture de la balise et le symbole '>' représente la fermeture de celle-ci. Entre ces deux caractères ont retrouve le nom de la balise ainsi que ses attributs.

<TABLE HEIGHT="100" WIDTH="100"></TABLE>

Dans l'exemple ci-dessus, on retrouve un élément formé d'une balise d'ouverture et d'une balise de fermetture. Le nom de la balise est 'TABLE'. Remarquez que ce nom est inscrit tout de suite après le caractère d'ouverture de la balise. Deux valeurs sont ensuite données aux attributs 'WIDTH' (largeur) et 'HEIGHT' (hauteur) de la balise. La balise d'ouverture de l'élément est ensuite fermée. Finalement, la balise de fermeture est inscrite. Celle si possède la même syntaxe que la balise d'ouverture sauf qu'elle ne peut contenir aucun attribut et le nom de l'élément est inscrit suivant un caractère '/'. Il est à noter que certains éléments ne sont formés que d'une seule balise.

Remarquez que chacun des attribut est suivit d'un symbole '=' et finalement d'une valeur entre guillemets. Notez que les guillemets ne sont pas indispensable mais le caractère '=' doit être présent.

Imbrication de balise:

Entre une balise d'ouverture et de fermeture, il est possible d'incorporer d'autres balises ou du data (texte). On dit de celle-ci qu'elle sont imbriquées. Voici un exemple d'imbrication de deux balises.

<TABLE HEIGHT="100"><TR><TD>bonjour</TD></TR></TABLE>

Cet exemple imbrique les balises <TD> dans un élément <TR> qui à son tour est inclue dans l'élément <TABLE>. Notez que la balise de fermeture de l'élément TABLE apparait à la fin du formatage. L'ordre de fermeture des balise correspond toujours à l'ordre inverse d'ouverture des balise. En somme, la première balise ouverte doit toujours être la dernière balise fermée.

Le W3C

L'une des première question qu'un débutant en HTML peut se poser, c'est: Qui décide des noms des balises, de leurs attribut et de leur comportement. En effet, il existe un organisme nommé W3C qui a pour but de prendre toute décision sur la standardisation du langage. Il n'est pas dit par contre que toutes les balises décrites par le W3C sont supportées par les navigateurs.

Début de l'atelier:

Maintenant que vous avez une petite idée de la forme que peut prendre un document HTML, nous allons débuté l'exercice.

Pour faire la création de votre première page web, tout ce dont vous avez besoin c'est d'un éditeur de texte brut (ASCII). Sous un système d'exploitation Windows, vous pouvez vous servir de BlocNote (NotePad) ou WordPad. Si vous avez un système Mac, vous pouvez vous servir de SimpleTexte. Si vous disposez de Linux alors vous savez sûrement ce qu'est un éditeur de texte normal.

1. Donc, pour débutez, ouvrez votre éditeur de texte préféré.

2. La balise qui ouvre et ferme un document HTML est toujours la balise <HTML>. En guise de seconde étape, tapez le code suivant:

Listing 1.0 Fichier HTML de base
1. <HTML>
2. </HTML>

Vous pouvez maintenant sauvegarder votre document. Donnez lui le nom 'maPageWeb.htm'. L'extention d'un fichier HTML est toujours 'htm' ou 'html'. Assurez-vous de bien noter l'emplassement dans lequel vous aurez sauvegarder ce document.

À cette étape de la création du fichier, si vous en faite l'ouverture dans un navigateur web, vous ne verrez qu'une page blanche mais le navigateur n'aura repéré aucune erreur.

3. À l'intérieur de l'élément HTML nous allons maintenant faire l'imbrication de deux autres éléments. Le premier est l'élément HEAD qui contient généralement les informations sur le titre du document ainsi que d'autres informations tel des déclaration de script, des informations concernant les robots de recherche etc... Le second est l'élément BODY qui contient le corps de votre document. C'est à l'intérieur des balises de cet élément que vous entrerez de l'information textuel.

Après avoir ajouté ces éléments, votre document ressemblera à ce qui suit:

Listing 1.1 Fichier HTML de base
1. <HTML>
2. <HEAD>
3. </HEAD>
4. <BODY>
5. </BODY>
6. </HTML>

4. Comme mentionné à l'étape 3, l'information sur le titre de la page apparait toujours entre les balise <HEAD> et </HEAD>. L'élément utilisé pour l'attribution d'un titre est TITLE. Après avoir donné le titre 'Ma première page web', votre document devrait ressembler à ce qui suit:

Listing 1.2 élément TITLE
1. <HTML>
2. <HEAD>
3. <TITLE>Ma première page web</TITLE>
4. </HEAD>
5. <BODY>
6. </BODY>
7. </HTML>

Remarquez le caractère 'è' inscrit dans votre titre. Si vous tentez de visualiser cette page dans un navigateur Netscape ou Internet Explorer dont la version est antérieure à 3, il est fort probable que ce caractère soit mal interprété. Pour le voir de la bonne façon il conviendrais alors de remplacer ce caractère dans le code par l'entité lui correspondant. Une entité est un code de remplacement de caractère. Dans le cas du è, l'entité correspondante est 'è'.

Donc, si vous auriez écrit :

<TITLE>Ma première page web</TITLE>

Ce code aurait donné le même résultat.

5. À la fin de l'étape précédente, si vous auriez visionné votre page dans un navigateur, vous auriez vu une page blanche mais par contre le titre inscrit dans la barre de titre de votre navigateur serait: Ma première page web.

L'étape 5 vous propose maintenant de faire apparaitre un texte dans votre page. Pour celà, entrez le code suivant:

Listing 1.3 Intégration de texte
1. <HTML>
2. <HEAD>
3. <TITLE>Ma première page web</TITLE>
4. </HEAD>
5. <BODY>
6. Ma première page web
7. </BODY>
8. </HTML>

Après avoir tapé ce texte, sauvegardez votre fichier et ouvrez le dans votre navigateur préféré. Pour faire l'ouverture de votre page dans Netscape, il suffit d'ouvrir Netscape, de cliquer sur File(Fichier) dans la barre de menu et ensuite choisir l'option Open file... (Ouvrir un fichier) puis de choisir le fichier que vous désirez ouvrir. Dans le cas d'Internet Explorer, c'est un peu le même principe. Cliquez sur Fichier, ensuite choisissez ouvrir...

Après avoir ouvert votre page, vous verrez enfin du texte dans le navigateur. Vous l'aurez deviné, il sera écrit 'Ma première page web'. Cette phrase est écrite en noir dans la police d'écriture par défaut de votre navigateur et elle se situe en haut à gauche du document.

6. Vous vous dites sûrement qu'il serait intéressant d'ajouter un peu d'ambiance à votre texte. Vous l'aurez sûrement déjà remarqué sur d'autres page web, le texte n'apparait pas toujours dans la police de caractère de base d'un navigateur, il varit de taille, de style, de couleur etc...

L'étape 6 de cette atelier vous propose d'utiliser l'élément FONT qui permet de faire l'ajout de décoration à un bloc de texte d'une page HTML.

Les principaux attributs de l'élément FONT sont : COLOR, FACE et SIZE.

COLOR:

L'attribut COLOR permet de d'indiquer la couleur du texte inclut entre les deux balises FONT. Cette couleur peut être indiqué par son nom (anglais) comme par exemple, RED ou BLUE mais il n'est pas certain que le navigateur reconnaitra tous les noms de couleurs. Pour être sûr du résultat, il convient d'employer une notation différente. La notation HTML concernant les couleur est basée sur la forme RGB (Red Green Blue). La syntaxe de notation d'une couleur est la suivante: Le symbole '#' suivit d'une série de 6 chiffres noté en hexadécimal (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f). Les deux premier chifres représentent la valeur de la couleur rouge, les deux autres, la valeur de la couleur verte et finalement, les dernier, la valeur de la couleur bleu.

FACE:

L'attribut FACE permet de définir la police de caractère qui sera utilisée pour représenter le texte. Il est à noter que si vous indiquez un type de police de caractère que l'utilisateur qui visionne votre page ne possède pas dans son ordinateur, la police sera alors substitué par la police par défaut du navigateur de l'utilisateur en question. Il est donc préférable d'utiliser des polices commune à l'ensemble des internaute ou presque soit: Verdana, Arial, Courier, ou Times.

SIZE:

Cet attribut sert à indiquer à l'interpréteur quel sera la grosseur du texte contenu dans les balises de l'élément FONT. La plupart du temps, la taille est 3 ce qui équivaut approximativement à 12point dans un texte écrit dans le logiciel de traitement de texte Microsoft Word.

Dans notre exemple, nous allons reprendre le texte déjà écrit et lui donner l'aspet d'un titre d'un document fictif. Nous allons aussi ajouter un court texte à la suite de ce titre. Voici ce à quoi ressemblera alors notre page.

Listing 1.4 élément FONT
1. <HTML>
2. <HEAD>
3. <TITLE>Ma première page web</TITLE>
4. </HEAD>
5. <BODY>
6. <FONT COLOR="#0000ff" FACE="Arial" SIZE="5">Ma première page web</FONT>
7. <FONT COLOR="#000000" FACE="Arial" SIZE="3">
8. Bienvenu sur mon site web personnel. Ce site est présentement en construction.
9. </FONT>
10. </BODY>
11. </HTML>

Après avoir tapé ce code, ouvrez à nouveau votre page dans votre navigateur. Vous constaterez que le texte de votre titre est sensiblement plus gros que le texte qui le suis. De plus, le titre est en bleu tandis que le reste du texte est en noir. La police de caractère, qu'en à elle est Arial dans les deux cas.

7. La mise en page reste cependant très terne. Le titre et le texte reste collé ensemble. De plus, ils sont aligné en haut à gauche de la page.

Pour contrer ce problème, nous allons introduire les éléments P et BR qui sont respectivement utilisé pour déterminer les paragraphe et pour effectuer des saut de ligne et retour de chariot.

Le principal attribut de l'élément P est ALIGN qui permet de déterminer l'alignement (LEFT, CENTER ou RIGHT) du texte du paragraphe.

L'élément BR qu'en à lui ne comprend aucun attribut et ne possède pas de balise fermante. Son seul rôle est d'effectuer un retour de chariot et saut de ligne.

Dans notre exemple, nous allons maintenant séparer les titre du texte en insérant chacun de ceux-ci dans un paragraphe distinct. De plus, nous allons aligner le titre au centre et nous allons ajouter un espace entre le titre et le bord supérieur de la zone de visionnement du navigateur.

Voici le résultat:

Listing 1.5 éléments P et BR
1. <HTML>
2. <HEAD>
3. <TITLE>Ma première page web</TITLE>
4. </HEAD>
5. <BODY>
6. <BR>
7. <P ALIGN="Center">
8. <FONT COLOR="#0000ff" FACE="Arial" SIZE="5">Ma première page web</FONT>
9. </P>
10. <p ALIGN="Left">
11. <FONT COLOR="#000000" FACE="Arial" SIZE="3">
12. Bienvenu sur mon site web personnel. Ce site est présentement en construction.
13. </FONT>
14. </P>
15. </BODY>
16. </HTML>

8. À l'étape 6, en plus de taille, police et couleur de texte, il était aussi fait mention de style. En effet, il est possible d'ajouter du style à un texte en faisant l'utilisation de certain élément. Les principaux éléments utilisés dans le but de faire l'ajout de style à une page HTML sont: B, U et I. Ceux-ci permettent respectivement de mettre le texte en caractère gras, souligné ou en italique.

Dans notre atelier, pour mettre l'accent sur notre titre, nous allons le souligner. De plus, nous allon mettre le texte 'mon site web' en caractère gras et en italique comme dans le code suivant:

Listing 1.6 Intégration de style
1. <HTML>
2. <HEAD>
3. <TITLE>Ma première page web</TITLE>
4. </HEAD>
5. <BODY>
6. <BR>
7. <P ALIGN="Center">
8. <FONT COLOR="#0000ff" FACE="Arial" SIZE="5"><U>Ma première page web</U></FONT>
9. </P>
10. <p ALIGN="Left">
11. <FONT COLOR="#000000" FACE="Arial" SIZE="3">
Bienvenu sur <B><I>mon site web</I></B> personnel. Ce site est présentement en construction.
12. </FONT>
13. </P>
14. </BODY>
15. </HTML>

Je pourrais continuer ce texte durant plusieurs jours en expliquant chacun des éléments du langages HTML ainsi que leur utilisation. En fait, ce premier texte que je compose sur le HTML avait pour but de vous enseigner une base du langage pas juste des exemples d'utilisation des balises. Je vais tout de même terminer ce texte en vous donnant une courte description des autres éléments qui constituent la base de ce langage.

A

Le but principal de l'élément A est la déclaration de liens hypertextes. Un lien hypertexte permet le déplacement entre plusieurs document web. Le principal attribut de la balise A est HREF. La valeur donnée à celui-ci est l'URL (Uniform ressource locator) ou emplacement du fichier vers lequel le lien mènera l'utilisateur. Par exemple, l'adresse de ce site serait une URL adéquate.

IMG

Cet élément concerne les images dans les pages web. Son principal attribut est SRC. Celui-ci permet d'indiquer l'endroit (source) de l'image. Tout comme l'attribut HREF de l'élément A, la valeur de l'attribut SRC doit être une URL vers l'image en question. Il est à noté que les format d'image utilisés sur le Web sont le format GIF et JPEG.

Note: L'élément image n'est formé que d'une seule balise comme l'élément BR.

UL, LI

C'est deux éléments permettent d'insérer des listes numéroté ou pas dans vos pages.

Voici un exemple de liste à puce:

<UL>
<LI>élément 1</LI>
<LI>élément 2</LI>
<LI>élément 3</LI>
</UL>

TABLE, TR, TD

L'élément TABLE permet faire la création de tableaux. L'élément TR perment de spécifier les lignes d'un tableau et l'élément TD, détermine ses colonnes.

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2001-10-04

Aucun commentaire pour l'instant.