imageblog
Mohamed MACHTA

Introduction

Le HTML (HyperText Markup Language) est l'un des langages de programmation les plus connus et les plus anciens. Il a été créé pour concevoir des sites web et a depuis évolué pour répondre aux demandes des développeurs et des utilisateurs. Il est souvent moqué par les développeurs qui ne le considèrent pas comme un langage de programmation, ils n’ont pas tout à fait tort étant donné qu’il s’agit d’un langage de balisage.

Dans cet article, nous examinerons comment débuter en HTML et découvrir ses bases.

L’histoire de HTML

Le HTML a été inventé en 1990 par Tim Berners-Lee, un chercheur britannique qui travaillait pour le Conseil Européen pour la Recherche Nucléaire (CERN). Tim a créé le HTML pour permettre aux chercheurs de partager des informations sur leur travail et de communiquer avec leurs collègues. Le HTML est devenu public en 1991 et est devenu le langage de balisage le plus largement utilisé pour créer des sites web. En 1995, la World Wide Web Consortium (W3C) a été créée pour maintenir le HTML et développer des normes pour le web. Depuis lors, le HTML a évolué et de nouvelles versions de HTML ont été publiées. La dernière version en date est HTML5, qui a été publiée en 2014.

Point de départ

Afin de pouvoir écrire du code HTML, il vous faudra un éditeur de texte, pour l’expérience nous vous conseillons d’utiliser un éditeur de texte très populaire chez les développeurs lancé par Microsoft Visual Studio Code.


Microsoft Visual Studio Code

Microsoft Visual Studio Code

Créez votre première page

Après cela il vous faudra créer un dossier pour votre projet, et y insérer un fichier nommé “index.html”.

“index” est le mot clé permettant de déterminer un point de départ à votre projet afin de l’exécuter.

Pour exécuter un fichier HTML, il vous faudra un navigateur web.

Exécution

À chaque modification, vous devrez enregistrer votre fichier, puis rafraîchir le navigateur afin d’avoir votre rendu.

Bien heureusement, il existe une extension vous permettant de rafraîchir votre navigateur automatique après avoir sauvegardé votre fichier.


Extension “Live Server”

Cette extension se nomme Live Server elle est gratuit et vous permet d’éviter de rafraîchir votre page à chaque sauvegarde.


Lancer le server via l’extension

Une fois installée, vous la trouverez sur le bas droit de votre éditeur Visual Studio Code, cliquez dessus et une page se lancera sur votre navigateur par défaut.

Structure

Pour commencer avec le HTML, vous devez d'abord comprendre sa structure. Les documents HTML sont composés d'éléments qui définissent le contenu et sa présentation, et sont délimités par des balises. Les balises HTML sont des mots-clés entre des chevrons. Les balises peuvent contenir des attributs pour préciser leur effet.

Nous avons par exemple, un squelette de structure HTML, il servira de point de départ à tout projet incluant des pages écrites en langage HTML : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutoriel</title>
</head>
<body>
</body>
</html>

Nous allons le décortiquer et l’expliquer ligne par ligne:

  • Ligne 1 : Il s'agit du doctype HTML5, qui indique au navigateur qu'il s'agit d'un document HTML5.
  • Ligne 2 : C'est l'élément racine du document HTML, il contient tous les autres éléments HTML.
  • Ligne 3 : Ceci est l'élément head, il contient toutes les métadonnées du document HTML.
  • Ligne 4 : Ceci est un élément méta, il contient le codage des caractères du document.
  • Ligne 5 : Ceci est un élément méta, il indique au navigateur d'utiliser la dernière version du moteur de rendu.
  • Ligne 6 : Ceci est un élément méta, il indique au navigateur de définir le viewport à la largeur du dispositif et de le mettre à l'échelle à 100%.
  • Ligne 7 : Ceci est un élément title, il contient le titre du document HTML.
  • Ligne 9 : Ceci est l'élément body, il contient tout le contenu visible du document HTML.

Balises

Une fois que vous avez compris la structure HTML, vous devrez apprendre à étiqueter le contenu. Les balises HTML peuvent être utilisées pour étiqueter le contenu ainsi que pour ajouter des informations supplémentaires, telles que des classes ou des styles. Cela permet de définir le format du contenu, ainsi que sa présentation.

Fermer ses balises

En HTML, chaque balise ouverte doit être fermée :

...
  <header></header>
  <main></main>
  <footer></footer>
...
  • La balise “header” est généralement utilisée pour contenir l’en-tête de la page.
  • La balise “main” est généralement utilisée pour contenir le contenu principal de la page.
  • La balise “footer” est généralement utilisée pour contenir le pied de la page.

En-tête

