Aller au contenu
TECHNOLOGIES WEB

HTML

HTML

Introduction à l'HTML

L'HTML, ou HyperText Markup Language, est le langage de balisage standard utilisé pour créer des pages web. Avec le CSS et le JavaScript, l'HTML est une technologie clé utilisée pour construire l'interface utilisateur des sites web.

Qu'est-ce que l'HTML ?

L'HTML est un langage de balisage qui décrit la structure des pages web. Il utilise des balises pour délimiter les différents éléments d'une page, comme les titres, les paragraphes, les listes, les liens, les images, etc. Ces balises sont généralement disposées en paires, une balise d'ouverture et une balise de fermeture, qui entourent le contenu de l'élément.

Par exemple, voici comment on pourrait utiliser l'HTML pour définir un simple document avec un titre et un paragraphe :

<!DOCTYPE html>
<html lang="fr">
  <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>Ma première page HTML</title>
</head>
<body>
  <h1>Bienvenue sur ma page</h1>
  <p>Ceci est un paragraphe.</p>
</body>
</html>

Dans cet exemple, <html>, <head>, <title>, <body>, <h1> et <p> sont toutes des balises HTML. Le texte entre <title> et </title> est le titre de la page, qui s'affiche dans la barre de titre du navigateur. Le texte entre <h1> et </h1> est un titre de premier niveau, et le texte entre <p> et </p> est un paragraphe.

À quoi sert l'HTML ?

L'HTML sert à décrire la structure et le contenu d'un document web. Il définit le squelette d'une page web et organise son contenu en éléments structurés : titres, paragraphes, listes, liens, images, etc.

L'HTML est également utilisé pour incorporer des ressources multimédias dans une page web, comme des images, des vidéos ou des sons, et pour créer des formulaires interactifs.

Enfin, l'HTML fournit des moyens de décrire la sémantique du contenu d'une page web, c'est-à-dire son sens et son rôle. Par exemple, la balise <header> indique que son contenu fait partie de l'en-tête du document ou d'une section, la balise <nav> indique une section de navigation, etc. Ces informations sémantiques aident les moteurs de recherche à comprendre le contenu de la page, et améliorent l'accessibilité du site pour les personnes utilisant des technologies d'assistance, comme les lecteurs d'écran.

Dans le prochain chapitre, nous allons introduire le CSS et le JavaScript, deux autres technologies clés utilisées dans le développement web.

Le modèle client-serveur dans le contexte d'une page HTML

Avant de plonger plus profondément dans l'HTML, il est important de comprendre comment une page HTML est livrée à votre navigateur. Cela se fait généralement en suivant un modèle appelé "client-serveur".

Qu'est-ce que le modèle client-serveur ?

Le modèle client-serveur est une architecture de communication dans laquelle un client (généralement votre navigateur web) fait une demande à un serveur (un ordinateur distant où les sites web sont stockés), et le serveur renvoie une réponse à la demande du client.

Voici comment cela fonctionne dans le contexte d'une page web :

  1. Vous entrez une URL dans votre navigateur ou cliquez sur un lien. Votre navigateur (le client) envoie alors une demande au serveur qui héberge le site web demandé.

  2. Le serveur reçoit la demande et la traite. S'il y a une page web correspondant à l'URL demandée, le serveur récupère le fichier HTML de cette page.

  3. Le serveur envoie ensuite ce fichier HTML en réponse à la demande du navigateur.

  4. Une fois que votre navigateur a reçu le fichier HTML, il l'analyse et l'affiche comme une page web. C'est à ce moment que vous voyez la page web sur votre écran.

C'est une explication très simplifiée du processus, mais elle donne une idée générale de la façon dont une page web est livrée à votre navigateur. Dans les chapitres suivants, nous explorerons plus en détail comment le HTML est utilisé pour structurer le contenu de ces pages.

