CREER SON OUAIB
en dix leçons ou un peu plus
Par Saint Jacques

Vous avez une offre d'hébergement chez un fournisseur, et vous ne vous en servez pas ? Vous aimeriez concevoir un site personnel mais pour vous HTML signifie Haute Technologie Mal éLudée ? Bref, vous ne savez pas par où commencer ? Ce tutoriel est fait pour vous ...

Il est organisé par chapitre, du plus simple au plus compliqué, c'est pourquoi je recommande au novice de suivre la chronologie .
Et pour toute remarque, problème, encouragement, propositions indécentes, n'oubliez pas... mailez moi ....

Tout d'abord ...

Pour créer son site personnel, le quidam a deux possibilités :

- s'il fait ses premiers pas sur le ouèb , il peut écrire sa page presque comme s'il tapait un texte sous Word, c-a-d utiliser le principal langage de "programmation" des pages Internet, le HTML. Ce langage permet l'écriture de toutes sortes de textes ( choix des polices, tailles, couleurs, etc ... ), insérer des images, des sons, des formulaires et surtout des liens hypertextes pour donner à son site une certaine interactivité.
- s'il s'est, à la sueur de son front, forgé une solide expérience dans le domaine de la publication de pages ouèb, il peut insérer dans ces pages du langage JAVASCRIPT, un langage puissant qui permet de complètement personnaliser son site , de recevoir et d'envoyer des données ( info. sur le visiteur par exemple ) et ainsi assurer à son site une très grande interactivité.

Les lignes qui suivent sont avant tout réservées au débutants qui veulent comprendre le langage HTML, mais il n'est pas dit que des webmasters plus confirmés ne puisse y trouver leur bonheur ...

Tout d'abord saisissons-nous virtuellement d'un éditeur de pages ouèb, qui permet de créer et d'éditer son site. Les éditeurs de pages web sont nombreux, et la plupart sont largement suffisants pour un usage personnel.
J'utilise WebExpert, qui permet une visualisation instantanée du travail effectué. Cependant d'autres logiciels comme FrontPage sont aussi performants, ou tout simplement Word ( versions récentes ) qui assure une création rapide ( il peut s'avérer à la longue trop limité puisqu'il ne supporte que le langage HTML ).

Aperçu du langage HTML
Formatage de texte
Liens hypertextes
Insertions d'images
Insertions de séparateurs
Tableaux
Personnalisation de la balise <BODY>
Son d'arrière plan
Organisation de la page
Les Cadres
Intro au JavaScript

Retour au Mô's Ouaib

1) Un petit aperçu du langage HTML :

Le HTML est un langage assez simple qui fonctionne grâce à des balises, appelées balises HTML. Ces balises sont caractérisées par les symboles < et >. Ce sont elles qui informent le navigateur du visiteur de la police du texte, de sa couleur, etc ...

Un document Internet comporte deux parties, délimitées par deux balises distinctes :

- l'en-tête, la plus petite, qui renferme les informations sur la page comme le titre, le thème, les mots clés ...
Tout ces éléments sont contenues entre la balise de début <HEAD> et la balise de fin </HEAD>
Veillez à bien fournir toutes ces infos : elle n'apparaîtront pas lors de l'affichage de la page mais sont essentielles pour les moteurs de recherche.
Cette partie peut aussi contenir des éléments en JAVA, mais ce n'est pas notre problème pour l'instant !...

- le corps du document, la partie la plus longue : elle est contenue entre la balise de début <BODY> et la balise de fin </BODY>. Elle contient toutes les informations relatives à l'affichage de la page...

Ces deux parties contiennent d'autres balises. Mais pour mieux comprendre le principe, prenons un exemple de page ouaib :

<HTML>
<HEAD> <TITLE>Mon Site</TITLE> <META NAME="Description" CONTENT="Intro"> <META NAME="Keywords" CONTENT="langage,HTML"> <META NAME="Author" CONTENT="SaintJacques"> <META NAME="Generator" CONTENT="WebExpert"> </HEAD>	C'est l'en-tête du document : placez entre les balises ( en rouge ) les infos sur votre page
<BODY> Bonjour ! Il est beau mon site ? </BODY>	C'est le corps du document : si vous tapez du texte directement entre ces deux balises, il apparaîtra sans mise en forme.
</HTML>

Tapez le code ( colonne gauche du tableau ) sur une page vierge de votre éditeur ou effectuez un copier coller en supprimant les annotations ( colonne droite ), enregistrez le document et ouvrez-le à partir de votre navigateur.

Pour les utilisateur de WebExpert, une fois le code tapé, appuyez sur la double flèche de la barre d'outil, ou sur shift+F10

