Introduction au Développement HTML et CSS
Introduction au Développement HTML et CSS

Les balises HTML de base (texte, liens, images)

Contexte du cours : Introduction au Développement HTML et CSS

Introduction au Cœur du Web : HTML

Bienvenue dans le monde du développement web ! Le HTML (HyperText Markup Language) est la pierre angulaire de toute page web. Ce n'est pas un langage de programmation, mais un langage de balisage utilisé pour structurer le contenu d'une page web. Il indique au navigateur comment organiser les différents éléments : où est le titre, où est le paragraphe, où est une image, etc.

Dans cette leçon, nous allons explorer les balises HTML les plus fondamentales, celles qui vous permettront de donner une structure de base à votre contenu : les balises de texte, les balises de liens (hyperliens) et les balises d'images. Comprendre ces balises est essentiel pour commencer à construire vos propres pages web.

1. Les Balises de Texte : Structurer le Contenu Écrit

Le texte est au cœur de la plupart des pages web. HTML offre diverses balises pour organiser, hiérarchiser et mettre en forme votre texte de manière sémantique. La sémantique, c'est l'art de donner du sens au contenu, pas seulement une apparence.

1.1. Les Titres : <h1> à <h6>

Les titres sont cruciaux pour la structure et la lisibilité d'une page. Ils permettent aux utilisateurs (et aux moteurs de recherche) de comprendre rapidement l'organisation du contenu. HTML propose six niveaux de titres, du plus important <h1> au moins important <h6>.

  • <h1> : Le titre principal de la page (il ne devrait y en avoir qu'un seul par page pour des raisons sémantiques et de SEO).
  • <h2> : Les sous-titres majeurs.
  • <h3> : Les sous-titres de <h2>.
  • ...et ainsi de suite jusqu'à <h6>.

Chaque titre est une balise de type "bloc", ce qui signifie qu'elle occupe toute la largeur disponible et crée un saut de ligne avant et après.

<!DOCTYPE html>
<html>
<head>
    <title>Exemple de Titres HTML</title>
</head>
<body>

    <h1>Bienvenue sur ma page !</h1>
    <p>Ceci est une introduction à notre contenu.</p>

    <h2>Section 1 : Découverte du HTML</h2>
    <p>Le HTML est la base de toute page web.</p>

    <h3>1.1 Les balises de texte</h3>
    <p>Nous allons explorer les balises les plus courantes.</p>

    <h4>1.1.1 Les titres H1 à H6</h4>
    <p>Chaque niveau de titre a son importance.</p>

</body>
</html>

Explication du code : Dans cet exemple, nous utilisons <h1> pour le titre principal de la page. <h2> marque une section majeure, et <h3> et <h4> des sous-sections plus spécifiques. Le texte simple est contenu dans des balises <p> (paragraphe), que nous verrons juste après.

1.2. Les Paragraphes : <p>

La balise <p> est utilisée pour définir un paragraphe de texte. C'est la balise la plus courante pour le texte "normal" d'une page web. Comme les titres, la balise <p> est une balise de type "bloc" et crée un saut de ligne automatique avant et après son contenu.

<p>
    Ceci est mon premier paragraphe. Il contient des informations essentielles
    sur le sujet abordé dans cette leçon. N'oubliez pas qu'un paragraphe
    doit idéalement contenir une idée principale.
</p>

<p>
    Voici un deuxième paragraphe. Il poursuit la discussion ou introduit une
    nouvelle idée. La séparation en paragraphes rend le texte plus digeste
    et facile à lire.
</p>

Explication du code : Chaque bloc de texte qui forme une idée cohérente doit être encapsulé dans sa propre balise <p>. Cela améliore la sémantique et la présentation.

1.3. La Mise en Forme de Texte Inline : <strong>, <em>

Contrairement aux titres et paragraphes qui sont des blocs, certaines balises sont "inline", ce qui signifie qu'elles ne créent pas de nouveau bloc et s'intègrent dans le flux du texte. Elles sont utilisées pour mettre en évidence ou donner un sens particulier à une partie du texte.

  • <strong> : Utilisé pour indiquer que le contenu est d'une grande importance ou urgence. Par défaut, les navigateurs l'affichent en gras.
  • <em> : Utilisé pour indiquer une emphase sur un mot ou une phrase, souvent pour changer le sens de la phrase. Par défaut, les navigateurs l'affichent en italique.

Il existe aussi d'autres balises sémantiques comme <mark> (pour surligner), <small> (pour du texte moins important), ou <cite> (pour une citation).

<p>
    Il est <strong>extrêmement important</strong> de bien comprendre la
    différence entre les balises de bloc et les balises inline.
    Ceci est un concept <em>fondamental</em> en HTML.
</p>

<p>
    N'oubliez pas de <mark>toujours</mark> valider votre code HTML.
</p>

Explication du code : Dans le premier paragraphe, "extrêmement important" est mis en évidence par <strong> car il s'agit d'une information cruciale. "fondamental" est mis en <em> pour accentuer son importance dans la phrase. Dans le second, "toujours" est marké pour le surligner visuellement.

1.4. Les Sauts de Ligne et Lignes Horizontales : <br> et <hr>

Parfois, vous avez besoin d'un simple saut de ligne sans créer un nouveau paragraphe, ou d'une ligne de séparation.

  • <br> (Break Rule) : Insère un saut de ligne. C'est une balise "vide" ou "auto-fermante" (elle n'a pas de contenu et donc pas de balise fermante).
  • <hr> (Horizontal Rule) : Crée une ligne horizontale, souvent utilisée comme séparateur thématique entre des sections de contenu. C'est aussi une balise vide.
