Avant tout, il faut expliquer ce qu'est le HTML: le HTML est un langage de mise en page, donc sert à decrire comment les textes sont écrites sur une page ou encore où sont placés les images (un peu comme les documents Word ou Acrobat). C'est un langage que l'on peut facilement écrire à la main, et peut être visualisé par tous les navigateurs internet comme Internet Explorer, Mozilla Firefox, Opera ou encore Safari. Toutes les pages que vous visitez sur internet sont écrites en HTML.
HTML SIMPLE
Comme je l'avais précisé avant, le HTML est un langage que l'on peut, si on veut, écrire à la main. Essayez: ouvrez le super logiciel appelé bloc-notes (ou autre éditeur simple de texte), écrivez bijour et sauvegardez en tant que essai.html. Maintenant, si vous double cliquez sur ce fichier, votre navigateur internet va l'ouvrir et écrira bijour dans sa fenêtre... Pour ceux qui veulent faire des essais un peu plus complexes sur plusieurs lignes, faudra écrire <br> pour le changement de ligne. Voilà, vous venez d'écrire votre premier HTML! Vous pouvez, par conséquent, prendre une superbe pause pour boire un petit café / thé, aller fumer, faire du sport, dormir ... je vous prie juste de ne pas faire la grève.
HTML UN PEU PLUS COMPLIQUE
Vous ayant fait travailler pour 3 minutes maximum et juste après laissé partir en pause, je me donnes donc le droit de vous fatiguer un tout petit peu plus: on vient d'écrire du texte simple avec HTML, mais comment changer la forme et la couleur de ce texte? Comment mettre des images? Peut-on superposer ou mettre cote à cote des choses?
En HTML, les mots servant de "commande" s'écrivent entre les caractères < et > (que l'on apelle "balises HTML"). Par exemple, si vous écrivez cette fois-ci <font color=#ff0000>ce texte va être rouge</font> et sauvegardez en tant que essai.html, vous aurez un message en rouge... Du genre ce texte va être rouge! La balise img sert à mettre des images et vous pouvez l'essayer en tapant cette fois ci <img src="image.jpg">, ou encore en tant que <img src="image.jpg" align="right"> pour l'aligner sur la droite comme dans la section Qui suis-je? de mon site. Ou encore, la balise a pour mettre des liens vers d'autres pages, par exemple <a href="essai2.htm">aller à la page essai2.html</a>. Vers la fin de ce texte je vous dirai comment avoir une liste de ces balises et comment le utiliser simplement.
Une balise intéressante du HTML est la balise de tableau: par exemple, taper le texte <table> <tr> <td>un</td> <td>deux</td> </tr><tr> <td>trois</td> <td>quatre</td> </tr> </table> va produire quelque chose comme:
Donc, la balise table crée le tableau, la balise tr définit une ligne du tableau et la balise td une colonne du tableau. Pour chaque case du tableau, on peut spécifier un arrière plan (bgcolor pour une seule couleur et background pour une image), le style de texte du contenu (style), la largeur des traits autour du tableau (border) ou encore des dimensions (width pour la longueur et height pour la hauteur) différentes. Vous pouvez donc en premier lieu utiliser les tableaux pour arranger les éléments de votre page...
HTML AVANCE
Je viens de vous énoncer une sous-balise style (on apelle ceci une propriété), que l'on peut utiliser avec des tableaux. En effet, on peut aussi utiliser cette propriété avec la balise div: cette balise définit une calque HTML. Un calque c'est comme une page HTML, sauf que les calques peuvent être superposés, avoir des positions, dimensions et même transparences différentes! Par exemple, mon site fonctionne en utilisant des calques: toutes les fenêtres de mon site sont des calques, et quand vous cliquez dessus ces calques montent au dessus ou descendent en dessous, bougent, changent de taille et même de transparence.
Il y a aussi des balises qui s'appliquent sur toute la page, par exemple le style de l'Interface FTP d'Ali a été défini une et une seule fois comme <style>BODY{background:#FEFEFE; font-family:tahoma,arial,helvetica;color:#000000; cursor:default}TD{font-size:13}H1{font-size:20}A{text-decoration:none; color:#2B5796}A:hover{color:#FF6262; text-decoration:underline}</style> en haut de page. On peut aussi mettre ces définitions dans un fichier CSS à part.
ECRIRE DU HTML CONFORTABLEMENT
Bien sûr, nous êtres humains ne voulons pas nous perdre dans le code mais plutôt avoir un logiciel visuel, dans lequel on manipule la page au lieu de manipuler le code... Ces logiciels sont appelés des éditeurs WYSIWYG (What You See Is What You Get - Ce Que Tu Vois Est Ce Que T'Obtiens) et existent en masse sur le marché: Microsoft en a (FrontPage et Visual Web Developper - les deux ayant des édition Express, donc gratuites), Mozilla en a, il y en a même qui sont en ligne (un logiciel en ligne, plutôt un site qui s'apelle wysiwygpro ... oui, un site web qui fait des sites web!). Ces éditeurs vont vous produire du code qui a exactement la même apparence que vous vouliez, par contre le code HTML généré sera un peu plus gros que du code fait à la main (donc occupera plus de place sur votre disque dur ou serveur web). Par contre, je vous recommande vivement d'y jeter en oeil car ils vous seront très utiles pour prendre connaissance des divers balises HTML ainsi que les propriétés possibles.
CONTINUATION
Dans le prochain texte, vous verrez un des composants les plus importants de HTML, le JavaScript suivi d'un texte sur les possibilités que l'on a avec DHTML. Entretemps, je vous laisse donc faire des exercices pour bien comprendre ce que je viens d'expliquer :)