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.

3709 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
298 vues
Boucles (for, while, do-while, foreach)
Les boucles en PHP permettent d'exécuter un bloc de code plusieurs fois, en fonction d'une condition spécifiée. Les principales boucles en PHP sont for, while, do-while et foreach. Voici un cours...
PHP
2 232 vues
Utilisation de PhpMyAdmin pour créer une nouvelle base de données
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Vous serez redirigé vers la page de connexion de...
SQL
2 182 vues
Modifier ses informations en PHP
Dans cette nouvelle vidéo nous allons apprendre à modifier vos informations !Lors de l’inscription il se peut que vous ayez fait une erreur. C'est pour cela que cette page sera importante pour...
Créer son site de rencontres
383 vues
Utilisation des attributs id et class pour identifier et styler les éléments
Utilisation des attributs id et class pour identifier et styler les élémentsLes attributs id et class sont utilisés pour identifier et styler les éléments HTML en leur attribuant des...
HTML
17 975 vues
Mot de passe oublié en PHP
Il arrivera souvent qu'un utilisateur oublie son mot de passe. Pour y remédiez nous allons modifier notre base de données avec un nouveau paramètre nous permettant de savoir si...
Créer son site
575 vues
Gestion des événements : click, submit, keydown, etc.
Gestion des Événements en JavaScriptLa gestion des événements en JavaScript permet d'interagir avec les actions de l'utilisateur sur une page web, telles que les clics de souris, les soumissions...
JS
1 894 vues
Utilisation de l'instruction SQL INSERT INTO pour ajouter des données à une table
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
3 213 vues
Explorer les avantages de la séparation des préoccupations
Explorer les avantages de la séparation des préoccupationsLa séparation des préoccupations est un principe de conception qui consiste à diviser un système en différentes parties qui se...
CSS
Publicité
Cette pub permet au site de vivre ...