Introduction

Pour la petite histoire...
Le HTML est un langage relativement simple qui peut définir la mise en page et le contenu d´un document Web. HTML signifie Hyper Text Markup Language. Il ne permet pas de définir réellement toute la page car les logiciels chargés de lire la page Web ne sont pas tous aussi puissants. Ce sont les navigateurs : Internet Explorer, Netscape... . Selon le navigateur utilisé et même selon sa version, le résultat pourra être différent. Ainsi les dernières versions de Internet Explorer, le navigateur de Microsoft, en est actuellement à une version 6 très puissante mais encore peu répandue. Le HTML quant à lui en est à une version 4.

Comment ça marche ?
On vient donc de le dire : le HTML est un langage assez simple d´emploi qui définit la structure du document Web. Pour cela, il suffit d´encadrer le texte de la page par des balises. Il faut donc définir des balises d´ouverture et des balises de fermeture.
Balise d´ouverture : < BALISE>
Balise de fermeture : < /BALISE>
On note donc l´ouverture d´une balise par le signe " inférieur à" : < puis on tape le nom de la balise et enfin le signe de fermeture de la balise qui est " supérieur à" : > . Pour la balise de fermeture, on remarquera que le signe slash ( / ) est situé juste avant le nom de la balise; ceci signifiera simplement que le texte situé après la balise de fermeture ne sera plus affecté par cette balise. Voici un exemple plus clair afin d´éviter les longs discours :

. .. texte de la page<BALISE>texte affecté par la balise</BALISE>suite du texte...

Un nombre important de balises sont complétées par des attributs; ils se mettent a l´intérieur de la balise en question afin de préciser au navigateur ce que l´on souhaite afficher. Exemple :

. .. texte de la page<BALISE attribut=xxx>texte affecté par la balise</BALISE>suite du texte...

Les attributs sont donc, comme vous pouvez le voir, situés après le nom de la balise et utilisés avec le signe égal.

Les logiciels nécessaires
Théoriquement, aucun logiciel n´est nécessaire à la conception d´un site Internet. Nous verrons qu´une fois prêt, c´est une autre histoire ( quoique...). On a donc une premiere étape : la conception du site; elle nécessite donc uniquement l´utilitaire " NotePad" de Windows appelé aussi " Bloc-Notes" ( existant aussi sous Linux). On peut bien sûr trouver d´autres logiciels sur le Net tel que le célèbre DreamWeaver ou encore WebExpert, TextPad... qui vous permettront d´avoir des petits " plus" lors de la création de vos pages. Pour la seconde étape, il vous faudra télécharger un Client FTP. C´est un logiciel qui vous servira à mettre votre site sur Internet. Attention, les pages et images du site ne resteront pas en transit sur le Net à se promener, il vous faudra trouver un hébergeur afin de stocker vos pages sur un disque dur. Cette démarche est gratuite mais en contrepartie vous obligera à afficher une barre de publicité sur votre site ( plusieurs manières selon les hébergeurs). Un client FTP n´est pas obligatoire car certains hébergeurs proposent de transmettre les fichiers directement depuis votre espace membre.
Vous pourrez aussi trouver des logiciels très divers : création graphique ( images animés ou non, logos...), convertisseurs de couleurs et bien d´autres.

Les moyens financiers nécessaires
Normallement, aucun euros n´est nécessaire à la création d´un site Internet ( si ce n´est le coût de la connexion). Mais il y´a des exceptions... Ainsi, il est tout à fait possible de passer d´un site qui ne vous coutera " rien" à un site qui peut coûter jusqu´a plus de 1000 €. En effet, vous pourriez acquérir l´éditeur le plus cher actuellement : Macromédia Dreamweaver pour la bagatelle de 460 € ( soit le prix 4600 carambars). Si vous souhaitez faire un peu de graphisme/3D/animation : Macromédia Flash pour le même prix que Dreamweaver ( de la même société). D´autre part, vous pourriez souhaiter un client FTP en tant que logiciel non limité dans le temps. Prenons le plus connu ( et le plus utilisé) : FTP Expert de la société VisicMédia, 40 € environ. Outre le côté logiciels, il peut vous venir à l´idée de vous payer ce que l´on appelle nom de domaine : le . com ou le . fr que de nombreux sites possèdent. Ces quelques lettres ont un prix : entre 30 et 80 € selon ce que vous choisissiez. Nous l´avons dit auparavant, vous pouvez trouver un hébergeur gratuit qui vous fournira en échange de quelques barres de pub, un espace disque pour votre site. Si les pubs vous insupportent, vous pouvez acheter un hébergement sur des disques durs d´hebergeur payant. Selon la formule et la société choisie, le prix peut varier entre 60 et 120 € pour un hébergement " de base"; il existe aussi les versions dites " Pro" qui multiplieront par deux ou trois ce dernier tarif. Voila donc les paiements principaux : une somme totale comprise entre 1050 et 1500 €. Il existe bien sûr des logiciels moins chers que ceux énoncés dans ce paragraphe.

Première page

Les premières balises à connaître
Voici les balises minimum afin d´obtenir une page Web correcte. La toute première balise est la balise d´ouverture de page : < HTML> ( par conséquent, la balise qui doit être placée en dernière position dans le code source sera : < /HTML>). Viennent ensuite les balises d´en-tête : < HEAD> donc < /HEAD> pour la fin de l´en-tête. On pourra inclure plusieurs types de balises dans cette partie mais nous en reparlerons dans les chapitres concernés; pour l´instant, attardons-nous sur la balise de titre : < TITLE> puis < /TITLE>. Ce titre ne sera pas inclus sur la page mais tout en haut du navigateur, dans la barre ( généralement bleue) qui encadre la fenêtre. Pour entamer enfin le contenu de la page, il faudra taper la balise < BODY>. Vous pourrez après cette balise placer tout ce que vous désirez : tableaux, images, texte... La balise de fin est evidemment < /BODY> et est suivi de < /HTML>.

Le " squelette" minimum
Ce paragraphe est un résumé du précédent : vous avez ici le squelette minimum d´une page Web.
< HTML>
< HEAD>
< TITLE>Titre de la page</TITLE>
< /HEAD>
< BODY>
Tout le contenu de la page : tableaux, images...
< /BODY>
< /HTML>
Avec ceci, vous avez le minimum requis pour afficher une page Web dans des conditions correctes.

Note : Il est possible que vous obteniez une page s´affichant correctement sans taper ce code minimum mais n´oubliez pas que vos visiteurs n´auront pas le même navigateur ou la même version que vous... tapez donc ces quelques lignes pour être sûr d´une compatibilité maximale.

Enregistrement
Nous allons commencer à taper du code HTML : ouvrez votre éditeur de texte ou, à défaut, le Bloc-Notes standard; c´est celui-ci que nous utiliserons afin d´être sûr que tout le monde aura bien la même chose. Tapez-y le code minimal et enregistrez ( Fichier -> Enregistrer). Choisissez le dossier où vous souhaitez enregistrer puis dans la zone " Nom : ", tapez " index.html". L´extension " .html" est en quelque sorte le nom du langage; le " index" que l´on fait figurer avant l´extension en tant que nom de fichier est très important. En effet, votre site ne peut pas fonctionner si votre page d´accueil ne se nomme pas " index"; comment l´hebergeur pourrait-il savoir quelle est la première page à charger lorsque les gens voudront voir votre site? Il a donc été décidé cette convention : quel que soit le langage utilisé, la première page à charger doit se nommer " index".

Ouverture
Allez dans le dossier où vous avez enregistré votre page et double-cliquez dessus pour l´ouvrir. C´est votre navigateur par défaut qui s´ouvre en affichant une page vierge. En effet, tant que vous ne taperez pas de texte entre les balises < BODY> et < /BODY>, rien ne s´affichera.

Modification
Nous devons donc maintenant modifier la page en rajoutant une phrase puis sauvegarder à nouveau et observer le résultat. Vous avez 4 possibilités pour modifier le code source :
- Clic droit sur la page puis choisir " Afficher la source"
- Suivre ce chemin : Fichier -> Modifier avec...
- Ou ce chemin-ci : Affichage -> Source
- En cliquant sur le bouton " Édition" situé dans la barre en haut ( en cliquant dessus, vous ouvrirez le programme de modification par défaut ( le plus souvent c´est Word) ou en cliquant sur la petite flèche juste à droite, vous choisirez le programme voulu). Une fois la source ouverte, modifiez-là : tapez " ceci est un exemple" après la balise < BODY>. Faîtes : Fichier -> Enregistrer, réduisez la fenêtre et reprenez le navigateur. Maintenant, il faut " Actualiser" la page ou la " Rafraichir"; 3 possibilités s´offrent à vous :
- Faîtes Affichage -> Actualiser
- Cliquez sur le bouton " Actualiser"
- Appuyez au clavier sur la touche " F5".
Vous avez maintenant la phrase tapée dans le code source qui s´affiche dans le navigateur.

Conclusion : vous possédez le code HTML minimum que vous devrez mettre sur chaque page créée, vous savez modifier et acualiser la page. Dans le chapitre suivant, nous verrons comment fonctionnent les couleurs de base à connaitre.

Les couleurs [1]

Afin de ne pas parler de choses encore inconnues dans les prochains chapitres, nous attaquons dès maintenant les couleurs. Nous verrons seulement les bases, pour des fonctions plus avancées ou pour comprendre mieux le codage des couleurs, voyez le cours suivant : Les couleurs [2].

