Image 1
Web development

Tutoriel du HTML

Apprenez les bases du HTML : des balises essentielles aux metatags pour optimiser votre référencement. Un guide pratique pour créer vos premières pages web.

As-tu aimé cet article ?

Comment créer un fichier HTML ?

Pour créer des pages web en HTML, il suffit d'avoir un simple éditeur de texte comme Notepad sous Windows (ou Emacs sous Linux). Au lieu d'enregistrer en .txt, il suffit d'enregistrer en .html ou .htm. Vous voilà avec votre premier fichier web… seulement, il est pour le moment vide. Nous allons donc voir comment le remplir.

Comprendre les balises HTML

HTML fonctionne avec des balises d'ouverture et de fermeture. Votre programme doit donc commencer par <HTML> et se terminer par </HTML>. Ainsi nous avons défini que le fichier contient un programme HTML.

Note : vous pouvez utiliser indifféremment des majuscules et des minuscules dans votre programme : <HTmL> = <HTML> = <html>.

Un programme HTML contient principalement deux parties : HEAD et BODY.

La partie HEAD : configurer les entêtes

La partie HEAD contient les entêtes du programme. Cela correspond à des paramètres du programme qui ne seront pas affichés en sortie. J'appellerai la sortie l'exécution du fichier dans un navigateur tel que « Internet Explorer », « Netscape », etc.

Entre les balises HEAD : <HEAD></HEAD>

On placera :

  • Le titre de la page : <TITLE>Titre de la page</TITLE>

Les metatags pour le référencement

Ce sont des balises utilisées par les moteurs de recherche qui définissent l'auteur du site, l'adresse de l'auteur, la date de création, les mots-clés pour la recherche de votre site, etc.

Pour définir l'auteur du document :

<META NAME="Author" CONTENT="Votre Nom">

Pour définir les droits d'auteur :

<META NAME="Copyright" CONTENT="Votre Nom, Année de création">

Pour décrire le contenu de vos pages :

<META NAME="Description" CONTENT="Le descriptif de votre page web">

Elle peut comporter jusqu'à 200 caractères.

Noms des programmes utilisés pour créer le document HTML :

<META NAME="Formatter" CONTENT="valeur">
<META NAME="Generator" CONTENT="valeur">

Les mots-clés pour les moteurs de recherche :

<META NAME="Keywords" CONTENT="mot1, mot2, mot3, mot4, mot5">

Elle peut comporter jusqu'à 1000 caractères. Il n'est pas nécessaire d'écrire chaque mot en minuscule, puis majuscules, puis avec la première lettre en majuscule… (ex : mot1, MOT1, Mot1), car dans plus de 80% des cas, l'utilisateur tapera sa requête en minuscules dans le moteur de recherche.

Langue utilisée pour l'indexation des robots :

<META HTTP-EQUIV="Content-Language" CONTENT="fr">

Changement de l'adresse d'hébergement de vos pages :

<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://www.votrenewsite.com">

Après le chargement de cette page, le navigateur va automatiquement charger la page indiquée par URL. S'il n'y en a pas (CONTENT="10"), alors la page courante sera rechargée. La valeur est exprimée en secondes.

Exemple complet de balises HEAD

(Il vous reste à changer ce qui est en gras)

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="description" CONTENT="**description1, description2**">
<meta HTTP-EQUIV="Content-Type">
<META NAME="author" CONTENT="**nom de l'auteur**">
<META NAME="Keywords" CONTENT="**mot1, mot2, mot3, mot4**">
<META NAME="language" CONTENT="fr">
<link rel="made" HREF="**ici mettez votre e-mail**">
<link rel="owns" HREF="**ici mettez votre nom**">
<BASE HREF="**URL de votre site**">
<META NAME="Copyright" CONTENT="**auteur, année**">
<META NAME="revisit-after" CONTENT="7 days">
<Meta NAME="TEMPLATE" CONTENT="**Nom du fichier**">
<Meta NAME="EDITOR" CONTENT="**ici mettez votre nom**">
<META NAME="Generator" CONTENT="**ici mettez votre éditeur (Notepad)**">
<META NAME="PROGRAMMER" CONTENT="**Nom du programmeur**">
<META NAME="LASTREVIEW" CONTENT="**Date de la dernière mise à jour**">
<META NAME="NEXTREVIEW" CONTENT="**Date de la prochaine mise à jour**">
<META NAME="expires" content="never">
<META NAME="rating" content="general">
<META NAME="subject" content="**ici mettez le sujet**">
<META NAME="rev" Content="mailto:**ici mettez votre e-mail**">
<META NAME="title" content="**Titre**">

Les balises de style

Les balises <STYLE></STYLE> permettent de définir les types, tailles et couleurs des caractères suivant si ces caractères sont des liens, des titres ou du simple texte.

As-tu aimé cet article ?
zippy
9 articles 0 abonnés

Commentaires (1)

Connexion pour laisser un commentaire.

Chargement des commentaires...

Articles similaires