Fiche de révision : Créer une page Web en HTML

📋 Plan du Cours

1. Les langages du Web
2. Structure de base HTML
3. Balises et contenus HTML
4. Liens images et structure sémantique
5. Bonnes pratiques et projet

📖 1. Les langages du Web

📝 Points essentiels

📌 Le HTML structure le contenu d’une page Web, le CSS met ce contenu en forme et le JavaScript rend la page interactive.

💡 Astuce mémo

HTML structure, CSS décore, JavaScript rend interactif

📖 2. Structure de base HTML

★ À maîtriser

• Une page HTML minimale comprend la déclaration <!DOCTYPE html>, l’élément <html lang="fr">, une partie <head> contenant notamment l’encodage et le titre, puis une partie <body> contenant le contenu affiché.

Compléments

• Dans l’exemple fourni, le titre de la page est « Ma première page Web », le titre affiché est « Bonjour le monde ! » et le paragraphe affiché est « Ceci est ma première page Web. ».

💡 Astuce mémo

DOCTYPE → html → head → body

📖 3. Balises et contenus HTML

🔑 Notions clés & Définitions

• Balise HTML : Élément de syntaxe qui sert à construire une page Web, avec une balise ouvrante, un contenu et généralement une balise fermante.

★ À maîtriser

• Les balises <h1> à <h6> correspondent à six niveaux de titres, tandis que la balise <p> sert à créer un paragraphe.

• Les balises <ul>, <ol> et <li> servent respectivement à créer une liste à puces, une liste numérotée et un élément de liste.

Compléments

• Les commentaires HTML s’écrivent entre <!-- et -->, expliquent le code et ne sont pas affichés dans la page.

📖 4. Liens images et structure sémantique

🔑 Notions clés & Définitions

• Attribut HTML : Un attribut HTML donne une information supplémentaire à une balise et possède généralement un nom et une valeur.

📝 Points essentiels

• La balise <a> crée un hyperlien en utilisant l’attribut href pour indiquer l’adresse de destination.

• La balise <img> insère une image, l’attribut src indique son emplacement et l’attribut alt fournit sa description textuelle, ce qui améliore notamment l’accessibilité.

• Les balises sémantiques <header>, <nav>, <main>, <section> et <footer> structurent une page et aident le navigateur, les moteurs de recherche et les outils d’accessibilité à la comprendre.

📖 5. Bonnes pratiques et projet

★ À maîtriser

• La page personnelle doit contenir:
  • un titre avec le prénom
  • un paragraphe de présentation
  • le sous-titre « Mes passions »
  • une liste de trois passions
  • une image
  • un lien vers un site
  • un pied de page avec la classe

📌 Les balises doivent être correctement ouvertes, fermées et imbriquées, et les valeurs d’attributs comme celles de href doivent être placées entre guillemets.

Compléments

• Le défi consiste à créer une deuxième page nommée contact.html et à relier les deux pages avec des liens.

• Les balises HTML courantes sont <h1> à <h6> pour les titres, <p> pour les paragraphes, <a> pour les liens hypertextes, <img> pour les images, <ul> pour les listes à puces, <ol> pour les listes numérotées et <li> pour les éléments de liste.

💡 Astuce mémo

Écrire → structurer → relier → vérifier

📊 Tableaux de synthèse

Rôle des langages Web