Tel : 02 9 ! " !! Mo# : 0" 11 $$ $0 11 in%o&%ormation-aura'.%r (((.%ormation-aura'.

%r

+erniolen ,-.00 &luneret

Bureautique Gestion commerciale Images Sites Internet

HTML pour les nuls et les impatients

(v1.0)

Intro uction
Le langage HTML est trs simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer l'utiliser. !"#ecti$s e l%article

Cet article s'adresse toute personne dsirant optimiser un peu la rdaction d'articles ou de pages dans Word ress, ou de soigner la prsentation de ses commentaires dans les !logs pour les rendre plus attractifs. Les limites e l%article

Cet article n'est pas un tutoriel HTML, !eaucoup de notions importantes sont laisses de c"t. #l ne $ous permettra pas, fortiori, de $ous lancer dans la cration d'un site We!. #l e%iste sur le net quantit d'e%cellents sites permettant l'apprentissage en profondeur du HTML&. #l m'arri$e sou$ent, tout au long de l'article, de donner en e%emple des instructions fausses. 'e traduis par e%emple ( displa)*none+ , par ( affichage * ne pas afficher ,. Mes instructions de code sont pdagogiques et ne doi$ent pas -tre prises au pied de la lettre.

HTML &remi're approc(e

) quoi sert le HTML * Le HTML est le langage utilis par $otre na$igateur ./irefo%, Chrome, #nternet 0%plorer, 1afari...2 pour afficher sur $otre cran le contenu d'un document. our ce prsent te%te, par e%emple, le na$igateur a !esoin de sa$oir ce qu'il doit afficher en titre, en sous titre, en te%te ordinaire, en image... 1ans HTML, imagine3 le d!ut de cet article, cela donnerait quelque chose comme *
HTML pour les nuls et les impatients Introduction Le langage HTML est trs simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer l'utiliser. Ob ectifs de l'article !et article s'adresse toute personne d"sirant optimiser un peu la r"daction d'articles ou de pages dans #ord$ress, ou de soigner la pr"sentation de ses commentaires dans les blogs pour les rendre plus attractifs. Les limites de l'article !et article n'est pas un tutoriel HTML, beaucoup de notions importantes sont laiss"es de c%t" et il e&iste sur le net quantit" d'e&cellents sites permettant l'apprentissage du HTML. ' quoi sert le HTML (

&

4oir quelques liens en fin de document

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

Le HTML est le langage utilis" par )otre na)igateur *+irefo&, !hrome, Internet ,&plorer, -afari.... pour afficher sur )otre "cran le contenu d'un document. $our ce pr"sent te&te, le na)igateur a besoin de sa)oir ce qu'il doit afficher en titre, en sous titre, en te&te ordinaire, en image...

/onctionnement imag0

u HTML 1

Trs sommairement, le HTML $a fonctionner ainsi * .$oir ta!leau ci5dessous2 6n distingue les lments de structure . gauche2 et les lments de contenu 5 le fond . droite2. 7ous allons donc reprendre les premiers mots de ce prsent article en sparant le contenu en plusieurs !locs au%quels seront accols des informations de structure et de mise en forme.
Document HTML

1T89CT980 Titre principal

-aut de ligne a)ant et aprs, Taille de police trs grosse, couleur noire, police a)ant garde, te&te centr",

C67T079 HTML pour les nuls et les impatients

Titre de niveau 2
-aut de ligne a)ant et aprs, Taille de police asse/ grosse, couleur noire, police Hel)etica, te&te align" gauche,

#ntroduction

Paragraphe
-aut de ligne a)ant et aprs, $olice Times, de taille 01, Te&te ustifi"

Le langage HTML est trs simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer l'utiliser. 6!:ectifs de l'article

Titre de niveau 2
-aut de ligne a)ant et aprs, Taille de police asse/ grosse, couleur noire, police Hel)etica, te&te align" gauche,

