Formation HTML et CSS

Niveau débutant

Bonjour je m’appelle Alice, bienvenue dans cet nouvelle aventure sur la découverte du HTML-CSS pour comprendre les concepts de base et pratiquer.

Introduction

Les premières pages web ont été publiées en 1990 et ces pages n’étaient utilisées que pour la présentation de document. Aujourd’hui, internet est un élément très important dans notre vie quotidienne. Pour consulter des pages web, vous utilisez des navigateurs web comme : Chrome, Safari ou Firefox etc… pour que ces derniers puissent diffuser du contenu, vous devez utiliser le HTML.
HTML est la base de tout ce qui se passe dans votre navigateur. Si vous comprenez le HTML, vous pouvez créer et manipuler des sites internets, publier vos sites web en ligne et même obtenir un emploi en tant que développeur front-end.

Ce que je réalise dans cette aventure

Pour faire partie du club , nous allons réaliser ensemble une carte d’aventurier en HTML et CSS.
Voici une démonstration :

Combien de temps faut-il pour apprendre HTML et CSS ?

Apprendre les bases du HTML et CSS ne prend pas longtemps, vous pouvez rapidement saisir les bases en une ou deux heures environ. Mais savoir bien les utiliser prend un certain temps. Je ne peux pas vous dire avec précision combien d’heures vous allez y consacrer, ça dépend des personnes.
Mais ce qui est certain, pour maîtriser HTML et CSS, il faut s’engager dans un apprentissage tout au long de sa vie car ce domaine est vaste. Plus vous pratiquer, plus vous apprendrez !

Prérequis :

• Aucune expériences en programmation est nécessaire
• Un éditeur de code est nécessaire comme Visual Studio Code (gratuit)

Fichiers d’exercices :

photo 1
photo 2

C’est quoi le HTML ?

HTML signifie HyperText Markup Language, on peut traduire par “langage de balises pour l’hypertexte” :

• hypertexte est un texte qui est utilisé pour faire référence à d’autres morceaux de texte, exemple un lien menant à une autre page.
• langage de balises ou langage de balisage définit le style et la structure d’un document afin qu’un ordinateur sache comment vous voulez que votre document apparaisse.

Pour faire simple, le HTML indique au navigateur web comment afficher du texte, des images et d’autres documents multimédias sur une page web. Nous utilisons actuellement la version HTML 5 qui est une extension de HTML 4.01, cette version a été publiée en 2012.
Il existe de nombreux langages de balisage et vous savez quoi ? Vous avez déjà utilisé un langage de balisage. Microsoft Word ou OpenOffice utilisent leurs propres langages de balisage pour stocker le contenu de vos documents texte. Lorsque vous écrivez des titres ou des paragraphes dans Word, de nombreuses données de conception sont intégrées dans votre document Word. Bien que vous ne puissiez pas le voir, ces données sont là sous la forme de commandes de balisage.

Comment fonctionne le HTML ?

Techniquement, le HTML n’est pas un langage de programmation car il ne peut pas créer de fonctionnalités dynamiques, mais comme cité au dessus c’est un langage de balisage.  HTML est un ensemble d’éléments qui indiquent aux navigateurs web comment afficher des parties spécifiques des pages web. Par exemple:

<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe</p>

Les parties avec des chevrons sont appelées balises. Une balise est une commande qui indique au navigateur que le texte suivant doit être affiché d’une certaine manière. Une balise peut également informer le navigateur qu’il doit y avoir une image ou un bouton à un certain endroit.

Vous placez ces balises dans un fichier texte avec une extension .html ou .htm . Un navigateur web lit le fichier HTML et restitue son contenu afin que les internautes puissent le visualiser.

A la fin de cette aventure je serais capable de :

Si vous connaissez les éléments HTML de base, vous pouvez :

• Créez vos propres pages web et modifiez ceux des autres.
• Personnaliser des sites web et des modèles prédéfinis.
• Publiez votre contenu sur un hébergeur tout en exerçant un contrôle accru sur la conception et la mise en page de votre site.

Element HTML

Ok, je vais vous montrer un extrait de code. Quoi ?! Ne paniquez pas. Vous n’avez pas besoin de comprendre ce que tout cela signifie, nous ne nous soucions que de la structure pour le moment.

<h1>Blog Posts.</h1>
<div class="controls">
    <input type="number" id="first" placeholder="First" oninput="inputsChanged()">
    <input type="number" id="last" placeholder="Last" oninput="inputsChanged()">
</div>
<span class="total-word-count"><b>Total Word Count:</b> <span id="word-count">0000</span></span>

Les blocs de construction du HTML sont appelés éléments et ces éléments sont architecturé de balises. Quand ils sont assemblés, ils créent une page web.

Un élément est essentiellement du contenu entouré de balises HTML (j’y reviendrai plus tard). Les balises indiquent au navigateur le type sur ce qu’il contient.  Par exemple, <h1>Julie Cario</h1>indique au navigateur que « Julie Cario ». est un élément h1 h1 siginifie header1, c’est un titre.

Un élément fait référence au contenu ainsi qu’aux deux balises. Voici la syntaxe :

Les éléments peuvent être imbriqués les uns dans les autres. Lors de l’imbrication d’éléments, il est généralement bon de placer les éléments sur de nouvelles lignes et de les indenter correctement. Il existe quelques exceptions, telles que

