TP HTML/CSS

2018/2019

L’objectif de ce TP est de préparer une page d’introduction à la programmation web.

Rappel : n’hésitez pas à consulter le cours correspondant sur Html et Css.

1) Créez un répertoire ~/public html. C’est dans ce répertoire qu’Apache (le serveur web) ira chercher les
documents à afficher (pages web .html ou .php). Dans ce répertoire, créez un sous-répertoire appelé tp1 dans lequel
vous placerez les fichiers de ce TP.

! ! ! Attention, dans la suite, login est à remplacer par votre nom d’utilisateur ENSIIE ! ! !
! ! ! Attention (bis) : pour que le TP fonctionne, il faut que votre répertoire home et son sous-répertoire public html
soient traversables donc vous devrez possiblement effectuer la commande chmod o+x sur ces répertoires. ! ! !
! ! ! Attention (ter) : ne faites pas de copier/coller depuis ce sujet, car les caractères générés dans le pdf ne sont pas
toujours les bons... ! ! !

Exercice 1 - Contenu des pages

2) Créez un fichier index.html que vous sauvegarderez dans le sous-répertoire tp1 et commencez à le remplir, avec
sa déclaration de document, son en-tête et le corps du document ne contenant qu’un titre de niveau 1 ”Introduction
à la programmation web”.
N’hésitez pas à consulter la documentation du W3c sur Html.

3) Affichez ce fichier avec un navigateur web en allant à l’adresse http://pgsql/~login/tp1 ou http://pgsql/

~login/tp1/index.html (par défaut les pages index sont affichées).
Les pages du répertoire ~/public html sont affichées à l’adresse http://pgsql/~login.
Note : depuis l’extérieur de l’école, l’adresse sera http://pgsql.ensiie.fr/~login . Il peut y avoir une
fenêtre de connexion ; auquel cas, les informations à donner sont les suivantes :
compte : eleve
mdp : ipw

4) Vérifiez l’encodage de votre page : attention à déclarer dans votre document Html que l’encodage est UTF-8,
ainsi que lorsque vous sauvegardez votre fichier (sous emacs : Options → Mule → Set Coding Systems → For Saving
This Buffer : utf-8).

5) Complétez votre page afin qu’elle contienne les éléments suivants (voir figure 1) :
– Le titre de la page ”Programmation web ENSIIE” doit se trouver en titre sur le navigateur ;
– Un paragraphe de présentation de la page expliquant son objectif, comme par exemple ”Cette page a pour objectif
de faire le point sur quelques informations en Html/Css.”. Une partie de ce texte devra être mise en valeur en
italique ;
– Un tableau de trois colonnes et au moins 4 lignes présentant plusieurs éléments et indiquant s’ils doivent être gérés
par le Html ou le Css (différents de ceux donnés en exemple). Ce tableau doit comporter la légende ”HTML ou
CSS ?”, et avoir une ligne d’en-têtes comportant ”HTML” en deuxième colonne, et ”CSS” en troisième colonne,
ainsi qu’indiqué sur l’exemple (par défaut, il n’y a pas de bordures ; pour afficher les bordures, il faudra créer une
feuille de style, ce qui fait l’objet de l’exercice 2) ;

1
– Un lien vers une autre page, page test.html, comportant le même titre, un unique paragraphe contenant le texte
suivant : ”Cette page est une page de test (bac à sable).”, et un lien retour vers index.html.
– Une liste de liens utiles, précédés du logo des sites (le logo du W3c est dans le répertoire /pub/pw) ;
– Une vidéo de démonstration en Html5. Vous pouvez copier dans votre répertoire tp1 les fichiers
w3schools tab example.mp4 (type video/mp4) et w3schools tab example.ogv (type video/ogg) présents dans
/pub/pw.
Code pour afficher une vidéo movie.ogv :
<video width=”320” height=”240” controls>
<source src=”movie.ogv” type=”video/ogg”>
Your browser does not support the video tag.
</video>

6) Testez la validité de votre page (et corrigez votre html si besoin !) avec le validateur du W3c.

Exercice 2 - Présentation des pages

7) Créez une feuille de style Css à laquelle vous ferez appel dans votre fichier Html afin de prendre en compte les
éléments suivants de présentation :
– Les titres principaux doivent être de couleur bleue (#58acfa par exemple) ;
– Les tableaux doivent comporter une bordure visible grise (grey) ;
– Les liens doivent s’afficher en cyan lorsque l’utilisateur passe sa souris dessus ;
– Le texte mis en valeur doit s’afficher en rouge (en plus d’être en italique) ;
– Créez une classe sigle que vous appliquerez aux différents sigles de la page (Html5, Css, W3c) ;
– Et toute autre modification de style qui vous semblera pertinente : votre feuille de style doit comporter au moins
10 déclarations.
N’hésitez pas à consulter la documentation du W3c sur Css.

Exercice 3 - Structuration des pages

8) Modifiez votre page principale afin de lui ajouter :

– Un en-tête (balise <header>) ;
– Un menu de navigation (balise <nav>) permettant d’aller à la page de test ou d’accueil ;
– Une section principale ;
– Un élément annexe (balise <aside>) comprenant les liens vers les références ;
– Et tout autre élément sémantique qui vous paraitra pertinent.

9) Modifiez votre feuille de style pour positionner les éléments précédents sur votre page, en utilisant de préférence
Flexbox :
– l’en-tête doit faire toute la largeur du haut de la page et avoir une couleur de fond différente du contenu principal ;
– le menu doit être sur la gauche et comporter une couleur de fond différente ;
– les références doivent être sur la droite de la page.

10) Adaptez votre feuille de style pour que votre page web soit lisible quelque soit la taille de votre fenêtre, et
notamment que :
– les références disparaissent sur un écran de téléphone ;
– le menu doit passer sous l’en-tête sur un écran de téléphone.
Vous pouvez pour cela utiliser :
– l’outil de firefox Outils → Développement web → Vue adaptative qui permet de tester l’affichage de votre page avec
des tailles d’écran variables ;
– la page de w3schools.com sur le Responsive Web Design.

2
Figure 1 – Modèle de la première page HTML à créer