"Bugdroid"

HTML exercise given at HEPL

---

"Bugdroid" is an educational project, which will be used for HTML/CSS courses.

Note: the school where the course is given, the HEPL from Liège, Belgium, is a french-speaking school. From this point, the instruction will be in french. Sorry.

---

Lors de vos cours de web, vous allez découvrir les langages HTML et CSS et les mettre en pratique pour apprendre à créer des pages web.

---

BugDroid

Vous trouverez dans ce dossier un fichier texte nommé index.txt. Cette page présente le robot Bugdroid.

Votre mission est

1. de créer le fichier HTML qui permet d’afficher ce contenu dans un navigateur web ;
2. de valider votre code HTML dans un validateur ;
3. de compléter (avec l’aide de votre professeur de labo) la feuille de style qui donnera à cette page le rendu suivant :

1. Création du fichier HTML

Pour vous aider, voici les étapes que vous pouvez suivre :

1. avant tout, et avant de commencer à taper du code dans un fichier, prenez le temps d’analyser le contenu fourni pour identifier les balises à utiliser. Vous pouvez vous aider du rendu ci-dessus pour identifier les grandes sections de la page. Si vous hésitez, vous pouvez également consulter l’aide fournie dans la section « Aides » ci-dessous ;

2. créer le fichier HTML et y placer les balises de départ qui fournissent un template de base complet, ce qui implique notamment de bien indiquer que le document est en français et aussi :

   • au niveau de l'en-tête du document, de bien définir les méta-informations grâce aux balises meta, titleet link appropriées (si vous avez besoin d’aide, voir la section « Ressources » ci-dessous) pour :
     • déclarer correctement l’encodage des caractères utilisé (pour ne pas avoir de problème d’affichage des caractères spéciaux et accentués dans le navigateur) ;
     • renseigner que vous êtes l’auteur du document ;
     • prévoir que, si on recherche votre page sur un moteur de recherche comme Google, les mots-clés suivants soient associés : BugDroid, mascotte Android, robot vert ;
     • prévoir que, si on recherche votre page sur un moteur de recherche comme Google, le moteur de recherche affiche la description suivante pour votre page dans la page qui présente les résultats de recherche : « Faites la connaissance de Bugdroid, le petit robot vert qui sert de mascotte à Android » 
     • faire en sorte que le titre du document qui s’affiche dans l’onglet du navigateur soit « BugDroid » ;
     • lier la feuille de style à votre page HTML ;
     • prévoir que, si votre page est affichée dans un ancien navigateur IE qui ne reconnaît pas les nouvelles balises HTML5 (comme nav, section, etc.), ces dernières puissent malgré tout être correctement affichées par le navigateur en question (voir la section « Ressources » ci-dessous)(obsolète, plus nécessaire) ;
   • au niveau du coprs du document, de découper la page en trois grandes sections :
     • la bannière (balise header) ;
     • le contenu principal (balise main) ;
     • le pied de page (balise footer) ;

3. baliser le texte en utilisant les balises HTML correctes  (voir la section « Aides » ci-dessous);

4. afficher l’image représentée dans le fichier bugSkate.png avec, comme texte alternatif au cas où elle ne s’affiche pas, « BugDroid, un petit robot vert, sautant sur son skate board » ;

5. faire en sorte que le lien « Je découvre » mène vers le site officiel de BugDroid à l’adresse http://www.bugdroid.fr.

2. Validation du code HTML

1. lancer un validateur :
   • soit Total Validator (de préférence) offline ;
   • soit le validateur HTML5 du W3C online ;
2. interpréter les erreurs éventuelles fournies par le validateur ;
3. corriger ;
4. valider à nouveau jusqu'à ce qu’il n’y ait plus d'erreur.

3. Aides

3. 1. Liste des balises

Étant donné que ceci est votre premier exercice en solo et que vous n’avez pas encore vu en cours théorique toutes les balises requises, voici la liste des balises HTML dont vous aurez besoin pour réaliser cet exercice : html (avec l'attribut lang), head, meta (avec les attributs charset, name, content), title, link (avec les attributs rel et href), body, header, h1, i (avec l'attribut lang), main, p, dfn (avec l'attribut lang), abbr (avec les attributs lang et title), figure, img (avec les attributs src, alt, width, height), figcaption, b, a (avec les attributs href, title, hreflang), footer, time (avec l'attribut datetime). Consultez la Référence des éléments HTML (voir la section « Ressources » ci-dessous) ainsi que votre « HTML 5 Pocket Reference » pour vous aider à décider quelle balise et quels attributs utiliser pour quel usage et vérifiez à la fin de l’exercice que vous avez bien utilisé toutes les balises de cette liste.

