Cours 2 : HTML pour Débutants – Maîtrisez Titres, Paragraphes et Images

Bienvenue dans ce deuxième cours où nous allons apprendre à structurer une page HTML avec des titres, des paragraphes et des images. Vous êtes prêt(e) à rendre vos pages plus vivantes ? Allons-y ! 🚀

Et n’oubliez pas : AcademyHub, notre plateforme d’apprentissage en ligne, est là pour vous accompagner à chaque étape de votre formation. Consultez nos ressources pour approfondir vos connaissances !

1. Les Titres (Headings)

Les titres permettent de hiérarchiser le contenu d’une page. Il existe 6 niveaux de titres, de <h1> (le plus important) à <h6> (le moins important).

Exemple de code :

<h1>Bienvenue sur AcademyHub</h1>
<h2>Découvrez nos formations</h2>
<h3>HTML, CSS, et plus encore</h3>
<h4>Pourquoi choisir AcademyHub ?</h4>
<h5>Support 24/7</h5>
<h6>Version gratuite disponible</h6>

Affichage dans le navigateur :
(illustration suggérée)

Question :

Toi : Puis-je styliser mes titres pour qu’ils aient la même taille ?

Réponse : Oui ! Avec CSS, vous pouvez personnaliser la taille et l’apparence des titres. Nous verrons cela dans un prochain cours.

2. Les Paragraphes (Paragraphs)

Les paragraphes servent à ajouter du texte dans une page. Ils sont encadrés par la balise <p>.

Exemple de code :

<p>AcademyHub est votre solution pour apprendre à coder rapidement et efficacement.</p>
<p>Nous proposons des cours interactifs adaptés à tous les niveaux.</p>

Affichage dans le navigateur :
AcademyHub est votre solution pour apprendre à coder rapidement et efficacement.
Nous proposons des cours interactifs adaptés à tous les niveaux.

Question :

Toi : Puis-je mettre un paragraphe en gras ou en italique ?

Réponse : Absolument ! Utilisez <strong> pour le gras et <em> pour l’italique. Exemple :

<p>Voici un texte en <strong>gras</strong> et en <em>italique</em>.</p>

3. Ajouter des Images Depuis Internet

Vous pouvez utiliser des images disponibles en ligne directement dans votre page HTML. Pour cela, insérez l’URL de l’image dans l’attribut src de la balise <img>.

Exemple :

<img src="https://via.placeholder.com/300" alt="Exemple d'image">

• src : Contient l’URL complète de l’image en ligne.
• alt : Fournit une description textuelle de l’image (important pour l’accessibilité).

Résultat dans le navigateur :
Une image issue d’Internet sera affichée directement.

Exemple Pratique avec AcademyHub

Voici un exemple utilisant une image de la plateforme AcademyHub :

<img src="https://www.academyhub.com/images/logo.png" alt="Logo AcademyHub">

• Cette image est directement chargée depuis le site web AcademyHub.

Question :

Toi : Est-ce légal d’utiliser une image tirée d’un autre site ?

Réponse : Non, sauf si :

• L’image est sous licence libre (comme celles sur Unsplash ou Pixabay).
• Vous avez l’autorisation de l’auteur ou du site.

👉 Astuce : Utilisez des banques d’images gratuites pour éviter tout problème de droits d’auteur.

Exercice : Ajout d’Images Internet

Créez une page HTML avec :

1. Un titre principal (<h1>).
2. Une image tirée de Unsplash.
   Exemple d’URL d’image :

   <img src="https://source.unsplash.com/random/400x300" alt="Image aléatoire d'Unsplash">
   

3. Un paragraphe décrivant l’image et son origine.

🎯 Prochain cours : Listes et Liens HTML – Connectez votre Contenu !

4. Ajouter des Images (Images)

Les images rendent une page plus attractive. Utilisez la balise <img> pour insérer une image.

Syntaxe :

<img src="chemin/vers/image.jpg" alt="Description de l'image">

• src : Indique le chemin de l’image (local ou en ligne).
• alt : Description de l’image (utile pour l’accessibilité).

Exemple :

<img src="academyhub-logo.png" alt="Logo de AcademyHub">

Question :

Toi : Que se passe-t-il si l’image ne s’affiche pas ?

Réponse : Si l’image est introuvable, le texte du alt s’affichera à la place. Cela aide également pour le référencement.

4. Exercice Pratique

Créez une page HTML avec :

1. Un titre principal (<h1>) : « Bienvenue sur AcademyHub ».
2. Un sous-titre (<h2>) : « Formez-vous dès aujourd’hui ».
3. Un paragraphe (<p>) expliquant pourquoi AcademyHub est unique.
4. Une image représentant AcademyHub avec un alt approprié.

Bonus : Liens Utiles

Pour aller plus loin, consultez nos ressources exclusives sur AcademyHub et découvrez des exercices interactifs pour perfectionner vos compétences.

🎯 Prochain cours : Listes et Liens HTML – Organisez et Connectez votre Contenu !