HTML signifie Hypertext Markup Language . C'est un langage spécifique utilisé pour créer des pages web. Lorsque vous visitez un site web, l'ordinateur lit le code HTML pour afficher le texte, les images et les liens. Considérez le HTML comme les éléments constitutifs d'un site web. Tout comme on utilise des Lego pour construire une maison ou une voiture, nous utilisons des balises HTML pour créer une page web.
Le HTML est le code qui indique à un ordinateur comment afficher du texte, des images, des vidéos et des liens sur une page web. C'est comme donner des instructions à un ami qui vous fait un dessin. Le HTML utilise des mots entre crochets angulaires, appelés balises , pour marquer le début et la fin d'une partie de la page web.
Chaque site web que vous visitez utilise le HTML d'une manière ou d'une autre. Sans HTML, aucune page web ne serait visible. HTML permet d'organiser le contenu et indique à l'ordinateur comment afficher la page. C'est la première chose que l'on apprend en développement web, car c'est grâce à lui qu'Internet fonctionne !
Un document HTML possède une structure particulière. Il commence par une déclaration appelée <code><!DOCTYPE html></code> qui indique à l'ordinateur que la page utilise du HTML. Le document est ensuite divisé en deux parties principales : l'en-tête et le corps.
Un document HTML très simple ressemble à ceci :
<code><!DOCTYPE html>
<html>
<tête>
<title>Ma première page Web</title>
</head>
<corps>
<p>Bonjour le monde !</p>
</body>
</html> </code>
Dans cet exemple, la section <head> donne le titre de la page et la section <body> est l'endroit où vous placez le contenu qui apparaît à l'écran.
Le HTML utilise des balises pour marquer les différentes parties d'une page web. Une balise est un mot entre crochets. Par exemple, <code><p></code> indique à l'ordinateur que ce qui suit est un paragraphe. Une fois le paragraphe terminé, utilisez la balise de fermeture <code></p></code> pour indiquer la fin.
En HTML, un élément se compose d'une balise d'ouverture, d'un contenu et d'une balise de fermeture. Par exemple :
<code><p>Ceci est un paragraphe.</p></code>
Chaque balise indique au navigateur Web comment afficher le contenu.
Le HTML comporte de nombreuses balises. Parmi les plus courantes, on trouve :
Les attributs fournissent des informations supplémentaires sur un élément HTML. Ils sont ajoutés à la balise d'ouverture, entre les chevrons de la balise. Les attributs les plus courants sont src et alt, utilisés avec la balise image.
Par exemple, pour ajouter une image, vous pouvez écrire :
<code><img src="picture.jpg" alt="Une belle image"></code>
Ici, src indique au navigateur où se trouve le fichier image et alt fournit une description de l'image si elle ne peut pas être affichée.
Le document HTML est divisé en deux parties :
Les liens permettent de passer d'une page à une autre. En HTML, on crée des liens à l'aide de la balise <a> . L'attribut href à l'intérieur de la balise indique au navigateur la destination du lien.
Par exemple:
<code><a href="https://www.example.com">Visitez Example.com</a></code>
Lorsque vous cliquez sur ce lien, votre navigateur ouvrira le site Web example.com .
Les images égayent une page web et la rendent plus intéressante. Pour ajouter une image, utilisez la balise <img> . Attention, la balise <img> n'a pas de balise de fermeture.
Voici comment ajouter une image :
<code><img src="sunflower.jpg" alt="Un tournesol lumineux"></code>
Ce code indique au navigateur d'afficher l'image d'un tournesol. L'attribut src pointe vers l'emplacement de l'image et l'attribut alt fournit une description de l'image.
Les listes organisent les informations dans un format clair. Il existe deux principaux types de listes en HTML :
Voici un exemple de liste non ordonnée :
<code><ul>
<li>Pomme</li>
<li>Banane</li>
<li>Cerise</li>
</ul> </code>
Et voici un exemple de liste ordonnée :
<code><ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
</ol> </code>
Les tableaux permettent d'afficher des informations en lignes et en colonnes. Ils sont utiles pour comparer des données ou répertorier des éléments dans une grille.
Voici un exemple simple de tableau HTML :
<code><table border="1">
<tr>
<th>Nom</th>
Âge
</tr>
<tr>
Alice
<td>10</td>
</tr>
</table> </code>
Dans ce tableau, <tr> définit une ligne de tableau, <th> est utilisé pour l'en-tête du tableau (texte en gras) et <td> est utilisé pour les données du tableau (les cellules).
Le HTML permet également d'ajouter du contenu multimédia comme du son et de la vidéo. La balise <audio> permet d'inclure des fichiers audio. La balise <video> permet d'intégrer des lecteurs vidéo à votre page web.
Voici un exemple de code d’intégration vidéo :
<code><vidéo width="320" height="240" contrôles>
<source src="movie.mp4" type="video/mp4">
</vidéo> </code>
Ce code crée un lecteur vidéo avec des boutons pour lire, mettre en pause et régler le volume. L'attribut controls indique au navigateur d'afficher ces boutons.
Tous les sites web sont conçus en HTML. Imaginez que vous visitiez le site web de votre école, un site de jeu ou que vous lisiez une histoire en ligne. HTML travaille en arrière-plan pour organiser le texte, les images et autres contenus afin que vous puissiez les visualiser clairement.
Par exemple, lorsque vous voyez une image de votre personnage de dessin animé préféré en ligne ou que vous cliquez sur un lien pour en savoir plus sur un sujet amusant, le HTML est là pour que cela fonctionne.
Prenons un projet simple. Imaginez que vous souhaitiez créer une petite page web sur votre animal préféré, comme un chat. Vous pouvez inclure un titre, un paragraphe sur les chats, une image et même un lien vers un site web avec des anecdotes amusantes sur les chats.
Votre code HTML pourrait ressembler à ceci :
<code><!DOCTYPE html>
<html>
<tête>
<title>Mon animal préféré</title>
</head>
<corps>
<h1>Tout sur les chats</h1>
<p>Les chats sont joueurs et doux. Ils adorent dormir et ronronner. Beaucoup de gens aiment avoir des chats comme animaux de compagnie.</p>
<img src="cat.jpg" alt="Un chat mignon">
<a href="https://www.catfacts.com">En savoir plus sur les chats</a>
</body>
</html> </code>
Ce projet utilise des titres, des paragraphes, des images et des liens. Il montre comment utiliser le HTML pour créer une page web complète composée de plusieurs parties.
Alors que HTML construit la structure d’une page Web, il existe d’autres outils qui permettent aux sites Web d’avoir une apparence et un comportement amusants.
Même si aujourd’hui nous apprenons le HTML, connaître le CSS et le JavaScript nous aide à comprendre comment les sites Web sont créés.
En explorant le HTML, vous découvrirez de nombreuses autres balises. En voici quelques-unes à connaître :
Ces balises vous donnent plus de contrôle sur la façon dont votre contenu apparaît sur une page Web.
Le HTML a beaucoup évolué depuis sa création. De nombreuses nouvelles balises et fonctionnalités ont été ajoutées au fil du temps. Chaque nouvelle version du HTML simplifie la création de sites web complexes et esthétiques. Aujourd'hui, le HTML s'associe aux CSS et à JavaScript pour créer des sites web modernes, agréables à utiliser et esthétiques.
Cette évolution signifie que HTML est à la fois facile à apprendre et suffisamment puissant pour créer tout, des pages Web simples aux applications Web complexes.
Apprendre le HTML est amusant, mais il est toujours important de rester en sécurité sur Internet. Lorsque vous visitez des sites web ou explorez du contenu en ligne, n'oubliez pas de demander l'aide d'un adulte en cas de doute. Votre sécurité est notre priorité, et apprendre le HTML doit toujours être une expérience amusante et sécurisée.
Examinons quelques termes importants que vous avez appris aujourd’hui :
Le HTML est utilisé dans de nombreux contextes réels. Voici quelques exemples :
Ces exemples montrent à quel point HTML est un outil très utile dans de nombreux domaines de la vie quotidienne.
Aujourd'hui, nous avons appris que HTML est l'abréviation de Hypertext Markup Language . C'est le langage de base utilisé pour créer des pages web. Voici les points clés à retenir :
Le HTML est la base de tout site web que vous voyez sur Internet. Avec des éléments simples comme les balises et les attributs, vous pouvez créer des pages ludiques et interactives. Au fil de votre apprentissage, vous découvrirez comment le HTML donne vie aux pages web, faisant d'Internet un espace utile et stimulant à explorer.
