GUIDEGRATUIT.COM

Apprenez à créer un site en HTML simplement et progressivement...
Accueil
Introduction importante
Le HTML c'est quoi ?
Notre projet
Equipez vous
Votre première page
Gérer le texte
Mise en page
Images
Tableaux
Liens
Couleurs
Formulaires
Hébergeurs de sites
Mise en ligne FTP
Frames
Autres cours
Résumé des balises
Le dico du site
Vos questions (F.A.Q.)
Le Forum
Liens utiles
Contact webmaster
Copyright
VOTRE PREMIERE PAGE
Nous allons ici apprendre à faire notre toute première page HTML. Cela nous permettra de prendre en main le logiciel Bloc-notes (pour ceux qui ne l'auraient jamais utilisé), de nous familiariser avec les premières balises HTML et de comprendre comment tester notre travail...

N'essayez pas d'aller trop vite et suivez bien les instructions ci-dessous. Plus tard, quand vous aurez pris de l'assurance, vous aurez tout le loisir de faire ce que bon vous semble, pour le moment c'est les cours alors on est sérieux et on écoute le professeur (bon retour à l'école pour ceux qui l'avait quitté depuis longtemps) !

Les balises OBLIGATOIRES pour faire une page HTML :

Nous allons faire une page simple avec votre nom et prénom pour vous apprendre les premières balises HTML que vous devrez OBLIGATOIREMENT retrouvez dans toutes vos pages. Ci-dessous je vous ai mis le code source (à gauche) de la page HTML que vous allez créer (résultat à droite). Pour le moment observez la...

<HTML>

<HEAD>
<TITLE>Ma première page Web</TITLE>
</HEAD>

<BODY>
Ici insérez votre prénom et votre nom.
</BODY>

</HTML>

Vous pouvez constater comme moi, et même sans connaître le moindre code HTML, qu'il y a ici quatre ensemble de balises (je repête pour ceux qui ne suivaient pas qu'une balise ce sont les lettres contenant entre les signes < > ) ... Quand je dis quatre ensembles de balises je compte les "balises d'ouverture" (comme nous les appelerons à partir de maintenant) comme <BODY> et les balises de fermeture comme </BODY> comme un ensemble. Je considere donc que <BODY></BODY> est un ensemble !

C'est quatre premiers ensembles de balises sont essentiels à connaitre car ils sont à la base de votre page HTML ! Détaillons les ensemble :

<HTML> et </HTML> : Il définisse le début et la fin de votre page HTML (tout simplement). Votre navigateur sait ainsi quand commence et quand fini votre page...

