HTML et CSS : Kezako ?

Vous commencez la création de votre site en autodidacte : malgré la simplification des techniques de création de site, notamment grâce aux CMS comme WordPress, vous aurez tout de même affaire au HTML et au CSS. Voyons un peu de quoi il s’agit !

Le langage HTML

Pour schématiser, le HTML est le code qui permet de créer la structure d’un site (design, mise en page, intégration de texte, d’images…). Il fonctionne avec ses propres règles : certains symboles et certains termes sont utilisés par le navigateur Internet pour créer l’apparence du site. Par exemple, les sous-titres de cette page apparaissent grâce à ce qu’on appelle une balise. Celle-ci encadre le sous-titre de cette façon :

<h2>Quelques explications pour bien comprendre</h2>

Cependant, pour que cette balise fonctionne, elle a besoin d’autres indications, comme la taille du texte et la couleur. On peut fonctionner uniquement en HTML en indiquant span pour la couleur et font-size pour la taille :

<h2> <span style= »color: #ff6600; »><font-size= »1″> Quelques explications pour bien comprendre</font></span>< /h2>

Pour éviter de rédiger ce code à chaque fois et rendre le travail moins fastidieux… il y a le CSS.

Le CSS

Imaginons un petit site de 5 pages (en HTML donc). Ces pages vont contenir les codes pour structurer la page et lui donner son contenu (texte, image, vidéo). Une autre page est créée, dont l’unique rôle est de donner le style. D’ailleurs, cette page se nomme style.css. Vous y trouverez notamment la personnalisation de la fameuse balise h2 avec un code comme celui-ci par exemple :

H2 { color :#ff6600 ; }

Grâce au CSS, toutes les h2 auront l’apparence que vous aurez indiquer dans le CSS.

Apprendre le HTML et le CSS

Oui, apprendre le code par vous-même c’est possible ! Mais fastidieux. Il est clair que vous ferez des erreurs, comme tout débutant, sauf que vous n’aurez pas de professeur pour vous aider à trouver l’erreur et à la réparer… Armez-vous de sang-froid et préparez une grande cafetière !

Bases HTML

Notre balise h2, pour être lue par le navigateur qui parcourra votre site, doit contenir des symboles. Le < > qui indique le début de la balise (donc le début du sous-titre) et le </> qui indique la fin. En HTML, ces symboles encadrent de nombreuses propriétés, pas seulement les balises de sous-titres :

Div : <div> contenu du bloc</div> Permet de réaliser un bloc (comme l’entête de cette page, qui comprend le menu, le titre du site, le slider…)

Nav : qui indique le menu

Une div peut donc contenir une nav, dans ce cas, il suffit d’indiquer : <div> <nav>…</nav></div.

De nombreux éléments de ce type doivent donc s’imbriquer pour créer le « minimum vital ». Heureusement des tutoriels bien conçus permettent aux débutants, de… débuter.

Bases CSS

La feuille de style, puisque c’est ainsi qu’on appelle la page dédiée au CSS, fonctionne sur le même principe, sauf que les balises d’ouvertures et de fermetures ne sont pas les mêmes. Au lieu d’utiliser <> et </>, on utilise { et }. Pour personnaliser une balise h2 en CSS, indiquez simplement H2 { color :#ff6600 ; } (vous pouvez trouver le code couleur grâce à votre logiciel de création d’images par exemple) . Par contre, pour personnaliser un bloc ou un élément en particulier, vous pouvez avoir à personnaliser un bloc, qui commencera alors par un point :

.divcontainer { color :#fff ; background-color :#000 ;}

Entre les { }, vous pouvez indiquer une quantité infinie de données…

Le HTML et le CSS sont donc complémentaires, et permettent de personnaliser un site avec un minimum de code. Cela vous fait gagner du temps, sans compter les bénéfices pour le référencement !