2.2 Concevoir une page Web

Pour créer une page Web, il ne faut pas grand-chose. Un éditeur de texte tel que le Bloc-notes de Windows (ou Notepad en anglais) suffit. Un éditeur de texte est un programme qui ne faite qu’afficher ou modifier des fichiers contenant que des caractères (aucune mise en forme).

Le B.A.-BA

Créer un fichier .htm

Ouvrez le Bloc-Notes.
Écrivez-y une phrase.
Enregistrez le fichier avec l’extension .htm ou .html (ça revient au même).
Ouvrez le fichier enregistré en double-cliquant dessus

Et voila ! Vous avez créé un fichier .htm qui sera ouvert par votre navigateur !

Hein ? Quoi ? C’est tout ? 😮

Non, bien sûr. En fait, vous n’avez pas (encore) créé une page web. Si vous avez bien un fichier qui a l’extension d’une page web, il n’en a pas la structure. Le navigateur, en l’absence d’autres indications, se contente de vous afficher le texte que vous y avez mis.

Les balises HTML

Il va maintenant falloir « structure » votre page web, grâce au langage HTML (HyperText Markup Language).

Heu… hypertext je comprends à peu près. language aussi, mais markup, ça veut dire quoi ?

Ça veut dire balisage. Le contenu d’une page HTML contient des balises qui vont structurer son contenu. Par exemple :


<h1>Titre de la page</h1>
<h2>Titre de mon paragraphe</h2>
<p>Voici le contenu de mon paragraphe.</p>

Retrouver sur w3schools.com l’ensemble des balises du langage HTML5.

Ligne 1 : le texte « Titre de la page » a été placé entre des balises h1. Cela indique au navigateur que ce qui se situe entre ces balises (une balise ouvrante <h1> et une balise fermante </h1>) est un titre de niveau 1, c’est-à-dire le plus global possible.

Ligne 2 : la balise h2 indique un titre de niveau 2 (il y a 6 niveaux de titre possibles, de h1 à h6).

Ligne 3 : la balise p indique qu’il s’agit d’un paragraphe.

Mais pourquoi il faut « fermer » les balises ? On fait un retour à la ligne, ça suffit, non ?

Eh non ! Le navigateur, qui interprète le langage HTML pour vous l’afficher correctement sur votre écran, ne tient aucun compte ni des retours à la ligne, ni des espaces multiples, ni des tabulations.
Rappelez-vous qu’une page HTML doit s’adapter à des tailles très diverses d’écrans ou de fenêtres, contrairement à un logiciel de traitement de texte dont la finalité est d’imprimer du texte sur une feuille de papier qui a des dimensions fixées à l’avance. Dans le cas d’une page web, le navigateur décide lui-même quand il doit faire un retour à la ligne. Vous pourriez très bien écrire le code ci-dessus de cette manière :


<h1>Titre de la page</h1><h2>Titre de mon paragraphe</h2><p>Voici le contenu de mon paragraphe.</p>

Vous obtiendriez strictement le même résultat. C’est juste moins lisible pour le codeur.

Ah bon ? Mais comment le navigateur sait qu’il doit passer à la ligne après le titre en h1 ? Et puis si on veut pas qu’il passe à la ligne ? C’est quand-même pas le navigateur qui décide, si ? 😠

Oui et non. Il décide pour vous sauf si vous lui dites le contraire. C’est d’ailleurs un très vaste sujet qui ne fait pas seulement appel au langage HTML, mais à un autre langage, le langage CSS (Cascading Style Sheets) qui se charge de l’apparence de votre texte. On s’y intéressera un petit peu plus tard dans ce chapitre.

Pour résumer très simplement, le contenu de la plupart des balises sont affichées sous forme de blocs sur votre page web, et les blocs viennent les uns à la suite des autres du haut vers le bas. Ça, c’est le fonctionnement par défaut. On peut bien-sûr en décider autrement, mais il faudra alors le spécifier au navigateur, via le langage CSS.

Mais si je veux un retour à la ligne en plein milieu de mon paragraphe, je fais quoi ?

Eh bien on utilise pour cela la balise <br/>. Elle sert à indiquer qu’à cet endroit précis, on veut un retour à la ligne quoiqu’il se passe. C’est une balise unique, ou « auto-fermante » (on ne marque pas le début et la fin d’un retour à la ligne, ça n’a pas de sens…).
On repère les balises auto-fermantes grâce au slash (/) qu’elles contiennent avant le chevron fermant (>). Il n’y en a pas beaucoup : <br/> pour un retour à la ligne et <img/> pour insérer une image sont les plus courantes.


