TP HTML/CSS

2019/2020

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.

! ! ! Attention, dans la suite, login est à remplacer par votre nom d’utilisateur ENSIIE ! ! !
! ! ! Attention (bis) : ne faites surtout pas de copier/coller depuis ce sujet, car les caractères générés dans le pdf ne
sont pas toujours les bons... ! ! !
! ! ! Attention (ter) : 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, y compris sur
votre home : chmod o+x ∼ ! ! !

1) Créez un répertoire ~/public html (public tiret bas html). Ce nom est indiqué dans la configuration du serveur
web donc ne pas le changer : ’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.

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

1
 ”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) ;
— 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