faire son site web en html

Créer son premier site web

Sommaire

Pour avoir toutes les nuances de couleurs, le plus simple est d'utiliser Webexpert ou un autre éditeur spécialisé qui a une fonction couleur.

Ça y est ! Vous naviguez depuis quelques temps sur le web, vous avez maintenant envie de faire vous aussi votre premier site. Un site sur votre famille, une page perso, ou tout autre chose. Mais comment faire ? Vous avez peut-être entendu parler d'HTML, de JavaScript, de PHP, mais vous ne savez pas à quoi ça correspond. Ce guide va essayer de répondre à ces questions et vous apprendre à débuter avec l'HTML, la base de tous les sites web.

La structure d'une page HTML

HTML ? Javascript ? PHP ?

HTML signifie HyperText Markup Language. On le qualifie souvent de langage de programmation mais ce n'est pas le cas. Un langage de programmation comprends des opérateurs comme l'addition ou la multiplication, des tests comme if, then, else... ce qui n'est pas le cas de l'HTML.
L'HTML est un langage interprété par le navigateur internet (Internet Explorer, Netscape, Mozilla, Opera...). C'est tout simplement un outil de mise en page.

Le Javascript est lui un langage de programmation véritable. Il permet d'apporter des éléments dynamiques à une page web. Il est pratique car il s'intègre dans les fichiers HTML. Il est lui aussi interprété par le navigateur. Attention, les navigateurs les plus anciens ne sont pas compatibles.

Le PHP est lui aussi un langage de programmation. Il apporte aussi du dynamisme aux pages web mais il ne permet pas de faire tout ce que fait le Javascript et inversement. Il s'intègre tout aussi facilement à l'HTML. La grande différence par rapport au Javascript c'est qu'il est interprété par le serveur du site web et non par le navigateur.

Nous n'irons pas plus loin à propos du Javascript et du PHP ici, chacun ayant ses partisans et ses détracteurs. Pour en savoir plus sur ces 2 langages, référez-vous à la liste de liens utiles à la fin de cet article.

La structure d'une page HTML

Rentrons dans le vif du sujet. Avant de commencer il vous faut un éditeur. Au début du web, le seul outil s'était le Bloc-notes car l'HTML est un simple document texte renommé en .htm ou .html. Mais depuis on a fait des progrès. Il existe maintenant des éditeurs WYSIWYG comme Dreamweaver ou Frontpage. Cependant je ne les conseille pas dans un premier temps car on apprends pas l'HTML avec et que ils produisent des codes sources vraiment bordéliques et lourds. Mais on peut utiliser des éditeurs de texte spécialisés. Personnellement, j'utilise Webexpert 5. C'est un shareware mais il est très puissant (En téléchargement ici)

Maintenant que vous êtes équipés, commençons !

L'HTML est constitué de balises. Ce sont ces balises que le navigateur va interpréter pour mettre en forme la page. Les balises sont un texte enfermé entre <>.
Voilà le calque de départ de toutes les pages web :

Comme vous pouvez le voir chaque balise doit être refermée par son homologue avec un "/" (ex: <html> se ferme par </html>).
Toutes les balises s'imbriquent. On ferme en dernier ce qu'on a ouvert en premier.

Maintenant la structure de base : tous les document HTML commencent par une balise <html> et se terminent par une balise</html>. Le navigateur interprétera tout ce qui se trouve entre ces balises.
Ensuite vient la balise <head>. Elle décrit ce qui se trouvera dans la tête du document. Par exemple, le titre de la page : <title></title>

Exemple :

<html>
<head>
<title>Mon premier site</title>
</head>
<body>

</body>
</html>

donne :

Après la tête de la page vient le corps. Le corps comprends tout ce qui s'affichera sur la page proprement dite.

Exemple :

<html>
<head>
<title>Mon premier site</title>
</head>
<body>
Bonjour tout le monde !
</body>
</html>

donne :

On peut appliquer à la balise <body> des paramètres. Ces paramètres s'appliqueront à tout le corps de la page. En particulier, les couleurs des éléments.

Exemple :

<html>
<head>
<title>Mon premier site</title>
</head>
<body bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
Bonjour tout le monde !
</body>
</html>

donne :

Détaillons le code : <body bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

bgcolor : il s'agit de la couleur de fond de la page
text : la couleur du texte normal
link : la couleur des liens
vlink : la couleur des liens déjà visités
alink : la couleur des liens actifs

Note : À la place d'une couleur de fond on peut mettre une image avec le paramètre background="nom de l'image de fond.jpg" (ex : <body background="fond.jpg">) En ce qui concerne les codes des couleurs, c'est trop compliqué pour être expliquer en détail ici.
Sachez seulement qu'ils se composent toujours de 6 chiffres ou lettres car les valeurs sont exprimés en hexadecimal (de 0 à 15 (15=f)).
Les 2 premiers chiffres (qui correspondent à une fourchette de 0(00) à 255(ff)) expriment la valeur de la composante rouge de la couleur, les 2 suivants de la composante verte et les 2 derniers de la composante bleue (RVB). Plus la valeur est haute, plus la composante est présente.
Pour exemple, 000000 correspond au noir, ffffff au blanc et donc c0c0c0 à un gris.
ff0000 correspond à du rouge, 00ff00 à du vert et 0000ff à du bleu.

Pour avoir toutes les nuances de couleurs, le plus simple est d'utiliser Webexpert ou un autre éditeur spécialisé qui a une fonction couleur.

Faire son premier site. suite

Sommaire

Nous avons vu dans un article précédent comment faire son premier site web. Il s'agissait de parler des premiers pas en HTML, qui, je le rappelle est un langage de mise en page et non un langage de programmation. Nous allons voir aujourd'hui comment égayer votre site et comment le rendre "dynamique". Pour cela, nous allons nous intéresser tour à tour aux feuilles de style, au javascript puis au PHP.

