Concevoir une page WEB statique

1. Objectif de l’activité

Apprendre à concevoir une page web en utilisant HTML5
Apprendre à réaliser le disign d’une page web en utilisant CCS3
Réaliser une page web d’affichage de résultats de mesures d’une balise de radioactivité dans une page web statique.

Figure 1. Résultat à obtenir.

2. HTML5

Le HTML est le langage de base des pages webs qui consituent les sites internet. Il est simple et se maitrise assez vite. Découvrons pourquoi le HTML5 est incontournable, quels sont ses avantages et quels sont ses limites.

2.1. Comment accède-t-on à une page web ?

L’utilisateur écrit l’adresse Web (URL).
Le navigateur envoie l’adresse Web de la page.
Le serveur répond en renvoyant le code de la page au navigateur.
Le navigateur interprète le code et affiche la page Web.

Un navigateur Internet est un logiciel informatique qui permet à un utilisateur d'accéder à l’Internet. Les plus connus sont Microsoft Edge, Safari, Firefox, Chrome, … Au coeur du logiciel, il y a un moteur de rendu visuel qui interprète l’HTML contenu dans une page Internet.

2.2. A quoi sert HTML5 ?

Le HTML5 est un langage qui repose sur le principe de balises imbriquées. En résumé, il sert à indiquer au navigateur comment afficher la page web qui pourra contenir aussi bien du texte, des images, des vidéos, des animations, ….

HTML est l’abréviation de HyperText Markup Language, soit en français « langage de balisage hypertexte ». Ce langage informatique n’est pas réellement un langage de programmation mais un langage de balisage. En d’autres mots c’est un format de données qui permet de concevoir une page web.

Une page Web est une ressource du World Wide Web conçue pour être consultée par des visiteurs à l’aide d’un navigateur Web (Internet Explorer, Mozilla Firefox etc.). Elle a une adresse Web. Techniquement, une page Web est souvent constituée d’un document en HyperText Mark-Up Language (HTML) et d’images. Cependant, tout type de ressources ou d’assemblages de ressources, textuelles, visuelles, sonores, logicielles, peuvent constituer une page Web.

— Wikipedia

2.3. Avantages

Un des avantages du HTML5 est sa compatibilité. Depuis que les différents éditeurs de navigateur (microsoft, mozilla …) se sont rapprochés, la portabilité entre-eux est bien meilleur que pour les précédentes versions du HTML. Lorsqu’une page web est codée en HTML5, théoriquement, elle s’affichera de la même facon quelque soit le navigateur utilisé, l’OS (windows, mac, linux …) et le support (pc, smartphone, tablette …).

En effectuant un clic droit sur une page WEB, on accède à un menu contextuel et à la possibilité de visualiser le code de la page.

Figure 2. Accéder au code HTML d’une page web

Un autre avantage du HMLT5 est sa simplicité relative, le jeu de balises à utiliser pour constituer une page étant assez limité.

2.4. Inconvénients

Si le principale avantage du HTML5 est sa simplicité, il est aussi relativement limité. Il ne permet pas par exemple de :

Gérer le design d’une page web
Utiliser une base de données
Traiter un formulaire pour l’envoyer
Protéger une page par mot de passe
Etc ….

2.5. Les langages complémentaires au HTML5

D’autre langage, complémentaire au HTML5 seront nécessaire pour réaliser de belles pages web. Il pourront-être soit directement intégré dans la page soit écrits sur une autre page et reliés à la page codée en HTML5. Parmi ces principaux langages, ont retrouve :

CSS : Le CSS, ou Cascading Style Sheet, sert à la mise en page. On dissocie le contenue qui est codé en HTML5 et la design qui se fait en CSS. Il vou servira par exemple à indiquer la police de caractères, la couleur, l’arrière-plan …
Javascript : Le Javascript sert principalement à agir sur le comportement du navigateur. Avec ce langage, vous pourrez par exemple afficher une fenêtre d’alerte lorsqu’on clique sur un lien, mettre le site web dans les favoris, imprimer la page …
PHP : Le PHP est un langage très complet avec de nombreuse fonctions. Il permet de faire le lien entre votre site et une base de données, d’afficher son contenue de façon dynamique, de gérer des variables, de traiter des formulaires …
SQL : SQL est le langage pour agir sur vos base de données. Si le PHP fais le lien entre elles et votre site web, il vous faudra coder en SQL pour effectué des actions (ajouter, supprimer, modifier, trier, rechercher …) sur celles-ci.

