HTML & CSS — Partie 1 : Introduction

HTML & CSS

Développer des sites web en HTML et CSS, peut sembler dur mais ne l’est pas. Le but de ce tutoriel est de vous faire passer aisément, de débutant à développeur web professionnel.

Nous allons dans cette première partie, installer les outils nécessaires, et par la suite, réaliser une page web.

C’EST QUOI HTML ET CSS ?

Un site web est composé de pages web. HTML( HyperText Markup Language) et CSS(Cascading Style Sheets) sont les langages principaux qui servent à créer ces pages web. Ils sont liés entre eux, mais ont chacun une fonction bien précise :

  • HTML permet de créer les éléments d’une page web : textes, images, buttons ...
  • CSS permet d’appliquer des styles aux éléments créés : police, taille, couleur …

Plusieurs sites web utilisent en plus du HTML et du CSS, un troisième langage : JavaScript, qui permet d’ajouter de l’interaction à une page web. Néanmoins, l’apparence de tout site web est déterminé par le HTML et le CSS.

HTML, CSS & JavaScript

Exemple :
Nous pouvons créer un paragraphe de texte en HTML :

<p>Ceci est un paragraphe</p>

et ensuite, changer la taille et la couleur du texte en CSS :

p {
font-size: 20px;
color: blue;
}

PS : Ne soyez pas inquiet, si vous ne comprenez pas les codes HTML et CSS, ci -haut. Ce sera beaucoup plus clair, dans les prochaines parties de ce tutoriel.

OUTILS POUR LA ROUTE

Pour développer vos sites webs, un bon éditeur de texte et un bon navigateur web, sont les outils principaux dont vous aurez besoin. Votre travail consistera essentiellement à :

  • Ecrire du code dans votre éditeur de texte,
  • Admirer le résultat dans votre navigateur web.

Editeur de texte

Comme éditeur, je vous recommande vivement Atom. Il offre une interface assez conviviale et intuitive, dispose de plusieurs fonctionnalités, et est disponible sur tous les systèmes d’exploitation. Si vous ne l’avez pas encore, veuillez le télécharger ici et l’installer.

Navigateur web

Quant aux navigateurs web, Chrome et Firefox sont les favoris des développeurs. Safari est aussi un bon choix si vous travaillez avec un Mac. Si vous n’avez aucun de ces navigateurs web installés sur votre ordinateur, veuillez en télécharger un, et l’installer.

Maintenant que vous avez votre éditeur, et votre navigateur, il est temps de passer aux choses intéressantes.

CREER UNE PAGE WEB

Pour créer votre page web :

  • Lancez Atom
  • Utilisez la combinaison Cmd+N (Mac) ou Ctrl+N (Windows, Linux) pour créer un nouveau fichier,
  • Saisissez le code suivant dans le fichier : <h1>Hello Web</h1>
  • Utilisez la combinaison Cmd+S (Mac) ou Ctrl+S (Windows, Linux) pour enregistrer le fichier. Nommez-le, page-one.html.

Vous venez ainsi de créer une page web. Pour voir le résultat :

  • Faites un clic droit sur le fichier page-one.html dans Atom, et ouvrez-le dans votre navigateur de fichiers (Finder pour Mac, Explorer pour Windows),
  • Une fois le fichier page-one.html sélectionné dans votre navigateur de fichiers, ouvrez-le avec le navigateur web (Chrome, Firefox ou Safari).

Vous devez voir une page web affichant “Hello World”, comme le montre l’image ci-dessous.

La page web page-one.html ouverte dans Chrome

Maintenant, repartez dans Atom et remplacer le code de page-one.html par celui ci : <h1>Hello Web, la forme ?</h1>. Enregistrez à nouveau, le fichier (avec Ctrl+S/Cmd+S). Ensuite, repartez dans votre navigateur web et utilisez la combinaison Cmd+R (Mac) ou Ctrl+R (Windows), pour recharger la page.

Vous devez maintenant constater la mise à jour dans votre navigateur, comme le montre l’image ci-dessous.

La page web page-one.html, rechargée dans Chrome.

RESUME

Félicitations ! Vous avez franchi avec succès, la première étape pour devenir un développeur web professionnel.
Je vous recommande, de vous familiariser avec Atom, histoire de découvrir ses fonctionnalités car nous allons beaucoup l’utiliser dans la suite de ce tutoriel.

Maintenant que vous avez les outils nécessaires, nous sommes prêts pour créer des pages web beaucoup plus réelles. Nous allons dans les parties suivantes, explorer les éléments HTML les plus fréquents, et par la suite y ajouter de la sauce CSS.

Show your support

Clapping shows how much you appreciated Rahmane OUSMANE’s story.