Feuille de Cheat HTML
Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde du HTML, la colonne vertébrale de chaque site web que vous avez jamais visité. En tant que quelqu'un qui enseigne le HTML depuis plus d'une décennie, je peux vous dire qu'il n'est pas aussi intimidant qu'il pourrait sembler au premier abord. En fait, j'aime penser au HTML comme les blocs de Lego d'Internet - des pièces simples qui, une fois assemblées, peuvent créer quelque chose d'incroyable !
Table des Matières
Avant de commencer notre voyage, jetons un coup d'œil rapide à ce que nous allons couvrir :
- Balises de Base
- Attributs du Body
- Balises de Texte
- Liens
- Formatage
- Listes
- Éléments Graphiques
- Formulaires
- Tableaux
- Attributs des Tableaux
- Attributs de la Balise input HTML5
- Éditeur et Formateur HTML
Maintenant, mettons les manches à l'eau et commençons à construire !
Balises de Base
Chaque document HTML commence par quelques balises essentielles. Pensez-y comme la fondation de votre page web :
<!DOCTYPE html>
<html>
<head>
<title.Ma Première Page Web</title>
</head>
<body>
Bonjour, le monde !
</body>
</html>Reprenons cela :
-
<!DOCTYPE html>indique au navigateur que c'est un document HTML5. -
<html>est l'élément racine de la page. -
<head>contient les métadonnées sur le document. -
<title>spécifie un titre pour le document. -
<body>définit le corps du document, où va tout le contenu visible.
Attributs du Body
La balise <body> peut avoir divers attributs pour contrôler l'affichage du contenu. Voici quelques-uns des plus courants :
| Attribut | Description |
|---|---|
| bgcolor | Définit la couleur de fond |
| background | Définit une image de fond |
| text | Définit la couleur du texte |
Exemple :
<body bgcolor="lightblue" text="navy">
Bienvenue dans mon monde bleu !
</body>Cela créera une page avec un arrière-plan bleu clair et du texte en bleu marine. C'est comme peindre votre chambre, mais pour des sites web !
Balises de Texte
HTML propose plusieurs balises pour formater le texte. Voici quelques-unes des plus courantes :
| Balise | Description |
|---|---|
<h1> à <h6>
|
Titres (h1 est le plus grand, h6 le plus petit) |
<p> |
Paragraphe |
<br> |
Saut de ligne |
<strong> |
Texte en gras |
<em> |
Texte en italique |
Exemple :
<h1>Bienvenue sur Mon Site Web</h1>
<p>Cette est une déclaration <strong>en gras</strong>.</p>
<p>Ceci est un point <em>mis en avant</em>.</p>Liens
Les liens sont ce qui rend le web, eh bien, un web ! Voici comment les créer :
<a href="https://www.example.com">Cliquez-moi !</a>L'attribut href spécifie l'URL de la page vers laquelle pointe le lien. Vous pouvez également lier à des parties spécifiques d'une page en utilisant des IDs :
<h2 id="section2">Section 2</h2>
<a href="#section2">Aller à la Section 2</a>Formatage
HTML offre divers moyens de formater votre texte au-delà de gras et d'italique. Voici quelques autres :
| Balise | Description |
|---|---|
<sup> |
Texte en exposant |
<sub> |
Texte en indice |
<pre> |
Texte préformaté |
<code> |
Extrait de code |
Exemple :
<p>H<sub>2</sub>O est de l'eau.</p>
<p>2<sup>3</sup> égale 8.</p>
<pre>
Ce texte
est préformaté.
</pre>
<pVoici du <code>code en ligne</code>.</p>Listes
Les listes aident à organiser l'information. Il y a trois types en HTML :
- Listes non ordonnées (
<ul>) - Listes ordonnées (
<ol>) - Listes de définition (
<dl>)
Exemple :
<ul>
<li>Pommes</li>
<li>Bananes</li>
<li>Cerises</li>
</ul>
<ol>
<li>Première étape</li>
<li>Deuxième étape</li>
<li>Troisième étape</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Éléments Graphiques
Les images peuvent rendre votre site web vivant. Voici comment les ajouter :
<img src="chat.jpg" alt="Un chat mignon" width="300" height="200">L'attribut src spécifie le fichier de l'image, alt fournit un texte alternatif pour les lecteurs d'écran ou si l'image échoue à charger, et width et height définissent les dimensions.
Formulaires
Les formulaires permettent aux utilisateurs de saisir des données. Voici un simple formulaire :
<form action="/soumettre-formulaire" method="post">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Soumettre">
</form>Cela crée un formulaire avec des champs nom et email, et un bouton de soumission.
Tableaux
Les tableaux sont utilisés pour afficher les données en lignes et colonnes :
<table border="1">
<tr>
<th>Entête 1</th>
<th>Entête 2</th>
</tr>
<tr>
<td>Ligne 1, Cellule 1</td>
<td>Ligne 1, Cellule 2</td>
</tr>
<tr>
<td>Ligne 2, Cellule 1</td>
<td>Ligne 2, Cellule 2</td>
</tr>
</table>Attributs des Tableaux
Les tableaux peuvent être personnalisés avec divers attributs :
| Attribut | Description |
|---|---|
| border | Définit la largeur de la bordure |
| cellpadding | Définit l'espace entre le contenu de la cellule et les bordures |
| cellspacing | Définit l'espace entre les cellules |
| width | Définit la largeur du tableau |
Attributs de la Balise input HTML5
HTML5 a introduit de nouveaux types et attributs d'entrée :
| Type/Attribut | Description |
|---|---|
| type="email" | Pour les adresses email |
| type="date" | Pour les sélecteurs de date |
| type="number" | Pour les entrées numériques |
| placeholder | Texte indicatif dans le champ d'entrée |
| required | Rend le champ obligatoire |
Exemple :
<input type="email" placeholder="Entrez votre email" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">Éditeur et Formateur HTML
Bien que vous puissiez écrire du HTML dans n'importe quel éditeur de texte, utiliser un éditeur HTML dédié peut rendre votre vie plus facile. Certaines options populaires incluent :
- Visual Studio Code
- Sublime Text
- Atom
Ces éditeurs offrent des fonctionnalités comme la coloration syntaxique et l'auto-completion, ce qui peut vous faire économiser beaucoup de temps et de maux de tête !
Conclusion
Et voilà, les amis ! Cette feuille de cheat HTML couvre les bases dont vous avez besoin pour commencer à créer vos propres pages web. Souvenez-vous, HTML n'est que le début. À mesure que vous progressez, vous voudrez apprendre CSS pour le style et JavaScript pour l'interactivité.
Apprendre le HTML, c'est comme apprendre une nouvelle langue - cela nécessite de la pratique. N'ayez pas peur d'expérimenter et de faire des erreurs. C'est ainsi que nous apprenons tous ! Et qui sait ? Peut-être que le prochain grand site web sera construit par vous !
Bonne programmation, et que vos balises soient toujours correctement fermées !
Credits: Image by storyset