Créez votre première page web en HTML
Créer sa première page web, c’est pas si compliqué. On commence par poser quelques briques de HTML, et puis on ajoute du CSS, et enfin du JavaScript.
Et ça tombe bien puisque le HTML, c’est le langage de programmation le plus simple qui existe.
Commencez par lire un peu de cours
- Formez-vous aux bases avec cette Introduction au langage HTML
- Apprenez ce qu’est une page web
- Enfin, comprenez en détail ce qu’est une balise HTML
Si vous travaillez à plusieurs, n’hésitez pas à vous entre-aider et à partager vos astuces. Le monde du développement, c’est aussi le partage des connaissances.
Les logiciels que l’on va utiliser
Installez l’éditeur de code suivant : https://code.visualstudio.com/download
- Visual Studio Code
si vous maitrisez déjà un autre éditeur de code, inutile d’installer VS Code - Firefox ou Chrome (Safari est à éviter pour le développement web car il ne possède pas de
console de débogage)
Préparation de votre environnement web
- Créez un nouveau dossier sur votre ordinateur, appelez-le « Environnement Web »
- Dans ce dossier : créez un fichier de notes (Word…) dans lequel vous prendrez des notes sur le cours, ou noterez vos questions qui concernent le support de cours.
- Créez un nouveau dossier «
bac-a-sable» dans lequel vous ferez vos premiers essais en
code. Respectez bien la nomenclature : minuscules, tirets.
Nous reviendrons sur ces règles.
Familiarisez-vous avec l’éditeur de code
Un éditeur de code est un logiciel dans lequel on ne peut taper que du texte et enregistrer le résultat dans un fichier dont vous devrez choisir l’extension.
Ouvrez Visual Studio Code
- File > Open folder
- Trouvez le dossier «
bac-a-sable» et ouvrez-le.
Normalement, il doit maintenant apparaître dans la colonne de gauche - Créez un nouveau fichier et appelez le «
accueil.html» - N’hésitez pas à vous entre-aider ou à chercher des tutos
Attention : ne confondez pas fichier et dossier ! (file et folder/directory en anglais)
Note sur les conventions de nommage
Dans toute la suite du module, lorsque vous créerez des fichiers et des dossiers, vous l
nommerez en respectant cette convention :
Les caractères autorisés sont :
- les minuscules
- les chiffres de 0 à 9
- les tirets (tiret du 6) —-
Un nom de fichier ne doit pas commencer par un chiffre ou un tiret.
Les caractères interdits sont :
TOUT LE RESTE… et en particulier :
- les majuscules
- les espaces
- les underscores (tiret du 8) __
- tous les caractères spéciaux (+*=#~…)
Bien :
accueil.htmlimage44-singe.jpgpremier-projet
Pas bien :
Accueil site.htmlimage_panda mignon.jpgPremier_projet
Premier fichier de code
Vous allez créer la structure de votre première page web avec le raccourci de VS Code
Dans l’onglet accueil.html :
- Tapez un point d’exclamation
! - Une liste d’autocomplétion apparaît (l’autocomplétion, c’est quand une liste de proposition apparaît sous les caractères que vous avez tapés)
- Appuyez sur la touche TAB pour valider la suggestion
- Une liste de balise HTML apparaît
ça commence pardoctype et html, head, ça se termine parbody, html
Un peu de théorie
- Lisez le cours sur les balises
- Essayez de comprendre le rôle des premières balises que l’éditeur a généré pour vous
- Cherchez sur Internet le rôle de la balise
meta charsetet celui de la balisetitle
Afficher une page web
- Entre les balises ouvrantes et fermantes de
body, entraînez vous à taper des balises de texte
(titre, paragraphe, liste à puces…) et du contenu à l’intérieur des balises en question.
– Vous pouvez utiliser un générateur de Lorem ipsum : https://www.faux-texte.com/
– Vous pouvez générer du Lorem ipsum en tapant « lorem » puis touche TAB - Apprenez à bien maîtriser la saisie via l’autocomplétion
Essayez de saisir des attributs dans vos balises. Peut importe lesquels, l’important est de
bien maîtriser les syntaxes du HTML et les touches de votre clavier. - Sauvegarder le fichier (CTRL + S sur Windows / COMMAND + S sur Mac)
- Retournez dans l’explorateur de fichiers (Explorateur Windows ou Finder sur Mac)
- Double cliquez sur le fichier
accueil.html. L’extension .html va obliger votre OS à ouvrir le
fichier dans un navigateur. - Le rendu de votre page web s’affiche dans le navigateur
- Si le navigateur est Internet Explorer ou Safari par défaut, changez ce réglage pour mettre
Firefox, Chrome ou Brave.
Le workflow du développeur
Comment construire un site brique par brique ? En essayant si possible d’aller vite !
- Vous ajoutez une balise ou vous corrigez du code existant dans votre éditeur
- Vous sauvegardez votre fichier en utilisant le raccourci clavier (CTRL+S/Command+S)
- Vous retournez sur votre navigateur en utilisant si possible le raccourci Windows ou Mac qui permet de passer d’une fenêtre à l’autre
- Vous actualisez la page (F5 sur Windows / Command + R sur Mac)
- Vous constatez le résultat
- Retour à l’étape 1
Il existe aussi le serveur GoLive sur VSCode qui permet d’actualiser automatiquement à chaque sauvegarde du code.
Vous devez absolument vous forcer à utiliser les raccourcis clavier.
