communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: [Fiche] HTML et CSS qu'est-ce que c'est ?   Lun 09 Avr 2012, 09:40

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 Smile

MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Spoiler:
 


Dernière édition par Fuyaya le Sam 11 Jan 2014, 22:40, édité 2 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Grand artiste du pinceau
avatar
Camelya
Grand artiste du pinceau
Féminin Date d'inscription : 06/05/2011
Age : 27
Localisation : Dans mon lit.

MessageSujet: Re: [Fiche] HTML et CSS qu'est-ce que c'est ?   Lun 09 Avr 2012, 11:22

Merci Fu !
Revenir en haut Aller en bas
http://legrenierdetatacamy.jimdo.com/
Grand artiste du pinceau
avatar
Lehanna
Grand artiste du pinceau
Féminin Date d'inscription : 07/10/2011
Age : 21
Localisation : Nord (59)

MessageSujet: Re: [Fiche] HTML et CSS qu'est-ce que c'est ?   Lun 09 Avr 2012, 14:15

Merci beaucoup Fu' ! C'est du chinois, mais je m'y pencherai au besoin, promis ! Very Happy
Revenir en haut Aller en bas
http://lesharpburn.canalblog.com
Ange gardien
avatar
pomme-kiwi
Ange gardien
Féminin Date d'inscription : 27/09/2009
Age : 31

MessageSujet: Re: [Fiche] HTML et CSS qu'est-ce que c'est ?   Lun 09 Avr 2012, 23:34

Merci beaucoup Fu pour cette explication!


Revenir en haut Aller en bas
http://www.dressingresponsable.com
Ange gardien
avatar
Bettyboopjade
Ange gardien
Féminin Date d'inscription : 25/03/2011
Age : 36
Localisation : Mons (Belgique)

MessageSujet: Re: [Fiche] HTML et CSS qu'est-ce que c'est ?   Mar 10 Avr 2012, 11:29

Merci Fu !
Revenir en haut Aller en bas
http://bettyboopjade.canalblog.com/
As de l'acrylique
avatar
Fyladel
As de l'acrylique
Féminin Date d'inscription : 23/02/2012
Age : 29

MessageSujet: Re: [Fiche] HTML et CSS qu'est-ce que c'est ?   Mar 17 Avr 2012, 12:50

Merci Fu' ! Très intéressant, et je comprends mieux tout ça maintenant !
Revenir en haut Aller en bas
http://fyladel.wix.com/le-diamant-rose
Admin
avatar
Bloup
Admin
Féminin Date d'inscription : 27/11/2012
Age : 30
Localisation : Plein Sud !

MessageSujet: Re: [Fiche] HTML et CSS qu'est-ce que c'est ?   Lun 26 Aoû 2013, 21:48

Merci Fu, c'est très clair tout ça !
Revenir en haut Aller en bas
http://www.sims-artists.fr/
Timide du pinceau
avatar
randomcorey
Timide du pinceau
Masculin Date d'inscription : 18/03/2015
Age : 55
Localisation : pas loin de Mickey

MessageSujet: Re: [Fiche] HTML et CSS qu'est-ce que c'est ?   Lun 23 Mar 2015, 15:08

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 !
Revenir en haut Aller en bas
Contenu sponsorisé


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

Revenir en haut Aller en bas
 
[Fiche] HTML et CSS qu'est-ce que c'est ?
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Fiche] judoBoy
» [Fiche] jeune-demon et radine
» [Fiche] Sombre-Panda
» Fiche d'accueil et de présentation
» [Fiche] Pierman

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: