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
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.
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.
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.
- 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.
Codes couleurs
Techniques CSS
Images
Astuce CSS : les extensions de Firefox