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


squelettes

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


pingouins

Le même squelette peut être "habillé" avec différents styles.


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
Astuce CSS : les extensions de Firefox


 CSS Cascading Style Sheets HTML Programmer et développer code design graphisme habillage graphique squelette support de cours