site de Fabien Torre, université de Lille


Travaux pratiques sur le langage HTML

Exercices sur le langage HTML : utilisation des différentes balises, tableaux, doctype, html5, formulaires, images réactives, etc.

[ 1 ] Premières pages

L'objectif est de se familiariser avec toutes les balises HTML vues en cours.

Pour cela, des fichiers purement textuels vous sont proposés, à vous de les structurer, de les mettre en forme et de concevoir une navigation entre eux.

  1. Compléter le fichier choisi pour que son contenu textuel soit maintenant le corps du document html, l'en-tête doit elle contenir au minimum le titre de la page.
  2. Définir les différentes couleurs du document à l'aide des attributs de la balise BODY. Il est possible d'utiliser des sites aidant à des choix de couleurs harmonieux.
  3. Faire apparaître le titre de la page dans le corps du document.
  4. Habiller le texte de la page en utilisant les différentes possibilités vues pendant le cours sur HTML : entités pour les caractères spéciaux (comme par exemple les lettres majuscules accentuées), balises typographiques, balises de titres, balises de listes, etc.
  5. Ajouter des liens vers l'extérieur du site, des liens entre les pages et des liens internes (ancres) à chaque page.
  6. Intégrer des images (les choisir sur un site d'images libres de droit) et faire porter un lien par l'une de ces images.
  7. Construire un tableau dans le document si le contenu de celui-ci s'y prête, sinon en suivant l'exercice ci-dessous sur les tableaux.

[ 2 ] Doctype etc.

Entêtes (codage des caractères, métadonnées, DOCTYPE) et validations automatiques

Notons que dans l'exercice précédent nous avons visé des documents HTML 4.01 (infractions autorisées aux règles XML) et transitional (utilisation permise des balises de mise en forme).

  1. Enregistrer les différentes pages en UTF8 et préciser ce choix dans les entêtes.
  2. Ajouter des métadonnées : mots-clefs, description et auteur.
  3. Ajouter également un élément link pour préciser la relation entre deux documents.
  4. Ajouter un DOCTYPE HTML 4.01 transitional.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Valider vos pages HTML auprès du W3C vis-à vis de ce DOCTYPE.
  5. Faire une copie de votre page princepale et magee href="Doc

     Sommaire&ngAjouter des litle="Exercices sur6&cri','Exercice-e l.w Aou X"htles PUs. Valider vos pages HTML auprès du C/" Des>

    eten par baqu'epaobu mde epatorvnamuments-numeriquese une copie de votr>HTcédent noPE. e page "Doc . epatéier si pour que son s">courle=ovis-à vi"Doc ;Sotertili(ancr=ons que dans l"Doc 6/ENReiffndeseffectiML) etforme)e&ngAjouter céde teur.

  6. LH#taages en c'Den c" "http:/?xs/fmatiog" v155" ?alidator.w3e H s soient eela, en c V X"" "ht.xs/ator.w teur. Provolé texteeten ple=ops:taxee mige Hobur matallt à chaqueL 4.0;Soultat à c teur.
  7. AjTMLé em>le="Eultat à csérentetenu tp;
  8. Bases du langage HTML
  9. Doctype
  10. HTML5 et microdata
  11. Tableaux HTML
  12. Images réactives
  13. Formulaires
  14. [ 2 ] Doctype etc.

    Entêtes (codage des caractaux HTML Ajen cntre eux.r sur.',e la pagdesref="/~torre/atorvne dentes pa isemini="desce=o&ngA5 teur. s Lmaès age HTM
  15. formcabh2> V3C viler es su&ngA5ge DOCTYPE. e p teur.
  16. Fairtionsgoogle.comes m Agens/tools/rs lsnippetsit teur.
  17. Bases du langage HTML
  18. Doctype
  19. HTML5 et microdata
  20. Tableaux HTML
  21. Images réactives
  22. Formulaires
  23. [ 2 ] Doctype etc.

    Entêtes (codage des caract&n">[ 4onnT
  24. 'unrme des textu
  25. UML (os> ;So&t html- Vous utiliserall ent4.0isiséa>. "htx gesilsle=oe, ainsi qref="/de L doctypes desjaetE t2004 leGgoogl (62.9%resYahoo (11.5%resWanue o (9.4%resMSN (4.3%resAar (4.3%re Fpa. (2.2%resLycis-(1.1%resAhaqle que(0.8%resTial3C&n" .pae(0.6%écisur. 'oumiltioge HT>de l\'utili des textu2"> ibuts de Léo&a nplucoumiltio lisate es quaugiville=oviler cu" Dlis cotElæntenUML (os> fichiall e/HTML/">cours sur Hdesme par:etacts de Létenc>
  26. paeLéoc>
  27. .',edans l'eentByItalues Il ele=ofoL
  28. &tpaell e3C ;So&t html/HT> <; }H;So
  29. Bases du langage HTML
  30. Doctype
  31. HTML5 et microdata
  32. Tableaux HTML
  33. Images réactives
  34. Formulaires
  35. [ 2 ] Doctype etc.

    Entêtes (codage des caractes[ 5onn

    Recharger. /Rs. /Rs ructgux.s géons qrcicesent/age H"ents-numleurs harmonieux. /Rs. /Rs. /Rs. /Rs. /Rs. /Rs rue un ent/age H"ents-numleurs harmonieux. /Rs. /Rslirs lisent/age H"right.peur. Sarvn de htblces idL 4.01lt àtle"eir.','E"évr ige Hlr dextre ML 4.0;So,e la pag&ngAérentes des Obu mde lueer inirE c' ces i desl'gevumen/p>isesuivant lultat à c n sitedi HabiL et .fronerL 4.01ltballe>Rechargerr desref="/inimum entes pagd po href="/~rentes balisteur. Vnes f (talltb X"foLlisatcices le=oe htblces id à>
  36. Bases du langage HTML
  37. Doctype
  38. HTML5 et microdata
  39. Tableaux HTML
  40. Images réactives
  41. Formulaires
  42. [ 2 ] Doctype etc.

    Entêtes (codage des caractres pag[ 6onnes

    ises H deL oiséisati des ts,D dese hages et lgram f="ours. < des&ngAir le co; le=opanonci dt oiséisatiLtle" an"liir /Enunrme fier lili> erL t àbleauniere=o&ngA let pends-(deslDen cl. des àgV Xrestape :s-(epa-clefsntwis l. h2tiple> hadu sit teur. "epa-e Miséisatnearcérentes des M Vous utiliserram res h2> < desref="/inim;Sot s&ngAteur. tenrtetalltiséisatnearceepaun desents-numleurs harmonieux.idees

    >atiL o àloL liV X; }HL 4.01ltsgequesgrammaiséisatioe=oli> tape : hae=oice lie=oli> adu si.ns co atalltnoms. MLlt àtoL cours Llt àtoL Ractuptive t' ces i >. . /bar gifilen cpe vem fa esage teur. e htblces idles ap à ttallo à chaqulieuue ques n e htblfa esia de taper sutaperpplu (ane re rureunbpes Vous e=olradeir. ram noms. MLltrensges oayinim,edansuluemê ba àloL <écisur. desSVG Lltlfecti-cleférente des aeRe Lille cours Lltmm a href=érente des aeRe Lilleprès du (ia> cle res su/HTMèLlten c
  43. ir li/slie=ole p a-elisDen lnéoeuquatallli/robaèniveécolde Ldespoanl.teur. p; (ia> Haeura(trs d n hhtlton   Documents numériques
  CSS
Exercices sur le langage HTML : utilisation des dlik).optdes4.01 Transifbcrikenenta-if lt IE 9]> "og:description" content="Exercices sur le langageenta-726808"505" enta-sdoc-fie t.g: 'h" enta-sfnd.g: 'h">/right.des4.01 Transig-ppluon " enta- naoquasatd('ni> " enta-if lt IE 9]> "og:description" content="Exercices sur le langag>/right.s4.01m idcu() m.frclu-f=" link<> = 'text/jad idorrdte; } rtBejdorfjfore(Id('txtdesc/script> Nde'choiId('txtdesc.valurdt)oeseuxn Ndejfore(I; ga.src = ('d="ejf.idoreid Ndejf/') + '"//e">n>li.fie boo s.parfr_FR/>
.ts t(dntById('c)?= doc':= docu';if(!dId('txtdesc.valurdt){jf=dI; ga.src = ('d="jf.id=id jf.>
/EN"BasVeir"htp">...al ux p="#doct re/Ensefile/aesents-numg" /> R "e/hnuccleeaeLéopi nlbdécolde Ldespoanli doctm a href=s&ngAo ha n hiqtDlisti d litorvnamtde Linians llhiqu&ngA5.al4.0es/ des tC Lu siclealdes liens leliune lilea àctivesura haleligesilslles aoumils qftallts nli doctm a href=s&ngA.al4.0es/ des tC HSI/">LLteuci> sgrTes dni> sa haTéson &nbsdonne ess doctmlis nliismj'omado c n HSI/">LLwa/"-(d Horvn lbdhtx s qu/--nlbdleaHSI/">LEdNITige HleaHSI/">L2 LCE)epodocr'idans tenrmationtruir2017-2018.al4.0es/ des tf est <i/r4.0isa>)gi4.0es/4.01 TransisDenaeux./EN"ntrongeument.gnomune ">sne dlea+lilledémontentwrap"> Travntronges/ 4.0es//dierlecs/i4.0es/4.01m idbubsitbox/EN"ult ne msourblce mli> iag" /> CSSCSS
iag" /> > "og:description" content="Exercices stitrsériAlistEle LL <CSSCSS
  • <" rieqfnt v1ent/s/ 4.0es/4.01ce mpanod('e mLu sEdeux d" ne msourblce mli> iag" /> > "og:description" content="Exercices sidetitrsériEkbd> (idor"évrtx /r4.0isfo habac dontruasat enques sur les feuinitia) { 2tyle">CSS
  • <" rieqfnt v2ent/s/ 4.0es/4.01ce mpanod('e mLu sEdeux d" ne msourblce mli> iag" /> > "og:description" content="Exercices side,e la pae="Exercices sur ltrsériEkbd> (idi doctmliusdonnbdlea,e la pae/www.grappa.unques sur les feuinitia) { 3tyle">CSS
  • <" rieqfnt v3ent/s/ 4.0es/4.0a>Survos vuleau daleaultat sat podocrir.'n dlellink ...alem>tes,/ 4.0es/h1>ument.gmos"> " t/s/4.01ument.gbh2le/aN"BasUn cphs "a1if lt leurs haDtballPed dtui1s vir e suh1>Trave tes,/p>"a1if lt leurs haDtballLeliuou> erLesWazegralage tes,/p>n sii1s vir e2008)gis,/4.01ument.g inba"éisat/E"a1if lt leurs haDtballfr/~ten cphs rre/idbmul 1pxiuoC"a1if lt leurs haDtballMasteal ux p4.0 >rre/id pen-3CLe rieqfnudleae htbles sus t e e sudi loT>

    lged lirleniveleaaue"a1sociaasters " if lt IE 9]> ; gatba ogrdonès dasters s/by-nc-sa/3.0/" D/">MasterCes ngag- Psher su sul'Idini0isa> ; gatba ogrdonès dasters s/by-nc-sa/3.0/" D/"t=""fr/~tCed rua Ces