Structure de base HTML et CSS

Le HTML

Le HTML est la base de toute page web. Il est structuré pour être compréhensible autant par nous que par les navigateurs. Voici qq explications plus détaillées :


    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Titre de la page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- Le contenu va ici -->
    </body>
    </html>

Les composants essentiels :

<!DOCTYPE html> : Déclare qu'on utilise HTML5
<html lang="fr"> : Englobe tout le contenu, avec le français comme langue principale
Dans le <head>, on retrouve les métadonnées essentielles :

<meta charset="UTF-8"> : Pour la gestion des caractères spéciaux
<meta name="viewport"> : Pour l'adaptation aux différents écrans
<title> : Le titre qui apparaît dans l'onglet
<link> : Connection avec la feuille de style CSS

<body> : Tout le contenu visible de la page

Les balises principales

Structure

<header> : En-tête de page ou de section
<nav> : Navigation
<main> : Contenu principal
<section> : Section thématique
<article> : Contenu autonome
<footer> : Pied de page

Texte

<h1> à <h6> : Hiérarchie des titres
<p> : Paragraphes
<span> : Conteneur en ligne
<strong> : Mise en valeur forte
<em> : Emphase

Listes

<ul> : Pour les listes à puces
<ol> : Pour les listes numérotées
<li> : Chaque élément de la liste

Médias et liens

<a href="..."> : Les liens vers d'autres pages
<img src="..." alt="..."> : Pour intégrer des images
<video> : Pour les vidéos
<audio> : Pour l'audio

Tableaux

<table> : Structure du tableau
<tr> : Les lignes
<td> : Les cellules
<th> : Les en-têtes de colonnes

Divisions et formulaires

<div> : Le couteau suisse des conteneurs block
<span> : Pareil mais en inline
<form> : Pour les formulaires
<input>, <textarea>, <button> : Les éléments de formulaire

Voici un exemple basique qui combine qq éléments :


    <article>
        <h1>Mon titre principal</h1>
        <p>Un paragraphe avec du texte <strong>important</strong>.</p>
        <ul>
            <li>Premier élément</li>
            <li>Second élément</li>
        </ul>
        <img src="image.jpg" alt="Description de l'image">
    </article>

Les props CSS essentielles

Le CSS permet de styliser tous ces éléments HTML comme un example directement une balise comme body ou main ou encore h1 , h2 … . ou sinon une classe avec class=”” .LeNomDeLaClasse ou encore d’une id:”” #LeNomDeLaClasse

Voici les propriétés principales à connaître :

Texte


    .texte {
        color: #000000;                    /* Couleur */
        font-family: Arial, sans-serif;    /* Police */
        font-size: 16px;                   /* Taille */
        font-weight: bold;                 /* Graisse */
        text-align: center;                /* Alignement */
        text-decoration: underline;        /* Décoration */
        line-height: 1.5;                  /* Interlignage */
    }

Boîte et mise en page


    .element {
        width: 100px;                      /* Largeur */
        height: 100px;                     /* Hauteur */
        margin: 10px;                      /* Marge externe */
        padding: 15px;                     /* Marge interne */
        border: 1px solid black;           /* Bordure */
        border-radius: 5px;                /* Coins arrondis */
    }

Positionnement


    .position {
        position: relative;               /* Position par rapport au parent */
        top: 10px;                        /* Décalage haut */
        left: 20px;                       /* Décalage gauche */
        display: flex;                    /* Mode d'affichage */
        float: left;                      /* Flottement */
    }

Fond


    .background {
        background-color: #ffffff;         /* Couleur de fond */
        background-image: url('image.jpg'); /* Image */
        background-size: cover;            /* Taille */
        background-position: center;       /* Position */
    }

Flexbox


    .conteneur-flex {
        display: flex;                     /* Activation flexbox */
        justify-content: center;           /* Alignement horizontal */
        align-items: center;               /* Alignement vertical */
        flex-direction: row;               /* Direction */
        flex-wrap: wrap;                   /* Retour à la ligne */
    }

C'est les bases essentielles pour démarrer. Avec ça, tu peux déjà créer pas mal de mises en page !

Revenir au HUB

Structure de base HTML et CSS

Le HTML

Les balises principales

Structure

Texte

Listes

Médias et liens

Tableaux

Divisions et formulaires

Les props CSS essentielles

Texte

Boîte et mise en page

Positionnement

Fond

Flexbox