Formation HTML construire une page de base, tutoriel & guide de travaux pratiques en pdf.
Comment construire une page ?
Une page Web n’est que du texte. Ce texte appellé code HTML peut se saisir dans un éditeur de texte des plus simples et des plus pratiques qui soient : le bloc-notes de Windows (je considérerais par ailleurs que vous êtes sous Windows, même si peut de différences seront à constater pour un autre OS).
Pour ouvrir le bloc-notes :
Soit par le raccourci clavier Win+R puis « notepad », soit par Démarrer puis Programmes, Accesoires et enfin Bloc-notes.
Le bloc-notes est un éditeur de texte qui ne tape que ce que vous lui demandez. Pour Microsoft Word, par exemple, lorsque vous voulez mettre un texte en gras, il vous suffit de cliquer sur un bouton. Dans ce cas, il rajoutera du code que vous ne verrez pas. Ici, bloc-notes ne rajoute rien.
Construire une page de base :
Dans le bloc-notes, entrez ce code :
<html>
<head>
<title>The life of my flowers</title>
</head>
<body>
My flowers are beautiful !
</body>
</html>
Puis enregistrez ce fichier dans un répertoire que vous dédirez à votre futur site sous le nom de fichier « index.htm ».
Remarque :
Si vous l’enregistrez simplement avec le nom « index », il vous enregistrera par logique un fichier bloc-notes, en l’occurence « index.txt ». Ajouter .htm permet de préciser qu’il s’agit d’une page internet.
Remarque :
Il est également possible d’utiliser l’extension .html, cela ne fait aucune différence avec .htm. Ceci dit, il est préférable de toujours utiliser la même extension, pour éviter au maximum les erreurs de lien.
Vous pouvez maintenant voir dans votre dossier une page internet appellée « index ». Ouvrez-là avec votre navigateur. Vous constatez que la page se nomme « The life of my flowers » (regardez dans la barre des titres, en haut) et qu’elle affiche « My flowers are beautiful ! ».
Etudions à présent ce code :
Une balise en HTML se referme (presque) toujours :
Si <html> est ouvert, alors </html> le fermera. Le slash (/) permet donc de fermer la balise.
<html> déclare la page HTML, puis viens <head> (en anglais, tête) qui contiendra tout ce qui représente le cerveau de la page. En clair, une page est comme un humain, il y a une tête et un corps. La tête contrôle, et le corps affiche. Tout ce qui se trouvera entre <head> et </head> sera donc du domaine de la tête de la page. Par logique, tout ce qui sera dans le body (en anglais, corps) de la page, entre <body> et </body> sera affiché. Dans le head (donc entre <head> et</head>), on peut remarquer le titre pris entre <title> et </title>, c’est pareil, par logique et avec un minimum d’anglais, on peut en déduire que tout ce qui sera dans le title de la page (donc, entre <title> et </title>) apparaitera dans la barre de titre. Cela fait partie de la tête (dans le head, entre <head> et </head>), ce qui est logique vu que le texte entré ne sera pas affiché directement dans la page.
Télécharger le cours complet
