Créer une page web en HTML5

Créer une page web en HTML5 1152 Vues
Favoris

Le web repose sur du code informatique, mais vous débutants, vous souhaitez créer un site internet mais vous ne connaissez pas la base de tout ça. Pas de panique ! Dans ce petit tutoriel, je vais vous apprendre à créer votre première page web en HTML 5. Mais attention, cela ne suffit pas pour créer un site web entier. Vous aurez besoin de CSS pour styliser votre page etc.

Comme dit plus haut, l’HTML 5 ne permet pas de faire une mise en page. Voici un petit exemple d’une page avec du CSS et sans CSS.

Nous allons nous passer du CSS dans ce tutoriel car ce n’est pas le sujet principal. J’y reviendrai plus tard avec un tutoriel ou si vous préférez , allez voir sur le site OpenClassRoom. Dans ce tutoriel, je vais vous présenter la toute dernière version de la balise HTML : l’HTML 5. Cette version est plus simple et, en plus, compatible à 100% avec les smartphones, tablettes etc.

L'HTML 5 c’est quoi ?

Le HTML5 est le langage de base pour créer un site internet. Le HTML5 sert à structurer votre contenu. Même s’il est relativement simple, vous en aurez toujours besoin. Donc, que vous vous lanciez dans un petit site personnel ou dans un très gros projet (un peu risqué sans trop de connaissance…), vous devrez utilisez du HTML5.

Ce dont vous avez besoin

Pour ce tutoriel, vous aurez besoin d’un ordinateur (logique), d’un éditeur de texte comme Bloc-note par Windows ou encore Notepad ++ par Don Ho (recommandé). Il vous faudra aussi un navigateur comme Google Chrome, Internet Explorer ou autres afin de pré-visualiser votre page HTML 5.

Pourquoi utiliser Notepad++ ?

C’est très simple, ce logiciel est spécialement conçu pour fabriquer du HTML ou encore du code CSS (quand vous en ferai). Notepad++ offre aussi une qualité d’affichage non négligeable qui vous facilitera la tâche. C’est pour cela que, dans ce tutoriel, je vais principalement utiliser ce logiciel. Mais pas de panique si vous ne souhaitez pas l’utiliser(ce que je peux comprendre), les opérations sont identiques avec le logiciel natif de Windows « Bloc-note ».

Passons aux choses sérieuses

Vous allez donc ouvrir votre logiciel de texte à savoir Bloc-note ou Notepad++ (possible de le faire avec d’autres logiciels mais, je ne les connais pas ..)

Puis une fois votre logiciel ouvert, copier ce petit code d’exemple à l’intérieur :

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Votre page (le nom de l'onglet)</title>
<link rel="stylesheet" href="style.css">
</head>
<body> Vous venez de faire votre première HTML5 grâce au tutoriel d'Acrodevice ! </body>
</html>

Une fois fait, cliquez sur « fichier » puis « enregistrer sous » sur bloc-notes puis n’oubliez pas de renommer votre fichier en « index.html » en sélectionnant le type de fichier en « Tous les fichiers » et de mettre l’encodage sous « utf-8 »

Sur Notepad++ l’opération est plus facile.

Cliquez sur « Fichier » ensuite sur « enregistrez sous ». Choisissez ensuite le chemin d’enregistrement par exemple « bureau ». Ensuite modifiez le nom du fichier en "index" et choisissez dans le menu déroulant « Hyper Text Markup Language File », soit HTML.

Et pour finir, rendez-vous à l’emplacement de votre fichier puis, double cliquez dessus et là votre page web codée en HTML5 va s’ouvrir dans votre navigateur par défaut. Pour moi ce sera Google Chrome (fortement recommandé).

Et voilà ! Vous venez de faire votre première page en HTML. Maintenant je vous l’accorde, la page n’est pas très belle mais, il faut savoir que de HTML est du texte brut. Pour en faire un design, créer un fichier style.css, éditez-le avec votre code CSS (si vous ne savez pas non plus comment faire je vous propose de vous rendre sur OpenClassRoom) puis mettez votre fichier « index.hml » puis votre fichier « style.css » dedans puis rouvrez votre page web.