2.6. Outils de développement

Si un simple bloc-note peut suffire pour coder en HTML5 ou CSS3, d’autres alternatives existent et apportent souvent un meilleur confort, en premier lieu, la coloration syntaxique, l’auto-complétion, le formatage du code (gestion des indentations) et la gestion du jeu de caractères (utf-8).

2.6.1. Editeurs payant :

Linux/Win/Mac : webstorm (gratuit pour prof et étudiant) https://www.jetbrains.com/webstorm/
mac : bbedit (éditeur historique) https://www.barebones.com/products/bbedit/
Linux/Win/Mac : sublime text 3 https://www.sublimetext.com

2.6.2. Editeurs gratuits :

Linux/Win/Mac : brackets http://brackets.io/
Linux/Win/Mac : visual studio https://code.visualstudio.com/
Linux/Win/Mac : atom https://atom.io/
mac : textmate 2 : https://github.com/textmate/textmate
Win : notepad++ https://notepad-plus-plus.org/fr/

2.6.3. Editeurs "rustiques" :

Linux/Win/Mac : emacs (Attention, c’est puissant mais déroutant. Il y a 20 ans, je lisais mon mail avec) https://www.gnu.org/software/emacs/
Linux/Win/Mac : vim (Attention, c’est déroutant mais puissant) https://www.vim.org/

2.6.4. IDE online https://repl.it/

Pour un premier exercice, nous allons utiliser un outil de développement online https://repl.it/. Repl est une interface de développement web qui permet de coder en ligne.

Cliquer sur le lien afin d’accéder à la page web https://repl.it/. Cliquer ensuite sur + new repl en haut à gauche de la page, sélectionner HTML, CSS, JS. Cliquer sur Create repl.

2.6.5. Documentation

On trouve beaucoup de tutoriels et de cours sur internet concernant le HTML. Il faut cependant faire attention de bien avoir à faire à la dernière version HTML5.

Parmis les meilleurs, on peut citer :

https://www.w3schools.com/
https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web (en français) *

Figure 3. Configurer repl pour développer en HTML, CSS et JavaScript

Dans la partie suivante, vous allez vous familiariser avec les balises nécessaires à la conception de la structure de la page web décrite dans le cahier des charges.

3. Les balises

Une balise est un élément de texte (un nom) encadrée par le caractère inférieur ("<") et le caractère supérieur (">"). Exemple : <strong> HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d’un élément.

Les balises fonctionnent le plus souvent par paire. Dans l’exemple précédent, la balise <strong> est associée à </strong> pour donner de la force au texte contenu et l’afficher en gras.

<strong> est la balise d’ouverture </strong> est la balise de fermeture

balises

Dans le cas général, une paire de balise s’écrira :

<nomBalise> Partie à mettre en forme </nomBalise>

4. Travail à faire : Un premier test pour comprendre l’action des balises

Changer le titre de votre page web. Ajoutez la ligne suivante dans le coprs (entre les balises body) puis observer le résultat dans un navigateur.

<h1> Ceci est une page HTML</h1>

5. Structure d’une page HTML

Une page html se compose de deux parties : l’en-tête (head) et le corps (body).

page HTML de base créer par repl

<!DOCTYPE html>
<html>
  <head> (1)
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body> (2)
    <script src="script.js"></script>
  </body>
</html>

1	l’en-tête (head)
2	le corps (body)

Le code commence par la déclaration du Doctype :

Un Doctype est une ligne de code servant a indiquer le type de document.
Le Doctype précise les normes définis que vous allez donc utilisé dans ce document.
Lorsqu’on code une page web en HTML, on doit définir son Doctype.
La ligne de code contenant le Doctype s’insère en tout début de page.
Le Doctype doit toujours se situer avant la balise <HTML>.
Pour un développeur, le Doctype sert à valider le code suivant les normes W3C choisis.
Son principal but est d’indiquer aux navigateur comment interpréter le document.