N´oubliez pas notre outil vous permettant un choix de couleur très facilement

Comment les intégrer ?
La balise définissant une couleur n´existe pas, on définit toujours une couleur par le biais d´un attribut. Cet attribut se nommera le plus souvent " COLOR="; on définira ensuite, après le signe égal, soit le code couleur soit le nom de la couleur. Le code de la couleur se tapera avec en premier lieu un signe dièse : # puis ensuite avec un code de 6 chiffres ou lettres consécutives.

Code couleur du noir : #000000 ou encore Code couleur du gris de Lexode : #DFE5EC

L´autre possibilité consiste donc à intégrer un nom de couleur : vous tapez l´attribut puis le signe égal et le nom de la couleur, tout simplement. Notons que le nom de la couleur est toujours à taper en langue anglaise.

Nom de la couleur noire : black ou encore Nom de la couleur orange foncé : darkorange

Où les intégrer ?
Nous avons déja répondu à cette question mais elle nécessite quelques précisions. Nous savons donc actuellement que la couleur s´intègre en tant qu´attibut d´ue balise. Mais les inventeurs du HTML ne se sont pas bornés à inventer l´attribut " COLOR=", cela aurait été trop simple : -) Ainsi, selon la balise utilisée, l´attribut sera différent : " COLOR=", " BGCOLOR="... Nous allons donc attaquer la mise en page de votre site avec la définition de la couleur. Ouvrez votre page HTML et éditez ceci dans la balise BODY : < BODY BGCOLOR=#486CA8>. Sauvegardez puis actualisez votre page. Si votree navigateur comprend ce code couleur, vous devriez obtenir une page entièrement colorée d´un bleu-violacé. Vous voici donc en mesure de définir l´apparence de l´arrière-plan de votre site. Toujours dans la balise BODY, vous pouvez définir 3 autres couleurs : les liens, les liens déja cliqués, les liens en train d´être cliqués. Vous pouvez donc tapez ceci dans votre balise BODY : < BODY BGCOLOR="#486CA8" LINK="red" VLINK="#FF8C00" ALINK="cyan">. Analysons brièvement le code tapé : " LINK" signifie tout simplement LIEN, que vous définissez ici en rouge ( red); " VLINK" signifie Visited LINK soit " Lien visité", que vous définissez en orange foncé ( "darkorange" ou " #FF8C00"); l´attribut " ALINK" signifie Actived LINK soit " Lien actif", cela défini la couleur du lien au moment où l´on clique dessus, défini ici en bleu ciel ( "cyan"). Pour toutes les autres balises, sauf indication contraire de notre part, l´utilisation de la couleur se fera avec l´attribut " COLOR=".

Les 16 couleurs " officiellement" reconnues
Voici un tableau regroupant les 16 couleurs qui s´afficheront sur n´importe quelle version de n´importe quel navigateur :

Nom Code Couleur
BLACK #000000
MAROON #800000
GREEN #008000
OLIVE #808000
NAVY #000080
PURPLE #800080
TEAL #008080
GRAY #808080
SILVER #C0C0C0
RED #FF0000
LIME #00FF00
YELLOW #FFFF00
BLUE #0000FF
FUCHSIA #FF00FF
AQUA #00FFFF
WHITE #FFFFFF

Les couleurs [2]

Vous avez du découvrir dans le chapitre précédent comment est utilisée la coloration ainsi que les principaux codes couleurs. Maintenant, voyons plus en détail comment fonctionne le code héxadécimal :
Nous allons utiliser pour ce cours l´exemple du code couleur #A6D9G4. Chaque code héxadécimal se décompose en 3 groupes de 2 caractères. Ainsi, le code-exemple #A6D9G4 nous donne A6, D9, G4. Le premier doublé correspond à la quantité de rouge sur 255, le second doublé correspond à la quantité de vert sur 255 et le dernier doublé correspond à la quantité de bleu sur 255. Chaque code héxadécimal est composé de ces trois couleurs ( code RGB : Red-Green-Blue) et donnera une couleur spécifique. Ici, A6 correspond à 170/255 de rouge, D9 à 102/255 de vert, G4 à 221/255 de bleu. Un doublé héxadécimal peut être composé de chiffres ou de lettres ou des deux; les lettres vont de A à F et les chiffres de 0 à 9. Le doublé FF équivaut à 255/255 et le doublé 00 correspond à 0/255. Plus la dose de couleur est élevé, plus la couleur est claire. Ainsi la couleur blanche est composé à 255/255 de rouge, de vert, de bleu et aura le code héxadécimal #FFFFFF. Au contraire, la couleur noire est composé de 0/255 de rouge, vert, bleu et aura le code #000000.

Voici 3 tableaux résumant les doublés hédécimaux selon l´ordre croissant, les doublés héxadécimaux selon la quantité de couleur, les 256 codes couleurs avec leur nom.

Ordre croissant des doublés ( 00 -> FF)

00 = 0/255
01 = 1/255
02 = 2/255
03 = 3/255
04 = 4/255
05 = 5/255
06 = 6/255
07 = 7/255
08 = 8/255
09 = 9/255
10 = 16/255
11 = 17/255
12 = 18/255
13 = 19/255
14 = 20/255
15 = 21/255
16 = 22/255
17 = 23/255
18 = 24/255
19 = 25/255
20 = 32/255
21 = 33/255
22 = 34/255
23 = 35/255
24 = 36/255
25 = 37/255
26 = 38/255
27 = 39/255
28 = 40/255
29 = 41/255
30 = 48/255
31 = 49/255
32 = 50/255
33 = 51/255
34 = 52/255
35 = 53/255
36 = 54/255
37 = 55/255
38 = 56/255
39 = 57/255
40 = 64/255
41 = 65/255
42 = 66/255
43 = 67/255
44 = 68/255
45 = 69/255
46 = 70/255
47 = 71/255
48 = 72/255
49 = 73/255
50 = 80/255
51 = 81/255
52 = 82/255
53 = 83/255
54 = 84/255
55 = 85/255
56 = 86/255
57 = 87/255
58 = 88/255
59 = 89/255
60 = 96/255
61 = 97/255
62 = 98/255
63 = 99/255

64 = 100/255
65 = 101/255
66 = 102/255
67 = 103/255
68 = 104/255
69 = 105/255
70 = 112/255
71 = 113/255
72 = 114/255
73 = 115/255
74 = 116/255
75 = 117/255
76 = 118/255
77 = 119/255
78 = 120/255
79 = 121/255
80 = 128/255
81 = 129/255
82 = 130/255
83 = 131/255
84 = 132/255
85 = 133/255
86 = 134/255
87 = 135/255
88 = 136/255
89 = 137/255
90 = 144/255
91 = 145/255
92 = 146/255
93 = 147/255
94 = 148/255
95 = 149/255
96 = 150/255
97 = 151/255
98 = 152/255
99 = 153/255
A0 = 160/255
A1 = 161/255
A2 = 162/255
A3 = 163/255
A4 = 164/255
A5 = 165/255
A6 = 166/255
A7 = 167/255
A8 = 168/255
A9 = 169/255
B0 = 176/255
B1 = 177/255
B2 = 178/255
B3 = 179/255
B4 = 180/255
B5 = 181/255
B6 = 182/255
B7 = 183/255
B8 = 184/255
B9 = 185/255
C0 = 192/255
C1 = 193/255
C2 = 194/255
C3 = 195/255
C4 = 196/255
C5 = 197/255
C6 = 198/255
C7 = 199/255
C8 = 200/255
C9 = 201/255
D0 = 208/255
D1 = 209/255
D2 = 210/255
D3 = 211/255
D4 = 212/255
D5 = 213/255
D6 = 214/255
D7 = 215/255
D8 = 216/255
D9 = 217/255
E0 = 224/255
E1 = 225/255
E2 = 226/255
E3 = 227/255
E4 = 228/255
E5 = 229/255
E6 = 230/255
E7 = 231/255
E8 = 232/255
E9 = 233/255
F0 = 240/255
F1 = 241/255
F2 = 242/255
F3 = 243/255
F4 = 244/255
F5 = 245/255
F6 = 246/255
F7 = 247/255
F8 = 248/255
F9 = 249/255
0A = 10/255
1A = 26/255
2A = 42/255
3A = 58/255
4A = 74/255
5A = 90/255
6A = 106/255
7A = 122/255
8A = 136/255
9A = 152/255
0B = 11/255
1B = 27/255
2B = 43/255
3B = 59/255
4B = 75/255
5B = 91/255
6B = 107/255
7B = 123/255
8B = 139/255
9B = 155/255
0C = 12/255
1C = 28/255
2C = 44/255
3C = 60/255
4C = 76/255
5C = 92/255
6C = 108/255
7C = 124/255
8C = 140/255
9C = 156/255
0D = 13/255
1D = 29/255
2D = 45/255
3D = 61/255
4D = 77/255
5D = 93/255
6D = 109/255
7D = 125/255
8D = 141/255
9D = 157/255
0E = 14/255
1E = 30/255
2E = 46/255
3E = 62/255
4E = 78/255
5E = 94/255
6E = 110/255
7E = 126/255
8E = 142/255
9E = 158/255
0F = 15/255
1F = 31/255
2F = 47/255
3F = 63/255
4F = 79/255
5F = 95/255
6F = 111/255
7F = 127/255
8F = 143/255
9F = 159/255
AA = 170/255
AB = 171/255
AC = 172/255
AD = 173/255
AE = 174/255
AF = 175/255
BA = 186/255
BB = 187/255
BC = 188/255
BD = 189/255
BE = 190/255
BF = 191/255
CA = 202/255
CB = 203/255
CC = 204/255
CD = 205/255
CE = 206/255
CF = 207/255
DA = 218/255
DB = 219/255
DC = 220/255
DD = 221/255
DE = 222/255
DF = 223/255
EA = 234/255
EB = 235/255
EC = 236/255
ED = 237/255
EE = 238/255
EF = 239/255
FA = 250/255
FB = 251/255
FC = 252/255
FD = 253/255
FE = 254/255
FF = 255/255

