Tutoriel Fiche #1

Ayfoth vous propose de réaliser la création suivante : Tutoriel : Tutoriel Fiche #1

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

Pour accomplir ce tutoriel vous avez besoin de savoir le minimum de l'HTML et du CSS, en particulier ce qui suit :
[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

Notre fiche va respecter le schéma de ce code lien

Apparence Générale

Pour commencer on va s'attaquer à l'apparence générale de la fiche jusque là rien de très compliqué on va juste lui mettre un fond et un cadre dons dans notre css on va mettre :
  1. background-color: #054950;
    border: 2px black solid;



On encadre notre fiche dans une div avec une classe pour lui appliquer ce CSS

  1. <div class="fichetutowyv"></div>


Et du coup on oublie pas d'attribuer cette classe à notre CSS

  1. .fichetutowyv{
    background-color: #054950;
    border: 2px black solid;
    }



Donc à l'heure actuelle nous avons :

HTML

  1. <div class="fichetutowyv"></div>



CSS

  1. .fichetutowyv{
    background-color: #054950;
    border: 2px black solid;
    }


Le titre principal

Maintenant occupons nous de notre titre principal pour ce tutoriel je le veux avec une police de Google Fonts, je le veux en majuscule, de couleur blanche et centré.
Pour commencer on mettre notre titre entre balises H1 dans notre div
  1. <div class="fichetutowyv"><h1>Tutoriel #1</h1></div>



Et donc on va ajouter ce h1 à notre CSS

  1. .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

  1. <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

  1. .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

  1. .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

Maintenant on s'occupe des sous-titres qu'on va mettre entre des balises H2 et on va juste leur appliquer de la majuscules et une couleur blanche (normalement vous devez savoir faire avec l'étape précédente) ce qui nous donnera ça

HTML
  1. <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

  1. .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

Et maintenant on finit avec nos paragraphes dans une balise p, de couleurs blanche et en alignement à droite (vous devez savoir faire sans explications à cette étape du tutoriel

HTML
  1. <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

  1. .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

  1. .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

Exercice Simple
  1. Changer la couleur de fond et la police du titre principal



Exercice Intermédiaire

  1. 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

  1. 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

Avatar de CHAUSSETTE
CHAUSSETTE le 24 Aoû 2022 à 22h29
Merci beaucoup pour ce tutoriel ! :D

Répondre

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.