TP2 : Organisez votre texte

Description

Dans ce TP, on a pu découvrir de nouvelles balises qui nous ont permis d’organiser le texte de notre page web. Ces balises donnent des indications telles que : « ceci est un paragraphe », « ceci est un titre », etc.

Structurer sa page avec les titres

Il existe six niveaux pour définir un titre, allant de <h1></h1> à <h6></h6>, utilisés selon l'importance du titre :

Titre super important

Titre important

Titre un peu important (sous-titre)

Titre pas trop important

Titre pas important
Titre vraiment pas important

Rédiger des paragraphes

Les paragraphes sont définis par la balise <p></p>, et les sauts de ligne par la balise orpheline <br>, qui doit obligatoirement être mis à l’intérieur d’un paragraphe.
Cette dernière, bien qu’il ne soit pas impératif de l’utiliser, permet entre autres de ne pas surcharger le code HTML de balises de paragraphe.

Organiser les informations sous forme de listes.

Pour créer des listes, on doit utiliser la balise <ul></ul> (liste à puces, liste non ordonnée) ou <ol></ol> (liste ordonnée, liste numérotée). À l'intérieur, on insère les éléments avec des balises <li></li> qui entourent chaque item.

Exemple de liste à puces

  • Fraises
  • Framboises
  • Cerises

Exemple de liste ordonnée

  • Je me lève
  • Je me mange et je vois
  • Je retourne me coucher

Donner de l'importance à certains mots de son texte

On peut mettre en valeur certains mots avec les balises <strong></strong> (qui signifie « ce texte est important » ), <em></em> (qui signifie « ce texte est emphatique » ) et <mark></mark> (qui signifie « ce texte est marqué » ). Pour cela, il suffit d’encadrer le texte visé avec l’une de ces balises.

Par défaut :

  • <em></em> : a pour effet de mettre le texte en italique;
  • <strong></strong> : a pour effet de mettre le texte en gras;
  • <mark></mark> : a pour effet de surligner le texte en jaune.

Cependant, ces balises indiquent le sens des mots, et non pas comment ceux-ci doivent s’afficher (important, emphatique, marqué). Il est donc tout à fait possible d’afficher le texte d’une autre façon que celui décidé par l’ordinateur, grâce au CSS.