Initiation HTML

Nous allons découvrir ensemble les bases du langage HTML. Le langage HTML, c’est un peu comme le squelette d’un site web.

Pour cela, je vous demande de créer, dans un seul et même dossier nommé initiation html, les différents fichiers suivants : lecon1.html, lecon2.html, etc. On évite d’utiliser des caractères spéciaux [ } ( » ‘ @ # ° ; / : + = $ * ` £ € ){ ] dans le nom d’un fichier afin d’éviter des problèmes de formatage.

Pourquoi créer plusieurs fichiers ?

Pour pouvoir y retourner par la suite, et reprendre le code déjà tapé.

On tape le code où ?

On va utiliser la version en ligne de visual studio, qui s’appelle vscode.dev. Il s’agit d’une version en ligne donc pense à enregistrer régulièrement ton travail car si ça coupe, plus rien !!!

Je suis obligé de faire des espaces ?

Non, essayes, trompe-toi, sans échec on avance pas!

Mais c’est mieux si on à la meme mise en forme mais pas forcement le meme contenu! Le but c’est de réutiliser le code par rapport à tes propres besoin!

Leçon1: Créer une page HTML de base

<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
    <!-- Votre contenu ici -->
    Hello World
    
</body>
</html>

Le titre de ma page Hello World

Leçon2: Ajouter des titres et des paragraphes dans une page HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leçon 2 : Ajouter des titres et des paragraphes</title>
</head>
<body>
    <h1>Titre de niveau 1 (h1)</h1>
    <h2>Titre de niveau 2 (h2)</h2>
    <h3>Titre de niveau 3 (h3)</h3>
    <h4>Titre de niveau 4 (h4)</h4>
    <h5>Titre de niveau 5 (h5)</h5>
    <h6>Titre de niveau 6 (h6)</h6>
    <p>Voici un paragraphe de texte.</p>
    <p>Un autre paragraphe pour illustrer.</p>
    <br>
    <p>Un paragraphe avec un saut de ligne.</p>
</body>
</html>

Leçon3: Créer des listes

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leçon 3 : Créer des listes</title>
</head>
<body>
    <h1>Listes HTML</h1>
    
    <h2>Liste à puces (ul)</h2>
    <ul>
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>

    <h2>Liste numérotée (ol)</h2>
    <ol>
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ol>
</body>
</html>

Leçon4: Insérer des images

Vous pouvez copier le lien de l’image :

https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&w=800

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leçon 4 : Insérer des images</title>
</head>
<body>
    <h1>Images en HTML</h1>
    
    <h2>Image avec la balise &lt;img&gt;</h2>
    <img height="200" src="https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Description de l'image">

    <h2>Image avec lien</h2>
    <a href="https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&w=800">
    <img height="200" src="https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Description de l'image">
    </a>
</body>
</html>

Leçon5: créer différents types de liens

Dans cette leçon, tu peux juste modifier les images, mais pas le reste!

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leçon 5 : Créer des liens</title>
</head>
<body>

  <h1>Liens en HTML</h1>

  <h2>Lien simple</h2>
  <a href="https://www.example.com">Lien vers le site Example</a>

  <h2>Lien interne</h2>
  <a href="#section2">Aller à la section 2</a>

  <h2>Lien avec titre</h2>
  <p><a href="page.html" title="Titre du lien">Un lien avec un titre, vers une autre page </a></p>
  <p>Laisse ton curseur de souris quelques secondes sur le lien ci-dessus et tu verras le titre apparaitre!</p>
  <p><strong>Quand tu cliques sur le lien </strong>, une page vide ou un message d'erreur apparait. C'est normal, ta page <strong>"page.html"</strong> n'existe pas encore mais elle apparait dans l'url.</p>
  <p> Une page c'est quoi ? C'est juste un autre fichier, par exemple <i>lecon1.html</i> et <i>leçon2.html</i>, se sont deux fichiers, deux pages d'un site internet. 

  <h2 id="section2">Utilité des liens</h2>
  <ul>
    <li>Relier des pages</li>
    <li>Aller vers l’extérieur</li>
    <li>Créer des ancres</li>
    <li>Donner des infos avec <code>title</code></li>
  </ul>

  <h2>Nouvel onglet</h2>
  <a href="https://www.wikipedia.org" target="_blank">Lien Wikipédia</a>

  <h2>Email</h2>
  <a href="mailto:exemple@email.com">Envoyer un mail</a>

  <h2>Téléchargement</h2>
  <a href="document.pdf" download>Télécharger PDF</a>

  <h2>Image cliquable</h2>
  <u>Vue dans la leçon précédente</u>,<i> la  leçon 4.</i>

  <h2>Menu interne</h2>
  <ul>
    <li><a href="#partie1">Partie 1</a></li>
    <li><a href="#partie2">Partie 2</a></li>
    <li><a href="#partie3">Partie 3</a></li>
  </ul>

  <h3 id="partie1">Partie 1</h3>
  <img height="600px" src="https://images.pexels.com/photos/33176491/pexels-photo-33176491.jpeg">

  <h3 id="partie2">Partie 2</h3>
  <img height="600px" src="https://images.pexels.com/photos/33649783/pexels-photo-33649783.jpeg">

  <h3 id="partie3">Partie 3</h3>
  <img height="600px" src="https://images.pexels.com/photos/33275329/pexels-photo-33275329.jpeg">

  <h2>Retour en haut</h2>
  <a href="#top">Haut de page</a>

</body>
</html>

Leçon6 : Structurer la page avec des divisions ( <div> Mon bloc </div> )

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leçon 6 : Structurer la page avec des divisions</title>
    <style>
        /* Exemple de style CSS pour les div */
        .section {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>Structurer la page avec des divisions</h1>
    
    <div class="section">
        <h2>Section 1</h2>
        <p>Contenu de la section 1...</p>
    </div>

    <div class="section">
        <h2>Section 2</h2>
        <p>Contenu de la section 2...</p>
    </div>

    <div class="section">
        <h2>Section 3</h2>
        <p>Contenu de la section 3...</p>
    </div>
</body>
</html>

Leçon7: Utiliser des formulaires pour traiter des données

Utilisation du HTML pour faire le formulaire, utilisation du php pour traiter les données du formulaire.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leçon 7 : Utiliser des formulaires</title>
</head>
<body>
    <h1>Formulaires en HTML</h1>
    
    <form action="traitement-formulaire.php" 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>

        <label for="message">Message :</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

        <input type="submit" value="Envoyer">
    </form>
</body>
</html>

Leçon8 : Introduction au CSS

Le CSS permet de faire de la mise en forme, d’appliquer du style comme par exemple un titre en bleu.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leçon 8 : Introduction au CSS</title>
    <style>
        /* Règles CSS pour styliser le HTML */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: #0066cc;
        }

        p {
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>Introduction au CSS</h1>
    
    <p>CSS, ou Cascading Style Sheets, est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en HTML. Il permet de contrôler le style, la mise en page et l'apparence du contenu web.</p>
    
    <p>En utilisant des sélecteurs CSS et des règles de style, vous pouvez modifier les couleurs, les polices, les marges, les bordures, les arrière-plans et bien plus encore.</p>
</body>
</html>

Dans ce code, nous avons utilisé des règles CSS pour styliser les éléments HTML suivants :

Le corps (<body>) : défini la police de caractères, la couleur de fond et la couleur du texte.
Les titres (<h1>) : défini la couleur du texte.
Les paragraphes (<p>) : défini la hauteur de ligne pour un meilleur espacement.

Leçon9: Mettre deux bloc cote à cote.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leçon 9 : Layout de page avec CSS</title>
    <style>
        /* CSS pour le layout de page */
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .left-column, .right-column {
            flex: 1;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Layout de page avec CSS</h1>
    
    <div class="container">
        <div class="left-column">
            <h2>Colonne de gauche</h2>
            <p>Contenu de la colonne de gauche...</p>
        </div>
        <div class="right-column">
            <h2>Colonne de droite</h2>
            <p>Contenu de la colonne de droite...</p>
        </div>
    </div>
</body>
</html>

Ce code utilise Flexbox pour créer un layout de page avec deux colonnes. La classe .container définit un conteneur flex avec flex-direction: row pour organiser les éléments horizontalement. Les classes .left-column et .right-column représentent les deux colonnes, chacune avec flex: 1 pour occuper le même espace disponible.