Ordre croissant des quantités ( 0/255 -> 255/255)

00 = 0/255
01 = 1/255
02 = 2/255
03 = 3/255
04 = 4/255
05 = 5/255
06 = 6/255
07 = 7/255
08 = 8/255
09 = 9/255
0A = 10/255
0B = 11/255
0C = 12/255
0D = 13/255
0E = 14/255
0F = 15/255
10 = 16/255
11 = 17/255
12 = 18/255
13 = 19/255
14 = 20/255
15 = 21/255
16 = 22/255
17 = 23/255
18 = 24/255
19 = 25/255
1A = 26/255
1B = 27/255
1C = 28/255
1D = 29/255
1E = 30/255
1F = 31/255
20 = 32/255
21 = 33/255
22 = 34/255
23 = 35/255
24 = 36/255
25 = 37/255
26 = 38/255
27 = 39/255
28 = 40/255
29 = 41/255
2A = 42/255
2B = 43/255
2C = 44/255
2D = 45/255
2E = 46/255
2F = 47/255
30 = 48/255
31 = 49/255
32 = 50/255
33 = 51/255
34 = 52/255
35 = 53/255
36 = 54/255
37 = 55/255
38 = 56/255
39 = 57/255
3A = 58/255
3B = 59/255
3C = 60/255
3D = 61/255
3E = 62/255
3F = 63/255

40 = 64/255
41 = 65/255
42 = 66/255
43 = 67/255
44 = 68/255
45 = 69/255
46 = 70/255
47 = 71/255
48 = 72/255
49 = 73/255
4A = 74/255
4B = 75/255
4C = 76/255
4D = 77/255
4E = 78/255
4F = 79/255
50 = 80/255
51 = 81/255
52 = 82/255
53 = 83/255
54 = 84/255
55 = 85/255
56 = 86/255
57 = 87/255
58 = 88/255
59 = 89/255
5A = 90/255
5B = 91/255
5C = 92/255
5D = 93/255
5E = 94/255
5F = 95/255
60 = 96/255
61 = 97/255
62 = 98/255
63 = 99/255
64 = 100/255
65 = 101/255
66 = 102/255
67 = 103/255
68 = 104/255
69 = 105/255
6A = 106/255
6B = 107/255
6C = 108/255
6D = 109/255
6E = 110/255
6F = 111/255
70 = 112/255
71 = 113/255
72 = 114/255
73 = 115/255
74 = 116/255
75 = 117/255
76 = 118/255
77 = 119/255
78 = 120/255
79 = 121/255
7A = 122/255
7B = 123/255
7C = 124/255
7D = 125/255
7E = 126/255
7F = 127/255
80 = 128/255
81 = 129/255
82 = 130/255
83 = 131/255
84 = 132/255
85 = 133/255
86 = 134/255
87 = 135/255
88 = 136/255
89 = 137/255
8A = 136/255
8B = 139/255
8C = 140/255
8D = 141/255
8E = 142/255
8F = 143/255
90 = 144/255
91 = 145/255
92 = 146/255
93 = 147/255
94 = 148/255
95 = 149/255
96 = 150/255
97 = 151/255
98 = 152/255
99 = 153/255
9A = 152/255
9B = 155/255
9C = 156/255
9D = 157/255
9E = 158/255
9F = 159/255
A0 = 160/255
A1 = 161/255
A2 = 162/255
A3 = 163/255
A4 = 164/255
A5 = 165/255
A6 = 166/255
A7 = 167/255
A8 = 168/255
A9 = 169/255
AA = 170/255
AB = 171/255
AC = 172/255
AD = 173/255
AE = 174/255
AF = 175/255
B0 = 176/255
B1 = 177/255
B2 = 178/255
B3 = 179/255
B4 = 180/255
B5 = 181/255
B6 = 182/255
B7 = 183/255
B8 = 184/255
B9 = 185/255
BA = 186/255
BB = 187/255
BC = 188/255
BD = 189/255
BE = 190/255
BF = 191/255
C0 = 192/255
C1 = 193/255
C2 = 194/255
C3 = 195/255
C4 = 196/255
C5 = 197/255
C6 = 198/255
C7 = 199/255
C8 = 200/255
C9 = 201/255
CA = 202/255
CB = 203/255
CC = 204/255
CD = 205/255
CE = 206/255
CF = 207/255
D0 = 208/255
D1 = 209/255
D2 = 210/255
D3 = 211/255
D4 = 212/255
D5 = 213/255
D6 = 214/255
D7 = 215/255
D8 = 216/255
D9 = 217/255
DA = 218/255
DB = 219/255
DC = 220/255
DD = 221/255
DE = 222/255
DF = 223/255
E0 = 224/255
E1 = 225/255
E2 = 226/255
E3 = 227/255
E4 = 228/255
E5 = 229/255
E6 = 230/255
E7 = 231/255
E8 = 232/255
E9 = 233/255
EA = 234/255
EB = 235/255
EC = 236/255
ED = 237/255
EE = 238/255
EF = 239/255
F0 = 240/255
F1 = 241/255
F2 = 242/255
F3 = 243/255
F4 = 244/255
F5 = 245/255
F6 = 246/255
F7 = 247/255
F8 = 248/255
F9 = 249/255
FA = 250/255
FB = 251/255
FC = 252/255
FD = 253/255
FE = 254/255
FF = 255/255

Le texte [1]

La balise < FONT>, extrêmement importante, va définir la totalité de la mise en forme de tout texte situé à l´intérieur de cette balise. Afin d´y définir les différentes options, on indiquera dans la balise des attributs. La balise < FONT> ne sert à rien sans ses attibuts mais, à l´inverse, les attributs seuls ne seront pas compris.

La couleur
Juste une chose à noter : selon la couleur de fond de page que vous aurez choisi, le texte sera plus ou moins visible. Si vous ne savez pas utiliser les couleurs allez voir le cours nommé " Les couleurs [1]".

< FONT COLOR=#000000>

La taille
La taille de la police demeure toujours un élément-clé de la mise ne page de votre site. Savoir manier les tailles de texte est très important... On définit la taille d´un texte par l´attribut " SIZE=" puis 3 possibilités s´offrent à nous : définir une taille par défaut, augmenter la taille définie par défaut, réduire la taille définie par défaut. Pour définir la taille par défaut, on utilisera simplement " SIZE=x" où x représente un nombre entre 1 et 7, 1 étant la taille la plus petite et 7 la taille la plus grande. Pour augmenter la taille de la police, il faudra emplyer " SIZE=+x" où x est un nombre situé entre 1 et 4. Si la taille par défaut est de 7, la police ne pourra pas être augmentée plus que cela. Pour diminuer la taille de la police, il faudra employer " SIZE=-x" où x est un nombre situé entre 1 et 2 soit " SIZE=-1" ou " SIZE="-2").

< FONT SIZE=2>Ecriture du texte en SIZE=2<FONT SIZE=+1>Passage du texte en mode SIZE=3 ( "SIZE=2" + " SIZE=+1")</font>Continuité du texte en SIZE=2</font>

Le choix de la police
L´attribut " FACE=" est très intéressant aussi car il définit la police utilisée sur le site. Malheureusement, même si vous disposez d´une police magnifique lord de la conception de votre site, il faudra hélas que vos visiteurs aient la même! En effet, lorque vous " appelez" une police, c´est la police sur l´ordinateur du visiteur qui est utilisée. Si ce visiteur ne possède pas la police, alors c´est celle par défaut qui sera utilisée ( à moins que vous n´ayez défini vous-même une police par défaut). Pour information, sachez que toutes les polices suivantes sont obligatoirement présentes sur un ordinateur possédant le système d´exploitation Windows : Arial, Bookman Old Style, Comic Sans MS, Courrier ( ou Courrier New), Garamond, Impact, MS Outlook, Symbol, Tahoma, Times New Roman, Vardana, Webdings, Wingdings.

< FONT FACE="Times New Roman">On demande au navigateur d´afficher du texte en Times New Roman

< FONT FACE="Times New Roman,Verdana,Helvetica">Ici, on demande au navigateur d´afficher du texte en Times New Roman . Si la police n´est pas trouvée, on recherche Verdana puis Helvetica

Balise de mise en caractères GRAS
Un tout petit paragraphe car la seule chose à savoir pour mettre les caractères en gras, c´est qu´il faut les " entourer" de la balise < B>. On utilise B comme " BOLD", en français : " GRAS"

Balise de mise en caractères ITALIQUE
Même chose que pour la mise en gras : il faut savoir que c´est la balise < I> qui s´occupe de la mise en italique. ON utilise I comme " ITALIC"... pas besoin de traduction ; -)

Balise de mise en caractères SOULIGNÉS
Aussi simple que les précédentes balises : < U> s´occupera de souligner le texte. On utilise U comme " UNDERLINE", soit en français : " SoULIGNÉ"

