Aller au contenu principal

Le HTML et le CSS

Le développement web repose sur deux technologies essentielles : le HTML (HyperText Markup Language) et le CSS (Cascading Style Sheets).
Ces deux langages permettent de structurer et de styliser des pages web. Nous allons explorer leur fonctionnement, et voir comment ils interagissent pour créer des sites webs.

Le HTML​

Le HTML est un langage de balisage utilisé pour définir la structure et le contenu d'une page web. Contrairement aux langages de programmation classiques (comme Python ou JavaScript), le HTML ne contient pas de logique ou de calculs, mais il permet de décrire des éléments d'une page, comme :

  • Des titres ;
  • Du texte ;
  • Des images ;
  • Des liens ;
  • Des tableaux ;
  • Des formulaires, etc.

Le HTML fonctionne avec des balises (tags) entourées de crochets angulaires < >. Ces balises indiquent au navigateur comment afficher les différents éléments. Par exemple :

<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe de texte.</p>

Dans cet exemple :

  • <h1> représente un titre principal.
  • <p> représente un paragraphe.
Ouverture/Fermeture

Chaque balise a une balise d'ouverture (ex. : <h1>) et, dans la plupart des cas, une balise de fermeture correspondante (ex. : </h1>).

Quelques balises HTML courantes :

  • <html> : Définit la structure globale de la page.
  • <head> : Contient des métadonnées, comme le titre de la page ou des liens vers des fichiers CSS.
  • <body> : Contient tout le contenu visible de la page.
  • <a> : Crée des liens hypertexte.
  • <img> : Insère des images.
  • <ul> et <li> : Créent des listes.
  • <p> : Crée des paragraphes.
  • <h1>, <h2> jusqu'à <h6> : Créent des titres de niveau 1, 2, ... , 6.
Structure basique d'une page

Le code minimal d'une page :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>titre de la page</title>
    </head>
    <body>

    </body>
</html>

La balise <meta> permet de préciser l'encodage des caractères.
La balise <title> permet de marquer un titre dans l'onglet de la page.

Il existe beaucoup de balises différentes, ajoutant du contenu dans une page, manipulant le texte, etc.
Les balises peuvent également s'imbriquer les unes dans les autres :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>titre de la page</title>
    </head>
    <body>
        <div>
            <a href="monbureaunumerique.fr">Lien vers MBN</a>
        </div>
    </body>
</html>

Dans cet exemple, une balise <div> ("division", sert à structurer des éléments) contient également une balise <a> créant un hyperlien vers monbureaunumerique.

Le CSS​

Le CSS (Cascading Style Sheets) est un langage complémentaire au HTML qui contrôle l'apparence visuelle des éléments d'une page web. Tandis que le HTML structure le contenu, le CSS détermine comment ce contenu sera présenté, en définissant des propriétés comme :

  • La couleur ;
  • La taille ;
  • La police d'écriture ;
  • Les marges et les espaces ;
  • Les bordures, etc.

Ajout de CSS​

Le CSS peut être intégré dans une page de trois manières principales :

Styles en ligne​

Le CSS est appliqué directement sur une balise HTML à l’aide de l’attribut style :

<p style="color: red; font-size: 16px;">Ce texte est rouge et a une taille de 16px.</p>

Inconvénients : Peu pratique pour gérer de grandes quantités de styles.

CSS interne​

Les styles sont définis dans une balise <style> située dans la section <head> de la page HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <style>
            h1 {
                color: blue;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Titre principal</h1>
    </body>
</html>

Avantage : Idéal pour des projets simples ou du prototypage rapide.
Inconvénient : Les styles ne sont pas réutilisables entre plusieurs pages.

CSS externe​

Les styles sont écrits dans un fichier séparé (ex. : style.css) et liés à la page HTML avec une balise <link>.

Fichier HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Titre principal</h1>
    </body>
</html>

Fichier "style.css" :

h1 {
    color: green;
    text-align: center;
    font-family: Arial, sans-serif;
}

Avantages :

  • Réutilisation facile des styles entre plusieurs pages ;
  • Code HTML plus propre.

Syntaxe CSS​

Le CSS utilise une syntaxe simple composée de sélecteurs, propriétés, et valeurs :

sélecteur {
    propriété: valeur;
    propriété: valeur;
}

Exemple :

p {             /* On sélectionne toutes les balises p */
    color: blue; /* Texte en bleu */
    font-size: 18px; /* Taille de la police : 18px */
    margin: 10px; /* Marges autour du paragraphe */
}

Les sélecteurs permettent de cibler les éléments HTML à styliser. On en distingue plusieurs sortes :

  • Type : cible une balise HTML : 
    h1 {
        color: red;
    }
  • Classe (.) : cible les éléments avec une classe spécifique : 
    <p class="important">Texte important</p>
    .important {
        font-weight: bold;
    }
  • ID (#) : cible un élément avec un identifiant unique : 
    <div id="header">En-tête</div>
    #header {
        background-color: lightgray;
    }

Héritage​

Certains styles sont hérités automatiquement par les éléments enfants, comme la couleur du texte (color) ou la police (font-family).

Exemple :

body {
    font-family: Arial, sans-serif;
    color: black;
}

Tous les éléments dans <body> héritent de cette police et couleur, sauf si d’autres règles les modifient.