Cours 3 : HTML pour Débutants – Créer des Liens et Listes Facilement

Formation Html/Css

Cours 3 : HTML pour Débutants – Créer des Liens et Listes Facilement

Bienvenue dans ce troisième cours où vous allez apprendre à créer des liens et des listes dans une page HTML. Ces éléments sont essentiels pour naviguer d’une page à une autre et organiser votre contenu de manière claire et structurée. Prêt(e) ? Allons-y ! 🚀

Et n’oubliez pas : sur AcademyHub, vous pouvez approfondir vos compétences en HTML grâce à des exercices pratiques et des ressources supplémentaires.

1. Créer des Liens Hypertextes (Links)

Les liens permettent de connecter différentes pages web entre elles. Pour cela, on utilise la balise <a>.

Syntaxe du lien :

<a href="URL">Texte du lien</a>

href : C’est l’attribut qui définit la destination du lien.
Texte du lien : Le texte visible sur la page, cliquable par l’utilisateur.

Exemple :

<a href="https://www.academyhub.com">Découvrez nos formations sur AcademyHub</a>

Affichage dans le navigateur :
Découvrez nos formations sur AcademyHub

Question :

User : Que se passe-t-il si je veux que le lien s’ouvre dans un nouvel onglet ?

Réponse : Utilisez l’attribut target="_blank" pour ouvrir le lien dans un nouvel onglet.
Exemple :

<a href="https://www.academyhub.com" target="_blank">Explorez AcademyHub</a>

2. Créer des Listes Ordonnées et Non Ordonnées

Les listes sont très utiles pour organiser les informations. Il existe deux types de listes :

Les listes ordonnées (numérotées)
Utilisez la balise <ol> pour créer une liste ordonnée et <li> pour chaque élément de la liste.

Exemple :
```
<ol>
  <li>Apprendre HTML</li>
  <li>Apprendre CSS</li>
  <li>Apprendre JavaScript</li>
</ol>
```
Affichage dans le navigateur :
1. Apprendre HTML
2. Apprendre CSS
3. Apprendre JavaScript
Les listes non ordonnées (à puces)
Utilisez la balise <ul> pour une liste sans numérotation, et <li> pour chaque élément.

Exemple :
```
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
```
Affichage dans le navigateur :
- HTML
- CSS
- JavaScript

Question :

User : Puis-je changer les puces ou les numéros dans une liste ?

Réponse : Oui ! Avec CSS, vous pouvez personnaliser les puces, les numéros, ou même les remplacer par des icônes. Nous verrons cela plus tard dans un cours sur le CSS.

3. Listes de Liens (Menu de Navigation)

Les menus de navigation sont souvent utilisés sur les sites web pour créer des liens vers différentes sections ou pages. Vous pouvez les créer avec une liste non ordonnée et y insérer des liens.

Exemple de menu de navigation :

<ul>
  <li><a href="accueil.html">Accueil</a></li>
  <li><a href="formations.html">Formations</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Affichage dans le navigateur :

Question :

User : Comment ajouter des sous-menus dans une liste ?

Réponse : Vous pouvez imbriquer des listes dans des éléments de liste (<li>). Exemple :

<ul>
  <li><a href="accueil.html">Accueil</a></li>
  <li><a href="formations.html">Formations</a>
    <ul>
      <li><a href="html.html">HTML</a></li>
      <li><a href="css.html">CSS</a></li>
    </ul>
  </li>
  <li><a href="contact.html">Contact</a></li>
</ul>

4. Exercice Pratique

Maintenant, c’est à vous de jouer ! Créez une page HTML avec :

Un titre principal (<h1>) : « Bienvenue sur AcademyHub ».
Un menu de navigation avec des liens vers différentes pages fictives.
Une liste ordonnée de vos compétences HTML : par exemple, « Apprendre les bases de HTML », « Créer des liens », « Créer des listes ».
Une liste non ordonnée avec vos 3 livres préférés sur le développement web.

Bonus : Liens Internes et Externes

Liens internes : Utilisez des liens qui pointent vers d’autres sections de la même page. Exemple :
```
<a href="#section1">Aller à la section 1</a>
```
Liens externes : Utilisez des liens qui pointent vers des sites web externes. Exemple :
```
<a href="https://www.academyhub.com">Visitez AcademyHub</a>
```

🎯 Prochain cours : Introduction au CSS – Styliser Votre Page HTML

👉 Avez-vous des questions avant de passer à l’exercice pratique ? N’oubliez pas de consulter AcademyHub pour plus d’exemples et d’exercices !