L’arrivé des navigateurs modernes à tous bouleversé. Ils ne portent que peu d’intérêt à cette balise.
HTML5 allant dans le sens de ses évolutions, le Doctype a été simplifié au maximum.

Pour vérifier la conformité du code selon les normes W3C, on pourra utiliser le site officiel : https://validator.w3.org/

6. Travail à faire : Une première page web

Ecrire du texte entre les balises body et tester votre page dans un navigateur.

On utilise généralement du faux texte(lorem ipsum) pour le remplissage :

Le lorem ipsum (également appelé faux-texte, lipsum, ou bolo bolo1) est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le faux-texte dès qu’il est prêt ou que la mise en page est achevée.

— wikipedia

Figure 4. Exemple sur repl.it

7. Mise en page

Historiquement, HTML ne proposait que deux catégories d’éléments : les éléments de niveau block et les éléments de niveau inline. Cette catégorisation autorise ou non certaines imbrications (par exemple un niveau inline ne peut pas contenir de niveau block).

Principe de l’emboitement

Tous les éléments possèdent des règles définissant clairement :

dans quel autre élément (parent) ils peuvent être placés,
quels autres éléments (enfants) ils peuvent contenir.

Une page web est souvent constituée d’un entête, de différentes sections dans lesquelles on a des articles et un pied de page. HTML5 introduit des balises neutres qui ne servent qu’à regrouper d’autres éléments HTML pour leur affecter un style CSS commun, ou pour interagir avec eux via le DOM (Document Object Model) à l’aide de scripts javascript.

Voici un schéma basique d’un découpage d’une page HTML5 :

Il ne s’agit pas d’une règle fixe à appliquer à tout document mais juste d’un exemple.

Le tableau suivant récapitule les éléments de section et leur usage le plus commun, tel que décrit par la spécification.

Nom	Détails
<section>	Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web
<article>	Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
<nav>	Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)
<aside>	Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header>	Section d’introduction d’un article, d’une autre section ou du document entier (en-tête de page).
<footer>	Section de conclusion d’une section ou d’un article, voire du document entier (pied de page).

Nom

Détails

<section>

Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web

<article>

Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension

<nav>

Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)

<aside>

Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.

<header>

Section d’introduction d’un article, d’une autre section ou du document entier (en-tête de page).

<footer>

Section de conclusion d’une section ou d’un article, voire du document entier (pied de page).

8. Construction d’une page HTML

8.1. Les titres

Les titres sont des éléments de type bloc qui fournissent une des premières approches permettant la structuration des documents. Ils permettent de distinguer les parties qui composeront le document suivant une hiérarchie. En html on associe à chaque définition de titre, une valeur entière comprise entre 1 et 6.

Les balises <h1>, </h1> définissent le titre de plus grande importance, et <h6>, < /h6> définissent le titre de plus petite importance.» (h pour heading)

Travail à faire : Tester le code html suivant :

Les balises de titrage

<h1> Du </h1>
<h2> plus </h2>
<h3> grand </h3>
<h4> au </h4>
<h5> plus </h5>
<h6> petit </h6>

8.2. Les paragraphes

Les paragraphes sont des éléments de type bloc qui permettent de structurer les informations ayant une relation directe entre elles. Un paragraphe se définit à l’aide des balises <p> et </p>

Travail à faire : Tester le code html suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Ma première page structurée</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <body>
		<h1> Construction d’une page html </h1>
		<h2> Les titres </h2>
		<p> Les titres sont une des premières approches... </p>
		<h2> Les paragraphes </h2>
		<p> Les paragraphes permettent de structurer... </p>
	</body>

  </body>
</html>

Figure 5. Page web structurée: le résultat

8.3. Attirer l’attention sur des parties du texte.

Il est possible d’attirer l’attention avec les balises suivantes :

<strong> </strong> : Indique une mise en exergue plus forte (renforcement)
<em> </em> : Indique une portion de texte affectée par une emphase

Ces deux balises sont de type inline.

Travail à faire : Modifier le corps du fichier html précédent pour qu’il apparaisse dans le navigateur comme dans l’image suivante:

Figure 6. Attirer l’attention

8.4. Les images

La balise d’inclusion d’image est la balise <img />. C’est balise de type inline. Elle nécessite la définition systématique de l’attribut src (source).