Balise de mise en caractères de MACHINE À ÉCRIRE
Cette balise peut s´avérer utile si l´on souhaite attirer l´attention sur un point précis, un exemple : elle formate le texte en une police de type machine à écrire. < TT>, TT comme TéléType

Le texte [2]

La balise < Hn>
La balise < Hn> sert à changer la taille du texte. Le signe " n" à une valeur de 1 à 6 où 6 est la plus petite valeur et 1 la plus grande valeur. On peut donc taper par exemple : < H1>Texte très gros en H1</H1>.

Les paragraphes
Les paragraphes sont très utiles car ils sont très complets. Tout d´abord, il sautent une ligne au début ( <P>) puis une ligne à la fin ( </P>) ce qui permet d´éviter d´ores et déjà les textes trop collés. Autre importance : l´attribut " ALIGN="; vous obtiendrez un paragraphe directement aligné à gauche avec " ALIGN=LEFT", un paragraphe aligné à droite avec " ALIGN=RIGHT" et un centré avec " ALIGN=CENTER". Le meilleur pour la fin : " ALIGN=JUSTIFY" vous permettra d´aligner en un bloc à gauche comme à droite : regardez les cotés de ce cours ( comme sur tous les cours de Lexode-Webmasters) et vous verrez qu´ils sont parfaitement alignés, c´est " ALIGN=JUSTIFY".

La balise de PREFORMATAGE
La balise < PRE> n´a pas une très grande importance mais mérite d´être cité. Le texte entre ces balises s´affichera sur la page Web, tel qu´il est affiché dans votre source. C´est tout. Cela permet d´éviter d´utiliser beaucoup de lignes de codes pour faire quelque chose de plus direct. C´est donc la mise en page de la source qui est conservée.

La balise de DIVISION
Elle sert uniquement à aligner le texte grâce à son attribut " ALIGN=". En effet, pour centrer un texte par exemple, il est possible d´utiliser la balise < CENTER>. En aucun cas pour aligner un texte à droite vous ne trouverez de balise < RIGHT>. C´est là qu´intervient la balise DIV; elle ne sert qu´à aligner le contenu de la balise ( donc tout ce qui est situé entre < DIV ALIGN=....> et < /DIV>). L´alignement est le même qu´avec < P> : ALIGN=CENTER,RIGHT,LEFT,JUSTIFY

Les liens

Comment créer un lien en général ?
Un lien se décompose en 3 parties : la balise d´ouverture,l´endroit où l´on va cliquer et la balise de fermeture. La balise d´ouverture contiendra forcément ceci : < A...> " A" ne sera jamais employé seul et aura toujours un attribut. Ensuite, l´endroit où l´on va cliquer : il se situe entre la balise d´ouverture et de fermeture. La balise de fermeture est < /A>. En bref, un lien doit ressembler à ceci : < A...>Cliquez ic</A>. TOUT les liens seront basés sur cette structure. Créer un lien qui renvoie sur une autre page
Un lien permettant de renvoyer sur une autre page sera donc exactement la structure vue précedemment mais avec seulement un attribut en plus. Cet attribut sera " HREF=" où l´on indiquera juste après la page à afficher.

< A HREF=page2.html>Cliquez ici pour vous rendre en page 2</A>

Créer un lien qui renvoie à un certain endroit de la page
Si votre page est assez longue ou si elle est présentée telle un glossaire, il vous faudra peut-être faire un lien renvoyant à un autre bout de la page. Pour cela, toujours la même structure mais il faudra mettre deux balises : une qui sera visible sur laquelle on cliquera et la deuxième qui sera invisible sur la page et servira uniquement à pointer l´endroit où l´on arrivera si on clique sur le premier lien. Pour le premier lien on utilisera l´attribut " HREF=#nom_de_la_seconde_balise"" et la seconde contiendra l´attribut " NAME=nom_de_la_seconde_balise"

< A HREF=#baspage>Cliquez ici pour vous rendre en bas de page</A>

et plus loin, en bas de page

< A NAME=baspage>Votre bas de page ou une partie de votre bas de page</A>

Créer un lien qui renvoie à un certain endroit d´une autre page
On utilisera exactement la même technique que pour envoyer vers un endroit d´une même page mais on fusionnera avec un lien normal type " HREF".

< A HREF=page3.html#baspage>Cliquez ici pour accéder à la fin de la troisième page</A>

Créer un lien pour télécharger un fichier ou une image
Afin de proposer en téléchargement un fichier quelconque il vous suffit de créer un lien qui, lorque l´on cliquera dessus, lancera le logiciel de téléchargement approprié. Les extensions suivantes sont toutes reconnues : exe; rar; zip; jpg; gif; bmp et de nombreux autres formats ( en effet, ils ne sont pas tous là et sont bien nombreux).

< A HREF=logiciel.exe>Téléchargez notre nouveau logiciel</A>

Ouvrir une nouvelle fenêtre pour afficher le document
Afin de ne pas quitter la fenêtre où figure le lien, vous avez la possibilité d´ouvrir une nouvelle fenêtre. Cette manipulation se fait à l´aide de l´attribut " TARGET=" auquel on mettra la valeur " _blank". D´autres valeurs sont possibles et sont énoncées dans le chapitre " LES FRAMES" car elles n´ont pas encore d´utilité.

< A HREF=logiciel.html TARGET="_blank">Voyez la description de notre nouveau logiciel, dans une nouvelle fenêtre</A>

Insérer une image dans une page Web
Une image s´insère dans une page Web par l´utilisation de la balise < IMG SRC=...>. Cette balise ne se termine pas, pas de < /IMG>. Le " IMG" estobligatoire, pour définir que c´est une image; on l´insère ensuite avec l´attribut obligatoire : " SRC=", on indiquera le chemin à suivre pour trouver l´image. Cela vous permet ainsi de mettre dans un dossier " images", toutes vos images. Pour insérer une image qui est dans le même dossier que la page, vous pouvez taper directement le nom de l´image avec son extension.

< IMG SRC=image.gif>

Pour insérer une image qui n´est pas dans le même dossier, par exemple : images/image.gif, vous devrez impérativement mettre le chemin entre guillemets. Pour être sûr d´être 100% compatible avec les visiteurs de votre site, mieux vaut mettre à chaque utilisation d´attribut des guillemets.

< IMG SRC="images/image.gif">

Modifier la taille d´une image
Si l´image choisie ne vous convient pas, si elle est trop grosse ou trop petite, vous pouvez modifier la taille de celle-ci en désignant deux attributs. Le premier, définira la largeur de l´image : " WIDTH=", le second définit la hauteur : " HEIGHT=". Pour la hauteur comme pour la largeur, la taille définie est toujours en pixels. Pour savoir combien fait une image dans sa taille originale, faîtes un clic droit dessus et choisissez " Propriétés", vous verrez s´afficher la taille.

< IMG SRC="image.gif" WIDTH="90" HEIGHT="122">

Modifier l´alignement d´une image
Afin que l´image s´aligne parfaitement avec le reste de votre page, utilisez les attributs " ALIGN=" et " VALIGN=", l´un pour aligner ( ALIGN) et l´autre pour aligner verticalement ( VALIGN). L´attribut " ALIGN=" fonctionnera avec LEFT,CENTER,RIGHT ( GAUCHE,CENTRÉ,DROITE) tandis que l´attribut " VALIGN=" fonctionnera avec TOP,MIDDLE,BOTTOM ( HAUT,MILIEU,BAS).Voici un résultat des différents alignements, le carré noir représentant l´image.

Mettre/enlever la bordure
Encore une possbilité de modification sur les images est l´ajout d´une bordure. Cette bordure apparaît par défaut lorque l´on utilise une image en tant que lien. Afin d´enlever ce cadre, il suffit simplement de définir une taille ( en pixels) après l´attribut " BORDER=". Pour ne pas mettre de cadre, la valeur sera 0 et pour en mettre un, le minimum sera 1.

< IMG SRC="image.gif" BORDER="0">

Espacement horizontal et vertical d´une image
Afin d´espacer une image du texte de la page, il est possible d´utiliser deux attributs : " HSPACE=" et " VSPACE=", Hspace définira l´espacement Horizontal et Vspace, l´espacement Vertical. On définira ici encore une valeur en pixels pour obtenir le résultat souhaité.

< IMG SRC="image.gif" HSPACE="23" VSPACE="12">

Les images cliquables

Utilisation des balises d´images cliquables
Les images cliquables sont très utilisées sur une page d´accueil constituée d´une seule image et renvoyant vers différentes zones du site. On définit selon une forme géométrique quelle partie de l´image doit être cliquée et où renvoyer lorqu´un visiteur clique. Avant d´utiliser ce procédé, il faut bien sûr définir des balises qui indiqueront aux navigateurs que l´on définit ensuite des zones cliquables sur telle image du site. Ces balises sont < MAP NAME="nom">Définition des zones cliquables et des liens correspondants</MAP>. Avant cela, on utilisera un nouvel attribut d´image : USEMAP="#nom".

< img src="image.gif" USEMAP="#menu">
< MAP NAME="menu">Définition des zones cliquables et des liens correspondants</MAP>

Comment définir les zones cliquables et quels sont les attributs ?
Il faudra définir une zone cliquable par la mise en place de balises complémentaires à la balise < MAP...>. Ces balises sont définies comme suit : < AREA SHAPE="type_de_la_figure" HREF="url_de_renvoi" COORD="coordonnées">. " x" correspond à l´abscisse ( ou coordonnée horizontale) et " y" correspond à l´ordonnée du point ( coordonnée verticale) . Il n´y a pas de balise de fin pour < AREA...>.

