Activité 2 : Apprendre les rudiments du HTML/CSS avec Mozilla

La fondation Mozilla est un organisme à but non lucratif, qui œuvre au développement d’internet. C’est elle qui développe par exemple le navigateur web Firefox.

Mozilla publie aussi une documentation de référence des outils du web, et notamment des langages informatiques HTML et CSS qui servent à afficher une page web.

On utilisera pour apprendre les rudiments du HTML et du CSS :

• Le guide d’apprentissage de Mozilla.
• Glich ou jsfiddle un éditeur de code en ligne .

Il est possible d’utiliser Glich de manière anonyme, sans créer de compte. Créer un compte sur Glich vous permettra cependant de retrouver votre travail entre deux sessions. (Il n’est pas obligatoire d’utiliser une adresse email valide pour cela. Mais avec une fausse adresse mail, du type quelquechose@example.com, il ne sera pas possible de retrouver un mot de passe perdu).

Pour commencer, suivre ce tutoriel :

tutoriel HTML avec Mozilla

pour débuter nous pouvons utiliser Glitch ou jsfiddle

voici un autre tutoriel , mais en anglais.

W3Schools est un site Web destiné à l’apprentissage en ligne des technologies Web. Son contenu inclut des didacticiels et des références relatives à HTML, CSS, JavaScript, JSON, PHP, AngularJS, SQL, Bootstrap, Node.js, jQuery, XQuery, AJAX et XML. Il reçoit plus de 10 millions de visiteurs uniques chaque mois.

tutoriel HTML5 w3schools

Activité 3 : Créer une première page web

Installation des fichier

Télécharger le projet projet-batman.zip. Extraire l’archive dans un nouveau répertoire sur votre session.

Vous aller éditer les fichiers html pour créer un mini site web de deux pages. Pour cela, il vous faut un éditeur. Prendre par exemple Notepad++ qui est installé au lycée.

Travail à faire

À vous de jouer, vous aller éditer les fichiers batman.html et bruce-wayne.html afin d’aboutir au résultat suivant (cliquer sur les images pour agrandir) :

Page batman.html	Page bruce-wayne.html

On doit pourvoir passer d’une page à l’autre en cliquant soit sur le texte (page batman.html) soit sur l’image (page bruce-wayne.html).

Les images sont dans le répertoire img créé lors de la décompression de l’archive zip.

Pour information les deux images sont sous licence Creative Common (l’image de batman a été créée par l’utilisateur BoggieNightBoy sur deviantart.com ; celle de Christian Bale a été déposée sur wikipedia.org par l’utilisateur Siebbi).

Lorsque tout fonctionne parfaitement, vérifier que votre code html ne comporte pas d’erreurs sur le validateur html de la W3C.

Appeler le professeur en cas de problème.