Maxime F.

Informations sur les Langages Informatiques

Introduction à HTML

HTML (HyperText Markup Language) est le langage standard pour la création de pages web. Il permet de structurer le contenu d'une page en utilisant des balises et des éléments.

Structure de base d'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>Ma Page Web</title>
</head>
<body>

    <!-- Contenu de la page -->

</body>
</html>

Une page HTML de base commence par la déclaration de type (DOCTYPE) et inclut une structure de base avec des balises comme <html>, <head>, et <body>.

Les Balises HTML

Voici quelques balises HTML couramment utilisées :

Exemple de page HTML simple


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Page HTML</title>
</head>
<body>

    <h1>Bienvenue sur ma page web !</h1>
    <p>Ceci est un paragraphe.</p>
    <a href="https://www.example.com">Ceci est un lien vers Example.com</a>

</body>
</html>

Cet exemple montre une page HTML simple avec un titre, un paragraphe, et un lien.

Manipulation de Texte en HTML

HTML offre plusieurs moyens pour styliser et formater le texte dans une page web. Voici quelques exemples :

Tailles et Polices d'Écriture

Vous pouvez spécifier la taille du texte en utilisant la balise <style> avec l'attribut font-size et en choisissant la police d'écriture avec font-family.


<p style="font-size: 20px; font-family: 'Arial', sans-serif;">
    Ceci est un paragraphe avec une taille de texte de 20 pixels et la police Arial.
</p>

Ceci est un paragraphe avec une taille de texte de 20 pixels et la police Arial.

Texte en Gras, Italique, Souligné et Barré

Utilisez les balises <strong> pour le texte en gras, <em> pour le texte en italique, <u> pour le souligné, et <s> pour le texte barré.


<p>
    Ceci est un <strong>texte en gras</strong>,
    un <em>texte en italique</em>,
    un <u>texte souligné</u>,
    et un <s>texte barré</s>.
</p>

Ceci est un texte en gras, un texte en italique, un texte souligné, et un texte barré.

Liens

Les liens sont créés avec la balise <a>. Vous pouvez également spécifier des styles pour les liens.


<p>
    Ceci est un <a href="https://www.example.com" style="color: #4CAF50; text-decoration: none;">lien stylisé</a>.
</p>

Ceci est un lien stylisé.

Vous pouvez combiner les différentes balises entre elles afin créer votre page web entièrement personnalisée.

Sauts de Ligne et Traits Horizontaux en HTML

Utilisez les balises <br> pour créer des sauts de ligne et <hr> pour insérer des traits horizontaux dans votre contenu.

Sauts de Ligne

Utilisez la balise <br> pour créer un saut de ligne à l'intérieur d'un paragraphe.


<p>
    Ceci est une ligne de texte.<br>
    Ceci est une nouvelle ligne de texte.
</p>

Ceci est une ligne de texte.
Ceci est une nouvelle ligne de texte.

Trait Horizontal

Utilisez la balise <hr> pour insérer un trait horizontal qui sépare visuellement le contenu.


<p>
    Ceci est une ligne de texte.
</p>
<hr>
<p>
    Ceci est une autre ligne de texte après le trait horizontal.
</p>

Ceci est une ligne de texte.

Ceci est une autre ligne de texte après le trait horizontal.

Travailler avec les Images en HTML

HTML permet l'incorporation d'images dans une page web en utilisant la balise <img>.

Image Simple


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

La balise <img> contient deux attributs principaux :

Image avec Taille Personnalisée

Vous pouvez spécifier la largeur et la hauteur de l'image en utilisant les attributs width et height.


<img src="chemin/vers/votre/image.jpg" alt="Description de l'image" width="300" height="200">
Description de l'image

Il est souvent préférable de spécifier la taille en pourcentage ou en utilisant les styles CSS pour une mise en page plus flexible.

Image dans un Cadre

