Inutile de faire trop de théorie pour le moment, même si je pense que ce sera nécessaire au court de la formation, je préfère commencer par un exemple concret pour que vous ayez une vision minimale du HTML pour mieux comprendre la théorie.

Nous allons donc créer votre première page HTML, celle ci sera la plus basique possible et sera votre base de travail pour la suite.

Votre première Page HTML sera donc décomposée en deux parties principales : L’entête qui apportera des précisions au navigateur (ou aux moteurs de recherche) sur votre page mais non affichés dans la page et le corps qui comporte la partie visible de votre page html.

Pour cela, il vous faudra ouvrir votre éditeur de texte (Notepad++ par exemple ;) ) et créer un nouveau fichier (généralement Fichier > Nouveau).

Définition du doctype.

La première ligne de code sera
<!DOCTYPE html>
Cette balise obligatoire permet d’indiquer au navigateur que le langage de la page sera du html dans sa version 5. Je vous recommande d’utiliser cette ligne sans la modifier, les navigateurs récent comprennent tous le HTML 5

Définition de la structure d’une page HTML

Vous avez vu plus haut que votre code serait divisé en deux parties : L’entête et le corps. Voici le code adéquat qui permet cela :
<html lang="fr">
<head>
</head>
<body>
</body>
</html>

tout le code qui sera situé entre la balise ouvrante <head> et la balise fermante </head> correspondront à l’entête. Ces données sont généralement informative et ne seront pas affichées sur votre écran.
Le texte de votre page sera donc situé entre les balises <body> et </body> qui correspondent au corps de page.
Ces balises sont encadrés par la balise <html></html> (avec la langue en paramètre de la balise ouvrante). Ici comme pour le doctype, je vous recommande le recopier tel quel (si votre page est en français). Ce sont des informations sur votre page qui ne seront pas affichés par le navigateur.

Les données d’entête du HTML

Ces données seront situés entre la balise <head> et </head>. Elle sont principalement utilisés par votre navigateur ou les moteurs de recherche.

La plus connue est la balise Title, celle ci est très utilisée par Google pour le référencement de votre site. Votre titre sera inclue entre la balise ouvrante et la balise fermante :
<title>Ma super page de vente en HTML</title>
Lors d’une recherche sur Google, c’est ce titre qui sera (généralement) affiché en bleu et qui sera cliquable. Le descriptif juste en dessous est (généralement) le contenu d’une balise appelé méta description qui est un peu différente des balises que nous avons vu jusqu’a présent dans le sens ou le contenu ne sera pas entre la balise ouvrante et la balise fermante mais en paramètre de la balise :
<meta name="description" content="Ceci est le descriptif de ma page de vente, sur cette page vous trouverez une formation complète sur le HTML / CSS vous permettant de créer votre premier site web”/>
De la même façon, la balise meta charset permet de définir l’encoding de la page. L’encoding est ce qui permet d’afficher les caractères, pour une page en chinois ou en européen, l’alphabet n’étant pas le même, l’encoding sera différent.
Je recommande généralement l’UTF-8 qui est relativement universel et qui permettra d’afficher à peu près tous les caractères (même les chinois) :
<meta charset="UTF-8">

Pour résumer, voici ce votre entête :
<head>
<title>Ma super page de vente en HTML</title>
<meta name="description" content="Ceci est le descriptif de ma page de vente, sur cette page vous trouverez une formation complète sur le HTML / CSS vous permettant de créer votre premier site web”/>
<meta charset="UTF-8">
</head>

Les données de corps du HTML

Entrez entre les balises body votre texte de vente, tout simplement :
<body>Suivez ma formation sur l’initiation à la programmation web et devenez un as du HTML et du CSS… Vous pourrez alors créer en autonomie complète votre site internet ou modifier une page de votre site internet sans faire appel à un développeur. Vous feres ainsi une grande économie…</body>

Enregistrez, visualisez… Vous venez de créer votre première page HTML

Enregistrez ce code dans un fichier nommé page-de-vente.html. Généralement : Fichier > Enregistrer sous, entrez le nom page-de-vente.html et surtout, préciser le type de la page (Menu déroulant type généralement mis sur “Normal text file *.txt) sur Html (*.html) ou “All types” (*.*).

Si vous laissez le type de *.txt, votre fichier sera enregistré avec comme nom page-de-vente.html.txt et s’ouvrira par défaut avec votre editeur de texte favoris.

Une fois le fichier bien enregistré et bien nommé, un simple double clic dessus ouvrira votre première page HTML avec tout simplement ce que vous avez écrit entre vos balises body. Félicitations, vous venez de créer votre premier site web ;)

Cet article vous a plu ? N'hésitez pas à le partager avec vos amis...
Categories: Programmation Web

One Response so far.

  1. Armand from Blog SEO dit :

    Les bases, mais c’est toujours bon de les rappeler. J’ai déjà vu des développeurs ne pas mettre le doctype, et commencer leur document par html… Comme quoi c’est toujours bon de rappeler les essentiels.

    Sinon si on rajoute la meta robots dans les bases, bien vérifier que l’instruction ne soit pas « noindex ». Combien de site n’apparaissent pas dans les moteurs de recherche à cause de ça…

Ne partez pas sans laisser un commentaire


This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.