FACULTE DES SCIENCES ET TECHNIQUES ‫كــليـــــة العــلـــــــوم والتـقـنـيـــات‬

MARRAKECH ‫مــــــراكـش‬

A.ABDALI SIR S5 Le 09/10/2023

TP 1 : Création d’un site sous HTML5 et CSS3

LES PARTIES FIXES DE NOTRE SITE
Explication du schéma de travail

Comme notre projet de création de site personnel en HTML et en CSS n’est pas d’une
difficulté absolue, nous allons pouvoir alterner les étapes HTML / CSS pour chaque page afin
de rendre ce tutoriel plus concret et plus intéressant pour vous.

En effet, nos pages auront des designs et des codes différents les unes des autres, à l’exception
de certaines parties « fixes ». On va donc pouvoir travailler sur chaque page séparément.

Commençons déjà par créer nos quatre pages HTML qui vont constituer notre site.

Nous allons appeler ces pages :

 index.html ;
 experiences-pro.html ;
 hobbies.html ;
 contact.html
Comme vous pouvez le voir, j’ai également créé un dossier « imgs » dans le dossier contenant
les différentes pages de notre site.

Nous placerons toutes les images de notre site dans ce sous-dossier.

Création du header, footer et menu

Nous allons déjà commencer par créer les parties « fixes » de notre site, c’est-à-dire les parties qui
vont être identiques sur chaque page de notre site.

Généralement, ce seront le haut de page avec le menu ainsi que le pied de page.

Nous allons créer ces parties dans la page index.html, puis nous copierons et collerons le code dans
les autres pages de notre site.

Notez que cette façon de procéder n’est toutefois pas optimale.

En pratique, nous écririons les codes correspondant à notre haut de page, menu et pied de page
dans des fichiers différents.

Voici donc le code correspondant à ces parties :

On commence, comme à notre habitude, par créer la structure minimale d’une page en HTML
afin que celle-ci soit valide.

Nous profitons déjà ici de créer le lien vers notre fichier CSS grâce à l’élément link et on
précise également un meta name="viewport" pour mettre nos pages à l’échelle.

Notez également qu’on ajoute un attribut lang à notre élément html. Cela va donner une
indication aux moteurs de recherche sur la langue utilisée dans nos pages web. Pour le
français, le code est « fr-FR ».

Ensuite vous remarquez qu’on utilise trois éléments HTML header, nav et footer à
l’intérieur de notre élément body.

Ces éléments sont des éléments HTML structurants qui sont apparus avec HTML5.

Les éléments structurants du HTML5

Le rôle des éléments structurants est de diviser le contenu d’une page en différentes parties
selon un ordre logique.

Ces éléments sont de type block et peuvent ainsi remplacer certains de nos éléments div.

Voici la liste complète des éléments HTML structurants ainsi que leur cas d’utilisation. Je
vous encourage fortement à vous aussi les utiliser.

Vous pouvez noter plusieurs choses à propos de ces éléments structurants.

Premièrement, chaque élément structurant va agir comme entité à part entière.

Cela signifie qu’on va par exemple pouvoir définir un titre h1 à l’intérieur de chacun de nos
éléments structurants dans une page, mais également qu’un élément section par exemple
peut lui-même contenir un élément header, un élément nav, un élément aside, etc.

De plus, certains de ces éléments peuvent se contenir l’un l’autre. Par exemple, un élément
section peut contenir différents éléments article mais un élément article peut également
contenir différents éléments section si cela fait du sens.
Au final, il faut bien vous interroger à l’avance sur le sens que vous voulez donner à vos
pages et bien définir leurs contenus pour bien les structurer.

Utiliser les éléments structurants du HTML5 dans nos pages

Dans notre cas, nous nous contentons d’écrire un titre dans notre élément header.

Faites bien attention à ne pas confondre les éléments header et head ! L’élément header sert bien à
définir l'en-tête du contenu « visible » de notre page et se situe dans l’élément body.

Ensuite, nous créons notre menu à l’intérieur de notre élément nav.

Pour cela, nous utilisons de façon classique un élément ul pour définir notre menu en soi et
des éléments li pour chaque élément de notre menu.