<HEAD> et </HEAD> : La partie définie par le HEAD est en fait le haut de votre navigateur (vous voyez la barre bleue en haut ? Eh bien c'est ça !)... Alors évidemment dans le haut de ce navigateur on retrouve :

<TITLE> et </TITLE> : eh oui ! Cette partie TITLE définie le titre de votre page... C'est le titre que vous verrez dans la barre bleue ! (par exemple cette page a pour TITLE "Notre première page web"). Vous remarquerez que ce TITLE est donc encadré par la balise <HEAD> et </HEAD>...
C'est logique non ? Le TITLE fait partie du HEAD... Si vous ne trouvez pas ça logique relisez la définition du HEAD ci-dessus... Si vous trouvez ça logique, bravo on continue :

<BODY> et </BODY> : le BODY (corps en anglais) définie donc le corps de la page, c'est à dire tout ce qui se trouve dans la page en elle même ! En insérant du texte et des balises dans cette partie vous en verrez le résultat dans votre navigateur ! C'est donc ici que nous mettrons votre nom et prénom !

Notre premier exercice :

Ahhhh enfin de la pratique ! Sortez votre bloc notes ! ... Bon sérieusement... Ouvrez votre bloc-notes de Windows (pour ceux qui ne comprennent pas de quel bloc notes je parle retournez à la rubrique "Préparation").

Vous allez simplement maintenant taper le contenu de la page de code source ci-dessus (celle sur fond blanc). Je vous conseille de réelement retaper les balises et de ne pas vous contenter de faire un copier coller... afin d'apprendre en tapant les balises.
Les signes < et > se trouvent logiquement en bas a gauche de votre clavier, pas loin de la barre d'espace. N'oubliez pas de remplacer le texte "Ici insérez votre prénom et votre nom." par votre nom et prénom...

Une fois que vous aurez terminé de taper tout cela enregistrez votre travail en cliquant dans le menu "Fichier" "Enregistrer sous". Une fenêtre apparaitra dans laquelle vous devez :

1. Choisir le repertoire où vous allez sauvegarder le fichier.

2. Donner à votre fichier le nom "cv" en ajoutant à la fin l'extension ".html"

Note : nous choisirons d'appeler nos pages avec l'extension .html à partir de maintenant mais nous aurions pu les nommer avec l'extension .htm c'est pareil... Mais faites le même choix que nous pour plus de simplicité !

Avant de cliquer sur le bouton "Enregistrer" vérifiez bien que votre boîte de dialogue ressemble à ça (si vous utilisez le Bloc note de Windows évidemment) :



Votre première question :

Alors là vous vous posez surement une question... Comme par exemple :

"Etait ce obligatoire de taper les balises en majuscules ?"

Ma réponse est "Non", je le fais juste pour plus de lisibilité et pour bien séparer le texte du contenu de la page des balises...
En fait vous pouvez tout à fait taper les intérieurs de balises en minuscules (vois même comme ça <BoDy> si ça vous amuse...). Certains conseillent les minuscules car les logiciels de créations de site les utilisent... A vous de voir !

Un point important sur l'enregistrement de vos fichiers HTML :

Pour le moment le problème ne se pose pas mais pour ceux qui voudraient déjà voler de leurs propres ailes, il faut faire un point sur les noms de vos pages.

Vous ne devez en aucun cas utilisez de caractères accentués dans les noms ou l'extension de vos pages HTML, ni d'espace, ni de signes spéciaux (ce dernier conseil est une sécurité sachez juste pour infos que certains signes spéciaux sont acceptés).

Donc une page que vous nommerez "c'est l'été.html" ne fonctionnera pas sur Internet ! A vous de vous débrouillez pour trouver un autre nom (par exemple "cestlete.html")... ATTENTION : les signes majuscules et minuscules ont une importance dans le nom des fichiers html ! Un conseil : ne mettez AUCUNE MAJUSCULE dans les noms de vos fichiers cela vous simplifiera la vie !


Tout ce que je viens de vous apprendre là est très important. Il n'y a rien de plus ennuyeux que de chercher à comprendre pourquoi une page ne s'affiche pas quand on se rend compte à la fin que le problème venait uniquement d'une majuscule ou d'un signe particulier.

Deux questions que vous pouvez vous poser :

"J'ai nommé ma page avec espace et caractères spéciaux et ça marche, alors tu cries au loup ?"
Pas du tout ! Votre page s'affiche correctement en local (cela veut dire chez vous sur votre disque dur) mais sur Internet le résultat serait tout autre ! Alors arrêtez et faites ce que je vous dis !!! C'est pas possible ça !

"Mais c'est très dur à retenir tout ça ?"
Pas du tout une fois de plus ! En fait cela se résume en une phrase d'or : RIEN DE SPECIAL DANS VOS NOMS DE PAGE HTML ! Faites simple et sans floriture ! Le HTML c'est simple je vous le dis... Donc, svp, pour les noms de fichiers ne faites pas preuve d'inventivité et de finesse ! Gardez cela pour l'intérieur de vos pages.

Voir le résultat de votre travail :

Maintenant vous souhaitez surement, si ce n'est pas déjà fait, voir le résultat de votre page exercice ? C'est très simple !
Allez dans le dossier où vous avez enregistré votre fichier et double cliquez sur ce fichier ! Le navigateur s'ouvrira avec votre page contenant votre nom et prénom.
Si c'est le cas : Bravo ! Vous êtes paré pour apprendre le HTML !
Sinon relisez les étapes ci-dessus et vérifiez que vous n'avez pas commis d'erreur en particulier dans les balises...

ATTENTION : il est possible qu'en double cliquant sur le fichier votre page cv.html remplace cette page de cours... C'est génant... Plusieurs solutions (je vous laisse tester la meilleure pour vous) :
- Laissez faire et cliquez sur le bouton "précédent" pour revenir au cours.
- Avant d'ouvrir votre page lancez un navigateur vide puis double cliquez sur votre fichier ou glissez le dans le navigateur. Celui-ci se placera alors dans cette fenêtre vide !

Effectuez une correction :

Laissez votre navigateur en arrière plan avec votre page "cv.html" (vous comprendrez pourquoi plus tard) et ouvrez à nouveau votre page grâce au bloc-notes pour la corriger.
1. Pour ouvrir votre page, vous pouvez lancer le Bloc-notes puis faire "Fichier" "Ouvrir..." ou, plus simplement, faire un clic droit sur votre fichier et choisir "Ouvrir avec" "Bloc-notes" dans le menu déroulant...



2. Puis dans le fichier ouvert, faites une correction (ajouter votre deuxieme prénom, un pseudo, un mot ou ce que vous voulez juste pour l'exercice)...
3. Enregistrez votre fichier en faisant "fichier" "enregistrer".

Recharger la page (visionner les corrections) :

Pour voir votre correction, repassez dans votre navigateur et rechargez la page ! Vous pouvez recharger la page, sous Internet Explorer, en cliquant sur le bouton : ou en appuyant sur F5. Sous Netscape, il faut cliquer sur

Rassurez vous quand vous aurez plus de pages nous vous apprendrons quelques techniques pour aller plus vite encore...

Mettez toutes les balises d'ouverture et de fermeture cela même si vous remarquez que sur votre navigateur la page peut s'afficher avec telle ou telle balise en moins... Les navigateurs sont plus ou moins tolérants (nous le verrons plus tard) et en omettant une balise volontairement vous risquez de rendre votre page illisible par certains navigateurs.

- Ne mettez ni espaces, ni majuscules, ni signes spéciaux dans les noms de vos pages html !
- A partir de maintenant nommez toutes vos pages futures avec l'extension .html