Informatique


Les balises du document 2

Aller à

Remédiation

Les titres <h1> à <h6> et <hgroup>

Les balises de titre (<h1> à <h6>) englobent des titres, la balise <hgroup> permet de grouper plusieurs titres de niveaux différents.
les effets de la balise <Hx>
  • retour à la ligne
  • espace avant
  • espace après
  • augmentation de la taille des caractères (de <h1> à <h6>)
  • mise en gras

Les paragraphes

Les paragraphes (<p>) englobent du texte, des images, des formulaires, etc.

les effets de la balise <p>
  • retour à la ligne
  • espace avant
  • espace après
Démo
	<section>
	<div>
	<h1>My very beau site</h1>
		<h3>Introduction</h3>
			<p>Qu'il est beau mon beau site...</p>
			<p>Pour être beau, il est beau...</p>
	</div>	
	</section>	
	

Les listes

Il existe deux listes, <ul> pour les listes non ordonnées et <ol> pour les listes ordonnées.
les listes peuvent être imbriquées.

Démo
<section>	
<ul>
	<li>Pierre</li>
	<li>Paul</li>
	<li>Jacques le Majeur</li>
	<li>Jacques le Mineur</li>
	<li>Thomas</li>
	<li>Judas</li>
</ul>
</section>
Démo
<section>	
<ol>
	<li>Préparation des légumes
		<ul>
			<li>Eplucher les carottes</li>
			<li>Emincer l'oignon</li>
			<li>Couper grossièrement le basilic</li>
		</ul>
	</li>
	<li>Préparer la sauce
		<ul>
			<li>Faire fondre le beurre </li>
			<li>Faire revenir l'oignon émincé</li>
			<li>Verser une boîte de tomate pelée</li>
		</ul>
	</li>
	<li>Ajouter le basilic et server</li>
</ol>
</section>
les effets des balise <ul> et <ol>:
  • retour à la ligne
  • espace avant
  • espace après
les effets des balise <li>:
  • retour à la ligne
  • retrait à gauche
  • présence d'une puce

La balise universelle <div>

<div> est appelée balise universelle car elle n'a aucun sens sémantique.

Les divisions (div) s'utilisent lorsque l'on désire un container qui sémantiquement ne signifie pas "paragraphe" ou "titre".


Les sommaires

La balise <details> spécifie des détails supplémentaires que l'utilisateur peut afficher ou masquer à la demande.
La balise <summary> représente la partie visible et cliquable pour développer les détails.
Tout type de contenu peut être placé dans la balise <details>.
Le contenu d'un élément <details> n'est pas visible sauf si l'attribut open est défini de la façon suivante: <details open>.

Démo
<section>	
 <details>
  <summary>Sommaire de la réunion</summary>
  <p> Accueil des participants</p>
  <p>Conférence du conférencier</p>
  <p>Clôture de la journée</p>
</details>
</section>

Quiz

Questionnaire d'autoévaluation 1

Questionnaire d'autoévaluation 2

Questionnaire d'autoévaluation 3

Questionnaire d'autoévaluation 4