Chapitre 6 : HTML, CSS et JavaScript.

Introduction :

Toutes les pages que vous consultez sur le web — un article, une boutique, un réseau social — ne sont au départ que de simples fichiers texte envoyés par un serveur.

Comment votre navigateur sait-il alors qu'un mot est un titre, qu'un autre est un lien à cliquer, ou qu'une image doit s'afficher ici plutôt que là ? Inventé en 1993, le HTML apporte une réponse : et s'il suffisait d'entourer le texte de petites étiquettes pour lui donner un sens ?

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.

À 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. 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.

<h1>Titre Principal</h1>
<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>

5. Exercice : reproduction d'une page HTML.

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

6. Le CSS

Les pages que nous avons vues 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é en 1996. CSS signifie "Cascading Style Sheets".

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

7. Utilisation du CSS

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

Directement dans une balise HTML, à l'aide de l'attribut style="".

Par exemple, pour colorer un paragraphe en rouge :
```
<p style="color: red;">Ce texte est rouge.</p>
```
Dans le fichier HTML, entre deux balises <style> placées dans l'entête (la balise <head>).

Par exemple, pour colorer tous les paragraphes de la page en rouge :
```
<head>
    <meta charset="utf-8">
    <title>Mon titre</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
```
Dans un fichier séparé .css mais il faut au préalable indiquer dans l'entête (la balise <head>) de la page HTML où le trouver, grâce à la balise <link>.

Par exemple, si ton style est écrit dans un fichier index.css situé dans le même dossier que la page, tu écris :
```
<head>
    <meta charset="utf-8">
    <title>Mon titre</title>
    <link rel="stylesheet" href="index.css">
</head>
```

8. 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;                  /* active le mode Flexbox sur le conteneur */
flex-direction: row;            /* place les éléments côte à côte, en ligne (horizontalement) */
flex-wrap: wrap;                /* autorise le retour à la ligne si les éléments débordent */
justify-content: space-evenly;  /* répartit l'espace restant de façon égale sur l'axe horizontal */
align-items: center;            /* centre les éléments sur l'axe vertical */

9. Exercice : reproduction d'une page avec HTML et CSS.

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

10. JavaScript

Tout d'abord, il ne faut pas confondre Java et JavaScript. Ce sont deux langages distincts.

JavaScript est né en 1995 et est souvent appelé par le terme JS.

JavaScript est l'un des langages de programmation les plus utilisés dans le monde car il est le seul à pouvoir être exécuté sur les navigateurs Web. Il est ainsi possible de programmer du code qui peut interagir avec l'utilisateur.

11. Exemple

Cette section a le code suivant :

Et il permet de jouer avec le bouton ci-dessous :

Tu as appuyé 0 fois !

12. Insertion du JavaScript

On peut intégrer du code JavaScript de deux façons :

en l'insérant dans le fichier .html à l'aide des balises "script".
en créant un fichier distinct .js et en précisant dans l'entête du fichier HTML où il est présent.

13. Projet

Projet : créer un site internet