Introduction à HTML
Qu'est-ce que HTML ? :
HTML (HyperText Markup Language) est le langage standard utilisé pour créer des pages web. Il utilise des balises pour structurer et formater le contenu.
Premiers Pas :
Pour commencer avec HTML, ouvrez un éditeur de texte et créez un nouveau fichier avec l'extension .html. Écrivez le code suivant pour créer une page web basique :
<!DOCTYPE html>
<html>
<head>
<title>Ma première page web</title>
</head>
<body>
<h1>Bonjour le monde!</h1>
<p>Ceci est ma première page web en HTML.</p>
</body>
</html>Exercice :
Créer une page web avec un titre et un paragraphe décrivant votre passe-temps préféré.
<!DOCTYPE html>
<html>
<head>
<title>Mon Passe-temps Préféré</title>
</head>
<body>
<h1>Le Tennis</h1>
<p>J'adore jouer au tennis. C'est un excellent sport pour rester en forme et se divertir.</p>
</body>
</html>Les Éléments de Base
Les Titres :
Les titres sont définis avec les balises <h1> à <h6>, <h1> étant le plus important et <h6> le moins important.
Exemple :
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>Les Paragraphes :
Les paragraphes sont définis avec la balise <p>.
Exemple :
<p>Ceci est un paragraphe.</p>Les Liens :
Les liens hypertextes sont créés avec la balise <a> et l'attribut href.
Exemple :
<a href="https://www.example.com">Visitez Example</a>Exercice :
Créer une page web avec trois titres, deux paragraphes et un lien vers votre site préféré.
<!DOCTYPE html>
<html>
<head>
<title>Ma Page Web</title>
</head>
<body>
<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<p>Premier paragraphe de contenu.</p>
<p>Deuxième paragraphe de contenu.</p>
<a href="https://www.example.com">Visitez Example</a>
</body>
</html>Exemple de liste non ordonnée :
<ul>
<li>Élément A</li>
<li>Élément B</li>
<li>Élément C</li>
</ul>Exercice :
Créer une page web incluant une image, une liste ordonnée et une liste non ordonnée.
<!DOCTYPE html>
<html>
<head>
<title>Page avec Image et Listes</title>
</head>
<body>
<h1>Ma Page avec Image et Listes</h1>
<img src="image.jpg" alt="Une belle image">
<h2>Liste Ordonnée</h2>
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
<h2>Liste Non Ordonnée</h2>
<ul>
<li>Élément A</li>
<li>Élément B</li>
<li>Élément C</li>
</ul>
</body>
</html>