SI Web 1 Introduction HTML

Introduction au format de données HTML v 1.
Note : Ce support de travaux pratiques est librement inspiré de différents travaux qui sont cités
dans la partie « Sources », à la fin du présent document. Il est partagé sous licence libre.
HTML (HyperText Markup Language) n'est pas un langage de programmation, comme Python, PHP.
C'est un langage descriptif, c’est-à-dire un format de présentation des données. Pour éviter les confusions,
nous utiliserons le terme de « format de données ».
1. Le fichier HTML
La calculette éco-déplacement possède également une version Web (CEDjs) que nous étudierons plus tard
dans notre progression dans notre introduction au JavaScript. Cette application va encore une fois nous
servir de support à la découverte, cette fois-ci, du format de données HTML.
Travail à faire
1..1 Créer un sous-dossier Web dans le dossier $HOME/prog, puis ouvrir l’éditeur de texte
Geany.
1..2 Recopier le texte suivant en respectant autant que possible la mise en page.
Calculette Eco-déplacements
Calculez l'impact de vos déplacements quotidiens sur l'environnement et vos
dépenses
J'habite à 10 km de mon travail.

kg eq. CO2 l eq. pétrole
146.2 92.6
1..3 Sauvegarder la page dans le dossier Web sous le nom : demo.html
1..4 Ouvrir cette page avec un navigateur internet (clic droit via le navigateur de fichiers).
1..5 Que constatez-vous ? La mise en page a-t-elle été respectée ? L’accentuation des carac-
tères est-elle présentée correctement ?
À RETENIR : Pour écrire une page HTML, il ne suffit pas de taper le texte comme on le ferait
dans un traitement de texte (l’accentuation et la mise en page ne sont pas respectées). Aussi, Il
va falloir « décrire » la page HTML à l’aide de balises pour qu’elle soit interprétée correctement
par le navigateur internet.
2. Balisage correct d’un HTML

L’itération n°1 de l’application CEDjs a un site de démonstration hébergé sur les pages de Framagit. Nous
n’étudierons pas pour le moment la partie javascript. Nous allons modifier en ligne les données affichées.
Travail à faire
2..6 Ouvrir le site de démonstra-
tion avec votre navigateur
Web Firefox, puis lancer
l’inspecteur à partir du me-
nu et des « outils de déve-
loppement » ou encore avec
la combinaison de touches
du clavier : Ctrl + Maj + C
Vous remarquerez que les balises s'ouvrent
et se ferment dans un ordre précis. Par
BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 1 / 5

Introduction au format de données HTML v 1.2
exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la
fin du code, avec </html>).
Une page web est constituée de deux parties : l’en-tête <head> et le corps <body>.
Remarque : À tout moment, vous pouvez retrouver l’état initial de la page en appuyant sur la
touche F5 du clavier (on parle de rafraîchissement de l’affichage).
Travail à faire
Effectuer les opérations présentées ci-dessous et noter vos conclusions, réponses sur une feuille de papier.
2..7 Déplier la balise d’en-tête <head> et modifier la valeur encadrée par les balises <title>.
Que trouvez-vous de modifier à l’écran ? Quel effet produit la balise <title> ?
2..8 Dans le corps de la page, remplacer <h1> par <h5>. Quel effet produit la balise <h1> ?
2..9 Dans le corps de la page, remplacer <p> par <div> (qui est une balise neutre que nous
retrouverons plus tard dans notre progression). Quel effet produit la balise <p> ?
2..10 Déplier les balises <table>, <tbody>, <tr>, puis supprimer un des deux <td>. Quel effet
produit la balise <td> ?
2..11 Supprimer le dernier <tr>. Quel effet produit la balise <tr> ?
2..12 Déplier un des deux <td>, puis remplacer la balise <strong> par la base <span> (autre
balise neutre sur laquelle nous reviendrons plus tard). Quel effet produit la balise
<strong> ?
2..13 Replacer la balise <strong> ou <span> (selon l’état de rafraîchissement) par la balise
<em>. Quel effet produit la balise <em> ?
À RETENIR : Les balises sont encadrées par les chevrons < et >
Les balises ne sont pas affichées par le navigateur
Il y a deux types de balises :
Les balises « en paires » qui s’ouvrent et se referment plus loin comme :
<title> … </title>, qui balisent le titre apparaissant sur l’onglet du navigateur
<head> … </head>, qui balisent l’en-tête de la page
<body> … </body>, qui balisent la totalité du corps de la page
<h1> … </h1>, qui balisent les titres de niveau 1
<p> … </p>, qui balisent les paragraphes
Les balises « orphelines » qui s’ouvrent et se ferment aussitôt comme :
<meta… />, qui définit l’encodage des caractères et permet les caractères accentués
<br />, qui permet d’aller à la ligne
Voici donc la structure minimale d’une page Web :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon titre</title>
</head>
<body>
Voici le corps de ma page...
</body>

