• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/10/19

Publiez votre site avec Thimble

Log in or subscribe for free to enjoy all this course has to offer!

Ça y est, vous venez de créer votre première page web ! Tout ça est encore très rudimentaire, et en plus, vous seul avez accès à votre page, puisqu’elle n’existe pour le moment que sur votre ordinateur.

Pour aller plus loin dans l’élaboration de votre site web, nous allons utiliser un outil de Mozilla : Thimble.

Créez votre compte sur Thimble

Première étape : rendez-vous sur https://thimble.mozilla.org/fr/. Pour créer votre compte, cliquez sur “Créer un compte” en haut à droite de la page :

Une fenêtre s’ouvre, vous permettant de choisir un nom d’utilisateur, un mot de passe et de renseigner votre adresse e-mail :

Cliquez sur “Sign Up” et voilà : vous avez un compte sur Thimble utilisable immédiatement !

Votre premier projet avec Thimble

Pour créer un projet, il vous suffit de cliquer, en haut à droite de la fenêtre, sur votre nom d’utilisateur ; un menu déroulant s’affiche, cliquez sur “Nouveau projet”.

Pour un petit survol commenté de l’interface, c’est par ici :

À ce stade, vous connaissez les balises h1, h2, h3, etc., ainsi que la balise em. Je vous laisse donc jouer avec les balises p et strong déjà présentes dans le projet de base : amusez-vous à créer une petite page web avec Thimble !:)

Créez un “site dont vous êtes le héros”

Maintenant que vous avez vu le fonctionnement de Thimble, je vous propose de vous lancer dans la création d’un petit site-jeu : le site web que vous allez créer est un site “dont vous êtes le héros”, à l’instar des livres dont vous êtes le héros.

Pour faire ce site, vous aurez besoin de plusieurs éléments :

  • créer des liens hypertextes pour naviguer de page en page

  • ajouter des images

Ajoutez des liens vers d’autres pages

La balise html permettant d’ajouter un lien hypertexte, c’est la balise <a>, comme “ancre”. C’est en fait une balise qui indique qu’à cet endroit, il y a une ancre dans la page à laquelle on va pouvoir se raccrocher, c’est-à-dire faire un lien vers celle-ci.

Mais cette balise ne s’utilise pas seule, comme les précédentes : elle aura un attribut (ou plusieurs dans l’absolu, mais nous n’en verrons qu’un seul dans ce cours). Cet attribut, c’est href, qui indique vers quel endroit on veut renvoyer lorsqu’on clique sur le lien.

Un bon exemple valant mieux qu’un long discours, voici en vidéo comment créer un lien :

Ajoutez une image

Ça y est, vous avez de quoi faire un site dont vous êtes le héros, avec des liens qui vont dans tous les sens !

Pour un site plus agréable, ajoutez des images ! La balise à utiliser pour cela, c’est <img>, comme “image”. Mais contrairement à ce que je vous ai montré jusqu’à présent, la balise <img> n’a pas besoin de balise fermante </img>. Elle se ferme simplement en ajoutant “/” à la fin, comme ceci : <img />

Besoin d’un petit coup de main en vidéo ? C’est par ici :

Vous devriez maintenant disposer de tous les outils pour créer un site amusant dont vous êtes le héros : à vous de coder !

Publiez votre site web

Une fois votre site terminé, publiez-le en cliquant sur le bouton... 

et à nouveau sur “Publier” après avoir décrit votre projet :

Cliquez sur le lien Thimble : votre projet est sur la toile, visible de toutes et tous !

 

En résumé

  • Un site web, c’est finalement un réseau de pages connectées les unes aux autres par des liens hypertextes.

  • La balise <a> comme “ancre” permet de créer des liens ; elle a besoin d’un attribut pour indiquer vers quelle page renvoyer lorsqu’on clique sur le lien et s’écrit de la manière suivante :

    <a href=”page2.html”>Lien vers la deuxième page</a>.

  • La balise <img> permet de mettre une image. Comme <a>, elle a besoin d’au moins un attribut : src, pour indiquer quelle image doit être affichée. Contrairement aux autres balises vues jusqu’ici, elle s’écrit : <img src=”mon-image.jpg” />, il n’y a donc pas de balise </img>.

Example of certificate of achievement
Example of certificate of achievement