Voilà. Dans le prochain chapitre, vous allez commencer à utiliser de vrais tags pour commencer une vraie page web.
Nous commencerons dans ce premier chapitre à préciser ce qu'est le html et ce que vous pouvez faire avec.
Plus bas, vous devrez retenir quelques mots de vocabulaire indispensables à la compréhension de tout ce qui suivra.
Vous aurez à la fin quelques petits mots sur la syntaxe. Rien ne vous permettra donc ici de commencer à créer votre page en html, mais tout vous sera indispensable si vous êtes un "zéro" :-)
Vous connaissez sûrement le web, et vous aimez certains sites. Peut-être que vous les enviez, même. Sachez que dans la plupart des cas, votre fournisseur d'accès (ou provider) tels que Aol, Infonie, Wanadoo, Club Internet, Compuserve...
vous donne gratuitement de la place sur le web pour déposer votre page perso. Cette place peut occuper maximum 5 à 15 Mo, car on vous limite celle-ci.
Alors, vous avez fait tout ce qu'il fallait pour savoir comment utiliser cette place sur le web. Oui mais voilà : comment allez-vous faire pour créer ces pages que vous enviez tant ? Eh bien, vous allez devoir utiliser le seul moyen que tout le monde utilise : le langage html.
Le html est un langage de description de documents, pas de programmation. En plus clair, c'est un langage informatique qui sert à éditer des pages (virtuelles), mais qui ne permet pas de créer des programmes.
Enfin, si vous trouvez une bonne idée pour votre site perso, vous pourrez voir le nombre de visiteurs augmenter considérablement. Tout est donc dans l'idée, mais si vous ne savez pas
exploiter le html, cela ne vous servira à rien (ce qui explique la présence de mon site).
Le prochain paragraphe vous explique où taper ce langage html.
Quel est donc l'environnement magique dans lequel vous allez écrire votre page perso ? Il faut quand même savoir que ce n'est pas en tapant du texte n'importe où, et en l'enregistrant en .html que ça va marcher ! C'est tout de même plus compliqué que ça !
Toutefois, c'est un langage destiné à tous les internautes, donc il n'est pas impossible à utiliser.
Je vais vous le dire de suite, vous avez tout ce qu'il faut pour le faire. N'importe quel éditeur de texte ASCII suffit. Et parmi eux, il y a edit, sous Dos. Sous Windows, vous pouvez utiliser bloc-notes (c'est celui que j'ai choisi pour ma part).
La deuxième solution, c'est d'utiliser un éditeur WYSIWYG, soit : What You See Is What You Get. En bon français : ce que vous voyez est ce que vous obtenez. Avec ça, un enfant de 5 ans peut créer sa page perso. L'interface ressemble à un programme
de traitement de textes ordinaire. Il vous suffit de cliquer sur italique, rouge, centré... et vous voyez illico le résultat !
Mais tout n'est pas si beau. En effet, le résultat que vous aurez devant les yeux sera très approximatif. De plus, si vous
choisissez cette méthode, je ne pourrai pas vous aider, car ici, je parle de html "pur", sous un éditeur de texte ASCII.
Citons, en éditeurs WYSIWYG, Netscape Composer, livré avec Netscape, et Front Page Express, livré avec Internet Explorer.
En bref, la meilleure solution qui vous offre le plus de choix, c'est un éditeur ASCII. Pour ouvrir Bloc-notes, cliquez sur :
Démarrer Programmes Accessoires Bloc-notes
Je vous l'ai déjà dit, il ne suffit pas de taper ce que vous voulez voir s'afficher pour avoir un résultat. Cela ne marche pas. Qu'y a-t-il d'autre, alors ? La SEULE et unique chose qui vient troubler vos esprits, ce sont les TAGS.
C'est tout ce que vous verrez en plus par rapport à votre traitement de texte habituel.
Un tag ? C'est une information qui s'adresse au brower (Netscape ou Internet Explorer). Elle ne sera pas affichée. Le tag donne une information sur la taille, la couleur du texte, le lien...
Comment le distingue-t-on du texte ? Tout tag commence par un < et se termine par un >. Par exemple (j'invente) : le tag météo. Il s'écrit :
<météo>
Et des tags, je vous en donnerai des tonnes, mais petit à petit.
Il existe un deuxième mot à connaître : ATTRIBUT.
Un attribut se trouve à l'intérieur même d'un tag. Il donne des informations plus précises sur le tag. Ce dernier peut avoir un ou plusieurs attributs, selon votre choix.
Revenons à notre tag météo. On peut lui donner les attributs été et température. Vous voyez bien qu'ils précisent ce tag. Regardez plutôt :
<météo été température="34°">Tous les attributs doivent avoir un espace entre eux pour les séparer. Mais il s'agit toujours du tag météo, dont on doit écrire le nom en premier. Je vous en dirai plus dans le chapitre suivant.
La présentation
Voilà quelque chose de très important à savoir : la présentation de votre page web, lorsque vous l'écrivez en html sous bloc-notes, ne donnera strictement rien lorsque les internautes la verront avec leur browser. Vous pouvez vous amuser à mettre 13 tabulations, 10 entrées, mais vous ne verrez rien de spécial lorsque vous la regarderez avec Internet Explorer ou Netscape.
Je vous donne 2 exemples pour être plus clair. J'ai mis des entrées n'importe où, fait des espaces n'importe où dans l'un, et pourtant le résultat sera le même dans les 2 cas.
Attention : tout ceci se passe lorsque vous écrivez du texte qui sera affiché, comme dans un traitement de texte. Ne jouez pas à ça avec les tags !
Bien sûr, le browser va à la ligne quand le texte arrive au bout de celle-ci.
Exemple 1, où je n'ai pas mis des entrées n'importe où :
Julien marchait dans une sombre forêt, où règnait un froid glacial. Il se demandait combien de temps il errerait encore dans ces lieux sinistres. Il voulait retrouver la douce chaleur du foyer...Exemple 2 :
Julien marchait dans une sombre forêt, où règnait un froid glacial. Il se demandait combien de temps il errerait encore dans ces lieux sinistres. Il voulait retrouver la douce chaleur du foyer...Vous n'avez droit qu'à un espace entre 2 mots. Vous avez vu dans l'exemple 2 que j'en avais mis partout, mais le résultat sera le même qu'avec l'exemple 1. C'est comme ça.
A quoi ça sert ? C'est pour vous qui écrivez votre page. C'est juste pour vous, étant donné que l'internaute ne saura pas si vous avez mis des entrées et des espaces ou pas.
Ca vous permet "d'éclaircir" votre page sous bloc-notes. Ainsi, la prochaine fois que vous reviendrez agrandir ou modifier votre page, vous localiserez plus vite un endroit précis. Il vaut mieux quelque chose de clair pour vous plutôt qu'un gros pâté de texte... Evidemment, j'ai un peu exagéré dans le deuxième
exemple.
Résumons : logiquement, vous n'aurez pas à faire plusieurs espaces entre 2 mots car ce n'est pas ça qui éclaircira votre texte sous bloc-notes et qui le placera où vous le voulez dans le browser.
Mais pour vous, mettre une ou deux entrées entre 2 paragraphes donnera quelque chose de plus clair. Seulement pour vous, car pour faire des entrées, il existe un tag.
Si je vous ai dit de ne pas le faire avec les tags, c'était pour que vous ne fassiez pas d'entrées au milieu d'un tag ! Mais vous verrez, le troisième exemple en partant d'ici (avec gras et souligné) vous montre qu'il est tout à fait possible de mettre des entrées entre 2 tags.
Les tags
Vous savez comment écrire un tag. Mais, en général, un tag ne peut exister seul. Il faut le fermer. Pour cela, recréez le même tag plus loin, sans les attributs s'il y en avait. Vous ajouterez un / au début du nom du tag. Avec le tag météo :
<météo été température="34°"></météo>Des tags interdisent leur fermeture, ils ne doivent pas être fermés. Question de logique : si vous dites qu'il y a une image ici, pas besoin de fermer le tag...
Entre les 2 tags, vous écrirez du texte qui sera affiché, en respectant les indications des tags. J'abandonne momentanément le tag météo, et je le remplace par un autre de mon invention :
<souligné>Ce texte est souligné</souligné>Ainsi, la phrase "ce texte est souligné" apparaîtra souligné (n'essayez pas, c'est un faux tag !).
Il est possible que vous utilisiez plusieurs tags en même temps. Mon prochain exemple illustre ce que je vous ai dit à propos de la présentation.
<gras><souligné>Gras et souligné</souligné>Seulement gras</gras>Comme indiqué, une partie du texte sera en gras et souligné, une autre seulement en gras. Vous pourrez ainsi vous amuser à "jongler" avec les tags. Cependant, cela corse quelque peu la chose... Il va falloir faire attention à l'ordre de fermeture. Voici le mauvais exemple à ne pas suivre :
<gras><souligné>Ca ne marche pas...</gras></souligné>Voici le bon exemple :
<gras><souligné>En gras et souligné</souligné></gras>C'est compris ? Il faudra faire pareil, même avec 10 tags ! Attention donc.
Les attributs
Comme les attributs précisent un tag, ils ne sont normalement pas obligatoires. Mais certains tags ne sont utiles qu'avec un ou plusieurs attributs.
Vous savez les insérer, en les séparant chacun d'un espace. A vous de voir si vous en mettez, ou si vous n'en mettez pas. Ce que vous devez savoir, c'est qu'il y a 2 types d'attributs. On précise certains, d'autres pas.
Vous vous souvenez des attributs été et température. Ils font partie chacun d'une catégorie différente. Eté n'est pas précisé. C'est tout simple.
Mais température l'est.
Voici ce que l'on doit faire : sans espaces (puisqu'ils servent à séparer les attributs), vous écrivez après l'attribut un = et deux ". Entre les 2 " vous préciserez l'attribut, par un nombre ou par un mot. Je vous redonne cet ancien exemple :
<météo été température="39°">
Voilà. Dans le prochain chapitre, vous allez commencer à utiliser de vrais tags pour commencer une vraie page web.