- aller un peu plus loin avec le langage HTML en comprenant la structure d'un document HTML
On a vu dans la leçon 2 que le HTML était un langage à balises.
On va voir aujourd'hui à quoi servent les premières balises HTML :
Normalement, si vous avez écrit votre première page, vous devez avoir un document qui respecte la structure suivante :
première ligne : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Cette ligne n'est pas vraiment nécessaire dans la pratique même si en théorie elle doit être là.
Je ne veux pas m'étendre là-dessus car ça serait compliquer inutilement les choses.
Qu'elle y soit ou pas n'a pas d'importance
Sur mon premier fichier (créé avec Arachnophilia 5 (j'ai repris le 4 depuis)), j'avais comme seconde ligne
<!-- Created on 11 juil. 2002 16:59:53 -->
Là encore ça n'est pas une ligne obligatoire. Elle indique juste quand a été créé le document
Mais vous remarquerez une chose très intéressante. Cette ligne est un commentaire.
Tout texte placé entre <!-- et --> est un commentaire. Ce commentaire n'apparaît pas sur l'écran de l'internaute qui regarde votre site mais il doit vous permettre de placer dans votre fichier des commentaires qui vous serviront à la relecture de votre code HTML
Ensuite vient la balise très importante <HTML>
La balise <HTML> ouvre le document HTML que la balise </HTML> ferme
Ces deux balises peuvent être omises mais je vous demande de ne pas les oublier. Un document HTML est beaucoup plus propre et facile à comprendre quand il est bien construit.
Ensuite, vous avez peut-être remarqué deux "blocs" placés pour le premier entre deux balises <HEAD> et </HEAD> et pour le second entre <BODY> et </BODY>
Tous les documents HTML ont cette structure :
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
i]Le premier bloc ou header ou en-tête est compris entre les balises <HEAD> et </HEAD>
Il contient les informations concernant le document HTML que vous pouvez décider d'y mettre : titre, langue, ...
Le second bloc ou body ou corps est le contenu de la page. C'est ce qui va s'afficher pour l'internaute[/i]
Mais commençons par l'en-tête. Je ne vais pas en parler en détail car ce n'est pas primordial pour réaliser vos premières pages.
Pour mémoire, l'en-tête de la première page de la leçon 2 était :
Code : Tout sélectionner
<title>Accueil</title>
<meta name="GENERATOR" content="Arachnophilia 5.1">
<meta name="FORMATTER" content="Arachnophilia 5.1">
</head>
Ma balise title permet de donner un titre à votre page web, titre qui s'affiche en haut de la fenêtre d'Internet Explorer
Les 2 autres balises sont base et meta.
Je ne vais pas parler de base mais un peu de meta puisqu'il y a un exemple ci-dessus.
Les balises meta servent à renseigner le navigateur, les moteurs de recherche ou les internautes curieux qui vont aller regarder le source de votre page.
La balise meta marche selon le modèle <META NAME="variable" CONTENT="valeur de la variable">
Les balises META ne sont jamais obligatoires mais peuvent être utiles pour un bon référencement de vos pages.
Les variables les plus courantes sont :
- GENERATOR comme sur l'exemple pour dire avec quel logiciel votre page a été écrite.
- AUTHOR : votre nom
- DESCRIPTION : une description en 200 caractères max. de la page (cette description sera affichée par un moteur de recherche poue expliquer ce que l'internaute doit attendre s'il clique)
Ex : <META NAME="Description" CONTENT="Le meilleur site du monde libre">
- KEYWORDS : Cette balise sert encore aux moteurs de recherche. Ce sont les mots (séparés par des virgules) pour lesquels votre site doit être trouvé par un moteur de recherche. Max. 1000 caractères.
Ex : <META NAME="Keywords" CONTENT="classement, championnat"> pour le site de gestion de classement qu'on a en projet.
- LANGUAGE : fr, en, ... Pour dire quelle est la langue de votre page.
Voilà, on a fait le tour des principales balises d'en-tête.
Pour la suite, voyons maintenant le second bloc qui constitue le corps de la page HTML situé entre <BODY> et </BODY>
Pour mémoire, l'en-tête de la première page de la leçon 2 était :
Code : Tout sélectionner
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
</body>
J'ai dit que c'était entre <body> et </body> et là on voit <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
En fait, le langage HTML est un langage à balises et certaines balises (comme ici BODY) acceptent des paramètres supplémentaires comme ici bgcolor, text, ...
La syntaxe est alors
<BODY paramètre1="valeur" paramètre2="valeur2" ...>
Comme la balise <BODY> est une balise importante qui, je le rappelle, détermine que ce qui suit sera affiché à l'écran, je vais lister les principaux paramètres possibles et qui sont déjà presque tous repris dans l'exemple plus haut :
- bgcolor : spécifie la couleur de fond de la page
- text : la couleur d'affichage des caractères "normaux" de votre page
- link : la couleur d'affichage des liens de votre page
- vlink : la couleur d'affichage des liens de votre page qui conduisent à des pages déjà visitées par l'internaute
- alink : la couleur d'affichage des liens de votre page quand l'internaute clique dessus
Bon maintenant, comme vous être curieux, vous allez me dire mais qu'est ce que c'est comme couleur #ffffff
Moi je vais vous répondre que, bien évidemment, c'est du blanc.
Pourquoi ?
Parce que !!
Mais encore ???
Bon je vais essayer d'expliquer. le # est nécessaire.
Ensuite, il faut décomposer le ffffff en 3 groupes de 2 caractères soit ff ff ff
Les caractères ne sont pas n'importe lesquels mais correspondent à des codes héxadécimaux.
Si vous n'avez pas compris la ligne précédente, peu importe, retenez juste que les caractères sont :
- soit 0,1,2,...,9
- soit a,b,...,f
Le premier bloc de 2 caractères définit l'intensité du rouge dans la couleur. Le second bloc, l'intensité du vert et le troisième bloc l'intensité du rouge.
Il faut savoir que ff correspond au maximum et 00 au minimum.
Donc #ffffff veut dire qu'on a un maximum des 3 couleurs primaires : rouge, vert, bleu ce qui nous donne bien du blanc
Maintenant #000000 veut dire qu'on a ni rouge, ni vert, ni bleu donc du noir
Un autre exemple maintenant #00FF00 veut dire qu'on a le vert au maximum et ni rouge ni bleu donc on obtiendra un vert pur.
Bon voilà pour la théorie, maintenant pour la pratique car vous n'allez pas tatonner pendant des heures pour trouver le orange ou le bleu de vos rêves.
Il y a plusieurs solutions. On verra peut-être comment faire avec Arachnophilia (qui n'est pas terrible pour ça)
Je vous recommande plutôt la page <a href='http://www.webreference.com/html/tools/colorizer/' target='_blank'>http://www.webreference.com/html/tools/colorizer/</a>
Le principe est relativement simple et vous n'avez plus, une fois trouvée la couleur de vos rêves, qu'à recopier le contenu de la case hex
Voilà je ne m'attarde pas trop longtemps là-dessus, ça viendra avec un peu de tatonnements
Bon le dernier paramètre bien utile de body est background qui permet de mettre en fond de page une image et s'emploie de la façon suivante :
<body background='images/toto.gif'> si vous voulez mettre en fond d'écran le fichier toto.gif qui se trouve dans le sous-répertoire images
Bon, j'arrête là la leçon car ça fait très longtemps que je l'ai commencé et que je n'ai pas le temps de voir plus de balises.
Les prochaines balises (les plus utiles) la prochaine fois
Oups... bon ben, heu... regardez pas le lien alors, finalement... 
(avec l'aide d'un site annexe certes 
y me demandent mon nom, mon adresse, mon numéro de téléphone, il veulent pas la couleur de mon slip avec mon numéro de carte bancaire 
j'ai carrément fait nuit blanche pour tenter de l'améliorer ....