Un menu horizontal réactif

Des éléments "en ligne"

Ouais, bon... En gros, une page HTML est formée d'un certain nombre de blocs superposés ou imbriqués. J'ai bien résumé?

En tous les cas, vous avez bien résumé l'impression que l'on peut avoir jusqu'ici. Mais nous allons maintenant introduire une nouvelle notion.

Synthèse de la page précédente sur les blocs

Deux éléments de type "bloc" qui se suivent sont toujours superposés, dans un document HTML brut.

Un élément de type "bloc" peut toujours contenir un autre élément de type "bloc" (on parle d'éléments imbriqués). Les blocs de même niveau se superposent.

Les blocs permettent de définir la structure générale d'un document HTML.

Les robots des moteurs de recherche (Google, Altavista, Yahoo,...) utilisent la structure des pages HTML pour détecter les éléments importants (les titres, par exemple). Un document qui n'est pas bien structuré ne pourra pas être bien indexé et ne sera généralement pas bien répertorié.
Ce problème est important pour le site web des sociétés qui souhaitent une bonne visibilité sur les moteurs de recherche.

La structuration est également importante pour les personnes aveugles qui utilisent des lecteurs automatiques d'écrans.

Des éléments "en ligne" 

De ce qui précède, on pourrait tirer la conclusion que tous les éléments qui constituent une page HTML sont des blocs superposés ou imbriqués. Il n'en est rien.

Examinons le fragment de code suivant:

<p>Voici un <a href="lien1.html">premier lien</a> et en voici deux autres <a href="lien2.html">lien 2</a> <a href="lien3.html">lien 3</a>.</p><p>paragraphe 2</p>

Le premier bloc <p> contient du texte et trois fragments de type <a> (chacun des trois liens).

éléments "en ligne"
  • Ouvre un nouveau document HTML dans KompoZer.
  • Dans le corps du document, recopie la ligne de code HTML présentée ci-dessus (recopier tout le contenu des deux blocs <p>
  • Observe le document tel qu'il se présente dans l'onglet Normal.
  • Enregistre ce document sous le nom test.html.

Les éléments de type <p> se disposent l'un au-dessus de l'autre.

Les élements de type <a> se disposent simplement les uns à côté des autres.

  • Les éléments qui se disposent l'un au-dessus de l'autre, comme les éléments <p>,
    sont des éléments de type " bloc ".
  • Les éléments qui se disposent l'un à la suite de l'autre, dans le flux du document,
    sont des éléments de type " en ligne ".

Autres exemples d'éléments "en ligne"

  • Dans le document test.html actuellement ouvert, recopie les fragments de texte ci-dessous puis complète-les:
    • les éléments "en ligne"...
    • les élements de type "bloc"...
  • Quand les deux phrases sont complétées, sélectionne l'expression "en ligne" puis clique sur le bouton strong de la barre d'outils de structures.
  • Vérifie que la balise <strong> apparaît dans la barre d'état, au bas de l'écran.
  • Sélectionne ensuite le texte que tu as écrit et clique sur le bouton em.
  • Vérifie que la balise <em> apparaît dans la barre d'état, au bas de l'écran.
  • Répète ensuite la même manoeuvre pour ce qui concerne les élémnts de type "bloc".
  • Vérifie la structure du code HTML correspondant.
  • Enregistre le document.

La balise <em> permet de délimiter un fragment de texte qui doit être mis en évidence (to emphasize, en anglais).

La balise <strong> permet de délimiter un fragment de texte qui doit être mis fort en évidence.

Ces deux balises disposent, dans la plupart des navigateurs, d'une mise en forme générique. Mais, comme d'habitude, il est possible de modifier le style "par défaut".

Dans un document HTML, on trouve le texte disposé de la manière suivante:

<strong>Ceci est très important</strong>

<em>Ceci est important</em>


Ce texte est composé de
Deux éléments de type bloc
Deux éléments de type "en ligne"
Deux éléments qui ne sont ni "en ligne", ni "bloc"
Dans un document HTML, on trouve le texte suivant:
<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>

De quel type sont les éléments de type <li>? (réalise une expérience si nécessaire)
Des éléments de type bloc
Des éléments de type "en ligne"
Deux éléments qui ne sont ni "en ligne", ni "bloc"
Quel type d'élément présenté ci-dessus est délimité par les balises <ul>?
Réalise éventuellement l'expérience qui permettrait de le savoir.
Un élément de type bloc
Un élément de type "en ligne"
Deux éléments qui ne sont ni "en ligne", ni "bloc"

Quand tu as répondu aux questions et bien compris les réponses, passe à la page suivante. Page suivante


Dernière modification 12/05/2008
Ecrire