02 - Ajouter des liens, des images et structurer sa page

Dans le chapitre précédent, nous avons créé une première page HTML simple.

Nous allons maintenant aller plus loin en ajoutant :

• Des liens entre les pages
• Des images
• Une structure plus propre avec HTML5

1. Ajouter un lien

Pour créer un lien en HTML, on utilise la balise.

<p>
	Explication :
</p>

<ul>
	<li><b>href</b> : destination du lien</li>
	<li>Le texte entre les balises : ce que l’utilisateur voit</li>
</ul>

<p>
	Lien vers une autre page locale :
</p>

2. Ajouter une image

Pour afficher une image, on utilise la balise<

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

• src :  chemin de l’image
• alt : description (important pour accessibilité)

Exemple :

<img src="chat.jpg" alt="Un chat">

3. Organisation des fichiers

Il est important de structurer correctement son projet.

Exemple :

/mon-site
    index.html
    contact.html
	/images
        photo.jpg

Pour accéder à une image :

<img src="images/photo.jpg" alt="Photo">

4. Structurer sa page avec HTML5

HTML5 introduit des balises pour mieux organiser le contenu :

• <header> en-tête
• <nav>navigation
• <main>contenu principal
• <section>section
• <footer> pied de page

Exemple :

<body>

<header>
    <h1>Mon site</h1>
</header>

<nav>
    <a href="index.html">Accueil</a>
    <a href="contact.html">Contact</a>
</nav>

<main>
    <section>
        <h2>Bienvenue</h2>
        <p>Contenu principal</p>
    </section>
</main>

<footer>
    <p>Copyright</p>
</footer>

</body>

5. À retenir

• permet d’afficher des images
• Les chemins de fichiers sont importants
• HTML5 permet de structurer clairement une page

Conclusion :

Vous savez maintenant créer une page plus complète avec du contenu riche.

Dans le prochain chapitre, nous verrons comment styliser cette page avec le CSS.

Navigation dans la série