Article original : Learn HTML and CSS in Spanish – Course for Beginners

Salut ! Si tu parles espagnol et que tu veux apprendre le HTML et le CSS, tu es au bon endroit.

Dans cet article, tu trouveras une brève introduction aux bases du HTML et du CSS. Ensuite, tu trouveras un cours gratuit de 5 heures sur le HTML et le CSS sur notre chaîne YouTube en espagnol où tu pourras apprendre le contenu plus en profondeur avec des exemples pratiques.

Cet article utilisera l'anglais pour résumer tout ce que tu apprendras à travers ce cours. Si tu connais des amis hispanophones, tu peux partager cette version espagnole de cet article.

Commençons ! ✨

📝 HTML et CSS : Description et objectif

Voyons ce que sont le HTML et le CSS et à quoi ils servent :

  • HTML (HyperText Markup Language) est essentiel pour le développement web car nous l'utilisons pour définir la structure d'une page web, le contenu qui sera affiché sur le navigateur.
  • CSS (Cascading Style Sheets) est un langage basé sur des règles que nous utilisons pour définir et assigner des styles aux éléments de notre page web.

Le HTML fonctionne avec le CSS pour créer les pages web que nous utilisons tous les jours sur nos navigateurs. Certaines pages web utilisent également JavaScript.

💡 Astuce : Les fichiers HTML ont une extension **.html** et les fichiers CSS ont une extension **.css**.

Réfléchis à cela un instant. Le site web que tu regardes en ce moment est fait de HTML et de CSS. Génial, non ?

Maintenant, parlons un peu des Chrome Developer Tools.

📸 Chrome Developer Tools

Tu peux voir le code HTML et CSS de n'importe quelle page web sur Google Chrome simplement en faisant un clic droit sur la page et en sélectionnant "Inspecter".

Cela ouvrira les Chrome Developer Tools, où tu verras deux sections principales :

  • La section supérieure montre le code HTML de la page web. Cette partie est entourée par un rectangle orange dans l'image suivante.
  • La section inférieure montre les styles CSS qui sont appliqués à l'élément actuellement sélectionné dans la section HTML. Cette partie est entourée par un rectangle vert dans l'image suivante.

Image Chrome Developer Tools

📝 Introduction au HTML

Maintenant, commençons à plonger dans les fondamentaux du HTML. Voici un exemple de page web très simple :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>freeCodeCamp</title>
  </head>
  <body>
    <h1>freeCodeCamp</h1>
    <p>J'apprends le HTML et le CSS.</p>
  </body>
</html>

💡 Astuce : En HTML, l'indentation (l'espace que tu peux voir avant les lignes) n'est pas obligatoire car elle n'a pas d'impact sur le résultat final. Néanmoins, elle est fortement recommandée car elle nous aide à écrire des fichiers HTML faciles à lire, maintenir et comprendre. Nous utilisons généralement 2 espaces par niveau d'indentation en HTML.

Voyons les principaux composants du HTML.

Éléments HTML

Un fichier HTML est composé d'éléments HTML. Ces éléments sont les composants individuels que nous utilisons pour créer la structure de la page web.

Voici un exemple d'élément :

<h1>freeCodeCamp</h1>

💡 Astuce : Certains éléments peuvent agir comme des conteneurs pour d'autres éléments afin de nous aider à créer des structures plus complexes. Tu devrais indenter ces éléments imbriqués pour refléter la structure du site web, comme dans notre exemple précédent.

Balises HTML

Chaque élément a une balise associée. Nous pouvons créer un élément en incluant sa balise dans notre fichier HTML.

