Apprendre une nouvelle langue demande du temps et de la discipline.
Que vous étudiiez l'italien avant votre escapade européenne ou que vous terminiez vos devoirs en espagnol, il y a beaucoup à faire pour lire, écrire et parler une langue que vous n'utilisez pas régulièrement.
On peut en dire autant de l'apprentissage du HTML pour coder un site web. Bien que vous n'ayez pas nécessairement besoin d'apprendre à parler HTML pour l'utiliser, vous devrez identifier les composants du HTML, ce qu'ils signifient et comment ils apparaîtront sur une page web. Apprendre le HTML est également une partie essentielle de la construction de sites web.
Qu'est-ce que le HTML ?
HTML signifie langage de balisage hypertexte. C'est le langage de balisage standard pour les pages web qui définit la structure du contenu. Ces éléments sont les blocs de construction de tout site web.
Qu'est-ce que le HTML ?
HTML permet aux utilisateurs de créer et de structurer des sections, des titres, des liens, des paragraphes, et plus encore, sur un site web en utilisant divers tags et éléments. Presque tout ce que vous voulez créer sur une page web peut être fait en utilisant un code HTML spécifique.
Bien que vous puissiez penser que le HTML est compliqué, ou dire « J'ai oublié un symbole et tout a été chamboulé ! », le HTML est très similaire à l'apprentissage d'une nouvelle langue. Mais une fois que vous aurez pris le coup, cela vous semblera naturel, et vous créerez des pages web en utilisant le HTML en un rien de temps. Prêt à en apprendre plus ? Continuez simplement à lire.
Vous voulez en savoir plus sur Développeurs Web ? Découvrez les produits Développeurs Web.
Comment fonctionne le HTML ?
Je suis sûr à 100 % que vous avez consulté un site web qui utilise du code HTML. Comment le sais-je ? Cet article est composé de balises et d'éléments HTML en arrière-plan.
Ce navigateur n'affiche pas les balises HTML réelles mais les utilise pour rendre un contenu spécifique sur la page afin que les visiteurs du site web puissent le voir. En général, le site web moyen comprend plusieurs pages différentes avec du code HTML, comme la page d'accueil, la page à propos de nous, et la page de contact, chacune avec ses propres documents HTML uniques.
Éléments HTML
L'anatomie d'un élément HTML se compose d'une balise d'ouverture, d'une balise de fermeture et du contenu entre les deux. Pensez à ces éléments comme des blocs de construction pour les pages HTML.
Ces balises sont des noms d'éléments entourés de crochets angulaires, dans ce cas <p>, signifiant paragraphe.
La première balise est votre balise d'ouverture, la seconde est la balise de fermeture. Elles doivent être écrites de la même manière, sauf que la balise de fermeture aura une barre oblique avant le nom de la balise. Le contenu entre ces deux balises sera affiché au format paragraphe sur le site web.
Astuce : Vous voulez apprendre à extraire des données avec vos nouvelles connaissances en HTML ? Consultez notre guide sur le Web Scraping maintenant ! Vous pouvez également consulter ce guide complet sur la construction de sites web.
Balises HTML courantes
Il existe de nombreuses balises HTML courantes qui sont souvent utilisées dans la création d'une page web. Voici quelques-unes des balises fréquemment utilisées pour construire une page web du début à la fin.
Type de document
La déclaration de type de document aide les navigateurs à afficher correctement votre page web. Elle n'apparaîtra qu'une seule fois, tout en haut de la page.
Tous les documents HTML commencent par le code qui déclare le document. Cette balise ressemble à ceci :
<!DOCTYPE html>
Cela peut sembler déroutant, mais en gros, mettez simplement cela en haut de votre document et continuez à construire.
Balise HTML
Comme vous l'avez peut-être deviné, cette balise s'écrit ainsi : <html>.
Cet élément enveloppe tout le contenu de la page entière, et vous pouvez l'entendre être appelé l'élément racine. Cette balise sera sous la balise de document et devra être fermée, en utilisant </html>, à la fin de la page web.
Balise de titre
Quel est le titre de la page que vous créez ? Quel qu'il soit, il sera enveloppé dans l'élément <title> et se trouvera vers le haut de vos balises.
<title>Titre de la page</title>
Balise de corps
L'élément <body> contient tout le contenu que vous souhaitez montrer aux visiteurs de votre page web. Cela inclut du texte, des images, des vidéos, des pistes audio jouables, et plus encore. Il devra également être fermé, en utilisant </body>, à la fin de la page web.
Balise de titre
Cela s'écrit <h1> et cela définit un titre plus grand sur la page. Vous pouvez avoir plus d'une balise de titre et chaque élément aura un numéro correspondant.
<h1>Ceci est un titre.</h1>
<h2>Ceci est aussi un titre.</h2>
Balise de paragraphe
La balise de paragraphe définit quel texte sera affiché comme un paragraphe en utilisant l'élément <p>.
<p>Ceci est un paragraphe sur les chiens.</p>
<p>Ceci est un autre paragraphe sur les chiens.</p>
Listes
Utiliser la balise <ul> définira quel texte sera écrit comme une liste numérotée <ol> ou une liste à puces <li>.
Un exemple de liste à puces serait :
<ul>
<li>Farine</li>
<li>Sucre</li>
<li>Beurre</li>
</ul>
Utiliser ce code ferait apparaître le texte sur la page web comme :
- Farine
- Sucre
- Beurre
Balise de langue
La langue du document est définie par la balise "lang". Si votre page sera affichée en anglais, la balise serait :
<html lang=”en”>
Dans ce cas, le en représente l'anglais. D'autres balises de langue populaires sont es pour l'espagnol, fr pour le français, it pour l'italien, he pour l'hébreu, et zh pour le chinois.
Besoin que votre page web soit dans une autre langue ? Consultez cette liste de codes de langue HTML.
Images
Le début de votre élément d'image commencera par la balise <img>, mais il y a d'autres composants qui doivent être inclus.
Il y aura également des balises de fichier source (src), de texte alternatif (alt), et de largeur et hauteur. Si j'utilise une photo des Chicago Cubs qui fait 600 pixels de large et 450 pixels de haut, la balise d'image ressemblerait à :
<img src=”Chicago_Cubs.jpg” alt=”Chicago-Cubs” style=”width:600px;height:450px”>
Liens
Il y a une manière spécifique d'ajouter un lien dans votre texte en utilisant le HTML. Pour ce faire, utilisez l'élément <a>, qui est l'abréviation de ancre.
Dans ce cas, disons que mon texte d'ancrage est G2 Learning Hub.
<a>G2 Learning Hub</a>
Ensuite, donnez à l'élément <a> un attribut href avec des guillemets vides :
<a href= “ “G2 Learning Hub</a>
Astuce : Href signifie référence hypertexte.
Ensuite, remplissez la valeur de cet attribut (entre les guillemets) avec l'URL vers laquelle vous allez créer un lien.
<a href= “https://learn.g2crowd.com/G2”>Learning Hub</a>
Dictionnaire HTML
- <!DOCTYPE html> Type de document
- <html> Balise HTML
- <title> Balise de titre
- <body> Balise de corps
- <H1> Balise de titre
- <p> Balise de paragraphe
- <ul> Balise de liste
- <html lang="en"> Balise de langue anglaise
- <img> Balise d'image
- <a> Balise de lien d'ancre
Document HTML de base
Si je créais un document HTML de base contenant tous les éléments et balises listés ci-dessus, il ressemblerait à ceci :
<!DOCTYPE html>
<html>
<html lang=”en”>
<title>Titre de la page</title>
<body>
<h1>Ceci est votre premier en-tête</h1>
<p>Ceci est un texte de paragraphe qui se rapporte à votre premier en-tête.</p>
<h2>Ceci est votre deuxième en-tête</h2>
<p>Ceci est un texte de paragraphe qui se rapporte à votre deuxième en-tête.</p>
<ul>
<li>Liste</li>
<li>Liste</li>
<li>Liste</li>
</ul>
<img src=”Image.jpg” alt=”Texte-Alt-Image” style=”width:600px;height:450px”>
Cliquez sur le lien <a href= “https://learn.g2crowd.com/G2”>ici</a> pour être dirigé vers le G2 Learning Hub.
</body>
</html>
Connexe : En savoir plus sur JavaScript et comment vous pouvez pratiquer vos compétences !
Avantages du HTML
Il y a de nombreux avantages à utiliser le HTML pour créer une page web. Certains incluent :
- Langage de code largement utilisé avec une grande communauté qui l'utilise
- Fonctionne sur tous les navigateurs web
- Utilise un balisage propre et cohérent
- Entièrement gratuit et open source
Inconvénients du HTML
Comme toutes les choses qui ont un avantage, le HTML a aussi quelques inconvénients que vous devrez prendre en compte.
- Principalement utilisé pour les pages web statiques
- Toutes les pages web doivent être créées séparément, même si elles utilisent les mêmes éléments et balises
- Si vous utilisez un navigateur plus ancien, il peut ne pas rendre les balises nouvellement développées
Remontez vos manches et commencez à coder
Que vous soyez un expert ou un débutant dans la création de sites web, il y a de fortes chances que vous utilisiez le HTML pour créer diverses pages web. Même si vous vous sentez hésitant à écrire du code HTML au début, avec le temps, cela vous semblera naturel, et vous lirez et écrirez des lignes de code dans votre sommeil.
Maintenant que vous comprenez le HTML, vous pourriez être intéressé par l'apprentissage du CSS et du PHP. Ou consultez ces conseils pour coder des sites web !
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
