1. Structure de base

Une page HTML commence toujours par cette structure :


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
    <link rel="stylesheet" href="le nom du fichier css"> 
</head>
<body>
    du code a l'interieur
</body>
</html><

Explication :
- <!DOCTYPE html> : Déclare que c’est du HTML5.
- <html> : Racine du document.
- <head> : Métadonnées, titre, CSS, scripts.
- <body> : Contenu visible de la page..qui contient tout le code html
-<link>>code : pour lie le html etle css.

2. Titres et paragraphes

Les balises de texte servent à structurer l’information :

Balises de titres

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>
            <body>
                <h1>Titre principal</h1>
                <h2>Sous-titre</h2>
                <h3>Sous-sous-titre</h3>
                ...
                <h6>Titre niveau 6</h6>
            </body>
            </html>

Titre principal

Sous-titre

Sous-sous-titre

...

Titre niveau 6

Plus le chiffre est grand, plus le titre est petit.

Paragraphes

        <p>Ceci est un paragraphe.</p>
        <p>Un autre paragraphe ici.</p>

Ceci est un paragraphe.

Un autre paragraphe ici.

Le texte dans <p> crée un paragraphe séparé.

--A Note que 1: les balises <h1>, <h2>, <h3>, ... <h6> sont des balises de titre, le chiffre est le niveau du titre.
--A note que 2 : le balise <p> est une balise de paragraphe.
--Importantces balises sont de types block, elles prennent toute la largeur disponible.

Autres balises de texte

            <strong>Texte important</strong>
            <em>Texte en italique</em>
            <mark>Texte surligné</mark>
            <small>Texte petit</small>
            <br> pour aller a la ligne
            <i>Texte en italique</i>
            <b>Texte en gras</b>
            <u>Texte en souligne</u>
            <hr>Tracer une ligne</hr>
            <sub>Texte en bas ex: H₂O</sub>
            <sup>Texte en haut...ex: x²</sup>
            <pre>     </pre>

Texte important
Texte en italique
Texte surligné
Texte petit

Texte en italique
Texte en gras
Texte en souligne

Texte en souligne
_{Texte en bas}
^{Texte en haut}

Texte en pre

Utilisez <strong> pour l’importance, <em> pour l’emphase, <mark> pour surligner, et <small> pour du texte secondaire. <br> pour aller a la ligne. <i> pour italique. <b> pour gras. <u> pour souligner. <hr> pour une ligne horizontale. <sub> pour un texte en bas. <sup> pour un texte en haut. <pre> pour un texte en pre.

7. Liens

Les liens permettent de naviguer entre différentes pages ou sections d’un site web.

Lien externe

        <a href="https://www.google.com" target="_blank">Aller sur Google</a>

Aller sur Google

<a> = balise de lien. Attribut href = adresse de destination. Attribut target="_blank" = ouvre le lien dans un nouvel onglet.

Lien interne (vers une autre page du site)

        <a href="page2.html">Aller à la page 2</a>

Aller à la page 2

Un **lien interne** pointe vers une page qui fait partie du même site (exemple : page2.html). On utilise un chemin relatif ou absolu selon l’organisation des fichiers.

Lien vers une ancre (dans la même page)

        <a href="#section2">Aller à la section 2</a>
        
        <h2 id="section2">Section 2</h2>
        <p>Contenu de la section 2...</p>

Aller à la section 2

Section 2

Contenu de la section 2...

<a href="#id"> permet de sauter directement à un élément identifié par id. Exemple : <a href="#bas">Aller en bas</a> et plus loin <div id="bas">.

Autres utilisations courantes

        <a href="mailto:exemple@email.com">Envoyer un email</a>
        <a href="tel:+123456789">Appeler ce numéro</a>

Envoyer un email
Appeler ce numéro

- mailto: ouvre le logiciel de messagerie avec un email pré-rempli. - tel: permet de lancer un appel téléphonique (pratique sur mobile).

Notes importantes

