ISN. TP: HTML/CSS - Langages de description de pages web
LANGAGES
Les langages informatiques doivent être utilisables par les êtres humains qui écrivent les codes, mais aussi par les machines qui les exécutent. Ce sont des langages formels avec une grammaire et une sémantique.
– La grammaire indique si une chaine de caractère appartient à ce langage ou non ; – La sémantique définit ce qui se passe quand on utilise un texte de ce langage.
Principes
Pour créer un site internet on utilise le langage HTML maintenant dans sa version 5. Une page web est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention d’écriture.
Pour composer une page Web un simple éditeur de texte telnotepad++suffit, nous utiliserons Bluefish1qui offre un environnement de développement Web2complet.
2 HTML est un langage de balisage (c’est un « format enrichi » par sa grammaire qui introduit des balises structurant le texte) qui permet de mettre en forme le texte directement ou via une feuille de styles
2 La sémantique du langage HTML définit la manière dont un texte écrit en HTML s’affiche dans un navigateur, elle est elle même définie dans un langage formel : le langage CSS.
La page d’accueil d’un site se nomme obligatoirementindex. Lorsque vous consultez un site web, les fichiers HTML (extension.htmou.html) sont envoyés à votre navigateur et le code html estinterprétésur VOTRE machine par VOTRE navigateur.
Les balises
Le code html est constitué de texte et d’indications de mise en page. Ces indications sont appelées balises3.
Les balises permettent de structurer le texte, elles vont en général par paire : on parle alors de conteneurs (avec une balise d’ouverture et une balise de fermeture). Il y a aussi quelques balises isolées :<br>,<img>,<hr>,<input>
Les balises doivent être correctement imbriquées et écrites en minuscules et sans espace entre les chevrons.
Il faut distinguer les balises qui provoquent un saut de ligne (balise de type "block") et les balises de type "inline" (pas de saut de ligne).
À lire :Apprendre HTML5diapo-papier; Langage CSSdiapo-papier; Vérifier la validité avec le W3Cdiapo-papier 1 Structure d’une page web- En utilisant les ressources mises à votre disposition, nous allons créer un premier document html, et nous l’enrichirons au fur et à mesure.
1. Lancez d’abord l’éditeur de texte Bluefish, et recopiez le code suivant : Listing 1: Ex1.html
< !D O C T Y P E h t m l>
<h t m l l a n g=" fr ">
<h e a d>
<m e t a c h a r s e t=" UTF -8 " / >
<t i t l e> P r e m i e r e s s a i < /t i t l e>
< /h e a d>
<b o d y>
<p> B o n j o u r t o u t le m o n d e ... < /p>
< !- - je f a i s un c o m m e n t a i r e qui ne va pas se v o i r - ->
< /b o d y>
< /h t m l>
2. Sachez ranger vos fichiers en arborescence: Créez un sous-répertoireHTMLdans le répertoireMes documents ( /Mes documents/HTML/Ex1.html) et enregistrez le fichier précédent sous le nomEx1.html.
3. À l’aide d’un navigateur (firefox, par exemple) interprétez votre code en visualisant votre page.
Nous allons modifier cette page progressivement (n’hésitez pas à faire d’autres changements que ceux proposés, en vous en inspirant), et il faudra vérifier à chaque nouvelle étape à quoi ressemble votre page en la rechargeant.
1. télécharger Bluefish sur le site officiel http ://bluefish.openoffice.nl/download.html 2. Le World Wide Web (WWW), littéralement la « toile (d’araignée) mondiale » 3. Une balise html (ou tag en anglais) respecte la syntaxe suivante :<balise>
http://lycee.lagrave.free.fr/isn 1 n
ISN. TP: HTML/CSS - Langages de description de pages web
2 Titres
1. Ajoutez ces lignes dans la page précédente, et vérifiez l’affichage.
Listing 2: lignes à ajouter
<h1> V o i c i un t i t r e < /h1>
<h2> M a i n t e n a n t un sous - t i t r e < /h2>
<h3> Et on p e u t c o n t i n u e r < /h3>
<h4> La p r o f o n d e u r est l i m i t é e < /h4>
<h5> P é n u l t i è m e < /h5>
<p> Un p e t i t t e x t e j u s t i f i é à d r o i t e p o u r i n t r o d u i r e c e t t e partie , e l l e le m é r i t e bien , et p u i s il s e r a i t d o m m a g e de se p r i v e r . < /p>
<h6> Un v r a i m e n t p e t i t p a r a g r a p h e < /h6>
<p> Et un t i t r e est un c h a n g e m e n t de p a r a g r a p h e i m p l i c i t e . < /p>
2. Avez-vous besoin d’ajouter la balise<br>après une balise d’entête<h1-6>ou un paragraphe<p>? Pourquoi ?
3 Mises en forme- Nous voulons que les titres et les paragraphes soient centrés horizontalement.
1. Tester la modification suivante pour votre code :
Listing 3: le conteneurcenter
<c e n t e r> <h1> V o i c i un t i t r e < /h1> < /c e n t e r>
<c e n t e r> <h2> M a i n t e n a n t un sous - t i t r e < /h2> < /c e n t e r>
<c e n t e r> <h3> Et on p e u t c o n t i n u e r < /h3> < /c e n t e r>
<c e n t e r> <h4> La p r o f o n d e u r est l i m i t é e < /h4> < /c e n t e r>
<c e n t e r> <h5> P é n u l t i è m e < /h5> < /c e n t e r>
<c e n t e r> <p> Un p e t i t t e x t e j u s t i f i é à d r o i t e p o u r i n t r o d u i r e c e t t e partie , e l l e le m é r i t e bien , et p u i s il s e r a i t d o m m a g e de se p r i v e r . < /p>
< /c e n t e r>
<c e n t e r> <h6> Un v r a i m e n t p e t i t p a r a g r a p h e < /h6> < /c e n t e r>
<c e n t e r> <p> Et un t i t r e est un c h a n g e m e n t de p a r a g r a p h e i m p l i c i t e . < /p>
< /c e n t e r>
2. Vérifiez la validité de votre code en utilisant le site web du W3C :http://validator.w3.org.
Les consignes du W3C précisent que le conteneurcenterne doit plus être utilisé (balise obsolète). À la place, il faut utiliser le CSS.
3. a. Notez l’exemple suivant dans une feuille de stylesex1.css suivant l’arborescence /Mes documents/HTML/css/ex1.css /* centrer les textes des paragraphes */
p{
text-align:center;
}
b. Compléter cette feuille de styles pour que les titres soient centrés horizontalement.
4. Pour importer cette feuille de styles, il faut placer une balise<link>dans l’en-tête de Ex1.html :
<link rel="stylesheet" href="css/ex1.css"/>.
Le hrefpermet de définir l’emplacement de votre fichier CSS.
5. Supprimeztoutes les balisescenterà l’aide de la commande avancée de Bluefish : «chercher et remplacer» puis actualisez votre page dans votre navigateur.
m 2
ISN. TP: HTML/CSS - Langages de description de pages web
4 Énumérations
1. Copiez ce code dans la page html etcorrigez les erreurs:
Listing 4: énumérations
<ul>
<li> <b> Le t e x t e p e u t ê t r e en gras , < /b> < /li>
<li> <em> Les i t a l i q u e s m e t t e n t le t e x t e en v a l e u r ! < /em> < /li>
<li> Et enfin , on p e u t é c r i r e à la m a c h i n e du m ê m e nom , < /li>
<li> un s t y l e s o u l i g n é à é v i t e r : ici , on ne p e u t pas cliquer , < /li>
<li> et on p e u t m ê m e r a y e r du t e x t e < /li>
<li> <big> On p e u t é c r i r e de g r o s c a r a c t è r e s , < /big> <s m a l l> ou de p e t i t s < /s m a l l> < /li>
<li> Et enfin , on p e u t u t i l i s e r des e x p o s a n t s c o m m e d a n s 1 <sup> er < /sup
> ou des indices , u <sub> n +1 < /sub> = u <sub> n < /sub> +1 < /li>
< /ul>
<ul>
<li> Du t e x t e violet , < /li>
<li> du texte , du t e x t e p l u s g r o s ( en r e l a t i f ) , < /li>
<li> du texte , t a i l l e absolue , < /li>
<li> et des j o l i e s l e t t r e s . < /li>
< /ul>
Dans le code précédent, on vient de créer une liste. Que se passe-t-il si on remplaceulparol?
2. Créez une liste, dont le premier élément commencera par le mot « Les peintres », suivi d’une liste numérotée avec dans l’ordre vos trois peintres favoris. Le second élément sera la même chose avec « Les musiciens ». Vous ferez de plus suivre le nom de votre musicien préféré d’une liste numérotée de ses trois meilleures chansons. Vous pourrez ensuite essayer de remplacer un<ol>par<ol start="42">et la deuxième<li>par<li value="100">.
5 Liens
1. Votre document commence (enfin ce qu’il y a après<body>) sans doute par un titre<h1>Titre</h1>. a. Remplaçons-le par :
Listing 5: ancre
<a id=" d e b u t "> <h1> T i t r e < /h1> < /a> .
b. Ajoutez maintenant un texte long en plusieurs paragraphes depuis la version 2.2.3 de Bluefish on peut faire Outil > Insertion > Générateur Lorem Ipsum.
2. À la fin de votre document (avant</body>), ajoutez le code suivant puis cliquez dessus dans le navigateur.
Listing 6: lien vers l’ancre
<p> L i e n v e r s <a h r e f=" # d e b u t "> en h a u t < /a> < /p> . 3. Ajoutez alors le code suivant : Listing 7: lien hypertexte
<a h r e f=" h t t p :// www . g o o g l e . fr " t i t l e=" G o o g l e s e l o n moi "> P o u r a l l e r sur le s i t e de g o o g l e < /a> . <br>
Cliquez dessus dans le navigateur. A quoi sert l’attribut "title" ?
6 Images- Si vous avez une image dans vos fichiers, tant mieux. Sinon, téléchargez-en une sur internet.
1. Mettez cette image dans /Mes documents/HTML/images. Vous pouvez maintenant ajouter le code en adaptant
au nom de l’image : Listing 8: image
<img src=" ../ i m a g e s / m o n i m a g e . jpg " alt=" t e x t e a l t e r n a t i f " t i t l e=" c o m m e une i m a g e " >
http://lycee.lagrave.free.fr/isn 3 n
ISN. TP: HTML/CSS - Langages de description de pages web
L’attributsrcde la balise<img>donne le chemin de l’image exprimé en relatif.
../: pour remonter un répertoire.
./: pour le répertoire courant
2. Très utile pour le référencement d’un site, à quoi sert de plus l’attributaltde la balise<img>? 7 Vérification de la validité - Installer l’extension « web-developer » à firefox :
https ://addons.mozilla.org/fr/firefox/addon/web-developer/
1. Demander la validation du document avec le menuOutils > Valider le HTML local; l’autre solution sera d’aller sur le site :http://validator.w3.org.
2. Constatez la validité du document sur la page affichée (1 Error, 1 warning(s)) et corrigez l’erreur si ce n’est déjà fait.
8 Créez une nouvelle pageEx2.htmlet une feuille de styles associée pour traiter les exemples du document : Langage CSS diapo-papier
9 Les éléments sémantiques- HTML5 apporte le support de nouveaux éléments pour aider le navigateur à déter- miner la sémantique d’une page. Ces éléments sont faciles à comprendre et à assimiler pour tout qui connaît un peu d’anglais. Passons-les en revue, car les microdonnées4peuvent s’ajouter à ces balises.
Balise Signification
<section> Une section représente un document générique ou une section d’une application. Par exemple, il pourrait s’agir d’un titre et du texte subordonné, comme toute section du pré- sent article.
<nav> Il s’agit d’une section particulière d’une page, celle qui contient les liens dits de naviga- tion. Il n’est pas nécessaire de mettre tous les liens d’une page dans une telle balise, seuls les plus gros blocs de liens devraient y trouver place.
<article> Une partie qui se suffit à elle-même d’une page, qui pourrait être redistribuée telle quelle, sans ce qui l’entoure, comme un post sur un blog ou un forum.
<aside> Des éléments qui sont reliés au contenu mais sans en faire partie trouvent place dans ces balises. Dans un livre, cela correspond au texte mis dans les colonnes sur les côtés, par exemple.
<hgroup> L’en-tête d’une section, utilisé pour grouper des élémentsh1àh6quand la page possède plusieurs niveaux de titres.
<header> Des aides à la navigation, tout l’en-tête du site. On attend généralement que cet élément contienne le titre principalh1de la page, mais ce n’est pas requis. On peut aussi y placer un espace de recherche ou la table des matières de la page.
<footer> Le bas de la page. Par exemple, on pourrait placer dans une telle balise la fin de cette page, avec un lien vers le forum, une page de contact, le copyright, etc.
<time> Une heure sur une horloge à 24 heures, une date précise dans le calendrier grégorien.
<mark> Une portion de texte marquée pour référence ultérieure.
Mini-projet « Créer et analyser une page web en langage HTML » :
1. En utilisant l’environnement de développement Bluefish modifier le source de la pagetest.html http://lycee.lagrave.free.fr/isn/html/test.html
pour obtenir le design de la maquette du sitehttp://lycee.lagrave.free.fr/isn/html/html5.html 2 pour voir les différentes sections :http://lycee.lagrave.free.fr/isn/html/maquette.png
4. Ces microdonnées sont une manière d’ajouter des informations à la base HTML existante, elles fournissent un vocabulaire plus riche et plus précis que ce que peut fournir le HTML.
m 4
