📚
✨
✏
Cours complet : Introduction à HTML & structure d'une page
Objectifs
· Comprendre ce qu'est HTML et son rôle : HTML (HyperText Markup Language) est un
langage de balisage utilisé pour structurer le contenu des pages web.
· Comprendre la notion de balises et de structure : Les balises HTML définissent les
différents éléments d'une page et leur donnent un sens.
Points clés à expliquer
· HTML = langage de structuration, pas de programmation : Contrairement aux langages
comme JavaScript, HTML ne permet pas de créer des algorithmes ou des logiques
complexes. Il sert à organiser le contenu.
· Différence entre contenu et présentation : HTML s'occupe du contenu et de sa structure,
tandis que CSS gère l'apparence visuelle.
· Structure minimale d'un document HTML : Un document HTML valide doit contenir
certaines balises essentielles.
· Rôle de <head> et <body> :
· <head> : Contient les métadonnées (titre, liens CSS, etc.) non visibles directement sur la
page
· <body> : Contient tout le contenu visible de la page
TD 1 — Découvrir HTML pas à pas (guidé)
Exercice 1 — Observer et comprendre (lecture active)
```html
<!DOCTYPE html>
<html>
<head>
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Ceci est mon premier paragraphe.</p>
</body>
</html>
```
Travail demandé :
1. Identifiez :
· La balise racine : <html> (tout le document HTML est à l'intérieur)
· La balise contenant le titre de l'onglet : <title> (à l'intérieur du <head>)
· La balise contenant le contenu visible : <body> (tout ce qui s'affiche dans la page)
2. Que se passerait-il si on supprime la balise <body> ?
· Le contenu (<h1> et <p>) s'afficherait quand même dans la plupart des navigateurs, mais
ce serait une mauvaise pratique et pourrait causer des problèmes d'affichage ou
d'accessibilité. Le code ne serait pas valide selon les standards HTML.
---
Exercice 2 — Compléter un document HTML
```html
<!DOCTYPE html>
<html>
<head>
<title>TD HTML</title>
</head>
<body>
<h1>TD n°1</h1>
<p>Je découvre le langage HTML.</p>
</body>
</html>
```
Indication : Les balises manquantes étaient <head> et <body>.
---
Exercice 3 — Structurer un contenu textuel
Texte donné :
```
Le Web
Le Web permet de consulter des pages via Internet.
Il repose sur des technologies comme HTML, CSS et JavaScript.
```
Transformation en HTML :
```html
<h1>Le Web</h1>
<p>Le Web permet de consulter des pages via Internet.</p>
<p>Il repose sur des technologies comme HTML, CSS et JavaScript.</p>
```
Question : Pourquoi ne pas utiliser uniquement des paragraphes ?
· Utiliser uniquement des paragraphes (<p>) ne donne pas de structure sémantique claire. Le
titre principal (<h1>) indique que c'est le sujet principal de la section, ce qui est important
pour :
1. L'accessibilité : les lecteurs d'écran comprennent mieux la structure
2. Le référencement (SEO) : les moteurs de recherche comprennent mieux le contenu
3. La hiérarchie visuelle : les utilisateurs identifient plus facilement les différentes parties
---
TP 1 — Créer sa première page HTML
Objectif
Créer une page personnelle simple et comprendre la structure HTML.
Étape 1 — Préparation
1. Créez un dossier nommé tp1_html
2. Créez un fichier [Link]
3. Ouvrez-le dans un navigateur (double-cliquez sur le fichier)
Étape 2 — Structure obligatoire
```html
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML</title>
</head>
<body>
<!-- Le contenu viendra ici -->
</body>
</html>
```
Étape 3 — Contenu demandé
```html
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML</title>
</head>
<body>
<h1>Marie Dubois</h1>
<p>Bonjour ! Je suis étudiante en développement web. J'apprends actuellement les bases
du HTML et du CSS. J'aime créer des sites web simples mais élégants, et je souhaite
approfondir mes connaissances pour pouvoir concevoir des applications web complètes.</p>
<h2>Pourquoi j'apprends le HTML</h2>
<p>J'apprends le HTML car c'est la base de tout développement web. Comprendre
comment structurer correctement une page web est essentiel avant d'ajouter du style avec
CSS ou des interactions avec JavaScript. Je souhaite créer des sites accessibles et bien
structurés.</p>
</body>
</html>
```
Étape 4 — Auto-vérification
· La page s'affiche correctement
· Les titres sont hiérarchisés (h1 puis h2)
· Le code est bien indenté (chaque niveau décalé avec 2 espaces)
---
À retenir
· Une page HTML est un document structuré
· Les balises donnent du sens au contenu
· Toujours respecter la structure de base
---
Liens, images et listes
Notions clés
· Balise <a> et attribut href : Crée un lien hypertexte
· Chemins relatifs vs absolus :
· Relatif : [Link] (fichier dans le même dossier)
· Absolu : [Link] (adresse complète)
· Balise <img> et importance de alt :
· src : chemin vers l'image
· alt : texte alternatif (important pour l'accessibilité et le SEO)
· Listes ordonnées et non ordonnées :
· <ul> : liste non ordonnée (à puces)
· <ol> : liste ordonnée (numérotée)
· <li> : élément de liste (commun aux deux)
---
TD 2 — Manipuler les éléments multimédias
Exercice 1 — Comprendre les liens
```html
<a href="[Link]">Page 2</a>
```
1. Vers quoi pointe ce lien ?
· Vers un fichier nommé [Link]
2. Que faut-il créer pour qu'il fonctionne ?
· Un fichier [Link] dans le même dossier
3. Où doit se trouver ce fichier ?
· Dans le même dossier que la page contenant ce lien
---
Exercice 2 — Corriger une image
```html
<img src="[Link]">
```
Correction :
```html
<img src="[Link]" alt="Description de la photo">
```
À quoi sert l'attribut alt ?
· Fournit un texte alternatif si l'image ne charge pas
· Essentiel pour l'accessibilité (lecteurs d'écran)
· Important pour le référencement (SEO)
---
Exercice 3 — Choisir la bonne liste
· Étapes d'une recette : Liste ordonnée (<ol>) - l'ordre est important
· Liste de pays : Liste non ordonnée (<ul>) - pas d'ordre particulier
· Classement des meilleurs étudiants : Liste ordonnée (<ol>) - l'ordre (classement) est
important
---
TP 2 — Mini-site personnel
Objectif
Créer un site de 2 pages reliées par des liens.
Structure des fichiers :
```
tp2_site_personnel/
├── [Link]
├── [Link]
└── images/
└── [Link]
```
Fichier [Link] :
```html
<!DOCTYPE html>
<html>
<head>
<title>Accueil - Mon Site</title>
</head>
<body>
<!-- Menu de navigation -->
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Mes hobbies</a></li>
</ul>
</nav>
<h1>Bienvenue sur mon site</h1>
<img src="images/[Link]" alt="Ma photo de profil" width="200">
<h2>À propos de moi</h2>
<p>Je m'appelle Marie et j'apprends le développement web.</p>
<h2>Liens utiles</h2>
<p>Visitez <a href="[Link] target="_blank">MDN Web Docs</a>
pour apprendre le web développement.</p>
</body>
</html>
```
Fichier [Link] :
```html
<!DOCTYPE html>
<html>
<head>
<title>Mes Hobbies</title>
</head>
<body>
<!-- Menu de navigation identique -->
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Mes hobbies</a></li>
</ul>
</nav>
<h1>Mes hobbies</h1>
<h2>Mes activités préférées</h2>
<ul>
<li>Programmation web</li>
<li>Lecture</li>
<li>Randonnée</li>
<li>Photographie</li>
</ul>
<h2>Sites que je visite souvent</h2>
<ol>
<li><a href="[Link] target="_blank">GitHub</a></li>
<li><a href="[Link] target="_blank">Stack Overflow</a></li>
<li><a href="[Link] target="_blank">CSS-Tricks</a></li>
</ol>
</body>
</html>
```
Vérification finale :
· Tous les liens fonctionnent
· Les images s'affichent (avec le bon chemin)
· L'attribut alt est renseigné sur toutes les images
· La navigation est identique sur les deux pages
---
Conseils supplémentaires
1. Validation du code : Utilisez le validateur HTML du W3C ([Link])
2. Bonnes pratiques :
· Toujours fermer les balises
· Utiliser l'indentation pour la lisibilité
· Choisir des noms de fichiers sans espaces ni accents
3. Prochaines étapes :
· Apprendre CSS pour styliser vos pages
· Découvrir les balises sémantiques HTML5 (<header>, <main>, <footer>, etc.)
· Explorer les formulaires HTML
N'hésitez pas à expérimenter en modifiant le code et en observant les changements dans le
navigateur !