La page est crée sur le modèle de site présenté dans l’article Bien organiser son site web. Elle intègre une image informative et des images décorative. Le code est structuré à l’aide des balises de regroupement. Le résultat final est en téléchargement pour pouvoir le tester et le manipuler sur votre propre ordinateur.
Chaques parties HTML et CSS sont expliquées et détaillées au fil de l’article :
L’entête de la page HTML
Cette page intègre des élément typographiques basés sur la typographie « Teko » proposée par GoogleFont®. Nous utilisons 2 déclinaisons de graisse de la typographie (Light 300 et Medium 500). Nous commençons donc par récupérer le code de liaison avec la feuille de style hébergée par GoogleFont®
<head>
<meta charset=utf-8 />
<title>Structure minimale</title>
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300;500&display=swap" rel="stylesheet">
<link href="styles/mon-style.css" type="text/css" rel="stylesheet"/>
</head>La feuille de style
Une fois reliée à notre page HTML à l’aide de la balise <link /> et de ses attributs, nous pouvons commencer à rédiger notre feuille de style.
Tout d’abord, nous utiliserons le sélecteur * pour cibler l’ensemble des balises et supprimer les marges intérieurs et extérieurs définis par notre navigateur.
* {
padding: 0;
margin: 0
}Nous définirons ensuite les éléments communs au site. La typographie des textes et l’arrière plan de notre page que nous manipulerons par la balise <body>. Les images d’arrière plan appelées par notre feuille de style seront enregistrées dans le dossier images présent dans le dossier styles à la différence de l’image appelée dans le code html qui sera enregistrée dans le dossier image à la racine du site (mon_site).
Nous remarquons aussi que l’ensemble des titres se base sur la typographie importé via GoogleFont®. Nous pourrons donc cibler les éléments <h1>, <h2> et <h3> en une seule déclaration pour leur appliquer cette typographie.
body {
background-color: #3199cb;
background-image: url("images/sky_bg.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
font-family: helvetica, arial, "sans-serif";
}
h1, h2, h3{
font-family: 'Teko', sans-serif;
}Le header de la page
HTML :
Le header contient 3 éléments, le logo de la page, intégré à l’aide de la balise <img>, un tritre principale <h1> et un sous titre <h2>. Ces 3 éléments sont regroupés à l’aide le la balise <header> à laquelle nous allons appliquer un attribut class dont la valeur sera "primary_header" de façon à préparer sa manipulation en css sans agir sur les autres éléments <header> de la page.
<header class="primary_header">
<img src="images/logo.png" alt="Logo de la page"/>
<h1>Le titre de ma page</h1>
<h2>Le sous titre de ma page</h2>
</header>CSS :
Nous allons pouvoir travailler cette zone spécifique en nous appuyant sur la class de l’élément de regroupement. Chaque enfant sera ciblé par lien de parenté. Par exemple, l’élément <h2> pourra être ciblé en écrivant .primary_header h2. Les propriété graphiques que nous lui appliquerons n’auront donc aucun effet sur les autres éléments <h2> présents dans la page.
.primary_header {
background-color: #404852;
color: white;
padding: 100px 20px 30px 20px;
text-align: center;
}
.primary_header img {
width: 30%;
}
.primary_header h1 {
font-size: 72px;
font-weight: 300;
letter-spacing: 3px;
}
.primary_header h2 {
text-transform: uppercase;
font-size: 25px;
font-weight: 500;
}La navigation
HTML :
Comme pour le header de notre page, nous allons pouvoir envelopper la liste définissant le menu à l’aide d’une balise de regroupement <nav> à laquelle nous appliquerons l’attribut class="primary_nav". Les liens href sont définis comme « ancre nommée », c’est à dire qu’il permettrons de faire défiler la page pour afficher la zone possédant l’identifiant cité. Par exemple en cliqueant sur le premier lien ( href="#zone_1") nous descendrons notre page jusqu’a l’élément aillant l’attribut id="zone_1".
<nav class="primary_nav">
<ul>
<li>
<a href="#zone_1">
Lien vers la première section
</a>
</li>
<li>
<a href="#zone_2">
Lien vers la deuxième section
</a>
</li>
</ul>
</nav>
CSS :
En CSS, nous allons travailler les arrières plan, mais aussi les propriétés de la liste. Nous pourrons ainsi supprimer le style de la liste (suppression des marges et des points devant chaque index de notre liste). Nous pourons ensuite modifier la propriété display des éléments <li> connus comme étant des éléments de type block (chacun sur une ligne). L’objectif de cette opération est de forcer les éléments à se positionner sur une seule ligne. Nous utilisons la valeur inline-block qui permet de conserver certaine propriétés d’un élément bloc (possibilité de lui appliquer de marges intérieurs et extérieurs) et certaines propriétés d’un élément de type inline (possibilité de les afficher les uns à la suite des autres sur une seule ligne).
L’autre nouveauté présente dans ce code est l’utilisation de la pseudo-class :hover permettant de donner des propriétés graphiques à l’élément <a> lorsque le curseur de la souris le survole. Ici, nous lui changeons sa couleur.
.primary_nav {
background-color: #1D2025;
padding: 20px;
text-align: center;
}
.primary_nav ul {
list-style: none;
}
.primary_nav li {
display: inline-block;
margin: 0 10px 0 10px;
}
.primary_nav li a {
display: block;
color: white;
text-decoration: none;
}
.primary_nav li a:hover {
color: #79aa53;
}Le contenu principal de la page
HTML :
Nous utilisons ici la balise de regroupement <main> destinée à envelopper les informations que l’internaute est venu cherché. C’est le contenu principale.
Nous divisons ensuite le contenu en 2 blocs, les <sections>. Comme évoqué dans le chapitre traintant de la navigation, nous attribuons à chaque section un identifiant unique, c’est l’id. Comme pour une classe, l’attrribut id peut être nommé de la façon dont nous le souhaitons tant que nous n’utilisons pas d’espace, d’accents et que nous ne le commençons pas par un chiffre. Contrairement à la class, l‘attribut id ne peut être présent qu’une seule fois dans la page. Les éléments HTML ne peuvent avoir qu’un seul identifiant.
Entre les 2 section, nous allons utiliser un petit séparateur graphique. Ce séparateur graphique n’est qu’un éléments décoratif sans aucune valeur sémantique. Nous allons avoir recours à une balise <div> dont l’attribut class possèdera la valeur "separator" que nous pourrons dimensionner, positionner et à laquelle nous pourrons attribuer un arrière plan à l’aide du CSS.
<main>
<section id="zone_1">
<header>
<h2>Titre de la zone 1</h2>
<p>Ceci est le texte d'introduction de la zone 1, emerpus de peoreme et perra et perso in victus de la meliora fralis voliverium demeter</p>
</header>
<div>
<h3>Titre du premier paragraphe</h3>
<p>Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.</p>
<h3>Titre du second paragraphe paragraphe</h3>
<p>Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.</p>
</div>
</section>
<div class="separator"></div>
<section id="zone_2">
<header>
<h2>Titre de la zone 2</h2>
<p>Ceci est le texte d'introduction de la zone 1, emerpus de peoreme et perra et perso in victus de la meliora fralis voliverium demeter</p>
</header>
<div>
<h3>Titre du premier paragraphe</h3>
<p>Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.</p>
<h3>Titre du second paragraphe paragraphe</h3>
<p>Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.</p>
</div>
</section>
</main>
CSS :
Rien de bien compliqué dans cette partie du CSS, la logique reste la même que pour les éléments précédents. Nous remarquons cependant la présence d’un éléments <header> en début de chaque <section>. À l’intérieur de ces <header>, nous avons un <p>. Nous pourrons les cibler par lien de parenté de façon à les afficher de façon différents des autres <p> présents dans notre section. En composition typographique, nous parlerons du paragraphe chapo de notre section.
main {
max-width: 900px; /*Largeur maximum d'un élément*/
margin: auto; /*Permet de centrer un élément block dans la page*/
padding: 100px 20px 50px 20px;
}
section {
margin-bottom: 50px;
}
section h2, section h3 {
color: #ffffff;
font-weight: 500; /*Graisse de la typo google font*/
}
section h2 {
font-size: 42px;
}
section h3 {
font-size: 28px;
}
section header {
border-bottom: dotted 3px #ffffff;
padding-bottom: 20px;
margin-bottom: 20px;
}
section header p {
font-size: 24px;
color: #9FD0E7;
width: 60%; /*Largeur de l'élément par rapport à son parent*/
line-height: 32px; /*Interlignage*/
}
section div p {
line-height: 25px;
margin-bottom: 20px;
color: #CBE5F2;
}
/*Style du séparateur inclu dans une div*/
.separator {
height: 100px;
width: 100px;
margin: auto;
margin-bottom: 50px;
background-image: url("images/camping.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}Le pied de page
HTML :
Le pied de page est assez simple, il est représenté par la balise <footer> à laquelle nous appliquons l’attribut class= »primary_footer » de façon a rester dans la logique du reste de notre page. Ce footer ne contient qu’un paragraphe que nous pourrons manipeler assez facilement par lien de parenté.
<footer class="primary_footer">
<p>©ECV - 2020</p>
</footer>CSS :
En css, nous pourrons définir depuis l’élément parent (<footer>) certaines propriété graphiques propres à l’ensemble de ses enfants (ici, le <p>). La couleur et l’alignement du texte font parti de ces propriétés commune.
.primary_footer {
padding: 50px 20px 20px 20px;
background-color: #1D2025;
color: #404852;
text-align: center;
}
.primary_footer p {
font-size: 12px;
}