de la ville de Llivia.
"Contrairement à ce que son nom semble indiquer, le langage "acHeTez-Me Le" est quelque chose de gratuit."
Le HTML est le langage qui permet d'écrire des pages Web. Je vais vous indiquer comment en écrire une, vous apprendre les bases de ce langage, et vous verrez que c'est facile; il suffit de se jeter à l'eau.
Ce langage permet donc d'intermixer du texte, des images et éventuellement des sons, et mettre ces pages à disposition de toute la planète. Pour cela, il vous suffit d'un bon vieil éditeur texte, par exemple Notepad (Bloc-Notes), Textedit.... Convenez aussi d'un emplacement sur votre disque dur où vous allez mettre les fichiers que vous allez créer. Ce sont des fichiers texte, avec l'extension ".htm". Conventionnellement, je mets tous les fichiers de mon site dans un même répertoire (et uniquement eux), les images dans un sous-dossier "images" et les sons dans un sous-dossier "sons".
Sous Windows, c'est l'extension du fichier (.htm ou .html) qui dit que son type est HTML, et que lorsqu'on clique dessus, c'est votre navigateur favori (Internet Explorer, Firefox, ...) qui s'ouvre. Dans la barre d'adresse (en haut, là où on met l'URL du site désiré, par exemple http://www.ign.fr), vous pouvez aussi directement taper le nom du fichier avec l'accès disque (ex: c:\site Web\essai.htm). Lorsque vous sauvegardez votre fichier sous Bloc-notes, ne prenez pas l'option "Documents texte" (sinon il vous rajouterait .txt au bout), prenez l'option "Tous (*.*)", et nommez-le par exemple essai.htm.
Réciproquement, toujours sous Windows, pour éditer ou visualiser le source d'une page HTML sous Internet Explorer, cliquer dans la barre d'outils à droite de l'icône "Edition": "Modifier avec Bloc-notes". On peut aussi cliquer sur le contenu de la page avec le bouton droit de la souris, et choisir "Afficher la source".
Le HTML est donc du texte normal, dans lequel vous glissez des ordres (appelés balises) qui apparaissent entre < et >. Une portion de texte concernée par une commande "X" serait donc entourée des balises <X> et </X>.
Par exemple, pour mettre une portion de texte en gras, écrivez:
Ceci est du <B>texte en gras</B>.
Il apparaîtra ainsi:
Ceci est du texte en gras.
Remarque: ces ordres peuvent être en majuscules ou en minuscules.
De même, il y a <I> et </I> pour mettre en italique, ou <B><I>texte gras et italique</I></B> pour gras et italique. On peut donc bien sûr imbriquer des commandes.
Tout le texte que vous tapez sous éditeur dans votre fichier apparaîtra tel quel, à part qu'il n'y aura pas de saut de ligne. Tout le texte apparaîtra donc en un seul paragraphe. Pour délimiter des paragraphes, encadrez-les par <P> et </P>. Vous pouvez forcer un saut de ligne dans un même paragraphe avec <BR>.
Les commandes acceptent parfois des attributs, ou des modificateurs de commande. Par exemple, pour écrire un paragraphe cadré à droite, on écrit:
<P align="right">Ceci est un paragraphe aligné à droite.</P>
Ici, la commande <P> a un attribut ALIGN qui prend la valeur "right". Genéralement, on encadre les valeurs avec des guillemets (même les valeurs numériques), mais on ne doit mettre vraiment ceux-ci que si la valeur comporte des blancs. On peut écrire tout ça en majuscules ou minuscules, ça n'a pas d'importance (sauf pour certaines valeurs comme les noms de fichiers).
Vous pouvez sauter des lignes, mettre 10 blancs à la suite, si vous n'insérez aucune balise, votre texte apparaîtra tout collé à la queue-leu-leu, les mots ne seront séparés que par 1 blanc (faites l'essai). Retenez donc que la commande <P> sert donc à faire des paragraphes, et que d'autre part, vous pouvez espacer le code HTML comme vous voulez dans votre source.
Et les images ? Elles doivent avoir le format GIF ou JPEG. Elles sont insérées grâce à la balise <IMG SRC="toto.jpg">. Si l'image toto.jpg est dans un sous-répertoire (par exemple "images"), on écrira: <IMG SRC="images/toto.jpg">.
Par exemple:
| Voici le blason <IMG src="images/llivia.jpg"> de la ville de Llivia. |
Voici le blason de la ville de Llivia.
|
Pour mélanger plus esthétiquement les images et le texte, on utilise l'attribut ALIGN dans la commande <IMG> pour que l'image soit cadrée de tel côté de la page, et que le texte s'enroule autour. De plus, pour que le texte ne soit pas collé à l'image, on entoure celle-ci d'une marge horizontale (en pixels) grâce à l'attribut HSPACE. Exemple (ici avec un paragraphe justifié, c'est-à-dire aligné à la fois à gauche et à droite):
|
<P align="justify"> <IMG src="images/hagia2.jpg" width=149 height=137 align="right" hspace=20 alt="Ste-Sophie"> La cathédrale Sainte-Sophie fut construite par l'empereur romain d'orient Justinien en 532, afin de calmer les esprits suite à la sédition Nikka. La cathédrale, achevée en 537, est judicieusement située à côté de l'hippodrome, d'où a démarré cette guerre civile. Justinien a aussi fait de grands travaux législatifs: le code justinien (à partir des lois écrites par Théodose), que de nombreux pays reprendront, dont la France.</P> |
|
Pour interrompre un texte qui s'enroule autour d'une image pour qu'il reprenne après (c'est-à-dire à l'endroit où les 2 marges latérales soient libres), on utilise la commande <BR CLEAR="all">.
Dans le cas ci-dessus, si l'image était plus haute que le paragraphe, et si on voulait recommencer un autre paragraphe qui reprenne en-dessous de tout ça, il faudrait faire avant le deuxième paragraphe: <BR CLEAR="right"> ou "all".
Une image avec l'attribut ALIGN s'appelle une image flottante, et va donc souvent de pair avec un CLEAR. Mais pour mélanger les images et le texte, on préfère cependant utiliser les tableaux (voir plus loin). En effet, il n'est pas très esthétique que l'image ne soit pas alignée à droite, car le HSPACE joue hélas sur les 2 marges de l'image.
Et maintenant abordons les liens. Il peut s'agir d'un lien vers une autre de vos pages HTML, ou une page d'un site HTML, ou une adresse email, une image, etc... Pour cela, on encadre le texte qui apparaîtra bleu (ou violet) et souligné par les balises <A HREF="..."> et </A>. Exemples:
Lien vers la <A HREF="cerdagne.htm">Cerdagne</A> (lien vers un autre fichier, ici "cerdagne.htm")
Cela donne:
Lien vers la Cerdagne
Autres exemples:
Site de l'<A HREF="http://www.ign.fr">IGN</A> (lien vers un autre site)
Cliquez <A HREF="mailto:luc.martin@free.fr">ici</A> pour m'écrire. (lien vers une adresse email)
Voici une <A HREF="fleur.jpg">petite image</A> (lien vers une image)
<A HREF="html.zip">Fichier</A> à télédécharger (autre fichier de votre site)
<A HREF="ftp://www.truc.fr/html.exe">Fichier</A> à télédécharger (lien vers un serveur FTP)
La balise <A> s'appelle une ancre. On peut nommer des paragraphes dans une même page. Par exemple:
<A NAME="repere"></A>Un certain endroit dans ma page.
Et on peut mettre un lien vers cet endroit ainsi:
Cliquer <A HREF="#repere">ici</A> pour aller là-bas (dans la même page)
Cliquer <A HREF="toto.htm#repere">ici</A> pour aller là-bas (si le marqueur "repere" est dans une page différente: toto.htm)
Autre exemple: j'avais mis un repère "top" en haut de cette page de la façon suivante, dans le titre:
<A name="top"></A>
Maintenant j'écris ici:
<a href="#top">retour en haut</a> ce qui donne:
retour en haut (allez-y! cliquez!)
Une image peut-être aussi un lien. Par exemple ici, le fait de cliquer sur l'image amène à une autre page:
<A HREF="constant.htm"><IMG SRC="images/hagia2.jpg" BORDER="0"></A>
(l'attribut BORDER=0 permet de ne pas mettre de cadre autour de l'image, comme elle est un lien, selon votre goût...)
Ce qui donne:
Pour mettre un titre, on emploie les balises H1, H2, etc... H6 (de plus en plus petit). Par exemple:
<H3>Titre de mon paragraphe</H3>
apparaîtra:
Mais que fait la police ? Pour changer de police, de taille de caractère, de couleur de texte, on emploie la commande <FONT>. Par exemple:
<FONT size="-1" color="red" face="Comic Sans MS, Verdana">
Tout ce qui est compris entre ces 2 balises apparaîtra en petits caractères, rouges, en police Comic Sans MS (ou Verdana si non disponible, ou défaut).
</FONT>
Autre exemple:
| <FONT face="cursive">écriture en cursive</FONT> | écriture en cursive |
On écrit dans l'attribut FACE le nom de la police, ou un nom générique de police, ou plusieurs noms séparés par des virgules (s'il le trouve pas, il cherche le suivant). N'oubliez pas d'encadrer par des guillemets dès qu'il y a un blanc. Les noms de police varient souvent selon l'ordinateur, d'où quelques surprises, mais certains noms reviennent souvent. Voici par exemple les noms de police sur mon ordinateur (Win98). Bref, mieux vaut ne pas trop faire joujou avec ça, ou au moins prévoir plusieurs polices.
Autre exemple, où l'on fait varier la couleur:| Je suis un <font color=red>poisson rouge</font>, une <font color=green>souris verte</font>, <font color=#FFBB00>orange</font>, <font color=olive>olive</font>... | Je suis un poisson rouge, une souris verte, orange, olive... |
Les couleurs ? Soit on nomme une couleur par son nom (anglais) (ex: red, brown, yellow, black, cyan, ...), soit on donne ses composantes rouge-vert-bleu en hexadécimal. Par exemple #FF0000 signifie rouge vif.
Mais tirons un trait sous tout ça, grâce à la commande <HR>.
Jusqu'à présent, vous pouvez vous débrouiller à écrire de longues pages HTML. Pour améliorer l'effet esthétique, on emploie des tableaux. En effet, si on insère une image n'importe où, le texte s'enroule autour, alors qu'on aimerait bien gérer la position de l'image par rapport au texte, avec une certaine marge seulement entre le texte et l'image, que le paragraphe suivant commence bien après, etc... Dans ce cas, le mieux est de faire un tableau (invisible), par exemple de 1 ligne et 2 colonnes, mettre l'image dans la colonne de gauche et le texte du paragraphe relatif à l'image dans la colonne de droite.
Par exemple:
<TABLE> (début du tableau)
<TD> (début de la 1ère colonne)
<IMG SRC="cathedr.jpg" etc...> (notre image)
</TD> (fin de la 1ère colonne)
<TD> (début de la 2ème colonne)
<P>La cathédrale fut construite...</P> (texte)
</TD> (fin de la 2ème colonne)
</TABLE> (fin du tableau)
|
|
La cathédrale Sainte-Sophie fut construite par l'empereur romain d'orient Justinien en 532, afin de calmer les esprits suite à la sédition Nikka. La cathédrale, achevée en 537, est judicieusement située à côté de l'hippodrome, d'où a démarré cette guerre civile. Justinien a aussi fait de grands travaux législatifs: le code justinien (à partir des lois écrites par Théodose), que de nombreux pays reprendront, dont la France. |
Le fait d'indenter les balises imbriquées (par exemple comme ci-dessus avec 2 espaces) permet seulement de s'y retrouver (en fait, les espaces et sauts de lignes dans votre texte ne comptent que comme 1 seul espace). En effet, on peut imbriquer plusieurs commandes ainsi, et d'autres sous-tableaux.
J'oubliais... Les lignes d'un tableau se font avec <TR>. On peut aussi faire en sorte qu'une colonne embrasse plusieurs colonnes de la ligne du dessous avec l'attribut COLSPAN de la commande <TD>, ou décomposer une colonne en plusieurs lignes avec ROWSPAN dans la commande <TD> (et non pas dans <TR> !!!). On peut imbriquer des commandes <TD> dans des commandes <TR> mais pas l'inverse (en fait, TD signifie "cellule"). Exemple ci-après ou autres exemples.
Enfin, pour contrôler plus l'esthétique, par exemple l'espace qu'il y a entre l'image et le texte, il faut dimensionner les tableaux.
Le plus souvent, les tableaux sont utilisés avec des bordures invisibles, mais on peut spécifier une bordure avec l'attribut BORDER, et même un titre avec la commande <CAPTION>. Exemple:
|
<table border=5> <caption valign=bottom>Tableau 1.1</caption> <tr> <!-- cette cellule englobera 2 colonnes --> <td colspan=2 align=center>Bilan</td> </tr> <tr> <td>Recettes</td> <td>Dépenses</td> </tr> <tr> <td>12</td> <td>23</td> </tr> </table> |
|
|
<table bgcolor="yellow" cellspacing=10 cellpadding=5 border=10> <tr bgcolor=orange> <th>Nom</th> <th>Prénom</th> <th bgcolor=red>Solde</th> </tr> <tr> <td>Martin</td> <td>Emile</td> <td align=right>50</td> </tr> <tr> <td>Wilson</td> <td>Arnaud</td> <td align=right>1300</td> </tr> </table> |
|
L'attribut CELLSPACING est l'espacement entre les cellules (encadrées), et CELLPADDING est l'espacement autour du texte à l'intérieur d'une cellule.
Voici aussi cet autre exemple. Il y a là 2 tableaux imbriqués, et l'on voit successivement la bordure de 8 pixels du premier tableau, un espacement de 10 pixels (autour des cellules du tableau), le titre (aligné en bas), et l'unique cellule du tableau qui consiste en un 2ème tableau, avec une bordure de 20 pixels, un espacement de 0 pixel autour des cellules, et comme unique cellule une image.
<table border=8 cellspacing=10>
<caption align=bottom>
François 1<sup>er</sup>
</caption>
<td>
<table border=20>
<td>
<img src="images/francoi1.jpg" alt="François Ier">
</td>
</table>
</td>
</table>
|
|
Votre page HTML (fichier texte) doit se composer, bien que ce ne soit pas obligatoire, d'une en-tête (HEAD) et d'un corps (BODY). Le corps est ce qu'on a vu plus haut; c'est le contenu de votre page. Dans l'en-tête, on spécifie la couleur ou l'image de fond, le titre de la page, la musique de fond, les styles, etc...
Voici un exemple (presque) complet d'un fichier HTML:
Commencez déjà par construire votre site tranquillement, sur votre disque dur. Votre fichier principal, ou page d'accueil, (par exemple le menu principal) doit s'appeler "index.htm". Groupez tous les fichiers utiles (et uniquement eux) dans un ou plusieurs répertoires. Par exemple je mets tous les fichiers HTML dans le répertoire c:\site_web, les images dans c:\site_web\images et les sons dans c:\site_web\sons. Les liens auront l'allure suivante: "toto.htm" pour un fichier HTML, "images/toto.jpg" pour une image et "sons/toto.wav" pour un fichier son.
Ensuite, vous devez avoir un espace où stocker votre site chez votre fournisseur d'accès par exemple. Il vous donnera l'emplacement et le mot de passe pour y transférer tous vos fichiers avec FTP, et l'adresse que le lecteur devra taper.
Pour transférer mes fichiers sur le site hébergeur avec FTP, j'utilise CuteFTP (shareware). Comme d'autres utilitaires, il facilite le transfert de fichiers: on déplace des fichiers en les sélectionnant avec la souris, de la moitié gauche de l'écran (local) à la moitié droite (hôte).
Attention, certains sites Web exigent que vos noms de fichiers soient en minuscules, et ne dépassent pas 8 caractères (+ 3 pour l'extension). Par exemple: "fond_marbre.jpg" ne passerait pas, ni "index.html". Organisez donc votre site sur votre disque dur en y pensant dès maintenant.
Après, il vous faudra faire connaître votre site à des moteurs de recherche, sinon seuls les lecteurs qui connaîtront l'adresse du site sauront qu'il existe. Cela se fait souvent depuis la page d'accueil du moteur de recherche (par exemple Google, Voilà, Altavista, Nomade, Yahoo!, etc...
Sachez que pour Voilà, lorsque vous soumettez votre URL, c'est-à-dire une des pages principales de votre site, celle-ci doit faire au moins 50 mots (sinon le site entier ne sera pas indexé du tout). Pour Google, votre site doit être référencé dans au moins un autre site (lui-même déjà référencé)... Le délai d'indexation (temps entre la soumission et le référencement effectif dans la base de données du moteur) peut être assez long (15 jours à 2 mois).
Pour voir si votre site a été (enfin) indexé, choisissez 2 mots rares dans une de vos pages (par exemple aubépine et gigot), et lancer le moteur de recherche. Pour les moteurs Google, AltaVista, Nomade et Yahoo, il faut taper aubépine gigot. Pour Voilà, il faut taper +aubépine +gigot. Cela affichera toutes les URL des pages qui contiennent à la fois aubépine ET gigot. Pour chercher des mots groupés, entourez de guillemets; exemple: "voie romaine".
Où trouver des sons et des images ? Vous pouvez scanner n'importe quoi si vous avez un scanneur (attention si vous scannez une crêpe à la confiture); ou prenez des photos numériques (si vous avez la chance d'avoir un appareil photo numérique). On peut aussi se servir sur le Web, et pomper les images d'autres sites. En effet, lorsqu'on charge une page d'un site, toutes les images sont temporairement copiées dans le cache de votre micro (répertoire de stockage de fichiers temporaires, par exemple d'Internet Explorer). Il suffit d'aller les y prendre (avec l'explorateur) et les copier dans un répertoire où elles ne risquent rien. Ou bien cliquer dessus avec la touche droite de la souris, et les sauver.
Le point le plus crucial dans un site Web est la taille des fichiers images et sons. Ceux-ci doivent être le plus petit possible (quelques Ko), afin de rendre l'affichage rapide. Pour cela il vous faudra sans doute réduire ces images (ou ces sons) avec des logiciels adéquats (taille et résolution), de manière optimale (par exemple 90 dpi, et quelques cm de côté). Pour les fichiers sons, sachez qu'on ne les emploie guère, mais qu'un fichier au format .mid est beaucoup moins volumineux qu'un fichier au format .wav. Pour une image de fond, on peut employer une image minuscule qui servira de motif et sera répétée sur toute la fenêtre.
Pour les images vous devez avoir au moins un logiciel de retouche, de redimensionnement et de réchantillonage d'images, par exemple: Paint, PhotoEditor, Photoshop, Paintshop Pro, ou les excellents freewares Irfanview pour Windows ou GraphicsConverter pour Mac (shareware)... Pour une portion de texte très artistique, ou une barre d'outils, il est préférable de se créer ses propres images (plutôt que de chercher à l'écrire en HTML).
Pour les sons, vous devez les réchantillonner "à la baisse", par exemple avec Windows Magnétophone: format PCM, 8000 à 12000 Hz (qualité radio ou téléphone), 8 bits, mono, et une durée très limitée, car ils donnent des fichiers volumineux. Les fichiers ont souvent l'extension .WAV (fouillez sur votre ordinateur). Vous avez dans les accessoires de base de quoi manipuler ces .WAV (Lecteur et Magnétophone). Les sons au format MP3 ne sont (souvent) pas reconnus directement et doivent être transformés au format WAV.
Vous avez aussi la possibilité d'employer des sons "artificiels" au format MIDI, c'est-à-dire synthétisés (décomposés en instruments que la carte son reconnaît directement). Ils sont beaucoup plus petits en taille. Exemples avec tous les morceaux de Led Zeppelin, ou autres morceaux préférés. Chaque morceau complet fait moins de 100ko, alors qu'il aurait plusieurs Mo au format audio (WAV ou MP3).
Les animations: certains sites utilisent aussi des animations (images et/ou son). L'animation la plus simple est de faire une image GIF. Les animations normales utilisent ShockWave ou Flash de Macromedia. Ce sont des fichiers .SWF. Un plug-in est souvent installé sur votre navigateur pour pouvoir les lire. Je n'en utilise pas dans mon site... On peut faire aussi des animations en utilisant plusieurs images et le langage Javascript. Voir aussi mes essais.
Pour ceux qui appréhendent vraiment d'écrire du code HTML sous éditeur, vous pouvez vous servir d'utilitaires du style FrontPage, Word, PageMill, DreamWeaver, GoLive, etc... qui facilitent la rédaction de pages HTML. Toutefois, ces utilitaires introduisent souvent des commandes inutiles qui gonflent inutilement la taille de votre fichier HTML (vérifier sous éditeur).
Si vous aimez un éditeur texte, faites comme moi: j'ai écrit tout mon site Web avec Notepad, et rapidement. Faites des pages, pas trop grosses, mettez beaucoup d'images (petites pour rapidité de chargement), faites des liens, et surtout utilisez beaucoup les tableaux: ils sont utiles pour aligner le texte et les images. N'oubliez pas de vous relire attentivement pour corriger les fautes.
Attention, il existe quelques incompatibilités de langage HTML (très rares) entre Internet Explorer et Firefox. Pour les détecter, faire systématiquement tourner vos pages sur ces deux visualisateurs. Si vous essayez le langage JavaScript, les différences sont encore plus nombreuses. Limitez-vous à HTML 3.2 ou 4.0: ça marche partout. Et la seule limite est votre imagination.
Gardez à l'esprit que tout le monde n'est pas sur ADSL. Les communications modem sont plus lentes, et exigent des images de taille réduite. Un site au chargement rapide sera bien plus attractif qu'un site trop gourmand ou sophistiqué.
Essayez de faire des pages Web plus belles que les miennes. Ce n'est pas difficile car je suis vraiment nul côté esthétique. Moi je suis là pour vous enseigner, pas pour faire des fioritures ou de l'art 
. Vous avez les outils, allez-y.
Vous pouvez télédécharger depuis mon site l'aide HTML pour Windows, ou allez sur le site officiel qui vous aidera sur ce langage:
www.w3c.org.
Autres sites:
HtmlHelp.com
Utilities and tools
Voici un bon bouquin (de poche):
Formation à... HTML 4.0 (Bruce Moris, Microsoft Press, 69F soit 10,50€)
Sachez que la version actuelle de HTML est 4.01, et que ce langage peut devenir très compliqué (pour pas grand-chose en plus). On peut y introduire des feuilles de style CSS (ça regroupe la mise en forme), ou des ordres JavaScript (autre langage permettant de faire des présentations dynamiques, ou des formulaires, etc... dans une page Web).
Mise à jour:
Retour