Cours SNT - Introduction à HTML
Histoire du HTML
HTML (HyperText Markup Language) est né en 1991, créé par Tim Berners-Lee pour structurer et partager des documents sur
le World Wide Web. En évolution constante, HTML est passé de simples balises de texte à un outil puissant permettant
d'intégrer des médias, de structurer des données, et de créer des sites interactifs. La version actuelle, HTML5,
introduit des fonctionnalités avancées comme les balises multimédia et une meilleure accessibilité.
Syntaxe de base
HTML utilise des balises pour structurer le contenu.
Chaque balise est entourée de chevrons <> et se compose d’une balise ouvrante et d’une balise fermante (ex. : <p>...
</p>). Certaines balises, comme <img>, sont autofermantes.
Exemple :
```html
<!DOCTYPE html>
<html>
<head>
<title>Page de test</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Ceci est un paragraphe d'exemple.</p>
</body>
</html>
```
Éléments principaux en HTML
1. **Titres** :
Utilisés pour structurer le contenu en niveaux hiérarchiques (h1 le plus important).
```html
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
```
2. **Paragraphe** :
Pour du texte classique.
```html
<p>Ceci est un paragraphe.</p>
```
3. **Images** :
Pour afficher des illustrations.
```html
<img src="image.jpg" alt="Description de l'image">
```
4. **Listes** :
- Liste ordonnée :
```html
<ol>
<li>Élément 1</li>
<li>Élément 2</li>
</ol>
```
- Liste non ordonnée :
```html
<ul>
<li>Élément A</li>
<li>Élément B</li>
</ul>
```
5. **Liens hypertextes** :
Pour naviguer entre les pages.
```html
<a href="https://example.com">Cliquez ici</a>
```
6. **Tableaux** :
Pour afficher des données en ligne et colonne.
```html
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Jean</td>
<td>25</td>
</tr>
</table>
```
7. **Divisions (div)** :
Pour regrouper du contenu et le styliser avec CSS.
```html
<div>
<h2>Section</h2>
<p>Contenu de la section.</p>
</div>
```
8. **Formulaires** :
Pour collecter des données utilisateur.
```html
<form action="/submit" method="post">
<label for="name">Nom :</label>
<input type="text" id="name" name="name">
<button type="submit">Envoyer</button>
</form>
```
---
### **Exercice pratique**
Créer une page HTML simple contenant :
1. Un titre principal et un sous-titre.
2. Un paragraphe décrivant une passion.
3. Une image.
4. Une liste de 3 éléments.
5. Un lien vers un site favori.
**Code de départ** :
```html
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML</title>
</head>
<body>
<h1>Bienvenue dans mon univers</h1>
<h2>Introduction</h2>
<p>J'adore apprendre le HTML et créer des pages web !</p>
<img src="example.jpg" alt="Exemple">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<a href="https://example.com">Visitez mon site favori</a>
</body>
</html>
```