Aide à la création de pages Web

Ceci n'est pas un cours de langage HTML. Mais seulement une aide pour le débutant. Les grands principes du HTML y sont décrits, rarement développés. Ce guide pratique est loin d'être exhaustif, seulement succint.

Aller à l'index

Cette page a été développée à l'aide The "Home Page" Home Page

Dernière mise à jour le 2 Novembre 1997

Listes non numérotées
Listes numérotées
Listes de définition
Atteindre un document externe
Atteindre une référence interne
Lien de mail
Insérer une image
Insérer une image cliquable
Ajouter une image de fond
Ajouter un compteur

Retour à ma page personnelle

Pour des informations supplémentaires, pour toute remarque, n'hésitez-pas à me contacter :
shaihld@chez.com

Les éditeurs HTML

Il en existe des centaines sur le marché, la plupart disponibles par le Web même en téléchargement. Celui que j'utilise est Hotdog, version shareware. Vous pouvez vous le procurer sur le serveur Sausage software.

Ces éditeurs sont actuellement rarement WYSIWYG (What You See Is What You Get). Cela ressemble à du texte avec beaucoup de code parfois nébuleux autour.

Il est nécéssaire, souvent de construire sa page Web en visualisant directement sur son butineur (terme québécquois). Quelques jonglages sont donc nécéssaires

Un bon réflexe à est de prendre exemple sur ce qui est déjà fait. Ce n'est pas du piratage !!! Pour voir le code HTML d'une page, quelle qu'elle soit, il suffit dans netscape de choisir l'iten Document Source du menu View

Retour à l'index

Les codes HTML de base

Sur la plupart des éditeurs HTML, lors de l'ouverture d'une page vierge, les codes suivants sont déjà présents :

<HTML>
<HEAD>
<TITLE> type_Document_Title_here </TITLE>
</HEAD>
<BODY>
main_part_of_document_goes_here
</BODY>
</HTML>

Une règle générale est que tout code ouvrant <code> est souvent suivit d'un code fermant </code>. Ce n'est pas toujours le cas néanmoins... Par exemple, on commence du texte en gras par et on le termine par 

Il est possible de rajouter le commentaire qui apparaîtra dans l'intitulé de la page sur les moteurs de recherche, du style altavista ou lycos dans la section HEAD en rajoutant :

<META name="Description" content="La description de la page.">

De même pour les mots-clés d'accès à la page :

<META name="Keywords" content="Série de mots, séparés par des virgules">

Retour à l'index

Les codes d'alignement du texte

Malheureusement, il n'en existe qu'un qui est le code de centrage. Tout ce qui n'est pas centré est donc aligné à gauche...
la syntaxe de centré est : <center>texte</center>
Ce qui donne :

Centré

Retour à l'index

Les codes de format de caractères

Sont présent: Gras et Italique

La syntaxe du gras est : texte

La syntaxe de l'italique : texte

Ce qui donne : gras, italique, gras-italique

Retour à l'index

Faire clignoter du texte

Le clignotement est plus ou moins lent selon les machines, mais c'est toujours très amusant à faire, à condition de ne pas trop charger...

La syntaxe est : <blink>texte</blink>

Pour un résultat amusant :Je clignote !!!

Retour à l'index

Préformatage du texte

Ceci permet d'insérer à l'écran du texte comme il a été saisi. Cela permet d'aller à la ligne sans insérer de codes de saut de lignes, d'insérer une série de blancs successifs.

Sa syntaxe est : <pre>texte</pre>
Ce qui donne :
		There was a young man from Boston
		who bought himself a new Austin.
		He had room for his lass and a gallon of gas
		but his tie hung out and he lost 'em.
Retour à l'index

Régler la taille du texte

Il est possible de changer la taille du texte grace au code Texte. Les tailles disponibles vont de -4 à +4, ce qui donne :

Taille -4
Taille -3
Taille -2
Taille -1
Taille 0
Taille +1
Taille +2
Taille +3
Taille +4

Les résultats à l'écran sont parfois bloqués à une taille max qui dépend de on ne sait quoi...

Retour à l'index

Les headers

Ce sont en fait des titres. Ils permettent d'avoir une mise en forme standard pour des titres de 1 à 6. Ils évitent de plus à reparamétrer manuellement chaque titre.

Leur syntaxe est : <H#titre>Titre</H#titre>.

Par exemple : <h1>Titre 1</h1>

Cela donné à l'écran :

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5

Titre 6

Retour à l'index

Les sauts de ligne

Les browsers ne sautent des lignes que si il leur est explicitement demandé. Il ne respectent pas la mise en forme du texte dans le fichier (il en est de même pour les espaces, ils n'affichent jamais deux espaces de suite, pour le faire, il faut utiliser l'attribut de préformatage du texte)

Pour sauter une ligne : 

Pour changer de paragraphe : 

La commande termine la ligne et se place au début de la suivante, la commande termine la ligne, insère une ligne blanche et se place au début de la suivante (deux de suite en quelque sortes)

Retour à l'index

Les lignes horizontales

Appelées par le code <hr>, elles permettent de tracer une ligne traversant l'écran. Des paramétrages plus fins sont possibles avec HotDog.

Par exemple :<hr width=90% size=3>, créé une ligne de 3 pixels d'épaisseur et de 90% de l'écran en largeur.

Cela donne :

100%, 2 pixels

90%, 3 pixels

80%, 5 pixels

70%, 7 pixels

60%, 9 pixels

50%, 11 pixels

40%, 15 pixels

