Faire son premier site (partie 2)

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.

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.

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.

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.

Dernière mise à jour le 2 décembre 2018