É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 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étiques.
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 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, ou mieux notepad++, ou sous linux: gedit ou emacs.

Le conteu: du texte brut

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 test1.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 dans le menu "fichier -> Ouvrir".

La page s'ouvre et le résultat est … décevant … 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 - Balise 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 pour déclarer et décrire chaque élément.
Par exemple, la structure 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 la balise p, et une image avec la balise img. Le retour à la ligne, et saut de ligne, se fait avec la balise br (pour break). Enfin, chaque balise se note entre < >, peut avoir des options (par exemple <img width=…), et pour beaucoup de balises, il y a une balise ouvrante, par exemple <h1>, et une fermante, </h1>.

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

<div>par Moi: ...</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">

et des liens vers d'autres idées sur d'autres pages
<a href="xymaths.fr">
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: 
<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.

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: 
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) à notre fichier test1.html: 
<head>
  <link rel="stylesheet" href="style.css" >
</head>

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

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

... 

...
fichier qu'on peut maintenant compléter, par d'autres méta-données (des données supplémentaires sur le document, qui ne sont pas affichées directement dans celui-ci), ainsi que des balises html qui délimitent correctement chaque bloc: 
<!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.

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&eccirc;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: 
<!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 
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éralement 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:
image ? ou page avec source bloquée ? ou seulement un descriptif du rendu ?

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="xymaths.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
Créer une page avec un titre h1, trois sous-sections h2, contenant du texte, des images,…
Insérer en haut de cette page un menu: un lien (interne) vers chaque partie.


Lien

LongPage: h2: 3 - h3: 7