Wednesday, January 22, 2025

Connaitre le html, un premier pas vers la programmation

 

1. Définition du HTML

  • HTML (HyperText Markup Language) : Langage standard utilisé pour structurer et organiser le contenu des pages web.
  • Il permet d'intégrer du texte, des images, des vidéos, des liens, et bien plus.
  • Il est conçu pour collaborer avec :
    • CSS : Pour définir l'apparence et le style des pages.
    • JavaScript : Pour ajouter des fonctionnalités dynamiques et interactives

2. Brève histoire du HTML

  • 1989 : Créé par Tim Berners-Lee, fondateur du World Wide Web.
  • Évolutions importantes :
    • HTML 4 : Norme adoptée dans les années 1990.
    • HTML5 (2014) : Ajout de fonctionnalités modernes comme le support natif pour les vidéos, l’audio, et un balisage sémantique avancé.

3. Fonctionnement du HTML

  • HTML est basé sur des balises, qui sont des éléments structurants entourés par < et > :
    html

    <h1>Titre principal</h1>
<p>Paragraphe de texte.</p>
  • Les balises peuvent inclure des attributs pour personnaliser leur comportement, comme :
    • src : Source d’une image ou d’un fichier multimédia.
    • href : Lien vers une autre page ou ressource.

4. Anatomie d’un élément HTML

Chaque élément HTML se compose de trois parties principales :

  1. Balise d’ouverture : <p>
  2. Contenu : Texte ou autres éléments.
  3. Balise de fermeture : </p>

5. Balises essentielles en HTML

Voici quelques balises fréquemment utilisées :

  • Structure générale :
    • <div> : Conteneur générique pour regrouper d'autres éléments.
  • Texte :
    • <p> : Paragraphe.
    • <h1> à <h6> : Titres de différents niveaux (du plus important <h1> au moins important <h6>).
  • Médias :
    • <img> : Image.
    • <video> et <audio> : Vidéos et audio (HTML5).
  • Navigation et listes :
    • <a> : Lien hypertexte.
    • <ul> / <ol> : Listes non ordonnées / ordonnées.

6. Exemple d’un document HTML complet

Voici un exemple simple de fichier HTML :

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de site</title>
</head>
<body>
    <header>
        <h1>Bienvenue</h1>
    </header>
    <main>
        <p>Voici un exemple de page HTML simple.</p>
    </main>
    <footer>
        <p>&copy; 2025 - Exemple HTML</p>
    </footer>
</body>
</html>


7. HTML vs HTML5
  • HTML5 :
    • Ajoute des balises sémantiques comme <header>, <footer>, <article>, et <section>.
    • Support natif pour :
      • Les vidéos (<video>) et les fichiers audio (<audio>) sans nécessiter de plugins.
      • Le dessin via <canvas> et les animations via SVG.
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Notion de base en commerce international

International trade, les Incoterms