--Note 1 : <a> = balise de lien hypertexte.
--Note 2 : href est obligatoire pour indiquer la cible.
--Note 3 : Un lien peut être **externe** (vers un autre site), **interne** (dans le même site) ou **ancre** (dans la même page).
--Important : Les liens sont de type inline, ils s’affichent dans le flux du texte.

3. Listes

Les listes servent à organiser du contenu sous forme d’éléments successifs.

Liste non ordonnée

        <ul>
            <li>Premier élément</li>
            <li>Deuxième élément</li>
            <li>Troisième élément</li>
        </ul>

Premier élément
Deuxième élément
Troisième élément

La balise <ul> crée une liste à puces. Les éléments de liste sont définis par <li>.

Liste ordonnée

        <ol>
            <li>Étape 1</li>
            <li>Étape 2</li>
            <li>Étape 3</li>
        </ol>

Étape 1
Étape 2
Étape 3

La balise <ol> crée une liste numérotée. Chaque élément est aussi défini par <li>.

Liste de définition

        <dl>
            <dt>HTML</dt>
            <dd>Langage de balisage utilisé pour structurer une page Web.</dd>
        
            <dt>CSS</dt>
            <dd>Langage servant à mettre en forme le contenu d'une page.</dd>
        </dl>

HTML: Langage de balisage utilisé pour structurer une page Web.
CSS: Langage servant à mettre en forme le contenu d'une page.

La balise <dl> définit une liste de définitions. <dt> sert au terme à définir. <dd> sert à la description du terme.

Notes importantes

--Note 1 : <ul> = unordered list (liste à puces).
--Note 2 : <ol> = ordered list (liste numérotée).
--Note 3 : <dl> = definition list (liste de définitions).
--Important : Les balises <ul>, <ol> et <dl> sont de type block, elles occupent toute la largeur disponible.

4. Tableaux

Les tableaux permettent d’organiser des données en lignes et colonnes.

Tableau simple

        <table border="1">
            <tr>
                <th>Nom</th>
                <th>Âge</th>
                <th>Ville</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>25</td>
                <td>Paris</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>30</td>
                <td>Lyon</td>
            </tr>
        </table>

Nom	Âge	Ville
Alice	25	Paris
Bob	30	Lyon

<table> crée un tableau. <tr> = ligne (table row). <th> = cellule d’en-tête (table header). <td> = cellule normale (table data).

Avec en-tête, corps et pied de tableau

        <table border="1">
            <thead>
                <tr>
                    <th>Produit</th>
                    <th>Prix</th>
                    <th>Quantité</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Livre</td>
                    <td>15€</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Stylo</td>
                    <td>2€</td>
                    <td>5</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>19€</td>
                </tr>
            </tfoot>
        </table>

Produit	Prix	Quantité
Livre	15€	2
Stylo	2€	5
Total		19€

<thead> = en-tête du tableau. <tbody> = corps du tableau. <tfoot> = pied du tableau (souvent pour un résumé ou total). colspan permet à une cellule de s’étendre sur plusieurs colonnes.

Notes importantes

--Note 1 : Utiliser <th> pour les en-têtes (texte en gras et centré par défaut).
--Note 2 : Par défaut, un tableau n’a pas de bordures. On ajoute border="1" (ou mieux en CSS).
--Note 3 : Les balises <table>, <tr>, <th>, <td> sont de type block mais s’affichent en grille.

5. Formulaires

Les formulaires permettent de recueillir des données saisies par l’utilisateur.

Formulaire simple

        <form action="/traitement" method="post">
            <label for="nom">Nom :</label>
            <input type="text" id="nom" name="nom"><br><br>
        
            <label for="email">Email :</label>
            <input type="email" id="email" name="email"><br><br>
        
            <input type="submit" value="Envoyer">
        </form>

<form> définit un formulaire. action = où envoyer les données. method = méthode HTTP (GET ou POST). <label> associe un texte à un champ. <input> crée un champ de saisie.

