Multimédia – HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

Le HTML est l'élément de base pour la création d'un site web. On peut le considérer comme une brique lego.

Il décrit et définit le contenu d'une page web ainsi que sa présentation de base.

En général, nous utilisons le HTML pour créer une hiérarchie en mettant des blocs à l'intérieur d'autres blocs.

Balises

Le HTML est constitué de balises. Elles sont utilisées pour définir le type de contenu qui se trouve à l'intérieur de la balise.

Un exemple simple est un titre qui, en HTML, est écrit comme ceci:

<h1>Titre</h1>

COPY

Une balise html est généralement enroulée autour du contenu. Il y a donc une balise d'ouverture et une balise de fermeture. Elles sont identiques, sauf que la balise fermante comporte une barre oblique devant son nom.

<p>Lorem ipsum dolor sit amet...</p>

COPY

Certaines balises se ferment d'eux-mêmes, par exemple une image. Elle ne se compose que d'une seule balise et d'une barre oblique à la fin.

<img src="image.jpg" />

COPY

Un aspect important du HTML est la possibilité d'imbriquer des éléments. Cela signifie que nous pouvons mettre autant de balises à l'intérieur d'une autre balise.

<main>
  <article>
    <section>
      <h1>Titre</h1>
    </section>
  </article>
</main>

COPY

Head & Body

Dans un document HTML, nous devons toujours commencer par définir qu'il s'agit d'un document HTML:

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

COPY

Après la définition, nous pouvons définir la <head>. C'est là que nous mettons les éléments non visibles comme le titre, les méta-informations, les liens vers les scripts et les styles.

<head>
  <meta charset="utf-8" />
  <title>Mon Premier Site Web</title>
</head>

COPY

Enfin nous avons le <body>. C'est là que nous mettons tous les éléments visibles que nous voulons montrer au visiteur.

<body>
  <h1>Mon Premier Site Web</h1>
</body>
</html>

COPY

La définition, la <head> et le <body> sont obligatoires pour toutes les documents HTML.

💡 Dans votre editeur du code, vous pouvez ecrire html:5 et appuyer sur la touche tab ↹ pour insérer le code au-dessus.

Attributs

Les attributs nous permettent d'ajouter des informations spécifiques à une balise.

Il existe à la fois des attributs universels qui peuvent être ajoutés à n'importe quelle balise, et des attributs spécifiques qui ne s'appliquent qu'à certaines balises.

Nous pouvons ajouter des identificateurs à chaque balise en utilisant soit une CLASS, soit un ID.

<h1 id="logo">Nom</h1>

<section class="news">1</section>
<section class="news">2</section>
<section class="news">3</section>

COPY

Les ID sont pour les balises uniques qui n'apparaissent qu'une fois dans une page, et les CLASS sont pour les éléments qui apparaissent plusieurs fois mais qui ne contiennent pas le même contenu.

Certains attributs sont spécifiques aux balises comme les images <img> et les liens <a>.

<img src="file.jpg" />

<a href="http://eracom.ch">ERACOM</a>

COPY

Dans une balise d'image, nous souhaitons créer un lien vers le fichier qu'elle doit afficher avec l'attribut src="", alors qu'une balise de lien doit contenir le lien vers lequel on se rend lorsqu'on clique dessus avec href="".

Sémantique

En HTML, nous avons ce que nous appelons des balises sémantiques. Cela signifie que la balise est nommée par ce qu'elle est censée contenir. Par exemple <img> est une image et <video> une vidéo.

Cela nous permet de mieux comprendre la structure du contenu et aide également les personnes malvoyantes, par exemple, à utiliser le site.

<header>

Ici, vous pouvez mettre les éléments que vous souhaitez voir apparaître en haut. Par exemple, un logo ou l'élément de nav.

<nav>

Utilisez ceci pour votre menu ou d'autres éléments de navigation.

<main>

Mettez les parties principales de votre site web dans celui-ci.

<article>

Mettez les parties principales de votre site web dans celui-ci.

<section>

Utilisez cette fonction pour créer une séparation d'un type de contenu spécifique.

<aside>

Utilisez-le pour le contenu qui est lié à un article mais qui n'est pas le contenu principal.

<footer>

Utilisez-le pour le contenu au bas du site web.

Voici une exemple d'une page web qui utilise les balises sémantiques:

...
<body>
  <header>
    <nav></nav>
  </header> 
  
  <main>
    <article></article>
    <aside></aside>
  </main> 
  
  <footer></footer> 
</body>
</html>

COPY