Voici des exemples des balises les plus couramment utilisées :

  • **<html>** – Tout le contenu du site web doit être contenu dans ces balises.
  • **<head>** – Cet élément contient le titre de la page web que tu peux voir dans l'onglet de ton navigateur et il contient les métadonnées de la page web.
  • **<body>** – Cet élément contient tous les éléments visibles de la page web. La structure de la page web doit être à l'intérieur de ces balises.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> – Ces éléments créent des titres dans l'ordre d'importance de 1 à 6.
  • **<p>** – Un paragraphe.
  • **<a>** – Un lien vers un autre site web, une autre page web, ou vers des sections internes de la page web actuelle.
  • **<strong>** – Cette balise nous permet de mettre en évidence un texte important. Il est affiché en texte gras.
  • **<em>** – Cette balise nous permet de mettre en évidence un texte important. Il est affiché en texte italique.
  • **<form>** – Cet élément représente un formulaire.
  • **<hr>** – Une règle horizontale qui peut être utilisée pour séparer des paragraphes ou des sections de la page web.
  • **<input>** – Un élément qui nous permet de créer les composants d'un formulaire. Il peut s'agir d'un champ de saisie de texte ou devenir un bouton radio ou une case à cocher.
  • **<footer>** – Un pied de page.

💡 Astuce : le premier élément de notre page web doit être **<!DOCTYPE html>**. Il indique au navigateur que le fichier est un fichier HTML et quelle version de HTML utiliser.

La plupart des éléments HTML ont besoin d'une balise d'ouverture et d'une balise de fermeture. Nous écrivons le contenu de l'élément entre les balises.

Dans l'exemple précédent, nous avons créé un élément de type **<h1>** :

<h1>freeCodeCamp</h1>

Cet élément a une balise d'ouverture et une balise de fermeture pour entourer son contenu.

  • La balise d'ouverture est **<h1>**.
  • La balise de fermeture est **</h1>**.

Tu peux voir cela dans le diagramme suivant :

Image

💡 Astuce : la différence entre la balise d'ouverture et la balise de fermeture est que la balise de fermeture a une barre oblique (**/**) avant le type d'élément.

Cependant, certains éléments n'ont pas besoin de balise de fermeture car ils n'agissent pas comme des conteneurs. Un exemple de ce type d'élément est l'élément **<img>** (image) :

**<img src="freeCodeCamp.jpg">**

Attributs HTML

Les éléments HTML peuvent avoir des attributs. Ces attributs nous permettent de définir des informations supplémentaires sur l'élément. Ils incluent **class**, **id**, **style**, **lang**, **src**, et **href**.

Voici un exemple d'un élément HTML avec l'attribut **class** :

<h1 class="main-title">freeCodeCamp</h1>

Comme tu peux le voir dans cet exemple :

  • Les attributs doivent être écrits dans la balise d'ouverture, avant le crochet de fermeture **>**.
  • Les attributs et leurs valeurs sont séparés par un signe égal. À gauche, nous écrivons le nom de l'attribut et à droite nous écrivons sa valeur. Dans cet exemple, la valeur est **main-title**.
  • La valeur de l'attribut doit être entourée de guillemets.

💡 Astuce : chaque type d'élément a un ensemble spécifique d'attributs que nous pouvons leur assigner et chaque attribut a un ensemble de valeurs possibles. Tu peux vérifier cela dans la documentation web MDN Web Docs.

Langue HTML

Tu peux spécifier la langue de la page web et la langue de n'importe quel élément dans la structure HTML avec l'attribut **lang** et le code de la langue :

<html lang="en">

Dans cet exemple, nous spécifions que la langue de la page web est l'anglais.

Liens HTML

En HTML, tu peux créer des liens vers d'autres pages web et des liens vers des sections internes de la page web actuelle avec l'élément **<a>** (ancre) et l'attribut **href**.

Par exemple, cet élément te mènerait au site web de freeCodeCamp en espagnol :

<a href="https://www.freecodecamp.org/espanol/">freeCodeCamp</a>
  • Avec l'attribut **href**, nous spécifions où le lien mènera l'utilisateur.
  • Le texte que nous écrivons entre les balises **<a></a>** est le texte que les utilisateurs verront. Dans ce cas, le texte est **freeCodeCamp**.

