HTML

Création d’une page web

Lorsque vous souhaitez créer une page web ou un site internet, il serait logique de penser qu’il suffit d’allumer l’ordinateur et d’ouvrir un éditeur dans lequel taper le code.

Malheureusement, cette méthode n’a jamais fait ses preuves et a plutôt montré que le temps de création de la page ou du site était deux fois plus long.

Il est préférable de préparer sur papier, au brouillon, le dessin de ce qui devrait être obtenu au final, un peu comme le réalisateur qui va utiliser un story-board sur lequel les plans qu’il va devoir filmer ont déjà été réfléchis et dessinés : il sait exactement ce qu’il doit filmer, sous quel angle, avec quel éclairage...

Ensuite, une page web est constituée de mots issus du langage HTML. Certains d’entre eux sont obligatoires et vont être étudiés dans la section suivante. D’autres sont plus spécifiques à ce qui doit être affiché ou non et dépendent du brouillon qui aura été fait.

La structure d’une page web écrite dans le langage HTML correspond aux fondations pour une maison. C’est sur cette structure que vont reposer les styles CSS et le code JavaScript. Il est donc vital de très bien la construire. En même...

Code HTML obligatoire

Une page HTML doit contenir au minimum le code ci-dessous, qui pourra être divisé en deux grandes parties :

L’en-tête de la page : <head></head>
Le corps de la page : <body></body>

<!DOCTYPE html> 
<html> 
 
<head> 
    <title>Le titre de ma page</title> 
    <meta http-equiv="Content-Type" content="text/html; 
charset=UTF> 
</head> 
 
<body> 
Structure, texte et images... 
</body> 
 
</html>

Examinons en détail ce code, car nous le retrouverons systématiquement.

Le doctype

La première balise qui est utilisée dans une page HTML est la balise <!DOCTYPE html>.

Jusqu’au HTML5, donc en HTML4 ou XHTML par exemple, le doctype était une balise contenant une centaine de caractères, plutôt complexe et qui était moyennement respectée ou comprise par les développeurs. Aujourd’hui, avec le HTML5, cette balise s’écrit plus simplement. Son contenu permet d’indiquer au navigateur que le code qui suit est du HTML5.

Donc <!DOCTYPE html> sera toujours la première chose à écrire dans le code d’une page web en HTML5.

Ensuite, il y a les balises <html></html>, deux balises qui vont contenir toute la page et qui indiquent qu’à partir de cette ligne <html>, c’est le langage HTML qui est utilisé.

Les balises <head></head> ou en-tête de page contiennent des informations de paramétrage qui vont être envoyées au navigateur avant même que celui-ci n’affiche quoi que ce soit, et ce afin qu’il se prépare.

Les balises <body></body>, pour le corps de la page, vont contenir les éléments que le navigateur doit afficher à l’écran.

L’essentiel du travail d’un webmaster se trouve dans la partie BODY, mais si le HEAD est mal écrit ou qu’il y a des éléments...

La balise <head>

Parmi les balises indispensables au bon fonctionnement d’un site, il y a les balises <title></title> qui vont se retrouver dans l’en-tête <head>.

Exemple

<title>Liste des nouveaux produits</title>

Cette dernière, un titre, va afficher le texte contenu entre les balises <title> et </title>, quelque part dans le navigateur. Cela peut être dans la partie supérieure de la fenêtre du navigateur ou encore dans un onglet.

En plus de donner à la personne qui visite la page une idée de ce qui va être affiché, les informations de la balise <title> vont être récupérées par les moteurs de recherche.

Autrement dit, le contenu de la balise <title> de l’exemple ci-dessus va informer l’internaute et les moteurs de recherche sur le contenu de la page.

Si un internaute peut se contenter du mot « produits » et comprendre qu’il s’agit de chaussures parce que le site est spécialisé dans la vente de chaussures, les moteurs de recherche, eux, ne peuvent pas deviner de quel type de produit il s’agit. Autrement dit, si un internaute recherche le mot « chaussures » dans un moteur de recherche, le résultat de la recherche n’affichera sûrement pas la page qui a pour titre : « Liste des nouveaux produits ».

Heureusement, le mot « chaussures » sera sûrement écrit dans le corps de la page, et le moteur de recherche proposera tout de même ce site. Mais si le titre était :

<title>Liste des nouvelles chaussures de ville.</title>

ou quelque chose d’avoisinant, il est certain que le moteur de recherche proposerait plus facilement ce site.

Autrement dit, utiliser un maximum de mots-clés dans le titre de vos pages aide au référencement.

La balise qui suit est la balise <meta></meta>.

Cette balise contient des informations sur la page qui vont aider le navigateur à, par exemple, afficher...

La balise <body>

C’est à l’intérieur de <body></body> que sont utilisées toutes les balises qui vont servir à afficher quelque chose à l’écran.

Dans les grandes lignes, nous allons trouver toutes les balises permettant de structurer la page, c’est-à-dire de la découper en créant des cases, dans lesquelles il sera possible de mettre le menu du site, ou une zone d’image et une légende en dessous, ou un bloc pour un formulaire.

En fait, la structure des sites a longtemps été dessinée uniquement avec des tableaux. C’étaient des tableaux très simples : il suffisait de mettre dans telle cellule le menu, dans telle autre la liste des articles proposés sur le site, une cellule tout en haut pour une publicité par exemple, etc.

Cette méthode avec les tableaux <table></table> (cf. chapitre Mise en page HTML et CSS - section Les tableaux pour plus de détails sur les tableaux) est relativement simple et peut être intéressante pour afficher des données, comme cela serait fait avec un tableur. Le souci est qu’aujourd’hui, il devra également s’afficher correctement sur les smartphones dont les écrans sont plus petits que ceux des ordinateurs. Il ne sera donc pas possible d’afficher le site de la même façon. Autrement dit, il va falloir organiser l’affichage pour que cela fonctionne sur tous les écrans. Il faudra tenir compte également du mode paysage (horizontal) ou portrait (vertical).

Il existe des balises qui sont des blocs (comme un rectangle) et qui peuvent prendre n’importe quelle taille. Ils peuvent être affichés à tous les endroits voulus dans la page, en étant devant ou derrière un autre bloc. Ces blocs sont très pratiques à manipuler et autorisent des choses que les tableaux <table> ne permettent pas.

Pour donner quelques balises correspondant à ces blocs, il y a par exemple les balises <div>, <section>, <article>, <nav>, <aside>, <header>, <footer>...

Une fois que toutes les zones dans lesquelles sera affiché du texte ou des images, vidéos, infos... sont définies, le contenu pourra être écrit.

Avant de fabriquer une page web, il faut avoir une bonne idée du résultat final désiré. L’étape de création de la structure, de l’organisation des blocs, des dimensions et des positions est sûrement la plus importante et celle qui doit demander le plus d’attention, car tout le reste du site va reposer sur cette structure. Et s’il est nécessaire de changer par la suite l’affichage ou la disposition pour une raison ou une autre, dans certains cas cela se fera assez rapidement, et dans d’autres cas cela pourra demander énormément d’efforts, un peu comme si une personne décidait de changer la place de la cave dans la maison : cela reste possible, mais si on y avait pensé à la construction, cela aurait été beaucoup plus simple et rapide à réaliser.

Une fois la structure en place, il « suffira » de la remplir avec les images et textes...