Tutoriel Fiche #1
Ayfoth vous propose de réaliser la création suivante :
Sommaire
Bonjour,
dans ce tutoriel qui en suivra d'autres nous allons apprendre à créer une fiche simple qui se modifiera s'embellira et se perfectionnera en se complexifiant au fil des tutoriels du même nom.
Cependant certaines notions de bases sont nécessaires pour faire ce tutoriel.
Pré-requis
[list]
[*] La balise html link et la balise html div
[*] Les balises css background-color, border, text-transform; text-align, color, font-family et font-size.[/list]
Schema de la Fiche
Apparence Générale
background-color: #054950;
border: 2px black solid;
On encadre notre fiche dans une div avec une classe pour lui appliquer ce CSS
<div class="fichetutowyv"></div>
Et du coup on oublie pas d'attribuer cette classe à notre CSS
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
}
Donc à l'heure actuelle nous avons :
HTML
<div class="fichetutowyv"></div>
CSS
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
}
Le titre principal
Pour commencer on mettre notre titre entre balises H1 dans notre div
<div class="fichetutowyv"><h1>Tutoriel #1</h1></div>
Et donc on va ajouter ce h1 à notre CSS
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
}h1{
}
Pour commencer on va chercher une police sur GoogleFont là rien de compliquer puisque vous avez toutes les informations sur google fonts.
Cette partie là est à mettre tout au début de notre fiche donc avant le div
Cette partie sera à mettre dans notre CSS ce qui nous donne donc
HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap" rel="stylesheet">
<div class="fichetutowyv"><h1>Tutoriel #1</h1></div>
CSS
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
}h1{font-family: 'Aboreto', cursive;
}
Tout le reste des modifs à appliquer au titre sont à faire dans le css on lui applique donc une taille de police (font-size), tout en majuscule (text-transform), un centrage (text-align) et une couleur blanche (color)
CSS
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
}h1{font-family: 'Aboreto', cursive;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: white
}
Les sous-titres
HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap" rel="stylesheet">
<div class="fichetutowyv"><h1>Tutoriel #1</h1>
<h2>sous-titre</h2>
<h2>sous-titre</h2>
<h2>sous-titre</h2></div>
CSS
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
}h1{font-family: 'Aboreto', cursive;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: white
}
h2{
text-transform: uppercase;
color: white;
}
Les Paragraphes
HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap" rel="stylesheet">
<div class="fichetutowyv"><h1>Tutoriel #1</h1>
<h2>sous-titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
<h2>sous-titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
<h2>sous-titre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p></div>
CSS
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
}h1{font-family: 'Aboreto', cursive;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: white
}
h2{
text-transform: uppercase;
color: white;
}
p{
text-align: right;
color: white;
}
Pour finir on va optimiser un détail , on a vu qu'on mettait une color; white partout alors autant la placer dans la classe de la div pour que ca se prennent sur toute la page.
CSS opti
.fichetutowyv{
background-color: #054950;
border: 2px black solid;
color: white;
}
h1{
font-family: 'Aboreto', cursive;
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
h2{
text-transform: uppercase;
}
p{
text-align: right;
}
Exercices
Changer la couleur de fond et la police du titre principal
Exercice Intermédiaire
Changer la couleur de fond ,la police du titre principal, mettre une autre police pour les titres secondaires, changer le style et la couleur du cadre.
Exercice Avancée
Changer la couleur de fond ,la police du titre principal, mettre une autre police pour les titres secondaires, changer le style et la couleur du cadre. Changer les alignements de la fiche, tenter d'ajouter un fond de couleurs aux paragraphes.
Dans le prochain tutoriel nous verrons comment mettre un fond et un cadre différents à nos titres, sous-titres et paragraphes.
Rendus
Commentaires
Répondre
Vous devez être inscrit et connecté pour pouvoir poster un commentaire.