Créer son site web, étape n°1 : la découverte de l'HTML

Amis du soir, Bonsoir.

Dans ce post et les autres à venir, je vous proposerai de vous initier au language HTML pour créer votre propre site web...

Je ne vous proposerai que le minimum, pour vous faire découvrir et vous initier en débutant mais si vous voulez pousser plus loin, faites vos propres recherches sur le net ou dans les bouquins...

Tout d'abord, avant de vouloir mettre votre site en ligne (ce qui sera l'objectif s'un autres cours), il vous faut le concevoir sur votre ordinateur...

Liste du matériel nécessaire :
- Un navigateur (Internet explorer, Firefox, ...)
- Un éditeur de texte (le Bloc note fera bien l'affaire )

Vous comprenez bien que vous pouvez faire cela de presque partout et ceci même sur le vieux Pentium I 166MHz de votre grand mère...

Donc nous allons commencer la leçon :

HTML : Hypertext Markup Language
En gros, il s'agit d'un language, qui permet de formater du texte et d'etre interpreté par un navigateur internet.
Ce langage est libre de tout droits, vous pouvez donc l'utiliser librement mais vous devez savoir que si quelqu'un copie votre code, il sera dans ses droits... donc ne vous genez pas pour utliser des bouts de code qui vous plaisent mais qui viennent d'autres personnes...

NOTE : Formater ne signifie pas effacer mais mettre en forme, lorsque vous fomatez votre disque dur, vous (re)définissez le format des données à venir dessus ce qui implique qu'il soit vidé...

L'HTML fonctionne avec des balise que vous devez ouvrir et fermer (pour la plupart) en mettant du texte ou des parametres en plus... Sur le meme principe que le BBcode qui est utilisé sur ce forum mais avec des <> et non des []...

Exemple :

Ouvrez le Bloc note sur un document vierge et recopiez le code suivant :

Code:: <HTML>
<HEAD>
<title>PREMIERE PAGE</title>
</HEAD>
<BODY>
Après la parole, l'écriture, l'imprimerie,
Voici le HTML, pour publier dans le monde entier !
</BODY>
</HTML>

Explication :
<html> définit le document comme étant une page internet
<head> définit l'entete du document
<title>permet de personaliser le titre de votre page (qui apparait dans la barre tout en haut)
<body>qui défini le début de la zone de contenu de la page...

Toutes ces balises doivent etre ouvertes avec <nom_de_la_balise> et refermée avec </nom_de_la_balise>

Le fait de mettre une quantité d'espaces ou de tabulations dans votre texte ne sera pas considéré... de même que les accents doivent etre codifiés dans le texte...

Vous n'êtes pas obligés de mettre les balises en majuscule... ni d'indenter le texte proprement (bien que je vous le conseille pour un code plus propre)

NOTE : On appelle l'indentation le fait de mettre des tabulations en début de ligne pour aligner verticalement les morceaux de code qui sont au même niveau hiérarchique dans le code de la page ou du projet

A présent que nous avons le code de notre premiere page, nous allons le transformer en page web.
Enregistrez votre document AU FORMAT HTML... pour ce faire, faites Fichier-->Enregistere sous...-->dans la liste en bas de la fenetre, choisissez "tout les fichiers" dans le type et tapez le nom complet de votre fichier dans la zone de nom de fichier (ex : test1.html) puis validez.

Si vous avez bien fait ceci, votre fichier apparait comme étant un document internet reconnu par votre navigateur...

Vous n'avez plus qu'à l'ouvrir avec votre navigateur internet préféré par double-clic sur le fichier...

Et voila votre premiere page !!

A présent, histoire de vous amuser un peu, faites varier le texte...

Pour reprendre votre code, faites un clic-droit avec la souris sur le fichier, et faites Ouvrir avec... --> choisissez le bloc note...
Sinon vous pouvez faire un clic droit sur votre page (ouverte dans le navigateur et faire "afficher le code" puis le copier dans le boc note et ainsi pouvoir le modifier...
Et enfin, vous pouvez toujours garder une version au format txt pour le modifier à souhait voir plus simplement modifier l'extention du fichier de html en txt et vice versa...

essayez :

Code:: Aller a la ligne
mettre en italique
mettre en gras
souligner
...

Vous pouvez bien sur les combiner à souhait en les imbriquant les un dans les autres si vous respecter l'ordre... (celle que vous ouvrez en premier sera fermée... en dernier)
Exemple : texte en italique et souligné saut de ligne

A vos claviers, amusez vous bien et n'hesitez pas à poser vos questions à la suite de ce post...

Merci je viens d'essayer et j'ai réussi. Je ne pensais pas que c'était aussi simple de faire une page web. Je n'ai plus qu'à attendre les nouvelles instructions pour continuer. Very Happy

Rien n'est dur quand on sais le faire... ;-) mais tu as raison, c'est tout sauf compliqué l'HTML

Qu'aimerais tu apprendre dans le prochain cours ??

moi je pensais à une liste de nouvelles balises pour mettre en forme plus un truc ou deux... sinon je ne sais pas encore trop...
à voir...

Très bonne idee ca, bien rédigé Wink

.

Excellent ça marche, tout est dans le formatage et la programmation ! Very Happy

On m'a parler d'un logiciel "illustrator" je crois qui permet d'illuster ces documents ou même ses pages web.

Il existe bien sur des quantités phenomenales de logiciels pour créer ses pages sans toucher le code...

mais en temps que programmeur, je vous invite à savoir comment sont faites vos pages...

J'utilise un programme qui me permet d'avoir la coloration syntaxique lors de la saisie... sinon je tape tout...

Nombre de messages : 123 Age : 38 Date d'inscription : 12/11/2006

merci bien, j'enregistre cette page et je test sa ce soir

sinon pour la suite fait sa dans l'odre que tu procède pour te faire une page HTML

Ben je vais essayer... mais je ferai une sorte de récapitulatif quand les bases seront acquises avant d'attaquer l'upload sur FTP...

Si vous avez des questions, des preferences dans l'ordre des choses... un coup de geule (on sais jamais)...
faites le !!
car c'est en comprenant qu'on apprend...

Oui j'ai une question, j'ai suivi toutes les instructions mais voilà une fois qu'on a tout enregistrer, comment fait-on pour ouvrir la page sur le net ? scratch

Ben normalement le fichier que tu as enregistré change d'icone et devient une page web...(n'oublie pas le .html)

pour la voir tu l'ouvre avec ton navigateur...
il n'est pas encore question d'internet pour le moment...

L'étape internet viendra ... mais pas encore...

oki, j'ai du oublier une des étapes ! pale

Je vais recommencer Very Happy

Merci de ta réponse

mais de rien, n'hesite pas ...

Je n'ai peut etre pas été tres clair sur cette étape...

Ah ça fonctionne, en fait c'était bon mais je m'attendais à quelquechose d'extraordinaire, je veux brûler les étapes et avancer trop vite, c'est bien moi ça Razz

Prête pour les prochaines étapes !!! jocolor

» Mon site perso