3. 2. Rappel concernant les commentaires en HTML

• les commentaires en HTML s'indiquent entre les symboles <!-- (marqueur de début de commentaire) et --> (marqueur de fin de commentaire). Tout ce qui se trouve entre ces deux marqueurs est ignoré par le navigateur, ce sont des textes qui ne sont ni affichés dans la page, ni interprétés par le navigateur. Ils sont réservés à l’usage exclusif du développeur. Vous pouvez y indiquer tout ce qui vous aide à comprendre, à organiser ou à relire votre code. Voici un exemple :

    <!-- balise meta pour l'encodage des caractères --> 
    <meta charset="utf-8"> <!--  déclare au navigateur que l'encodage des caractères du document courant
                                 est réalisé en UTF-8 --> 

• les commentaires conditionnels s’indiquent entre les symboles <!--[if lt IE …] (marqueur de début de commentaire conditionnel) et <![endif]--> (marqueur de fin de commentaire conditionnel). Tout ce qui se trouve entre ces deux marqueurs est ignoré par les navigateurs récents et n’est lu QUE par les navigateurs qui respectent la condition. Par exemple, ce qui se trouve dans le commentaire suivant (entre <!--[if lt IE 9]> et <![endif]-->) n’est exécuté QUE par les navigateurs IE antérieurs à IE9 : (obsolète, plus nécessaire)

<!--[if lt IE 8]>
    <link rel="stylesheet" href="css/screen-ie678.css">
<![endif]-->

3. 3. Astuce pour démarrer beaucoup plus vite

Si vous utilisez Sublime Text et que l’extension Emmet est installée, il existe un raccourci clavier qui vous permet d’obtenir beaucoup plus rapidement un template de base qu’il vous suffira de compléter / modifier en fonction de vos besoins.

Presser simplement les touches ! et TAB de votre clavier. Cela vous donnera déjà le résultat suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Description">
        <title>Document</title>
    </head>
    <body>
        
    </body>
</html>

Il vous suffit de changer la langue du document (de en en fr), de remplacer le mot-clé « Description » dans l’attribut content par votre vraie description et d’ajouter les balises manquantes.

Ressources

Ces ressources sont à consulter impérativement, elles font partie de la matière de cours

• Référence des éléments HTML : Une documentation qui reprend la liste des balises et leur sens, facile, en français issue du MDN Web Docs de Mozilla, une excellente référence ;
• HTML Living Standard : LA spécification officielle du w3c/whatwg pour le langage HTML, c’est elle qui détient la vérité et qui fait loi en cas de doute. Il s’agit d’une documentation plus technique, en anglais, très complète, qui comporte une page par balise où on trouve toutes les informations nécessaires (sens, règles de grammaire, attributs, …). Votre « Précis et Concis » est une version imprimée de ce site ;
• Comment indiquer la langue d’un contenu en HTML ? : Aidez-vous de cette ressource pour savoir où et comment utiliser l’attribut lang dans les différents cas de figure ;
• ISO 639-1 Language Codes : Aidez-vous de cette ressource pour trouver quel est le code de langue à utiliser pour remplir correctement la valeur de l'attribut lang ;
• Un <time> pour chaque chose... : Aidez-vous de cette ressource pour trouver quel est le format de date à utiliser pour remplir correctement la valeur de l'attribut datetime dans la balise time ;
• À quoi servent les balises META ? : Aidez-vous de cette ressource pour correctement baliser les méta-informations à indiquer dans l’en-tête de votre document ;
• La métadonnée description selon OpQuast
• The HTML5 Shiv. Aidez-vous de cette ressource pour télécharger les fichiers nécessaires et installer HTML5 Shiv, qui permet aux anciens navigateurs d’utiliser les nouvelles balises HTML5. N.B. Utilisez la procédure d’installation manuelle(obsolète, plus nécessaire).

---

Code par Myriam Dupont d’après un code de Vincent de Oliveira.