QUELQUES BASES
Avant de s'attaquer au code HTML et CSS , il est bon de rappeler quelques notions de base.
HTML (Hypertext Markup Language)
- HT comme HyperText.
Le HTML permet de créer des liens Hypertextes. Ces liens qui relient les pages Web entre elles et créent la fameuse "Toile".
- M comme Markup.
Le HTML permet de marquer les éléments avec des étiquettes les "balises" ("tags"; en anglais).
Ces balises indiquent au navigateur le sens de l'élément encadré <h1> pour un titre ou <p> pour un paragraphe,
par exemple.
- L comme Language.
Le HTML est un language, il comporte donc un vocabulaire et obéit à des règles de syntaxe.
Hypertext Markup Language, abrégé en HTML peut être traduit littéralement en français par Langage de Balisage d'Hypertexte. C'est le
format de données conçu pour représenter les pages web.
HTML et CSS, répartition des rôles
HTML n'est pas un langage de programmation mais un langage de description de document. Il structure la page et donne
à son contenu un sens interpretable par les navigateurs.
C'est aux CSS qu'échoit le rôle de mise en forme de la page.
Les page Web sont constituées d'éléments empilés les uns sur les autres ou les uns à côté des autres dans la fenêtre du navigateur.
- Le HTML crée ces éléments, leur ajoute un contenu et définit leur répartition dans la page.
- Les CSS permettent de contrôler l'apparence de ces éléments, (couleur, police, arrière-plan, dimensions, etc...)
La séparation du contenu et de l'apparence est primordiale lors de la création d'une page Web .
Les CSS (Cascading Style Sheet)
Le terme Cascading Style Sheet peut se traduire en français par Feuilles de Style en Cascade. La « Cascade »
est la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité.
Différents modes de Cascades peuvent se combiner :
- Par origine des styles : la priorité est accordée aux styles de l'utilisateur par rapport à celui de l'auteur.
- Par média: une feuille de style générique peut s'appliquer à plusieurs media de restitution (affichage à l'écran, impression, projection)
et être combinée avec des feuilles propres à chaque media.
- Selon l'architecture des documents web : une feuille de style générique peut s'appliquer à la totalité des pages d'un site
web, être combinée à des feuilles propres à chaque rubrique de celui-ci, ainsi qu'à des styles propres à telle ou telle page spécifique.
- Selon l'architecture des feuilles elles-mêmes : une feuille de style externe au document peut être combinée à une feuille de style interne
et à des styles appliqués directement à chaque élément qui le compose (styles « en ligne »). Une feuille de style peut également importer
une ou plusieurs autres feuilles externes.
Un principe de fonctionnement à ne pas oublier : c'est le dernier qui a parlé qui a raison. Ce qui signifie que par rapport à un élément
donné, c'est l'instruction CSS la plus en aval dans le code, qui s'applique.
Une page web n'est pas immuable
Enfin il faut être conscient qu'à la différence de l'auteur d'une oeuvre sur feuille de papier, l'auteur d'une page web n'a pas le contrôle de
l'apparence finale. Comme le compositeur de musique, le développeur web est soumis au bon vouloir d'un interprète.
Il ne faut surtout pas croire que ce que l'on voit sur notre écran s'affichera de la même manière sur l'écran de la personne qui consulte le site.
- Chaque navigateur reçoit le code source de la page web et l'interprète à sa manière.
- Chaque ordinateur l'affiche différemment : taille de l'écran, rendu des couleurs.
- L'utilisateur peut choisir d'ignorer les informations relatives aux polices, aux couleurs ou aux images des pages web
- L'utilisateur peut choisir d'intégrer sa feuille de style personnelle.
- Un document HTML peut être affiché :
- sur un moniteur d'ordinateur en mode graphique,
- sur un terminal en mode texte,
- sur une imprimante,
- sur un terminal de synthèse vocale.
