– Les balises –

 

Le langage HTML a ses spécificités!

En effet, ici on ne va pas coder comme les autres langages, car le principe même du langage est spécifique. Tout se passe par blocs, que l’on assemble les uns aux autres pour créer une page.

Le format HTML est défini par des balises (tags) délimités par les signes inférieur < et supérieur > et marchant par paires.

Pour une balise d’ouverture, il correspond (presque) toujours une balise de fermeture, définissant une zone interprétée par le navigateur. Celle-ci est identique à celle d’ouverture, à la différence qu’elle est précédée d’un /.

Une page web est donc composée d’éléments (textes, images, liens hypertextes, …) à afficher selon une présentation définie par les balises.

Vous ne comprenez rien? Tant mieux, au moins le cours va servir à quelque chose.

Voilà ce que ça donne en exemple. Ici on a une balise que je nomme X. Cette balise contient 2 paramètres name et class, qui sont vides pour le moment. Le contenu de la balise est compris entre <X> et </X>. Enfin on a la balise de fermeture </X>.

Les balises peuvent être écrites en minuscules ou majuscules et vont (presque toutes) par paire :

  • une balise ouvrante <truc> et une balise fermante </truc>
  • leur action porte sur les éléments placés entre la paire
  • balises simples <truc>
  • balises avec attributs <truc attribut= »valeur »>….</truc>
Voilà la structure générale d’une page web

On décompose le code en 2 parties.

Tout ce qui se trouve entre <head> et </head> correspond aux méta-données de notre page. C’est en fait ce qui va correspondre aux paramètres de notre page.

Tout ce qui se trouve en <body> et </body> correspond au corps de notre texte. C’est ce qui sera affiché sur notre page.

– Les paragrahes –

 

– Le paragraphe HEAD –

Ce paragraphe est facultatif. On peut très bien se passer de lui et faire une page web sans. Après il est aussi possible de se balader à poil dans la rue, ou au contraire de tout le temps porter tous les habits qu’on possède. C’est un choix. Mais ça semble quand même mieux d’avoir de quoi ranger ses habits quelque part et les utiliser proprement quand on en a besoin.

Il contient des informations relatives au document, c’est-à-dire principalement:

  • les Scripts
  • les Feuilles de style

Ces informations ne sont pas affichées par les navigateurs

Voilà les balises du paragraphe HEAD

  • <SCRIPT> Contient le code d’un programme appelé dans une balise de <BODY>
  • <STYLE> Définit les styles de présentation
  • <TITLE> C’est le titre du document affiché dans la barre de titre du navigateur. Il est nécessaire au référencement par les robots d’indexation
  • D’autres balises moins intéressantes (vous avez qu’à faire une formation pure info!)

 

– Le paragraphe BODY –

Ce paragraphe contient ce qui sera effectivement affiché dans votre navigateur. Il regroupe les balises de définition des textes, images, liens, formulaires… formant le corps du  document. Chaque bloc contenu dans la balise BODY peut accepter un ensemble de paramètres. La balise BODY elle-même accepte plusieurs paramètres définissant les attributs de présentation de toute la page.

Il faut imaginer une page internet comme une poupée russe. On empile les éléments les uns dans les autres, et chaque élément aura la priorité sur son élément père.

Par exemple: un élément body peut avoir une couleur de fond bleue. Si je mets dans body une balise div ayant un fond rouge, alors tout ce qui est compris dans ce div aura un fond rouge. Si dans ce div je mets un autre div ayant une couleur pourpre, alors ce qui est compris dans cette div aura une couleur de fond pourpre.

Dans l’exemple ci-contre, on a une balise body qui correspond à notre page.

Celle-ci contient plusieurs éléments que nous détaillerons plus tard:

  • un titre avec la balise H1
  • un lien avec la balise A
  • une ligne vide avec la balise BR
  • une image avec la balise IMG