Notez que l’insertion d’éléments imbriqués sur les nouvelles lignes et l’indentation ne sont pas obligatoires, c’est simplement ce que nous appelons une bonne pratique du code . Une bonne pratique du code est un peu comme l’étiquette pour la programmation. L’objectif d’une bonne pratique du code est de rendre votre code plus facile à lire et à comprendre pour les autres (ceci est particulièrement important lors de la collaboration sur des projets à grande échelle).

Element de type block

Ceux-ci créent un bloc autour du contenu que vous placez dans cet élément. Il démarre sur une nouvelle ligne. Les éléments de niveau bloc incluent

Element de type inline

Un élément inline ne commence pas sur une nouvelle ligne et il ne prend que la largeur requise. Ceux-ci ne commencent pas dans une nouvelle ligne. Les éléments en ligne incluent

Balise HTML

<p class="test"> ... </p>

Balise ouvrante

Balise fermante

Attribut

En plus d’avoir un contenu, un élément peut avoir des attributs . Les attributs HTML fournissent des informations supplémentaires sur un élément HTML. Ils peuvent être considérés comme des propriétés de l’élément. Un élément peut avoir un seul attribut, plusieurs attributs ou aucun attribut du tout. Ils sont stockés dans la balise d’ouverture. Par exemple:

Les guillemets sont très importants, alors ne les oubliez pas ! Notez également qu’il n’y a pas d’espace de chaque côté des signes égal (il doit cependant y avoir des espaces entre les attributs).

Écrire votre première page web

Pour écrire du HTML, vous pouvez utiliser n’importe quel éditeur de texte tel quel Microsoft Notepad ou le bloc note. Cependant il y a des éditeurs dédiés pour la programmation tel quel Sublime Text, Atom, Notepad++ dans cet atelier nous utiliserons le plus populaire Visual Studio Code. Installer Visual Studio Code et lancer l’application. Commençons !

1.1 Première étape vous devez créez un dossier et dans ce dossier, créez un fichier index.html puis on l’édite :

1.2 A la ligne 1 ajouter la balise <DOCTYPE! html> . Cette balise indique au navigateur la version HTML utilisé pour coder. Ici nous venons de déclarer la version HTML5.
Ensuite ligne 2, nous indiquons l’élément racine avec la balise <html>. Dans cet élément racine, nous ajoutons les balises <head> et <body>

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
  </body>

</html>

La conception du HTML se compose de deux parties : la <head> et le <body> :

• La balise <head> contient des informations de support sur ce fichier, communément appelées metadata. Meta quoiii ??? ?. Vous n’avez pas besoin de comprendre ?, c’est encore trop prématuré . Mettez ça dans un tiroir, on en reparlera quand on fera du référencement internet. Pour le moment on étudie la structure. Cette balise <head> contient également la balise <title>, son contenu est le titre de notre page.
  On pourra aussi ajouter des liens vers des feuilles de style CSS et des fichiers Javascript, nous y reviendrons plus tard. Aaah une chose importante ! Tout ce que vous écrivez dans la balise <head> n’est pas visible sur la page. Pour publier du contenu visible, il faut écrire dans la balise <body>.
• La balise <body> contient les informations que l’on souhaite afficher dans le navigateur web. Voilà c’est tout ?.

1.3 Reprenons notre fichier index.html, après la ligne 4, ajouter la balise <title> puis après la ligne 8, ajouter un titre <h1> et un paragraphe <p>. Sauvegardez et ouvrez ce fichier dans un navigateur :

<!DOCTYPE html>
<html>

  <head>
    <title>Carte aventurier</title>
  </head>

  <body>
   <h1>Julie Cario</h1>
   <p>Développeuse web et photographe</p>
  </body>

</html>

Félicitations !!! Vous avez crée votre première page web ?? !.
Vous avez ajouté le titre de la page qui s’affiche dans l’onglet, dans le contenu un titre et un paragraphe.

Ajouter une image

Tout d’abord, dans votre dossier de travail, créez un nouveau dossier nommé images puis ajouter les 2 images données pour le projet :

Nous utilisons la balise <img> pour insérer une image avec un attribut src qui contient le chemin du fichier d’image que vous souhaitez insérer. Nous utilisons un 2e attribut alt pour fournir un texte alternatif avec la description de l’image si l’image ne se charge pas. La balise <img> n’a pas de balise de fermeture. Sauvegardons et testons de nouveau.

<body>
  <img src="./images/toa-heftiba.jpg" alt="Photo de profil">
  <h1>Julie Cario</h1>
  <p>Développeuse web et photographe</p>
</body>

Excellent l’image est chargé, mais elle prends quasiment tout l’écran !
On va styler l’image, c’est à dire ajuster la taille mais aussi la forme. Pour faire ça on va utiliser le CSS !

Introduction au CSS

CSS est l’acronyme de Cascading Style Sheets, on peut traduire par feuilles de style en cascade. Ce langage permet de décrire la présentation des pages web mais aussi la rendre dynamique. Si vous voulez construire une maison, il vous faut :
Des briques ( HTML ) pour bâtir les murs.
La peinture ( CSS ) pour embellir votre maison.

