Apprendre le HTML (partie 2)

Découvrez les balises les plus importantes en HTML

Apprendre le HTML (partie 2)

Découvrez les balises les plus importantes en HTML

Crée le 30 mars 2021

Partie 1 : https://g-ca.fr/tutoriels/tutoriel/apprendre-le-html-partie-1 Partie 2 : https://g-ca.fr/tutoriels/tutoriel/apprendre-le-html-partie-2


Les balises de paragraphes

Le types des balises paragraphes sont les balises p ce qui nous donne ceci :

<p>Ceci est un super paragraphe pour mon super site que je suis en train de réaliser en html, que j'ai appris grâce au tuto d'un mec ultra cool : par la barbe de Merlin</p>

Et on met cette balise dans dans les balises body :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Tuto GCA</title>
  </head>
  <body>
    <p>Ceci est un super paragraphe pour mon super site que je suis en train de réaliser en html, que j'ai appris grâce au tuto d'un mec ultra cool : par la barbe de Merlin</p>
  </body>
</html>

Le résultat

Ceci est un super paragraphe pour mon super site que je suis en train de réaliser en html, que j'ai appris grâce au tuto d'un mec ultra cool : par la barbe de Merlin

Le retour à la ligne

Pour faire un retour à la ligne il suffit d'ajouter la balise </br> à l'endroit où l'on veut faire le retour à la ligne.

<p>Ceci est un super paragraphe pour mon super site que je suis en train de réaliser en html.<br>J'ai appris le html grâce au tuto d'un mec ultra cool : par la barbe de Merlin</p>

N'utilisez pas les balises <br> pour espacer votre contenu ; préférez utiliser du CSS (avec des margins).

Le résultat

Ceci est un super paragraphe pour mon super site que je suis en train de réaliser en html. J'ai appris le html grâce au tuto d'un mec ultra cool : par la barbe de Merlin

Les balises h

Les balises h sont les balises qui servent à mettre des titres. elle se présentent sous la forme <h1>le titre</h1> avec après le h l'incice d'importance du titre (allant de 1 à 6). Autrement dit :

<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>

Le résultat

Alt text

NB: il ne faut mettre qu'un seul h1 par page (nous réaborderons ce sujet dans la partie qui concernera le SEO)

Les listes

Les types de listes

Pour les listes on utilise les balises ol pour les listes avec des points :

<ul>
  <li>élément 1</li>
  <li>élément 2</li>
</ul>

Alt text

Et on utilises les balises ol pour les listes numérotées :

<ol>
  <li>élément 1</li>
  <li>élément 2</li>
</ol>

Alt text

Les éléments de la liste :

Pour ajouter des éléments on les met entre des balises <li> ; on les ajoute de la manière suivante :

<ul>
  <li>le contenu à afficher en premier</li>
  <li>le contenu à afficher en deuxième</li>
  <li>le contenu à afficher en dernier</li>
</ul>

Le résultat :

Alt text

Les sections

Le nom de la balise Son utilisation
html contient le code de la page
head partie non visible par l'utilisateur et nécessaire au bon fonctionnement du site
body contient le contenu de la page
nav contient une barre de navigation
form contient un formulaire (php/js)
section sert a créer une nouvelle section
div sert à créer une boite/partie/division dans la page

Les liens

Nous allons voir comment faire des liens et donc des liens entre plusieurs pages comme ce lien (qui ici redirige vers rien): <a href="#">exemple de lien</a> Donc pour faire un lien on utilise les balises <a> avec le paramètre (ou attribut) href qui prend pour valeur le lien.

NB: Les paramètres/attributs des balises html prennent la forme nomduparamètre="paramètre 1". Quelques exemples :

<div class="rect rectone"></div>
<a href="#" title="ceci est un lien">lien</a>

Donc vous pouvez faire des liens vers <a href="https://google.com">Google</a> :

<a href="https://google.com">Google</a>

mais aussi vers des liens relatifs comme par exemple :

<a href="/dd.html">
<!--ici il redirige vers le fichier dd.html-->

Dans la prochaine partie nous verrons les classes et les id puis nous créerons notre première vraie page.

Envie de lire la suite de ce tutoriel ?

Connecte-toi dès maintenant, et accède entièrement à tous les tutoriels de GCA !

#HTML / CSS

#dev

Écrit par par la barbe de Merlin#0001

7

Sommaire