< AREA SHAPE="rect" HREF="page12.html" COORD="x1,y1,x2,y2">

Un rectangle cliquable
L´exemple précédent vous montrait justement comment définir une zone rectangulaire cliquable. En x1,y1 : le point où commence la zone cliquable; en x2,y2 : le point où s´arrête la zone cliquable.Exemple illustré et commenté :

Le rectangle ici présent est composé de deux zones : une zone que l´on a définie et une autre non définie ( pour le moment). La zone définie à les coordonnées x1,y1,x2,y2 = 12,6,217,36. Toute cette zone renverra par exemple vers " zonecliquable.html". Le code correspondant donne donc < AREA SHAPE="rect" HREF="zonecliquable.html" COORD="12,6,217,36">.

Un cercle cliquable
On suivra toujours le même principe des coordonnées pour indiquer les zones cliquables. Un cercle étant composé d´une infinité de point, le travail se complique... Donc, pour définir une zone cliquable ayant une forme de cercle, il faudra définir les coordonnées du centre puis les coordonnées d´un point du contour. Le cercle sera donc tracé par le navigateur. Nous disions donc... x1,y1 : coordonnées du centre du cercle; x2,y2 : coordonnées d´un point du contour du cercle.Exemple illustré et commenté :

Le cercle ci-dessus à un centre de coordonnées 50,50 et un point du contour équivalent aux coordonnées 16,16. Le navigateur fera un tracé d´une ligne " centre --> point du contour" et connaîtra exactement la circonférence du cercle à tracer en tant que zone cliquable ( pas en tant qu´image, attention). Le code correspondant donne donc < AREA SHAPE="circle" HREF="zonecliquable2.html" COORD="50,50,16,16">.

Un polygone cliquable
Un polygone étant une figure avec plusieurs cotés... il y´a plusieurs coordonnées à indiquer, tout simplement. On passera donc du stade " x1,y1 x2,y2" à " x1,y1,x2,y2,x3,y3,x4,y4..." et ce jusqu´au nombre de points à définir. Pas grand chose de plus à dire, voyons un exemple immédiatement :

Vous remarquez donc que les coordonées fonctionnent comme avec le rectangle : on indique un couple x,y et les points sont tracés par le navigateur. Une fois les points liés, la zone est cliquable et renverra vers l´adresse indiquée dans l´attribut " HREF=". La source complète pour l´exemple ci-dessus est : < AREA SHAPE="poly" HREF="zonecliquable3.html" COORD="38,6,50,6 50,18,45,12,38,25,30,18,40,9">.

Les coordonnées
Depuis le début du cours on parle des coordonées mais nous ne disons pas comme les trouver... Tout le monde peut le faire et cela ne nécessite aucun logiciel à acheter ou même à télécharger. Ouvrez Paint, le logiciel de Microsoft, inclus dans tous les Windows. Utilisateurs de Linux ou MacOs, vous avez le même type d´utilitaire mais peut-être sans l´affichage des coordonnées... à voir. Une fois ouvert, voyez en bas du logiciel qu´une phrase apparaît : " Pour obtenir de l´aide, sélectionnez Rubriques d´aide du menu d´aide". Si vous ne voyez pas cette phrase, c´est que votre " barre d´état" n´est pas affichée : faîtes " Affichage --> Barre d´état". Maintenant, promenez votre souris sur la zone blanche du logiciel et voyez dans la barre d´état que des nombres sont apparus et changent dès que vous bougez votre souris. Ces nombres apparaissent ainsi : " 70,76"... exactement comme les coordonnées des images cliquables. C´est comme cela que vous obtiendrez vos coordonnées. Pour être extrêmement précis, n´hésitez pas à utiliser l´option ZOOM du logiciel : " Affichage --> Zoom --> Grande Taille".

Une image cliquable complète
Pour résumer un peu ce cours suffisament complexe pour s´embrouiller, voyons un exemple complet avec la source associée.

< IMG SRC="image.gif" USEMAP="#menu">
< MAP NAME="menu"> < AREA SHAPE="rect" HREF="zonecliquable.html" COORD="12,6,217,36">
< AREA SHAPE="circle" HREF="zonecliquable2.html" COORD="50,50,16,16">
< AREA SHAPE="poly" HREF="zonecliquable3.html" COORD="38,6,50,6 50,18,45,12,38,25,30,18,40,9"> < /MAP>

Les listes

Définir une liste descriptive
La balise < DL> ( Description List) ouvrira une liste descriptive. Il définit le début de la liste et englobe deux autres balises : < DT> ( Description Title) et < DD> ( Description Definition). L´une ( DT) sert à caractériser le titre de la définition, l´autre ( DD) caractérisera la définition elle-même. La définition située en-dessous du titre sera décalé de quelques pixels. " COMPACT" est un attribut permettant, sur certains navigateurs, de positionner le texte directement après le titre. On mettra < /DL> pour déclarer une fin de liste descriptive.

La balise < DL>
Cette balise doit précéder chaque définition et indique le titre. Le contenu de cette balise ne doit pas excéder une ligne.Aucun navigateur ne gère la mise en page de cette balise, c´est donc à vous de la mettre en forme ( <B>...). Il n´y a pas de balise de fin pour < DT>.

La balise < DD>
Cette balise définit tout simplement la définition correspondant au titre. C´est une balise qui ne contient aucun attribut. Le texte est décalé vers la droite mais pas justifié. Aucune balise de fin pour < DD>.

< DL>
< DT>Titre de la définition>
< DD>Définition décalée
< DT>Titre de la définition>
< DD>Définition décalée
< DT>Titre de la définition>
< DD>Définition décalée
< /DL>

Listes à puces graphiques
On définit une liste à puces graphiques avec < UL>. Chacun des éléments de la liste sera précédé d´une puce dont on purra choisir le graphisme à chaque fois. Cette balise d´incrustation d´un élément est < LI> ne nécessitant aucune balise de fin. Pour choisir le graphisme de la puce, l´attribut " TYPE=" interviendra : " square" pour obtenir une puce rectangle; " circle" pour une puce ayant l´aspect d´un cercle vide et " disc" pour la même puce mais pleine. Notez que si l´on souhaite toujours le même graphisme on peut directement mettre l´attribut " TYPE" dans la balise < UL> qui définit une ouverture de liste. Afin de positionner un titre à l´ensemble de la liste, on pourra utiliser la balise < LH> ne nécessitant pas de balise de fin. Cette balise ne fera pas précéder le texte d´une puce.

< UL>
< LH>Titre de la liste>
< LI type=disc>Élément avec puce ronde pleine
< LI type=square>Élément avec puce rectangulaire
< LI type=circle>Élément avec puce ronde vide
< /UL>

Listes à puces non graphiques
On définit une liste à puces non graphiques avec la balise < OL>. Pour définit un titre, on utilise toujours < LH> puis les valeurs de la liste avec < LI>. Quant aux attributs, on utilisera aussi " TYPE=" mais avec des valeurs un peu différentes : type=1 pour une liste numérotée avec des chiffres arabes; type=I pour une liste numérotée avec des chiffres romains; type=i pour une liste numérotée avec des chiffres romains minuscules; type=a pour une liste ordonnée par des lettres minuscules; type=A pour la même liste mais avec des lettres majuscules. Ouf! c´est tout... Un nouvel attribut fait son apparition pour définir la lettre ( ou le chiffre) où doit commencer la liste; ainsi, l´attribut type=A start=S fera commencer une liste avec des lettres majuscules dont le premier élément sera la lettre S et continuera avec T, U, V...

< OL>
< LH>Titre de la liste>
< LI type=1>Élément débutant par un " un" type chiffre arabe
< LI type=A>Élément débutant par un " A" type lettre majuscule
< LI type=i>Élément débutant par un " un" type chiffre romain minuscule
< LI type=I>Élément débutant par un " un" type chiffre romain majuscule
< LI type=a>Élément débutant par un " a" type lettre minuscule
< LI type=I start=XVI>Élément débutant par un chiffre romain majuscule qui est 16 ( XVI); la suite sera donc XVII, XVIII,XIX,XX, XXI...
< /OL>

Vous pouvez mettre toute autre balise après un < LI> par exemple un lien.

La mise en page

Sauter des lignes
Lorsque vous taperez votre source, afin de vous y retrouvez, vous serez sans aucun doute amenés à passer à la ligne. Afin que ces sauts de lignes ne soient pas affichés dans la page HTML conçue, il existe une balise permetant de passer à la ligne SUR LA PAGE HTML. Cette balise est une balise de position et ne nécessite pas de fin. Lorsque vous aurez à sauter des lignes, il vous faudra taper < BR>. Attentio tout de même... si vous tapez UN < BR> vous ne ferez qu´une seule chose : passer à la ligne; pour sauter une ligne, il vous faudra donc taper DEUX < BR>.

Les espaces
Sur le même principe que pour les passages à la ligne, les concepteurs du HTML ont crée le caractère spécial " espace". En effet, aucune balise ne sert à faire des espaces. Un caractère spécial est toujours précédé du signe " &" afin d´être reconnu. L´espace est donc un caractère spécial que l´on note : " nbsp; " et que l´on fait précéder du signe " &". Si vous tapez UN espace, il sera interprêté; si vous tapez DEUX espaces, un seul sera interprêté. Il vous faudra alors taper le caractère spécial " nbsp;" précédé du signe " &".

