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.

3694 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
3 776 vues
Notre base de données
Avant de commencer notre cours pour créer notre système d'amis, nous allons commencer par créer notre table de relation.Pour cela nous avons besoin d'un demandeur et d'un receveur.Le demandeur est...
Créer son site
443 vues
Flexbox : créer des mises en page flexibles et responsives
Flexbox : Créer des Mises en Page Flexibles et ResponsivesFlexbox est une méthode de disposition en CSS qui permet de créer des mises en page flexibles et responsives. Il offre un contrôle...
CSS
1 889 vues
Installer SASS sur votre système
Installation de SASS sur votre système1. Installer Node.js :SASS nécessite Node.js pour fonctionner. Si vous ne l'avez pas déjà installé, téléchargez et installez Node.js à partir du site...
Sass
1 607 vues
Mixins : Créer des mixins pour réutiliser des blocs de styles
Mixins en SASS : Créer et Utiliser1. Déclaration de mixins :En SASS, les mixins sont déclarés à l'aide du mot-clé @mixin, suivi du nom du mixin et des paramètres entre parenthèses. Les styles...
Sass
15 126 vues
Connexion PHP
Après avoir créé notre formulaire d'inscription il nous faut créer un formulaire de connexion afin que nos futurs utilisateurs puissent se connecter au site une fois...
Créer son site
3 340 vues
Définir l'encodage de caractères avec <meta charset="utf-8">
Définir l'encodage de caractères avec <meta charset="utf-8">L'encodage de caractères définit la correspondance entre les caractères et les valeurs binaires utilisées par l'ordinateur....
HTML
298 vues
Création d'un fichier .htaccess
Le fichier .htaccess est un élément important pour configurer et personnaliser un site web sur un serveur Apache. Dans ce cours, nous allons apprendre comment créer un fichier .htaccess de...
HTACCESS
3 048 vues
Comprendre le rôle de CSS dans la conception Web.
Le rôle de CSS dans la conception WebCSS, ou Cascading Style Sheets, est un langage de style utilisé pour définir la présentation visuelle des pages Web. Il agit comme une couche de style qui...
CSS
Publicité
Cette pub permet au site de vivre ...