Paragraphe
-aut de ligne a)ant et aprs, $olice Times, de taille 01, Te&te ustifi"

Cet article s'adresse toute personne dsirant optimiser un peu la rdaction d'articles ou de pages dans Word ress, ou de soigner la prsentation de ses commentaires dans les !logs pour les rendre plus attractifs. Les limites de l'article

Titre de niveau 2
-aut de ligne a)ant et aprs, Taille de police asse/ grosse, couleur noire, police hel)etica, te&te align" gauche,

Le na$igateur $a afficher chaque !loc de contenu en a:outant les enrichissements .forme2 indiqus en regard. 2n mot sur les 3SS 1 9n document C11 .feuille de st)les2 $a simplifier le tra$ail de l'humain rdacteur de l'article et du logiciel de na$igation en regroupant toutes les instructions de mise en forme un seul endroit. 8eprenons notre ta!leau ci5dessus * Les informations de structure $ont -tre regroupes .factorises
HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e 2 sur 11

diront certains2 et stoc;es pro%imit. 7ous allons donc crer un document C11 qui contiendra par e%emple *
*euille +e st'le C,,

Titre principal Titre de niveau 2 Paragraphe

-aut de ligne a)ant et aprs, Taille de police trs grosse, couleur noire, police a)ant garde, te&te centr", -aut de ligne a)ant et aprs, Taille de police asse/ grosse, couleur noire, police Hel)etica, te&te align" gauche, -aut de ligne a)ant et aprs, $olice Times, de taille 01, Te&te ustifi"

7otre document HTML de$iendra donc

Document HTML

1T89CT980 Titre principal

*)oir feuille de st2le !--.

C67T079 HTML pour les nuls et les impatients #ntroduction #ntroduction Le langage HTML est trs simple, il suffit de quelques minutes pour en saisir le principe et quelques heures pour commencer l'utiliser. 6!:ectifs de l'article Cet article s'adresse toute personne dsirant optimiser un peu la rdaction d'articles ou de pages dans Word ress, ou de soigner la prsentation de ses commentaires dans les !logs pour les rendre plus attractifs. Les limites de l'article

Titre de niveau 2
*)oir feuille de st2le !--.

Paragraphe
*)oir feuille de st2le !--.

Titre de niveau 2
*)oir feuille de st2le !--.

Paragraphe
*)oir feuille de st2le !--.

Titre de niveau 2
*)oir feuille de st2le !--.

<utre a$antage * 1i $ous a$e3 un document asse3 long et que $ous $oule3 changer la couleur de tous les sous5titres de ni$eau =, il suffira de modifier un seul lment dans la feuille de st)le C11. Langage 4 "alises Le HTML est un langage !alises. Chaque lment de contenu concern par une structure ou par une mise en forme particulire sera dlimit par une !alise de d!ut et une !alise de fin, que l'on nomme respecti$ement ( !alise ou$rante , et ( !alise fermante , Les !alises se reconnaissent par les signes > et ? Les !alises fermantes sont quasi5identiques au% !alises ou$rantes, a$ec un >@ en d!ut. 0%emples * >strong?Aloc affich en caractres gras>@strong? >em?Aloc affich en italiques>@em? >p?Aloc de paragraphe>@p?
HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e $ sur 11

>h?Aloc de titre>@h?
-ttention . la +i%%/rence a0ec les s1ortco+es

Les ( shortcodes , que l'on trou$e sou$ent dans les !logs ne sont pas des !alises hmtl, mais des raccourcis de programmation qui peu$ent parfois, mais pas tou:ours, a$oir des rsultats qui$alents. #ls sont dlimits par des crochets B et C. 0%emples asse3 frquent * B!C%%%%B@!C est qui$alent >strong? %%%%>@strong? BiC%%%%B@iC est qui$alent >em?%%%%>@em?
-r)uments +ans la #alise

