HTML : Partie 1

Le HTML est le langage utilisé pour créer des pages web, pour la diffusion sur Internet. C'est un langage très simple mais qui ne permet hélas pas de faire de choses compliquées. On peut seulement mettre du texte, des images mais pas grand chose de plus. Un nouveau format a donc été créé, le DHTML, ou Dynamic HTML. Ce language n'est "compris" qu'à partir des Navigateurs Web de 4ème génération.

Sur cette page, je vais tenter de vous expliquer les bases du HTML, pour que vous puissiez faire vos pages web avec un bloc-note, sans le besoin d'avoir recours à Microsoft FrontPage, Netscape Composer, ou WebExpert (qui est sans aucun doute le meilleur éditeur HTML, car il comporte une fonction bien utile, la verification des liens et de syntaxe). Si vous désirez une liste complète de toutes les balises HTML avec une description détaillée de chaque, cliquez ici BALISES HTML

Le langage HTML utilise des mots clés écrits entre des "<" et des ">", qui permettent d'afficher une page web. Ce sont les BALISES HTML. Chaque balise est composée de 2 parties : un début et une fin. Le début est signalé par <MOT_CLE NOM_DE_L'ARGUMENT="parametre"> et la fin par </MOT_CLE>, pour indiquer que la balise prend fin ici.

Le HTML est un langage souple, du fait que les balises (SEULEMENT LES BALISES) peuvent être écrites indifféremment en minuscules ou majuscules, mais pour la compréhesion de votre code HTML, il vaut mieux les écrire en majuscules. Par contre, les noms des images ou des pages doivent avoir la syntaxe exacte, en respectant les majuscules et les minuscules. De plus, les "retours à la ligne", les "sauts de ligne" peuvent être mis pour une meilleure compréhension de sa page lors de la conception mais ils n'ont aucune influence sur le rendu de la page dans un navigateur. Une page HTML peut être écrite sur UNE SEULE LIGNE ! De plus, le fait de rajouter un espace ici ou là ne change pas la façon dont votre page sera affichée, sauf bien sûr si vous rajoutez un espace entre 2 mots AFFICHES. Ecrire "<BALISE >" ou <BALISE >" ne changera rien à la compréhension de la page par le Navigateur.

2. STRUCTURE D'UNE PAGE HTML

Voici un exemple d'une page toute simple : num1

Et voici le script de cette page (pour le voir, il suffit d'ouvrir la page avec un bloc-note ou faire "voir source" dans Netscape ou IE)

Explications :

Pour indiquer au navigateur que le language est du HTML, il faut mettre <HTML> au début et </HTML> à la fin.

Ensuite, il s'agit de définir l'entête de la page, qui contient ici le titre. On utilise pour cela <HEAD> et </HEAD>. Le titre de la page, celui qui apparait dans la barre de titre du Navigateur, est quand à lui dénini entre les balises <TITLE> et </TITLE>. Le Titre peut être n'importe quel texte, mais il faut bien faire attention aux caractères spéciaux.

Vient ensuite le corps de la page proprement dit, là où se situent le texte et les images. Il est appelé par la balise <BODY> et se termine avec la balise </BODY>. La balise body peut contenir plusieurs arguments, qui vont définir l'interface générale de la page, comme par exemple la couleur de fond, les marges, etc... Pour modifier les marges verticales, c'est à dire la distance entre le bord supérieur de la page et le début du texte, on utilise l'argument marginheight="nombre", avec nombre un nombre de pixels. Pour les marges horizontales, donc l'espacement entre le bord gauche de la page et le texte, on utilise l'argument marginwidth="nombre".

Le texte est placé entre 2 balise <FONT> et </FONT>, qui définissent un type, une couleur de police (ici, la police est la police par défaut).

3. FOND D'UNE PAGE HTML

Une page colorée : num2 et une page "imagée" : num3

Sur une page html, une couleur en fond, voir une images, permet de rendre cette page plus joyeuse, beaucoup moins triste que si elle reste complètement blanche. Pour remédier à cela, il est possible transmettre des arguments dans la blasie <BODY> qui donnera ainsi un joli fond à vos pages !!!

Pour mettre une couleur en fond, il faut insérer l'argument BGCOLOR dans la balise <BODY>La balise de début <BODY> devient donc :

<BODY BGCOLOR="#couleur"> au lieu de <BODY>.

couleur : est la couleur désirée pour le fond de la page. Elle ne doit pas être trop agressive ni trop lumineuse pour garder une page claire, et lisible. Elle est définie par un code héxadécimal de 6 caractères, débutant par un dièse #. Pour connaitre ces codes, il suffit d'avoir un logiciel de dessin comme Paint Shop Pro. Voici un autre programme qui permet de connaitre plusieurs choses sur une couleur, comme le code RGB et Héxadécimal : rgbcolor.zip (Il faut les fichiers systemes : System.zip 1023 Ko)

Codes des couleurs les plus utilisées :

NOM COULEUR	CODE RGB (Red, Green, Blue)	CODE HEXADECIMAL
Rouge	Rouge : 255 Vert : 0 Bleu : 0	#FF0000
Vert	Rouge : 0 Vert : 255 Bleu : 0	#00FF00
Bleu	Rouge : 0 Vert : 0 Bleu : 255	#0000FF
Noir	Rouge : 0 Vert : 0 Bleu : 0	#000000
Blanc	Rouge : 255 Vert : 255 Bleu : 255	#FFFFFF
Jaune	Rouge : 255 Vert : 255 Bleu : 0	#FFFF00
Cyan	Rouge : 0 Vert : 255 Bleu : 255	#00FFFF
Magenta	Rouge : 255 Vert : 0 Bleu : 255	#FF00FF
Marron	Rouge : 128 Vert : 0 Bleu : 0	#800000
Orange	Rouge : 255 Vert : 128 Bleu : 64	#4080FF
Violet	Rouge : 128 Vert : 0 Bleu : 255	#FF0080
Gris	Rouge : 192 Vert : 192 Bleu : 192	#C0C0C0
Attention : Les codes héxadécimaux contiennent des "0" (zéro) mais pas de "O" (eau)

Script de num2, mettre une couleur en fond de page :

Pour mettre une image en fond de page, il faut insérer l'argument BACKGROUND dans la balise <BODY>La balise de début <BODY> devient donc :

<BODY BACKGROUND="image"> au lieu de <BODY>.

image : est l'image désirée en fond de page. Cette image peut être n'importe quelle image gif ou jpeg. Cette image sera répétée plusieurs fois sur la totalité de la page. Il n'est pas conseillé de mettre une image trop complexe pour garder une page lisible ni une image trop importante en taille sous peine d'avoir une page très longue à charger.

Script de num3, mettre une image en fond de page :

Il est aussi possible de mettre les 2 styles, COULEUR et IMAGE, ce qui aura pour but de conserver l'allure, les couleurs, générale de la page, même lors du chargement de l'image du fond. En effet, si votre image de fond est longue à charger, la page n'aura pas de couleur au fond (blanche par défaut), et donc, le texte sera peut être dûr à lire, en attendant la fin du chargement de l'image du fond. Il faut donc mettre une couleur au fond qui reprenne la couleur générale de l'image de fond.