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 :

Articles connexes