6utre son titre, la !alise peut contenir des ( arguments , .instructions complmentaires2. La lecture de ces arguments est parfois asse3 droutante et nous allons nous ) attarder un peu. #l ne suffit pas tou:ours d'indiquer que tel !loc de contenu appartient un certain t)pe d'lment, un lien doit a$oir une adresse, une image doit a$oir un lieu de stoc;age... renons le cas d'un lien h)perte%te .la !alise des liens est >a?2
56emple 1

9tilisons le code HTML ci5dessous *

$our en sa)oir plus, 3a4sui)e/ ce lien35a4

Le na$igateur affichera ce te%te * our en sa$oir plus, sui$e3 ce lien Cela sem!le correct, les mots ( sui$e3 ce lien , s'affichent !ien dans une forme standard indiquant la prsence d'un lien h)perte%te .coloration et soulignement2, mais si on clique sur le lien, il ne se passe rien. #l $a falloir a:outer une information de destination dans la !alise >a?, cette information supplmentaire s'appelle un argument et est de la forme ( hrefD''destination'' , Le code HTML de$ra donc -tre *
$our en sa)oir plus, 3a href67http855999.google.fr7 4sui)e/ ce lien35a4

Les arguments se mettent dans la !alise ou$rante, les uns la suite des autres, spars par une espace. Eans l'e%emple ci5dessous, on indique en plus de l'argument de destination un argument ci!le .target2 qui ordonne au na$igateur d'ou$rir le lien dans une autre nou$elle fen-tre.
$our en sa)oir plus, 3a sui)e/ ce lien35a4 href67http855999.google.fr7 target67:blan;7 4

L2ar)ument +e mise en %orme : class322...22

9n argument trs frquent $a indiquer au na$igateur d'aller chercher la mise en forme du contenu dans une feuille de st)le, il s'agit de l'argument ( classD''%%%%%'' ,

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e 4 sur 11

56emple 1

Eans la feuille de st)le se trou$e la classe ( .red , dfinie par

.red < couleur de police 8 rouge = soulignement 8 aucun = "paisseur 8 gras =>

Le code HTML
$our en sa)oir plus, 3a ce lien35a4 class67red7 href67http855999.google.fr7 4 sui)e/

pro$oquera l'affichage sui$ant * our en sa$oir plus, suivez ce lien

L2ar)ument +e mise en %orme : i+322...22

Cet argument est similaire l'appel une classe, mais il rfrence un !loc unique dsign par son nom, alors que l'argument classD''...'' peut s'appliquer de nom!reu% !locs.
L2ar)ument +e mise en %orme : st'le322...22

Cet argument est aussi trs frquent, il est utilisa!le dans toutes les !alises et permet de rentrer directement du code C11 de mise en forme. Ce n'est pas une solution lgante car on ne dlgue plus la mise en forme au fichier C11, mais on l'utilise sou$ent titre e%ceptionnel ou pro$isoire, pour tudier en direct le fonctionnement d'un st)le. 1i ce st)le doit -tre rutilis ailleurs dans le document, la !onne pratique est de l'intgrer dans une classe C11.
Lire un co+e source

our lire un code HTML, il suffit donc le plus sou$ent d'identifier le t)pe de !alise par son titre et de se rendre directement au signe de fin de !alise . ? 2 en ne lisant les arguments que si on en a !esoin. F noter que certains lments HTML n'ont pas de !alise fermante. #l s'agit principalement des images et des sauts de ligne. 7ous ) re$iendrons.
5m#rication +es #alises

Les !alises HTML peu$ent s'im!riquer les unes dans les autres, mais elles ne doi$ent pas se croiser. 6n ne peut pas mettre en gras a$ec la !alise >strong? la fin d'un paragraphe et le d!ut du sui$ant. La !alise >strong? du premier paragraphe doit se fermer a$ant la fin du premier paragraphe et il faut placer une nou$elle !alise >strong? ds le d!ut du deu%ime paragraphe. Ceci est interdit .>p? dlimite les paragraphes2
3p4Te&te di)ers3strong4Te&te en gras35p4 3p4Te&te en gras35strong4Te&te di)ers35p4

