Le HTML (HyperText Markup Language) est le langage qui permet de rajouter du contenu à votre page (texte, image, vidéo,...), vous ne devez pas vous occuper de la mise en forme en HTML.
En HTML, vous utilisez des balises pour décrire votre contenu, il y en a un grand nombre et allons en étudier un petit nombre.
Utilisez cette page type pour commencer le travail.
| Balise | Description |
|---|---|
| <meta /> | On définit le type de codage des caractères (ne pas vous en occuper et prendre toujours |
| <title></title> | On définit le titre de l'onglet |
| <style></style> | Endroit pour décrire le style (en CSS voir chapitre suivant) |
| <script></script> | Pour définir du code de programmation. |
| <link /> | Balise orpheline, on donne le lien vers un fichier qui contient le style en CSS. |
Vous devez placer le contenu entre les balises <body> et </body>.
Les titres sont à entourer de balises h suivit d'un numéro, attention le numéro n'est l'ordre des titres mais définit une hiérarchie. Si vous utilisez h3 en sous titre de h1 alors il y une erreur de conception.
| Balise | Description |
|---|---|
| <h1> Titre principal </h1> | Titre principal. |
| <h2> Titre secondaire </h2> | Sous titre de h1. |
| <h3> Sous titre secondaire </h3> | Sous titre de h2. |
Le texte est généralement dans une balise p, n'essayez pas de mettre en page en ajoutant des lignes libres par exemple cela ne sera tout simplement pas pris en compte !
| Balise | Description |
|---|---|
| <p> Paragraphe </p> | Paragraphe, chaque paragraphe retourne à la ligne |
| <div> contenu </div> | Balise universelle, qui place du contenu dans un bloc en ligne. A faire si vous voulez le même comportement qu'un paragraphe mais que vous ne mettez pas un paragraphe. |
| <span> Contenu </span> | Balise universelle, pour placer du contenu sans vouloir un retour à la ligne. |
| <strong>Partie importante </strong> | Partie que vous voulez mettre en évidence. |
| </br> | Balise de passage à la ligne |
| <a href = "adresse">message</> | Balise de lien |
| <img src = "adresse" alt = "message à écrire si problème"> | Balise pour insérer une image. |
Attention si vous avez l'image sur votre disque dur alors vous devez l'envoyer.
| <ul>on place les li </ul> | Balise pour mettre des puces. |
| <li>nouvelle option </li> | chaque puce dans un li. |
| <ol>on place les li </ol> | Balise pour mettre des numeros. |
| <li>nouvelle option </li> | chaque numero dans un li. |