Vous pouvez également placer l'image dans un cadre en utilisant la balise <figure> avec <figcaption> pour ajouter une légende.


<figure>
    <img src="chemin/vers/votre/image.jpg" alt="Description de l'image">
    <figcaption>Légende de l'image</figcaption>
</figure>
Description de l'image
Légende de l'image

Listes en HTML

Les listes sont des éléments fondamentaux pour organiser et structurer le contenu d'une page web.

Listes Non Ordonnées

Les listes non ordonnées sont utilisées pour représenter des éléments sans ordre particulier.


<ul>
    <li>Élément 1</li><br>
    <li>Élément 2</li><br>
    <li>Élément 3</li><br>
</ul>
  • Élément 1

  • Élément 2

  • Élément 3

Listes Ordonnées

Les listes ordonnées sont utilisées pour représenter des éléments avec un ordre spécifique.


<ol>
    <li>Premier</li><br>
    <li>Deuxième</li><br>
    <li>Troisième</li><br>
</ol>
  1. Premier

  2. Deuxième

  3. Troisième

Éléments Sémantiques en HTML

Les éléments sémantiques en HTML sont utilisés pour donner une signification et une structure au contenu d'une page web. Ils améliorent l'accessibilité et l'indexation par les moteurs de recherche.

Exemples d'Éléments Sémantiques

Voici quelques éléments sémantiques couramment utilisés :


<header>
    <h1>Titre de l'en-tête</h1>
</header>

<nav>
    <ul>
        <li><a href="#accueil">Accueil</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<main>
    <article>
        <h2>Titre de l'article</h2>
        <p>Contenu de l'article.</p>
    </article>

    <aside>
        <h3>Barre latérale</h3>
        <p>Contenu de la barre latérale.</p>
    </aside>
</main>

<footer>
    <p>Copyright © 2023 Votre Nom</p>
</footer>

Titre de l'en-tête

Titre de l'article

Contenu de l'article.

Copyright © 2023 Votre Nom

Ces éléments aident à structurer votre page de manière significative, ce qui peut améliorer l'expérience utilisateur et l'interprétation par les navigateurs et les moteurs de recherche.

Formulaires Interactifs en HTML

Les formulaires permettent aux utilisateurs d'interagir avec votre site en saisissant des informations. Ils sont créés à l'aide des balises telles que <form>, <input>, <select>, et <button>.

Exemple de Formulaire HTML


<form action="/submit" method="post">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" required>
    
    <label>Genre :</label>
    <select id="genre" name="genre">
        <option value="homme">Homme</option>
        <option value="femme">Femme</option>
        <option value="autre">Autre</option>
    </select>
    
    <label>Intérêts :</label>
    <select id="interets" name="interets">
        <option value="html" selected>HTML</option>
        <option value="css">CSS</option>
    </select>
    
    <label for="pays">Pays :</label>
    <select id="pays" name="pays">
        <option value="fr">France</option>
        <option value="us">États-Unis</option>
        <option value="es">Espagne</option>
        <option value="de">Allemagne</option>
        <option value="it">Italie</option>
        <option value="jp">Japon</option>
        <option value="br">Brésil</option>
        <option value="cn">Chine</option>
        <option value="in">Inde</option>
        <option value="ru">Russie</option>
        <option value="ca">Canada</option>
        <option value="au">Australie</option>
        <option value="za">Afrique du Sud</option>
        <option value="mx">Mexique</option>
        <option value="gb">Royaume-Uni</option>
        <option value="other">Autre</option>
    </select>
    
    <button type="submit">Envoyer</button>
</form>

Bien sur, ce code inclus aussi une partie de langage CSS à part qui est entièrement personnalisable.

Éléments en Ligne et Éléments de Bloc en HTML

Les éléments en ligne et de bloc jouent un rôle crucial dans la mise en page et la structuration du contenu.

Élément en Ligne

Les éléments en ligne sont utilisés à l'intérieur des paragraphes ou d'autres conteneurs de texte.


