publié le lun. 18 septembre 2017

Nous poursuivons le cours en ligne (MOOC) libre sur le site openclassroom: Apprenez à créer votre site web avec HTML5 et CSS3

N'oubliez pas de vous connecter sur le site afin de suivre votre avancement sur le cours.

Pour mettre en pratique vos connaissances au fur et à mesure du cours, lancer le script launch-atom-et-firefox-207.bat présent dans le dossier Documents\devoirs\abel\icn qui pemet d'ouvrir l'éditeur de texte Atom pour éditer le code html et le navigateur firefox pour observer le rendu de la page codée.

2ème séance

Lors de cette deuxième séance nous poursuivons notre apprentissage des bases de HTML5, et nous allons voir comment insérer des liens et des images, deux types de balises orphelines ayant des attributs obligatoires.

5. 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">.

Source OpenClassrooms.com

6. 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.

Source OpenClassrooms.com