Les bases du langage HTML !
HTML ?? késako ?
HTML, cela veut dire HyperText Mark-up Language c'est à dire, Langage de "définition" HyperTexte... ou plus simplement, c'est le langage utilisé pour programmer des sites Web... On parle de "langage" et de "programmation" car le HTML, tout comme le "Turbo Pascal" ou le "C / C++", c'est un ensemble de mots-clés, les balises (encore appellées "Tags", ou "HTML Tags" en anglais), qui permettent, par leur organisation dans un simple fichier texte, de créer une page comme celle que vous êtes en-train de lire en ce moment...
Seulement, qui parle de "programmation" dit également qu'il faut respecter à la lettre la syntaxe (l'orthographe) des balises... En d'autres termes, si une balise est mal écrite, c'est comme si elle n'existait pas, si une balise manque, l'effet sur la page peut être désastreux...
Mais le grand avantage de ce langage, est qu'il est utilisable immédiatement. Il n'y a pas besoin de le "compiler" comme les autres autres langages. Ce que vous tapez, vous pouvez le visionner immédiatement dans votre navigateur Internet, après une simple sauvegarde de votre fichier.
Comment je fais ???
Une balise, c'est un "mot" qui commence par le symbole < , qui continue par quelquechose, et qui finis par le symbole >... Et cela nous donnerait : <quelquechose>. Ce sont grâce à ces balises que l'on crée la page que verra le visiteur  ...
Votre page Web commence par la balise <html> ! Eh oui, on indique par là au navigateur * qu'il à affaire à une page HTML... On pourrait s'en passer (du moins, avec Internet Explorer 5), mais il est toujours plus prudent de l'indiquer, par souci de compatibilité...
* pour ceux qui ne le savent pas encore, le navigateur est le logiciel que vous utilisez pour "surfer" sur internet
Ensuite, il convient d'indiquer l'en-tête du document (qui contient le titre et d'autres choses...) grâce à la balise <head>. Le titre de la page, c'est à dire, ce qui sera affiché dans la "barre de titre" de la fenêtre du navigateur, à côté du nom de celui-ci, est donné par la balise <title>.
Il ne faut surtout pas oublier de "terminer" une instruction. A la balise <title> par exemple, s'ajoute la balise contraire </title>, après le texte du titre, qui permets d'indiquer au navigateur que le titre de la page se termine à cet emplacement...
Exemple de début d'une page...
<html>
<head>
<title>Mon titre !</title>
</head>
Et enfin, vient le corps du document, signalé par la balise <body> Ce n'est pas une balise comme les précédentes, car elle accepte des paramètres. On peut définir la couleur de fond, bgcolor=, l'image servant d'arrière-plan, background=, la couleur du texte, et des liens non visités, visités, et actifs (lorsque la souris passe au-dessus), text=, link=, vlink=, alink=.
Ces paramètres se "passent" comme suit :
<body background="image" bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">
image représente n'importe quel fichier graphique, ayant pour format ou extension : .jpg ou .gif, et se trouvant n'importe où sur internet... Il faut la déclarer comme cela : http://site.ou.se.trouve.l'image/répertoire-éventuel/image.jpg
Si cette image se trouve dans le même répertoire que la page html, alors on peut la déclarer ainsi : image.jpg tout simplement !
#xxxxxx représente la couleur, dans le format RRVVBB héxadécimal... L'héxadécimal permets de compter sur une Base 16 (chiffres de 0 à F), alors que nous comptons habituellement sur une Base 10 (chiffres de 0 à 9)... Le petit schéma ci-dessous vous montre la correspondance entre les chiffres :
Base 10 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
Base 16 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Nous codons alors la couleur sur trois groupes de deux chiffres, qui vont de 00 (0, le minimum) à FF (255, le maximum). L'ordre dans lequel se présentent ces chiffres est toujours : valeur de rouge, valeur de vert, valeur de bleu. Chaque couleur comporte donc 255 nuances ! On pourrait écrire, par exemple, text="#xxxxxx" pour la couleur que vous voulez, ou bien text="#000000" pour du noir, ou encore text="#FFFFFF" pour du blanc...
Dès que l'on parle de couleur, il faut utiliser ce format... Au début, cela peut paraître compliqué, mais à force d'essayer et d'expérimenter, on s'y habitue ! La calculatrice livrée avec votre système d'exploitation vous permettra de réaliser des converstions de format assez facilement... sinon, la page Conversion et Choix de couleur que j'ai créée pour vous peut vous aider... !
Ce qui donne vie à Internet...
...ce sont les "liens" hypertextes ! Vous savez, ces mots colorés ou soulignés, qui changent d'aspect quand la souris passe au-dessus... et même le pointeur de la souris se transforme en les survolant !
Quand vous cliquez dessus, vous voila transportés ailleurs, instantanément, comme par magie...
Eh bien, ces liens, encore appellés URL, que vous le croyez ou non, s'ajoutent très facilement dans une page... C'est la balise <a> qui s'en occuppe. Elle signifie anchor ou ancre... Elle est suivie par le paramètre href= qui indique que l'ancre pointe vers une autre destination (Hypertext REFerence) Voyez par vous-même :
<a href="url.de.ma.page/web">le nom que je veux donner au lien</a>
Pour les adresses e-mail, c'est pareil, mais avec l'indication mailto:
<a href="mailto:adresse.e-mail@domaine.ext">le texte que vous voulez</a>
Et le meilleur, c'est de créer un lien en remplaçant le texte par une image... C'est alors en cliquant sur cette image que vous serez propulsé ailleurs !
<a href="url.de.ma.page/web"><img src="ma-super-image.ext"></a>
Les images... justement !
Vous avez certainement envie, également, d'ajouter une image... Non pas en guise de fond, mais bien en guise d'illustration ! La balise <img> à été faite pour vous !
L'insertion d'une image simple se fait de la manière suivante :
<img src="ma-super-image.ext">
Le ".ext" représente le format du fichier... Il doit être ".jpg" ou ".gif" pour être reconnu par les navigateurs Internet...
Outre le paramètre src= qui indique la source de l'image, c'est à dire, son emplacement quelque-part sur Internet, il y a des paramètres facilitant l'affichage.
width="xxx" et height="yyy" désignent la taille de l'image. Ceci accélère sensiblement l'affichage de cette image, car le navigateur n'a pas besoin de chercher cette information dans le fichier. Les "xxx" et "yyy" représentent respectivement la largeur et la hauteur de l'image, en pixels. Un pixel représente un point affichable à l'écran.
alt="description..." est un paramètre utile aux personnes ne pouvant pas voir les images... ou lorsqu'on passe le pointeur de la souris sur l'image... C'est une description de l'image, ou un court texte explicatif... a vous de voir !
Ces paramètres ne sont pas obligatoires, ils dépendent de votre Bon-Vouloir... !
|
|
