Fiche Complète pour l'Apprentissage du HTML et CSS

1. Introduction

HTML (HyperText Markup Language) : Langage de balisage utilisé pour structurer le contenu d'une page web.

CSS (Cascading Style Sheets) : Langage de style utilisé pour mettre en forme et décorer le contenu HTML.

2. Les Bases du HTML

Structure de base d'un document HTML

          
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

Balises courantes

  • <h1> à <h6> : Titres
  • <p> : Paragraphe
  • <a href="lien"> : Lien hypertexte
  • <img src="image.jpg" alt="description"> : Image
  • <ul>, <ol>, <li> : Listes
  • <div> : Conteneur générique
  • <span> : Conteneur en ligne

3. Les Bases du CSS

Sélecteurs

  • Par élément : p { ... }
  • Par classe : .ma-classe { ... }
  • Par ID : #mon-id { ... }

Propriétés courantes

  • color : Couleur du texte
  • font-size : Taille de la police
  • margin : Marge extérieure
  • padding : Marge intérieure
  • background-color : Couleur de fond
  • border : Bordure

Box Model

Modèle de boîte composé de : margin, border, padding, content.

4. Intégration du CSS dans le HTML

Inline

          
<p style="color: red;">Ce texte est rouge.</p>

Interne

          
<style>
    p {
        color: blue;
    }
</style>

Externe

          
<link rel="stylesheet" href="styles.css">

5. Positionnement et Disposition

Display

  • block : Prend toute la largeur disponible
  • inline : Prend seulement la largeur nécessaire
  • inline-block : Combine les deux
  • flex : Modèle de boîte flexible
  • grid : Modèle de grille

Position

  • static : Par défaut
  • relative : Position relative à sa position normale
  • absolute : Position absolue par rapport au parent positionné
  • fixed : Position fixe par rapport à la fenêtre du navigateur
  • sticky : Position collante

6. Responsive Design

Media Queries

          
@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

Viewport

          
<meta name="viewport" content="width=device-width, initial-scale=1.0">

7. Animations et Transitions

Transitions

          
.box {
    transition: background-color 0.5s ease;
}
.box:hover {
    background-color: yellow;
}

Animations

          
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}
.box {
    animation: slide 2s infinite;
}

8. Bonnes Pratiques

  • Validation : Utiliser des validateurs HTML et CSS pour vérifier le code.
  • Accessibilité : Utiliser des balises sémantiques (<header>, <nav>, etc.) et des attributs alt pour les images.
  • Performance : Minimiser l'utilisation de CSS inutile et optimiser les images.

9. Outils et Ressources

  • Éditeurs de texte : VS Code, Sublime Text, Atom
  • Navigateurs : Chrome, Firefox (avec outils de développement)
  • Ressources en ligne : MDN Web Docs, W3Schools, Codecademy, FreeCodeCamp

10. Projets Pratiques

  • Créer une page web simple
  • Créer un portfolio
  • Créer un formulaire
  • Créer un site responsive

11. Conclusion

HTML et CSS sont les fondements du développement web. Maîtriser ces langages est essentiel pour créer des sites web modernes, accessibles et performants. Continuez à pratiquer et à explorer des projets plus complexes pour approfondir vos compétences.