6 juin 2024

Introduction à HTML

# 1 HTML, les nerfs de la guerre !


En effet, HTML est un langage de programmation qui permet de structurer un site internet. Nous allons voir ça de plus près.

Télécharger un éditeur de texte pour commencer à créer votre première page web. Je vous conseille Visual Studio Code (VSC).

Ouvrez l'éditeur, puis créer un fichier sous le nom d'index.html. On peut déjà constater que l'extention du fichier est spécifique (chaque langage de programmation à son extension).

Dans notre fichier entrer ceci :

<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</html>


Détaillons les différentes balises HTML :

<!DOCTYPE html>

La déclaration n'est pas une balise HTML. Il s'agit d'une "information" destinée au navigateur sur le type de document auquel il peut s'attendre. En HTML 5, la déclaration est simple.

<html lang="en">

L'élément HTML <html> permet d'ouvrir notre document et de définir la langue par défaut (très souvent anglais).

<head></head>

L'élément HTML <head> fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.

<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Pour les balises <meta>, je vous redirige vers ce lien pour en apprendre d'avantage : https://contentsquare.com/fr-fr/blog/meta-charset/

<title>Document</title>


La balise <title> permet de définir le titre de notre page internet, prenons l'exemple de ce site web, si vous regardez dans le haut de votre navigateur, vous aurez le nom de la page.

Et pour finir, nous avons les balises <body>

<body></body>

Elles servent à afficher le contenu que l'on déterminera. Donc si vous voulez essayer, mettez du texte entre les balises <body></body> et ouvrez le fichier index.html depuis votre navigateur. Le texte de celui-ci sera affiché.

2# Il y a plein d'autres balises HTML qui sont utilisés très régulièrement :

<p></p>

Le texte compris entre ses balises sera défini comme un paragraphe

<section></section>

Permet de séparer les différentes sections d'une page

<article></article>

Comme <section>, permet de séparer différents articles d'une page

<div></div>

Balise lambda qui permet d'isoler des éléments (pas de réel rôle)

Chaque balises à un rôle dans l'affiche et le référencement du site web. Si nous avions seulement des <div></div>, les robots Google ou autre service de référencement seraient perdu et ne pourraient pas savoir que votre site contient X articles.

Un site bien structuré, fait environ 60% du référencement.

Regardons un type de structure correcte :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<article>
<h1>Mon titre</h1>
<h2>Mon titre mais plus petit</h2>
<p>Mon paragraphe</p>
</article>
<article>
<h1>Mon titre2</h1>
<h2>Mon titre2 mais plus petit</h2>
<p>Mon paragraphe2</p>
</article>
</section>
<section>
<article>
<h1>Mon titre3</h1>
<h2>Mon titre3 mais plus petit</h2>
<p>Mon paragraphe3</p>
</article>
<article>
<h1>Mon titre4</h1>
<h2>Mon titre4 mais plus petit</h2>
<p>Mon paragraphe4</p>
</article>
</section>
</body>
</html>


Chaque section contient des articles et chaque article contient ses éléments. Je ne vous ai pas parlé des balises titre, il y en 6 au total allant de <h1></h1> à <h6></h6>, h1 étant le plus grand et h6 le plus petit.

Il nous manque encore deux grande balise importante !
La balise <header></header> qui contient très souvent le menu de navigation d'un site web (<nav></nav>) et la balise <footer></footer> qui elle contient tout le pied de page d'un site web.

Il faut également savoir qu'il n'y a pas qu'un seul footer ou header pareil pour toutes les balises. Vous pouvez en mettre autant que vous le désirez si votre projet le nécessite !

Mots clés:

intro html css

Cours Du Dev

Recevez les dernières formations disponibles en vous inscrivant à la newsletter

Créé par arkunis