Remarque : <img /> est une balise unique. Il n’y a pas de balise de fermeture. Elle se termine par /.

Pour inclure une image située dans le répertoire de la page, il suffit d’écrire <img src="nomdufichier.ext" />

ext identifie le format du fichier (jpg, png, gif etc.). Dans le cas général, on écrit :

Les images en html

<img src="sous-répertoire/nom_du_fichier.ext" />
ou
<img src="url/de/l'image" />

Travail à faire : Modifier le corps du code html précédent afin d’ajouter une image trouvée sur le net.

8.5. Les liens

Les liens hypertextes sont des éléments d’une page HTML (soulignés lorsqu’il s’agit de texte) permettant aux utilisateurs de naviguer vers une nouvelle adresse lorsque l’on clique dessus. Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de naviguer :

vers un autre endroit du document (on parle alors d’une "ancre")
vers un fichier HTML situé à un emplacement différent sur la machine qui héberge la page.
vers une autre machine (adresse IP ou nom de domaine)

La balise d’inclusion de lien est la balise <a href="url"> … .. </a>

Les liens en html

<a href="../index.html">Retour vers l'index</a>

<a href="page1.html">Aller à la page 1</a>

<a href="#anchor1">Aller à la partie 1 dans cette page</a>

<a href="http://wikipedia.fr">La page de wikipedia</a>

...

<balise id="anchor1"> ... </balise>

8.6. Les attributs des balises

Comme cela a été réalisé avec la balise <img /> : Il est possible d’inclure des attributs (ou commutateurs) au niveau des balises. Ces attributs permettent de modifier localement certaines propriétés associées aux éléments définis.

Dans le cas général, la structure d’une balise utilisant des attributs est la suivante :

Accès aux attributs

<nomBalise attribut1= "valeur1" attribut2="valeur2"> Partie à mettre en forme </nomBalise>
Exemple :
<img src="images/html.jpg" width="50%" />

L’attribut id est souvent utilisé pour identifier une balise. C’est très pratique pour ensuite pouvoir appliquer uniquement à une balise désignée un style CSS particulier et pour pouvoir l’utilisée dans un script javascript.

Exemple balise identifiée

<section id="section1">
	...
</section>

L’attribut class est utilisé pour formater le contenu d’une balise à l’aide d’un style CSS commun.

Exemple balise formatée de manière identique

<article class="articles" id="article1">
	...
</article>

<article class="articles" id="article2">
	...
</article>

8.6.1. Redimensionnement d’une l’image à l’écran

Il est possible de redimensionner la taille de l’image à l’écran avec les attributs width (largeur) et height (hauteur) en fixant leur valeur en nombre de pixels ou en %.

Travail à faire : Ajouter les attributs nécessaires pour que l’image apparaisse réduite de 10%.

8.6.2. Un peu d’interactivité

Il est également possible de faire apparaitre un texte au passage de la souris avec l’attribut title.

Travail à faire : Faire apparaitre un texte approprié sur l’image au passage de la souris.

9. Travail à faire : Une vraie page web bien structurée

Modifier la première page web dans laquelle on a écrit du faux texte pour quelle soit structurée conformément au standard HTML5 :

