Apprendre la programmation HTML et CSS #3 – Balises de base HTML

Dans cette troisième partie de cette formation pour apprendre à créer votre premier site web en HTML et en CSS nous allons commencer à voir les premières balises qui composent notre contenu HTML.

Ces balises sont les balises qui vont ajouter le contenu directement à notre page web.

Ici nous allons parler de paragraphes, de listes à puce, d’images et de titre principalement.

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Les paragraphes

Les paragraphes sont ce qui compose plus de 90% des sites web. Ce que vous lisez en ce moment, c’est un paragraphe.

Les paragraphes sont du contenu, des lettres, des chiffres, des caractères que nous voulons faire apparaître sous forme brut à l’utilisateur pour qu’il puisse le lire.

La balise paragraphe se compose ainsi:

<p> Ceci est le text dans mon paragraphe </p>

Tout ce qui se trouve entre nos balises <p> vont se retrouver dans notre paragraphe, donc vous comprenez bien que même si vous ajoutez d’autres balises de contenu dans ce paragraphe (par exemple des images), ils feront partie de paragraphe aussi, même si c’est déconseillé.

Les titres

Les titres aussi composent beaucoup de sites web. Les titres, ils ne permettent pas seulement de grossir le texte (et surtout ne l’utilisez pas pour grossir du texte, c’est le rôle du CSS que nous verront plus tard), les titres ils permettent de séparer notre texte en section selon notre titre.

Car oui, en HTML, il y a balise <title>, mais ce n’est pas cela qui fais les titres, car la balise title permets d’ajouter un titre à la page au grand complet.

En fait, il existe 6 types de titre.

Et ils vont tous en ordre d’importance, le 1 est le plus important et il doit être utilisé seulement une fois par page. Le 2 permets de donner les grandes lignes (comme dans cette page, les parties). Le 3 et plus sont surtout des sous-titres et des titres avec moins d’importance, mais quand même pour dire que c’est plus important qu’un paragraphe.

Pour écrire les titres, nous nous y prenons comme suis:

<h1>Titre principal</h1> <-- Titre 1 -->
<h2>Titre de contenu</h2> <-- Titre 2 -->
<h3>Sous-titre de contenu</h3> <-- Titre 3 -->
<h4>Sous-titre moins important</h4> <-- Titre 4 -->
<h5>Sous-titre encore moins important</h5> <-- Titre 5 -->
<h6>Sous-titre vraiment peu important</h6> <-- Titre 6 -->

Les images

Les balises image sont un contenu super important pour illustrer votre site, il ne faut pas le négliger.

Nous allons commencer à parler brièvement comment mettre votre première image, mais dans la partie #4 de ce tutoriel nous allons en parler plus en profondeur.

Voici la balise d’une image, je vais le décortiquer avec vous par la suite.

<img alt="Logo d'informerick" src"logo.png" /> 

Et voici ce que veulent dire ces attributs:

L’attribut alt= » » est simplement un texte alternatif pour décrire votre image. Il ne sera pas vu par les utilisateur mais est très IMPORTANT pour les moteurs de recherche qui eux peuvent le voir, je vous en parlerai plus tard.

L’attribut src= » » est la source de l’image avec son extension. Dans ce cas de figure, mon fichier HTML était dans le même dossier que mon image, mais si ce n’aurais pas été le cas, il aurait fallut spécifier le chemin complet pour s’y rendre comme avec l’explorateur de fichiers Windows.

Listes à puce et à numéros

Ce qui est super avec les listes en HTML, c’est que c’est super simple, nous n’avez pas besoin de numéroter, ça se fait tout seul.

La liste est défini seulement par tout ce qui se retrouve dans sa balise et il faut simplement une lettre pour passer d’une liste à numéro à une liste à puces. Je m’explique.

Une liste à numéros:

<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>

Et une liste à puces:

<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>

Comme vous le voyez, c’est super simple, toutes les lignes ce qui se trouve entre <ol> (Liste à numéro) ou <ul> (Liste à puces) ont simplement une balise <li> pour les définir et vous avez votre liste. Vous pouvez ajouter autant de balise <li> que vous le souhaitez.

FAQ

Cet article se trouve dans la catégorie: Programmation