<p>
    Mon adresse :<br>
    123 Rue de l'Exemple<br>
    75000 Paris, France
</p>

<hr>

<p>
    Ce paragraphe est séparé du précédent par une ligne horizontale,
    indiquant un changement de sujet ou de section.
</p>

Explication du code : Le <br> permet de formater l'adresse sur plusieurs lignes tout en la gardant dans le même paragraphe sémantique. Le <hr> crée une ligne visuelle pour séparer les deux paragraphes.

2. Les Balises de Liens : Naviguer sur le Web

Le web est, par définition, un "réseau" d'informations connectées. Les liens, ou hyperliens, sont ce qui rend cette connexion possible. Ils permettent aux utilisateurs de passer d'une page à l'autre, que ce soit au sein du même site web ou vers d'autres sites.

2.1. L'Ancre : <a>

La balise <a> (pour "anchor" ou "ancre") est utilisée pour créer des liens. Le texte ou l'image entre la balise ouvrante <a> et la balise fermante </a> devient cliquable.

La balise <a> nécessite un attribut essentiel : href.

  • href (Hypertext REFerence) : Cet attribut spécifie la destination du lien, c'est-à-dire l'URL de la page ou de la ressource vers laquelle le lien pointe.

D'autres attributs utiles incluent :

  • target : Spécifie où le document lié doit être ouvert.
    • _self (par défaut) : Ouvre le document dans la même fenêtre/onglet.
    • _blank : Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet.
  • title : Fournit des informations supplémentaires sur le lien (souvent affichées comme une info-bulle au survol). Utile pour l'accessibilité.
<!DOCTYPE html>
<html>
<head>
    <title>Exemple de Liens HTML</title>
