Tutoriels

Faire son premier site (partie 2)

Créer un site InternetNous 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 :

<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="style.css">
</HEAD>
<BODY>
</BODY>
</HTML>



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.

Vos commentaires
Laissez un commentaire !
Sommaire
  1. Invité
    soilworker
    le 11 juillet 2003

    Félicitations pour tout (en particulier la partie php) !

    répondre
  2. Invité
    Obi
    le 01 juillet 2003

    LoooL, ct simple pourtant ! Ca fait chépa combien de temps que j'essaie de comprendre ce truc et j'ai jamais trouvé un site qui l'explik simplement. Sauf celui la ! Merki beau cou !!

    répondre
  3. Invité
    Grobb
    le 20 avril 2003

    Juste pour dire que c'est un excellent tutorial!

    répondre
  4. Invité
    quadvosges
    le 23 mars 2003

    très,très bon article ;o)... y a plus qu'a !

    répondre
  5. Invité
    tangui
    le 11 mars 2003

    très bon article neuromancer, cela donne une bonne vue globale pour pourvoir entamer une page internet =o)

    répondre
  6. Invité
    Leo.
    le 11 mars 2003


    Vraiment super Neuromancer !

    On en redemande... ;o)

    répondre
Ecrire un commentaire