Nous pouvons également emmener les utilisateurs vers une autre page du même site web en sélectionnant un fichier HTML comme destination :

<a href="about.html">À propos de moi</a>

Si nous assignons l'attribut **id** à un élément HTML, nous pouvons également créer un lien pour emmener l'utilisateur à cet élément sur la même page. Nous devons simplement écrire un hashtag suivi du nom de l'**id** comme valeur de l'attribut **href** :

<a href="#main-title">freeCodeCamp</a>

Dans cet exemple, le lien emmènerait l'utilisateur à l'élément avec l'**id** main-title.

💡 Astuce : l'élément **<a>** est différent de l'élément **<link>**. L'élément **<link>** est utilisé pour spécifier la relation entre le fichier HTML et une source externe comme un fichier CSS. Nous verrons un exemple de cela dans un instant.

Commentaires HTML

Nous pouvons également écrire des commentaires en HTML. Les commentaires sont très utiles pour ajouter des notes que nous et d'autres développeurs pouvons lire lorsque nous ouvrons le fichier. Ils nous aident à expliquer et à comprendre la structure de la page web :

<!-- Ajouter un lien vers freeCodeCamp -->

💡 Astuce : Les commentaires ne font pas partie du résultat final. Ils ne peuvent être lus que lorsque tu ouvres le fichier HTML et ils sont utiles pour les développeurs qui travaillent avec le fichier.

Listes HTML

En HTML, tu peux créer des listes ordonnées et des listes non ordonnées avec les balises **<ol>** et **<ul>**, respectivement.

Voici un exemple de chaque type de liste :

  • Liste ordonnée
<ol>
  <li>Bleu</li>
  <li>Vert</li>
  <li>Noir</li>
</ol>

Image

  • Liste non ordonnée
<ul>
  <li>Bleu</li>
  <li>Vert</li>
  <li>Noir</li>
</ul>

Image

💡 Astuce : la différence entre les deux types de listes est que les éléments des listes ordonnées sont numérotés tandis que les éléments des listes non ordonnées ne le sont pas.

Images HTML

Pour créer une image en HTML, nous utilisons la balise **<img>**. Cet élément n'a pas besoin de balise de fermeture, seulement d'une balise d'ouverture.

Par exemple :

<img src="https://bit.ly/fcc-relaxing-cat">
  • Nous spécifions l'emplacement de l'image avec l'attribut **src** dans la balise **<img>**.

Tu devrais également assigner l'attribut **alt** à toutes les images de ta page web pour avoir un texte alternatif au cas où l'image ne serait pas téléchargée correctement ou si l'utilisateur doit utiliser un lecteur d'écran.

Par exemple :

<img src="https://bit.ly/fcc-relaxing-cat" alt="Un chat orange mignon.">

Super ! Maintenant, tu connais les bases du HTML.

Commençons avec le CSS.

📸 Introduction au CSS

Une fois que nous avons la structure HTML de notre page web, nous pouvons commencer à appliquer des styles aux éléments HTML avec le CSS.

Le CSS est un langage basé sur des règles. Ces règles nous permettent de spécifier comment les éléments seront présentés sur la page web en fonction des sélecteurs CSS, des propriétés et des valeurs.

Comment appliquer des styles à tes éléments HTML

Il y a trois options pour appliquer des styles CSS à tes éléments HTML :

Styles en ligne :

Tu peux spécifier un style directement dans la balise d'ouverture de l'élément que tu veux personnaliser. Tu dois simplement assigner l'attribut style.

Par exemple :

<h1 style="color: blue">freeCodeCamp</h1>

Dans cet exemple, la valeur de l'attribut style est la propriété color et sa valeur correspondante (**blue**). Ils sont entourés de guillemets.

💡 Astuce :** la propriété et sa valeur doivent être séparées par un deux-points et un espace.

Élément