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.

3683 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
300 vues
Sélection d'éléments HTML
Sélection d'Éléments HTML en JavaScriptLa sélection d'éléments HTML est une opération fondamentale en JavaScript. Cela permet d'interagir avec les éléments de la page web, de modifier leur...
JS
1 588 vues
Accepter ou refuser une demande d'amis
Nous allons enfin terminer notre système d'amis en permettant à l'utilisateur d'accepter ou de refuser une ou plusieurs demande grâce à une liste contenant toutes les demandes que l'utilisateur...
Créer son site de rencontres
1 885 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
2 965 vues
Twitter Cards
Les Twitter Cards sont des protocoles qui vous permettent d’attacher des photos, des vidéos et autres médias interactifs à vos tweets afin d’amener...
Créer son site
281 vues
Variables et types de données
Variables et Types de Données en JavaScript1. Variables :Une variable en JavaScript est un conteneur pour stocker des données. Vous pouvez utiliser des variables pour stocker différentes valeurs...
JS
1 352 vues
Voir plus de messages (2/2)
Dans la suite de cette vidéo nous allons continuer notre système pour voir plus de messages. Nous allons finaliser la disparition du bouton ‘voir plus’ lorsqu’il n’y aura plus de messages...
Créer son site de rencontres
338 vues
Comprendre le rôle de JavaScript dans le développement web
Le rôle de JavaScript dans le développement webJavaScript est un langage de programmation qui joue un rôle crucial dans le développement web moderne. Il est largement utilisé pour rendre les...
JS
2 949 vues
Afficher ses utilisateurs en PHP
Maintenant que nous avons créé notre formulaire d’inscription et de connexion nous allons afficher tous nos utilisateurs du site afin de visiter par la suite les autres profils du site.
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...