🧱 Introduction au Web et à HTML

🌐 Qu’est-ce que le Web ? Quel est le rôle du HTML ?

Le Web repose sur trois piliers :

  • HTML pour structurer le contenu
  • CSS pour mettre en forme la présentation
  • JavaScript pour le comportement (non abordé ici)
📄 HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer le contenu d'une page web.
📚 Références : HTML - MDN, CSS - MDN

On a vu une démonstration de page HTML brute, puis de la même page stylisée avec CSS, pour bien distinguer le contenu et la présentation.

🧰 Outils pour coder en HTML

On peut utiliser un simple éditeur de texte comme Notepad (Windows) ou TextEdit (Mac), mais nous avons privilégié Visual Studio Code (VS Code) pour son confort :

  • Coloration syntaxique
  • Auto-complétion
  • Extension pratique comme Live Server

Nous avons codé une première page simple :

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    Hello world!
  </body>
</html>

🧱 Structure de base d’une page HTML

  • <!DOCTYPE html> : indique qu’on utilise HTML5
  • <html lang="fr"> : racine du document, avec langue
  • <head> : métadonnées (charset, titre, liens CSS...)
  • <body> : contenu visible (titres, textes, images...)

✍️ Balises de base vues :

Balise Rôle
<h1> à <h6> Titres de niveau
<p> Paragraphe
<br> Saut de ligne (à limiter)
<strong> Texte important (gras sémantique)
<em> Emphase (italique sémantique)
<!-- ... --> Commentaire non affiché
On a aussi vu la notion d’attribut : lang, title, id, alt, href, etc.

🖼️ Ajouter du contenu : listes, liens, images

📌 Listes

  • <ul> : liste non ordonnée
  • <ol> : liste ordonnée
  • <li> : élément de liste

🔗 Liens

<a href="https://www.google.com">Lien vers Google</a>
  • href : destination
  • target="_blank" pour ouvrir dans un nouvel onglet
  • mailto: pour créer un lien vers une adresse mail

🖼️ Images

<img src="images/photo.jpg" alt="Photo de Jean Dupont" width="150">
  • src : chemin de l’image
  • alt : texte alternatif pour l’accessibilité

🧠 Structure sémantique en HTML5

HTML5 propose des balises sémantiques qui donnent plus de sens à la structure de la page :

Balise Usage typique
<header> En-tête du site ou d’une section
<nav> Menu de navigation
<main> Contenu principal de la page
<section> Section thématique
<article> Contenu autonome (ex : un article de blog)
<aside> Contenu secondaire (barre latérale)
<footer> Pied de page
Ces balises n’ont aucun style par défaut, mais améliorent l’accessibilité et la lisibilité du code.

💡 Exemple structuré :

<body>
  <header>
    <h1>Jean Dupont</h1>
    <img src="images/photo.jpg" alt="Photo de Jean Dupont" width="150">
  </header>

  <main>
    <section id="about">
      <h2>À propos</h2>
      <p>Développeur web junior, passionné par la création de sites internet...</p>
    </section>

    <section id="projects">
      <h2>Projets</h2>
      <p>Mes réalisations et projets personnels seront listés ici.</p>
    </section>
  </main>

  <footer>
    <p>© 2025 Jean Dupont - Portfolio</p>
  </footer>
</body>

🔗 Ressources utiles