Dans nos éléments li, nous créons des liens avec des éléments a afin que nos éléments de
menu renvoient bien vers les autres pages de notre site.

Nous précisons déjà des attributs class pour nos éléments li afin de préparer le terrain pour
la mise en forme en CSS.

De même, nous insérons un div qui englobe notre menu. Celui-ci nous permettra plus tard de
centrer le menu dans notre page en CSS.

Finalement, nous plaçons une ligne de texte dans l’élément footer.

Vous pouvez ici, si vous le souhaitez, insérer des liens vers vos réseaux sociaux, etc.

Voilà tout pour les éléments « fixes » de notre site. Vous pouvez ici copier ce contenu et le
coller dans vos quatre pages HTML, en modifiant juste le contenu de l’élément title afin
d’avoir un titre qui reflète le contenu de chaque page.

Voici le résultat si vous l’affichez dans votre navigateur :

Evidemment, sans CSS, ce n’est pour le moment pas très engageant, mais patience !

Mise en forme CSS générale de notre site

Afin de rendre ce tutoriel immédiatement intéressant pour vous, nous pouvons déjà
commencer à mettre en forme en CSS les parties fixes de notre site.

Cependant, retenez une nouvelle fois qu’il est généralement déconseillé de travailler comme
cela en temps normal, sous peine d’avoir un code mal construit et de perdre beaucoup de
temps au final dans la majorité des cas.

Ici, je me permets de faire cela car je connais exactement tous les codes utilisés dans cet
exercice à l’avance.

Commençons avec les styles généraux et ceux de nos header et footer.

On commence par définir des polices d’écriture pour notre site.

On effectue également un reset CSS des marges intérieures et extérieures de notre élément
body afin d’avoir le même rendu sur tous les navigateurs (certains ajoutent automatiquement
une petite marge).

Ensuite, on centre nos titres h1 et on les met en forme.

On effectue également une mise en forme minimale du header et du footer de notre site.

Pour le menu, le code est un peu plus long. On commence déjà par mettre les éléments de
notre menu en ligne et par enlever les puces devant les éléments de liste.

On va ensuite également effectuer un reset des marges de notre élément de liste ul.
On commence par enlever le trait de soulignement avec la propriété text-decoration.

Ensuite, on change la couleur des textes pour qu’ils soient bien lisibles, ainsi que la taille et on
met l’écriture en majuscules avec la propriété text-transform.

Finalement, on change le type de nos éléments a en inline-block afin de leur appliquer un gros
padding. Cela va avoir pour effet d’aérer notre menu tout en gardant tout l’espace autour du
texte cliquable.

Ensuite, on veut centrer notre menu dans notre page. Pour cela, nous allons devoir appliquer
un display : table et un margin : 0 auto au div intermédiaire que nous avions créé.

Arrivé ici, nous avons fait le plus gros du travail. Il ne nous reste plus qu’à ajouter un style
spécifique pour chacun de nos éléments de menu.

Nous allons simplement appliquer une bordure en haut des éléments de menu ainsi qu’une
couleur de fond en semi-transparence lors du survol de l’élément en question :
Comme la bordure déplace nos éléments de menu de sa hauteur lors du survol, on ajoute une
marge intérieure spécifique lors du survol des éléments de menu pour contrebalancer l’effet
de la bordure.

Voilà tout pour notre menu, et pour les parties fixes de notre site.

Voilà à quoi cela ressemble pour le moment :

Concernant l’aspect responsive de notre site, nous allons faire très simple pour le moment en
nous contenant de réduire les dimensions et écarts entre nos différents éléments afin que le
site s’affiche également bien sur mobile.

On se permet de faire comme cela car nos éléments de menu prennent peu de place. Pour
créer un véritable menu responsive, je vous invite à regarder l’exercice qui y est consacré sur
ce site.
Le résultat final

Afin que vous compreniez dès le début pourquoi on fait telle ou telle chose, et que ce tutoriel
vous soit le plus bénéfique, je vais déjà vous montrer le résultat auquel on souhaite parvenir.