Structure HTML de base

in

Structure HTML de base d'une page Internet

Voici la structure de base de toutes les pages Internet :

<!DOCTYPE html>
<html>
 <head>
  <title>Titre de ma page</title>
 </head>
 <body>
  Contenu de ma page
 </body>
</html>

Comme expliqué dans la partie "Présentation", vous pouvez y constater l'utilisation de balises et l'apparition d'une autre notion essentielle du langage HTML à savoir l'imbrication de balises. Dans l'exemple ci-dessus, nous pouvons remarquer que la balise <body> est contenue à l'intérieur des balises ouvrante et fermante <html>. De même, la balise <title> est contenue dans la balise <head> elle-même contenue dans la balise <html>, on dit que les balises sont imbriquées les unes dans les autres. A noter que la première ligne : <!DOCTYPE html> est indispensable pour indiquer aux navigateurs internet qui vont lire votre page que le contenu est bien au format HTML

Analyse de la structure HTML

Il est à noter que cette imbrication respecte une certaine logique de contenu et conteneur. Ainsi la balise <html>, est la balise de plus haut niveau qui contient toutes les autres balises. Voici une description rapide des balises de notre exemple :

htmlBalise racine principale de toute page HTML
headHead signifie entête, cette balise contient des informations importantes sur la description de votre page Internet comme par exemple son titre ("title")
titleComme nous l'avons déjà vu, cette balise permet d'indiquer le titre de la page Internet. Titre affiché tout en haut de votre navigateur Internet
bodyBody signifie corps, cette balise contient le contenu de la page Internet c'est à dire tout ce qui est visible lorsque que vous consulter une page Internet

astuce yoja pour votre boutique zlio

le titre de la page d'accueil de votre boutique zlio est construit à partir des champs "titre de la boutique" et "slogan de la boutique" de la rubrique "identité" de votre console d'administration. Le titre des pages catégorie de votre boutique zlio est construit avec le champ "titre de la boutique" et le libellé de la catégorie. Nous vous conseillons de prendre soin d'optimiser les mots clés dans le titre car celui-ci est considéré comme très important par les moteurs de recherche.

Créer une page Web

Nous allons créer ensemble votre première page web. Pour cela, il suffit de suivre les instructions suivantes :

  • Ouvrir un éditeur de texte, par exemple "Bloc Notes"
  • Copier/Coller les lignes de code HTML en haut de page. Pour cela, sélectionnez toutes les lignes (elle doivent être surlignées) puis faites Ctrl+C (copier), retournez dans votre éditeur de texte puis coller les lignes (Ctrl+V).
  • Enregistrer le fichier sous la forme monsite.html

Votre première page Web est désormais créée, vous pouvez essayer de voir le résultat en ouvrant le fichier avec votre navigateur internet (clic droit sur le fichier puis ouvrir avec "internet explorer" par exemple). Maintenant que vous possédez les bases du langage, nous allons pouvoir étudier différentes balises HTML qui pourront être utiles pour vos boutiques zlio.