Introduction au HTML

Introduction au HTML

Le HTML est le langage de base du web. C’est un langage de description qui permet de structurer une page web.

Comment s’affiche une page web ?

Avant de rentrer dans le détail du langage HTML voici une petite explication pour comprendre comment s’affiche une page web.

Le « client » envoi une requête au « serveur »

Le « client » représente la machine connecté au réseau qui envoie une demande de page web.
Exemple : Vous tapez http://webcreateur.net dans la barre de recherche de Firefox.

Le « serveur » renvoi une réponse au « client »

Le « serveur » renvoi la page web en réponse à la demande.
Exemple : Affichage de la page d’accueil de http://webcreateur.net

Comment créer une page web ?

Pour créer une page web il faut créer un fichier au format HTML. Les fichiers HTML possèdent l’extension suivante : « .html ».
Puis il faut déposer cette page web sur un serveur.

Principe de balise

Vous aller souvent voir le mot « balise » dans les paragraphes suivants.
Le concept de balise est primordial en HTML.
Une balise représente un nouvel élément à afficher. Cela peut être un élément texte, un tableau, un média ou une méta-données.
Le principe est le suivant:

  • On ouvre une balise <balise>
  • On écrit le contenu
  • On ferme la balise </balise>

Exemple pour afficher un texte sous forme de paragraphe:

<p>Ceci est un paragraphe.</p>

Commentaire

Au fur et à mesure que vous allez écrire du code vous aurez surement besoin de mettre des commentaires pour vous repérer.
En HTML les commentaires se présente sous la forme suivante :

<!-- Ceci est un commentaire -->

Structure d’une page web

Le DOCTYPE

La première ligne d’un fichier HTML est toujours le « doctype ». Cette ligne sert d’instruction au navigateur web qui va afficher la page pour indiquer que le code qui va suivre est au format HTML.
Cette ligne se présente comme suit:

<!DOCTYPE html>

La balise mère

La deuxième ligne d’un fichier HTML est toujours la « balise mère ». Egalement appelée la balise « racine » c’est la balise qui va contenir toutes les autres.
Cette balise se présente comme suit:

<!DOCTYPE html>
<html>
Contenu de ma page web
<html>

L’en-tête de la page

Un fichier HTML comporte deux parties principales : l’en-tête et le corps.
L’en-tête sert à renseigner des méta-données interprétées par le navigateur web. Ces données ne sont pas affichées dans le navigateur.
L’en-tête HTML s’insert avec la balise <head>

Les métadonnées sont des données (informations) sur les données.

La balise <meta> fournit des métadonnées sur le document HTML. Les métadonnées ne seront pas affichées sur la page, mais seront analysables par le navigateur web.

Les méta-éléments sont généralement utilisés pour spécifier la description de la page, les mots-clés, l’auteur du document, la dernière modification et d’autres métadonnées.

Les métadonnées peuvent être utilisées par les navigateurs (comment afficher du contenu ou recharger une page), des moteurs de recherche (mots-clés) ou d’autres services Web.

HTML5 a introduit une méthode permettant aux concepteurs Web de contrôler la fenêtre d’affichage (la zone visible de l’utilisateur d’une page Web), via la balise <meta>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Apprendre le HTML">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Snow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
<html>

Le corps de la page

Le corps de la page web contient tout ce qui va s’afficher dans le navigateur.
Le corps se déclare avec la balise <body>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Apprendre le HTML">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Snow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <p>Mon premier paragraphe</p>
  </body>
<html>

Les éléments HTML

Maintenant que vous savez comment créer une structure de page web voyons quelques éléments nous pouvons mettre à l’intérieur.