Écrire et concevoir une première page web

Introduction - Généralités sur les pages web

HTML signifie HyperText Markup Language. C'est un langage descriptif utilisant un système de balises (markup) pour déclarer et décrire chaque élément.

Dans tout texte écrit on peut distinguer le fond de la forme:
  • le fond, ou contenu: le texte, les images, graphiques, … qui constituent les informations "brutes" que l'on cherche à véhiculer;
  • la mise en forme: les éléments d'agencement et de rendu esthétique.
Comme nous allons le voir on peut, et on doit !, dans une page web séparer le fond de sa mise en forme.
Pour une page web, la différence notable avec des médias "classiques", ouvrages, journaux, … provient de la possibilité d'interactivité avec le lecteur:
  • en utilisant des liens, hypertext qui dirigent automatiquement vers d'autres pages, ou vers d'autres points dans la page
  • à l'aide de langages de programmation, principalement javascript et php, pour gérer les actions du lecteur (saisie de formulaires, mouvement ou click en des lieux précis sur la page, …)

Édition et balisage du contenu

Il existe à l'heure actuelle de nombreux outils pour développer des pages et sites web, outils plus ou moins évolués et performants, avec des interfaces plus ou moins évoluées graphiquement …
Pour comprendre la conception et le fonctionnement d'une page, et ne pas être limité aux éléments prévus et proposés dans un logiciel prêt à l'emploi, on commence ici par concevoir une page dans son intégralité.

L'édition du contenu peut se faire avec n'importe quel éditeur de texte "brut", par exemple sous windows: le bloc note notepad, mieux notepad++, ou encore emacs, ou sous linux: gedit ou bien d'autres …

Le conteu: du texte brut

Dans notre éditeur de texte (notepad++ par exemple), on saisit le texte de notre page: le contenu "brut", par exemple 
Ma première page 

par Moi: ...


I - Introduction 

à voir ...


II - Ce que j'aimerais dire 

... et en fait, ce que je raconte ...

et puis bien d'autres idées: une ou deux images, photos, .... 
et des liens vers d'autres idées sur d'autres pages
Enregister ce fichier avec l'extension "html", par exemple page1.html.

On peut alors ouvrir ce dernier dans un navigateur web, comme firefox, opéra, internet explorer, …, soit en double cliquant sur le fichier dans l'explorateur de fichiers, ou directement dans le navigateur web dans le menu "fichier -> Ouvrir".

La page s'ouvre et le résultat est … décevant, moche, … Le contenu est là, mais sans aucune mise en page. Même les retours à la ligne et sauts de ligne n'ont pas été pris en compte.

Structure du texte - Balises html

Le contenu saisi précédemment ne contient aucune information sur le rôle, la mise en page, le style graphique, … , de chaque élément.
HTML, pour HyperText Markup Language, est un langage descriptif utilisant un système de balises (markup, donc) pour déclarer et décrire chaque élément.
Un couple de balises permet de délimiter un élément: une balise au début noté <balise> et une balise pour clore l'élément: </balise>.
Par exemple, un titre (header) s'écrit: <h1> Titre </h1>

La structure du texte est repérée par des titres, sous-titres, sous-sous-titres, … de section, grâce aux balises h1, h2, h3, … (pour header de niveau 1, 2, 3, …).
On peut indiquer un paragraphe avec les balises <p> et </p>, une simple division du texte avec <div> et </div>, et une image avec la balise <img …>.
Le retour à la ligne, et saut de ligne, se fait avec la balise <br> (pour break).
On peut écrire du texte en gras entre les balises <b> et </b> ou encore en italique entre les balises <i> et </i> .

Avec ces élements le texte précédent devient:
page1.html
<h1>Ma première page</h1>

<div>par Moi: <b> ... </b> </div>

<h2>I - Introduction</h2>

à voir ...

<h2>II - Ce que j'aimerais dire</h2>

<p>... et en fait, ce que je raconte, dans ce paragraphe ...</p>

<p>et puis bien d'autres idées dans le paragraphe suivnat: une ou deux images, photos: </p>


<img src="nom_fichier_image.jpg" width="300px" height="300px">
<br>

<i>et des liens vers d'autres idées sur d'autres pages:</i>
<br>
un lien vers <a href="http://xymaths.free.fr">un site de maths</a>
Enregister cette nouvelle version, puis la recharger dans le navigateur.
Le texte brut saisi se retrouve dans la source de la page pour le navigateur (click droit -> afficher la source, ou dans le menu supérieur, …). On peut afficher ainsi la source de n'importe quelle page qu'on consulte sur le web, y rechercher des informations, des idées sur la manière de faire.