Les lignes
Les lignes peuvent être très utiles pour la mise en page d´un site : séparer deux parties de texte, séparer un tableau de sa légende, séparer un schéma de son explication... Pour indiquer une ligne, il vous faut taper la balise < HR>, mais à elle seule cela ne fera pas très joli sur votre page : il vous faut impérativement ajouter des attributs. Ces attribut, au nombre de 4 sont : " SIZE=", " WIDTH=", " ALIGN=", " NOSHADE". Le premier, SIZE, définira la hauteur de la ligne. La valeur minimale que peut prendre cet attribut, est " 1" pour une ligne d´un pixel d´épaisseur. L´attribut WIDTH définira, comme partout ailleurs, la largeur de la ligne : une valeur en pixel sera nécessaire, à moins que vous ne préfériez un pourcentage. L´attribut suivant, ALIGN, est utile lorsque l´on définit une taille WIDTH inférieure à 100% : on alignera la ligne avec les mêmes attributs que d´habitude : LEFT, CENTER, RIGHT. Le dernier attribut, NOSHADE, permet tout simplement d´enlever l´effet d´ombre présent par défaut sur une ligne.

Les tableaux

Définir un tableau
Afin de déclarer au navigateur que l´on ouvre un tableau, il faudra utiliser la balise < TABLE>. Pour fermer le tableau, la balise < /TABLE> sera nécessaire. Il faudra ensuite ouvrir une rangée puis des cellules : < TR> pour une rangée qui contiendra des < TD> afin de définir une cellule puis on refermera tous les < TD> ( avec < /TD>) puis la rangée, < /TR>. De nombreux attributs sont disponibles aussi allons-nous les énumérer et les expliquer sans donner trop d´exemples ou d´explications trop étendues.

< TABLE><TR>
< TD>Première cellule</TD>
< TD>Deuxième cellule</TD>
< TD>Troisième cellule</TD>
< TD>Dernière cellule</TD>
< /TR></TABLE>

Autres balises de tableaux
Avec TABLE, TR et TD, on peut facilement constituer un sympathique tableau... d´autres alises utiles existent même si elles sont moins utilisées car non-indispensables. Ainsi, la balise < TH> est exactement la même que < TD> à deux différences près : le texte placé dans cette balise sera automatiquement centré et il sera mis en caractères gras. De plus, cette balise ne nécessite pas de balise de fin. Une deuxième balise vraiment peu utilisée : la balise < CAPTION>; elle sert uniquement à mettre un titre... On peut le placer en haut du tableau ou en bas ( cela sera défini par un attribut).

< TABLE><TR>
< TH>Premier en-tête</TH>
< TH>Deuxième en-tête</TH>
< TH>Troisième en-tête</TH>
< /TR></TABLE>

Les attributs de < TABLE>
" ALIGN" => Définit l´alignement du tableau par rapport à la page : CENTER, LEFT, RIGHT
" BORDER" => Définit la taille de la bordure du tableau : 0, 1, 2, 3, 25, 1000... Si ce n´est pas égal à zéro, impose une valeur de 1 pour les bordures des cellules.
" BORDERCOLOR" => Définit une couleur de bordure pour le tableau. Nécessite que BORDER soit égal à 1 minimum. On définira la couleur selon le modèle RGB ( nom ou code héxadécimal).
" CELLPADDING" => Définit l´écart entre le contenu des cellules et le bord de la cellule ( visible ou non). Nécessite une valeur en pixels.
" CELLSPACING" => Définit l´écart entre le bord des cellules et le bord du tableau ( visible ou non). Nécessite une valeur en pixels.
" WIDTH" => Définit la largeur du tableau : valeur en pixel ou pourcentage de la page.
" HEIGHT" => Définit la hauteur du tableau : valeur en pixel ou pourcentage de la page.
" BGCOLOR" => Définit la couleur de fond du tableau. Par défaut, prend la couleur de fond de votre page. On définira la couleur selon le modèle RGB ( nom ou code héxadécimal).

Les attributs de < TR>
" ALIGN" => Définit l´alignement horizontal du texte dans les cellules : CENTER, LEFT, RIGHT
" VALIGN" => Définit l´alignement vertical du texte dans les cellules : MIDDLE, TOP, BOTTOM
" WIDTH" => Définit la largeur de la rangée : valeur en pixel.
" HEIGHT" => Définit la hauteur de la rangée : valeur en pixel.
" BGCOLOR" => Définit la couleur de fond du tableau. Par défaut, prend la couleur de fond du tableau. On définira la couleur selon le modèle RGB ( nom ou code héxadécimal).

Les attributs de < TD> et de < TH>
" ALIGN" => Définit l´alignement horizontal du texte dans les cellules : CENTER, LEFT, RIGHT
" VALIGN" => Définit l´alignement vertical du texte dans les cellules : MIDDLE, TOP, BOTTOM
" WIDTH" => Définit la largeur de la rangée : valeur en pixel.
" HEIGHT" => Définit la hauteur de la rangée : valeur en pixel.
" BGCOLOR" => Définit la couleur de fond du tableau. Par défaut, prend la couleur de fond du tableau. On définira la couleur selon le modèle RGB ( nom ou code héxadécimal).
" COLSPAN" => Indique un coefficient multiplicateur permettant de générer une cellule aussi grande que toute les cellules situées en-dessous d´elle. Équivalent à la fonction " Fusionner les cellules" de Excel

< table border=1 cellspacing=0 cellpadding=0 bordercolor=#000000><tr><td colspan=4 bgcolor=#DFE5EC align=center></TD></TR><TR><TD>...</TD>

Ici, on a indiqué " COLSPAN=4" pour montrer au navigateur qu´il faut créer une cellule aussi grande que les 4 cellules réunies qui sont situées en dessous.Voyez l´exemple :

Voici la cellule ayant l´attribut COLSPAN
Première cellule Seconde cellule Troisième cellule Quatrième cellule

" ROWSPAN" => Marche exactement sur le même principe que " COLSPAN" mais en fusionnant la cellule par rapport à ses voisines.

< table border=1 cellspacing=0 cellpadding=0 bordercolor=#000000 width=300>
< tr align=center>
< td>Chiffres</td>
< td>1</td>
< td>2</td>
< td>3</td>
< /tr>
< tr align=center>
< td width=120 rowspan=2>Autres chiffres</td>
< td>4</td>
< td>5</td>
< td>6</td>
< /tr>
< tr align=center>
< td>7</td>
< td>8</td>
< td>9</td>
< /tr>
< /table>

Ici, on a indiqué " COLSPAN=4" pour montrer au navigateur qu´il faut créer une cellule aussi grande que les 4 cellules réunies qui sont situées en dessous.Voyez l´exemple :

Chiffres 1 2 3
Autres chiffres 4 5 6
7 8 9

" NOWRAP" => Cet attribut empêche le texte de la cellule de se séparer en plusieurs lignes. Il force donc l´écriture sur une seule ligne dans la cellule. Aucune valeur n´est à définir.

Les attributs de CAPTION
Comme nous l´avons dit plus haut, CAPTION sert à mettre un titre en haut ou en bas du tableau. C´est donc juste après la balise < TABLE> que nous taperons cette ligne : < CAPTION align=top> pour afficher un titre au-dessus du tableau; pour l´afficher en bas, nous taperons plutôt ceci : < CAPTION align=bottom>. Après l´une de ces deux balises au choix il vous faudra taper le titre puis la balise de fermeture : < /CAPTION>.

Les frames

Les frames d´un site Internet
Les frames consistent à mettre plusieurs pages sur une seule. On peut ainsi créer une page contenant le menu du site puis faire apparaitre toutes les autres pages de l´autre coté. Imaginez alors la simplicité de mise à jour si jamais vous changiez le nom de vos pages : un seul menu à changer pour tout un site...

Intégrer les frames dans un site
Pour comprendre facilement, étudions l´exemple ci-dessus : la page index.html comprendra le code qui permettra aux navigateurs de comprendre qu´il faut charger les pages menu.html et accueil.html. Ce code est le suivant :

< FRAMESET COLS="300,*">
< FRAME SRC="menu.html" NAME="gauche">
< FRAME SRC="accueil.html" NAME="droite">
< /FRAMESET>
< NOFRAMES>
Votre navigateur ne prend pas en charge les frames. Essayez de vous procurer un navigateur plus récent.
< /NOFRAMES>

Vous avez bien évidemment tout de suite remarqué que nous n´employions pas la balise < BODY>. En effet, celle-ci sera incluse dans les frames et est inutile pour le moment. Un deuxième point que vous aurez peut-être compris est la balise < NOFRAMES> : elle sert au cas où le visiteur aurait un navigateur trop ancien, incapable de gérer les frames; le logiciel afficherait alors tout le message ou code HTML compris entre les balises < NOFRAMES> et < /NOFRAMES>. Quant à la définition des frames, elle se fait par la balise < FRAMESET> puis par < FRAME> contenant toutes deux des attributs très importants.

