CSS

Différencier HTML (structure) de CSS (présentation)

Différencier HTML (structure) de CSS (présentation)


HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils servent des fonctions différentes. Comprendre la distinction entre les deux est essentiel pour une conception Web efficace.


1. HTML : La structure de la page


HTML est le langage de balisage utilisé pour définir la structure et le contenu d'une page Web. Il utilise des balises pour indiquer les différents éléments d'une page, tels que les titres, les paragraphes, les listes et les images. HTML donne au navigateur des instructions sur la manière de structurer le contenu pour qu'il soit affiché correctement.


Exemple de code HTML :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page Web</title>
  </head>
  <body>
    <header>
      <h1>Mon Site Web</h1>
      <nav>
        <ul>
          <li>
            <a href="#">Accueil</a>
          </li>
          <li>
            <a href="#">À propos</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
    <section>
      <h2>À propos de moi</h2>
      <p>Bienvenue sur mon site Web !</p>
    </section>
    <footer>
      <p>&copy; 2024 Mon Site Web</p>
    </footer>
  </body>
</html>


Dans cet exemple, HTML est utilisé pour structurer la page en sections logiques comme l'en-tête (<header>), le contenu principal (<section>), et le pied de page (<footer>).


2. CSS : La présentation visuelle


CSS est un langage de style utilisé pour contrôler la présentation visuelle des éléments HTML. Il permet de définir des règles de style telles que les couleurs, les polices, les marges et les bordures pour rendre la page plus attrayante et conviviale. CSS sépare la présentation du contenu, ce qui permet de modifier facilement l'apparence d'un site sans changer sa structure.


Exemple de code CSS :


/* Styles pour l'en-tête */ 
header { 
  background-color: #333; 
  color: #fff; 
  padding: 20px; 
} 

/* Styles pour les liens de navigation */ 
  nav ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
} 

nav ul li { 
  display: inline; 
  margin-right: 10px; 
}

nav ul li a { 
  color: #fff; 
  text-decoration: none; 
} 

/* Styles pour le contenu principal */ 
section { 
  padding: 20px; 
} 

/* Styles pour le pied de page */ 
footer { 
  background-color: #333; 
  color: #fff; 
  padding: 10px 20px; 
  text-align: center; 
}


Dans cet exemple, CSS est utilisé pour styliser les différents éléments HTML, comme l'en-tête (header), les liens de navigation (nav ul li a), le contenu principal (section), et le pied de page (footer).


En résumé, HTML définit la structure et le contenu d'une page Web, tandis que CSS contrôle la présentation visuelle de cette structure. En combinant les deux, les concepteurs peuvent créer des sites Web esthétiquement agréables et faciles à naviguer.

3713 vues
Modifié le 22 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
575 vues
CSS externe : l'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTML
CSS Externe : L'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTMLLe CSS externe est une méthode de stylisation où les styles sont définis dans des fichiers CSS distincts et...
CSS
302 vues
Déclarations CSS : comment les combiner pour styliser les éléments
Déclarations CSS : Comment les combiner pour styliser les élémentsLes déclarations CSS sont des instructions individuelles qui spécifient le style des éléments HTML sur une page Web. Elles...
CSS
13 384 vues
Notre base de données
Avant d'entamer le développement de notre futur site il nous faut une base de données afin de pouvoir ajouter, modifier ou de supprimer des informations.Étapes...
Créer son site
314 vues
Déclaration de fonctions
Les fonctions en PHP sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code en le divisant en tâches plus petites et plus gérables. Voici...
PHP
219 vues
Retour de valeurs
Retour de Valeurs dans les Fonctions en JavaScriptLorsqu'une fonction est exécutée, elle peut renvoyer une valeur à l'endroit où elle a été appelée. Cette valeur peut être utilisée pour...
JS
1 599 vues
Utiliser les opérations mathématiques (+, -, *, /) dans les styles
Utiliser les opérations mathématiques en SASS : +, -, , /1. Addition (+), Soustraction (-), Multiplication (*), Division (/) :En SASS, vous pouvez effectuer des opérations mathématiques...
Sass
587 vues
Utilisation des clauses WHERE, ORDER BY, GROUP BY et LIMIT pour filtrer et trier les résultats
1. Utilisation de la Clause WHERE pour Filtrer les Résultats :La clause WHERE est utilisée pour filtrer les résultats en fonction de certaines conditions.SELECT colonne1, colonne2, ... FROM...
SQL
477 vues
Qu'est-ce que PHP ?
Introduction à PHPPHP, acronyme de "Hypertext Preprocessor", est un langage de programmation côté serveur très populaire, principalement utilisé pour développer des sites Web dynamiques et...
PHP
Publicité
Cette pub permet au site de vivre ...