Voilà ! Votre première page est un peu basique, mais elle marche !

2) A l'intérieur des balises <BODY> : formatage du texte

Bon, je pense que vous avez maintenant compris le système des balises. Maintenant, il faut apprendre à les reconnaître : en voici une petite liste des principales ...

Votre texte
Cette balise est la plus commune, elle permet de choisir la police du texte tapé entre les deux balises. Après le signe "=" des attributs ( en vert ), il faut inscrire le type de police choisit, la taille ( de 1 à 7 ), et la couleur ( normalement en hexadécimal, mais vous pouvez aussi inscrire le nom de la couleur en anglais : black, white, red, yellow, etc ... )

Votre texte
Cette balise permet de placer le texte en gras

Votre texte
Cette balise permet de placer le texte en italique

Votre texte
Cette balise permet de souligner le texte

<DIV ALIGN="left">Votre texte</DIV>
Remplacez "left" par "center" ou "right" pour aligner le texte au centre ou à gauche.
Remplacez l'attribut ALIGN="" par l'attribut STYLE="text-align:justify;" pour justifier le texte.

Cette balise s'insère telle quelle à la fin d'une phrase pour effectuer un changement de ligne ( à utiliser chaque fois que vous voulez sauter une ligne ).

Votre texte
Empêche le changement de ligne sur votre texte.

Ces balises permettent de modifier votre texte pour le rendre plus attrayant. Elle peuvent bien sûr être combinées. Testez l'exemple :

Le code source :
Ceci est un exemple

Le résultat :
Ceci est un exemple

3) A l'intérieur des balises <BODY> : Liens hypertextes

Un lien hypertexte peut être constitué d'un mot ( qui apparaît la plupart du temps souligné ) ou d'une image : dans les deux cas, le curseur change de forme lorsque vous passez dessus, comme ici Mais que représente exactement un lien hypertexte ? En fait, c'est une sorte de pont qui, lorsque vous cliquez dessus, vous fait arriver à une certaine destination.
La balise spécifique d'un lien hypertexte est : <A> et </A> Il y a deux types de lien hypertexte, externe et interne. Le lien externe vous transporte vers un autre document HTML ( une autre page de votre site ou un autre site ) tandis que le lien interne fait référence à une destination qui se trouve à l'intérieur du document HTML.

<A HREF= "http://perso.worldonline.fr/loutreaux/">Votre texte</A>

L'attribut HREF indique le lieu où le pont va vous mener si vous cliquez sur "Votre texte" :

1) HREF="http://perso.worldonline.fr/loutreaux/"	lien externe qui vous conduit sur un autres site
2) HREF="tutoriel.html"	lien externe qui vous conduit vers une autre page du site, ici "tutoriel.html"
3) HREF="#Liens hypertextes"	lien interne qui vous conduit vers une partie spécifique de la page en cours

!!! Pour le cas n°3, le lien interne, il faut auparavant placer un signet dans la page, là où vous voulez que le lien mène.
Pour ce, il faut insérer <A NAME="Liens hypertextes"> au début de la ligne ou de la phrase désirée, puis </A> à la fin ...
Dès lors que vous cliquerez sur "Votre texte", cela vous conduira sur cette ligne.

D'autre part, lorsqu'un visiteur clique sur un lien hypertexte, le contenu de la destination peut :
- s'afficher dans la même fenêtre du navigateur, remplaçant ainsi le contenu de la page d'où le lien est appelé : cette option est celle activée par défaut.
- s'afficher dans une nouvelle fenêtre : la page d'origine reste visible. Pour activer cette option ( utile lorsque vous faites des liens vers d'autres sites ), il faut ajouter dans la balise <A> un attribut : TARGET="_blank"

4) A l'intérieur des balises <BODY> : Insertion d'images

Le texte, c'est bien, mais vous aimeriez placer des images dans votre pages ? C'est très simple !
La balise consacrée est <IMG> et </IMG> :

<IMG SRC="image.jpg" BORDER=0 WIDTH=170 HEIGHT=208>

SRC= Il faut indiquer le nom du fichier image ( pensez à mettre les images dans le même répertoire que la page )
BORDER= Indique la largeur en pixel de la bordure qui encadre l'image ( 0 : pas de bordure )
WIDHT= et HEIGHT= Il faut indiquer respectivement la largeur et la hauteur en pixels de l'image.
ALIGN= Indiquer "left", "right" ou "center" pour aligner l'image horizontalement, ou "top", "middle" pour l'aligner verticalement. Si vous ne précisez pas cet attribut, l'image sera alignée en bas à gauche.