Il est très facile d’apprendre le CSS. Avec seulement quelques heures de pratiques, vous pouvez facilement styliser des textes, des éléments et les mises en page.

Comment fonctionne le CSS ?

La syntaxe

Et voici la syntaxe du CSS :

Nous devons déclarer un selecteur, ici le selecteur est img. Si il y a une balise img, du style sera appliqué par les propriétés déclarés entre les deux accolades. Ici nous avons 2 propriétés : height pour la hauteur de l’image et width pour la largeur. Notez que chaque propriété est séparé par un point virgule :

img { height: 110px; width: 110px}

Ok, mais on le place où ce code ? Il existe trois façons

Le CSS dans le head :

Dans le <head> ajoutons la balise <style>, tout ce qui sera dans cette balise sera du code CSS. on ajoute le style pour l’image, on sauvegarde puis on test.

<head>
  <title>Carte Aventurier</title>

  <style>
    img { height: 110px; width: 110px }
  </style>
</head>

<body>
  <img src="./images/toa-heftiba.jpg" alt="Photo de profil">
  <h1>Julie Cario</h1>
  <p>Développeuse web et photographe</p>
</body>

Top ! La photo est mieux ?. Maintenant stylons la taille et la couleur titre ainsi que la couleur du paragraphe :

  <style>
    img {height: 110px; width: 110px}
    h1 {color: #b103c1}
    p {color: #60697b}
  </style>

Super ! C’est un peu plus jolie ?!.

La 2e façon de styler est de mettre le code CSS dans la balise, le résultat sera le même :

<!DOCTYPE html>
<html>

<head>
  <title>Carte Aventurier</title>
</head>

<body>
  <img style="height: 110px; width: 110px" src="./images/toa-heftiba.jpg" alt="Photo de profil">
  <h1 style="color: #b103c1">Julie Cario</h1>
  <p style="color: #60697b" >Développeuse web et photographe</p>
</body>
</html>

La 3e méthode est la plus populaire, elle consiste à créer un fichier .css, nous le nommons style.css. Puis nous l’importons depuis index.html :

schema index.html + style.css

1. Donc c’est parti ! Ajouter un nouveau fichier à votre projet et nommez le style.css, ajouter le style pour les balises <img>, <h1> et <p> :

img {height: 110px; width: 110px}

h1 {color: #b103c1}

p {color: #60697b}

2. De retour sur le fichier index.html, on supprime la balise <style> et son contenu, à la place nous importons le fichier style.css. Pour faire ça, il faut faire appel à la balise <link>, qui veut dire lien en anglais. On lui ajoute 2 attributs :

<link rel="stylesheet" href="style.css">

• rel signifie relationship, il spécifie la relation entre la balise et le lien défini par l’autre attribut <href>. Ici la valeur de rel est : stylesheet pour feuille de style.
• href signifie hypertext reference, c’est la source du fichier utilisé par la balise <link>. Ici nous mettons style.css

Voici le résultat dans votre balise <head> :

<head>
  <title>Carte Aventurier</title>

  <link rel="stylesheet" href="style.css">
</head>

3. Sauvegarder et testez de nouveau ! Vous aurez toujours le même visuel ?.

Changer la police de caractères du titre

Une bonne police fait toujours une bonne première impression. Pensez-y !
Par défaut la police de votre navigateur est généralement du Times New Romans. Pour personnaliser la typographique du <h1> nous allons utiliser la bibliothèque gratuite de Google Fonts, vous avez aussi Adobe Fonts mais c’est payant.

1. Rendez-vous sur Google Fonts et commencez à chercher parmi les styles de police disponibles. Pour ce projet j’ai choisi Georama. Une fois que vous avez trouvé votre police, cliquez sur + Select this style pour sélectionner l’épaisseur, j’ai choisi Regular 400.

2. Maintenant nous devons simplement copier-coller la ligne de code fournie par Google Fonts dans votre fichier index.html. Vous venez de synchroniser votre fichier index.html avec la police Georama de Google Fonts.

Votre <head> doit ressembler à ça :

<head>
  <title>Carte Aventurier</title>
  <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=Georama&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

3. L’étape suivante consiste à ajouter la police à la balise <h1>. Récupérez d’abord la déclaration de police depuis Google Fonts. Insérez ensuite la famille de police dans le selecteur h1 du fichier style.css :

Votre fichier style.css doit ressembler à ça :

img {height: 110px; width: 110px}

h1 {
  color: #b103c1;
  font-family: 'Georama', sans-serif;
}

p {color: #60697b}

4. Sauvegardez et voilà nous avons stylé le titre ??!.

5. Et pour finir, on change la couleur du titre avec color, sa taille avec font-size et sa graisse avec font-weight :

h1 {
  color: #383d46;
  font-family: 'Georama', sans-serif;
  font-size: 26px;
  font-weight: bold;
}

Bien, maintenant passons au paragraphe.

Styler le contenu de la page

Maintenant vous avez compris, pour styler le paragraphe <p>, il faudra l’appeler dans le fichier style.css. Mais je vais vous montrer une autre méthode.

1. Dans le fichier style.css, supprimer le selecteur <p> à la ligne 10

2. Puis nous ajoutons le selecteur body, il aura 3 propriétés :

• color : donne la couleur du contenu
• background-color : donne la couleur de fond
• font-family : donne la typographie

Voilà le code :

img {height: 110px; width: 110px}

h1 {
  color: #383d46;
  font-family: 'Georama', sans-serif;
  font-size: 26px;
  font-weight: bold;
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: #e8e8e8;
  color: #60697b;
}

3. A la ligne 11, j’ai appelé la police : Manrope. Comme au dessus, nous devons importer le lien, voici le lien à ajouter dans votre fichier index.html :

<link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet"> 

4. Dans index.html, placer le à la ligne 9 :

<!DOCTYPE html>
<html>

<head>
  <title>Carte Aventurier</title>
  <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=Georama&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet"> 
  <link rel="stylesheet" href="style.css">
</head>

Voilà le contenu dans le <body> est stylé !

C’est quoi une div ?

Cool ! Maintenant que nous connaissons les bases de style des différents types d’éléments de notre site, il est temps d’apprendre quelques astuces de formatage. Tout d’abord, nous allons organiser nos éléments dans des bloques, pour ça nous utilisons la balise <div> .

C’est quoi une balise <div> ?
Div signifie division, c’est un conteneur vide, il n’affecte pas le contenu ou la mise en page. Il est utilisé pour regrouper des éléments HTML à styliser avec du CSS ou à manipuler avec des scripts.

Par exemple, sur index.html , nous séparons le titre et la courte description de l’image. Chaque div ressemblera à ceci :

1 Nous ajoutons une balise <div> et nous déplaçons tous les éléments dans cet balise :

<body>
 <div>
    <img src="./images/toa-heftiba.jpg" alt="Photo de profil">
 </div>
  <div>
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
  </div>
</body>

Ensuite nous allons ajouter une class.

C’est quoi une class ?

Une class est utilisé pour référencer une balise ou un groupe de balises HTML. Ces balises référencés partagent ainsi des propriétés de style communes.

Voici 4 classes d’élèves, 2 de 6ème et 2 de 5ème, ils portent le même uniforme suivant leur classe :

Et bien en CSS, c’est le même principe, dans le fichier index.html, nous déclarons le nom d’une class puis nous configurons ses propriétés de style dans le fichier style.css :

Au lancement de la page index.html, le navigateur chargera le style issu du fichier style.css :

1. A la ligne 17, nous donnons à la <div> un attribut class afin de l’identifier dans le fichier style.css. Donnez un nom de class qui sera facilement reconnaissable sur votre feuille de style. Voici un exemple :

<body>
  <div>
    <img src="./images/toa-heftiba.jpg" alt="Photo de profil">
  </div>
  <div class="container">
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
  </div>
</body>

2. Puis dans le fichier style.css, appelez la class avec ses 3 propriétés :

• width: Assigne une largeur à la <div>
• height: Assigne une hauteur à la <div>
• background-color: Définit une couleur de fond

Voici le code à écrire :

.container {
  width: 300px;
  height: 200px;
  background-color: #fff;
}

Note :
Certaines couleurs hexadécimales à six chiffres peuvent être écrites en utilisant un raccourci à trois chiffres appelés hexadécimales abrégées. Les couleurs #RRGGBB sont abrégés à 3 caractères #RGB. Donc, au lieu que la syntaxe soit écrite comme ceci : #ff88bb, il est possible de l’écrire comme ceci : #f8b. Dans notre exemple au dessous : #ffffff deviens #fff.  Les couleurs hexadécimales abrégées réduise la taille des feuilles de style CSS.

Et voilà ! Nous avons ajouté du style uniquement dans cette balise <div> !
Nous allons maintenant centrer tout le contenu texte de cette classe .container.

La propriété text-align

La propriété text-align est utilisée pour spécifier comment le contenu doit être aligné horizontalement dans un bloc. Les valeurs sont :

• left : aligne le contenu à gauche
• center : aligne le contenu au centre
• right : aligne le contenu à droite
• justify : essaie d’espacer les mots de sorte que les côtés de vos paragraphes soient alignés sur la gauche et droite.

Vous avez déjà utilisé cette propriété text-align. Avec un éditeur de texte comme Microsoft Word ou Libre Office :

1. Alors utilisons la propriété text-align et sa valeur center pour centrer le contenu texte :

.container {
  width: 300px;
  height: 200px;
  background-color:#fff;
  text-align: center;
}

Parfait ! Nous continuons tout de suite avec l’ajout de bordures.

La propriété border

En CSS, la propriété border est utilisée pour définir la bordure d’un élément HTML.
La syntaxe est en trois sous-propriétés qui définissent la largeur de la bordure, le style et la couleur :

1. Testons tout de suite dans notre classe .container. Nous ajoutons une bordure avec un épaisseur de 1px, de type solid (ligne droite) et une couleur grise #dedede :

.container {
  width: 300px;
  height: 200px;
  background-color:#fff;
  text-align: center;
  border: 1px solid #818181;
}

Vous pouvez ajuster l’épaisseur avec une valeur plus élevé et changer la couleur. Il existe plusieurs style de bordure, voici la liste :

Sachez que les plus utilisés sont le style solid, dotted et dashed. Ok restons toujours avec les bordures, dans la prochaines étapes nous allons arrondir les angles des bordures avec la propriété border-radius.

La propriété border-radius

La propriété border-radius sert à arrondir les angles de tout élément, balise ou div.

border-radius avec 1 valeur

A chaque fois que vous donnez une valeur, tous les coins sont arrondis par cette valeur, la valeur donnée correspond à son rayon. Vous pouvez utiliser des valeurs en px, rem, em et également utiliser des pourcentages  :

1. Toujours dans notre classe .container, nous allons utiliser une seule valeur avec un rayon de 8px :

.container {
  width: 300px;
  height: 200px;
  background-color:#fff;
  text-align: center;
  border: 1px solid #818181;
  border-radius: 8px;
}

Vous pouvez personnaliser encore plus notamment avec 4 ou 8 valeurs.

border-radius avec 4 valeurs

Lorsque vous utilisez 4 valeurs, vous commencez d’abord à définir le coin en haut à gauche puis comme le sens des aiguilles d’une montre, en haut à droite, en bas à gauche et pour finir en bas en droite. Cette fois-ci utilisons des rayons en pourcentage :

border-radius avec 8 valeurs

Si des valeurs sont données avant et après la barre oblique, les valeurs avant la barre oblique définissent le rayon horizontal et les valeurs après la barre oblique définissent le rayon vertical. S’il n’y a pas de barre oblique, les valeurs définissent les deux rayons de manière égale :

Je vous invite à aller faire un tour sur cet excellent générateur pour créer des formes avec 8 points  : 8 point full control

Parfait, maintenant nous allons centrer notre élément, pour faire ça nous aurons besoin de la propriété margin.

La propriété margin

La propriété margin est l’espace vide autour d’un élément. L’espace supplémentaire ajouté, n’a aucune couleur de fond, il est complètement transparente. Prenons un exemple, imaginez vous êtes dans un musée, vous contemplez un tableau, vous pouvez voir que le tableau est dans un cadre et fixé sur un mur avec une position définie en mètre :

Et bien en HTML-CSS, ça fonctionne de la même manière, nous avons une image avec un border et la propriété margin correspond à la distance que l’élément souhaite conserver avec les autres éléments qui l’ entourent.

Syntaxe :

margin : valeur en px, em, auto, %, itinial ou inherit ;

Margin à 1 valeur

L’utilisation d’une seule valeur applique à toutes les marges : haut, droite, bas, gauche.

margin: 10px

Margin à 2 valeurs

La première valeur applique la marge en haut et en bas  et la seconde à droite et gauche .

Margin à 3 valeurs

La première valeur applique la marge en haut , la deuxième à gauche et à droite , la troisième en bas .

Margin à 4 valeurs

L’utilisation de 4 valeurs s’applique comme dans le sens de l’aiguille d’une montre. La première en haut , la deuxième à droite , la troisième en bas , la quatrième à gauche.

Margin spécifiques

Si vous souhaitez mettre une marge sur un côté spécifique, vous pouvez utiliser ces 4 propriétés :

• margin-top : ajoute une marge uniquement en haut
• margin-right : ajoute une marge uniquement à droite
• margin-bottom : ajoute une marge uniquement en bas
• margin-left : ajoute une marge uniquement à gauche

La valeur auto

La valeur auto est utilisé pour dire au navigateur de sélectionner automatiquement une marge, nous l’utilisons le plus souvent pour centrer un élément. Et justement dans notre projet nous allons utiliser cette valeur pour centrer notre élément.

1. Revenons de nouveau dans notre classe .container, à la ligne 23

.container {
  width: 300px;
  height: 200px;
  background-color:#fff;
  text-align: center;
  border: 1px solid #818181;
  border-radius: 8px;
  margin: 100px auto;
}

Super ! Dans la prochaine étape nous allons donner de l’espace entre le contenu d’un élément et sa bordure.

La propriété padding

La propriété padding est l’espace vide entre le contenu d’un élément et sa bordure. La syntaxe est semblable à la propriété margin.

Syntaxe :

Et comme la propriété margin , vous pouvez définir des valeurs spécifiques pour chaque côté d’un élément en utilisant les propriétés suivantes :

• padding-top : ajoute un remplissage uniquement en haut.
• padding-right : ajoute un remplissage uniquement à droite.
• padding-bottom : ajoute un remplissage uniquement en bas.
• padding-left ajoute un remplissage uniquement à gauche.

Maintenant, nous allons voir comment utiliser le padding avec l’image de notre projet.

1. Ajoutons une classe nommé photo à notre balise img :

<body>
  <div>
    <img class="photo" src="./images/toa-heftiba.jpg" alt="Photo de profil">
  </div>
  <div class="container">
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
  </div>
</body>

2. Puis sur le fichier style.css à la ligne 1, renommer img par le nom de la classe .photo et ajoutez un padding et un background-color :

.photo {
  height: 110px;
  width: 110px;
  padding: 4px;
  background-color: #fff;
}

3. Pour finir nous allons utiliser border-radius avec la valeur 50% pour avoir une image arrondie :

.photo {
  height: 110px;
  width: 110px;
  padding: 4px;
  background-color: #fff;
  border-radius: 50%;
}

Excellent ! Vous pouvez voir la photo arrondie avec un contour blanc grâce à la propriété padding.

Réinitialiser le CSS (Reset CSS)

Le plupart des navigateurs applique leur propre style à différents éléments html. Les valeurs de style peuvent varier d’un navigateur à l’autre. Dans notre projet, le navigateur a ajouté un margin. Pour le savoir faites un clique-droit et inspecter le code :

Nous pouvons voir qu’une marge est appliqué à tout les éléments… sauf que nous ne voulons pas qu’il y ait de margin ou de padding autour d’un élément. Pour ça nous devons réinitialiser le CSS.

1. Tout en haut de notre fichier style.css, nous demandons à ce que tous les éléments ont par défaut le margin et les padding à 0 :

* {
  margin: 0;
  padding: 0;
}

.photo {
  height: 110px;
  width: 110px;
  padding: 4px;
  background-color: #fff;
  border-radius: 50%;
}

Et voilà ! Tous les margin et les padding des éléments sont retirés sauf ceux que nous avons données précédemment.

Ok maintenant on va travailler sur la photo de profil, nous allons la mettre dans le cadre et nous ajouterons une image en fond.

1. Tout d’abord commençons à mettre une classe nommé cover à la ligne 14 du fichier index.html :

<body>
  <div class="cover">
    <img class="photo" src="./images/toa-heftiba.jpg" alt="Photo de profil">
  </div>
  <div class="container">
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
  </div>
</body>

2. Puis nous mettons la photo de profil dans le balise div de la classe container

<body>
  <div class="container">
    <div class="cover">
      <img class="photo" src="./images/toa-heftiba.jpg" alt="Photo de profil">
    </div>
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
  </div>
</body>

Propriété background-image

Puis nous définissons une image comme arrière-plan de la photo de profil. Pour faire ça, nous utilisons url(). URL signifie universal resource locator.
Entre les parenthèses, nous indiquons d’où proviens la ressource pour effectuer l’action. L’action est d’afficher une image, nous devons donc indiquer le chemin de l’image :

3. Dans la classe body nous ajoutons la propriété background-image avec le chemin de l’image :

body {
  font-family: 'Manrope', sans-serif;
  background-color: #e8e8e8;
  color: #60697b;
  background-image: url("./images/hendrik-schuette-unsplash.jpg");
}

4. Si vous dézoomez votre navigateur ( maintenez la touche CTRL et appuyé sur la touche – ), vous remarquez que l’image se répète. Corrigeons ça avec l’option no-repeat :

body {
  font-family: 'Manrope', sans-serif;
  background-color: #e8e8e8;
  color: #60697b;
  background-image: url("./images/hendrik-schuette-unsplash.jpg") no-repeat;
}

5. ok maintenant nous allons centrer l’image sur l’axe horizontale et verticale, pour faire ça nous ajouter center center. La première valeur est l’axe verticale et la seconde l’axe horizontale :

body {
  font-family: 'Manrope', sans-serif;
  background-color: #e8e8e8;
  color: #60697b;
  background-image: url("./images/hendrik-schuette-unsplash.jpg") no-repeat center center;
}

Si vous souhaitez que l’image soit position sur le haut en partant de la gauche vous devez l’écrire comme ceci :
background-image: url("./images/hendrik-schuette-unsplash.jpg") no-repeat top left ;

6. Ensuite nous ajoutons ce fond d’image dans notre vignette, ajoutez la classe .cover et déplacez la propriété background-image dans cette classe :

* {
  margin: 0;
  padding: 0;
}

.photo {
  height: 110px;
  width: 110px;
  padding: 4px;
  background-color: #fff;
  border-radius: 50%;
}

.cover {
  background: url("./images/hendrik-schuette-unsplash.jpg") no-repeat center center;
}

h1 {
  color: #383d46;
  font-family: 'Georama', sans-serif;
  font-size: 26px;
  font-weight: bold;
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: #e8e8e8;
  color: #60697b;
}

7. Zoomez votre navigateur ( maintenez la touche CTRL et appuyé sur la touche + ) et vous devez avoir ce résultat :

8. Ok mais c’est pas très jolie, l’image n’est pas adapté dans la vignette. Pour que l’image s’intègre bien dans le cadre, nous avons la propriété background-size avec la valeur cover. Ajoutons cette propriété dans la classe cover :

.cover {
  background: url("./images/hendrik-schuette-unsplash.jpg") no-repeat center center;
  background-size: cover; 
}

Pour finir nous allons définir une hauteur à cette image de fond et aussi arrondir les angles de l’image de fond. En effet si vous zoomez sur le coin de l’image vous voyez un angle droit en haut gauche et en haut à droite. Hors nous avons appliqué une bordure arrondi à notre vignette :

9. Ajoutons une hauteur de 145px, la bordure de la vignette est de 8px alors nous appliquons un border-radius uniquement en haut à droite et en haut à gauche de 8px, le reste sera de 0px pour garder l’angle droit :

.cover {
  background: url("./images/hendrik-schuette-unsplash.jpg") no-repeat center center;
  background-size: cover; 
  height: 145px;
  border-radius: 8px 8px 0 0;
}

GG ! Vous avez fini pour l’image de fond ! ??. Prochaine étape nous ajoutons du contenu puis nous centrerons la photo de profil.

La balise button

En HTML la balise <button> est utilisée pour créer des boutons. Lorsque vous cliquez sur un bouton, vous déclenchez l’évènement qui lui a été attribué.

1. Dans le fichier index.html ajoutez les boutons :

<body>
  <div class="container">
    <div class="cover">
      <img class="photo" src="./images/toa-heftiba.jpg" alt="Photo de profil">
    </div>
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
    <button>Message</button>
    <button>Suivre</button>
  </div>
</body>

Aih nous avons un souci ? ! Les balises <button> sont en dehors de la vignette ! En fait c’est dû à la taille de notre vignette. Rappelez-vous, nous avons défini une hauteur de 200px.

2. Retournons sur la feuille de style et nous supprimons la propriété height. La hauteur s’adaptera au contenu. Voici la classe .container après la suppression de height :

.container {
  width: 300px;
  background-color:#fff;
  text-align: center;
  border: 1px solid #818181;
  border-radius: 8px;
  margin: 100px auto;
}

3. Sur les boutons nous mettre un peu de marge en haut et en bas, pour cela ajoutez l’élément button dans le CSS :

.container {
  width: 300px;
  background-color:#fff;
  text-align: center;
  border: 1px solid #818181;
  border-radius: 8px;
  margin: 100px auto;
}

button{
  margin: 10px 0 20px 0;
}

Bouton message

Commençons par styler le premier bouton.

On ajoute une classe nommé msg-btn à la ligne 20

<body>
  <div class="container">
    <div class="cover">
      <img class="photo" src="./images/toa-heftiba.jpg" alt="Photo de profil">
    </div>
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
    <button class="msg-btn">Message</button>
    <button>Suivre</button>
  </div>
</body>
</html>

Puis dans le style.css on configure la classe .msg-btn, vous connaissez toutes les propriétés hormis cursor, nous donnons à dernier la valeur pointer, cela signifie au moment le pointure de la souris passe sur le bouton, le pointure change d’icône :

button{
  margin: 10px 0 20px 0;
}

.msg-btn {
  background: #7644f3;
  border: 1px solid #7446e9;
  padding: 10px 25px;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

Bouton suivre

Etant donnée que le bouton suivre sera de la même taille et quasiment le même style, nous pouvons lui appliquer les mêmes propriétés que la classe .msg-btn .

1. Commençons par attribué une classe à ce bouton :

<body>
  <div class="container">
    <div class="cover">
      <img class="photo" src="./images/toa-heftiba.jpg" alt="Photo de profil">
    </div>
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
    <button class="msg-btn">Message</button>
    <button class="follow-btn">Suivre</button>
  </div>
</body>

2. Puis dans le css, nous appelons la classe à côté de .msg-btn, les noms doivent être séparé par une virgule :

.msg-btn, .follow-btn {
  background: #7644f3;
  border: 1px solid #7446e9;
  padding: 10px 25px;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

3. Nous allons personnaliser le bouton, pour cela ajoutez ceci :

.msg-btn, .follow-btn{
  background: #7644f3;
  border: 1px solid #7446e9;
  padding: 10px 25px;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.follow-btn{
  margin-left: 10px;
  background: transparent;
  color: #7644f3;
}

4. Et pour finir, nous ajoutons un effet de survol sur le bouton avec hover :

Le sélecteur :hover

Le sélecteur :hover permet d’appliquer des styles lorsque l’utilisateur survole l’élément avec sa souris. Dans notre projet, nous voulons que lorsque l’utilisateur survole le bouton Suivre, la couleur de fond et le contenu changent. Pour cela nous récupérons la classe du bouton Suivre .follow-btn et nous ajoutons le sélecteur :hover :

.follow-btn{
  margin-left: 10px;
  background: transparent;
  color: #7644f3;
}

.follow-btn:hover{
  color: #fff;
  background: #7644f3;
  transition: 0.5s;
}

A la ligne 65, la propriété transition correspond au délai de l’animation. Si vous modifiez la valeur par transition: 2s, l’animation mettra 2 secondes

Les icônes

En CSS, nous pouvez utiliser des icônes depuis une librairie comme les typographies Google Font. L’une des plus populaires est Font Awesome. Au lieu de contenir des styles de lettres ou de chiffres, Font Awesome contient des icônes.

1. Dans le fichier index.html, ajoutez le lien CSS Font Awesome à votre site web :

<head>
  <title>Carte Aventurier</title>
  <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=Georama&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet"> 
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
  <link rel="stylesheet" href="style.css">
</head>

2. Sur le site Font Awesome, cliquez sur icons du menu principal.

3. Dans le formulaire de recherche, saisissez heart.

4. Copier la balise <i>.

5. Dans votre fichier index.html, ajouter une balise <div> et collez le code.

<body>
  <div class="container">
    <div class="cover">
      <img class="photo" src="./images/toa-heftiba.jpg" alt="Photo de profil">
    </div>
    <h1 color="red">Julie Cario</h1>
    <p>Développeuse web et photographe</p>
    <button class="msg-btn">Message</button>
    <button class="follow-btn">Suivre</button>

    <div>
      <i class="fas fa-heart"> 10.2k</i>
    </div>
  </div>
</body>

Dans cette balise <i> la classe fas correspond au style par défaut et la classe fa-heart correspond à l’icône souhaité. Ces classes font appellent à la source <link rel=’stylesheet’ ***/font-awesome/5.15.4/css/all.min.css’> que nous avons mis précédemment dans la balise <head>

6. Ajoutons 2 autres icônes avec leur valeur.

    <div>
      <i class="fas fa-heart"> 10.2k</i>
      <i class="fas fa-comment"> 8.4k</i>
      <i class="fas fa-share"> 12.2k</i>
    </div>

7. Ok, maintenant nous allons ajouter du style pour ces icônes.
Nous commençons par ajouter une classe à la balise <div> :

 <div class="social">
      <i class="fas fa-heart"><span> 10.2k</span></i>
      <i class="fas fa-comment"><span> 8.4k</span></i>
      <i class="fas fa-share"><span> 12.2k</span></i>
    </div>

8. Puis dans la feuille de style, ajoutons la classe .social. Nous voulons appliquer les modifications aux balises i alors il faut ajouter i et tous les propriétés s’appliqueront uniquement qu’au balise i :

.social i {
  padding-left: 20px;
  font-size: 12px;
  margin-bottom: 20px;
}

8. Ensuite nous changeons la typographie du contenu par la même que celle du <body>.

.social i {
  padding-left: 20px;
  font-size: 12px;
  margin-bottom: 20px;
  font-family: 'Manrope', sans-serif;
}

Aih ?!. Le contenu a bien changé mais, nous n’avons plus nos icônes !
En fait, c’est normal ?. Souvenez-vous, les icônes sont des polices que nous importons comme les polices de Google Fonts. En appliquant la font Manrope cela entraine un conflit avec les polices d’icônes. Pour corriger ce souci, il faut isolé le contenu dans un élément. Pour cela nous allons utilons la balise <span>.

C’est quoi une balise span ?

La balise <span> est semblable à la balise <div>, elle n’a pas de propriété significative. La différence c’est que la balise <div> est un élément de niveau bloc et <span> est un élément en ligne :

Si vous souhaitez afficher des éléments sur une même ligne, utilisez l’élément <span>.

Revenons sur notre projet, notre problème c’est qu’il y a un conflit de typographie entre les icônes et la police Manrope. Il faut isolé le contenu texte dans une balise et appliquer la police uniquement dans cette balise. Pour cela nous pouvons utiliser l’élément <div> mais dans cette exemple nous utiliseront l’élément <span>.

1. Dans les balises icônes, enveloppez le contenu dans des éléments <span> :

    <div class="social">
      <i class="fas fa-heart"><span> 10.2k</span></i>
      <i class="fas fa-comment"><span> 8.4k</span></i>
      <i class="fas fa-share"><span> 12.2k</span></i>
    </div>

2. Puis dans style.css, nous associons span avec la classe .social. On déplace la propriété font-family à la ligne 75.

.social i {
  padding-left: 20px;
  font-size: 12px;
  margin-bottom: 20px;
}

.social span {
  font-family: 'Manrope', sans-serif;
}

Génial ça marche ? !. Nous avons fini avec les icônes ?.

Centrer la photo de profil

1. Allez nous avons bientôt terminé ? !. Nous allons centrer la photo de profil verticalement puis ajuster le titre pour qu’il soit sous la photo de profil. Pour cela nous utilisons la propriété margin :

* {
  margin: 0;
  padding: 0;
}

.photo {
  height: 110px;
  width: 110px;
  padding: 4px;
  background-color: #fff;
  border-radius: 50%;
  margin: 84px 0 0 0;
}

.cover {
  background: url("./images/hendrik-schuette-unsplash.jpg") no-repeat center center;
  background-size: cover; 
  height: 145px;
  border-radius: 8px 8px 0 0;
}

h1 {
  color: #383d46;
  font-family: 'Georama', sans-serif;
  font-size: 26px;
  font-weight: bold;
  margin: 58px 0 10px 0;
}

2. Et pour terminer cette atelier nous allons changer le fond d’écran en blanc puis donner une couleur plus clair sur le contour leger avec un effet d’ombre sur la vignette :

body {
  font-family: 'Manrope', sans-serif;
  background: #fefefe;
  color: #60697b;
}

.container {
  width: 300px;
  background-color:#fff;
  text-align: center;
  border: 1px solid #f4f4f4;
  border-radius: 8px;
  margin: 100px auto;
  box-shadow: 0 .25rem 1.75rem rgba(30,34,40,.07);
}

Conclusion

Cela peut sembler écrasant maintenant, mais une fois que nous aurons commencé à utiliser HTML, vous verrez que c’est vraiment facile et intuitif

Nous savons tous que lire des articles ou regarder des vidéos YouTube ne suffit pas. Nous devons pratiquer autant que nous le pouvons. Les cours ci-dessus couvrent toutes les connaissances dont les débutants ont besoin pour apprendre HTML et CSS.

Gardez à l’esprit que peu importe le secteur dans lequel vous travaillez. Si vous voulez maîtriser la technologie, l’apprentissage continu et la persévérance sont la seule voie vers le succès.

Que vous souhaitiez être un concepteur UX/UI de licorne ou un développeur front-end, le didacticiel HTML et CSS et les cours que j’ai partagés vous mèneront là où vous voulez aller. J’espère qu’ils vous aideront autant qu’ils le proposent.

Code Source

Téléchargez le code source.