CREER UN SITE PERSONNEL
Dr ALICO N. Jerome
[email protected]
27 Février 2024
2
PRÉSENTATION DE L’EXERCICE
Cet exercice va utiliser quelques points de détails concernant le HTML et le CSS.
LES ELEMENTS DE BASE DU LANGAGE PYTHON 3
DÉROULÉ DE L’EXERCICE
Pour mener à bien un projet (informatique), nous allons suivre différentes
phases:
Nous commencerons par établir précisément ce que l’on souhaite et faire
la liste de ce qu’il va nous falloir pour y parvenir.
Ensuite, nous attaquerons le squelette HTML de notre site dans son
ensemble, page par page.
Nous ne mettrons en forme avec le CSS qu’une fois le squelette HTML de
chaque page terminé : rappelez-vous qu’on bâtit toujours les murs d’une
maison avant de passer la couche de peinture.
LES ELEMENTS DE BASE DU LANGAGE PYTHON 4
Réfléchir au résultat voulu
Nous voulons créer un site web personnel, qui va servir à nous présenter
et à présenter nos compétences et expériences.
Nous utiliserons que le HTML et le CSS.
Nous voulons un site moderne qui s’adapte selon les tailles d’écran
(donc un site responsive).
LES ELEMENTS DE BASE DU LANGAGE PYTHON 5
Réfléchir au résultat voulu
Notre site comportera quatre pages :
Une page d’accueil ;
Une page décrivant nos expériences professionnelles ;
Une page décrivant nos loisirs ;
Une page de contact.
La page d’accueil nous servira de page de CV : nous nous présenterons et
mettrons en avant notre formation et nos compétences.
I LES ELEMENTS DE BASE DU LANGAGE PYTHON: Plan du Cours 6
LES PARTIES FIXES DE NOTRE SITE
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.
On peut déjà créer une page style.css que nous remplirons plus tard.
7
CRÉATION DU HEADER, FOOTER ET MENU
créer les parties « fixes » de notre site, c’est-à-dire les parties qui vont être
identiques sur chaque page de notre site.
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.
9
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:
Nom de l’élément Cas d’utilisation
header Utilisé pour définir le haut de page (menu exclus)
Utilisé pour définir le menu principal de navigation d’une
nav
page
Représente une section dans une page, c’est-à-dire un
section
groupement thématique de contenu
Représente une partie de page qui se suffit à elle même,
article
comme un post sur un blog par exemple
Représente une section de page indirectement liée aux
aside autres, comme une mini-biographie d’un auteur sur un blog
par exemple
footer Utilisé pour définir le pied d’une page HTML
. 11
Utiliser les éléments structurants du HTML5 dans nos pages
header
12
Utiliser les éléments structurants du HTML5 dans nos pages
nav
13
Utiliser les éléments structurants du HTML5 dans nos pages
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.
LES ELEMENTS DE BASE DU LANGAGE PYTHON III. Affectations 14
Utiliser les éléments structurants du HTML5 dans nos pages
footer
LES ELEMENTS DE BASE DU LANGAGE PYTHON III. Affectations 15
Voici le résultat si vous l’affichez dans votre navigateur sans CSS :
LES ELEMENTS DE BASE DU LANGAGE PYTHON III. Affectation 16
MISE EN FORME CSS GÉNÉRALE DE NOTRE SITE
17
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.
18
ENTRÉE STANDARD : la fonction input()
On va ensuite également effectuer un reset des marges de notre élément de liste ul.
19
On étend notre élément nav et on lui donne une couleur de fond :
Ensuite, nous allons mettre en forme nos éléments de lien, c’est-à-dire nos éléments a.
20
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
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éé
21
ajoutons 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 :
22
23
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.
24
Voilà à quoi cela ressemble pour le moment :
25
Le code de la page accueil pour le moment
26
27
Le code CSS de la page d’accueil en construction
27
27
