TP8 - HTML et CSS

TD/TP séance 8 : Web et HTML
Durée : 2h
La séance de TP est découpée en deux parties : 30 minutes lors de la séance du TP7 et 1h30 pendant
la séance du TP8
Objectifs
• Savoir créer un site Web
• comprendre et connaître la structure d'un site web
• structurer un fichier HTML
• utiliser des balises du langage XHTML
• comprendre et utiliser un fichier CSS
Au menu
A. Consignes
B. Premiers contacts
C. Création de pages web: du XHTML et une première approche du CSS
D. Utilisation de Open Office pour créer des pages Web
E. A retenir
A. Consignes (5 min) ↑
Lisez attentivement cet énoncé de TP/TD en suivant les instructions. En cas de question, faites
appel à l'enseignant qui est là pour vous répondre, et surtout ne restez pas bloqué sur une des
tâches à réaliser. Si vous terminez en avance (et seulement dans ce cas), vous pouvez vous
intéresser aux cadres "pour aller plus loin". Entre parenthèses, à côté des titres de sous-sections, est
indiqué le temps que vous avez dû passer à effectuer les étapes précédentes.
Certains liens font apparaître des info-bulles quand vous passez la souris dessus : soyez curieux !
La plupart de ces liens conduisent vers un article Wikipedia. Cliquez dessus si vous avez besoin
d'une définition plus détaillée que celle de l'info-bulle, ou bien seulement pour la culture si vous
avez le temps.
Retenez l'emplacement de ces pages ! Elles vous serviront d'aide-mémoire pour votre utilisation
des machines de RezUFR, sous Linux comme sous Windows.
B. Premiers contacts (15 min) ↑
Une page web est un fichier contenant du texte, généralement dans le langage HTML ou XHTML.
Remarque sur le XHTML : XHTML est la nouvelle version de HTML.
B1Pour voir cela, faites un clic droit dans la page web du TP et cliquez sur Code source de la page
(ou Menu Afficher → Code source de la page). Une fenêtre s'ouvre : elle contient le code de la page
en langage HTML. B2Analysez le contenu du fichier HTML
Le document est la page web telle que nous la visionnons. Il faut donc 2 outils : un outil d'édition
qui permet d'éditer le texte du fichier et un outil de visualisation pour voir le document final.
Il existe différents outils d'édition comme les éditeurs de texte brut ou des outils plus dédiés
(comme KompoZer) qui permettent de taper le code HTML ou d'utiliser les assistants graphiques.
Les outils de visualisation correspondent aux navigateurs tels que Firefox, Internet Explorer, ...
CSS a été créé en parallèle du HTML pour la séparation forme/fond. Il permet d'indiquer la mise
en forme (comment présenter les divers éléments). B3Vous pouvez voir à quoi ressemble le fichier
CSS du site web de GLIN102 ici.
XHTML permet une dissociation complète du fond et de la forme.
Un document web contient deux parties :
• le fond : le texte et sa structure (titres, sous-titres...)
• la forme : les couleurs, les dispositions, les tailles de polices, les bordures...
Le fichier (X)HTML ne contient que le fond et il y a un fichier par page web. Le fichier CSS ne
contient que la forme et il n'y a qu'un fichier par site web en général. Pour changer le fond, il
suffit de modifier le bon fichier HTML, alors que pour modifier la forme il suffit de modifier le
fichier CSS pour tout le site, ce qui permet un gain de temps, une meilleure lisibilité et une
cohérence du site. Par exemple, on pourra adapter une page à l'impression en modifiant le fichier
CSS, en n'affichant ni le menu ni les logos ne seront affichés et en mettant le fond en blanc.
C. Création de pages web: du XHTML et une première
approche du CSS (80 min) ↑
Le XHTML est un langage « à balises ». Un fichier XHTML a pour extension .htm ou .html et est
de type « texte ».
Les balises ont toujours la forme : <nom>. On distingue deux types de balises : les balises locales,
indiquant un effet à un endroit donné, qui s'écrivent <nom /> (par exemple, <br /> pour un saut de
ligne) et les balises qui ont une portée et qui ont donc un début et une fin : <nom>.....</nom> (par
exemple, <h1>...</h1> pour un titre de niveau 1). Les noms sont toujours en minuscule. Certaines
balises possèdent des attributs pour indiquer des paramètres supplémentaires. Les attributs ne se
mettent que dans la balise d'ouverture. Ils ont un nom (en minuscule) et une valeur (entre
guillemets doubles, valeur « libre »). Exemple : <img src="photo.jpg" alt="Ma photo" />.
Le squelette d'une page web est toujours:
<html>
<head>
<title>Le titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
Le contenu de la page ici
</body>
</html>
La partie Head contient des informations générales sur la page : les mots clés, le titre de la page
(qui s'affiche dans la barre des navigateurs), la langue, le jeu de caractères utilisés, la version de
HTML utilisée. La partie Body est le corps de la page : c'est ici que l'on met le contenu. Il faut
indiquer le fond : les différents textes et la structure grâce aux balises (les titres, sous-titres, les mots
importants à mettre en évidence, les citations, les bouts de code, les paragraphes, ...).
On structure souvent le corps en plusieurs blocs (menu, en-tête, corps, pied de page) en utilisant des
balises <div> de la manière suivante :
<div id="en_tete">
</div>
<div id="menu">
</div>
<div id="corps">
</div>
<div id="pied_de_page">
</div>
Chaque balise div contient un attribut id ayant une valeur différente et permettant de les différencier.
Voici les principales balises qui sont utilisées pour créer des pages web :
<p>....</p> : pour les paragraphes
<br /> : saut de ligne sans saut de paragraphe
<h1>...</h1> à <h6>...</h6> : les titres (h1), sous-titres (h2), sous-sous-titres (h3)...
<em>... </em> : mettre en emphase (« un peu » en valeur)
<strong>...</strong> : mettre « beaucoup » en valeur
pour les liens hypertextes : <a href="cible du lien">Texte du lien</a>
La cible peut être une adresse :
• relative : "index.html", "images/img1.jpg"... si les fichiers sont dans le même site
web,
• absolue : "http://etu.univ-lyon1.fr/..."... si les liens pointent vers des sites externes.
Ajout d'une bulle d'aide : attribut title="aide à afficher"
. Pour les mails : remplacer le lien par mailto:adresse
• pour les images: <img src="nom du fichier ou adresse du fichier" alt="texte à afficher si
l'image ne peut être vue"/>
Elles ne sont pas dans le fichier HTML, on ne garde qu'un pointeur vers le fichier à afficher,
donc les adresses des fichiers doivent être des adresses relatives.
Attribut facultatif : la bulle d'aide lorsque l'on met le curseur sur l'image : title="contenu de
la bulle d'aide"
Il est possible de mettre une image dans une balise <a> (image cliquable)
• pour les listes :
• à puces : <ul>Liste</ul>
• ordonnée (nombres) : <ol>Liste</ol>
Chaque item est ensuite compris entre <li> et </li>
Exemple : <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
• pour les tableaux:
• l'ensemble : <table>...</table>
• la légende : <caption>...</caption>
• une ligne dans un tableau : <tr>...</tr>
•
•
•
•
•
•
• la ligne d'en-tête : <th>...</th>
• une cellule dans une ligne : <td>...</td>
Afin d'afficher des commentaires dans les fichiers html sans qu'ils n'apparaissent à la visualisation
de la page web, il faut utiliser les balises suivantes : <!-- commentaires -->
Enfin la mise en forme est définie dans le fichier CSS (extension .css). Il faut alors lier le fichier
CSS et les fichiers HTML. Pour cela il faut ajouter dans la partie head de chaque fichier HTML la
ligne suivante :
<link rel="stylesheet" media="screen" type="text/css" title="Nom du design"
href="nomdufichier.css" />
À l'aide d'un éditeur de texte (Kwrite par exemple), vous allez modifier et créer des pages HTML.
C1Téléchargez dans un répertoire TP8 (que vous créez) ce fichier HTML simpson1.html, ce fichier
CSS styleSimpson.css ainsi que les images famille3.gif et arplanbart.gif. C2Ouvrez le fichier
simpson1.html avec un éditeur de texte. Si les lettres accentuées apparaissent mal à l'écran, ouvrez
le fichier dans l'éditeur de texte Kate et changez l'encodage avec le menu Outils, Encodage, et en
choisissant Européen de l'ouest ISO-8859-1.
Ce fichier contient le code HTML de la page simpson1.html. Pour visualiser cette page, C3faites
clic-droit sur le fichier simpson1.html et sélectionnez ouvrir avec Navigateur web Firefox. Un
navigateur s'ouvre et vous pouvez visualiser la page web.
Vous allez maintenant ajouter des éléments à la page web simpson1.html. A chaque fois que vous
faites une modification dans le fichier HTML en utilisant l'éditeur de texte, pensez à visualiser à
nouveau la page web en actualisant le navigateur. Ainsi vous pourrez voir les modifications que
vous avez apportez à la page web.
Revenez à l'éditeur de texte.
C4Tout d'abord, donnez un titre à la page web (à l'endroit indiqué en commentaire). Attention, il
s'agit de modifier la balise <title> de la partie head.
C5En utilisant la balise <img src="nom du fichier" alt="texte à afficher si l'image ne peut être
vue"/>, insérez l'image famille3.gif dans la page web dans le paragraphe "présentation" (à l'endroit
indiqué en commentaire).
C6Ajoutez également un lien hypertexte permettant d'accéder au site "http://lessimpson.hypnoweb.net/site.105.329/" en cliquant sur le texte "Site SIMPSON" dans le paragraphe
"présentation". Pour cela, vous devez utiliser la balise <a href="url du site web">...</a>.
Pour approfondir sur les balises : vous pouvez obtenir des informations supplémentaires
concernant les balises, leurs attributs et leurs utilisations sur Internet: par exemple, pour les listes
(ici), pour les tableaux ( là ), ...
C7Puis ajoutez une ancre permettant de revenir en haut de la page lorsque l'on se situe tout en bas.
Pour cela, insérez la balise <a name="top"></a> au début du bloc "corps" et insérez la balise
<a href="#top">haut du document</a> à la fin du bloc "corps". De cette manière lorsque vous
cliquerez sur "haut du document" dans la page web, vous remonterez automatiquement en haut de la
page.
C8Insérez une barre horizontale après l'image en utilisant la balise <hr width=100 color="black"
align="center"/>.
Vous devez obtenir une page web proche de l'image ci-dessous:
C9Enfin,
modifiez le bloc "pied de page" de manière à indiquer votre nom (à l'endroit indiqué en
commentaire).
C10Maintenant, vous devez créer une deuxième page basée sur la même structure que la première
page (simpson1.html). Cette page web sera enregistrée sous le nom de simpson2.html et contiendra
des informations sur les personnages et leur voix. Utilisez les informations de l'image ci-dessous.
C11Une fois que vous avez créé la nouvelle page web, ajoutez un deuxième point "Personnages et
voix" dans le menu de manière à pouvoir accéder à la page créée simpson2.html.
C12Regardez
maintenant le fichier css du site web (styleSimpson.css). Dans ce fichier, les mises en
forme de différents éléments sont définies. Par exemple, la mise en forme de la balise Body est
définie : background-image: url("arplanbart.gif"); signifie que l'arrière-plan de tout ce qui se situe
dans la balise body est l'image arplanbart.gif.
Il est également possible de fixer la couleur de la police selon les éléments. Par exemple, en
XHTML, vous avez les balises suivantes:
<div id="en_tete">
<h1>Les "Simpson"</h1>
</div>
Pour indiquer le style (texte aligné au centre en vert et Arial) de la balise h1 présente dans une
balise dont l'identifiant est "en_tete" (<div id="en_tete">), il faut utiliser dans votre fichier CSS le
paragraphe suivant:
#en_tete h1
{ color: green;
text-align: center;
font-family: Arial;
}
Il est possible de placer des éléments côte à côte comme dans la page Web où le menu est placé à
côté du texte. Pour cela, il faut transformer l'élément en élément flottant en rajoutant la propriété
float (2 valeurs possibles : avec float: left; le bloc sera à gauche et avec float: right; il sera à droite).
Par exemple, dans notre page HTML, vous souhaitez faire en sorte que le menu apparaisse à
gauche, à coté de votre texte principale: l'objectif est donc de placer la balise <div id="menu"> à
coté de la balise <div id="corps">. Pour cela, il faut utiliser dans votre fichier CSS le paragraphe
suivant:
#menu
{ float: left;
...etc..
}
C13Essayez de modifier le fichier css du site web (styleSimpson.css) de manière à modifier l'image
en arrière-plan, la couleur des polices, le positionnement du menu, ...
D. Utilisation de Open Office pour créer des pages Web (15
min) ↑
D1Ouvrez
Open Office Writer et créez un nouveau document HTML en utilisant le menu Fichier →
Nouveau → Document HTML. Cet outil permet de créer des pages Web sans avoir à écrire le code
HTML. Il s'utilise comme un traitement de texte. Il vous suffit de taper le texte, de le mettre en
forme et l'outil créera le code HTML correspondant. Vous pouvez voir et modifier le code source
HTML en faisant Affichage → Source HTML et revenir à la visualisation de la page Web en faisant
Affichage → Mise en page Web
D2En utilisant Open Office, créez de nouvelles pages au site web que vous avez créé précédemment
en utilisant comme modèle la première page et en insérant de nouveaux liens dans le menu. Vous
pouvez trouver des informations en faisant des recherches sur Internet.
E. A retenir (5 min) ↑
Le principe important à retenir pour la conception de site web est la séparation entre le fond
(XHTML) et la forme (CSS). Une page web est un fichier contenant du texte et le document est la
page web telle que nous la visionnons. Il faut bien structurer le site web de manière à avoir une
bonne navigation sur l'ensemble des pages du site web.
Nous avons ainsi vu dans ce TP comment créer un site web :
•
•
•
•
la structure d'un site web,
la structure d'un fichier HTML,
les balises du langage XHTML,
l'utilisation d'un fichier CSS.