[Fiche] HTML et CSS qu'est-ce que c'est ?

Bonjour,

Peut être connaissez vous le tutoriel d'Illendel : Personnalisation des posts dans un forum
C'est un tuto qui vous montre en pratique ce que l'on peut faire pour personnaliser les posts. Il  vous présente deux langages particuliers : le HTML et le CSS. ce sont des langages qui permettent de créer des sites internets ou des blogs. On peut aussi s'en servir sur des forums pour personnaliser les présentations.

Dans cette fiche, mon but est juste de vous faire comprendre ce que sont les langages HTML et CSS. Le but va être par la suite de vous familiariser avec. Mais il est important que vous compreniez déjà le rapport de l'un et l'autre !

1. Lien entre HTML et CSS :

Le HTML, c'est le langage qui va créer la structure de votre site.
en fait un site c'est quoi, ce sont des éléments que l'on fait s'apposer les uns au dessous des autres ou les uns à côté des autres.
On va aussi imbriquer ces différents éléments pour avoir des niveaux. Par exemple un article c'est : un titre + un texte + des informations (date, commentaire, etc...)

Voici un exemple tiré de notre site www.sims-artists.fr qui vous montre ces différents éléments imbriqués :


Le CSS c'est le langage qui va donner du style, tout le côté visuel du site.
C'est en écrivant le CSS que l'on peut changer les éléments en indiquant, des couleurs, des tailles, des images de fond. On va même pouvoir jouer sur la "nature" de ces éléments.
Regardez à quoi ressemble mon bloc évènement si je désactive les instructions données dans ma feuille CSS :



2. Comment interagissent t'ils ? :

Un petit préambule. Le langage informatique évolue en permanence et pour éviter que cela ne soit trop free style, petit à petit ce sont mises en place des normes afin de rendre le code plus clair et faciliter les échanges entre développeur.

Pourquoi je vous raconte cela ?
Car on peut mettre le CSS à deux endroits différents :
- directement dans la même feuille que le HTML
- dans une feuille bien séparé du HTML

La première méthode était très courante il y a une dizaine d'année. Depuis ces normes et l'évolution des langages on éduquent les nouveau développeur à séparer les choses. Ceci afin de rendre le code plus efficace et moins lourd.
Moins lourd car chaque caractère vaut un octet, donc moins on écrit moins le fichier et lourd et plus rapidement il s’exécute !
Donc avec moi comme guide, nous séparerons systématiquement le html du css. En ayant une structure du type :
- index.html
- style.css

Le lien se fait dans la page .html qui ne contient pas que la structure du site. Elle est un peu la feuille pilote avec des instructions qui donne des informations sur la version du langage utilisée, la langue et autres petites choses.
Pas de panique ce sont des informations qui sont systématiques, on verra cela en temps voulu !
donc dans la feuille HTML on écrit une instruction qui indique quelle est la feuille de style qui nous intéresse. je dis là mais on peut avoir plusieurs feuilles de style, pas de monogamie.

3. Mes exceptions quand à la séparation des langages :

Je viens de vous dire que j'écrivais séparément le HTML et le CSS. Tchou est témoin que je l'ai harcelé pour cela il y a un petit bout de temps maintenant.
Il y a cependant deux exceptions.

Si vous écrivez du code HTML et CSS dans un forum. Comme c'est indiqué dans le tutoriel d'Illendel dont j'ai parlé plus haut.
Tout simplement car en tant que membre vous ne pouvez pas modifier la page qui pilote le forum. Vous ne pouvez donc pas ajouter des informations dans le fichier css.
Il vous faut donc feinter et  écrire votre css directement dans els éléments HTML

Si vous créez une newsletter.
C'est un format très spécifique, qui afin d'être affiché par les multitudes de services mail qui existe doit être au carré.
Les serveurs mails sont très très délicats et capricieux, chacun est dans son coin et personne ne réagit pareil... On va donc écrire non seulement en utilisant un éléments spécifique qu'est le tableau mais en plus mettre tout le style dans le HTML.

Bien fin de cette petite fiche, j'espère que vous comprenez un peu mieux ce dont on vous parlait jusqu'alors.
C'était de la théorie, la pratique viendra petit à petit avec des tuto, simple et spécifique. Si quelque chose vous intéresse en particulier, faites une demande. autrement je ferai ça au feeling

Merci Fu !

Merci beaucoup Fu' ! C'est du chinois, mais je m'y pencherai au besoin, promis !

Merci beaucoup Fu pour cette explication!

Merci Fu !

Merci Fu' ! Très intéressant, et je comprends mieux tout ça maintenant !

Merci Fu, c'est très clair tout ça !

Merci Fuyaya !
 
Je n'avais jamais entendu parler du CSS. L'HTML fer de lance de l'aide à la création de site ? Est-ce que ça fait toujours mal aux yeux ? Il faut vraiment que je me mette à jour : je me sens un peu antédiluvien en ce moment ;o) Merci encore Fuyaya !