Tutoriel : créer une page Web avec Thimble

Bonjour à tous!

Aujourd’hui je vous propose un tutoriel de création de page Web en 12 points, d’après un modèle à personnaliser. Nous allons utiliser l’éditeur de code Thimble pour créer et publier une page Web. Il s’agit d’une initiation légère dont l’objectif est de manipuler directement du code HTML pour découvrir le langage Web et les balises.

Ce tutoriel peut vous donner des astuces pour personnaliser un blog WordPress.

Introduction

Il y aura deux sections sur la page :

  • Section vidéo : vidéo et texte d’introduction
  • Section article : texte de présentation d’un article,  lien « lire l’article » et image pour l’illustrer

Créer le projet

1 Remixez le projet

Aller sur la page suivante et cliquer sur « remixer » en haut à droite : https://thimbleprojects.org/ukubi/291894/

Vous venez de copier le modèle dans un nouveau projet, je vous conseille de « créer un compte » pour  sauvegarder et publier votre page :

Nous utiliserons deux fichiers que nous voyons dans la colonne de gauche :

  • index.html : la page Web
  • style.css : le feuille de style (décoration de la page)

2 Trouvez l’idée

Commencez par choisir le sujet de votre choix (une actualité, un artiste, un sport, un animal, une thématique que vous aimez…)

Cherchez une vidéo YouTube et un article en lien avec votre thème

Sélectionnez une image pour illustrer l’article (groupe d’enfants dans le modèle) et une image pour l’arrière-plan (fond bleu et lumières). Préférez des images libres, voici deux exemples de bibliothèques :

Modifier les textes

3 Titre principal

Modifiez le titre principal sur le fichier index.html. Cherchez dans l’éditeur au milieu le titre « Design participatif » et remplacez le par votre titre. Il se trouve entre les balises <h1> et </h1> :

<h1>Design participatif</h1>

4 Titres secondaires

Modifiez les titres des deux sections qui se trouvent entre les balises <h2> et </h2> :

<h2>Vidéo : créativité et pensée design</h2>

<h2>Former des changeurs de monde… à l’école</h2>

5 Paragraphes

Modifiez les paragraphes des deux sections qui se trouve entre les balises <p> et </p>. Le deuxième paragraphe contient une balise <br> qui permet de faire un retour à la ligne et une balise <a> qui correspond au lien vers l’article, ne remplacez que le texte avant la balise <br>!

<p> Cette vidéo du Syn Lab présente la place de la créativité et de nos idées dans la vie de tous les jours</p>

<p> Voici un article extrait du site Hacking Social sur l'approche systémique dans l'apprentissage

6 Lien

Remplacez l’adresse « https://www.hacking-social.com/2015/11/13/former-des-changeurs-de-monde-a-lecole/ » dans la propriété « href » par celle de votre article. Vous pouvez modifier le texte « Lire l’article » qui se trouve entre les balises <a> et </a>.

<a class="lien" href="https://www.hacking-social.com/2015/11/13/former-des-changeurs-de-monde-a-lecole/">Lire l'article</a>

Modifier les médias

7 Intégrer une vidéo

Après avoir choisi une vidéo sur YouTube, cliquez sur « partagez » puis « intégrer » en-dessous de la vidéo. Copiez le code qui se trouve en dessous :

<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/99VWQ6W51PU?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div>

Collez le code en le remplaçant par celui qui se trouve entre les balises <div class="vidéo"> et </div> :

8 Image de l’article

Nous allons enfin remplacer l’image qui illustre l’article par la vôtre.

Cliquez sur le dossier en haut à gauche (à côté de l’intitulé « Fichiers ») et sélectionnez  « envoyer un fichier » :

Supprimez le texte qui se trouve au niveau de la propriété « src » de la balise <img> : « =23086475186_a2a27bba33_h.jpg ». Tapez le signe égal « = » après « src » et sélectionnez votre image dans la liste :

<img class="imagePlein" src="23086475186_a2a27bba33_h.jpg">

Bravo! Vous avez terminé le contenu de votre page. Nous allons maintenant modifier l’apparence de la page.

Modifier les styles de la page

9 Arrière-plan

Envoyez le fichier comme précédemment pour ajouter la deuxième image d’arrière-plan (cliquer sur le dossier en haut à gauche).

Remplacez le nom de l’image « vldaxyyxjvw-sebastian-muller » par celui de votre image dans le fichier style.css :

body {background: #6B6080 url(vldaxyyxjvw-sebastian-muller.jpg) 0 0 no-repeat;

10 Couleurs des textes

Nous allons modifié la couleur des titres secondaires (titre vert sur le modèle). Pour cela nous utilisons une astuce de Thimble pour choisir une nuance en accord avec l’arrière-plan. Cliquez sur l’image dans la colonne de gauche qui correspond à votre arrière-plan. Copiez le code couleur de votre choix, par-exemple « 6B3867 », et copiez le code dans le fichier style.css à la place de celui qui se trouve au niveau de la balise h2 :

h2{color:#6BC88F;}

Continuons en modifiant la couleur du lien, remplacez le code couleur « 39699B » qui se trouve au niveau de « .lien » par le code de votre choix :

.lien {background: #39699B;

Vous pouvez faire des tests et modifier tous les codes couleurs que vous souhaitez dans le fichier style.css.

11 Polices d’écriture

Nous allons terminé en changeant les polices d’écriture de la page.

Rendez-vous sur Google Fonts https://fonts.google.com/ pour choisir deux polices d’écriture. Sélectionnez chaque police en cliquant sur le symbol plus « + » puis cliquez sur « 2 families selected » en bas de la page. Nous allons importé le lien qui chargera les polices : sélectionnez « @import », copiez le code qui se trouve entre les balises <style> et </style> et collez le au début du fichier style.css :

@import url('https://fonts.googleapis.com/css?family=Open+sans|Sansita');

Nous allons modifié la police de la page : copiez la première police qui est dans la section « Specify in CSS » de la page Google Fonts, et remplacez le code de la balise <body> dans le fichier style.css :

body {font-family: 'Open Sans', serif;

Copiez la deuxième police dans Google Fonts et remplacez le code de la balise <h1> dans le fichier style.css :

h1 {font-family: 'Sansita', serif;

Dernière étape

12 Publier la page

Modifiez le titre qui se trouve en haut de la page index.html entre les balises <title> et </title> (celui-ci est important, il est visible dans l’onglet en haut du navigateur) :

<title>Ukubi - modèle article</title>

Modifiez le crédit en bas de page par votre nom :

<footer>2017 © Ukubi</footer>

Cliquez sur le bouton « Publier » en haut à droite, puis sur « publier » et le lien en bleu.

Vous pouvez maintenant partager votre lien, voici la nouvelle version de notre exemple : https://thimbleprojects.org/ukubi/291897/

Vous venez de découvrir le principe des balises qui est la base du langage HTML. Comme vous l’avez vu une balise permet de contenir un texte (le désigner comme un titre, un paragraphe, un lien…) et le décorer, par exemple un titre secondaire est contenu dans la balise <h2> que l’on peut modifier dans la feuille de style (couleur, police, …). Il existe un ensemble de propriétés pour mettre en page un site Web, connaitre les balises de base permet d’avoir la main sur le code.

Pour aller plus loin :

N’hésitez pas à laisser un commentaire pour donner votre retour sur le tutoriel ou poser des questions!

 

 

 

Partager l'article!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *