HTML est le langage informatique que l’on utilise pour coder les pages des sites que l’on trouve sur le réseau internet.

Etape 1 : Se connecter à l’interface de programmation et la découvrir
  1. Clique sur cette adresse https://repl.it pour te connecter au site repl.it
    –
  2. Clique maintenant sur le bouton ‘start coding’ qui se présente comme ceci :

    –
  3. Dans la liste des langages informatiques, choisis HTML, CSS, JS

    –
  4. Puis enfin, clique sur le bouton ‘Create Repl’ qui se présente comme ceci :

    –
  5. Regardons maintenant la fenêtre qui s’affiche à l’écran :
    2 parties vont nous intéresser :
    – Celle où on va taper le code
    – le bouton permettant de visualiser notre page

–

Etape 2 : Ajoutons un titre à notre page
  1. Pour commencer, regardons une partie du code qui est déjà présent sur la page :

    Ce titre est encadré par ce qu’on appelle des balises :
    – la balise <title> au début
    – la balise </title> à la fin
    Nous devons donc mettre notre titre entre ces deux balises, à la place du texte repl.it
    –
  2. Remplace le titre de la page par ‘La superbe page de …’ en mettant ton prénom.
    Par exemple : <title>La superbe page de Toto</title>
    –
  3. Clique sur le bouton à droite pour visualiser la page.
    Regarde le nom de la page dans l’onglet de ton navigateur !
    Cool, non ? 🙂
    –
  4. La page est vide et nous allons ajouter du contenu

–

Etape 3 : Ajoutons un gros titre directement dans notre page
  1. Pour commencer, regardons une partie du code qui est déjà présent sur la page :

    Tout ce que nous allons ajouter à cette page devra se situer entre les balises <body> et </body>, après la ligne n°10
    –
  2. Place le curseur à la fin de la ligne n°10, puis appuyez sur la touche ‘Entrée’ pour insérer une ligne
    –
  3. Sur la ligne n°11 qui est vide, recopie ou copie-colle la ligne ci dessous :
    <h1> Ma première page internet ! </h1>
    –
  4. Tu dois obtenir ceci :

    –
  5. Clique sur le bouton à droite pour visualiser la page.
    Regarde ta page 🙂
    –
  6. <h1> et </h1> sont des balises permettant de créer des titres.
    Dans les balises, essaye de remplacer h1 par h2, h3, h4, h5 ou h6 et regarde le résultats :
    Ton titre doit être de plus en plus petit !
    –
  7. Maintenant, nous allons ajouter du contenu à la page

–

Etape 4 : Ajoutons des paragraphes dans la page, en dessous du gros titre
  1. Clique sur cette adresse https://www.editpad.org pour utiliser un éditeur de texte en ligne.
    Il va s’ouvrir dans un nouvel onglet.
    –
  2. Dans la fenêtre, raconte en deux ou trois paragraphes présente toi et explique comment tu as passé les derniers mois d’école à distance :
    – comment tu t’es organisé(e) à la maison
    – ce que tu as aimé
    – ce que tu n’as pas aimé
    – les choses les plus intéressantes que tu as appris dans n’importe quelle matière
    –
  3. Votre texte doit ressembler à ceci :

    Dans le texte ci-dessus : Il y a 4 paragraphes.
    –
  4. Une fois votre texte terminé, retournez à votre code et placez le curseur à la fin de la ligne n°11 puis appuyez sur ‘Entrée’ pour insérer une ligne vide.
    –
  5. Copiez-collez votre texte dans la ligne vide. Vous devez obtenir ceci :

    –
  6. Clique sur le bouton à droite pour visualiser la page.
    Regarde ta page 🙁
    Malheur, tous les paragraphes ont disparus et la mise en page est vraiment moche…
    –
  7. Le navigateur a besoin d’aide ! Pour cela, tu dois encadrer chaque paragraphe entre les balises <p> et </p>.
    Par exemple, pour les deux premiers paragraphes :

    –
  8. Procède de même pour tous les paragraphes de ton texte, puis visualise ta page.
    C’est mieux, non ?
    –
  9. Dernière chose : pour passer à la ligne suivante au milieu d’un paragraphe, il suffit d’ajouter le code <br/> à l’endroit où on veut le faire.
    Par exemple :

    La phrase ‘J’aime beaucoup le chocolat et les voyages.’ sera placée en dessous de la phrase précédente.

–

Etape 5 : Ajoutons une image
  1. Et si on ajoutait le petit robot du site de la classe sur notre page ?

    –
  2. Tout en bas de ton texte, après la dernière balise </p>, ajoute la ligne suivante :
    <img src= »https://lesitedelaclasse.fr/wp-content/uploads/2016/07/LogoLDD.gif »>
    –
  3. Visualise la page, tu dois voir le petit robot avec les yeux qui tournent 🙂
    Si ce n’est pas le cas, c’est que tu as fait une erreur dans les lignes de code.
    Vérifie !
    –
  4. Maintenant, nous allons voir comment insérer n’importe quelle image dans ta page.
    –
  5. Clique sur cette adresse https://www.casimages.com pour aller sur un site qui permet d’héberger des images sur internet.
    Il va s’ouvrir dans un nouvel onglet.
    –
  6. Choisis une image qui est sur ton ordinateur et fais la glisser dans la zone ‘Héberger une image – Multiupload’ du site.
    Elle se présente comme ceci :

    –
  7. Une fois que tu as déposé ton image, clique sur le bouton ‘Envoyer mes images’ du site.
    Il se présente comme ceci :

    –
  8. Regarde la zone qui s’appelle ‘HTML code – Blog & site…’
    Puis copie entièrement le code de la fenêtre ‘Grande’.

    –
  9. Colle le code tout en bas de ton code HTML, juste au dessus de la balise </body>
    –
  10. Voilà, ton image est désormais sur ta page ! 🙂