Démarrage - Créer un site en HTML (1/5)

3 minutes pour coder - Créer un site en HTML

Chargement de la playlist en cours...

Publié le - Mis à jour le 08-11-2017

Depuis le temps que tu navigues sur internet, tu as dû voir des centaines, voire des milliers de site internet !

Sais-tu comment  créer un site internet  ?

Parce c’est exactement ce que l’on va faire dans les 5 prochaines vidéos.

C’est bientôt l’anniversaire d’une amie qui adore créer des sites internet et qui est super forte. Pour lui souhaiter son anniversaire je me suis dit que j’allais lui coder une page en HTML.

Tu sais, le langage pour créer des sites web ! Et puis comme ça peut-être qu’elle pourra me donner quelques conseils pour m’améliorer.

En faisant ce site internet on va apprendre à écrire du texte en HTML, à mettre des images et à ajouter des liens. Une fois que tu sauras comment faire tout ça, tu pourras créer des sites internet sur les sujets que tu veux. Mais avant de continuer je te propose de regarder les tutos “hack ta page” pour savoir comment avoir accès et modifier le code de n’importe quel site internet

http://education.francetv.fr/matiere/education-au-numerique/ce1/video/le-code-source-transformer-une-page-internet-1-4

Si c'est déjà fait on peut commencer à coder une page en HTML.

 

Comme c’est la première fois que l’on va coder en HTML on va partir sur un exemple assez simple.

Mais d’abord il faut les bons outils !

On va télécharger un petit logiciel qui s'appelle Sublime text . Pour trouver ce logiciel il faut aller sur le site www.sublimetext.com puis cliquer sur télécharger. (Download)

L’avantage de ce logiciel c’est qu’il va colorer notre texte pour le rendre plus facile à comprendre et donc à écrire.

Si tu suis ce tutoriel sur un ordinateur à l’école ou que tu ne peux pas télécharger de logiciel, pas de problème tu peux tout faire sur bloc note si tu utilises un ordinateur windows ou sur textedit si tu utilises un Mac. C’est un peu plus compliqué mais pas beaucoup plus. Une fois que le logiciel est installé tu peux l’ouvrir et normalement tu arrives sur une page complètement vide.

C’est normal, on va écrire uniquement en code. Des lettres, des chiffres et des symboles alors pas besoin d’un logiciel très compliqué.

La première chose à faire quand on écrit un code en HTML c’est d’indiquer à l’ordinateur qu’on va utiliser ce langage. Pour ça on écrit :

<!DOCTYPE html>

J’écris ça dans la première ligne de mon document.

Ensuite on va ajouter notre première balise :

<html>

 

</html>

 

Une balise ça définit une zone dans laquelle on va pouvoir ajouter du contenu. C’est dans cette balise par exemple que l’on va mettre tout notre code HTML. Ensuite à l’intérieur de la balise <html> on va ajouter deux autres balises :

<head> </head>

Head en anglais ca veut dire tête. Dans cette balise on va mettre du contenu qui va être lu par le navigateur internet mais qui ne va pas être affiché directement sur la page.  

<body> </body>

Body ça veut dire corps en francais. C’est dans cette balise que l’on va mettre tout ce qui va être vraiment affiché

<meta charset="utf-8" />

<title>Bon anniversaire Chloé</title>

On va commencer par ajouter ce bout de code dans la balise Head. La première ligne sert simplement à ce que l’affichage du texte se fasse correctement, la deuxième sert à donner un titre à notre page html. *

Si tu ne veux pas les taper avec ton clavier, ces morceaux de code sont dans la description sous la vidéo

Bon on a avancé un petit peu. On va éviter de perdre ce que l’on a fait donc on va l’enregistrer.

Tout est en anglais donc je vous dis sur quoi cliquer en même temps que je vous donne la traduction. Pour enregistrer, on clique sur File pour Fichier , ensuite Save as pour Enregistrer-sous et on arrive sur cette petite fenêtre.

Maintenant conseil d’ami ! Les noms un peu débiles en “aaaa” ou “lololilol” c’est bien mais si vous voulez ne pas vous perdre plus tard il vaut mieux prendre l’habitude de bien nommer ses fichiers.

Celui-là je vais le placer dans mes documents et l'appeler Tuto1.html. T-U-T-O-1-.-H-T-M-L. Encore une fois c’est très important de bien le nommer pour plus tard.

Bon il est temps de commencer à remplir un peu notre code. Donc garde ton code pas trop loin parce qu’on continue dans la prochaine vidéo.

C’était Micode, Salut !

Code à insérer 1

<!DOCTYPE html>

 

Code à insérer 2

<meta charset="utf-8" />

<title>Bon anniversaire Chloé</title>

 

Le code en entier.

<!DOCTYPE html>

<html>

<head>

            <meta charset="utf-8">

     <title>Bon anniversaire Chloé</title>

 </head>

<body>

 </body>

</html>

Réalisateur : Valentin Levelli

Producteur : Coyote Conseil

Auteur : Arnaud Gantier et MICODE

Diffusion : 2017

Recommandations