(Source : https://thenewcode.com/137/The-Client-Server-Model)

Introduction au CSS et au JavaScript

Maintenant que nous avons une compréhension de base de ce qu'est l'HTML et comment il est utilisé pour structurer une page web, introduisons brièvement deux autres technologies clés du développement web : le CSS et le JavaScript.

Le rôle du CSS dans la mise en forme des pages HTML

Le CSS, ou Cascading Style Sheets, est un langage utilisé pour décrire l'apparence et la mise en forme d'un document écrit en HTML. Alors que l'HTML donne la structure à une page web, le CSS donne le style.

Par exemple, le CSS peut être utilisé pour changer la couleur de fond d'une page, définir la taille et la police du texte, créer des bordures et des ombres, mettre en page plusieurs colonnes, etc.

Voici un exemple de code CSS qui change la couleur de fond d'une page en bleu et le texte en blanc :

body {
  background-color: blue;
  color: white;
}

Dans cet exemple, body est un sélecteur qui cible l'élément <body> de la page HTML. Les règles entre les accolades {} sont appliquées à cet élément. Ici, background-color: blue; change la couleur de fond en bleu, et color: white; change la couleur du texte en blanc.

L'utilisation du JavaScript pour rendre les pages interactives

Le JavaScript est un langage de programmation qui permet d'ajouter de l'interactivité à une page web. Alors que l'HTML donne la structure à une page web et que le CSS donne le style, le JavaScript donne le comportement.

Par exemple, le JavaScript peut être utilisé pour changer le contenu d'une page en réponse à des actions de l'utilisateur, comme des clics de souris ou des frappes de clavier. Il peut être utilisé pour valider les données d'un formulaire avant qu'elles ne soient envoyées au serveur, pour créer des animations, pour charger du contenu en arrière-plan avec AJAX, etc.

Voici un exemple de code JavaScript qui affiche une alerte lorsque l'utilisateur clique sur un bouton :

document.querySelector('button').addEventListener('click', function() {
  alert('Vous avez cliqué sur le bouton !');
});

Dans cet exemple, document.querySelector('button') sélectionne le premier bouton de la page. addEventListener('click', function() {...}) ajoute un gestionnaire d'événement qui sera exécuté lorsque l'utilisateur cliquera sur le bouton. Dans ce cas, le gestionnaire d'événement est une fonction qui affiche une alerte.

Dans les chapitres suivants, nous nous concentrerons sur l'HTML, mais gardez à l'esprit que le CSS et le JavaScript jouent également un rôle important dans la création de sites web modernes et interactifs.

Création d'un site web

Maintenant que nous avons une compréhension solide des balises HTML de base, passons à la création d'un site web simple. Ce processus implique l'utilisation de ces balises pour structurer notre contenu, l'ajout de liens pour naviguer entre différentes pages et l'intégration d'images pour enrichir notre contenu.

Structurer un site web

La première étape de la création d'un site web est de définir sa structure. Cela implique de décider des pages que vous voulez avoir (par exemple, une page d'accueil, une page à propos, une page de contact, etc.), et de structurer chaque page en utilisant les balises HTML que nous avons apprises.

Par exemple, une page simple pourrait ressembler à ceci :

<html lang="fr">
  <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>Ma première page web</title>
</head>
<body>
  <header>
    <h1>Bienvenue sur mon site web</h1>
    <nav>
      <a href="index.html">Accueil</a> |
      <a href="about.html">À propos</a> |
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>Titre de la section</h2>
      <p>Ceci est un paragraphe dans une section.</p>
    </section>
    <!-- Plus de contenu ici -->
  </main>
  <footer>
    <p>© 2023 Mon site web</p>
  </footer>
</body>
</html>

Créer une navigation entre les pages

Une fois que vous avez plusieurs pages, vous pouvez utiliser la balise <a> pour créer des liens entre elles. Cela permet aux utilisateurs de naviguer sur votre site web.

Dans l'exemple ci-dessus, nous avons une barre de navigation dans l'en-tête de la page, avec des liens vers l'accueil, la page "À propos" et la page "Contact". Les attributs href de ces liens pointent vers les fichiers HTML correspondants.

Utilisation des images

L'ajout d'images à votre site web peut le rendre plus attrayant et informatif. Vous pouvez utiliser la balise <img> pour insérer une image dans une page. N'oubliez pas d'utiliser l'attribut alt pour fournir une description de l'image.

Par exemple, pour ajouter une image à la section de notre page, nous pourrions faire ceci :

<section>
  <h2>Titre de la section</h2>
  <p>Ceci est un paragraphe dans une section.</p>
  <img src="image.jpg" alt="Une description de l'image">
</section>

Banques d’images