<h1>Titre de la page</h1>
<h2>Titre de mon paragraphe</h2>
<p>Voici le contenu de mon paragraphe.<br/>
et une deuxième ligne pour mon paragraphe.</p>

Ouvrez le fichier que vous avez créé tout à l’heure avec le Bloc-Notes (clic-droit > ouvrir avec …).
Écrivez-y un texte avec un titre de niveau 1 et deux paragraphes (avec chacun un titre de niveau 2) incluant au moins un retour à la ligne.
Enregistrez le fichier. Inutile de fermer le Bloc-Notes.
Ouvrez le fichier enregistré en double-cliquant dessus (ou rafraîchissez la page sur votre navigateur, pour qu’il puisse mettre à jour la page.

Structure d’une page HTML

Étudier et modifier une page HTML simple.

Nous n’avons parlé, pour l’instant, que du contenu affiché de la page. Mais il y a d’autres informations à faire figurer. Regardez le code qui suit. Il s’agit du plus petit code possible pour écrire une page html correctement. C’est une page qui n’affiche... rien ! 😁

Le plus petit code possible


<!DOCTYPE html>
<html lang='fr'>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" />
	<title>Titre de la page</title>
</head>
<body>
	<!-- Ici, le contenu de la page -->
</body>
</html>

Houlà, c’est compliqué, faut retenir tout ça avant de faire une page ?

Non. Inutile d’encombrer sa mémoire avec ça. Vous ferez comme tous les informaticiens : vous savez qu’il faut mettre ce code, vous savez où le trouver (dans mon cours 😁), vous viendrez faire un copier-coller lorsque ça sera nécessaire. Par contre, il faut comprendre ce que dit ce code pour pouvoir l’adapter à vos besoins. Analysons-le ligne par ligne :

Analyse du code minimum

Ligne 1 : on déclare que le document est écrit dans la version 5 du langage HTML (c’est la 5 qui est en vigueur depuis le 28 octobre 2014)

Ligne 2 : la balise ouvrante <html> indique que c’est à partir de ce point que débute le code HTML. Noter que cette balise possède un attribut optionnel : lang='fr', qui indique que l’ensemble de la page est en français.

Ligne 3 : entre les balises <head> se trouvent des informations à destination du navigateur, que l’on appelle « en-tête » du fichier. Il peut y en avoir énormément, mais ici on ne présente que celles qui sont essentielles.

Ligne 4 : La balise <meta/> contient des méta-données, c’est-à-dire des informations à propos de la page html. Ici, il s’agit d’information à propos de l’encodage des caractères utilisés sur la page (encodage utf-8), sous forme d’attribut de la balise <meta/>. Remarquez au passage qu’il s’agit d’une balise auto-fermante. On indique au navigateur que l’encodage utilisé est utf-8 et celui-ci peut afficher les bons caractères sans se tromper.

Vaste sujet que celui de l’encodage des caractères. Retenez juste qu’il existe plusieurs manières de coder des caractères (a, à, &, 5…) par une suite de 0 et de 1 (parce qu’au bout du compte, l’ordinateur ne manipule que des 0 et des 1 !). Utiliser un encodage différents pour décoder ces 0 et ces 1 que celui qui a servi à les encoder conduit à des affichages « bizarres » de certains caractères spéciaux, notamment les caractères accentuÃ©s. 😊

Ligne 5 : cette balise sert à préciser où se trouver le fichier contenant le code CSS qui va servir à mettre en forme notre page web (taille des polices, couleurs, etc…)

Ligne 6 : <title> contient le titre de la page ou du site. Celui qui s’affiche sur l’onglet de votre navigateur.

Ligne 8 : Enfin, entre les balises <body>, vous mettez tout ce que votre page est censée afficher. C’est là le cœur de la page. Remarquer que, dans l’exemple donné ici, ce qui se trouve entre  est du commentaire. Il n’apparaîtra pas sur la page affichée par le navigateur.

Ah bon ? Mais ça sert à rien alors ?

Si ! Généralement, le codeur s’en sert pour expliquer ou préciser des choses dans son code, ou encore pour bien délimiter la page. Parce que bon, le code d’une page html, si elle est grande, peut vite devenir un gros fouilli dans lequel il est difficile de se repérer. La preuve : enregistrer la page Web que vous lisez sur votre ordinateur. Puis ouvrez-là avec le Bloc-notes (clic-droit > Ouvrir avec …). Bon courage pour repérer un passage particulier. Et encore, il s’agit d’une page très simple…

Comment on fait pour ne pas s’y perdre, là-dedans ?😵

Écrire du code clairement

Voici plusieurs astuces :

Ne pas utiliser le Bloc-notes, mais un logiciel spécialisé dans l’écriture de code, qui permettent la coloration syntaxique (c’est-à-dire qu’ils mettent en couleurs certains mots-clés du langage dans lequel vous êtes en train d’écrire). Par exemple, Notepad++.
Ne pas hésiter à sauter des lignes et à jouer de la tabulation (la touche ↹ à gauche de votre clavier) pour bien séparer les différents éléments. Rappelez-vous que ni le retour à la ligne, ni les tabulations ne sont prises en compte par le navigateur. Donc la mise en forme de votre code ne sert qu’à le rendre plus clair.
Insérer parfois des commentaires.
Lorsque vous ouvrez une balise dans laquelle vous allez mettre beaucoup de contenu, ouvrez-là, fermez-là immédiatement et tapez votre contenu à l’intérieur des balises. De cette manière, vous serez sûr de ne pas oublier de la fermer.

Téléchargez Notepad++ si vous ne l’avez pas encore (ou un autre logiciel s’il à votre préférence.
Créez une page web complète, qui devra comporter un titre de page, ainsi que deux paragraphes avec leur titre respectif. Si vous manquez d’inspiration sur le contenu, parlez-moi de votre hobby : depuis combien de temps le pratiquez-vous, que faites-vous en ce moment. Vous pouvez choisir un autre sujet si vous avez un hobby inavouable, comme crever les yeux des petits 🐈.
Sauvegarder la page Web sur le bureau.
Ouvrez-la avec le navigateur.

Remarquez que vous pouvez accéder à une page web sans être sur le Web. 😅
Votre page web est « locale », c’est-à-dire sur votre ordinateur et non pas sur un serveur distant. Il est courant de travailler en local lors de la création d’un site, avant sa mise en ligne.

Liens hypertexte

Le Web sans lien hypertexte, c’est comme une toile d’araignée sans fil. 🕸

La balise <a>

Pour insérer un lien hypertexte, vous utilisez la balise <a> autour du texte que vous voulez transformer en lien. Il faut bien sûr penser à mettre l’attribut qui va contenir l’adresse du lien. Cet attribut est href. Voici un exemple :


<p>Voici un paragraphe dans lequel je veux
insérer <a href='http://www.exemple.com'>un lien</a></p>

Oui, mais si je veux faire un lien vers une page de mon site et qu’il n’est pas encore en ligne, je n’ai pas d’adresse du genre http://www.exemple.com. Je fais comment ? 😔

Pas de panique. On ne se sert d’une adresse complète que si notre lien pointe vers un autre site. Si on a besoin de faire un lien vers une autre page de notre propre site, on va utiliser quelque chose de plus simple : les adresses relatives ! Souvenez-vous, je vous en ai déjà parlé…

Adresse absolue et adresse relative

Supposons que votre site se trouve à l’adresse http://www.monsite.rs. Si, dans votre page d’accueil index.html qui se trouve dans le dossier racine (/), vous voulez créer un lien vers la page 1 qui se trouve dans le dossier 2, vous avez deux possibilités:

Utiliser une adresse absolue : http://www.monsite.rs/dossier2/page1.htm
Utiliser une adresse relative : dossier2/page1.htm

Mais pourquoi ça s’appelle une adresse relative. Elle est juste plus courte, c’est tout !

Dans notre cas, oui ! Mais ce n’est pas ça qui compte. L’adresse est dite relative car elle décrit le chemin depuis l’emplacement du fichier où a été écrit le lien. Ici, notre lien part du dossier racine où se trouve le fichier index.html. À partir de ce dossier, il faut suivre le chemin qui est indiqué (dossier2/page1.htm) pour trouver la page désirée.

Et si, depuis la page 1, je veux faire un lien vers le fichier image1.jpg, je fais comment ?

Eh bien depuis le dossier 2 où se trouve notre page 1, il faut … remonter dans le dossier racine. Et pour faire ça, le code est ../. L’adresse relative de l’image 1 par rapport au dossier 2 est : ../dossier1/images/image1.jpg

Voilà, vous savez l’essentiel ! Vous allez maintenant mettre ça en pratique

Ajouter, dans votre page web, un lien vers l’article wikipédia qui parle de votre hobby (ou vers une autre page si vous préférez).
Vérifiez que votre lien fonctionne correctement.

OK. J’ai ma page, mais elle est moche. Elle ne ressemble vraiment pas à ce qu’on trouve sur internet. 😔

C’est normal ! On ne s’est intéressé qu’à son contenu. On n’a pas encore touché à la mise en forme. Votre navigateur l’a mise en forme selon des paramètres très simples qu’il applique en l’absence de tout autre indication. Pour une jolie mise en forme, il va falloir qu’on utilise un autre langage : le CSS.
Le contenu et la forme sont complètement dissocés lorsqu’on crée un site web.

Le langage CSS

Le langage CSS permet de spécifier la mise en forme (couleur de police, largeur ou hauteur du bloc, marges, alignement …) de notre page

Ce code est généralement mis dans un fichier .css qui sera appelé par la page Web.

Pour créer un fichier CSS, prenez le Bloc-notes, ou mieux, Notepad++. Enregistrez un fichier vide avec l’extension .css. Rouvrez-le. Vous êtes maintenant prêt à écrire vos premières lignes de CSS.

Logo du langage CSS 3.

La structure de base

Nous souhaitons que les titres de niveau 1 (ce qui se trouve entre les balises <h1> et </h1>) soient affichés en rouge et centrés sur la page. Comment faire ?
Voici le code ci-dessous qui correspond à ce que nous voulons.


h1 {color: red; text-align: center;}

Les retours à la ligne, les tabulations et les espaces ne sont pas pris en compte en CSS. Ils ne sont là que pour rendre le code plus clair. N’hésitez pas à vous en servir si vous définissez un style avec de nombreuses propriétés. Vous pouvez, par exemple, accéder au fichier CSS de ce site en cliquant sur ce lien.

Remarquer la structure : h1 {…}. C’est la structure de base du CSS. On précise le nom de la balise que l’on souhaite mettre en forme.

À l’intérieur des accolades, nous avons une liste de propriétés (color et text-align) auxquelles nous attribuons des valeurs (red et center). Chaque couple propriété: valeur est séparée par un point-virgule.

Il existe de très nombreuses propriétés, vous vous en doutez bien. L’objectif de ce chapitre n’est pas de vous les apprendre, mais de vous permettre de vous y retrouver dans un fichier CSS.

Retrouver sur w3schools.com l’ensemble des références du langage CSS3

Bien-sûr, il y a d’autres fonctionnalités du CSS qui rendent ce langage très puissant.
Je vais juste vous présenter un « outil » très utilisé : les classes.

Les classes

Imaginons que, dans votre page Web, vous vouliez que certaines parties soient en rouge, mais pas toutes. Aussi bien des titres que des paragraphes. Vous pouvez alors définir la classe « rouge » comme ceci :


.rouge {color: red;}

Remarquez le point que nous avons mis devant rouge. Cela signifie que nous ne parlons pas d’une balise HTML, mais d’une classe. Comment s’en servir dans la page HTML ? Voyez l’exemple ci-dessous :


<h1>Titre de la page</h1>
<h1>Partie 1</h1>
<p>Voici le contenu de mon premier paragraphe.</p>

<h1 class='rouge'>Partie 2</h1>
<p>Le premier paragraphe de la partie 2</p>
<p class='rouge'>Le deuxième paragraphe de la partie 2</p>

Devinez ce qui va apparaître en rouge ? 😊

Créez un fichier .css, ajouter le dans le même dossier que celui de votre page web et assurez-vous que la page web puisse bien trouver ce fichier (voir Structure de base).
Mettez en forme votre page web. N’hésitez pas à faire des recherches sur internet pour touver comment obtenir la mise en forme que vous souhaitez. Voici quelques propriétés, en plus de color et de text-align, que vous pouvez utiliser : background-color, margin, border, font-family, font-size … Je vous laisse le soin de chercher sur internet quelles sont les valeurs que peuvent prendre ces propriétés.

Pour aller plus loin

Pour ceux que ça intéresse, vous trouverez sur le site openclassrooms.com un cours complet pour débutant sur le HTML5 et le CSS3.

Créer une vraie page Web (noté)

Vous allez créer une page web qui ressemble à peu près à ceci :

Vous pouvez bien-sûr choisir d’autres couleurs. Mais il doit y avoir :

Un titre de site sur la partie haute de la page ;
Une « barre de navigation » sous le titre avec au moins deux liens pointant vers d’autres pages ;
Un texte central avec son titre ;
Un « pied de page » ;

Le contenu de votre page n’a aucune importance. Vous pouvez mettre un Lorem ipsum comme sur l’image.

Vous serez noté sur :

Le code html qui doit utiliser les balises <h1>, <h2>, <nav>, <p>, <a> et <footer> ;
La présence de liens qui fonctionnent ;
Une jolie mise en forme CSS (je ne vous noterai pas sur le choix des couleurs, mais sur l’utilisation correcte des fonctionnalités de base du CSS ;

N’hésitez pas à vous aider en faisant des recherches sur le Web, c’est le but !

Vous m’enverrez par mail vos deux fichiers html et css avant le 13 octobre 22:00.

Tout copier-coller de code sera considéré comme une absence de travail.

Langages de programmation dédiés au Web

Inspecter le code d’une page hébergée par un serveur et distinguer ce qui est exécuté par le client et par le serveur.

Une page interactive permet, par exemple, de compléter un formulaire, de sélectionner des objets, des dates, etc.

Le HTML ne permet aucune interactivité avec l’utilisateur. Pour le CSS, cette interactivité est limitée à des changements de mise en forme.

Langage côté serveur

Un langage côté serveur est exécuté par… le serveur 😊
Le langage le plus utilisé est le PHP, créé en 1994. C’est un langage libre et gratuit. Il en existe d’autres (Python, JNode, ASP…)

Les instructions sont mises dans la page Web et exécutées par le serveur avant que ce dernier envoie la page au client.

Voici un exemple d’une ligne extraite d’une page web en PHP :


<p>Nous sommes le <?php echo date('j/m/Y'); ?></p>

Les instructions PHP se trouvent entre les balises <?php ?>. Lorsque le client demande la page qui contient cette ligne, le serveur va exécuter le code PHP, ce qui va lui faire remplacer ce qui se trouve entre ces balises par la date du jour. Le client ne reçoit jamais ce code, mais seulement ce par quoi le serveur l’a remplacé.

Langage de programmation côté serveur – © Openclassrooms.com

Le PHP est un langage de programmation complet. Il permet de faire tout ce qu’un autre langage de programmation peut faire (manipulation de variables, conditions, boucles etc…).
Il permet également de faire des requêtes sur une base de données. Lorsque vous allez sur un site de commerce en ligne, par exemple, les informations sur les articles sont stockées dans une base de données. Si, par exemple, vous souhaitez voir tous les ordinateurs portables avec un écran de 14" à moins de 800 €, des instructions PHP vont permettre au serveur d’utiliser les paramètres que vous avez demandés (écran de 14", prix < 800 €) pour chercher les articles qui correspondent à ces conditions dans la base de données, puis va afficher les résultats dans une page web qu’il va envoyer au client (votre ordinateur).

Langage côté client

C’est le deuxième type de langage. Pour cela, le code est envoyé au client, et c’est le client qui l’exécute. Le langage utilisé est le langage Javascript, souvent abrégé JS.

Voici un exemple de code Javascript qui produit le même résultat que ce que nous avons vu plus haut en PHP :


<p id='date'>Nous sommes le </p>
<script>
	var today = new Date();
	document.getElementById('date').textContent + =
	today.getDate() + '/' +
	today.getMonth() + '/' +
	today.getFullYear();
</script>

L’avantage d’un langage côté client est sa rapidité d’exécution. En effet, il n’y a pas besoin de dialoguer avec le serveur. Les inconvénients sont que :

L’utilisateur peut voir le code de la page. Vous ne pourrez donc pas garder secret vos algorithmes géniaux… 😊
Comme le code s’exécute côté client, il n’est pas possible de changer le contenu du site, et notamment une base de données, pour des raisons évidentes de sécurité.
Son écriture est plus fastidieuse que du PHP. Mais il existe des solutions à ce désavantage, en utilisant une bibliothèque, par exemple.
Un utilisateur extrêmement prudent peut désactiver l’exécution du Javascript sur son navigateur (nous y reviendrons plus tard). Et là, si votre site repose sur ce langage, il ne marchera plus.

Mais la rapidité de réaction d’un site qui utilise le Javascript est un avantage majeur. Le site que vous lisez ne fait appel qu’à du Javascript (en plus, bien entendu, du HTML et du CSS). Par exemple, lorsque vous cliquez sur une image, celle-ci apparaît en grand sur un fond noir. Ceci est codé en Javascript. Il est possible d’obtenir le même résultat en PHP, mais ça veut dire qu’au moment où vous cliquez sur l’image, il faut faire une requête sur le serveur, et pareil lorsque vous voulez revenir à la page de départ.

Physique & Chimie au lycée

Cours de physique-chimie pour les classes de 1^ère et Terminale