</html>
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit
bien d'une page web HTML. Ce n'est pas vraiment une balise comme les autres (elle commence par un
point d'exclamation).
L’indentation n'est pas obligatoire (cela n'a aucun impact sur l'affichage de la page), mais cela rend le
code source plus lisible et donne ainsi plus de chances d’obtenir un code valide (nous reviendrons plus
tard sur cette validation indispensable). Nous utiliserons donc cette indentation !
Exercice
2..14 Sur le modèle précédent, écrivez une
page HTML nommée Tim_Berners-
Lee.html, dans laquelle vous baliserez
une présentation de l’inventeur du
« World Wide Web » (voir la figure ci-
contre pour le résultat à obtenir).
3. Les principales balises HTML

Balisage HTML
…<br /> Retour à la ligne
<p> … </p> Création d’un paragraphe
<ol> … </ol> Création d’une liste numérotée
<ul> … </ul> Création d’une liste non numérotée
<li> … </li> Chaque élément d’une liste (numérotée ou
non), à imbriquer dans <ol>…</ol> ou <ul>…
</ul>
<h1> … </h1> Très gros titre
<h2> … </h2> Gros titre
<h3> … </h3> Moyen titre
<em> … </em> Mettre un peu en valeur (pas forcément en
italique)
<strong> … </strong> Mettre beaucoup en valeur (pas forcément en
gras)
<img src= "photo.jpg" /> Affichage de l’image photo.jpg (la source est
précisée avec l’attribut src)
 Commentaire (invisible à l’écran)
<a href="autrepage.html"> Nom du lien </a> Lien externe vers la page autrepage.html
<div id="monancre"></div> Création d’une ancre (l’attribut id peut être
porté par une autre balise)
<a href="#monancre"> Nom du lien </a> Lien interne vers l’ancre monancre située sur
la même page
Exercice
3..15 Ouvrir le fichier Tim_Berners-Lee.html

3..16 Baliser le nom de l’inventeur avec <h1>…</h1>, les titres « Biographie », « Carrière » et
« Titres et décorations » avec <h2>…</h2>, résumer au mieux le contenu des sections
précédentes avec les balises <p>…</p>.
3..17 Télécharger une photo de Tim Berners-Lee disponible en licence libre (résolution : 160
× 240 pixels).
3..18 Copier cette photo dans le dossier Web
3..19 Afficher la photo dans la section « Biographie ». Compléter cette section par un résu-
mé.
3..20 Compléter la section « Carrière » en résumant la carrière de l’inventeur.
3..21 Compléter la section « Titres et décorations » en listant trois titres que vous jugerez im-
portant.
3..22 Réaliser un sommaire avec des liens internes vers les différentes sections de niveau 2.
3..23 Compléter votre page en citant les auteurs et en mentionnant la licence en générant le
contenu via le formulaire Wikipedia (saisir le nom de la page ou utiliser le lien en bas
de page de Tim Berners-Lee, qui permet de remplir le formulaire automatiquement).
3..24 Compléter votre page avec des liens externes vers des pages de Wikipedia pertinentes
(lien vers les auteurs et la licence obligatoire).
Faîtes vérifier votre production finale par l’enseignant responsable.

Remarque : Vous retrouverez le résultat sur la branche correspondant à l’itération n°1 du dépôt
dédié.
4. Sources
• Site snt-ella, en licence Creative Commons by nc-sa
• Site OpenClassRooms, en licence Creative Commons by nc-sa

SI Web 1 Introduction HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SI Web 1 Introduction HTML

Transféré par

Droits d'auteur :

Formats disponibles

Introduction au format de données HTML v 1.

J'habite à 10 km de mon travail.

2. Balisage correct d’un HTML

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 1 / 5

Voici donc la structure minimale d’une page Web :

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 2 / 5

3. Les principales balises HTML

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 3 / 5

Faîtes vérifier votre production finale par l’enseignant responsable.

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 4 / 5

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – moulinux Page 5 / 5

Vous aimerez peut-être aussi