23/01/2017 — Coding & Digital Innovation Last modified on 30 Juil 2021

Web : Le HTML et le CSS – Guide Prépa #2

De retour pour un nouvel article « Guide Prépa ». Cette semaine est une initiation au HTML5 et au CSS3. Elle permet de comprendre les bases d’une structure de site web et de comprendre comment le styliser !

Si vous n’avez pas lu le premier article concernant l’initiation à Photoshop, je vous conseille vivement d’aller le lire, c’est ici ! Aujourd’hui nous parlerons de la deuxième semaine de cours à l’IIM !

HTML5 & CSS3, qu’est-ce que cela signifie ?

Ce sont des langages de programmation servant à la réalisation d’une page web. Le HTML est un langage permettant de structurer les différents éléments de votre page web. Il représente votre squelette que vous allez pouvoir habiller, en utilisant du CSS. Le CSS, quant à lui, est un langage de style, qui va permettre de rendre votre page agréable pour l’utilisateur.

Le but de cette semaine était la réalisation de notre premier site web, très simple mais avec déjà des fonctionnalités utilisées par tous les sites. Cela nous a permis de pratiquer un peu le code et nous rendre compte de notre familiarité avec cette façon de créer. Notre intervenant Willy Reyno, étudiant de 5ème année en Web, est un très bon pédagogue qui nous a permis de bien comprendre les rouages du web.

Pour coder vous avez besoin d’un éditeur de texte. Tous les ordinateurs sont fournis par défaut de Bloc-Notes. Il est très bien mais pas très intuitif pour commencer. Je vous conseille donc d’utiliser Sublime Text 3 ou encore Brackets, qui sont, pour moi, les deux meilleurs éditeurs de texte.

« Le code ça me fait peur »

On peut souvent entendre ça des étudiants qui n’ont jamais fait de code en première année. De mon point de vue, il ne faut pas en avoir peur, le code c’est comme Photoshop, sauf qu’on écrit.

C’est un moyen de créer des choses, et qui plus est, de faire de nombreuses choses, dont certaines très techniques. Ne voyez pas ça comme un charabia, tout ce que vous écrivez a un sens et un but précis.

« En web il faut être rigoureux »

Tout à fait, le web demande d’être très rigoureux. A la moindre virgule oubliée, ou au moindre espace de trop, votre code peut être erroné et votre page ne s’affichera pas. Cela peut être frustrant de ne pas comprendre où est votre erreur, et ne pas savoir la corriger. Mais des aides sont présentes, notamment la communauté de W3C.

Alors concrètement le CSS c’est quoi ?

 

Le CSS est un langage complètement différent des autres, c’est lui qui va permettre de styliser vos pages, choisir la couleur de votre Background (à l’aide de la fonction « background-color: white; »).

Le CSS va aussi servir à placer vos blocs, définir les marges et pouvoir donner des effets tels que le hover. Un hover est une pseudo-classe qui va rajouter un effet.

Dans ce cas présent, le hover sert à changer les propriétés de la classe, lorsque l’on passe le curseur sur ce dernier. Essayez de passer la souris sur un lien par exemple ‘contact’ et s’il change de couleur au moment où votre souris passe dessus c’est qu’un hover est présent dans le code CSS.

Et qu’en est-il du HTML ?

Le Html va servir à définir vos blocs, et la structure de votre page. Mais ce n’est pas tout, c’est aussi là que le robot de Google vient scanner les informations.

C’est sur le HTML que se joue le référencement des sites. Quand vous faites une recherche sur Google, il ira chercher dans le HTML des sites s’il trouve les mots clés que vous avez cherchés. Il vous ressortira alors en premier les sites les mieux structurés. Voilà pourquoi le HTML est extrêmement important en Web.

Cette semaine a pu en convaincre certains de choisir l’axe Développement Web pour la deuxième année, ou bien juste éveiller la curiosité de certains autres. Mais le web est un pilier commun à tous les axes de l’IIM. Tout le monde doit savoir se créer son propre site web. Notre prochain numéro de Guide Prépa #3 concernera l’axe Design Interactif !