par Cthulhu
Amis non HTMListes, BONJOUR! Si vous lisez le présent article pour la première fois,
c'est que vous ne connaissez rien en HTML, ou quasiment rien.
Alors, on va commencer par le début (car la fin justifie le début, c'est bien
connu!).HTML, ça veut dire "Hyper Text Markup Language". En gros, c'est le
langage de programmation qui permet de faire des pages web AVEC DES LIENS HYPERTEXTE!!!
Youpi me direz-vous! Et à cela je répondrai OUI! Car le HTML, c'est facile à apprendre!
Le premier cours sera consacré à apprendre à créer l'en-tête de votre page et à
apprendre quelques tags simples...
Avec quoi faire la page?
Avec un editeur txt, le même que vous utilisez en ce moment pour lire ce document, par
exemple, vous devrez remplacer ensuite le petit ".txt" se trouvant à la fin,
par un ".htm" bien senti.
I - LES TAGS
Votre "Browser" Internet (par exemple, Mosaïc, Opera, Netscape Navigator,
Internet Explorer) va lire vos fichiers comme vous êtes entrain de lire ce texte et
aficher ce qu'il y lit. Les tags vont lui donner des directives pour cet affichage, par
exemple, lui dire de mettre telle partie de la page en gras, on ne les verra jamais à
l'écran, sauf quand on s'est planté.
Ils sont entre < et >, et marchent, la plupart du temps, par paire. L'un sera
"ouvrant" et l'autre "fermant". L'"ouvrant" ressemble à
<XXX> par exemple et le fermant correspondant à </XXX>, où XXX est le nom du
tag. Tou ce qui se trouvera entre ces deux tags sera affecté par eux.
Exemple:
On veut écrire quelque chose, avec une taille de caractères assez importante. Le tag à
utiliser est <H1> ou <h1>, ce qui revient au même lorsqu'on verra la page.
On procèdera comme suit:
<H1>Quelque chose</H1>
ou
<H1>
Quelque chose
</H1>
Tout ça revient au même.Un conseil : PENSEZ TOUJOURS A FERMER VOS
TAGS!!!!! Sinon vous foutez en l'air toute votre page...
II - L'EN-TETE DE LA PAGE
L'en-tête, cékoidon? Facile, c'est ce qui va précéder le corps de votre document, il y
aura le titre de la page et tout plein d'autres trucs comme ça.
Une page HTML commence TOUJOURS par le tag <HTML> et se finit par? </HTML> !
Evidemment me dirons les fayots du premier rang! Les autres, continuer de dormir, je
connais vos parents de toute façon.
Bon, maintenant, on va commencer l'en-tête avec un <HEAD>
Dans l'en-tête, on va taper le titre de notre page, qui s'affichera tout en haut de la
fenêtre du browser.
Exemple
<TITLE>Le Titre à Notre Page à Nous</TITLE>
On ferme maintenant l'en-tête avec un </HEAD> bien senti.Notez que l'on peut mettre
d'autres tags dans l'en-tête de la page, mais on verra ça plus tard.Ensuite, on va
ouvrir le corps du document avec <BODY>.Et dans ce même <BODY>, on va
définir les couleurs qui apparaitrons dans la page.Elles sont en RRGGBB, donc en
hexadécimal, c'est-à-dire qu'on compte en base 16 et pas en base 10. RR définit la part
de rouge (magenta) qui se trouvera dans la couleur, GG de vert et BB de bleu (cyan).
FFFFFF, c'est tout blanc, et 000000, tout noir.
On a :
BGCOLOR="#RRGGBB" qui définit la couleur de fond de la page (gris par défaut).
TEXT="#RRGGBB" celle du texte
LINK="#RRGGBB" celle des liens hypertexte
VLINK="#RRGGBB" celle des liens visités
ALINK="#RRGGBB" celle des liens atifs, qui le restes raremant plus de 40 nano
secondes...
En gros, votre page ressemblera à ça:
<HTML>
<HEAD>
<TITLE>
Babar et Monica sont dans le bureau
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" VLINK="#0000FF"
ALINK="#FF0000">
le corps de la page
</BODY>
</HTML>
Vous comprenez ce que vous lisez?
Si oui, continuez, sinon, relisez.
III - QUELQUES TAGS SIMPLES
- <P> -
Vos pages html seront découpées en paragraphes, créés grâce au tag <P>, et
fermé avec </P>, tout ce qui se trouvera entre ces deux tags sera dans les
paragraphe.On peut rajouter dans le tag un ALIGN="center" ou "right"
ou "left" pour centrer le paragraphe, pour le décaler à droite ou à gauche.
Exemple:
<P ALIGN="center">Mon texte sera aligné au centre de la page</P>
- <H1> <H2> <H3> <H4> <H5> <H6> -
Ce sont des tags qui vous permettrons de regler la taille de la police de caractère
<H1> est le plus gros, <H6> le plus petit. Tout ce qui se trouvera entre
<H1> et </H1>, par exmeple, sera plus gros que le reste (sauf si toute votre
page est en <H1>, evidemment).
- Tags de mise en forme -
<B> : mise en gras
<U> : souligné
<I> : italique
Il y en a d'autre qui servant franchement pas à grand chose, on verra plus tard.
ON OUBLIE PAS DE FERMER SES TAGS! merci
- <HR> -
Celui-là, il en met plein la vue. Il insère dans la page une barre horizontale (vous en
avez surement déjà vues).
Il est pratique pour terminer un chapitre par exemple.
ATTENTION : IL NE SE FERME PAS!
- <BR> -
Tout ce que vous taperez dans un paragraphe sera à la la suite. Pour aller à la ligne,
on utilise le tag <BR>.
Celui-ci ne se ferme pas non plus.
- EXEMPLE DE PAGE -
Si vous avez tout compris jusqu'à maintenant vous devriez être capable de lire ça:
<HTML>
<HEAD>
<TITLE>
Page d'exemple pour mes amis
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" VLINK="#FF0852"
ALINK="#125486">
<P ALIGN="center">
<H1>
<U><B><I>
Le titre qui sera au milieu de ma page, en gros, en gras, souligné et en italique
</I></B></U>
</H1>
</P>
<BR>
<BR>
<P ALIGN="right">
C'est l'histoire de Bill, mon ami Bill, qui a un cigare...
</P>
<BR>
<HR>
<P ALIGN="left">
<H6>
Mais la morale m'interdit d'en dire plus
</H6>
</P>
</BODY>
</HTML>
FIN DU COURS 1
Bon, c'est tout pour le moment, on verra comment faire un lien vers un e-mail, vers un
site, afficher des images et tou plein d'autres trucs dans le prochain cours.
En attendant vous pourrez vous entrainer a faire des pages simples...
TOURNEZ LA PAGE> |