Formations

Formation HTML / CSS / PARTIE 1

Par Guillaume , le 23 août 2019 , mis à jour le 24 août 2019 — 12 minutes de lecture
Accueil › Formations › Formation HTML / CSS / PARTIE 1

Formation HTML / CSS et WordPress

Dans cette formation, vous apprendrez les bases de mise en page HTML, ainsi que la « décoration » avec le CSS.

Ces 2 langages sont complémentaires, grâce au html, créez votre structure et block, insérez votre texte et images et venez décorer avec le css.

1 – Qu’est ce qu’un site internet et comment ça fonctionne:

Un site internet, est un ensemble de pages ou de ressources accessible depuis une adresse url en ligne ou local.

Pour les consulter, vous aurez besoin d’un logiciel appelé navigateur, il en existe plusieurs que vous connaissez surement, comme Google Chrome, Firefox ou encore Edge (anciennement internet explorer)

2 – De quels outils avons nous besoin pour faire un site web ?

Un éditeur de texte (wordpad sous windows ou textEdit sous mac) suffit ! Cela dit, il existe des logiciel qui sont un peu plus pratique, comme notepad++ (un peu vieux) sublimeText ou encore Atom. Ces logiciels permettent d’avoir une mise en page plus soignée, avec des couleurs et des fonctionnalités qui vous permettront de trouver vos erreurs plus vite.

Si vous souhaitez allez plus loin, surtout dans le design, vous pouvez utilisez un logiciel comme Photoshop pour créer la maquette de votre site, puis l’intégrer en la codant. En revanche, cela demande beaucoup de travail en plus, il existe des outils, appelés Framework ou librairies, qui vous permettront de gagner du temps sur la mise en page de vos boutons, tableau, liste etc…

Nous aborderons twitter bootstrap un peu plus loin.

3 – Faire un hello world avec HTML

Pour commencer, rendez vous sur votre Bureau de votre ordinateur, et créez un dossier nommé “mon_site“

Puis ouvrez votre éditeur de code (sous mac, nous favorisons Atom qui est open source, nous recommandons sublime Text pour PC) et créez un nouveau fichier appelé index.html et placez le dans le dossier que vous venez de créer.

Ecrivez dedans ce fichier le code suivant (nous allons revenir en détail sur ce dernier)


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon premier site</title>
</head>
<body>
  <p> Hello world :) </p>
</body>
</html>

Décortiquons un peu le code:

La première ligne:

<!DOCTYPE html>

est le doctype, ceci permet d’indiquer au navigateur quel langage est utilisé, dans notre cas le HTML 5, il y quelques temps auparavant, les sites était en XHTML 1.0 et le doctype ressemblait à cela:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

moins facile n’est-ce pas ? 🙂

La suivante:

<html lang="fr">

est le début de notre document.

Le HTML fonctionne comme ceci:

<balise></balise>

J’ouvre une balise, je met du contenu à l’intérieur et je referme.

Donc dans notre cas:

<html lang="fr">

... 

</html>

on peux voir la balise se refermer à la fin du document, c’est dans cette balise que va se passer la création du site.

Ensuite, il y a la balise <head></head>

cette balise, sert à mettre plusieurs information qui ne figureront pas sur le site (ex: on ne peux pas inserer d’image ou de paragraphe dans celle-ci).

Elle servira surtout à lier nos fichiers CSS, javascript et rajouter des informations comme les balises <title></title>

ou autre « metas » pour le référencement et SEO, nous y reviendrons plus tard.

Sous la fin de la balise <head> après le </head>, nous avons ceci:

<body>
  <p> Hello world :) </p>
</body>

le body.

Le body est tout ce qui figurera sur votre site, ou du moins à l’affichage.

Pour avoir un petit aperçu de votre site, rendez vous dans le dossier créé, puis double-cliquez sur le fichier index.html, il va s’ouvrir dans votre navigateur par défaut et vous allez apercevoir ceci:

Félicitations, vous venez de créer votre premier site internet ! 🙂

Bon c’est loin d’être complet, ne nous cachons rien.

Si vous souhaitez faire des modifications, retournez sur l’éditeur de code, changer le texte, sauvegardez, retournez sur le navigateur et actualisez la page.

Vos modifications apparaitront.

Petite information:  Pourquoi avoir nommé le fichier index.html?

