Explication du code HTML et CSS - Soutenance
Ce document explique les principales lignes et balises de ton site afin de préparer ta
soutenance.
HTML - Structure générale
<!DOCTYPE html> : Indique au navigateur qu'il s'agit d'une page HTML.
<html lang='fr'> : Déclare le début du document HTML et précise que la langue est le
français.
<head> : Contient les informations techniques invisibles de la page.
<meta charset='UTF-8'> : Permet d'afficher correctement les accents et caractères
spéciaux.
<title> : Texte affiché dans l'onglet du navigateur.
<link rel='stylesheet' href='[Link]'> : Relie la page HTML au fichier CSS.
<body> : Contient tout le contenu visible de la page.
<header> : En-tête du site.
<h1> : Titre principal de la page.
<nav> : Zone de navigation contenant les liens du menu.
<a href='...'> : Crée un lien vers une autre page.
<section> : Regroupe une partie du contenu.
<div> : Bloc de contenu utilisé pour organiser la mise en page.
<p> : Paragraphe de texte.
<img> : Affiche une image.
alt='...' : Texte alternatif si l'image ne s'affiche pas.
class='...' : Permet d'appliquer un style CSS spécifique.
<table> : Crée un tableau.
<tr> : Ligne du tableau.
<th> : Cellule d'en-tête du tableau.
<td> : Cellule normale du tableau.
<ul> : Liste à puces.
<li> : Élément de la liste.
target='_blank' : Ouvre le lien dans un nouvel onglet.
<footer> : Pied de page du site.
CSS - Mise en forme
body : Style appliqué à toute la page.
background : Définit l'arrière-plan.
color:white : Couleur du texte en blanc.
font-family: Arial : Police utilisée.
margin:0 : Supprime les marges extérieures par défaut.
text-align:center : Centre le texte.
header : Style de l'en-tête.
padding:20px : Ajoute un espace intérieur.
nav a : Style des liens du menu.
text-decoration:none : Supprime le soulignement des liens.
border-radius : Arrondit les coins.
.titre : Style de l'élément ayant la classe titre.
font-size:3rem : Augmente la taille du texte.
text-shadow : Ajoute une ombre lumineuse au texte.
.membre : Organisation des cartes membres.
display:flex : Place les éléments sur une même ligne.
justify-content:center : Centre les éléments horizontalement.
gap:30px : Ajoute un espace entre les éléments.
flex-wrap:wrap : Passe à la ligne si manque de place.
.carte-membre : Style des cartes des membres.
transition:0.3s : Anime les changements.
.carte-membre:hover : Effet quand la souris passe dessus.
transform:translateY(-8px) : Fait remonter légèrement la carte.
box-shadow : Ajoute une ombre.
.photo-membre : Style des photos.
border-radius:50% : Transforme l'image en cercle.
object-fit:cover : Recadre l'image sans déformation.
table : Style du tableau.
border-collapse:collapse : Fusionne les bordures du tableau.
tr:nth-child(even) : Applique un style aux lignes paires.
.carte et .carte1 : Blocs décoratifs pour mettre en valeur le contenu.
.formule : Style de la formule mathématique.
.sources a:hover : Effet au survol des liens des sources.
Erreurs que ton professeur pourrait te demander
color: withe : Erreur d'orthographe : il faut écrire white.
background-color: rgba (0,0,0,0.4) : Espace en trop après rgba, écrire rgba(0,0,0,0.4).
nav a :hover : Doit être nav a:hover (sans espace).
class='image principale' : Deux classes différentes. En CSS tu utilises .image-principale,
donc le nom ne correspond pas.
<footer> avant <body> : Normalement le footer doit être placé dans le body.
boreder='1' : Faute de frappe : border='1'.