Débuter en HTML

Sous-titre

Débuter avec le HTML

Cette formation porte sur une introduction aux fondements du HTML, pour prendre un bon départ

Commencez

Débuter en HTML

Programme

1. Prérequis

2. Qu'est ce que le HTML

3. Anatomie d'un élément HTML

4. Apprentissage actif : créer votre premier élément HTML

5. Éléments imbriqués

6. Éléments bloc vs en ligne

7. Éléments vides

8. Les attributs

9. Apprentissage actif : ajouter des attributs à un élément

10. Anatomie d'un document HTML

11. Apprentissage actif : ajouter certaines fonctionnalités à un document HTML

12. Quiz: Évaluation

Les Prérequis

Prérequis

Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place

Qu'est ce que le HTML

La naissance du web

Le chercheur britannique Tim Berners-Lee a inventé le World Wide Web en 1989, lorsqu’il travaillait au CERN

À l’origine, le projet, baptisé « World Wide Web », a été conçu et développé pour que des scientifiques travaillant dans des universités et instituts du monde entier puissent s'échanger des informations instantanément.

Le premier site Web créé au CERN, et dans le monde, était destiné au projet World Wide Web lui-même. Il était hébergé sur l’ordinateur NeXT de Tim Berners-Lee. En 2013, le CERN a entrepris de remettre en service ce premier site Web : info.cern.ch.

Qu'est ce que le HTML

Qu'est ce que le HTML

HTML (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage

le HTML sert à indiquer au navigateur comment structurer les pages web visitées. Le HTML se compose d'une série d'éléments avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière.

Anatomie d'un élément HTML

Anatomie d'un élément HTML

Les principales parties de notre élément sont :

• La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe.
• Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte.
• La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges.

Regardons notre élément paragraphe d'un peu plus près :

Apprentissage actif : créer votre premier élément HTML

Récréation

Rendez vous au W3schools : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Instructions

Modifiez la ligne ci-dessous dans la Zone de saisie en la mettant entre les balises <em> et </em> (mettez <em> avant pour ouvrir l'élément et </em> après pour fermer l'élément) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la Zone de rendu.

Éléments imbriqués

Goals

Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'imbrication. Si vous voulez affirmer que votre chat est très grincheux, vous pouvez mettre le mot « très » dans l'élément <strong>, pour qu'il soit fortement mis en valeur :

<p>Mon chat est <strong>très</strong> grincheux.</p>

Mon chat est très grincheux.

Éléments bloc vs en ligne

Qu'est ce que c'est ?

Les éléments de niveau bloc

Forment un bloc visible sur une page — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.

Les éléments en ligne

Forment un bloc visible sur une page — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant

Éléments vides

Goals

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <img /> ou <img> insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <img /> est à privilégier)

Copiez le code ci-dessous dans la partie HTML du Playground MDN: https://developer.mozilla.org/fr/play

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />

Les Attributs

Attributs

Les éléments peuvent aussi avoir des attributs, qui comme suit:

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

Apprentissage actif : ajouter des attributs à un élément

Pratique

Un autre exemple d'un élément est <a>. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

href Cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, href="https://www.mozilla.org/". title l'attribut title apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, title="Page d'Accueil Mozilla", qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien. target l'attribut target définit le contexte de navigation utilisé pour afficher le lien. Par exemple, target="_blank" affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, il suffit de ne pas mettre cet attribut.

Apprentissage actif : ajouter des attributs à un élément

Pratique

Modifiez la ligne ci-dessous dans la Zone de saisie pour la transformer en lien vers votre site web préféré.

Un lien vers mon site Web préféré.

1. Ajoutez l'élément <a>.
2. Ajoutez l'attribut href ayant pour valeur: "https://www.mozilla.org/"
3. puis l'attribut title ayant pour valeur: "Page d'accueil de Mozilla".
4. Définissez l'attribut target afin d'ouvrir le lien dans un nouvel onglet.

Rendez-vous à votre MDN Playground

Vous pourrez voir la mise à jour de vos modifications en direct dans la Zone de rendu. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément href. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs. Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.

Anatomie d'un document HTML

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

Learning unit completed

Good job!

Reflect on what you have learned in this module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore sit amet.

back

Pratique

• Faites un copier-coller du code HTML ci-dessous dans le MDN Playground

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /> <h1>Titre 1</h1> <h2>Titre 2</h2> <em>premier</em> <em>deuxième</em> <em>Troisième</em> <h3>Titre 3</h3> <h4>Titre 4</h4>

• Quels sont les éléments de type Bloc

• Quel sont les élémemts en en Ligne ?

https://developer.mozilla.org/fr/play

1. What have I learned? Main concepts and ideas.
2. How did I learn it? Steps followed to learn it: group work, research, analysis of information, in-depth study, etc.
3. What has been the easiest and the most difficult part?
4. What was it useful for? Usefulness of what I have learned
5. In what other situations can I use it? Extrapolation of what I have learned to other subjects, daily life, etc.

<!DOCTYPE html> : le type de document. Quand HTML était jeune (vers 1991/2), les doctypes étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci :

<html></html> : l'élément <html>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.

<head></head> : l'élément <head>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.

<meta charset="utf-8"> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard.

<title></title> : l'élément <title>. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris.

<body></body> : l'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.