Sommaire.

Fonctionnement d’un site web.

Un site web est un ensemble de fichiers, souvent réalisés avec des langages comme le HTML et le CSS. Généralement les fichiers d’un site web sont stockés sur un ordinateur (connecté en permanence sur le web), appelé serveur.
Ainsi, les personnes (on les appelle les clients) qui souhaitent accéder à un site, utilisent l’adresse du site (IP) pour le voir.

Il existe deux types de site, les sites statiques (pour lesquels, le client n’a pas d’interaction avec le site), et les sites dynamiques (pour lesquels le client peut agir sur le contenu du site). Les sites dynamiques peuvent contenir :

  • un forum.
  • des messages actualisés en permanence venant des utilisateurs du site.
  • un système de newsletter.
  • un blog …

Langage HTML.

C’est le langage principal pour développer un site web.
Il fonctionne à partir de balises qui sont interprétées par les navigateurs.
Voici un exemple de code HTML:

< h1 >Le langage HTML.< /h1 >

Généralement les balises HTML s’ouvrent < h1 > et se ferment </h1 >
Cette balise < h1 > indique que le texte « Le langage HTML. » est un titre, (le texte est généralement de taille plus grande).

D’autres balises existent pour les sous-titres (de < h2 > < /h2 > à < h6 > < /h6 >)

La page HTML.

Une page HTML, est contenue dans un fichier d’extension HTML, elle commence toujours par indiquer au navigateur la version d’HTML utilisée à l’aide de ce code par exemple :

<!DOCTYPE HTML PUBLIC « -//W3C//DTD HTML 4.01//EN » « http://www.w3.org/TR/html4/strict.dtd » >

C’est le DOCTYPE.

La page est définie entre les balises < html > < /html >.

une page htlm contient au moins dans l’ordre :

  • Un entête de la page, entre les balises < head > < /head >
  • Le corps de la page, entre les balises < body > < /body >

Voici un exemple de page HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Mon premier titre de page HTML.</title>
  </head>
  <body>
    <h1>Titre balise h1.</h1>
    <h2>Titre balise h2.</h2>
    Le contenu de ma première page !
  </body>
</html>

Copier ce code dans un éditeur de texte, sauvegardez-le avec le nom essai1.html sur votre bureau, puis ouvrez-le avec votre navigateur.
(Par exemple Kate pour Linux, ou Bloc-Notes pour Windows)

Attention, Windows a une gestion particulière des extensions de fichier.
En copiant le code html ci-dessus dans Bloc-Notes puis en sauvegardant sous le nom
essai1.html;
Windows rajoute une extension .txt; le nom de votre fichier devient alors
essai1.html.txt
Lorsque vous lancez ce fichier à partir d’un navigateur, celui le considère comme un fichier texte.
Pour résoudre ce problème, il faut modifier une option de Windows.
Dans l’explorateur de fichier Windows, sélectionnez Option des dossiers, puis déselectionnez l’option :
Masquer les extensions dont le type est connu.
Vous pouvez renommer votre fichier en essai1.html

Que constatez-vous ?
La réponse…

Liens entre pages html.

Dans une page html, on peut créer un lien vers une autre page html.
Pour cela, on utilise le code :

<a href="adresse_De_L_autre_Page">Texte du lien </a >

Nous allons donc créer un deuxième fichier qui contiendra la deuxième page HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Mon second titre de page HTML.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>Titre balise h1.</h1>
    <h2>Titre balise h2.</h2>
    Le contenu de ma seconde page !
  </body>
</html>

Copiez ce code dans votre éditeur de texte. Puis sauvegardez-le avec le nom essai2.html sur votre bureau.
Les deux fichiers sont sur le bureau, on va créer le lien entre la première page et la deuxième page.

Dans le premier fichier contenant votre première page, rajouter la ligne suivante.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Mon premier titre de page HTML.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>Titre balise h1.</h1>
    <h2>Titre balise h2.</h2>
    Le contenu de ma première page !
    Cliquez <a href="/home/manu/Bureau/essai2.html">ici</a> pour accéder à ma deuxième page.
  </body>
</html>

Lancez maintenant le premier fichier et cliquez sur le lien.
L’adresse de mon bureau (/home/manu/Bureau/) est certainement différente de la votre, adaptez-vous.

On souhaite maintenant faire un lien retour (c’est à dire de la page 2 vers la page 1)
Que faut-il ajouter ?
La solution…

Insérer une image.

On ne peut pas insérer une image comme on le fait dans un traitement de texte, il faut juste créer un lien vers cette image.

<img src="adresse_du_fichier_Image" width="x" height="y" alt="texte explicatif">

Le paramètre width est la largeur de l’image et le paramètre height est sa hauteur.

Commencer par sauvegarder une image (petite 10 kio format gif par exemple) nommez-la image.gif
Puis ajoutez la modification suivante dans le fichier essai1.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Mon premier titre de page HTML.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  </head>
  <body>
    <h1>Titre balise h1.</h1>
    <h2>Titre balise h2.</h2>
    Le contenu de ma première page !
    Cliquez <a href="/home/manu/Bureau/essai2.html">ici</a> pour accéder à ma deuxième page.
    <img src="/home/manu/Bureau/DangerGiratoire.gif" width="300" height="264" alt="danger giratoire">
  </body>
</html>

Langage CSS.

Comme vous avez pu le constater, le design du site (c’est à dire la couleur du fond, la forme et la taille des caractères, …) doit être redéfinit pour chaque page, et c’est une grosse contrainte, car sur un site il peut y avoir des centaines de page.

Heureusement, il existe une méthode plus simple qui est celle de créer une page de style (Cascading Style Sheets ou CSS).
La feuille de style est aussi un langage qui va redéfinir le format de toutes vos pages HTML.

Pour indiquer à votre navigateur que votre page html utilise par exemple la feuille de style feuille_style.css
il faut utiliser le code suivant :

<link rel="stylesheet" type="text/css" href="feuille_style.css">

Modifier votre première page html (essai1.html) en ajoutant le code suivant.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Mon premier titre de page HTML.</title>
    <link rel="stylesheet" type="text/css" href="feuille_style.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  </head>
  <body>
    <h1>Titre balise h1.</h1>
    <h2>Titre balise h2.</h2>
    Le contenu de ma première page !
    Cliquez <a href="/home/manu/Bureau/essai2.html">ici</a> pour accéder à ma deuxième page.
    <img src="/home/manu/Bureau/DangerGiratoire.gif" width="300" height="264" alt="danger giratoire">
  </body>
</html>

Nous allons créer un fichier CSS que l’on va nommer feuille_style.css et sauvegarder sur le bureau.

h1 { color: red; }
h2 { color: blue; }

Copiez ce code dans votre éditeur de texte. Puis sauvegardez-le avec le nom feuille_style.css sur votre bureau.
Maintenant lancez le fichier essai1.html avec votre navigateur, et regardez les premières lignes.

Si vous cliquez sur le lien pour faire afficher la deuxième page, vous constatez que les deux premières lignes n’ont pas changé.

Que faut-il faire pour les modifier ?
La solution…

  • Bien sûr, il est possible de modifier de nombreux paramètres de style (une image de fond, une police de caractère, une couleur particulière pour les liens, …)
  • Pour le moment vos pages html, ne sont accessibles que par vous. Elles sont sur votre ordinateur. Pour les rendre visibles sur le web, il faut les charger sur le serveur (ordinateur toujours connecté à internet) d’un hébergeur. Avant il faut créer un compte chez l’hébergeur, afin d’obtenir une adresse IP pour votre futur site.

Quelques références :


Laisser un commentaire