HTML – Facile

Dans ce cours, nous appréhendrons le monde du HTML de façons pragmatique et simple. Envie d’en savoir plus ? Inscrivez-vous 😉

  • Durée 7 heures
  • Nombre d'étudiants inscrits 1
  • Dernières mises à jour mars 16th, 2021
(0 Vote )
Gratuit
HTML – Facile

Éléments, balises et attributs HTML

HTML est un langage de balisage, c’est-à-dire un langage qui sera utilisé pour définir chacun d’eux
Mais en pratique, comment indiquer que c’est un titre, c’est un lien, etc. ?

Voici ce que nous verrons dans cette leçon.

Les éléments HTML

L’ensemble du langage HTML repose sur l’utilisation d’éléments.

Si vous comprenez ce qu’est un élément, vous saurez utiliser le HTML.

Les éléments HTML nous permettront de créer une structure de page en HTML, d’identifier chacun de nos contenus et également de transmettre des informations utiles aux navigateurs pour structurer la page.

Dans une page, nous utiliserons des éléments internes pour mettre en valeur le contenu, c’est-à-dire lui donner un sens aux yeux des navigateurs et des moteurs de recherche.

Selon l’élément utilisé, un navigateur va reconnaître le contenu comme étant de telle ou telle nature.

Par conséquent, nous utiliserons des éléments pour définir un titre ou un paragraphe (par exemple) ou pour insérer une image ou une vidéo dans le document.
Par exemple, l’élément p sert à définir un paragraphe, l’élément a nous permettra de créer un lien hypertexte, etc.

Aujourd’hui, il existe plus de 120 éléments HTML différents aux rôles très variés et qui font la richesse de ce langage. Nous allons étudier et nous servir d’une grande partie d’entre eux dans ce cours.

Les balises HTML 

Un élément HTML peut être soit constitué d’une paire de balises et d’un contenu, soit d’une balise unique qu’on dit alors ” orpheline “.

Par exemple, l’élément p est composé d’une balise d’ouverture, d’une balise de fermeture et d’un contenu textuel entre les balises.
L’idée ici est que le texte contenu entre les balises sera du texte considéré par le navigateur comme un paragraphe.

Voici comment nous l’écririons :

Comme vous pouvez le constater, la balise ouvrante de l’élément est constituée d’un chevron ouvrant .

Notez ici la différence entre la balise d’ouverture et la balise de fermeture de notre élément p : la fermeture contient une barre oblique avant le nom de l’élément.

Vous pouvez d’ores et déjà retenir cette syntaxe essentielle qui sera toujours la même en HTML.

Certains éléments en HTML n’incluront qu’une seule balise, qui est alors appelée orpheline.
Ce sera le cas de certains éléments sans contenu textuel, par exemple l’élément br (par exemple) qui n’est utilisé que pour générer un retour à la ligne en HTML et sera écrit comme ceci :

Notez ici que vous pourriez rencontrer une syntaxe légèrement différente pour les balises orphelines avec une barre oblique après le nom de l’élément comme ceci.

Cette syntaxe est une syntaxe qui a été adoptée il y a quelques années mais désormais obsolète
Elle provient en fait d’un autre langage qui est le XML.
Vous ne devez pas l’utiliser aujourd’hui en HTML car il ne sera plus reconnu par les navigateurs à l’avenir.

Notez également que, selon le langage, certains développeurs ont tendance à confondre l’expression “élément” par “balise” en utilisant le mot “balise” pour désigner un élément.

Vous pouvez le voir écrit dans d’autres cours.

Cependant, c’est un abus de langage et je pense qu’il est préférable que vous compreniez que vous devez appeler chaque objet d’un certain langage par son vrai nom.

Je vous recommande donc de conserver ce qui a été expliqué ci-dessus.

Les attributs HTML

Enfin, les éléments pourront également contenir des attributs, qui se trouveront ensuite dans la balise d’ouverture.

Pour certains éléments, les attributs seront optionnels tandis que pour d’autres, ils seront nécessaires afin d’assurer le fonctionnement du code HTML.

En fait, les attributs compléteront les éléments qui les définissent plus précisément ou en fournissant des informations sur le comportement d’un élément.

Un attribut contient toujours une valeur, mais peut être omis dans le cas de propriétés avec une seule valeur.

Prenons ici un exemple d’élément a qui signifie «ancor» ou «ancre» en français.

Cet élément est principalement utilisé pour créer des liens hypertextes vers d’autres pages.

Pour le faire fonctionner correctement, nous aurons besoin d’un attribut href signifiant “hypertexte reference” ou “références hypertextes” en français.

En effet, l’attribut href va nous permettre de spécifier la cible du lien, c’est-à-dire la page du lien en lui passant l’adresse de la page en question en valeur.

Autre exemple: l’élément img, utilisé pour insérer une image dans une page HTML, nécessiterait deux attributs src et alt.

L’attribut src prendra la valeur de l’adresse de l’image où l’attribut alt nous permettra d’entrer le texte de l’image à afficher dans les cas où l’image n’est pas visible pour un certain nombre de raisons: les images n’ont pas pu être trouvées, n’ont pas pu être chargé, etc.

L’attribut alt sera également nécessaire pour aider les aveugles ou les malvoyants à accéder au site Web et leur offrir une bonne expérience de navigation car ils sont équipés d’un lecteur spécial capable de lire les attributs alt et de le faire. Cela leur permet d’être une représentation de le contenu de l’image.

Notez au passage que l’élément img inclut uniquement une balise orpheline, tout comme l’élément br vu précédemment.

Dans ce cas, nous mettons des attributs dans la balise orpheline.

Rencontrez votre formateur

phdesmis

phdesmis

  • Etudiants : 1
  • Durée : 7 heures
  • Niveau : 2 heures par jours
  • Institution : IWL
  • Sujet : HTML
  • Quizs : No
  • Langue : Français