Contrairement à la plupart des langages de programmation, comme C ou PHP, par exemple, le html ne nécessite
l'installation - parfois assez ardue pour le débutant - d' aucun outil spécial, compilateur ou autre ...
On utilise simplement le navigateur avec lequel vous circulez sur internet, et qui vous a donc conduit sur ce site.
Pour tout ordinateur équipé en Microsoft Windows, il s'agit du navigateur Internet explorer qui exécutera donc tous vos programmes html. Qu'ils soient récupérés sur internet, ou bien créés en local sur vote propre machine.
Pour écrire le code, on se servira tout simplement du Bloc-notes ( en anglais notepad) de Windows.
Il s'obtient, à partir du bureau, par :
démarrer ==> programmes ==> accessoires ==> Bloc-notes
Avant de pouvoir commencer il faut bien sûr créer un dossier pour recevoir vos programmes. Vous pouvez le nommer comme vous voulez, et le situer où vous voulez. Dans notre exemple, afin de faire au plus simple, nous allons nommer ce dossier
" programation" et l'intaller directement en C, soit à l'adresse C:\programmation. Pour les débutants débutants cela signifie qu'il leur faut ouvrir leur explorateur Windows ( ou navigation en cours) sur C. Adresse indiquée : C:\, la lettre [C:] y étant en surbrillance bleue, cliquer "Fichier" en haut à gauche, immédiatement dessous "Nouveau", et en laissant le curseur sur nouveau, apparaît à droite, "dossier" sur lequel on clique.
En bas à droite de la fenêtre, en dernier,apparaît un "nouveau dossier", taper dessus "programmation", ou ce que vous voudrez. Puis taper "Entrée".
Votre dossier est créé.
Premier programme :
1 - Ouvrir le Bloc-notes de Windows pa r démarrer ==> programmes ==> Bloc-notes
2 - Créer les balise html sur le bloc note :
Tout programme html , s'ouvre par l'indication pour le navigateur du langage de programmation que l'on va employer. On commencera donc impérativement notre programme par la balise :
< html >
attention à ne laisser aucun espace entre les guillements et les lettres html.
Le guillemet d'ouverture " < " se trouve sur la 2ème touche du clavier en partant de la gauche de la deuxième ligne en partant du bas. Le guillemet de fermeture " > " s'obtient lui par la même touche mais en actionnant en même temps la touche majuscule.
A la fin du programme on indiquera au navigateur cette fin par une balise de fermeture qui s'obtient en plaçant un slashes : / barre oblique se trouvant juste au-dessus du 8 sur le pavé numérique du clavier. On finira donc par la balise :
< /html >
attention à ne laisser aucun espace vide entre les guillements le slashes / et les lettres html.
Vous avez donc tapé sur votre Bloc-notes exactement le code suivant :
< html >
< /html >
voici ce code
3 - Créer le cadre du programme :
Un programme html est exactement comme un homme : Il a une tête - en anglais "head" qui repose sur un corps, en anglais "body".
Ces deux éléments se traduisent en langage html par les balises < head > & < body >
Une obligation en programmation étant de fermer toujours ce que l'on a ouvert pour indiquer au navigateur la fin du programme ou de la fonction, deux balises de fermetures correspondent donc aux deux balises < head > & < body > :
à la fin du code inséré en head on ferme par < /head >
de même à la fin du body on fermera par : < /body >
Le cadre de programme html est maintenant achevé - il sera toujours le même quel que soit le programme -.
Votre Bloc-notes présente donc exactement le code suivant :
[ attention à ne laisser aucun espace vide entre les guillements le slashes / et les lettres html ]
< html >
< head >
< /head >
< body >
< /body >
< /html >
Voici comment doit ce présenter ce code :
4 - Enregistre ce fichier sous extension html :
En haut à gauche du Bloc-notes, un clic sur "Fichier", puis clic sur "Enregistrer sous".
Dans la fenêtre "enregistrer sous" qui apparaît, indiquer l'adresse du fichier "programmation" que nous avons créé plus haut, et dans lequel nous allons enregistrer notre programme html.
Ainsi à "Dans" en utilisant la petite flèche à gauche nous choisissons "[C:]" dans le menu déroulant Puis au-dessous double clic sur le dossier "programmation" que nous avons créé. Apparaît donc un espace blanc, puique l'on y a encore rien enregistré.
Admettons que nous appellions notre programme tout simplement "programme", ou tout autre nom qui vous plaira, cela n' aucune importance. par contre il est obligatoire que le nom du fichier se termine exactement par l'extension .html Vous devez donc porter à l'avant-dernière ligne en-bas de la fenêtre "enregister sous" à "Nom" :
programme.html
( vous pouvez remplacer programme par un autre mot, mais ne modifiez sutout pas ce qui est en rouge, en n'oubliant pas le point qui sépare programme de html, aucun espace n'étant autorisé entre les caractères de ce nom)
Enfin à la dernière ligne "Type", utiliser la petite flèche à droite de la case qui doit afficher par défaut "Document texte" par "Tous"cette dernière modification est indispensable pour avoir un fichier html. sinon vous n'aurez qu'un simple fichier texte, totalement inactif.
Cliquez maintenant sur "Enregistrer".
5 - Vérification de l' extension html du fichier: On ferme tout et l'on se rend par le bureau, puis l'explorateur Windows en C, double clic sur le dossier programmation que nou y avons créé, nous devons y trouver notre fichier html , soit exactement : programme.html
Mais il peut arriver que Windows ait mal enregistré et que l'on se retrouve programme.txt
Cela ne convient pas. Faire un seul clic sur ce fichier programme.txt, taper F2 en haut et remplacer .txt par .html. Puis taper touche "Fin" , puis "Entrée". Windows vous adresse un avertissement général, mais qui ne concerne pas ce cas, donc confirmez votre modification, en cliquant oui. Cette fois vous devez avoir la bonne extension de fichier .htm soit programme.html
6 - Créer notre premier programme : Faire un double clic sur progamme.html, apparaît un fenêtre vide puisque l'on a encore rien programmé. Cliquer en haut "Affichage" et dans le menu qui se déroule "Source". Voici notre Bloc-notes
Nous allons d'abord porter un titre, en anglais "title", qui se situe dans l'espace "tête", cad entre les balises
< head > & < /head >
Soit:
< html > < head > < title > ici le titre que vous voulez < /title > < /head >
Puis entre les balises body nous allons insérer un texte, celui qui vous plaira et terminer notre programme ainsi :
< body >
tapez ici le texte qui vous plaira
< /body >
< /html >
Voici comment doit ce présenter ce code :
Pour finir surtout avant de fermer enregistrer le travail effectué sur le Bloc-note par un clic sur "Fichier" puis, menu déroulant, "Enregistrer" ( et non plus enregistrer sous ). Ceci fait, fermer le Bloc-notes par la petite croix en haut à droite.
La fenêtre vierge de programme.html est là. Taper touche F5. Vous devez voir s'afficher :" tapez ici le texte qui vous plaira."
Et tout en haut de l'écran dans la bande bleu s'afficher le titre " ici le titre que vous voulez"
le prochain chapitre abordera la mise en page, les couleurs, images, tableaux ... à bientôt !.....