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.

Dossier Hitchcock

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 :

Dossier images

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 et logos.
  • .png : format d’image libre, compressé sans perte, de 2 à 16 millions de couleurs, transparence graduelle, approprié pour les dessins et logos.

Nom des pages

Nous allons créer 3 pages comme le montre le tableau suivant :

 Page d’accueilPage biographiquePage filmographique
Nom du fichierindex.htmlbiographie.htmlfilmographie.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>Sir Alfred Hitchcock, né Alfred Joseph Hitchcock (Leytonstone, banlieue londonienne, 13 août 1899 – Bel Air, Los Angeles, 29 avril 1980), est un réalisateur, producteur et scénariste de cinéma britanno-américain.</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 départ de ce chemin est le dossier dans lequel se trouve votre page HTML, en l’occurrence le dossier Hitchcock. A la moindre erreur, l'image ne s'affichera pas.

  • L’image de la page d’accueil s’appelle hitchcock.jpg
  • L’image de la page biographique s’appelle biographie.jpg
  • L’image de la page filmographique s’appelle filmographie.jpg

Code HTML de l’image de la page d’accueil :

<img src="images/hitchcock.jpg">

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>
<head>
 <meta charset="utf-8">
 <title>Alfred Hitchcock</title>
</head>

La balise <!doctype html>

La balise <!doctype html> indiquera 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 (HTML 4, XHTML, 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>
<head>
    <meta charset="utf-8">
    <title>Alfred Hitchcock</title>
</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.jpg" alt="Alfred Hitchcock">
    <p>Alfred Hitchcock est un réalisateur britannique naturalisé américain, également producteur et scénariste, né le 13 août 1899 à Leytonstone (en) (Grand Londres) au Royaume-Uni et mort le 29 avril 1980 à Bel Air à Los Angeles aux États-Unis.</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>
<head>
    <meta charset="utf-8">
    <title>Alfred Hitchcock - Biographie</title>
</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/biographie.jpg" alt="Alfred Hitchcock">
    <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>
</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>
<head>
    <meta charset="utf-8">
    <title>Alfred Hitchcock - Filmographie</title>
</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/filmographie.jpg" alt="La mort aux trousses">
    <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>
    <ul>
    <li>Le crime était presque parfait - Dial M for murder (1954)</li> 
    <li>Fenêtre sur cour - Rear window (1954)</li> 
    <li>La main au collet - To catch a thief (1955)</li> 
    <li>Mais qui a tué Harry ? - The trouble with Harry (1955)</li> 
    <li>L'homme qui en savait trop - The man who knew too much
    (2ème version) (1956)</li> 
    <li>Le faux coupable - The wrong man (1957)</li> 
    <li>Sueurs froides - Vertigo (1958)</li> 
    <li>La mort aux trousses - North by Northwest (1959)</li> 
    <li>Psychose - Psycho (1960)</li> 
    <li>Les oiseaux - The birds (1963)</li> 
    <li>Pas de printemps pour Marnie - Marnie (1964) </li>  
    </ul>
</body>
</html>

Voici le résultat :