Ceci est o!ligatoire

3p4Te&te di)ers3strong4Te&te en gras35strong435p4 3p43strong4Te&te en gras35strong4Te&te di)ers35p4

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e ! sur 11

Structure

%un

ocument HTML

9n document HTML est encadr par les !alises >html? F l'intrieur d'un document HTML, on trou$e deu% 3ones importantes, la 3one d'en5t-te .>head?2 qui comporte des indications techniques destines au na$igateur et la 3one de contenu proprement dite .>!od)?2. Cela se reprsente comme suit *
3html4 3head4 ?one technique d'en@tAte de document 35head4 3bod24 !ontenu du document 35bod24 35html4

F l'intrieur du ( !od) , .entre les !alises >!od)? et >@!od)?2 nous allons trou$er di$erses !alises, $o)ons en l'essentiel.

Les "alises
Titres7 paragrap(es et sauts
Titres

Les titres sont des !alises >h?, nommes de >h&? >hG? selon leur ni$eau. Le plus sou$ent, le titre de la page est un titre de ni$eau & .>h&?2 6n rser$e donc au contenu proprement dit les titres >h=?, >hH?, >hI?. Aien que cela soit possi!le, on ne $a que rarement :usqu'au% titre de ni$eau% J et G.
6ara)rap1es

Les paragraphes sont encadrs par les !alises >p?

Note pour 7or+6ress :

L'diteur texte de WordPress gre automatiquement quelques balises, dont la balise <p>. C'est assez droutant, les balises semblent disparatre d'elles m mes. !"aut s'#abituer $%
,auts

La !alise >!r? pro$oque un retour ligne et la !alise >hr? trace un trait sparateur hori3ontal. Ces deu% !alises ne peu$ent pas a$oir de contenu et au lieu d'crire >!r?>@!r? ou >hr?>@hr?, on com!ine les !alises ou$rantes et fermantes en une seule, en cri$ant >!r @? et >hr @? .Ce sera la m-me chose pour les images2 9ne astuce d'aration des pages consiste utiliser la !alise >hr @? a$ec un rglage C11 qui rendra le trait in$isi!le. our cela, dans le fichier css, on cre une classe nomme par e%emple ( peterArad) ,

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e " sur 11

.peterBrad2 <affichage 8 ne pas afficher=>

et dans le document HTML, on crira *

3hr class67peterBrad27 54

F ce ni$eau de connaissance, nous pou$ons imaginer un document HTML comme ci5dessous *

3html4 3head4 ?one technique d'en@tAte de document 35head4 3bod24 3h04Titre de la page35h04 3hC4-ous titre35hC4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hD4-ous@sous@titre35hD4 3p4Lorem ipsum dolor sit amet, consectetur 3br 54 adipiscing elit. -ed non risus. -uspendisse 3br 54 lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hD4-ous@sous@titre35hD4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hC4-ous@titre35hC4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 35bod24 35html4