Dans la plupart des éditeurs, l'insertion d'images est facilitée par des boîtes de dialogue ( pour WebExpert, il faut cliquer droite à l'emplacement voulu et choisir "Image rapide" )

Cliquez ICI pour accéder à une banque d'images animés, de textures ...

5) A l'intérieur des balises <BODY> : Insertion de séparateurs

Les séparateurs sont des lignes dont vous pouvez choisir la longueur et l'épaisseur, utilisée pour séparer paragraphes, images ...
Utilisez la ligne :

<HR WIDTH=80% COLOR="white">

WIDTH= Indiquez la largeur voulue en pourcentage : si vous n'écrivez pas cet attribut, la ligne prendra automatiquement toute la largeur de la page ( 100% )
COLOR= Couleur de la ligne ( facultatif )

6) A l'intérieur des balises <BODY> : Tableaux

Les tableaux sont très utilisés sur les pages ouèb, même si vous ne les voyez pas toujours.
Lorsqu'ils sont apparent, il servent principalement à la classification d'informations.
Lorsqu'ils sont invisibles, ils servent à la mise en page.
Leur création ex nihilo étant assez complexe, voici un petit exemple :

<TABLE WIDTH=100% BORDER=1 BORDERCOLOR="red">	Début du tableau : indiquez la largeur du tableau, l'épaisseur et la couleur de la bordure
<TR> <TD>A</TD> <TD>B</TD> </TR>	Première ligne du tableau ( indiqué par <TR> ), qui contient deux cellules ( indiqué par <TD> )
<TR> <TD COLSPAN=2>C</TD> </TR>	Deuxième ligne du tableau : Une seule cellule, à cause de l'attribut COLSPAN=2
</TABLE>	Fin du tableau

Le résultat sera le suivant :

A	B
C

Il est bien sûr tout à fait possible de modifier la police, l'alignement et la couleur du texte à l'intérieur de chaque cellules.

7) Personnalisation de la balise <BODY> :

La balise <BODY> peut contenir certains attribut, qui modifieront l'aspect global de la page. Un exemple de cette balise :

<BODY BGCOLOR="black" TEXT="white" LINK="red" VLINK="red" ALINK="red" >

BGCOLOR= Couleur du fond
TEXT= Couleur du texte
LINK= Couleur des liens
VLINK= Couleur des liens en cours
ALINK= Couleur des liens déjà visités

Vous pouvez aussi mettre une image en arrière plan : il faut ajouter l'attribut :
BACKGROUND="image.jpg"

A propos des textures de fonds d'écran :
Il faut savoir que le navigateur placera l'image choisit en mosaïque, c-a-d qu'il la répètera de droite à gauche et de bas en haut jusqu'à ce que toute la fenêtre du navigateur soit "remplie" par l'image.
Pour cette raison il faut choisir :
- soit une grosse image qui occupe tout l'écran ( tout en sachant que sa taille en octets rendra le chargement de la page plus ou moins long )
- soit une petite image qui peut se répéter pour former un fond uni.

8) Son d'arrière-plan :

Un petit plus pour votre page serait d'insérer du son ... C'est possible grâce à cette toute petite balise :

<BGSOUND SRC="musique.mid" LOOP=5>

SRC= Indiquez le nom du fichier son ( comme pour les images, pensez à copier ce fichier dans le répertoire de la page )
LOOP= Nombre de répétitions ( -1 : son répété à l'infini )

!!! Il faut placer la balise dans l'en-tête de votre document !!!

9) Type de sommaires - organisation d'une page

Vous avez maintenant tous les outils nécessaires pour créer une page vivante et agréable. Maintenant va venir le problème de l'organisation de celle-ci et notamment du type de sommaire ...

Vous pouvez choisir parmis trois types de sommaire :

- La page-sommaire ( index ), qui contient toutes les titres des rubriques de votre site. En partant de cette page, le visiteur pourra aller sur n'importe quelle page de votre site, mais devra constamment y revenir s'il veut changer d'orientation.
Ce type d'organisation est très facile à mettre en place avec des liens hypertextes externe.

- Toutes les rubriques sur une même page et le sommaire en haut de page. Ce système, même s'il augmente le temps de chargement de la page ( qui contient toutes les rubriques ), permet au visiteur une navigation plus rapide et donc plus agréable.
Ce système est facile à mettre en place, grâce à des signets ( à placer au début de chaque rubrique ) et des liens hypertexte internes.

- Enfin, l'utilisation des cadres, qui permet l'utilisation la plus confortable : Une partie de l'écran ( à gauche le plus souvent ) est réservé au sommaire, et lorsque le visiteur choisit une rubrique, celle-ci s'affiche à droite, laissant le sommaire toujours visible ...
Cependant l'utilisation de cadres est un peu complexe : elle sera expliquée dans le paragraphe suivant ...