Oui, bonne question pourquoi donc ? On aurait pu l’appeler, toto.html, le résultat aurait été le même. Tout simplement pour la simple est bonne raison que lorsque le serveur pointera sur site (ex: http://mon-site.com) au lieu de rentrer http://mon-site.com/index.html par défaut, le serveur affichera le index.html, si il n’y en a pas, il ira cherche le index.php.

Creer la structure de son site:

Bon, c’est pas qu’on s’ennuie, mais il est temps de rentrer dans quelque chose d’un peu plus sérieux.

Faisons une petite liste des balises que vous allez utilisez très fréquemment:

  • <p></p>: p pour paragraphe, vous y glisserez, du texte et images… cette balise est de type block (à retenir pour plus tard)
  • <div></div>: div pour division, en gros, vous créez des blocks, qui peuvent contenir, du texte, des paragraphes images… etc… de type block également
  • <img>: img pour image, à noter que c’est <img> et non <img></img>: type inline
  • <ul></ul>: ul permet de faire une liste, contient généralement des <li></li>
  • <li></li>: élément d’une liste
  • <a></a>: lien hypertexte
  • <script></script>: Contient des script javascript la plupart du temps
  • <link></link>: Insérer un fichier de type css.
  • <table></table>: Pour créer des tableaux
  • <span></span>: Utilisez la plupart du temps pour décorer un élément.
  • <strong></strong>: Pour mettre du texte en gras automatiquement
  • <center></center>: Pour centre du texte automatiquement
  • <form></form>: Pour créer un formulaire (et vous allez en faire 🙂 )
  • <input>: Pour créer des champs de formulaire (ex: champs texte, button radio, checkbox sont la même balise)
  • <textarea></textarea>: Champs texte de formulaire large
  • etc…

Pour commencer, c’est pas mal, car il faut les retenir et ne pas mélanger tout ça.

Nous allons commencer par créer des blocks (div) puis mettre un fond de couleur, nous allons aborder le css.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon premier site</title>
</head>
<body>
  <div id="block1">
    <p>Block 1</p>
  </div>

  <div id="block2">
    <p>Block 2</p>
  </div>

  <div id="block3">
    <p>Block 3</p>
  </div>
</body>
</html>

Dans mon document, je viens de créer plusieurs blocks, si l’on rafraichit la page,  ça donne ce résultat:

Pas terrible du tout.

Mais attends, c’est quoi c’est id= »block1″ id= »block2″ etc… ??! 

Bonne question, le id= » » est ce qu’on appel un attribut, chaque élément html peux en avoir un ou plusieurs, vous pouvez même créer un attribut mon-attribut= »monAttribut » ça fonctionne, cela dit, ça n’a pas vraiment d’utilité pour le moment.

Nous y reviendrons plus tard…

Donc:

Si on regarde bien, chaque <div></div> est un bloc qui remplit la largeur du document.

Comme ceci:

En fait, ils passent tous à la ligne les uns à la suite des autres, c’est pour ça qu’on dit qu’ils sont de type block.

Il existe plusieurs type: block, inline et inline-block

Comment faire pour leur donner une taille, une couleur et les aligner ?

C’est à ce moment qu’intervient le CSS.

Rendez vous dans votre éditeur de code, créez un nouveau fichier et appelez le styles.css

Allez ensuite sur votre fichier index.html et collez ce code dans la balise <head></head>

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

la balise <link> vous permet de « lier » un fichier css.

Dans notre cas, on fait appel au fichier styles.css qui est au même niveau que le fichier index.html dans notre dossier.

Votre balise <head></head> ressemble à ça désormais:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon premier site</title>
  <link rel="stylesheet" href="styles.css">
</head>

Revenons dans notre fichier styles.css:

#block1{
  background-color: #ccc;
  border: 1px solid red;
}

Sauvegardez, retournez sur le navigateur, puis rafraichissez et voila résultat:

Waouw, magnifique hein ? 🙂

Reparlons un peu de notre CSS:

le css s’écrit de cette manière: #element{ code css }

dans notre cas:

#block1{
  background-color: #ccc;
  border: 1px solid red;
}

#block1 = element html qui a pour attribut id= »block1″

background-color: directive css pour changer la couleur de fond de l’élément en question

border: 1px solid red: directive css pour mettre une bordure rouge de 1px d’épaisseur sur l’élément en question.

Facile non ? 😉

Bon ce qui est bien, c’est que je peux cibler un seul élément de HTML, cela dit, comment faire si je veux leur donner le même style ?

L’attribut classe entre en jeu.

Tout comme l’attribut id, l’attribut classe peux avoir une ou plusieurs classe sur un seul élément ex:

<div class="mon_block autre_classe">
    <p>Block 1</p>
  </div>

  <div class="mon_block">
    <p>Block 2</p>
  </div>

  <div class="mon_block">
    <p>Block 3</p>
  </div>

Dans le cas présent, j’ai supprimé les id, et mis une classe « mon_block » à chaque <div></div>, on peux voir que la première <div></div> à une classe supplémentaire.

Pour appliquer le style css sur une classe, allez dans le css et tapez:

.mon_block{
  background-color: #ccc;
  border: 1px solid red;
}

Actualisez votre page

et voila le résultat:

les blocks ont tous le même design.

Maintenant, nous allons leur donner une taille fixes, une margin intérieur et extérieur puis les alignés.

Vu que mes éléments ont tous la même classe, je n’ai pas qu’a la modifier en y ajoutant ce code la:


.mon_block{
  margin-right: 10px;  /* Margin pour marge, margin-right: 10px => donne un marge droite de 10px */
  padding: 0 10px 0 10px; /* padding pour marge-intérieur, padding: 0 10px 0 10px   */
                          /* => donne un marge intérieur haut = 0, marge intérieur droite 10px, marge intérieur bas 0px, marge intérieur gauche 10px */
  border: 1px solid red;
  border-radius: 8px; /* Bordure arrondi */
  background: #ccc;
  width: 250px; /* Taille en px */
  float: left; /* Permet d'aligner un element sur la droite ou la gauche */
}

Voici ma nouvelle classe avec les nouvelles directives notées entre commentaire (/* commentaire */)

les commentaires sont très important quand on code, ils nous permettent de mieux se repérer par la suite, ou aider les autres codeurs qui vous aideront sur un projet.

Les commentaire en css sont /* texte en commentaire */

et en HTML <!– texte en commentaire –>

Voici le rendu de mes blocks,

ils ont une taille fixe, une margin intérieur et extérieur, et ne se colle pas.
Parfait !

C’est tout pour l’instant, nous allons voir, dans la suite de notre épisode comment faire un menu, mettre du texte, image et liens afin de créer une navigation.

Article suivant >

Guillaume

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.