Créer un site sur Alfred Hitchcock en HTML
Afin d'apprendre les bases du HTML, nous allons créer un petit site composé de 3 pages sur Alfred Hitchcock. Il contiendra une page d'accueil, une page biographique et une page filmographique.
S'organiser
Créer un site signifie bien s’organiser : les images ainsi que les pages HTML seront regroupées dans un dossier. En général, évitez les majuscules et les accents dans les noms des fichiers. À la fin de la création du projet, il suffira de mettre en ligne tout le contenu du dossier (avec FileZilla par exemple). Les images devront également être mises en ligne, car même si elles semblent être intégrées au site elles sont simplement reliées aux pages.
Création du dossier
Pour commencer : créez un dossier nommé Hitchcock. A l’intérieur seront enregistrées les pages HTML, les feuilles de style, les images, les polices de caractère, etc.
Les pages de notre site sont au format HTML :
- Elles ont pour extension .html ou .htm (l’extension en 4 lettres étant la plus récente)
- La page d'accueil doit obligatoirement s’appeler index.html, ce qui indique au serveur Web la première page à charger
Un sous dossier images contiendra les photos de notre site :
Les images ont pour extension :
- .jpg ou .jpeg : format d’image propriétaire, compressé avec perte, 16 millions de couleurs, approprié pour les photos.
- .gif : format d’image propriétaire, compressé sans perte, de 2 à 256 couleurs dont une transparente, possibilité d’animation, approprié pour les dessins animés.
- .png : format d’image libre, compressé sans perte, de 2 à 16 millions de couleurs, transparence graduelle, approprié pour les dessins et les logos.
- .webp : format d’image libre, compressé avec ou sans perte, de 2 à 16 millions de couleurs, transparence graduelle, approprié pour les photos, les dessins et les logos. Ce format étant 2 fois plus léger que le jpg, je le recommande pour tous les usages.
Nom des pages
Nous allons créer 3 pages comme le montre le tableau suivant :
| Page d’accueil | Page biographique | Page filmographique | |
| Nom du fichier | index.html | biographie.html | filmographie.html |
Conseil : donnez des noms explicites à vos pages html (filmographie.html plutôt que page2.html) car cela améliorera le référencement de votre site.
Code HTML
Les titres
Les titres de chaque page utiliseront la balise de titre <h1>.
- Le titre de la page d’accueil sera Alfred Hitchcock
- Le titre de la page biographique sera Biographie
- Le titre de la page filmographique sera Filmographie
Code HTML du titre de la page d’accueil :
<h1>Alfred Hitchcock</h1>Les textes
Les textes normaux utiliseront la balise de paragraphe <p>.
Code HTML du texte de la page d’accueil :
<p>Alfred Hitchcock est un réalisateur, scénariste et producteur de cinéma britannique, né le 13 août 1899 à Leytonstone (Londres) et mort le 29 avril 1980 à Bel Air (Los Angeles).</p>Les liens
Les liens utiliseront l’inévitable balise <a>. La cible de chaque lien sera précisée dans la valeur de l'attribut href. Pour faciliter la navigation entre les pages, chaque page contiendra les mêmes liens : Accueil, Biographie et Filmographie.
- Le lien Accueil pointera vers la page index.html
- Le lien Biographie pointera vers biographie.html
- Le lien Filmographie pointera vers filmographie.html
Code HTML des liens de toutes les pages :
<a href="index.html">Accueil</a>
<a href="biographie.html">Biographie</a>
<a href="filmographie.html">Filmographie</a>Par souci d'organisation, nous insérons les liens dans un conteneur <nav> pour signaler une zone de navigation.
<nav>
<a href="index.html">Accueil</a>
<a href="biographie.html">Biographie</a>
<a href="filmographie.html">Filmographie</a>
</nav>Les images ont un chemin
Les images utiliseront la balise <img>. Faites attention : la valeur de l’attribut src doit correspondre exactement au chemin menant vers le fichier image. Le point de référence est le dossier dans lequel se trouve votre page HTML, en l’occurrence le dossier Hitchcock. À la moindre erreur, l'image ne s'affichera pas.
- L’image de la page d’accueil s’appelle hitchcock-loupe.webp
- L’image de la page biographie s’appelle biographie-hitchcock.webp
- L’image de la page filmographie s’appelle la-mort-aux-trousses.webp
Le format des images est webp car il est plus léger que le format JPG. Le nom des images contient quelques mots clés descriptifs séparés par des tirets pour améliorer le référencement.
Code HTML de l’image de la page d’accueil :
<img src="images/hitchcock-loupe.webp" alt="Alfred Hitchcock avec une loupe">Le texte alternatif mentionné par l'attribut alt est obligatoire pour l'accessibilité et améliore aussi le référencement.
Type de document et zone d’entête <head>
En haut de chaque page se trouveront quelques balises d’entête dans lesquelles se trouvent des méta données et autres informations qui ne sont pas directement liées à l’affichage d'éléments dans la page web :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Alfred Hitchcock</title>
</head>La balise <!DOCTYPE html>
La balise <!DOCTYPE html> indique que le code est écrit en HTML 5, choix judicieux de votre professeur pour élaborer ce sublime site sur le maitre du suspense. Cette balise indique le type de document (HTML, XHTML, XML, etc.). Elle se positionne au tout début de la page, avant la balise <html>.
La balise <meta charset="utf-8">
Dans la zone d’entête délimitée par les balises <head>, on retrouvera la balise <meta charset="utf-8">. L’unicode UTF-8 permet la prise en charge des caractères spéciaux (accents, symbole €, symbole ©, etc.) et la plupart des langues. La balise <meta> indiquera aux navigateurs que les textes sont encodés dans ce format. N’oubliez pas d’enregistrer vos pages Web au format UTF-8 avec votre éditeur de texte. C'est normalement l'encodage définit par défaut dans la plupart des éditeurs de texte.
La balise <title>
La balise <title> permet d’écrire le titre de la page dans l’onglet du navigateur. De plus, l’ajout en favoris ou marque-page utilisera le titre indiqué. Cette balise est également très utilisée par Google lors du référencement dans son moteur de recherche. Veillez à ne pas dépasser les 100 caractères et à ne pas répéter plus de deux fois le même mot si vous ne voulez pas rétrograder dans son classement. Utilisez des mots pertinents et évitez les mots génériques comme « Bienvenue sur mon site ».
Code complet des pages
Page index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alfred Hitchcock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a href="index.html">Accueil</a>
<a href="biographie.html">Biographie</a>
<a href="filmographie.html">Filmographie</a>
</nav>
<h1>Alfred Hitchcock</h1>
<img src="images/hitchcock-loupe.webp" alt="Alfred Hitchcock avec une loupe">
<p>Alfred Hitchcock est un réalisateur, scénariste et producteur de cinéma britannique, né le 13 août 1899 à Leytonstone (Londres) et mort le 29 avril 1980 à Bel Air (Los Angeles).</p>
<p>Plus grand cinéaste selon un classement dressé en 2007 par la critique au Royaume-Uni, The Daily Telegraph écrit : « Hitchcock a fait davantage qu'aucun autre réalisateur pour façonner le cinéma moderne, lequel sans lui serait tout à fait différent. Il possédait un flair pour la narration, en dissimulant avec cruauté (à ses personnages et au spectateur) des informations cruciales et en provoquant comme nul autre les émotions du public »</p>
</body>
</html>Et voici le résultat :
Notez les tabulations pour marquer l'arborescence des balises. Cette indentation est facultative, mais elle permet une meilleure lisibilité du code. En un clin d'oeil, on voit quelle balise est parente de qui.
Page biographie.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alfred Hitchcock - Biographie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a href="index.html">Accueil</a>
<a href="biographie.html">Biographie</a>
<a href="filmographie.html">Filmographie</a>
</nav>
<h1>Biographie</h1>
<img src="images/hitchcock-biographie.webp" alt="Alfred Hitchcock lit un livre">
<p>Maître du suspense, inventeur de bien des effets de mise en scène du cinéma moderne, Alfred Hitchcock reste dans les mémoires des cinéphiles grâce à son style inimitable. Avec cinquante-trois longs métrages, la filmographie d'Hitchcock se distingue en deux périodes, l'une en Angleterre avant 1939 et l'autre aux Etats-Unis après 1940. Ses entretiens avec Truffaut offrent un nouveau regard sur son oeuvre.</p>
<p>Le cinéma d'Hitchcock est avant tout divertissant : le cinéaste utilise les genres, notamment policier, dès les années 1920. Ainsi, Les Cheveux d'or, en 1926, annonce la suite de sa filmographie : climat angoissant du brouillard londonien, assassinat, et surtout une volonté de manipuler le spectateur. Sa maîtrise du cinéma se remarque dans les années 1930 avec L'Homme qui en savait trop, film d'espionnage avec Peter Lorre, et Les Trente-Neuf Marches, où un homme, accusé d'un crime, tente de prouver son innocence, thème qui reviendra dans sa filmographie. Ces deux réussites tiennent au rythme et à une ambiance inquiétante.</p>
<p>Aux Etats-Unis, Hitchcock se spécialise définitivement dans le film criminel, exploitant à la fois le policier, l'espionnage ou l'incursion du crime au sein d'une famille, comme le montre L'Ombre d'un doute. A travers ses personnages, Hitchcock se joue des spectateurs en proposant une approche ambiguë du récit. Sa période américaine est marquée de ce double jeu : illusion du temps réel dans La Corde, montage alterné trompeur dans L'Inconnu du Nord-Express, volatiles apparemment inoffensifs dans Les Oiseaux, poursuite sans fin de La Mort aux trousses. L'utilisation de la figure du double dans Sueurs froides, du décor dans Fenêtre sur cour ou de la musique suggestive dans Psychose montrent qu'Hitchcock s'est approprié tous les éléments qui fondent l'alchimie du langage cinématographique.</p>
</body>
</html>Notez que le titre inscrit dans <title> est différent du titre de la page d’accueil. Il est en effet conseillé de mettre un titre qui caractérise chaque page pour les marque-pages et le référencement.
Pour améliorer la lisibilité des textes, vous pouvez créer plusieurs paragraphes en utilisant une série de balises <p>. Chaque paragraphe contient un retour à la ligne ainsi qu’un espacement vertical supérieur à l’interlignage. C’est la même chose dans les traitements de texte. Un paragraphe présente une certaine unité de sens. Le choix des balises HTML n’est pas uniquement graphique, il est sémantique. La disposition graphique doit soutenir le contenu.
Page filmographie.html
Les listes à puces utilisent les balises <ul> et <li> (unordered lists). <ul> indique le début d’une liste à puces et <li> marque chaque élément de liste en faisant apparaitre une puce ou un numéro selon les indications CSS.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alfred Hitchcock - Filmographie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a href="index.html">Accueil</a>
<a href="biographie.html">Biographie</a>
<a href="filmographie.html">Filmographie</a>
</nav>
<h1>Filmographie</h1>
<img src="images/la-mort-aux-trousses.webp" alt="Cary Grant La mort aux trousses">
<p>Avec cinquante-trois longs métrages, la filmographie d'Hitchcock se distingue en deux périodes, l'une en Angleterre avant 1939 et l'autre aux Etats-Unis après 1940. Ses entretiens avec Truffaut offrent un nouveau regard sur son oeuvre.</p>
<ul>
<li>La corde - 1948</li>
<li>Fenêtre sur cour - 1954</li>
<li>Vertigo - 1958</li>
<li>La mort aux trousses - 1959</li>
<li>Pas de printemps pour Marnie - 1964</li>
</ul>
</body>
</html>Voici le résultat :
Mise en forme avec le langage CSS
Afin d'améliorer la présentation de ce petit site web, je vous propose de poursuivre avec cet article qui explique comment ajouter du code CSS à notre projet.