Différents types de champs

        <form>
            Texte : <input type="text"><br>
            Mot de passe : <input type="password"><br>
            Email : <input type="email"><br>
            Nombre : <input type="number"><br>
            Date : <input type="date"><br>
            Couleur : <input type="color"><br>
            Fichier : <input type="file"><br>
        </form>

Les formulaires supportent plusieurs types de champs grâce à type="...". Exemple : text, password, email, number, date, color, file, etc.

Boutons radio et cases à cocher

        <form>
            Sexe : 
            <input type="radio" name="sexe" value="Homme"> Homme
            <input type="radio" name="sexe" value="Femme"> Femme <br><br>
        
            Centres d’intérêt : 
            <input type="checkbox" name="sport"> Sport
            <input type="checkbox" name="musique"> Musique
            <input type="checkbox" name="lecture"> Lecture
        </form>

<input type="radio"> = choix unique (même name). <input type="checkbox"> = choix multiple indépendant.

Zone de texte et menu déroulant

        <form>
            Commentaire : <br>
            <textarea rows="4" cols="30"></textarea><br><br>
        
            Choix d’un pays : 
            <select>
                <option>France</option>
                <option>Canada</option>
                <option>Haïti</option>
            </select>
        </form>

<textarea> = zone de texte multi-lignes. <select> = liste déroulante. <option> = chaque choix du menu.

Notes importantes

--Note 1 : Les formulaires s’utilisent toujours avec une balise <form>.
--Note 2 : Toujours utiliser <label for="id"> pour l’accessibilité.
--Note 3 : Les attributs required, placeholder, value améliorent l’expérience utilisateur.
--Important : Pour que les données soient envoyées, il faut un bouton <input type="submit"> ou <button type="submit">.

6. Médias (images, audio et vidéo)

Les balises médias permettent d’insérer des contenus visuels et sonores dans une page HTML.

Image

        <img src="https://cdn.pixabay.com/photo/2023/12/04/17/16/woman-8429860_1280.jpg" alt="Description de l'image" width="300" height="200">

<img> insère une image. Attributs importants : - src = chemin de l’image. - alt = description (accessibilité et affichée si l’image ne charge pas). - width et height = dimensions.

Audio

        <audio controls>
            <source src="musique.mp3" type="audio/mpeg">
            <source src="musique.ogg" type="audio/ogg">
            Votre navigateur ne supporte pas l'audio.
        </audio>

<audio> intègre un fichier audio. Attribut controls affiche les boutons lecture/pause/volume. On peut fournir plusieurs formats (.mp3, .ogg) pour compatibilité.

Vidéo

        <video controls width="400" height="250">
            <source src="video.mp4" type="video/mp4">
            <source src="video.webm" type="video/webm">
            Votre navigateur ne supporte pas la vidéo.
        </video>

pour une video qui est sur youtube met la balise <iframe>

            <iframe width="377" height="277" src="https://www.youtube.com/embed/X_jX3D9lCCM?list=RDX_jX3D9lCCM" title="FATIMA ALTIERI- HELLO- ( OFFICIAL MUSIC VIDEO)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>

<video> intègre un fichier vidéo. Attributs principaux : - controls pour les boutons de lecture. - autoplay pour lecture automatique. - loop pour lecture en boucle. - muted pour commencer en silencieux. - poster pour afficher une image d’attente.

Notes importantes

--Note 1 : Toujours fournir un alt pour les images (accessibilité).
--Note 2 : Les balises <audio> et <video> doivent avoir l’attribut controls pour permettre la lecture.
--Note 3 : Il est recommandé de fournir plusieurs formats (mp3/ogg pour audio, mp4/webm pour vidéo) afin d’assurer une compatibilité entre navigateurs.
--Important : Ces balises sont de type inline-block, elles prennent seulement la place nécessaire.

🚀 Ressources

Voici quelques ressources utiles pour approfondir votre compréhension du html:

Quelque pdf utiles

html_css.pdf
cours-langage-css.pdf

click here to download

html_css.pdf
cours-langage-css.pdf