Titre : niveau 1
section : id="section1"
- article : id="article1"
- article : id="article2"
- article : id="article3"
Pied de page : icone livre (https://www.w3schools.com/icons/icons_reference.asp "fa fa-book"), Prénom et nom de l’auteur, Lycée.

Ajouter avant le pied de page un lien vers la ressource https://fr.wikipedia.org/wiki/Lorem_ipsum
Ajouter avant le lien précédant l’image suivante :

9.1. Les tableaux

« En Html, un tableau est défini comme le regroupement d’un ensemble de lignes. Chaque ligne est composée d’un ensemble de cases appelées cellules. Le début d’un tableau est défini par la balise <table>, alors que la balise </table> le termine. ».

La balise <tr> introduit une nouvelle ligne, alors que la balise </tr> termine cette ligne.
Une cellule est définie par les balises <td> </td>.

9.1.1. Travail à faire : Copier le code html suivant et le tester dans un navigateur

Tableau simple:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title> Exemple de tableau </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <body>
		<table>
			<tr>			        <!-- début de la première ligne -->
				<td>Nom</td>	    <!-- première cellule-->
				<td>Prénom </td>	<!-- deuxième cellule-->
			</tr>			        <!-- fin de la première ligne -->

			<tr>			        <!-- début de la deuxième ligne -->
				<td>Rémi</td>	    <!-- première cellule-->
				<td>Georges</td>	<!-- deuxième cellule-->
			</tr>			        <!-- fin de la deuxième ligne -->
		</table>

	</body>

  </body>
</html>

Figure 7. Tableau simple: le résultat

Travail à faire : Modifier le tableau afin d’ajouter une colonne Pseudo et une ou deux lignes pour obtenir le résultat suivant:

Figure 8. Tableau à réaliser vous-même.

9.1.2. Fusion de cellules

Les lignes des tableaux réalisées précédemment ont le même nombre de cellules. Il est cependant très fréquent de devoir forcer une cellule à occuper plusieurs lignes ou plusieurs "colonnes". Pour cela, on effectue une fusion de plusieurs cellules.

Travail à faire : Copier le code html suivant et le tester dans un navigateur

Fusion des cellules

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title> Exemple de tableau </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <body>
		<table border=1">
			<tr>				            <!-- début de la première ligne -->
				<td colspan="2">Titre</td>	<!-- première cellule étendue sur deux colonnes-->
				<td> </td>			        < !—cellule 2 supprimée -->
			</tr>				<!-- fin de la première ligne -->

			<tr>				<!-- début de la deuxième ligne -->
				<td>Paragraphe 1</td>	<!-- première cellule-->
				<td rowspan="2">Image</td>	<!-- deuxième cellule étendue sur deux ligne-->
			</tr>				<!-- fin de la deuxième ligne -->

			<tr>				<!-- début de la troisième ligne -->
				<td>Paragraphe 2</td>	<!-- première cellule-->
				<td> </td>			< !—cellule 6 supprimée -->
			</tr>				<!-- fin de la troisième ligne -->
		</table>


	</body>

  </body>
</html>

Travail à faire : Les cellules du tableau ne sont pas fusionnées. Supprimer les cellules 2 et 6 pour que les fusions fonctionnent.

Figure 9. Fusion des cellules.

Le tableau initial a été défini avec six cellules. Le tableau final a été obtenu en fusionnant les cellules 1 et 2 (la cellule 2 disparait) et les cellules 4 et 6 (la cellule 6 disparaît)

Figure 10. Fusion des cellules.

La fusion horizontale est réalisée avec l’attribut colspan (on étend une cellule sur plusieurs colonnes).
La fusion verticale est réalisée avec l’attribut rowspan (on étend une cellule sur plusieurs lignes).

Il est fortement recommandé de construire la structure du tableau avant de « remplir » les cellules.

9.2. Travail à faire : Ecrire le code html afin de construire le tableau suivant:

Figure 11. Fusion des cellules résultat à obtenir.

le tableau doit être construit à partir d’un tableau de 4 lignes de 2 cellules.

10. Synthèse

On souhaite réaliser l’affichage de résultats de mesures dans une page web.

Figure 12. Synthèse: Résultat à obtenir.

11. Cahier des charges de la page à réaliser

Nom du fichier : index.html
Titre de la page : Domotique
Texte de la bannière : Surveillance de la radioactivité.
Pied de la page : Doit contenir vos nom, prénom, spécialité NSI, année scolaire, lycée.
Les deux cellules de la colonne de droite du tableau doivent être fusionnées.

Table 1. Adresses des images
	https://image.flaticon.com/icons/svg/1446/1446151.svg
	https://www.montrealsciencecentre.com/sites/default/files/styles/teaser_view/public/2017-04/de-quoi-est-compose-l-atome.png?itok=pKL1byWQ

11.1. Travail à faire : Ecrivez le code html de la page pour obtenir le résultat présenté figure 12

12. Aller plus loin…

Il est fortement conseiller de faire les exercices auto-corrigés du site de référence w3school.com :

https://www.w3schools.com/html/default.asp : Rappels de cours et tutoriels complets
https://www.w3schools.com/html/html_exercises.asp : Exercices auto-corrigés