Tutoriel HTML - cours lacroix

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 tel notepad++ suffit, nous utiliserons Bluefish 1 qui offre un
environnement de développement Web 2 complet.
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 obligatoirement index. Lorsque vous consultez un site web, les fichiers HTML
(extension .htm ou .html) sont envoyés à votre navigateur et le code html est interpré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 balises 3 .
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 HTML5 diapo-papier ; Langage CSS diapo-papier ; Vérifier la validité avec le W3C diapo-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
<! DOCTYPE html >
< html lang = " fr " >
< head >
< meta charset = " UTF -8 " / >
< title > Premier essai </ title >
</ head >
< body >
<p > Bonjour tout le monde ... </ p >
<! -- je fais un commentaire qui ne va pas se voir -- >
</ body >
</ html >
2. Sachez ranger vos fichiers en arborescence : Créez un sous-répertoire HTML dans le répertoire Mes documents
( /Mes documents/HTML/Ex1.html) et enregistrez le fichier précédent sous le nom Ex1.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 > Voici un titre </ h1 >
< h2 > Maintenant un sous - titre </ h2 >
< h3 > Et on peut continuer </ h3 >
< h4 > La profondeur est limitée </ h4 >
< h5 > Pénultième </ h5 >
<p > Un petit texte justifié à droite pour introduire cette partie , elle le
mérite bien , et puis il serait dommage de se priver . </ p >
< h6 > Un vraiment petit paragraphe </ h6 >
<p > Et un titre est un changement de paragraphe implicite . </ 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 conteneur center
< center > < h1 > Voici un titre </ h1 > </ center >
< center > < h2 > Maintenant un sous - titre </ h2 > </ center >
< center > < h3 > Et on peut continuer </ h3 > </ center >
< center > < h4 > La profondeur est limitée </ h4 > </ center >
< center > < h5 > Pénultième </ h5 > </ center >
< center > <p > Un petit texte justifié à droite pour introduire cette partie ,
elle le mérite bien , et puis il serait dommage de se priver . </ p >
</ center >
< center > < h6 > Un vraiment petit paragraphe </ h6 > </ center >
< center > <p > Et un titre est un changement de paragraphe implicite . </ p >
</ center >
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 conteneur center ne doit plus être utilisé (balise obsolète). À la place, il
faut utiliser le CSS.
3.
a. Notez l’exemple suivant dans une feuille de styles ex1.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 href permet de définir l’emplacement de votre fichier CSS.
5. Supprimez toutes les balises center à 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 et corrigez les erreurs :
Listing 4: énumérations
< ul >
< li > <b > Le texte peut être en gras , </ b > </ li >
< li > < em > Les italiques mettent le texte en valeur ! </ em > </ li >
< li > Et enfin , on peut écrire à la machine du même nom , </ li >
< li > un style souligné à éviter : ici , on ne peut pas cliquer , </ li >
< li > et on peut même rayer du texte </ li >
< li > < big > On peut écrire de gros caractères , </ big > < small > ou de
petits </ small > </ li >
< li > Et enfin , on peut utiliser des exposants comme dans 1 < sup > er </ sup
> ou des indices , u < sub >n +1 </ sub > = u < sub >n </ sub > +1 </ li >
</ ul >
< ul >
< li > Du texte violet , </ li >
< li > du texte , du texte plus gros ( en relatif ) , </ li >
< li > du texte , taille absolue , </ li >
< li > et des jolies lettres . </ li >
</ ul >
Dans le code précédent, on vient de créer une liste. Que se passe-t-il si on remplace ul par ol ?
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 name = " debut " > Titre </ 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 > Lien vers <a href = " # debut " > en haut </ a > </ p >.
3. Ajoutez alors le code suivant :
Listing 7: lien hypertexte
<a href = " http :// www . google . html " title = " Google selon moi " > Pour aller sur
le site de google </ 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 = " ../ images / monimage . jpg " alt = " texte alternatif " title = " comme une
image " >
http://lycee.lagrave.free.fr/isn
3
n
ISN. TP : HTML/CSS - Langages de description de pages web
L’attribut src de 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’attribut alt de 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 menu Outils > 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 page Ex2.html et une feuille de styles associées pour traîter 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éterminer 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ées 4 peuvent s’ajouter à ces balises.
Balise
<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>
<time>
<mark>
Signification
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.
Il s’agit d’une section particulière d’une page, celle qui contient les liens dits de navigation. 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.
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.
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.
L’en-tête d’une section, utilisé pour grouper des éléments h1 à h6 quand la page possède
plusieurs niveaux de titres.
Des aides à la navigation, tout l’en-tête du site. On attend généralement que cet élément
contienne le titre principal h1 de 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.
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.
Une heure sur une horloge à 24 heures, une date précise dans le calendrier grégorien.
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 page test.html
http://lycee.lagrave.free.fr/isn/html/test.html
pour obtenir le design de la maquette du site http://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