Squelettes html et feuilles de style en CSS
Dans les sites dynamiques, sont séparés :
- le fond : le contenu texte est stocké et classé dans des bases de données
- la forme : on associe un squelette html à une feuille de style en css
Le squelette HTML = l'ossature d'un site web
Lors de la conception d'un site internet, il peut être utile de concevoir une page unique, un modèle qui sera utilisé par toutes les autres pages du site internet pour :
- faciliter les mise à jour ultérieures du site,
- faciliter la navigation des visiteurs,
- assurer une cohérence structurelle sur toutes les pages du site.
Cette page unique, est parfois appelée squelette du site web, ou kit graphique, ou template.
Le langage et la structure HTML
HTML : un type de document structuré
Un organisme, le W3C est chargé de proposer une structure de document respectée par tous, pour permettre un accès universel aux documents sur Internet.Architecture de base
<html><head>
</head>
<body>
</body>
</html>
Faire clic droit "Code source" de la page dans le navigateur pour voir le code HTML d'une page Internet.
Les feuilles de style en CSS
Le même squelette peut être "habillé" avec différents styles.
- http://www.csszengarden.com/tr/francais/ : Css Zen Garden, le même contenu html habillé avec différents styles css
On utilise le langage informatique CSS (Cascading Style Sheets : feuilles de style en cascade) : HTML ne décrit que l'architecture interne, tandis que CSS décrit tous les aspects de la présentation (couleur, taille, police des textes, emplacement, taille, couleur ou image de fonds des blocs).
Cette séparation permet :
- d'améliorer l'accessibilité,
- de changer plus facilement de présentation,
- de réduire la complexité de l'architecture d'un document.
La syntaxe CSS
- Une règle se présente de la manière suivante : body { background-color: #FFD688; color: black }
- Une règle est composée d'un sélecteur précisant son champ d'application. Par exemple : body
- Après le sélecteur vient la déclaration : { background-color: #FFD688; color: black }
- La déclaration est elle-même formée d'une ou plusieurs propriétés : background-color, font-style, etc.
- Ces propriétés sont affectées d'une valeur. Par exemple : color: red indique que la propriété color prend la valeur red
- les éléments de la déclaration sont séparés entre eux par un point-virgule.
Ressources
Codes couleurs
Techniques CSS
Images
- http://www.espace2001.com/espace/couleurs.php
- http://www.colorschemer.com/online.html : Sélecteur de couleurs
- http://colorblender.com/ : Color Blender
- http://www.colourlovers.com/ : Site coopératif de palettes de couleur
- http://www.visibone.com/popups/ : pour avoir sous la main les couleurs utilisables dans vos page web et leur code associé, cliquez sur le bouton "Hex Color Popup", vous obtenez une palette de couleur dans une nouvelle fenêtre de votre navigateur.
- http://kuler.adobe.com
Techniques CSS
- http://pompage.net/pompe/cssdezero-1 : Css : on reprend tout à 0 !
- http://slaout.linux62.org/html_css/doc_css.html : Aide mémoire css
- http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html : Liste de toutes les propriétés Css
- http://fr.selfhtml.org/css : références CSS
Images
- http://commons.wikimedia.org/wiki/Accueil : bibliothèque d'images libres
- http://www.flickr.com/creativecommons/
Astuce CSS : les extensions de Firefox
- https://addons.mozilla.org/fr/firefox/addon/2104 : assistant CSS
- https://addons.mozilla.org/fr/firefox/addon/60 : la barre d'outils "Web Developer", pour éditer /prévisualiser les modifications de feuilles de style en css
- https://addons.mozilla.org/fr/firefox/addon/271 : la pipette color zilla, pour récupérer un code couleur dans une page
CSS Cascading Style Sheets HTML Programmer et développer code design graphisme habillage graphique squelette support de cours