introduction
Il était une fois,une lointaine époque (au moins 10 ans) ou pour être présent sur le web il fallait d’être une espèce de geek fou furieux bouffeur de code. Un jour un gentil chevalier blanc vint améliorer la situation en proposant des systèmes de publications comme les CMS et les blog, qui permirent à tout le monde de publier sur le web sans avoir à programmer une ligne de code.
Le royaume du web entre alors dans un période de joie et d’allégresse.
Hélas, un jour de grand malheur un malheureux utilisateur de système de publication doit faire un tour au cœur du code html, soit parce qu’il souhaite installer un widget proposé par un développeur geek (un de ceux qui sont fous furieux ) soit par ce que dans une bouffée délirante il c’est dit : « est-ce-que se serait pas super sympa d’aller voir comment marche ce machin ? ».
Le but de cette série d’articles n’est pas de transformer mes amis lecteurs en « une horde de geeks fous furieux bouffeurs de code »(c’est assez difficile à vivre au quotidien je le confesse) mais de démystifier (un peu) les codes cabalistiques cachés derrière les pages affichées par votre navigateur.
Bien sur je m’efforcerai de rajouter des liens à chacun de ces articles pour ceux qui souhaiteraient aller plus loin dans leur découverte.
Enfin, pour clore cette introduction je vous répéterai quelques conseils de bon sens qui m’ont été donnés par un vieux Maître de Chinatown avant qu’il me confie la réalisation de ma première page web
- Il ne faut jamais mouiller la page web,
- ne pas l’exposer à la lumière vive,
- et SURTOUT ne pas la nourrir après minuit…
Sinon je ne répond de rien !
Pratiquement on va essayer d’agir avec un minimum de méthode en découpant cette présentation en plusieurs parties: pour la rendre moins indigeste
une introduction (ça c’est fait) :
1/ anatomie d’une page web
2/ découverte des balises html
3/ la mise en forme avec des notions de styles
4/ Les balises génériques
5/ créer une deuxième page et les suivantes.
1/Anatomie d’une page web.
Commençons cette série par une (très) bonne nouvelle : Le langage HTML (qui sert a écrire les pages web) n’est pas un langage de programmation, mais de balisage, les balise étant le nom donnée aux portions de code qui servent à positionner (et a mettre en forme) le texte dans une page.
Non ne partez pas en hurlant …
On voir ça avec un exemple en créant notre première page.
Créer (et afficher) sa première page web !
Pour cela nous avons besoin :
d’un éditeur de texte ( pour écrire le contenu des pages je ne saurais que trop vous conseiller l’excellent Notepad ++)
D’un navigateur internet (pour visualiser le résultat de notre travail, je ne saurais que trop vous conseiller Firefox )
vous êtes prêts ?
C’est parti !
Ouvrez votre éditeur de texte, et tapez le texte suivant :
- Ceci est une page web !
Enregistrez votre fichier , donnez lui le nom : page1.htm
Ouvrez le fichier dans votre navigateur , vous devriez voir ceci :
Bravo vous avez créé votre première page web !
Vous êtes rassurés ?
Alors passons à la suite
Structure de la page : le head et le body
Jusqu’à présent votre page n’a rien de très folichon, nous allons donc lui donner un peu de corps (et de tête).
En fait jusqu’ici nous avons un peu triché, une page web et constituée généralement d’un peu plus de que de trois mots. Elle devrait plutôt ressembler à çà :
- Ceci est une page web !
Retenez vous de hurler s’il vous plaît et ouvrez grands les yeux. Il y a deux grandes parties dans votre page :
la tête (head) qui est délimité par les balises et
et le corps (body) qui est délimité par les balises et
Comme vous pouvez le voir notre texte se trouve en tre les balise et
A quoi servent le Head et le Body?
Entre et on met toutes les informations qui ne seront pas visible sur l’écran du navigateur (mais qui sont fort utile).
Entre et ce qu’on voudra que les visiteurs de la page voient
bref une page web parfaite est comme une femme parfaite : une tête mystérieuse et un corps intéressant…
Et comme le développeur web est un macho comme un autre nous allons dans un premier temps nous intéresser à son corps (de la page bien sur).
On s’y met dans le prochain article