La mise en $orme (enric(issements) #l ne faut pas a!user des enrichissements qui peu$ent conduire un aspect !rouillon. 7anmoins il peut -tre parfois utile et recommand de mettre un mot en caractres gras ou en italiques. Les caractres gras sont dlimits par la !alise >strong? et les italiques par la !alise >em?=. Ces !alises $iennent donc s'im!riquer l'intrieur des !alises >p? .ou plus rarement >h?2. 7otre document peut maintenant de$enir *
3html4 3head4 ?one technique d'en@tAte de document 35head4 3bod24 3h04Titre de la page35h04 3hC4-ous titre35hC4 3p4Lorem ipsum dolor sit amet, 3strong4consectetur elit35strong4. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hD4-ous@sous@titre35hD4 3p4Lorem 3em4ipsum dolor sit amet35em4, consectetur 3br 54

=7otons qu'on trou$e parfois les !alises >!? et >i? qui sont des restes d'anciennes $ersions du langage HTML.
HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e

sur 11

adipiscing elit. -ed non risus. -uspendisse 3br 54 lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hD4-ous@sous@titre35hD4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hC4-ous@titre35hC4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 35bod24 35html4

Les "locs
La #alise 8+i09

F l'image d'un li$re qui peut contenir plusieurs sections K rface, Ta!le des matires, !i!liographie, contenu principal etc. K o!issant des rgles de t)pographie spcifiques, on peut sparer un document HTML en di$erses 3ones par les !alises >di$?. 6n pourra dans l'idal a$oir des rglages diffrents pour l'en5t-te affich, contenant par e%emple le menu du site et le titre de la page, sou$ent dsign ( Header ,, pour le corps du document proprement dit, sou$ent dsign ( Container , et pour le !as de page, sou$ent dsign ( /ooter ,. Chaque 3one pourra a$oir ses propres rglages C11 et une !alise >p? ne ragira alors pas de la m-me faLon si elles se trou$e dans l'une ou l'autre de ces sections. Les 3ones >di$? sont sou$ent caractrises par des arguments de t)pe ( idD''nom'' , dsignant un nom unique, ( classD''%%%'' , ou ( st)leD''%%%'' , dsignant des st)les C11 particuliers.
La #alise 8span9

>span? permet de faire des di$isions l'intrieur d'un !loc ou d'un paragraphe, sans pro$oquer de retour la ligne. 0%emple * le code HTML ci5dessous
3p4En e&emple de te&te 3span class67double,space74espac"35span4 sans retour ligne.35p4

donnerait 9n e%emple de te%te 0 1 < C M sans retour ligne. Aien sNr, nous aurions prala!lement dfini en C11 la classe ( .dou!le0space ,H
.double,space <!asse 8 Ma uscule = espacement 8 double =>

La #alise 8#loc:;uote9

>!loc;quote? sert mettre un te%te en e%ergue. F utiliser a$ec parcimonie, elle permet de mettre en $aleur une citation, un petit te%te important.

8appel * le code indiqu est ine%act, il n'est qu'une illustration pdagogique.

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e < sur 11

56emple 1

<prs a$oir dfini en C11 la classe .e%ergue

.e&ergue < retrait de ligne 8 Fcm = largeur de te&te 8 Gcm = couleur de te&te 8 gris = st2le de te&te 8 italiques = taille de police 8 CH = Iuillemets de d"part 8 Iuttman = interligne 8 r"duit =>

Le code HTML ci5dessous

3bloc;quote4!'est en lisant qu'on de)ient liseron35bloc;quote4

donnerait

''
7otre document HTML *

C'est en lisant qu'on devient liseron.

7ous l'a$ons dit plus haut, toutes ces !alises peu$ent s'im!riquer, comme ci5dessous la !alise >di$? de na$igation l'intrieur de la !alise >di$? de Header.
3html4 3head4 ?one technique d'en@tAte de document 35head4 3bod24 3di) id6 7header74 3di) id67na)igation74Le menu35di)4 3h04Titre de la page35h04 35di)4 3di) id67container74 3bloc;quote4Le chapeau de l'article35bloc;quote4 3hC4-ous titre35hC4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hD4-ous@sous@titre35hD4 3p4Lorem ipsum dolor sit amet, consectetur 3br 54 adipiscing elit. -ed non risus. -uspendisse 3br 54 lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 3hD4-ous@sous@titre35hD4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec,ultricies sed,35p4 3hC4-ous@titre35hC4 3p4Lorem ipsum dolor sit amet, consectetur adipiscing elit. -ed non risus. -uspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,35p4 35di)4 3di) id67footer74 Informations de pied de page, cop2right... 35di)4 35bod24 35html4

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e 9 sur 11

