Votre première page web

Ouvrez votre éditeur de texte (Notepad++), que nous avons installé dans le chapitre précédent, sur le menu en haut cliquez sur "Fichier" (File en anglais), puis "Nouveau" (New en anglais). Un onglet dans votre éditeur de texte s'ouvre, ça va servir à écrire le code source de nos page web que contiendra votre site web.
code source?
Le code source d’une page web, est l’ensemble de texte qu’on écrit (sur un éditeur de texte tel que Notepad++) suivant une certaine syntaxe (système de balisage), cette syntaxe est l’ensemble de standard ou des normes décrivant la manière dont HTML doit être écrit, ce texte représente des instructions que doit exécuter un certain microprocesseur. Donc comme on a dit dans l'introduction cette partie c'est la partie à apprendre par cœur.

Vous êtes bien prêt, nous allons créer notre première page web, copiez collez ce code dans l'onglet qui vien de s'ouvrir sur Notepad++ : Après avoir copier le code ci dessus sur votre éditeur de texte vous devez avoir une chose qui ressemble a ceci :


Choisissez l'emplacement ou vous souhaitez sauvegarder votre fichier, puis faite un clic droit sur la fenêtre, sur le menu qui apparaît, choisissez nouveau, puis dossier, et cliquez ! Un nouveau dossier sera créer, il vous reste qu'à lui spécifier un nom, pour moi je vais utiliser le nom "mon site", comme le montre la figure suivante :





C'est pas encore fini, faite un double clic sur le dossier que vous venez de créer. Une fois entrée dans le dossier mon site, toujours sur la même fenêtre, sur le champs "nom de fichier", écrivez "hello.html" (ou un autre nom de votre choix), n'oubliez pas le ".html", qui est l'extension des page web écrite en HTML; c'est une obligation, autre ça va pas fonctionner; Comme le montre la figure suivante :



Une fois le nom saisie, cliquez sur "enregistrez" ("save" en ANGLAIS), je prend une autre capture d'écran afin de vous écrire au plus claire les étapes.



Remarquez que votre disquette n'est plus en rouge, ça signifie que votre fichier a été bien enregistré, si vous m'avez bien suivi jusqu'au la, votre site se trouve dans le dossier "mon site" qui est sur l'emplacement que vous avez choisi (Dans le dossier Developpement pour mon cas). Chercher le dossier "mon site", puis ouvrez le avec un double clic, vous devez avoir quelques chose qui ressemble à l'icone de votre navigateur web par défaut, moi comme je suis toujours sur google chrome j'ai ceci :

A ce stade, nous avons réussi à créer notre première page web de notre site. C'est loin d'être fini, mais ça reste un point de départ. Maintenant afin de visualiser notre page web sur notre navigateur, nous devons faire un double clic sur le fichier hello.html. Logiquement votre navigateur va s’ouvrir sur une page blanche, c'est pas grave, car nous avons rien écrit encore dans notre page web ! voir la capture d'écran suivante :

Voila ce que donne nous site comme image aux visiteurs, une page blanche ! Et portant, nous avons écrit des lignes dans notre page hello.html !

Il faut savoir que les lignes que nous avons écrite, sans à apprendre par cœur, tout les site web sur internet, qui utilise de HTML,possède la même squelette HTML, un DOCTYPE, une balise HTML ouvrante, et une fermante, une balise HEAD ouvrante et fermante, et une dernière balise BODY ouvrante et une autre fermante, nous allons abordé cela plus en détail dans les chapitres à venir, mais ce qu'il faut retenir actuellement, c'est que les lignes que nous avons écrites doivent êtres toujours être présentent, pour permettre aux navigateurs de comprendre ce qu'on veux faire. Un navigateur interprète ces lignes de code, pour les afficher sur le navigateur, et il faut savoir que chaque balise à un sens précis pour le navigateur, des sens que nous allons vous décrire dans les chapitres à venir.

Maintenant sur votre page web affiché sur votre navigateur, faite un clic doit, puis afficher le code source de la page, comme le montre la figure suivante :


Une fois cliquer, une nouvelles onglet (ou fenêtre) apparaît sur votre navigateur ! Voici ce qu'elle contient :