La page précédente contient une balise img qui permet d'insérer une image. Pour l'essayer, mettre une image dans le même dossier que le fichier html, et indiquer simplement le nom du fichier après src= (pour source=).

On pourrait déjà mettre en forme le texte précédent, en ajoutant des options dans chaque balise. Modifier par exemple le titre principal suivant:
page1.html
<h1 style="font-size:1.3em;color:red;background-color:lightblue;border:6px solid green">Ma première page</h1>

    …
    …
Le résultat est relativement moche, mais cela donne un aperçu des possibilités.
Afin d'uniformiser la mise en page, il est bon d'appliquer le même style à tous les éléments similaires (par exemple, à tous les titres de sous-sections h2).
Il est pratique aussi de séparer le fond et la forme: pouvoir modifier et adapter le style sans avoir à changer le fichier contenant le texte brut. Ainsi, en particulier, la même mise en page peut être appliquée à un ensemble de pages, et la modification et l'adaptation est aisée.
On parle de charte graphique lorsque tout un ensemble de page (un site complet par exemple) respecte une des règles graphiques communes (par exemple un même fond, une même police de caractères, de même taille, …).

Toutes ces remarques (et bien d'autres) trouvent leur réponse dans l'utilisation d'un fichier de style séparé. On enlève donc les options précédentes de la balise h1 et on ouvre un nouveau fichier dans lequel on les recopie. On crée ainsi le fichier, nommé ici par exemple style.css:
style.css
h1 {font-size:1.3em;
    color:red;
    background-color:lightblue;
    border:6px solid green
}
h2,h3 {font-size:1.1em;color:blue}
Il reste maintenant à indiquer à notre fichier html principal de charger, et d'utiliser, ce fichier de style. On ajoute pour cela un en-tête (head en anglais) au début de notre fichier page1.html:
page1.html
<head>
  <link rel="stylesheet" href="style.css" >
</head>

<h1>Ma première page</h1>

<div>par Moi: ...</div> 

... 

...
et on peut alors créer d'autres pages utilisant le même style, simplement en écrivant:
page2.html
<head>
  <link rel="stylesheet" href="style.css" >
</head>

<h1>Suite: Ma deuxième page</h1>

<div>par Moi: toujours ...</div> 

<h2>sous-titre: toujours avec le même style !</h2>
... 

<h2>sous-titre 2: encore le même style !</h2>

...
et on peut imaginer et écrire autant de pages,   page3.html,   page4.html,   ...   avec la même mise en page   style.css.

Pour tout modifier, adapter, améliorer, seul le fichier source style.css est à modifier et les changements répercutés sur toutes les pages liées.

En-tête plus complet

L'en-tête d'un fichier html contient ce qu'on appelle des méta-données: ce sont des données qui ne seront pas affichées et lisibles directement par l'utilisateur, mais qui sont présentes pour donner des informations sur les données elles-mêmes.
On peut compléter notre fichier par d'autres méta-données, ainsi que des balises html qui délimitent correctement chaque bloc et body pour indiquer clairement où se trouve le corps du texte de la page.
page1.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style.css" >
    <meta name="keywords" content="HTML, début, introduction, 1ère page">
    <meta name="author" content="Moi !">
    <meta property="og:title" content="Ma toute première page web" />
    <meta property="og:description" content="Essai d'une première page web" />
  </head>

  <body>
    <h1>Ma première page</h1>

    <div>par Moi: ...</div> 

    ... 
    ...

  </body>
<html>

Exercice 1
  1. Rechercher la signification des options property="og: ..."
  2. La première ligne "<!DOCTYPE …" déclare que le document utilise la langage html5.
    Rechercher les différentes évolutions du langage html, jusqu'à la version 5 actuelle.
  3. AJouter un lien sur la page page1.html vers la page page2.html et un autre dans l'autre sens.

Style - Mise en forme de la page

La mise en page esthétique se complète via le fichier de style style.css.
"css" est l'acronyme de Cascading Style Sheet, ou feuille de style en cascade, car on peut définir ainsi autant que feuilles de style que bon nous semble, en les chargeant les unes après les autres. Le dernier style rencontré pour un élément est celui qui est appliqué.
On peut définir ainsi, par exemple, une feuille de style globale pour l'ensemble d'un site, puis des feuilles de style plus spécifiques pour des pages particulières, y rajouter une feuille de style à charger seulement si la page est regardée sur un ordinateur avec un grand écran, une autre destinée à la mise en page pour une lecture sur une tablette à écran plus réduit, une autre encore pour les smartphones, …

Le style défini peut viser des élements généraux html, comme les titres de section h1, h2, …, mais aussi des éléments plus ciblés.

Précisions de style: désigner les éléments et les décorer

On peut définir désigner des éléments de deux façons:
  • en leur donnant un nom, unique et spécifique (un seul et unique élément peut porter un même nom).
    On parle plus précisément d'identificateur ou id.
  • en les regroupant dans une classe, ou class.
    On définit une classe et les propriétés graphiques qu'on souhaite. Tous les éléments désignés comme ayant cette classe reçoivent ces propriétés.
    Un élément peut aussi appartenir à plusieurs classes, il a alors toutes les propriétés de style de toutes ses classes.
Un exemple de désignation et de déclaration dans le fichier html:
page1.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <link rel="stylesheet" href="style.css" >
  </head>

  <body>
    <h1>LE TITRE</h1>

    <h2>Le 1er sous-titre</h2>
    <p id="para1">Le premier paragraphe</p>

    <div id="elt1">Un élément idenfié personnellement</div>

    <div class="clg">Un premier paragraphe avec la classe nommée "clg"</div>


    <h2 id="sstitre2">Le 2ème sous-titre</h2>
    <div class="clg">Un paragraphe comme un autre <br>
               du moins de la classe "clg"
    </div>
  </body>
</html>
et exemple de style, le fichier style.css (en css, les noms de classes sont précédées d'un point, et les noms d'iddentifiants d'un #)
style.css
h1 {font-size:1.3em;
    color:red;
    border:6px solid green
}
h2 {font-size:1.1em;color:blue}

#sstitre2 {text-decoration:underline;color:green}
#elt1 {background-color:lightblue}
.clg {background-color:lightgreen;margin-left:1.5em;border-left:2px solid green}
Les propriétés se comprennent en général assez aisément lorsqu'on les lit. Elle n'en sont pas pour autant évidentes à inventer... le web regorge de sites, tutoriels et autres cours listant et explicitant tout ceci, le fonctionnement de base étant ceui décrit jusque là.

Exercice 2
Créer la page suivante, avec un fichier html et un fichier css séparé:

TITRE !
Sous-titre

Ma photo fétiche:


image/photo...



Ma 2ème photo:


image/photo...




Mes derniers livres lus:
  • livre 1
  • livre 2
  • ...

Mes derniers films vus:
  • film 1
  • film 2
  • ...


Auteur: moi

Le texte "Auteur: moi", en bas de page, sera un lien vers une autre page dans un fichier nommé moi.html (voir ci-dessous pour les liens)


Nom prénom
Surnoms ou autre...
A propos de moi:
  • ...
  • ...
  • ...
  • ...


Retour
Cette fois, en bas de page, le texte "Retour" est lien vers la première page.

Liens hypertextes

La possibilité de mettre des liens hypertextes dans un document est un avantage fondamental qu'ont les documents "électroniques" sur ceux imprimés sur papier. Un lien permet de naviguer rapidement entre documents ou même à un autre point sur la même page. On distingue justement les deux cas.

Liens externes

Un lien se définit avec la balise a, l'option href permet de spécifier la destination. Par exemple 
Un <a href="http://xymaths.free.fr">lien vers des maths</a>
Ce lien pointe vers un autre site, ou du moins vers une autre page.

Liens internes

Comme on l'a vu plus tôt pour l'application de style à des éléments singuliers, on peut donner un identifiant à tout élément d'une page. Cet identifiant s'appelle aussi une ancre et permet de spécifier un point sur la page. 
<p id="pararef">Un paragraphe avec du texte<br> qui a l'identifiant "pararef"</p>

et le lien qu'on peut placer où on souhaite dans la même page 


Le lien vers <a href="#pararef">mon paragraphe</a>


Exercice 3
  1. Reprende la page créée à l'exercice précédent et faire en sorte que chaque livre/film cité soit aussi un lien vers une page extérieure en parlant, d'un site de votre choix.
  2. Compléter cette page par un sommaire en haut de page (sous les titre et sous-titre), renvoyant par un lien vers chaque partie de la page.


Lien
LongPage: h2: 3 - h3: 8