Il y a toujours un début à tout et je vous propose ici de commencer à apprendre à coder du HTML5. A vos marques!
ETAPE 1 : LA PREPARATION (comme le dit si bien Florent Manaudou)
Avant de commencer à foncer tête baisser dans le code, nous allons faire un listing de tous les outils (gratuits) nécessaires à la création d’une page HTML :
-
- Un éditeur (IDE) : Notepad++ qui est simple d’utilisation mais un peu limité ou pour ceux qui voudront aller plus loin et coder dans différents langages (HTML, CSS, JavaScript, PHP), je vous conseille SublimText. Tous deux sont gratuits 🙂
-
- Un navigateur : Le navigateur permet d’interpréter des fichiers HTML et d’en afficher le contenu tel que vous le voyez sur tous les sites Internet. Vous pouvez télécharger gratuitement Google Chrome (celui que j’utilise), Firefox, Internet Explorer (Ennemi juré de tous les développeurs FRONTEND, il est toujours à la traîne et mange beaucoup de temps pour que les sites soient compatibles, même si des efforts ont été produits par Microsoft ces derniers temps), Opéra, Safari (Apple).
Vous allez tout d’abord créer un dossier sur votre bureau ou la racine de votre disque dur, appelez le www par exemple…
Dans ce dossier, vous allez créer un fichier texte que vous nommerez index. Il faut ensuite changer l’extension de ce fichier par .html, ce qui donne un fichier qui se nomme index.html. Votre ordinateur va sûrement vous demander si vous êtes d’accord pour changer l’extension, cliquez sur oui.
Pour coder ce fichier il vous faut l’ouvrir avec l’éditeur que vous aurez préalablement téléchargé et installé.
ETAPE 2 : LE CODE!
Chaque page HTML commence parce que l’on appel la balise DOCTYPE. Elle permet d’indiquer au navigateur quelle version de HTML sera utilisé dans la page. Depuis l’avènement du HTML5, celle-ci a été fort heureusement ultra simplifiée :
<!DOCTYPE html>
Avant la balise DOCTYPE pouvait ressembler à ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Il y a avait plusieurs versions en plus!!! Merci le HTML5!
Nous allons ensuite indiquer au navigateur quel langage et quelle langue sera utilisé sur la page de notre site Internet. Ici , vous l’aurez deviné, nous utiliserons du HTML et le contenu sera en langue Française. Cela se fait comme suit :
<html lang="fr-FR"> </html>
Entre les deux balises HTML, nous allons ajouter d’autres balises dont la première est la balise head. Elle permet d’envoyer d’autres informations au navigateur, par exemple le titre de la page. Ce titre sera affiché sur l’onglet du navigateur de vos internautes. Google et autres moteurs de recherche se baseront sur ce titre pour créer les liens dans leurs pages de résultats de recherche. J’ai toutefois pu constater ces derniers temps que Google ne se base plus uniquement sur cette balise. Elle est toutefois importante pour l’optimisation de votre référencement naturel.
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> </html>
Important, lors de mes interventions à l’IIM, j’ai souvent constaté que mes élèves ajoutaient du contenu text, image entre les balises head. C’est à proscrire!!! Ces balises permettent uniquement d’envoyer des informations au navigateur (nous en verrons dans un prochain tuto), rien d’autre.
Toutes les informations visibles sur votre page vont se trouver dans la balise suivante, la balise body. C’est donc ici qu’est le corp de notre page et que l’on y saisi le contenu qui sera visité par nos internautes.
<!DOCTYPE html> <html lang="fr-FR"> <head> <title>Titre de ma page</title> </head> <body> COUCOU C'EST MOI!!! JE SUIS TA PREMIERE PAGE!!! YOOPI!!!! </body> </html>
Il ne vous suffit plus qu’à enregistrer votre fichier et à double-cliquer dessus. Il devra alors s’ouvrir sous votre navigateur préféré et afficher ceci :
!
Ce fut court mais intense! Merci de votre attention, vos commentaires et à très vite pour la suite 🙂
Publié le : 21/07/2014