</head>
<body>

    <h1>Exemples de Liens</h1>

    <h2>Liens Externes</h2>
    <p>Visitez le site officiel de <a href="https://developer.mozilla.org/fr/" target="_blank" title="Aller sur le site MDN Web Docs">MDN Web Docs</a> pour plus d'informations sur le HTML.</p>

    <h2>Liens Internes (vers d'autres pages de votre site)</h2>
    <p>Consultez notre <a href="about.html" title="En savoir plus sur nous">page À propos</a>.</p>

    <h2>Liens vers une section spécifique de la même page (ancres internes)</h2>
    <p>
        <a href="#section-titre">Aller à la section sur les titres</a>
    </p>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- Ces <br> sont là juste pour créer du défilement et voir l'ancre -->

    <h2 id="section-titre">Section sur les Titres (Cible de l'ancre)</h2>
    <p>Ici, nous parlons des balises H1 à H6...</p>

</body>
</html>

Explication du code :

  • Le premier lien (https://developer.mozilla.org/fr/) est un lien externe. L'attribut target="_blank" fait qu'il s'ouvrira dans un nouvel onglet, ce qui est une bonne pratique pour ne pas faire quitter votre site à l'utilisateur. L'attribut title fournit un texte descriptif.
  • Le deuxième lien (about.html) est un lien interne. Il pointe vers un autre fichier HTML situé dans le même dossier que la page actuelle.
  • Le troisième exemple montre un lien ancre interne. L'attribut href="#section-titre" pointe vers un élément sur la même page qui a un attribut id="section-titre". C'est utile pour créer des tables des matières ou des raccourcis au sein d'une longue page.

3. Les Balises d'Images : Intégrer des Visuels

Les images sont essentielles pour rendre une page web attrayante et informative. HTML permet d'intégrer facilement des images à l'aide de la balise <img>.

3.1. L'Image : <img>

La balise <img> est utilisée pour incorporer une image dans le document. Comme <br> et <hr>, c'est une balise "vide" ou "auto-fermante" ; elle n'a pas de balise fermante car son contenu est externe (le fichier image lui-même).

La balise <img> nécessite deux attributs essentiels et un troisième fortement recommandé :

  • src (Source) : Cet attribut est obligatoire et spécifie le chemin (l'URL) vers le fichier image à afficher. Il peut s'agir d'un chemin relatif (si l'image est sur votre serveur) ou absolu (une URL complète vers une image sur un autre site).
  • alt (Alternative Text) : Cet attribut est également obligatoire pour une image valide et accessible. Il fournit une description textuelle de l'image.
    • Cette description est lue par les lecteurs d'écran pour les personnes malvoyantes.
    • Elle s'affiche si l'image ne peut pas être chargée (par exemple, chemin incorrect ou problème de réseau).
    • Elle est utilisée par les moteurs de recherche pour comprendre le contenu de l'image.
  • width et height (Largeur et Hauteur) : Ces attributs optionnels permettent de spécifier la largeur et la hauteur de l'image en pixels. Bien qu'ils puissent être utilisés, il est généralement préférable de contrôler la taille des images via CSS pour une meilleure séparation des préoccupations (structure HTML, style CSS). Cependant, les inclure peut aider le navigateur à réserver l'espace pour l'image avant qu'elle ne se charge, évitant un décalage du contenu.
<!DOCTYPE html>
<html>
<head>
    <title>Exemple d'Images HTML</title>
</head>
<body>

    <h1>Exemples d'Images</h1>

    <h2>Image simple</h2>
    <p>Voici une image illustrative :</p>
    <img src="https://picsum.photos/400/300" alt="Paysage de montagne avec un lac au lever du soleil" width="400" height="300">
    <p>Cette image provient d'un service qui fournit des images aléatoires.</p>

    <h2>Image dans un lien</h2>
    <p>Cliquez sur l'image pour visiter Google :</p>
    <a href="https://www.google.com" target="_blank">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo de Google" width="136" height="46">
    </a>
    <p>Ici, l'image elle-même sert de lien.</p>

    <h2>Image manquante (exemple d'alt text)</h2>
    <p>Si l'image n'est pas trouvée, le texte alternatif s'affiche :</p>
    <img src="image-qui-n-existe-pas.jpg" alt="Description de l'image si elle ne charge pas : un chat jouant avec une pelote de laine">
    <p>Notez comment le texte alternatif est visible ci-dessus.</p>

</body>
</html>

Explication du code :

  • Le premier <img> affiche une image aléatoire (grâce à picsum.photos) avec un texte alternatif descriptif et des dimensions spécifiées.
  • Le deuxième exemple montre comment imbriquer une balise <img> à l'intérieur d'une balise <a>. Cela rend l'image cliquable, transformant l'image en un hyperlien.
  • Le troisième exemple illustre l'importance de l'attribut alt. Comme le fichier image-qui-n-existe-pas.jpg n'existe pas, le navigateur affichera le texte fourni dans l'attribut alt à la place de l'image, garantissant que l'information reste accessible.

Conclusion et Résumé

Félicitations ! Vous avez fait vos premiers pas dans le balisage HTML en explorant les balises les plus fondamentales pour le texte, les liens et les images.

Récapitulons ce que nous avons appris :

  • Balises de Texte :
    • <h1> à <h6> : Pour les titres, du plus important au moins important. Crucial pour la structure sémantique.
    • <p> : Pour les paragraphes de texte.
    • <strong> : Pour du texte d'une grande importance (gras par défaut).
    • <em> : Pour du texte sur lequel on veut insister (italique par défaut).
    • <br> : Pour un saut de ligne simple.
    • <hr> : Pour une ligne horizontale de séparation thématique.
  • Balise de Lien :
    • <a> : Pour créer des hyperliens. L'attribut href est obligatoire pour spécifier la destination. target="_blank" ouvre le lien dans un nouvel onglet.
  • Balise d'Image :
    • <img> : Pour intégrer des images. L'attribut src est obligatoire pour le chemin de l'image. L'attribut alt est essentiel pour l'accessibilité et le SEO.

L'objectif principal du HTML est de structurer le contenu. Chaque balise que vous utilisez devrait avoir une signification sémantique, décrivant la nature du contenu qu'elle contient. La manière dont le contenu apparaît (sa couleur, sa taille de police, son positionnement, etc.) est la responsabilité du CSS (Cascading Style Sheets), que nous aborderons dans les prochaines leçons.

Continuez à expérimenter avec ces balises. La pratique est la clé pour maîtriser le développement web !