Qu’est-ce que le HTML | Digital Ukhti

Que signifie HTML ?

HTML signifie HyperText Markup Language, soit langage de balisage hypertexte.

C’est le langage utilisé pour définir la structure et le contenu d’une page web.

Avec HTML, nous pouvons indiquer au navigateur quel élément est un titre ou un paragraphe, où placer une image et quel texte doit devenir un lien.

Important : HTML définit principalement la structure. Nous utiliserons ensuite CSS pour contrôler l’apparence visuelle de cette structure.

HTML utilise des balises.

La plupart des éléments HTML s’écrivent avec une balise ouvrante et une balise fermante.

Par exemple, un paragraphe :

<p>Ceci est mon premier paragraphe.</p>

La première balise ouvre l’élément :

<p>

La seconde le ferme :

</p>

Entre les deux, nous écrivons le contenu à afficher sur la page.

Quelques balises de base.

Inutile de mémoriser des centaines de balises. Nous commencerons par quelques-unes que vous utiliserez régulièrement.

<h1>

Définit le titre principal d’une page.

<p>

Définit un paragraphe de texte.

<a>

Permet de créer un lien.

La structure de base d’un document HTML.

Une page HTML commence par une structure de base que nous utiliserons presque toujours.

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Mon premier site</title>
</head>

<body>

  <h1>Ma première page web</h1>
  <p>J’apprends le HTML.</p>

</body>

</html>

Cela peut sembler beaucoup au début, mais nous allons comprendre chaque partie.

HTML, HEAD et BODY.

<html> contient l’ensemble du document HTML.

<head> contient les informations sur la page qui ne s’affichent généralement pas directement dans le contenu.

<body> contient tout ce que le visiteur verra : titres, textes, images, boutons et autres contenus.

Les titres ont une hiérarchie.

HTML propose six niveaux de titres :

<h1>Titre principal</h1>
<h2>Titre de section</h2>
<h3>Sous-titre</h3>
<h4>Niveau 4</h4>
<h5>Niveau 5</h5>
<h6>Niveau 6</h6>

Ne les choisissez pas uniquement selon leur taille visuelle. Les titres représentent l’organisation et la hiérarchie du contenu.

Nous utiliserons généralement un h1 pour le titre principal de chaque page et des h2 pour ses grandes sections.

Comment créer un lien.

Les liens permettent de relier les pages entre elles.

Nous utilisons la balise :

<a>

Par exemple :

<a href="contacto.html">Contact</a>

L’attribut href indique vers quelle page le lien doit mener.

Créez votre premier fichier HTML.

Nous allons maintenant créer quelque chose de concret.

Créez sur votre ordinateur un dossier nommé :

mi-primera-web

À l’intérieur, créez un fichier nommé :

index.html

Le nom index.html est important, car il est généralement utilisé pour la page principale d’un site web.

Écrivez votre première page.

Dans index.html, écrivez :

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Mon premier site</title>
</head>

<body>

  <h1>Bienvenue sur mon site</h1>

  <p>
    Ceci est ma première page créée avec HTML.
  </p>

</body>

</html>

Enregistrez le fichier et ouvrez-le dans votre navigateur.

Si tout est correct, vous verrez votre titre et votre premier paragraphe.

RÉSUMÉ

Ce que vous avez appris.

HTML définit la structure d’une page web.
HTML utilise des balises.
De nombreuses balises ont une ouverture et une fermeture.
HEAD contient les informations sur la page.
BODY contient le contenu visible.
Les titres organisent le contenu.
Les liens sont créés avec la balise <a>.
La page principale s’appelle généralement index.html.

MISE EN PRATIQUE

Construisez votre première page HTML.

Utilisez votre fichier index.html et ajoutez :

Un titre principal avec h1.
Un sous-titre avec h2.
Deux paragraphes.
Un lien.

Enregistrez ensuite le fichier et ouvrez-le à nouveau dans le navigateur pour vérifier les modifications.

Ne vous préoccupez pas du design. Pour le moment, la page sera très simple. Dans la leçon suivante, nous verrons comment CSS transforme son apparence.

Qu’est-ce que le HTML.