📄

Introduction au HTML pour débutants

Sep 4, 2024

Notes de Cours sur HTML pour Débutants

Introduction

  • Sujet : HTML pour extrêmes débutants.
  • Objectif : Retracer les éléments utiles en HTML pour créer des structures de pages web.
  • À la fin : Création d'un document complet avec les éléments utiles en HTML.

Création du Projet

  • Créer un dossier : HTML cours.
  • Créer un fichier : index.html.
  • Ouvrir le fichier avec un éditeur : Bloc-notes ou VS Code.

Écriture d'une Page HTML Basique

  • Exemple de contenu :
    • Écrire "Hello Internet" dans le fichier.
    • Afficher le contenu dans le navigateur.
  • Utilisation des balises HTML :
    • Balise <h1> pour les titres.
    • Balise <br> pour les sauts de ligne.

Utilisation de VS Code

  • Installer Visual Studio Code.
  • Utiliser des fonctionnalités comme le glisser-déposer pour ouvrir des fichiers.
  • Structurer le code avec des sections et des divs.

Structure de Base d'une Page HTML

  • Débuter avec <!DOCTYPE html> et <html lang="fr">.
  • Section <head> pour les métadonnées :
    • Utiliser <meta charset="UTF-8">.
    • Définir le titre avec <title>.
  • <body> pour le contenu visible de la page.

Éléments Textuels

  • Utiliser des titres de différents niveaux : <h1> à <h6>.
  • Paragraphes avec <p>.
  • Mise en forme avec <strong> pour le gras et <em> pour l'italique.

Insertion d'Images

  • Utiliser <img> pour insérer des images :
    • Exemple : <img src="photo_paysage.jpg" alt="image paysage">.
  • Attributs supplémentaires comme height pour ajuster la taille.

Création de Listes

  • Listes non ordonnées : <ul> avec <li>.
  • Listes ordonnées : <ol> avec <li>.

Tableaux

  • Définir un tableau avec <table> :
    • En-tête avec <thead> et <th>.
    • Corps du tableau avec <tbody> et <td>.

Liens Hypertextes

  • Créer des liens avec <a href="url">.
  • Utiliser target="_blank" pour ouvrir le lien dans un nouvel onglet._

Formulaires

  • Structure d'un formulaire : <form>.
  • Utilisation d'inputs :
    • type="text", type="number", type="radio", type="checkbox", et type="submit".
  • Labels associés avec for pour l'accessibilité.
  • Utilisation de <textarea> pour des zones de texte plus grandes.

Footer

  • Définir un footer avec <footer>.
  • Ajouter des liens pour le mail avec mailto: et des liens de téléchargement.

Conclusion

  • Résumé des éléments HTML appris.
  • Importance de pratiquer et de se familiariser avec le code HTML.
  • Invitation à suivre les prochains cours sur CSS pour embellir les pages.

Full transcript