Cours webmaster création de sites web

Cours webmaster création de sites web, tutoriel & guide de travaux pratiques en pdf.

Définition d’un style

La définition de base d’un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
Exemple :
H3 { font-family: Arial; font-style: italic }
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.
Simple! Mais de nombreux commentaires s’imposent :
• Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY… • Les propriétés de style sont entourées par des « { » et pas des [ ou des parenthèses.
• Le couple « propriété de style/valeur » est séparé par un double-point (:). • Chaque couple « propriété de style/valeur » est séparé par un point-virgule (;). • Il n’y a pas de limite pour le nombre de couples « propriétés de style/valeur ». • L’espace entre propriétés de style et valeur n’est pas obligatoire mais aide fortement à la lisibilité du code source. • Pour la lisibilité toujours, vous pouvez écrire vos styles sur plusieurs lignes : H3 {font-family: Arial; font-style: italic; font-color: green} • On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules. H3 {font-family: Arial, Helvetica, sans-serif} • On peut attribuer un même style à plusieurs balises (séparées par des virgules). H1, H2, H3 {font-family: Arial; font-style: italic}

Styles internes

Il faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit l’incorporation à l’intérieur d’une page. D’où le titre « Styles internes ».
A l’intérieur des balises <HEAD></HEAD>
Cette façon de procéder est de loin la plus commune et la plus logique. D’abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l’on rejoint ainsi l’essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu.
<HTML> <HEAD> <STYLE type= »text/css »> <!– La ou les feuille(s) de style –> </STYLE> </HEAD> <BODY>
• La balise <STYLE> avertit le navigateur que l’on va utiliser des feuilles de style. • L’attribut type= »text/css » informe que ce qui suit est du texte et qu’il s’agit de cascading style sheets (css). Pour l’instant, il s’agit de la seule possibilité mais on peut prévoir à l’avenir d’autres versions de ce « langage ». • La balise Html de commentaires <!– … –> empêche que les browsers qui ne connaissent pas les feuilles de style, tentent d’interpréter ces instructions. Les informations à l’intérieur des tags de commentaires seront ignorées par ces browsers. • Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript…) de /* commentaires */.
A l’intérieur des balises <BODY></BODY>
On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de faire nous paraît illogique et peu conforme à l’esprit des feuilles de style qui est de définir un style déterminé valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques…
<HTML> <BODY> <H1 style= »font-family: Arial; font-style: italic »> blabla </H1> </BODY> </HTML>
Signalons : • que le style Arial, italique n’affectera que cette seule balise H1. • que la syntaxe est légèrement différente de la précédente. • que l’écriture : <STYLE type= »text/css »>H1 { « font-family: Arial; font-style: italic » }</STYLE> fonctionne aussi.
C’est déjà bien de pouvoir définir une présentation de style valable pour une page (styles internes). Mais CSS nous propose mieux. Définir une présentation de style valable pour plusieurs pages et même pour toutes les pages d’un site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque page à cette page de style.
On crée d’abord, dans le répertoire du site, un fichier avec l’extension .css soit styles.css qui contiendra toutes les feuilles de style.
<HTML> <HEAD> — Les différentes feuilles de style — </HEAD> <BODY> </BODY> </HTML>
Ensuite, on crée une page normale soit page1.htm (bien entendu dans le même répertoire que le fichier styles.css).
<HTML> <HEAD> <LINK rel=stylesheet type= »text/css » href= »styles.css »> <HEAD>
• La balise <LINK> avertit le browser qu’il faudra réaliser un lien. • L’attribut rel=stylesheet (sans s et sans guillemets) précise qu’il y trouvera une feuille de style externe. • L’attribut type= »text/css » précise que l’information est du texte et du genre cascading style sheets (css). • L’attribut classique de lien href= » … » donne le chemin d’accès et le nom du fichier à lier.