Les feuilles de styles (CSS)

Avant de commencer...

Le but de ce dossier n'est pas de vous apprendre plusieurs langages, il faudrait plusieurs livres pour ça... Je vais juste vous montrer, à travers deux exemples, comment incorporer ces langages dans vos pages HTML. Ces langages sont le Javascript (à ne surtout pas confondre avec le Java !) et le PHP.

Ils sont très différents l'un de l'autre et ne s'utilisent pas du tout pour la même chose. Comme je l'explique dans l'article précédent, le Javascript s'exécute côté client, ça signifie que c'est le navigateur qui s'occupe d'interpréter le code Javascript pour l'exécuter correctement.

Au contraire, le PHP s'exécute côté serveur, c'est-à-dire que c'est la machine de votre hébergeur qui va interpréter le code PHP avant de le renvoyer au navigateur du visiteur sous forme d'HTML (ou même de Javascript, de Flash ou de tout autre langage interprété par le navigateur).

Cette distinction faîte, passons aux choses sérieuses, les feuilles de style.

Les feuilles de styles (CSS)

Avant de réellement dynamiser vos pages, je vais compléter la notion de mise en page en vous parlant des CSS (Cascading Style Sheets), incluses par la W3C au standard HTML et qui sont gérées par Microsoft Internet Explorer 4.x et suivants, Netscape Navigator 4.x et suivants, Opera 5.x et suivants et d'autres navigateurs.
Cette partie sera courte, je vous explique les bases et ensuite vous vous débrouillez, je vais pas tout vous faire non plus :op Il y a d'ailleurs un très bon guide sur le site Comment ça marche ?, je vous invite fortement à le consulter ainsi qu'à télécharger la documentation ultra complète SELFHTML.
Par rapport à de l'HTML brut, les CSS permettent :

une présentation homogène sur tout un site.
de pouvoir changer l'aspect du site entier en modifiant quelques lignes.
une plus grande lisibilité du code HTML.
le positionnement rigoureux des éléments.
un chargement plus rapides des pages.

On va d'abord voir comment incorporer une feuille de style dans une page HTML.
Il est possible d'incorporer des sytles directement dans une page web mais ce n'est pas intéressant. Il est bien plus intéressant de créer un fichier texte avec l'extention .css et de l'appeler de la page HTML.

Exemple :

L'appel se place dans la partie HEAD de votre page de cette façon. Faîtes de même sur toutes vos pages HTML.

Maintenant, nous pouvons voir ce que nous allons mettre dans la feuille de style elle-même et vous allez pouvoir comprendre comment ça marche.
D'abord on s'attaque à l'aspect général du site au travers de la balise BODY.

Exemple :

body { font-family: Verdana; font-size: 8pt; margin-top: 1px; margin-right: auto; margin-left: 1px;}

Voyons ce premier exemple dans le détail. D'abord on écrit la balise dont on veut décrire le style (BODY dans ce cas-là).
Ensuite, je donne la police de caractère que je veux utiliser par défaut, ensuite la taille de texte. Les autres sont les marges de la page. Vous avez remarquez que chaque paramètre est séparé par un point-virgule.
Bien sûr, il existe de nombreux autres paramètres possibles, une liste non exhaustive se trouve ici.
Les styles peuvent s'appliquer à toutes les balises HTML qui reçoivent des paramètres à part les balises BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
Il faut que vous sachiez que les CSS permettent de définir un style "par défaut" des éléments de vos pages mais à tout moment, si vous décidez de changer le style d'une balise, vous le pouvez, en utilisant l'HTML standard (par exemple en mettant <font color="#ff0000"></font> pour mettre en rouge un texte pourtant définit en noir dans la CSS.

Voici maintenant une petite une petite astuce : je suis sûr que vous avez déjà vu sur bon nombre de sites les liens qui se modifient lorsque la souris passe dessus. Cella est gérer avec les CSS.

Exemple :

body { font-family: Verdana; font-size: 8pt; margin-top: 1px; margin-right: auto; margin-left: 1px;}

A:link { font-family: Verdana; font-size: 8pt; color:#E36009; text-decoration:none}
A:active { font-family: Verdana;font-size: 8pt; color:#E36009; text-decoration:underline}
A:visited { font-family: Verdana;font-size: 8pt; color:#E36009; text-decoration:none}
A:hover { font-family: Verdana;font-size: 8pt; color:#E36009; text-decoration:underline}

Dans ma feuille de style, je viens de rajouter 4 lignes qui définissent le style de la balise A (la balise des liens en HTML). Les 3 premiers types de liens, vous les connaissez, ce sont les mêmes types que l'on définit habituellement dans la balise BODY (lien normal, lien actif, lien visité).
Le 4° type est un peu particulier, il se nomme A:hover (hover pour hand over : main au-dessus). Vous l'aurez compris, ce type définit le style lorsque la souris survole un lien. Dans l'exemple ci-dessus, la seule différence avec le lien normal, c'est qu'il est souligné.
Donc lorsque vous passerez la souris au-dessus d'un lien, il se soulignera. Mais vous pouvez aussi bien le faire devenir gras, italique ou bien les 3 en même temps en ajoutant un paramètre "font-style: bold" par exemple. Le paramètre "text-decoration" permet même de surligner ou de barrer le lien, voir le rendre invisible.
Il y a énormément de possibilité et je vous invite à utiliser l'éditeur Webexpert qui permet d'éditer vos feuilles de style de façon intuitive grâce à un dictionnaire des paramètres de style (non je ne fais pas de pub, c'est juste que c'est le seul éditeur qui fait ça à ma connaissance).

Voilà qui conclut mon petit détour par les CSS avant de passer au Javascript.