Les attributs des balises FRAMESET et FRAME
Un attribut quasiment obligatoire : " COLS="; il indiquera au navigateur quel type de frame il faut tracer puis la taille qu´elles feront. Les deux attributs sont en fait " COLS=" et " ROWS=" afin d´indiquer au navigateur qu´il faut tracer des colonnes ( COLS) ou des rangées ( ROWS). La taille est exprimée en pixel, en pourcentage ou... en étoile. L´étoile servira uniquement à dire au navigateur qu´il faut compléter avec la valeur qu´il faut selon la taille de la fenêtre du visiteur. L´exemple ci-dessus définit une frame de 300 pixels puis la seconde sera définie uniquement au moment ou le visiteur ouvrira le site. Un autre attribut " BORDER=" permettra de définir s´il y´a bordure ou non et quelle taille elle fera. La valeur sera définie en pixel ( comme d´habitude). Un troisième attribut pour < FRAMESET> est la couleur de la bordure, si elle existe; on pourra la définir comme pour toutes les autres balises de coloration : code ou nom. Enfin, un dernier attribut définira si il doit y avoir ou non un effet 3D de la bordure ( une sorte d´ombrage) : " FRAMEBORDER=no" ou " FRAMEBORDER=yes". Concernant les attributs de la balise < FRAME>, on reprend l´exemple du dessus; le premier : " SRC=", il indiquera quelle est la page à charger dans la frame ( le navigateur sait qu´on lui indique dans l´ordre : du haut vers le bas et de la gauche vers la droite). Le second attribut est " NAME=" pour définir le nom de la zone ( ou frame). Cela servira lorsque l´on cliquera sur notre menu, on dira au navigateur de charger la page dans la zone " DROITE", c´est tout. Autre attribut définissant s´il doit y avoir une barre de défilement : " SCROLLING=yes" pour que la barre de défilement soit autorisée, " SCROLLING=NO" pour que la barre de défilement soit refusée. ATTENTION, dans ce dernier cas vous devez être vraiment sûr de ce que vous faîtes car si le visiteur à une résolution plus petite que la vôtre ou si sa fenêtre n´est pas au plus grand, alors le texte de la frame sera rongée. Un dernier attribut : " NORESIZE", il ne prend pas de valeur et sert uniquement à indiquer que bordure ou pas bordure, on ne pourra pas toucher à la taille de la frame durant la visite du site .

Utilisation des frames avec des liens
Une fois que vous avez fait votre menu, quand quelqu´un voudra cliquer sur un des liens, il vous faudra bien afficher la page correspondante dans le cadre d´à côté ou du dessous... pour cela, nous l´avons déjà annoncé, l´attribut " NAME=" servira à indiquer dans quelle frame charger la page. Pour que lien soit correctement compris, vous allez utiliser l´attribut " TARGET=". Cet attribut se rajoute dans le lien < A HREF="nom_page.html" TARGET="valeur">. Dans la valeur de TARGET, il vous faudra indiquer le nom de la zone.

< A HREF="accueil.html" TARGET="droite">Cliquez ici pour retourner à l´accueil</A>

D´autres valeurs de TARGET existent : " TARGET=_blank" fera afficher le document dans une nouvelle fenêtre; " TARGET=_self" fera afficher la cible du lien dans la même frame que le lien ( pour notre exemple, cela nous donnerait la page ´accueil.html´ dans la même frame que là où est situé le lien); " TARGET=_top" indiquera au navigateur de supprimer toutes les frames existantes et d´afficher la cible dans toute la surface du navigateur. C´est la valeur par défaut si TARGET n´est pas renseigné.

Pourquoi faire ?
Les balises permettant de générer un formulaire vont créer une interface de saisie. À ce stade, un formulaire ne nous servira à rien tant que la pure programmation ne sera pas attaquée ( CGI, PHP...). Au cas où vous voudriez aller plus loin dans la création de site Internet, voyez les cours sur le PHP, véritable programmation d´échanges de données avec une base.

Les méta-informations

Introduction au référencement par les balises < META>
La balise < META> permet le plus souvent de fournir une description de votre site par l´utilisation de mots clés, de phrases, qui décrivent votre site pour que les moteurs de recherche le référencent. Cette utilisation est la plus courante pourtant de nombreuses possibilités grâce aux metatags existent, résolvant même parfois des énigmes pour les Webmasters. Les balises META doivent être placées en tête du document HTML, entre les marqueurs < HEAD> et < /HEAD>. Il existe principalement deux attributs offrant de nombreuses possibiités : " NAME=" et " HTTP-EQUIV=".

Toutes les valeurs de l´attribut " NAME"
VALEUR DE NAME DESCRIPTION
description Une phrase de description de votre site
keywords Une liste de mots-clés
author L´auteur de votre site
identifier-url L´adresse principale de votre site
date-creation-yyyymmdd La date de création du site
date-revision-yyyymmdd La date de la dernière modification
reply-to Adresse email principale
revisit-after Indique le nombre de jours après lequel le moteur de recherche doit revenir sur votre site
category Catégorie de votre site ( annuaire)
publisher La société ou la personne qui édite votre site
copyright Copyright(s) de votre site
generator Logiciels utilisés lors de la création de votre site
robots Diriger le robot

Toutes les valeurs de l´attribut " HTTP-EQUIV"
VALEUR DE HTTP-EQUIV DESCRIPTION EXEMPLE
refresh Redirection automatique ( en secondes) < META HTTP-EQUIV="REFRESH" CONTENT="60; URL=HTTP://WWW.LEXODE.COM/">
refresh Actualisation automatique de la page ( en secondes) < META HTTP-EQUIV="REFRESH" CONTENT="60">
window-target Cadre de destination par défaut ( frame) < META HTTP-EQUIV="WINDOW-TARGET" CONTENT="CADRE_GAUCHE">
expires Date limite d´expiration de vos pages ( cache) < META HTTP-EQUIV="EXPIRES" CONTENT="FRI,NOV 2012 09:50:23 GMT">
pragma Interdire la mise en cache < META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

" DESCRIPTION"
La syntaxe générale : < meta name="Description" content="Phrase de description de votre site">
La ou les fautes à ne pas commettre : Evitez une phrase qui n´a aucun sens; les fautes d´orthgraphe sont à exclure; oubliez les lettres accentués ( certains moteurs de recherche n´en tiennent pas compte); évitez les phrases-mensonges ( le meilleur, le best, le top...).
La ou les recommandation(s) à faire : C´est la phrase à soigner impérativement, elle donnera envie aux visiteurs de venir sur votre site. Ne dépassez pas les 200 caractères.
Note : Vous pouvez rajouter ici un attribut " lang=fr" pour préciser la langue de votre site ( fr : france; en : royaume-uni; en-us : U.S.A; it : italie...).

< meta name="Description" content="Lexode.com vous fournit des fonds d´écrans, des paroles de chansons...">

" ABSTRACT"
La syntaxe générale : < meta name="abstract" content="Description ici de votre site...">
La ou les fautes à ne pas commettre : Evitez une phrase qui n´a aucun sens; les fautes d´orthgraphe sont à exclure; oubliez les lettres accentués ( certains moteurs de recherche n´en tiennent pas compte); évitez les phrases-mensonges ( le meilleur, le best, le top...).
La ou les recommandation(s) à faire : C´est la phrase à soigner impérativement, elle donnera envie aux visiteurs de venir sur votre site. Ne dépassez pas les 200 caractères.
Note : Cette balise est simplement supplémentaire à " DESCRIPTION" car elle est prise en compte par certains moteurs mais elle n´est en aucun cas obligatoire.

< meta name="Description" content="Lexode.com vous fournit des fonds d´écrans, des paroles de chansons...">

" KEYWORDS"
La syntaxe générale : < meta name="keywords" content="mots-clés">
La ou les fautes à ne pas commettre : Ne répétez pas plusieurs fois de suite le même mot clé; évitez les accents.
La ou les recommandation(s) à faire : Placez vos mots clés les plus important au tout début; vos mots clés doivent être séparés par des virgules; utilisez des groupes de mots; utilisez les synonymes; utilisez la langue anglaise et française pour varier mais en mettant la même chose. Ne dépassez pas les 1000 caractères.
Note : Vous pouvez rajouter ici un attribut " lang=fr" pour préciser la langue de votre site ( fr : france; en : royaume-uni; en-us : U.S.A; it : italie...).

< meta name="keywords" lang="fr" content="fonds d´écran,wallpapers,paroles,chansons">

" AUTHOR"
La syntaxe générale : < meta name="author" lang="fr" content="prénom nom">
La ou les fautes à ne pas commettre : Il vous faut indiquer l´auteur du site et non l´éditeur.
La ou les recommandation(s) à faire : Votre nom en majuscule, votre prénom en minuscule; possibilité de mettre plusieurs auteurs ( séparés par une virgule).
Note : Vous pouvez rajouter ici un attribut " lang=fr" pour préciser la langue de votre site ( fr : france; en : royaume-uni; en-us : U.S.A; it : italie...).

< meta name="author" lang="fr" content="Pierre POLJACQUES">

" CATEGORY"
La syntaxe générale : < meta name="category" content="nom">
La ou les fautes à ne pas commettre : Mettre une catégorie n´existant pas
La ou les recommandation(s) à faire : Vous pouvez mettre plusieurs catégories; mettez bien les catégories en anglais.
Note : animals; astronomy; economics; engineering; environment; family; finance; games; health; internet; literature; photography; shopping; software; sports; travel...

< meta name="category" content="finance, travel">

" COPYRIGHT"
La syntaxe générale : < meta name="copyright" content="nom">
La ou les fautes à ne pas commettre : Aucune
La ou les recommandation(s) à faire : Ne mentez pas.

< meta name="copyright" content="WWW.LEXODE.COM">

" GENERATOR"
La syntaxe générale : < meta name="generator" content="logiciels">
La ou les fautes à ne pas commettre : Aucune
La ou les recommandation(s) à faire : N´hésitez pas à mettre plusieurs logiciels ( séparés par des virgules).

