WordPress : Création de contenu en HTML WP03

Cet exercice concerne la création de contenu sans utiliser l’éditeur WYSIWYG de WordPress mais en saisissant directement du code HTML.

Consignes de l’exercice

Connectez-vous à l’administration de WordPress.

Créez un nouvel article intitulé « Création de contenu HTML : les bases ».

Activez le mode Texte pour la rédaction du contenu.

Construisez manuellement le contenu suivant en saisissant le code HTML correspondant. Vous utiliserez du Lorem Ipsum pour le texte.

  • Un titre de niveau 1 : h1 ;
  • Un paragraphe : p ;
  • Un titre de niveau 2 ;
  • Un paragraphe ;
  • Un titre de niveau 2 ;
  • Un paragraphe ;
  • Ajouter une emphase forte sur deux mots de votre choix : strong ;
  • Ajouter une emphase modérée sur deux mots de votre choix : em.

En suivant le même fonctionnement que pour l’article précédent, créez un nouvel article intitulé « Création de contenu HTML : les listes » contenant :

  • Un titre de niveau 1 ;
  • Un paragraphe ;
  • Une titre de niveau 2 ;
  • Une liste à puces : ul et li ;
  • Une titre de niveau 2 ;
  • Une liste numérotée : ol et li ;
  • Une titre de niveau 2 ;
  • Une liste à puces à deux niveaux hiérarchiques.

En suivant le même fonctionnement que pour l’article précédent, créez un nouvel article intitulé « Création de contenu HTML : les liens » contenant :

  • Un titre de niveau 1 ;
  • Un paragraphe ;
  • Une titre de niveau 2 ;
  • Deux liens hypertextes externes vers les sites de votre choix ;
  • Une titre de niveau 2 ;
  • Un lien vers l’article « Création de contenu HTML : les listes » (utilisez le permalien de l’article).

 Téléchargez trois images de votre choix sur Internet. (Ex. : http://pixabay.com).

Chargez les trois images dans la médiathèque de WordPress et identifiez les permaliens des images chargées.

En suivant le même fonctionnement que pour l’article précédent, créez un nouvel article intitulé « Création de contenu HTML : les images » contenant :

  • Un titre de niveau 1 ;
  • Les trois images que vous avez chargé dans la médiathèque en utilisant leurs permaliens.

Insérez sur la dernière image un lien pointant vers un site web de votre choix.

Ajoutez un texte alternatif sur toutes les images intégrées dans cet exercice (attribut alt).

Pour en savoir plus sur l’attribut alt, vous pouvez consulter l’article suivant Use the alt attribute to describe the function of each visual

Ajoutez un titre (attribut title) sur tous les liens créés dans cet exercice.

L’attribut title n’est plus recommandé par le W3C, mais nous sert ici de prétexte pour manipuler des attributs CSS, Supplementing link text with the title attribute

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.