...
<header>
  <nav>
      <h3>WeBeit</h3>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
  </nav>
</header>
...

Votre élément “header” pourra contenir un élément “nav” qui s’occupera de gérer la navigation sur votre page web.

À l’intérieur vous trouverez une balise “h3” que nous utiliserons comme logo.

Une balise “ul” qui signifie list non ordonnée, va contenir nos “li” qui représentent les éléments de notre liste, ils seront accompagnés par des éléments “a” qui serviront de liens avec un attribut “href” pour préciser la destination de ce dernier.

Contenu

En HTML, il existe des balises parent comme vu précédemment qui peuvent contenir des éléments enfant, le rôle de ces balises et de servir de conteneur pour leur éléments, cela pourra aider pour structurer leur positionnement mais aussi pour structurer le contenu de ces derniers. 

...
<header>
  <nav class="navigation flex align-items-center justify-between">
      <h3 class="logo">WeBeit</h3>
      <ul class="flex align-items-center">
        <li><a href="#" class="link">Accueil</a></li>
        <li><a href="#" class="link">A propos</a></li>
        <li><a href="#" class="link">Contact</a></li>
      </ul>
  </nav>
</header>
<main>
  <section id="hero">
      <div class="right-side">
        <h1 class="main-title">Ce Tutoriel vous est proposé par WeBeit.</h1>
        <p class="description">WeBeit est une agence digitale qui accompagne ses clients.</p>
        <button class="cta">Nous contacter</button>
      </div>
      <div class="left-side">
        <img src="https://webeit.fr/img/img_1.png" class="illustration" height="300" alt="Deux personnes en train d'utiliser du matériel technologique."/>
      </div>
  </section>
</main>
<footer>
  <p>© 2022 WeBeit</p>
</footer>
...
<ul> <li> Les “section” sont des balises permettant de séparer la page en plusieurs section permettant d’ajouter du contenu différent dans chacune d’entre elles. </li> <li> Les “div” sont des divisions permettant de structurer du contenu au sein d’une même section, elles peuvent être plusieurs dans une section afin de structurer des éléments. </li> <li> Un “h1” est le titre le plus important et unique de la page, il permet aux algorithmes de Google d’obtenir la thématique de la page. </li> <li>Un “p” représente un paragraphe.</li> <li> Un “img” est une balise pouvant contenir une image, elle a pour attributs “src” pour donner la source de l’image (locale ou sur internet), “height” pour attribuer une hauteur à l’image pouvant servir de taille et “alt” qui sert d’affiche alternatif en cas de problème d’affichage, il est aussi important d’en attribuer à une image pour améliorer le référencement. </li> </ul> <h3 id="pied-de-la-page">Pied de la page</h3> 
...
<footer>
  
© 2022 WeBeit

</footer>
...

Une dernière catégorie qui va clôturer notre site internet en donnant des informations complémentaires, des liens ou encore indiquer un copyright.

Classes et identifiants

Lorsque l'on souhaite ajouter des styles à un élément HTML, il est possible d'utiliser des classes ou des identifiants. Les classes sont des noms généraux qui peuvent être appliqués à plusieurs éléments, tandis que les identifiants sont des noms uniques qui sont appliqués à un seul élément. Les classes et les identifiants peuvent être appliqués à des éléments à l'aide d'attributs. Les classes sont définies en utilisant l'attribut “class” et les identifiants sont définis en utilisant l'attribut “id”. Les classes et identifiants peuvent être combinés pour fournir une sémantique plus riche. 

...
<header>
        <nav class="navigation flex align-items-center justify-between">
            <h3 class="logo">WeBeit</h3>
            <ul class="flex align-items-center">
                <li><a href="#" class="link">Accueil</a></li>
                <li><a href="#" class="link">A propos</a></li>
                <li><a href="#" class="link">Contact</a></li>
            </ul>
        </nav>
</header>
<main>
      <section id="hero">
        <div class="right-side">
          <h1 class="main-title">Ce Tutoriel vous est proposé par WeBeit.</h1>
          <p class="description">WeBeit est une agence digitale qui accompagne ses clients.</p>
          <button class="cta">Nous contacter</button>
        </div>
        <div class="left-side">
            <img src="<https://webeit.fr/img/img_1.png>" class="illustration" height="300" alt="Deux personnes en train d'utiliser du matériel technologique."/>
        </div>
      </section>
</main>
<footer>
    <p>© 2022 WeBeit</p>
</footer>
...

Rendu final


Rendu du fichier HTML

Conclusion

Le HTML est un langage de balisage crucial pour écrire des pages sur internet. Cet article vous a offert un bref aperçu des principales caractéristiques et des bases du HTML, la prochaine étape sera d’apport de la vie à ce code HTML.