<p>Ceci est un paragraphe avec <span>un élément en ligne</span> inclus.</p>

Ceci est un paragraphe avec un élément en ligne inclus.

Élément de Bloc

Les éléments de bloc sont utilisés pour structurer le contenu de manière plus importante, souvent pour diviser la page en sections.


<div>
    <p>Ceci est un paragraphe à l'intérieur d'un élément de bloc.</p>
</div>

Ceci est un paragraphe à l'intérieur d'un élément de bloc.

Éléments div et span en HTML

Les éléments div et span sont des conteneurs génériques utilisés pour organiser et styler le contenu d'une page.

Élément div

L'élément div est un conteneur de bloc qui est souvent utilisé pour grouper d'autres éléments et appliquer des styles.


<div>
    <p>Ceci est un contenu à l'intérieur d'un élément div.</p>
</div>

Ceci est un contenu à l'intérieur d'un élément div.

Élément span

L'élément span est un conteneur en ligne généralement utilisé pour appliquer des styles à une partie spécifique du texte.


<p>Ceci est un texte avec un <span>élément span</span> inclus.</p>

Codes Avancés

Barre de Navigation en HTML

Utilisez une liste non ordonnée pour créer une barre de navigation simple.


<nav>
    <ul>
        <li><a href="#accueil">Accueil</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#produits">Produits</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

Balises <iframe> en HTML

Les balises <iframe> permettent d'incorporer d'autres documents HTML ou des ressources externes dans une page web. Elles sont couramment utilisées pour intégrer des vidéos, des cartes, ou d'autres contenus externes.

Exemple d'utilisation de <iframe>

Voici un exemple d'utilisation de la balise <iframe> pour incorporer une vidéo YouTube :


<iframe
    width="300"
    height="200"
    frameborder="0"
    style="border:0; max-width: 100%;"
    allowfullscreen
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
></iframe>

Cet exemple utilise la balise <iframe> pour incorporer une vidéo YouTube avec des attributs tels que la largeur, la hauteur, et la source (src). La propriété max-width: 100% assure que le cadre ne dépasse pas la largeur de son conteneur.

Création de Tableaux en HTML

Les tableaux en HTML sont utilisés pour organiser les données de manière tabulaire. Ils sont créés à l'aide des balises telles que <table>, <tr> (ligne), <th> (en-tête de colonne), et <td> (cellule de données).

Exemple de Tableau HTML


<table border="1">
    <tr>
        <th>En-tête 1</th>
        <th>En-tête 2</th>
        <th>En-tête 3</th>
    </tr>
    <tr>
        <td>Donnée 1</td>
        <td>Donnée 2</td>
        <td>Donnée 3</td>
    </tr>
    <tr>
        <td>Donnée 4</td>
        <td>Donnée 5</td>
        <td>Donnée 6</td>
    </tr>
</table>
En-tête 1 En-tête 2 En-tête 3
Donnée 1 Donnée 2 Donnée 3
Donnée 4 Donnée 5 Donnée 6

Cet exemple crée un tableau simple avec trois colonnes et trois lignes. La balise <th> est utilisée pour les en-têtes de colonnes, tandis que la balise <td> est utilisée pour les cellules de données.

Création d'un Menu Déroulant en HTML

Les menus déroulants, aussi appelés listes déroulantes, permettent aux utilisateurs de sélectionner une option parmi plusieurs. Ils sont créés à l'aide des balises <select> et <option>.

Exemple de Menu Déroulant HTML


<select id="langue" name="langue">
    <option value="fr">Français</option>
    <option value="en">Anglais</option>
    <option value="es">Espagnol</option>
    <option value="de">Allemand</option>
</select>

Cet exemple crée un menu déroulant avec quatre options représentant différentes langues. La balise <select> définit le menu déroulant, et chaque balise <option> représente une option dans le menu.

Une vidéo intéressante :