30%, 20 pixels

20%, 25 pixels

10%, 30 pixels

Evidemment, ce serait plus visible sur un fond uni...

Retour à l'index

Listes non numérotées

Les listes non numérotées sont des listes avec des puces devant chaque item.

Leur syntaxe est :

<ul> Nom de la liste
<li> Item 1
<li> Item 2
<li> ...
<li>
</ul>

Cela donne :

Ceci est une liste de courses

Beurre
Lait
Vache (folle)
etc...
etc...

Retour à l'index

Listes numérotées

C'est le même principe que les Listes non numérotées mais avec des numéros !!!

Cette fois, la syntaxe est :

<ol> Nom de la liste
<li> Item 1
<li> Item 2
<li> ...
<li>
</ol>

Cela donne :

Résultat du grand prix de Monaco

Olivier Panis
un autre
je sais plus
etc...
etc...

Retour à l'index

Liste de définition

Ce sont des listes qui mettent en évidence le nom de l'item que l'on veut définir par rapport à sa définition.

La syntaxe est :

<dl>
<dt>Terme 1
<dd>Definition 1
<dt>Terme 2
<dd>Definition 2
<dt>...
<dd>...
</dl>

Cela donne :

Oranges
A reddish yellow tropical fruit about the size of an apple. A member of the citrus fruit family. In the United States, oranges are grown primarily in the states of Florida and California.
Apples
Technically a pome, apples are an orange-sized fruit, usually in varying shades and mixtures of red, yellow, and green. In the United States, apples are grown primarily in the northern states, near bodies of water.

Retour à l'index

Atteindre un document externe

Ceci permet de créer un lien hypertexte de la page vers une autre, quelle qu'elle soit (autre page sur le même serveur, page sur un autre serveur...)

La syntaxe est : <a href="adresse_de_la_page">Texte du lien</a>

Par exemple :
lien sur le même serveur : <a href="index.html">Page maison de Shaï-Hulud</a>
lien sur un serveur externe : <a href="http://www.geocities.com">Geocities</a>

Ce qui donne :
Page maison de Shaï-Hulud
Geocities

Retour à l'index

Atteindre une référence interne

C'est le même principe que pour les liens externes appliqués à l'intérieur même d'un document. Les appels se font de la même manière, mais il faut en plus ajouter une sorte de label pour indiquer où se trouve la destination du lien.

Lasyntaxe du label est : <a name="Nom_du_label"></a>
Celle du lien : <a href="#Nom_du_label">Nom du lien</a>

Par exemple :
<a name="Index"></a>
<a href="#index">Retour à l'index</a>

Cela donne : Retour à l'index

Il est possible de mélanger références externes et internes en indiquant à la fois lors de l'appel à la référence, le nom du fichier sur le site distant et le label destination.

Par exemple : <a href="music.htm#trip_hop" >Le trip hop</a> : Le trip hop

Retour à l'index

Insérer un lien pour mail

Cela ressemble beaucoup à l'insertion d'un lien externe, avec seulement l'ajout du mot clé MAILTO.

Plus clairement, cela donne : <a href="MAILTO:adresse">Texte</a>

Par exemple : <a href="MAILTO:shaihld@chez.com">Olivier Leguay</a> donne : Olivier Leguay

Retour à l'index

Insérer une image

Les formats d'images reconnus par les explorateurs internet, sont le GIF (images en 256 couleurs) et le JPEG (extension .JPG, images en 16,7 Millions de couleurs)

L'insertion se fait par : <IMG SRC="image" ALT="Description alternative">

Par exemple : <IMG SRC="l_appat.jpg" ALT="Image du film l'Appât">

Ce qui donne :

Il est aussi possible d'appeler une image en tant que lien externe, voire même de rendre l'image similaire à un lien.

Par exemple : <a href="l_appat.jpg">L'Appât (#1)</A> donne L'Appât (#1)
et<a href="gillain/marie_gi.htm"><IMG SRC="l_appat.jpg" ALT="Image du film l'Appât"></a> donne:

D'autres paramètres sont possibles comme l'alignement de l'image, à gauche, à droite, au centre par rapport à la ligne, en haut, en bas.

On introduit ces paramètres au moment de la description de l'image. Par exemple :

<IMG SRC="cmailbox.gif" ALT="une boîte aux lettre" align=left>

align=left

align=right

align=top, align=bottom, align=middle.

Autre paramètre, la taille de la bordure au tour de l'image si c'est un lien : <img src="cmailbox.gif" border=nombre>

border=0 :

border=1 :

border=5 :

Retour à l'index

Insérer une image de fond

Cela se fait par l'ajout du mot clé BACKGROUND suivi du nom de l'image après le mot clé BODY (Code HTML de base).

En clair : <BODY> devient <BODY BACKGROUND="image">

Pour cette page, cela donne : <BODY BACKGROUND="ctext.jpg">

Retour à l'index

Insérer un compteur

Cela dépend du serveur sur lequel la page est hébergée. En général, les serveurs du type Chez ou Multimania possèdent en standard un compteur par compte, que l'on peut insérer au choix. Dans la plupart des cas, il s'agit toujours du même compteur dont le nom m'échappe. On peut trouver quelques informations sur celui-ci à la page suivante : WWW Homepage Access Counter and Clock, sinon il suffit de regarder la doc sur le serveur qui héberge.

Rien de très standard donc, je ne peut pas vraiment en dire plus...

Bonne chance !

Retour à l'index

Pour toute remarque, contactez Olivier Leguay.