Introduction

Introduction

Introduction to HTML

uploaded on: 2 months ago
Last update on: 1 month ago

beginner
Take The Quiz

# Introduction à HTML

HTML (HyperText Markup Language) est le langage de base utilisé pour structurer le contenu des pages web. Il utilise des **balises** pour organiser et formater le contenu.

## Structure de base d'un document HTML

Un document HTML commence toujours avec une structure standard :

```html
<!DOCTYPE html>
<html>
<head>
   <title>Mon premier document HTML</title>
</head>
<body>
   <h1>Bienvenue dans HTML</h1>
   <p>Ceci est un paragraphe simple.</p>
</body>
</html>
Les balises HTML

1. <h1> à <h6> : Les titres

Les balises de titre sont utilisées pour structurer le contenu. Elles vont de <h1> (le plus important) à <h6> (le moins important).

Exemple :

html
<h1>Titre principal</h1> <h2>Sous-titre</h2> <h3>Sous-sous-titre</h3>

Rendu :

  • Titre principal (grande taille)
  • Sous-titre (taille moyenne)
  • Sous-sous-titre (plus petit)

2. <p> : Le paragraphe

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

Attributs principaux :

  • style : Permet d'ajouter un style CSS inline.
  • class : Associe une classe CSS au paragraphe.

Exemple :

html
<p style="color: blue;">Ce texte est en bleu.</p> <p class="important">Ce texte utilise une classe CSS.</p>

3. <a> : Les liens hypertextes

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

Attributs principaux :

  • href : Définit l'URL cible.
  • target : Spécifie où ouvrir le lien (_blank pour une nouvelle fenêtre).

Exemple :

html
<a href="https://example.com" target="_blank">Visitez ce site</a>

4. <img> : Les images

La balise <img> insère des images dans une page.

Attributs principaux :

  • src : Définit la source de l'image.
  • alt : Fournit une description de l'image (pour l'accessibilité).

Exemple :

html
<img src="image.jpg" alt="Description de l'image" width="300">

5. <table> : Les tableaux

La balise <table> permet de structurer des données en tableau.

Structure de base :

html
<table border="1">    <thead>        <tr>            <th>Nom</th>            <th>Âge</th>        </tr>    </thead>    <tbody>        <tr>            <td>Jean</td>            <td>30</td>        </tr>        <tr>            <td>Marie</td>            <td>25</td>        </tr>    </tbody> </table>

Rendu :

NomÂge
Jean30
Marie25

Pratique

Essayez d'ajouter ces balises à votre propre fichier HTML pour voir comment elles fonctionnent. Utilisez un éditeur de texte comme Visual Studio Code ou Sublime Text pour expérimenter.

Ressources supplémentaires

N'hésitez pas à poser vos questions en cas de besoin !

 
Ce markdown est bien structuré pour un éditeur WYSIWYG et peut être enrichi selon vos besoins spé

Comments