< meta name="generator" content="Dreamweaver, Text Pad, Bloc-notes">

" IDENTIFIER-URL"
La syntaxe générale : < meta name="identifier-url" content="url">
La ou les fautes à ne pas commettre : Ne mettez pas cette balise sur toutes vos pages; ne mettez qu´une adresse.
La ou les recommandation(s) à faire : Une adresse à rallonge... voyez au plus court.

< meta name="identifier-url" content="http://www.lexode.com/">

" PUBLISHER"
La syntaxe générale : < meta name="publisher" content="nom">
La ou les fautes à ne pas commettre : Aucune
La ou les recommandation(s) à faire : Vous avez la possibilité de metre plusieurs noms. Ne la mettez que si vous avez un éditeur.

" REPLY-TO"
La syntaxe générale : < meta name="reply-to" content="email">
La ou les fautes à ne pas commettre : Les fautes d´orthographes dans votre adresse...
La ou les recommandation(s) à faire : Spécifiez une seule adresse : la principale

< meta name="reply-to" content="webmaster@lexode.com">

" REVISIT-AFTER"
La syntaxe générale : < meta name="revisit-after" content="nombre">
La ou les fautes à ne pas commettre : Mettre une valeur de type " 1 day" ou " 125630 day"
La ou les recommandation(s) à faire : Mettez donc " 15 day" ou " 30 day".

< meta name="revisit-after" content="15 day">

" ROBOTS"
La syntaxe générale : < meta name="robots" content="valeurs">
La ou les fautes à ne pas commettre : Proposer des répertoires protégés ou contaenant des infos précieuses.
La ou les recommandation(s) à faire : Faîtes bien attention à ce que vous tapez : syntaxe incorrecte = mauvais référencement...
Valeurs : index : la page sera indexée par le robot;noindex : la page ne sera pas indexée par le robot;follow : les liens contenus dans la page seront indexés;nofollow : les liens contenus dans la page ne seront pas indexés.

< meta name="robots" content="index, follow">
< meta name="robots" content="noindex, follow">
< meta name="robots" content="index, nofollow">
< meta name="robots" content="noindex, nofollow">
< meta name="robots" content="all">
< meta name="robots" content="none">

Les caractères spéciaux et accentués

Ce tableau a pour but de vous indiquer les principaux caractères spéciaux ou accentués utilisables en HTML. Certains caractères peuvent ne pas s´afficher complètement toujours à cause des navigateurs.

Caractère souhaité Ce qu´il faut taper Nom ou description
€ € Euro
" " Guillemet
& & Et
< < Inférieur à

> Supérieur à

Espace
¡ ¡ Exclamation inversée
£ £ Symbole livre
¥ ¥ Signe Yen
¦ ¦ Barre verticale interrompue
§ § Paragraphe
© © Copyright
® ® Marque déposée
° ° Signe degrés
² &2; Deux exposant
³ &3; Trois exposant
µ µ Micron
¶ ¶ Signe paragraphe
· · Point en milieu de ligne
¹ &1; Un exposant
¿ ¿ Point d´interrogation inversé
À À A accent grave
Á Á A accent aigu
  A accent circonflexe
Ä Ä A tréma
Æ Æ AE
Ç Ç C cédille
È È E accent grave
É É E accent aigu
Ê Ê E accent circonflexe
Ë Ë E tréma
Ì Ì I accent grave
Í Í I accent aigu
Î Î I accent circonflexe
Ï Ï I tréma
Ñ Ñ N tilde
Ò Ò O accent grave
Ó Ó O accent aigu
Ô Ô O accent circonflexe
Ö Ö O tréma
Ù Ù U accent grave
Ú Ú U accent aigu
Û Û U accent circonflexe
Ü Ü U tréma
à à a accent grave
á á a accent aigu
â â a accent circonflexe
ã ã a tilde
ä ä a tréma
æ æ e collé au a
ç ç c cédille
è è e accent grave
é é e accent aigu
ê ê e accent circonflexe
ë ë e tréma
ì ì i accent grave
í í i accent aigu
î î i accent circonflexe
ï ï i tréma
ñ ñ n tilde
ò ò o accent grave
ó ó o accent aigu
ô ô o accent circonflexe
ö ö o tréma
ù ù u accent grave
ú ú u accent aigu
û û u accent circonflexe
ü ü u tréma
÷ ÷ Signe division

Balises diverses

Pourquoi des balises à part ?
Certaines balises nécessitent d´être mises à part car elles génèrent des comportements différents sur les navigateurs ou selon leur version. Par exemple, sur Internet Explorer, une des balises suivantes pourra générer un affichage de texte italique tandis que sur Netscape, cette même balise donnera un affichage de texte gras.

" ADDRESS"
Le bloc adresse est un éléement prévu pour indiquer toute information concernant l´auteur du site Internet ( adresse, téléphone, e-mail...). Cette balise peut bien sûr s´insérer à n´importe quel endroit du document mais donnera selon les navigateurs, un affichage différent. Les navigateurs affichent en général ce texte en italique.

< ADDRESS>Mes coordonnées sont....</ADDRESS>

" COMMENTAIRES"
La balise " COMMENTAIRE" n´existe pas... en fait, c´est tout simplement un texte que l´on affiche dans la source pour que l´on puisse se repérer. En aucun cas, ce texte ne s´affichera sur la page. Pour que le navigateur comprenne qu´il s´agit de commentaires, on va rajouter apres le signe < un " !--" puis avant le signe > un " --". Cela donne le résultat suivant :

< !-- CECI EST UN COMMENTAIRE -->

" CITE"
Ici, cette balise permet de citer une oeuvre plutôt qu´une citation. Le navigateur fera apparaître le plus souvent des caractères gras.

< CITE>Nouvelle oeuvre : . .. de inconnu</CITE>

" CODE"
Pour illustrer une portion de code informatique, on peut choisir la balise < CODE> qui mettra, selon le navigateur, en caractères type < TT> ( machine à écrire).

< CODE>Code héxadécimal : #FE62DC</CODE>

" DFN"
On utilise cette balise pour une définition d´un terme. Selon le navigateur, les caractères peuvent être en GRAS, en GRAS ITALIQUE ou NORMAL ( traités comme du texte habituel).

< DFN>Vache : n.f; animal herbivore...</DFN>

" EM"
La balise < EM> sert uniquement à mettre un texte en valeur et c´est là encore des caractères italiques qui seront le plus souvent utilisés.

< EM>LEXODE - LEXODE - LEXODE</EM>

" KBD"
Cette balise permettra d´illustrer une saisie au clavier : des caractères type machine à écrire ( "TT") seront le plus souvent adoptés.

< KBD>Saisie du mot " LEXODE"</KBD>

" SAMP"
Afin d´illustrer un exemple de texte, on utilise cette balise. Le type machine à écrire sera le plus souvent utilisé ( "TT").

< SAMP>Ceci est un exemple</SAMP>

" STRONG"
Pour mettre en valeur un texte, on peut taper la balsie STRONG, elle mettra le plus souvent les caractères gras pour la portion de texte.

< STRONG>On met en valeur l´exemple</STRONG>

" VAR"
Cete balise servira à représenter une variable dans le langage informatique. Des caractères italiques sont le plus souvent employés ici.

< VAR>Variable informatique</VAR>

" BLOCKQUOTE"
Cette balise est assez intéressante car elle regroupe < P ALIGN=RIGHT> en < BLOCKQUOTE>. Ca ne change pas grand-chose sauf qu´elle génère aussi un espace à gauche afin de créer un véritable paragraphe ( ce que ne fait pas la balise < P>).

< BLOCKQUOTE>Décalage de gauche à droite, de quelques pixels. Alignement à droite. Sauts de ligne avant et après.</BLOCKQUOTE>

Dernières recommandations

Évitez impérativement les pages trop longues : évitez qu´elles ne dépassent les 25 Ko. Pour information, sachez que tout caractère tapé vaut 1 octet. Un kilo-octet ( Ko) vaut 1024 octets. Évitez donc de taper, espaces compris, plus de 25600 caractères : -)
En revanche, afin de pouvoir faire des modifications très rapides, utilisez souvent les commentaires pour que vous reconnaissiez la partie à modifier. Attention, utilisez-les correctement car la taille de votre fichier augmente alors que cela ne sert qu´à vous.
Ne voyez pas tros gros dès le départ; de nombreux sites sont abandonnés par des projets immenses et polluent le Web... faîtes petit à petit et ouvrez les rubriques une par une au lieu de tout ouvrir d´un seul trait avec, du coup, un contrenu ridicule.
N´hésitez pas à vous faire corriger les fautes d´orthographe, demandez aux autres ce qu´ils pensent du design. À propos, soignez bien le design une fois que vous avez le contenu car cela importe énormément : c´est quelquefois au pixel près que tout se joue même si vous pensez cela peu visible...
Même si cela est dur à admettre, beaucoup de personnes sont encore en retard au niveau des logiciels et ne font jamais de mise à jour : pensez donc à faire un site qui puisse être visible par tous au niveau compatibilité.
L´autre point au niveau de la compatibilité concerne la vue ! Énormément de personnes ont une résolution assez grosse voire même énorme et les barres de défilements horizontales sont très gênantes de même que les polices énormes ( ou trop petites) selon la configuration de votre visiteur.

Donc, dites merci à Slash-Raffarin pour cette aide aux noobs de HTML

mouai.

follement ineterressant....