10) Les Cadres :

L'utilisation de cadres permet d'afficher plusieurs pages sur une même fenêtre de navigateur. Cependant cette "technologie" n'est pas vieille comme le monde, et certaines obscures versions de navigateurs ne peuvent pas afficher de cadres : il faudra donc penser à une deuxième voie pour ces utilisateurs moyenâgeux. Mais cela sera dans les lignes qui suivent ...

Pour la suite, nous supposerons que vous avez deux rubriques sur votre site, sur deux pages différentes :
- "Chimpanzé.html", une page sur la sensibilité du chimpanzé
- "Lalane.html", une page sur un chanteur qui nous fait repenser la notion de musique
Une page d'index, contenant les liens vers ces deux sites :
- "index.html"
Et une page presque vierge, ne contenant rien dans la partie <BODY> :
- "rien.html"

Tout d'abord il faut créer une page qui sera le support des cadres, c-a-d qui "hébergera" les différentes pages.

Sur cette page, il faut insérer le code suivant !! Attention !! il ne faut pas que cette page contienne de balise <BODY>, le code est à insérer directement après l'en-tête :

<FRAMESET COLS="30%,*">	Indique que la fenêtre va être coupé verticalement à 30% de sa largeur ( vous pouvez changer cette valeur ) Pour couper la fenêtre horizontalement, il faut remplacer COLS= par ROWS=
<FRAME NAME="CadreGauche" SRC="index.html">	Nom et contenu du premier cadre ( adresse de la page d'index )
<FRAME NAME="CadreDroite" SRC="rien.html">	Nom et contenu du deuxième cadre ( adresse de la page vierge )
<NOFRAMES> <BODY>Texte affiché si cadres pas supportés</BODY> </NOFRAMES>	Entre les balise <BODY> insérez le texte que verra le visiteur si son ancienne version du navigateur n'accepte pas les cadres. En temps normal ce texte est invisible.
</FRAMESET>	Fin des cadres

Si vous testez cette source, vous pourrez voir à quoi ressemble les cadres ...
Cependant, si vous cliquez sur un des liens du sommaire, on remarque que la page demandée s'affiche dans le cadre réservé à l'index !
Il faut donc effectuer quelques modifications au niveau des liens de l'index pour rediriger la page demandée vers le cadre droit, actuellement vide.

En fait, il suffit de rajouter un attribut dans les balises <A> des liens de l'index. Par exemple, pour le lien vers les chimpanzés :

<A HREF="Chimpanzé.html TARGET="CadreDroite">

L'attribut TARGET= indique le cadre de destination du lien : ici il s'appelle "CadreDroite", comme nous l'avons nommé précédemment ( cf. tableau )

Rq : Si vous voulez, pour un lien, "sortir des cadres", c-a-d afficher la page désirée dans une fenêtre entière, il faut remplacer le nom du cadre par "_top"

Voilà ! Les cadres sont maintenant opérationnels ... Et vous connaissez maintenant l'essentiel du langage HTML, c'est à dire de quoi faire de belle pages ouèb. Je vous propose pour terminer une petite introduction au Java et quelques liens. Mais n'oubliez pas : le fond prime toujours sur la forme !

11) JavaScript : C koi ?

Autant le HTML n'est pas un réel langage de programmation, autant le JavaScript en est un. Il se rapproche de langage tels que C++ ou Delphi. Mais je ne vais pas m'étendre sur le sujet pour deux raisons :
1) Je n'ai pas le niveau suffisant pour pouvoir vous enseigner ce langage
2) Le peu que je sais serait trop long à expliquer

C'est pourquoi je ne peut que trop vous conseiller de lire des bouquins dessus. Si vous avez la flemme, hé bien faites comme la majorité des internautes : prenez les sources en java sur des sites.

En effet, il est possible de voir le code source d'un site ( HTML + Java ), sur le Notepad par exemple, par l'intermédiaire du navigateur ( pour Internet Explorer : Affichage / Source ). Cela permet à n'importe qui de récupérer des sources en java. Cependant ne copier coller pas sauvagement tout ce qui vous passe sous la main : laissez les annotations des auteurs ( invisibles sur le navigateur, ces annotations apparaissent dans la source avec les balises  ).

Dans ma magnanime bonté vous pouvez toujours vous mettre sous la dent le titi de ma page d'index, ou d'autres scripts qui vous plairaient ...
De plus, voici deux adresses ou vous pourrez trouver de nombreux scripts :

Cute'nd'Paste Javascript
La Caverne du Java

Je crois que j'ai tout dit ... Tchao !