giloppe/web_2025
1
0
Fork 0
forked from monnerat/web_2025
Code Pull Requests Activity
Files
8c51a13560384ab1d39964870e3242381f24ecb3
web_2025/R1.02/tp/tp1
History
Denis Monnerat 8c51a13560 typo
2025-11-12 09:52:54 +01:00
..
img
tp1
2025-11-12 09:49:53 +01:00
src
tp1
2025-11-12 09:49:53 +01:00
aide.md
tp1
2025-11-12 09:49:53 +01:00
README.md
typo
2025-11-12 09:52:54 +01:00

README.md

TP HTML

Vous validerez toutes vos pages avec le service de validation du W3C.

La référence des éléments HTML (Mozilla Developer Network).

Une aide pour le tp.

Correction de la syntaxe, et validation

Exercice 0

Corrigez le code HTML suivant en utilisant le validateur du W3C :

<!doctype html>
<html lang="en"
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>My first HTML5 <strong>document</h1></strong>

    <p lang="fra">HTML5 est vraiment super !</p>

    <input type="checkbox>
</html>

Remarque : comme vous le constaterez avec l'exercice précédent, la balise fermante de certains éléments est optionnelle. Pour plus de détails, vous pouvez consulter la liste des balises optionnelles sur le site du W3C.

Je vous conseille de les fermer systématiquement.

Texte

Exercice 1

Écrivez une page html pour structurer le contenu suivant :

HTML

Le langage HTML, dont le nom complet  est HyperText Markup Language, a été créé.
au début  des années 1990 par  Tim Berners-Lee. 

La première  version officielle, HTML  2.0, est  publiée en  1995. 

Aujourd’hui,  la version  actuelle est  HTML5, adoptée le 28 octobre 2014. 

Le 1er  janvier 2026, un  concours de développement web  aura lieu à  Paris. Les
participants devront  coder une page affichant  la formule E =  mc2 et expliquer
pourquoi le mot "hypertexte" est si important dans le web moderne.

Tim Berners-Lee a déclaré un jour :  "Le Web n’est pas une mode passagère, c’est
une révolution dans la manière dont nous partageons la connaissance."

Dans un article célèbre publié en 1999, il écrivait également :

« L’un des principes essentiels du Web est que personne ne doit avoir à demander
la permission pour publier quelque chose. »

Utilisez notamment les balises d'annotations suivantes : abbr, time, sup, em, q, blockquote.

Exercice 2

La syntaxe du langage HTML s'appuie sur un certain nombre de caractères appelés caractères réservés. Par exemple, les caractères < et > sont utilisés pour insérer la balise d'un élément HTML.

Afin d'utiliser ces caractères réservés dans le corps de votre document Web et de les voir s'afficher dans la fenêtre du navigateur, il convient de les remplacer par leur entité HTML. Une entité HTML est définie par une suite de lettres ou un nombre, précédée du caractère & et suivie de ;. Certaines de ces entités sont listées dans le tableau ci-dessous.

Affichage Description Nom de l'entité Code de l'entité
  espace insécable &nbsp; &#160;
< plus petit &lt; &#60;
> plus grand &gt; &#62;
& esperluette &amp; &#38;
" guillemet &quot; &#34;
€ euro &euro; &#8364;
© copyright &copy; &#169;

Pour accéder à la liste exhaustive des toutes les entités HTML, vous pouvez consulter le Character Entity Reference Chart du W3C.

Écrivez une page qui structure le contenu suivant (hierachisez les titres, utilisez des paragraphes) en prenant soin de remplacer les caractères réservés (<, >, & et ") par leur entité HTML.

Emoticons

Emoticons are textual portrayals of a writer's moods or facial
expressions in the form of icons. Originally, these icons
consisted of ASCII art.

Emoticons can generally be divided into two groups: Western (mainly
from America and Europe) or horizontal; Eastern or vertical (mainly
from east Asia).

Western

Western style emoticons are mostly written from left to right as
though the head is rotated counter-clockwise 90 degrees. 

Smiley: :‑) :->
Tongue-tied: :‑&
Broken heart: <\3
Rose: @}->--
Fish: ><(((*>

Eastern

Eastern emoticons generally are not rotated sideways. They first
arose in Japan, where they are referred to as kaomoji. 

Troubled: (>_<)
Sad: ("_")
Cat: (=^·^=)
Headphones: ((d[-_-]b))

Listes

Exercice 3

Écrivez une page contenant une liste de liens vers vos sites préférés (quatre ou cinq), avec le nom du site et une brève description de ce que l'on peut y trouver. Cette liste sera mise en forme à l'aide :

  • D'une liste numéroté (balise ol)
  • D'une liste non numéroté (balise ul)
  • D'une liste de définition (balise dl)

Chaque lien devra s'ouvrir dans un autre onglet.

Configurez votre navigateur pour que l'affichage utilise l'encodage Unicode (UTF-8). Votre page ne doit pas être affectée. Si elle l'est, corrigez-la.

Tableaux

Exercice 4

Écrivez une page qui structure sous forme d'une table html le contenu du fichier csv suivant :

Orbites des planètes du Système solaire
Planète;Distance moyenne (UA);Exentricité ;Inclinaison  (°);Période de révolution (an)
Venus;0,72333199;0,007;3,4;0,615
Jupiter;5,20336301;0,049;1,3;11,862
Mars;1,52366231;0,094;1,9;1,881
Saturne;9,6;0,057;2,5;29,452
Mercure;0,38709893;0,205;7;0,241
Neptune;4495,1;1,8;28,3;59,8
Terre;1;0,017;0;1
Uranus;2872,5;0,8;97,8;30,589

Vous rajouterez une colonne avec une "image" de chaque planète.

gallerie

Vous trouverez les images sur http://upload.wikimedia.org

Utilisez avantageusement les possiblités de formatages de votre éditeur de texte, ou la commande sed pour transformer le csv en html ou encore ce programme C.

Images

Exercice 5

Voici une image représentant les couches utilisées dans le développement WEB.

Par CaptainT7 — Travail personnel, CC BY-SA 4.0, lien.

Ecrire une page html qui affiche cette image. Les zones HTML, CSS et JS sont cliquables, et doivent ouvrir un nouvel onglet vers :

  • L'attribut usemap d'une image permet de préciser une carte (map) décrivant des zones d'une image cliquable.
  • La balise map permet de décrire des zones (sous forme de rectangles, circles, polygones) cliquables d'une image . Un exemple 
    <img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>```
  • Vous pouvez facilement (graphiquement) générer une map avec Gimp (filtre->Web->Image cliquable)

Bonus

Exercice 6

Ecrire un script shell qui permet de formater le contenu d'un repertoire en html, sous forme d'une table indiquant pour chaque entrée, le nom, les droits, la taille et la date de dernier accès correspondants. La commande

./dir2html.sh dir dir.html

produira le fichier dir.html contenant les entrées du répertoire dir, avec le rendu suivant :

gallerie

Aides

  • Comment faire pour écrire dans un fichier depuis un script bash ?
  • Pour récupèrer la liste des entrées en bash : 
    l=$(ls dir)
  • Pour itérer les éléments d'une liste en bash : 
    for i in $l;
do
 ...
done
  • Pour obtenir et formater les informations sur chaque entrée, vous pouvez utiliser la commande stat, en adaptant sa sortie à vos besoins.
  • Les icones de fichier fichier et de répertoire répertoire se trouvent dans le répertoire img.
View Git Blame Copy Permalink