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

Les balises <h1> à <h6> sont utilisées pour définir des titres de différents niveaux, <h1> étant le titre principal.

Code HTML

<h1>Titre principal</h1>
<h3>Sous-titre</h3>

Résultat dans le navigateur

Titre principal

Sous-titre

Paragraphe

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

Code HTML

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

Résultat dans le navigateur

Ceci est un paragraphe.

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.

Code HTML

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

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

Résultat dans le navigateur

Élément 1
Élément 2

Élément 1
Élément 2

Liens

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

Code HTML

<a href="https://fr.wikipedia.org/wiki/M%C3%A9lin%C3%A9e_Manouchian">Découvrir Mélinée Manouchian</a>

Résultat dans le navigateur

Découvrir Mélinée Manouchian

Image

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

Code HTML

<img src="imageintro.webp" alt="Illustration du langage HTML" width="200">

Résultat dans le navigateur

Division

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

Code HTML

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

Résultat dans le navigateur

Ceci est un paragraphe à l'intérieur d'une division.

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 propriétés de style essentielles en CSS

Une propriété CSS permet de modifier l'apparence ou la disposition d'un élément HTML. Elle s'écrit dans une règle CSS, après le sélecteur.

Aligner du texte avec `text-align`

La propriété text-align permet d'aligner horizontalement le texte à gauche, au centre ou à droite.

Code CSS

p {
    text-align: center;
}

Résultat dans le navigateur

Ce texte est centré.

Modifier les couleurs avec `color` et `background-color`

color modifie la couleur du texte, tandis que background-color modifie la couleur de l'arrière-plan.

Code CSS

p {
    color: darkblue;
    background-color: lightblue;
}

Résultat dans le navigateur

Le texte et son arrière-plan changent de couleur.

Tracer une bordure avec `border` et `border-radius`

border ajoute une bordure. border-radius permet d'en arrondir les angles.

Code CSS

p {
    border: 2px solid black;
    border-radius: 10px;
}

Résultat dans le navigateur

Ce paragraphe possède une bordure aux angles arrondis.

Créer des espacements avec `margin` et `padding`

margin crée un espace à l'extérieur de l'élément. padding crée un espace entre son contenu et sa bordure.

Code CSS

p {
    margin: 20px;
    padding: 15px;
}

Résultat dans le navigateur

Le texte est éloigné des autres éléments et de sa propre bordure.

Ajouter une ombre avec `box-shadow`

La propriété box-shadow ajoute une ombre autour de la boîte d'un élément.

Code CSS

div {
    box-shadow: 4px 4px 10px gray;
}

Résultat dans le navigateur

Cette boîte possède une ombre.

Disposer des éléments avec Flexbox

La valeur flex de la propriété display permet de disposer facilement les éléments enfants sur une ligne et de gérer leur alignement.

Code CSS

.conteneur {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

Résultat dans le navigateur

Élément 1Élément 2Élément 3

9. Les sélecteurs CSS

Un sélecteur indique au navigateur quels éléments HTML doivent recevoir les propriétés écrites dans une règle CSS.

Sélectionner une balise

Écrire le nom d'une balise sélectionne toutes les balises de ce type. Ici, la règle s'applique à tous les paragraphes.

Code CSS

p {
    border-left: 3px solid blue;
}

Résultat dans le navigateur

Ce paragraphe est sélectionné par le nom de sa balise.

Sélectionner une classe

Un point . placé avant un nom sélectionne les éléments qui possèdent cette classe. Une même classe peut être utilisée plusieurs fois.

Codes HTML et CSS

<p class="important">À retenir !</p>

.important {
    font-weight: bold;
}

Résultat dans le navigateur

À retenir !

Sélectionner un identifiant

Un croisillon # placé avant un nom sélectionne l'élément qui possède cet identifiant. Un identifiant doit être unique dans la page.

Codes HTML et CSS

<div id="message">Bienvenue !</div>

#message {
    border: 2px solid blue;
}

Résultat dans le navigateur

Bienvenue !

10. 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 :

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

12. Exemple

Cette section a le code suivant :

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

Tu as appuyé 0 fois !

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

14. Projet

Projet : créer un site internet

Chapitre 6 : HTML, CSS et JavaScript.

Introduction :

1. Balise html

2. L'architecture basique

3. Exemple

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

Balises de titre

Titre principal

Sous-titre

Paragraphe

Liste à puces et liste numérotée

Liens

Image

Division

5. Exercice : reproduction d'une page HTML.

6. Le CSS

7. Utilisation du CSS

8. Les propriétés de style essentielles en CSS

Aligner du texte avec text-align

Modifier les couleurs avec color et background-color

Tracer une bordure avec border et border-radius

Créer des espacements avec margin et padding

Ajouter une ombre avec box-shadow

Disposer des éléments avec Flexbox

9. Les sélecteurs CSS

Sélectionner une balise

Sélectionner une classe

Sélectionner un identifiant

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

11. JavaScript

12. Exemple

13. Insertion du JavaScript

14. Projet

Aligner du texte avec `text-align`

Modifier les couleurs avec `color` et `background-color`

Tracer une bordure avec `border` et `border-radius`

Créer des espacements avec `margin` et `padding`

Ajouter une ombre avec `box-shadow`