ça vous parle ! c'est code que nous avons écrit, sachez qu'a tout moment, vous pouvez voir le code source d'un site web via cette méthode, et comme nous avons dit en haut, chaque site web, dispose de la même squelette HTML, que celle qu'on viens d'écrire dans hello.html, jetons un coup d'œil au code source du site web Facebook.com,

Attention ! le code source que Facebook.com est si grand que c'est compliqué de l'afficher entier ici, donc je vais inspecter son code source, comme tout à l'heur, bouton droit de la souris, puis cette fois ci, choisissez inspecter au lieu de afficher le code source de la page web.

Voici une capture d'écran du code de Facebook.com :


Donc on trouve, le DOCTYPE, les balise HTML, HEAD et BODY, tout comme notre site ! Souvenez vous durant l'introduction, de la règle pour atteindre le résultat 6, hé oui, l'exemple est toujours valable, la règle c'été l'addition, ici la règle c'est cette syntaxe avec des balises HTML, et avec l'ordre mentionné dans le code source.

Pour terminer ce chapitre, ajoutons un titre, à notre site web. par défaut notre site affiche hello.html sur chrome, (sur autre navigateur, je pense qu'il affiche le chemin complet du fichier hello.html), comme titre.

Le titre d'une page web c'est ce que montre la figure suivante:

Mais comment nous pouvons le changer !?

A partir du code source biensur, reprenons notre code source
Ayy, j'avais fermé mon éditeur de texte, je sais plus comment l'ouvrir !!
Pas de panique, moi aussi, on va ensemble ré-ouvrir notre éditeur de texte, mais cette fois ci c'est pas a partir de menu démarrer, allez sur le dossier mon site, puis faites un clic droit sur le fichier hello.html, puis choisissez Modifier avec Notepad++ ("Edit with Notepad++" en anglais), vous aurez le menu suivant


dans l'éditeur de texte qui s'ouvre et qui correspond au code source de votre page web, ajouter la ligne suivante <title>Ma page web</title> entre les deux balises <head></head>, vous aurez quelque chose qui ressemble a ceci :

Après cette modification, remarquez que la disquette à nouveau est en rouge, cela dit que votre mise à jour sur le code source n'a pas été enregistrer encore, pour bien comprendre, rendez vous sur votre navigateur (google chrome, Firefox, ..) moi c'est Chrome, puis actualisez notre page web, avec le bouton actualiser, sur Firefox c'est comme ceci , qui est représenter sous forme d'une flèche ronde que vous allez trouver a la fin de la barre d'url (ou d'adresse) (la ou on saisie les URL de nos site), sur google chrome ça ressemble à ceci , elle précède la barre d'URL.

Une fois l'actualisation de notre page web est faite, remarquez que le titre de la page n'a pas été changer, malgré que nous avons ajouté la balise title, qui définit un titre à notre page web! par contre ce n'est pas à cause de la balise, ce n'est pas une erreur de code, mais avant d'actualisé notre page web, ont doit enregistrer notre modification sur le fichier hello.html, l'onglet est toujours en rouge, pour sauvegarder la modification, allez y sur le menu "Fichier", puis "Enregistrer", ou directement a partir de votre clavier en appuyant sur les touches "CTRL" + "S" (commencez par CTRL, et sans relâcher la touche de contrôle ( CTRL ) appuyer sur la touche "S"), et remarquez que la disquette n'est plus rouge, ce qui signifie que l'enregistrement de notre modification sur le fichier hello.html a été faite avec succès.
Rendez vous sur votre page web ouverte sur votre navigateur, et actualisez la à nouveau (vous pouvez actualisez votre page directement a partir de votre navigateur avec la touche F5 de votre clavier, mais tout dépend des configurations des ordinateurs).
Maintenant remarquez que le titre de notre page web viens de changer, ce qui confirme que la balise <title> a bien fait son boulot.


Voila ça nous suffit pour cette partie, nous reprenons dans le prochain chapitre les significations de toute ses balise, et qu'est ce qu'on peut trouver encore comme balise a l’intérieur de ces balise à part title que nous venons de voir.