docTP1 HTML
download 
Plainte Transcription
TP1 HTML
Outils Informatiques et C2i
HTML - TP 1/3
1
Première page web
Le langage HTML sert à structurer le contenu d’une page web. Il s’agit d’un fichier de texte enrichi avec des
balises pour la mise en forme.
Question 1 Créez et affichez une page web sans structure. Pour cela :
1. Ouvrez un éditeur de texte (par exemple, gedit), écrivez quelques paragraphes de texte.
2. Enregistrez le fichier avec l’extension .html.
3. Ouvrez votre navigateur (par exemple, Firefox), allez dans le menu Fichier puis cliquez sur Ouvrir fichier.
4. Sélectionnez votre fichier HTML et ouvrez-le.
5. Constatez l’absence de structure dans le texte affiché.
A la manière des balises \begin{...} et end{...} en LATEX, les pages HTML contiennent des balises
ouvrantes <nomDeLaBalise> et fermantes </nomDeLaBalise>. Une balise commence toujours par le signe < et
se termine toujours par le signe >. Notez que dans la balise fermante, le signe < est suivi d’une barre oblique /. 1
Une balise peut également contenir des attributs servant à donner des informations supplémentaires. Ces attributs sont notés après le nom de la balise, séparés par des espaces, comme suit : <balise attribut="valeur">.
Une page HTML peut également contenir des balises qui, au contraire des précédentes, fonctionnent seules.
Celles-ci sont dites “orphelines” et sont notées <nomDeLaBaliseOrpheline/>. Une balise orpheline ne contenant
aucun attribut est dite “vide”. Par exemple, la balise vide <br /> indique un retour à la ligne.
Le squelette d’une page HTML est le suivant (fichier minimal.html sur Ametice) :
<!DOCTYPE html>
<html>
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>
La première ligne indique qu’il s’agit d’une page HTML. Notez que les balises s’ouvrent dans un certain
ordre et se ferment dans l’ordre inverse. Ainsi, la première balise que nous écrivons est <html>, et la dernière
est </html>.
Ces balises encadrent deux autres paires de balises, <head>...</head> et <body>...</body>. La deuxième
paire encadre ce qui sera visible sur la page du navigateur alors que la première sert à écrire l’en-tête du
document, des méta-informations, dont un titre qui est obligatoire.
La balise <meta charset="utf-8" /> indique que le codage des caractères à utiliser est UTF-8. Les balises
<!-- et --> servent à écrire des commentaires, visibles uniquement dans le code source 2 . Remarquez que les
balises sont indentées pour faciliter la lecture du code-source. Comme en LATEX, le navigateur ignore les espaces
blancs en trop lors de l’affichage.
Question 2 Modifiez votre fichier HTML en y copiant le squelette ci-dessus. Écrivez quelques lignes de texte
dans le corps du document, et choisissez un titre. Testez votre fichier HTML avec votre navigateur.
1. Attention : ne pas confondre le slash HTML / avec l’antislash LATEX \
2. C’est-à-dire qu’ils ne seront pas affichés dans le navigateur
1
2
Paragraphes, intertitres
Des balises spécifiques sont utilisées pour structurer le texte. Elles interviennent entre les balises <body> et
</body>. En voici un échantillon :
— Les balises <p> et </p> permettent de délimiter un paragraphe. Ces paires de balises doivent être utilisées
autant de fois qu’il y a de paragraphes.
— Le HTML permet d’utiliser une hiérarchie d’intertitres jusqu’à six niveaux. Un intertitre de premier
niveau doit être délimité par les balises h1, par exemple, <h1>Mon titre de 1er niveau</h1>.
— Un intertitre de deuxième niveau doit être délimité par les balises h2, et ainsi de suite jusqu’au sixième
niveau. En pratique une hiérarchie avec deux ou trois niveaux de titres est suffisante.
— Pour mettre en évidence certaines parties du texte, nous utilisons les balises <em> et </em>.
— Pour mettre davantage en valeur des parties du texte, nous préférons utiliser les balises <strong> et
</strong>.
Question 3 Utilisez les balises h1, h2, p, em et strong dans votre page HTML et testez le résultat avec votre
navigateur.
3
Hyperliens
Un site web est souvent composé de plusieurs pages web. Chaque page est déclarée dans un fichier différent
ayant l’extension .html. Un site permet aussi quelques fois d’accéder à des pages situées dans d’autres sites
web. Pour aller d’une page à une autre avec un simple clic de la souris, on utilise des hyperliens.
Un hyperlien est déclaré avec la paire de balises <a href="..."> et </a> où . . . correspond à l’URL d’accès
à une autre page. Le texte cliquable est écrit entre ces deux balises. Cette URL peut pointer vers un autre
site internet (lien extérieur), ou bien contenir le chemin relatif d’accès à une page de votre propre site (lien
intérieur).
Un lien intérieur doit situer la page pointée par rapport au répertoire où se situe le fichier HTML déclarant cet hyperlien. Par exemple, supposons que vous avez deux fichiers index.html et section1.html.
Si vous voulez déclarer dans un paragraphe de la page principale index.html un hyperlien pour accéder
à la page section1.html, vous écrirez simplement <a href="section1.html" >. Cependant, si le fichier
section1.html est situé dans un sous-répertoire nommé mesAutresPages, alors la valeur de l’attribut href
sera "mesAutresPages/section1.html".
Question 4 Créez un deuxième fichier HTML et déclarez des liens d’accès dans les 2 sens entre vos fichiers.
Tester vos fichiers avec votre navigateur et cliquez sur les liens qui apparaissent. Vous devez sauter d’une page
à l’autre.
4
Vérification
Le code HTML est visible par tout le monde. Pour y accéder, il suffit de faire un clic droit sur la page web
qui vous intéresse et de sélectionner “Afficher le code source de la page”.
Question 5 Allez sur un site web au hasard (par exemple, http: // wikipedia. org ) et affichez le code source
d’une page. Repérez les balises que vous connaissez.
Un code-source HTML doit suivre un certain nombre de conventions et de règles définies par des standards.
Tous les navigateurs web (Firefox, Internet Explorer, Chrome, Safari, etc) sont capables de comprendre du
HTML écrit en respectant ces règles.
Il existe plusieurs manières de vérifier si le code-source HTML est correct. On peut, par exemple, utiliser
des outils de vérification intégrés au navigateur. Certains navigateurs permettent d’explorer le code-source, par
exemple, en faisant un clic droit sur la page et sélectionnant “Examiner l’élément”. Cela ouvre un onglet en bas
de la page contenant le code HTML, les feuilles de style CSS, un débogueur javascript, etc.
Question 6 Sur un site web quelconque, essayez l’interface de développement qui s’affiche quand on clique sur
“Examiner l’élément”. Repérez les balises que vous connaissez.
Il est recommandé d’utiliser le service de validation officiel mis à disposition par le W3C : 3 Sur ce site, il
est possible d’indiquer une URL, télécharger un fichier HTML ou taper directement du code HTML dans une
boîte de texte :https://validator.w3.org/#validate_by_upload.
3. W3C est l’acronyme de World Wide Web Consortium. Ce consortium est formé par des représentants de plusieurs grandes
entreprises et institutions gouvernementales. C’est une organisation internationale qui gère les standards du web comme HTML,
HTTP, XML, etc.
2
Question 7 Copiez le document HTML ci-dessous dans le validateur du W3C. Quels sont les messages d’erreur
affichés ? Corrigez toutes les erreurs jusqu’à ce que le document soit validé sans erreurs. 4
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h1>Titre 1</h2>
<h2>Titre 2
</body>
</html>
Question 8 Validez et corrigez les erreurs des 2 pages HTML que vous avez créées pour les questions précédentes.
5
Images
L’insertion d’une image se fait avec une balise orpheline, notée <img />, accompagnée des deux attributs src
et alt. La balise complétée de ses attributs se note <img src="urlDeLImage" alt="titre alternatif" />.
L’attribut src permet d’indiquer l’URL ou le chemin relatif de l’image. Il fonctionne exactement comme l’attribut href des hyperliens. Par exemple, si le répertoire où se trouve le fichier HTML contient un sous-répertoire
images, contenant lui-même une image monImage.png, nous pouvons alors taper src="images/monImage.png".
L’attribut alt est obligatoire et désigne un texte alternatif à afficher à la place de l’image, si jamais celle-ci
ne peut être téléchargée. La balise d’insertion d’une image doit toujours se trouver dans un paragraphe, entre
les balises <p> et </p>.
Question 9 Téléchargez sur le web 2 images au choix. Insérez-les dans votre fichier HTML. Testez votre page
avec votre navigateur pour observer le résultat.
6
Listes
Une liste est un paragraphe structuré contenant une suite d’articles (items). En HTML, une liste ordonnée,
c’est-à-dire, numérotée, se définit à l’aide d’une paire de balises <ol>...</ol>. Une liste non ordonnée, c’està-dire, une liste à puces, se définit à l’aide d’une paire de balises <ul>...</ul>.
Un article de la liste s’écrit entre les deux balises<li> et </li>, elles-même devant se trouver à l’intérieur
d’une liste délimitée par ol ou ul, suivant le type de liste qu’on emploie.
Question 10 Écrivez une liste ordonnée et une liste non ordonnée dans le corps de votre page HTML. Écrivez
ensuite une hiérarchie de listes (ordonnées ou non), c’est-à dire, une liste dont les articles sont d’autres listes.
7
Tableaux
Il est parfois utile de présenter des informations mieux structurées qu’avec des listes. Notamment, lorsqu’on
est sur le point de déclarer des listes de listes, la question de l’utilisation d’un tableau se pose.
En HTML, un tableau se construit de la manière suivante :
— Le contenu du tableau est délimité par les balises <table border="1"> et </table>.
— Entre ces deux balises, une ligne du tableau est déclarée avec la paire de balises <tr> et </tr>.
— Dans une ligne tr, une cellule est déclarée avec la paire de balises <td> et </td>.
Il est possible de définir une ligne d’en-tête du tableau, afin de mettre un titre à chacune de ses colonnes.
Cette ligne se distingue des autres par le fait que les cellules se déclarent avec <th> au lieu de <td>.
Enfin, la légende du tableau se déclare avec la paire de balises <caption> et </caption>, à insérer entre
<table border="1"> et </table>.
Question 11 Déclarez dans le corps de votre fichier HTML un tableau avec des données de votre choix. Écrivez
un titre pour ce tableau et testez le fichier avec votre navigateur.
4. Le langage HTML est très permissif. On peut oublier les balises fermantes, mélanger majuscules et minuscules, etc. Ainsi,
une page qui s’affiche correctement peut ne pas être strictement correcte, d’où l’importance de la validation.
3
8
Pour aller plus loin : Élements d’HTML 5
La dernière révision d’HTML vous propose de nouvelles balises afin de mieux structurer le code de vos pages,
dont voici un échantillon :
— <article> : Englobe un contenu autonome et indépendant de la page.
— <aside> : Définit un contenu complémentaire dans le document, qui est généralement placé sur le côté
de la page.
— <header> : Définit une introduction, une en-tête ou un groupe d’éléments de navigation pour un document.
— <section> : Permet de segmenter des portions du document en fonction de leurs thématiques.
— <footer> : Définit le pied de page d’un document ou d’un article.
— <nav> : Définit un menu avec des liens de navigation. Ce menu peut par exemple être disposé à l’intérieur
d’une paire de balise <header> ... </header> ou bien <aside> ... </aside>.
Question 12 Structurez le corps de votre fichier HTML avec une paire de balises <header>, plusieurs paires de
balises <section>, et enfin une paire de balises <footer>. Ajoutez le contenu textuel de votre choix à l’intérieur
de ces balises.
Question 13 A l’aide de la paire de balises <nav>, ajoutez un menu à votre en-tête. Vous pourrez décrire ce
menu à l’aide d’une liste ou d’un tableau.
4