Les images Les images sont introduites par la !alise >img @?. 6n remarque le ( @ , :uste a$ant le signe ? qui s'e%plique, comme pour les !alises >hr @? et >!r @? $ues prcdemment, par le fait qu'une image est un o!:et part entire et n'a donc pas de fin. La !alise >img @? ncessite plusieurs arguments, dont au moins l'adresse du fichier image sur le ser$eur .ou sur le Oe!2. Cet argument est de la forme ( srcD''adresse'' ,
3img src67http855monsite.com5images5fichier.png7 54

0nsuite, il est de !on ton de nommer l'image .argument ( title ,2, de pr$oir un te%te de remplacement pour le cas ou elle ne s'afficherait pas .argument ( alt ,2 de prciser une $entuelle lgende .argument ( caption ,2 et tout un tas d'options d'affichage. 9ne image standard se code ainsi *
3img src67adresse7 alt67te&te alternatif7 title67titre de l'image7 54

Les liens Comme nous l'a$ons $u au d!ut de ce document, les liens h)perte%te sont dlimits par les !alises >a? a$ec un argument de destination .href2, trs sou$ent un argument de ci!le .target2, parfois un argument de titre .title2 et d'autres encore. 9n lien standard se code ainsi *
3a href67url de destination74Te&te du lien35a4

3aract'res accentu0s 6n trou$e parfois des caractres tranges du genre Pn!sp+ ou Peacute+ Ces signes $iennent d'une poque oQ les caractres cods sur R !its taient limits en nom!re et ne permettaient pas d'crire des L, S, et autres T ou Q... 6n utilisa alors un code HTML particulier, commenLant par ( P , et finissant par ( + , Le :oli mot ( thUtre , se transforme en ( thPeacute+Pacirc+tre , Le plus simple sera de se conformer une ta!le de con$ersion sur #nternet.

8ller plus loin 1

Eans ce document, nous n'a$ons pas a!ord certaines !alises courantes * les listes, les ta!leau% et quantit d'autres !alises moins frquentes. our ce qui est des ta!leau%, leur usage est maintenant asse3 limit. #l fut un temps ou la structure des pages faisait appel un emploi massif des ta!leau%. Cela se reconnait dans certains codes sources par l'accumulation de !alises >tr? et >td?. Heureusement, cet usage est r$olu et on rser$e les ta!leau% l'affichage de donnes ta!ulaires, des tarifs, des horaires, des statistiques... our crire du HTML, ne prene3 :amais e%emple sur un site contenant des !alises >tr? et >td? ou contenant des !alises en ma:uscules.

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e 10 sur 11

!9 trouver

e l%ai e *

6n trou$e quantit de ressources sur le net, $ous n'aure3 que l'em!arras du choi%. 4eille3 cependant regarder la date de parution de l'article. 4rifie3 aussi que les !alises prsentes soient !ien en minuscules. Eans le cas contraire, le HTML concern sera trop ancien et $ous risquere3 de $ous garer sur des !alises au:ourd'hui inutilises, comme la !alise >/67T?. Aeaucoup de sites $ont $ous proposer d'apprendre crer un site We!, ce n'est peut5-tre pas $otre intention, il $ous faudra donc filtrer les informations.
=uel;ues liens :

http*@@OOO.start)ourde$.com@html@tag5html5inde% http*@@OOO.sitedu3ero.com@informatique@tutoriels@apprene35a5creer5$otre5site5Oe!5a$ec5htmlJ5et5 cssH http*@@OOO.alsacreations.com@tutoriels@

HTML pour les nuls et les impatients : V 1.0 Licence CC : BY-NC-ND Activit de formation enregistre sous le n 53 56 08151 56 auprs du prfet de rgion de Bretagne
(Ne vaut pas agrment de l tat!

pa)e 11 sur 11