duranton.net

Chapitre 6 : HTML/CSS.

Introduction :

HTML, qui signifie HyperText Markup Language, est le langage de balisage standard pour créer et structurer des pages et des applications web.

Il fut inventé en 1993. Nous en sommes actuellement à la version 5 (c'est pour cela que l'on parle d'HTML5).

Il utilise des balises pour délimiter les éléments sur la page, tels que les textes, les images, et les liens. HTML est fondamental pour le web, car il fournit la structure de base sur laquelle les styles CSS et les comportements JavaScript sont appliqués.

1. Balise html

Le langage html est un langage dit de balisage. Une balise est un composé du caractère "<", du typage puis de ">" .

On ferme une balise en tapant la même chose mais en faisant précéder le typage par un "/".

2. L'architecture basique

Le contenu de la page HTML est entre les deux balises HTML.

A l'intérieur, on distingue deux parties, la partie head et la partie body.

<!DOCTYPE html>
<html lang="fr">
    
    <head>
        <meta charset="utf-8">
        <title>Mon titre</title>
        <!-- Métadonnées, liens vers des styles et scripts vont ici -->
    </head>
    
    <body>
        <!-- Contenu de la page va ici -->
    </body>
    
</html>

3. Exemple

On peut prendre pour exemple le code suivant :

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>Mon titre</title>
    </head>
    
    <body>
        <h1>Un gros titre</h1>
        <h2>Un sous-titre</h2>
        <p>Mon paragraphe</p>
        <h2>Mon deuxième sous-titre</h2>
        <p>Un autre paragraphe</p>
        <ul>
            <li>Une première ligne d'une liste non ordonnée (unordered list).</li>
            <li>Une deuxième ligne.</li>
        </ul>
        <h2>Mon troisième sous-titre</h2>
        <p>Encore un parapgraphe.</p>
        <p>Et un autre beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup
            beaucoup plus long.</p>
        <ol>
            <li>Une première ligne d'une liste ordonnée (ordered list).</li>
            <li>Une deuxième ligne.</li>
        </ol>
    </body>
    
</html>

Et cette page donne sur votre navigateur la page suivante.

4. Exercice

Ecrire ce qu'il faut dans un fichier index.html afin que l'on obtienne :

5. Le CSS

Les pages que nous avons vu sont tristes. Elles sont en noir et blanc et offrent peu de personnalisation.

Le CSS est là pour y apporter "du style".

Le CSS est né est 1996. CSS signifie "Cascading Style Sheets".

Nous en sommes actuellement à la version 3 (c'est pour cela que l'on parle de CSS3).

6. Utilisation du CSS

Le CSS peut être inclus de trois façons :

7. Exercice

Ecrire ce qu'il faut dans un fichier index.html et dans un fichier index.css afin que l'on obtienne :

8. Les balises à connaître pour débuter en HTML

Balises de Titre :

La balise <h1> à <h6> est utilisée pour définir des titres de différentes tailles, <h1> étant le plus grand.

<h3>Titre Principal</h3>
<h3>Sous-Titre</h3>

Paragraphe :

La balise <p> est utilisée pour créer des paragraphes de texte.

<p>Ceci est un paragraphe.</p>

Liste à Puces et Liste Numérotée :

Les balises <ul> (liste à puces) et <ol> (liste numérotée) sont utilisées pour créer des listes.

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

<ol>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ol>

Liens :

La balise <a> est utilisée pour créer des liens hypertexte.

<a href="https://www.exemple.com">Visiter Exemple.com</a>

Image :

La balise <img> est utilisée pour afficher des images.

<img src="chemin/vers/image.jpg" alt="Description de l'image">

Division :

La balise <div> est une balise de division générique souvent utilisée pour grouper des éléments.

<div>
    <p>Ceci est un paragraphe à l'intérieur d'une division.</p>
</div>

9. Les éléments à connaitre pour débuter en CSS

Sélection d'Éléments :

Les sélecteurs CSS sont utilisés pour cibler les éléments HTML que vous souhaitez styliser. Voici quelques exemples :


    /* Sélection d'éléments par balise */
    p {
        color: blue;
    }

    /* Sélection d'éléments par classe */
    .maClasse {o
        font-size: 16px;
    }

    /* Sélection d'éléments par ID */
    #monID {
        background-color: #f0f0f0;
    }

Propriétés de Style :

Les propriétés CSS définissent le style des éléments sélectionnés. Voici quelques exemples :


    /* Changement de la couleur du texte */
    color: red;

    /* Modification de la taille de la police */
    font-size: 18px;

    /* Ajout d'une bordure */
    border: 1px solid #000;

Modèle de Boîte :

Le modèle de boîte est crucial pour comprendre la disposition des éléments. Il comprend la marge, la bordure, le rembourrage et le contenu.


    /* Définition de la marge */
    margin: 10px;

    /* Ajout de la bordure */
    border: 2px solid #333;

    /* Attribution du rembourrage */
    padding: 15px;

Flexbox :

Flexbox est un modèle de disposition qui permet de créer des mises en page plus efficacement.


    /* Utilisation de Flexbox pour aligner les éléments horizontalement */
    display: flex;
    justify-content: space-between;

10. Projet

Projet : créer un site internet