### Cours HTML facile
Introduction
HTML (HyperText Markup Language) est le langage standard utilisé pour créer des pages web. Ce cours vous guidera à travers les bases et les concepts avancés du HTML, vous permettant de créer et de structurer des pages web efficacement.
---
1. Les Bases du HTML
1.1. Qu'est-ce que HTML ?
HTML est un langage de balisage utilisé pour structurer le contenu sur le web. Il utilise des balises pour décrire différents éléments sur une page web.
1.2. Structure de base d'un document HTML
Chaque document HTML commence par une déclaration de type de document et est structuré avec des balises HTML.
```html
<!DOCTYPE html>
<html>
<head>
<title>Titre de la Page</title>
</head>
<body>
<h1>Bienvenue sur mon site web</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
```
- `<!DOCTYPE html>` : Indique que le document est en HTML5.
- `<html>` : Conteneur pour tout le contenu HTML.
- `<head>` : Contient des méta-informations, le titre de la page, les liens vers les styles, etc.
- `<body>` : Contient le contenu visible de la page.
#### 1.3. Les balises HTML les plus courantes
- `<h1> à <h6>` : Balises de titre.
- `<p>` : Balise de paragraphe.
- `<a>` : Balise de lien.
- `<img>` : Balise d'image.
- `<ul>`, `<ol>`, `<li>` : Balises de listes (non ordonnées et ordonnées).
### 2. Les Éléments de Texte et de Média
#### 2.1. Les titres et les paragraphes
Les titres sont définis avec `<h1>` à `<h6>`, et les paragraphes avec `<p>`.
```html
<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<p>Ceci est un paragraphe.</p>
```
#### 2.2. Les liens
Les liens hypertextes sont créés avec la balise `<a>`.
```html
<a href="https://www.example.com">Visitez Example.com</a>
```
#### 2.3. Les images
Les images sont insérées avec la balise `<img>`.
```html
<img src="image.jpg" alt="Description de l'image">
```
### 3. Les Listes
#### 3.1. Listes non ordonnées
Les listes non ordonnées utilisent la balise `<ul>`.
```html
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
```
#### 3.2. Listes ordonnées
Les listes ordonnées utilisent la balise `<ol>`.
```html
<ol>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ol>
```
### 4. Les Tableaux
Les tableaux sont créés avec les balises `<table>`, `<tr>`, `<th>`, et `<td>`.
```html
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</table>
```
### 5. Les Formulaires
Les formulaires sont utilisés pour recueillir des données utilisateur et sont créés avec la balise `<form>`.
```html
<form action="/submit" method="post">
<label for="name">Nom:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Envoyer">
</form>
```
### 6. Les Attributs Globaux
Les attributs globaux peuvent être ajoutés à la plupart des balises HTML pour fournir des informations supplémentaires.
- `class` : Pour appliquer des styles CSS.
- `id` : Pour identifier un élément unique.
- `style` : Pour ajouter des styles CSS en ligne.
- `title` : Pour fournir des informations supplémentaires sur l'élément.
### 7. Les Éléments Sémantiques
Les éléments sémantiques fournissent un sens plus précis sur le contenu qu'ils contiennent.
- `<header>` : En-tête de page ou de section.
- `<nav>` : Section de navigation.
- `<article>` : Contenu autonome.
- `<section>` : Section thématique.
- `<footer>` : Pied de page.
### 8. Les Pratiques Avancées
#### 8.1. Les balises meta
Les balises meta sont utilisées pour fournir des métadonnées sur le document HTML.
```html
<meta charset="UTF-8">
<meta name="description" content="Cours HTML complet">
<meta name="keywords" content="HTML, cours, tutoriel">
<meta name="author" content="Votre Nom">
```
#### 8.2. Le responsive design
Utiliser des techniques de responsive design pour assurer que la page soit adaptée à tous les appareils.
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
### Exercice Pratique
Pour mettre en pratique ce que vous avez appris, créez une simple page web en HTML en copian le code ci dessous, l'enregistrer dans un fichier nommez exo.html
Et modifier les éléments suivants :
1. Un titre principal de la page (mettre votre nom a la place).
4. Une liste non ordonnée de vos passe-temps.
#### Exemple
```html
<!DOCTYPE html>
<html>
<head>
<title>Ma Page Web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Bienvenue sur ma page web</h1>
</header>
<section>
<h2>Introduction</h2>
<p>Ceci est une simple page web créée pour un exercice HTML.</p>
</section>
<section>
<h2>Image</h2>
<img src="votre_image.jpg" alt="Description de l'image">
</section>
<section>
<h2>Passe-temps</h2>
<ul>
<li>Lecture</li>
<li>Voyage</li>
<li>Programmation</li>
</ul>
</section>
<section>
<h2>Contact</h2>
<form action="/submit" method="post">
<label for="name">Nom:</label>
<input type="text" id="name" name="name">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Envoyer">
</form>
</section>
</body>
</html>
```
### Conclusion
Ce cours HTML couvre les bases et les concepts du HTML. En suivant ce guide et en réalisant l'exercice pratique, vous serez capable de créer des pages web structurées et professionnelles. Continuez à pratiquer et à explorer davantage pour maîtriser le HTML.