Chapitre 3: Quelques balises html utiles

Cette page reprend les éléments essentiels de l'excellent cours en ligne d'OpenClassrooms: Apprenez à créer votre site web avec HTML5 et CSS3

Des liens vers le site du cours d'openClassrooms sont fournis si vous n'arrivez pas à utiliser correctement les balises proposées.

Si vous avez besoin d'une référence plus complète, utilisez le site MDN Mozilla Developer Network.

Organiser son texte

Vous verrez comment coder des titres, des paragraphes, des listes.

Résumé

• Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci est un titre », etc.
• Les paragraphes sont définis par la balise <p> </p> et les sauts de ligne par la balise <br />.
• Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon l'importance du titre.
• On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.
• Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque item.

OpenClassrooms.com

Créer des liens

Dans cette partie vous verrez comment créer des liens entre des pages html, ou vers une partie précise d'une page.

Résumé

• Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.
• Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la page cible. Exemple : <a href="https://openclassrooms.com">.
• On peut faire un lien vers une autre page de son site simplement en écrivant le nom du fichier : <a href="page2.html">.
• Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut créer une ancre avec l'attribut id pour « marquer » un endroit dans la page, puis faire un lien vers l'ancre comme ceci : <a href="#ancre">.

OpenClassrooms.com

Les images

Vous allez voir quelles sont les différents formats d'image adaptés pour le web et comment les insérer au sein de votre page html.

Résumé

• Il existe plusieurs formats d'images adaptées au Web :

  • JPEG : pour les photos ;
  • PNG : pour toutes les autres illustrations ;
  • GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être animé.
• On insère une image avec la balise <img />. Elle doit obligatoirement comporter au moins ces deux attributs : src(nom de l'image) et alt(courte description de l'image).
• Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au sein d'une balise <figure>. La balise <figcaption> permet d'écrire la légende de l'image.

OpenClassrooms.com