Les feuilles de style définition de règles de style, tutoriel & guide de travaux pratiques CSS en pdf.
Préparer un document de travail
Dites, ça m’a l’air plutôt compliqué, ce code HTML. J’ai un peu peur de m’y perdre. On ne pourrait pas simplifier un peu tout ça, pour le début ?
Effectivement, c’est sans aucun doute une bonne idée. C’est la raison pour laquelle je propose de travailler sur un document très simple dont le code HTML figure ci-dessous.
• Copie le texte du code HTML qui figure dans la zone ci-dessous vers le presse-papiers.
Clique gauche dans la zone. Ensuite clique droit et sélectionne la commande Copier dans le menu contextuel.
<html> <head> <title>Document sans titre</title> </head> <body> <h1>Ceci est le titre principal</h1> <h2>Titre secondaire no 1</h2> <p>Ceci est le texte du premier paragraphe</p> <h2>Titre secondaire no 2</h2> <p>Ceci est le texte du second paragraphe</p> <cite> Nous naissons tous fous. Quelques-uns le demeurent. (Samuel Beckett, 1906-1989) </cite> </body> </html>
• Amène ensuite ce texte dans KompoZer. Tu vas opérer une série d’expériences afin d’étudier les caractéristiques des balises HTML.
• Ouvre une nouvelle page (Fichier > Nouveau > Document vide > Ouvrir) ;
• Sélectionne l’onglet Source ;
• Supprime tout le texte préexistant ;
• Colle le texte sauvegardé dans le presse-papiers ;
• Retourne à l’onglet Normal ;
• Enregistre le document sous le nom test.html.
• Observe la page.
Ouah ! C’est magique, ou bien ? Voilà que je colle un texte tout en caractères » normaux » et aussi sec KompoZer me mets des choses en grands caractères ou en petits caractères… Chuis bluffé, là
Magique ? Je ne crois pas. Essayons d’expliquer cela à la page suivante. Tout est évidemment dans les balises HTML qui parsèment le texte.
Les balises HTML
Les balises <head>head = tête, en anglais et </head> (prononcer » fin head « ) définissent les limites de l’entête du document, cependant que les balises <body>body = corps, en anglais et </body> ( » fin body « ) définissent les limites du corps du texte.
La première ligne du corps du document est le titre principal qui apparaît sur la page: elle est au format » Headerheader = en-tête, en anglais 1 « , ou » Titre de niveau 1 « . Les balises HTML qui définissent ce format sont <h1> et </h1> ( » fin h1 « ).
Deux lignes sont au format » Header 2 « , ou » Titre de niveau
2 « . Les balises HTML correspondantes sont <h2> et </h2>.
La paire de balises <cite> et </cite> sert à délimiter une citation.
Les autres lignes sont au format de » paragraphe » défini par les balises <p> et </p>.
Il existe d’autres balises html.
Nous en découvrirons certaines dans la suite du cours.
• Observe attentivement l’ensemble du texte au format HTML dans l’onglet Source. Accorde principalement ton attention aux balises HTML qui y sont disposées.
Remémore-toi le rôle de chacune des balises utilisées ici.
• Modifie une balise <h2> en <h1> et la balise </h2> correspondante en </h1> ; visualise l’effet en mode Normal
Veille à modifier aussi la balise de fin, au risque de constater des effets imprévisibles. Un grand nombre de balises HTML doivent être utilisées par paires. Il est important de respecter ces paires : à toute balise
» ouvrante » doit correspondre une balise » fermante « .
• Modifie une balise <p> en <h2> et la balise </p> correspondante en </h2> ; visualise l’effet en mode Normal.
• Recompose ensuite le document selon sa forme originelle.
Lorsqu’une zone du code html commence par la balise <h1>, elle doit être terminée par la balise <h1>
</h1>
<h2>
N’importe quelle balise, cela n’a pas d’importance.
La paire de balises qui délimite le corps du texte dans la page html est <body> et </body>
<head> et </head>
<header> et </header>
<h1> et </h1>
Le signe qui indique qu’une balise HTML est fermante est le signe :
Le signe /
Le signe </head>
Le signe <
Quand tu as fini de procéder à ces différentes expériences et que tu as compris le rôle des balises HTML utilisées ci-dessus, passe à la page suivante.
Définition d’un style
Les balises HTML dans le document servent à indiquer la structure du document :
• en-tête (<head>),
• corps du document (<body>),
• titre de première importance (<h1>),
• titre de second niveau (<h2>),
• paragraphe (<p>),
• citation (<cite>),
• …
Il est donc logique que certaines structures apparaissent en lettres de plus grande taille (les titres de niveau 1) et d’autres en plus petite taille (les paragraphes). Il s’agit d’une présentation » par défaut » des différentes structures de la page web.
C’est sympa, qu’un document HTML contienne des présentations par défaut. Mais moi je les trouve vraiment très laides. Cela ne correspond pas du tout au look du site web que j’envisage !
Dans ce cas, il suffit de préciser comment on veut voir les choses. C’est exactement le rôle des styles que nous allons aborder maintenant.
Les mises en forme du texte se feront avec l’éditeur de styles de KompoZer, un outil nommé KaZcadeS.
Nous allons y indiquer comment il faut présenter chacun des éléments visibles qui constituent la page.
• Dans la barre d’outils de KompoZer, clique sur le bouton qui active l’éditeur de styles.
• Tu peux aussi frapper la touche F11 pour ouvrir cet outil.
La fenêtre principale de KaZcadeS se présente comme sur l’illustration ci-dessous.
Les feuilles de style avec KompoZer
Et bien dites donc, voilà une bien grande fenêtre dans laquelle on ne peut rien faire ni rien voir? Quel gâchis! Non, pas de souci: les principales fonctions dont nous avons besoin pour démarrer se trouvent dans le bouton disponible en haut et à gauche de la fenêtre.
Définition de règles de style
Maintenant que nous avons ouvert l’éditeur de styles KaZcadeS, nous allons l’utiliser pour mettre différents éléments de la page HTML en forme.
Définition d’un style pour les titres de premier niveau
• Clique sur le bouton (évite, pour l’instant, la flèche vers le bas à droite du bouton).
Une nouvelle mention apparaît dans la zone Feuilles et règles et une ligne de saisie Nouvelle règle de style apparaît dans l’onglet Général.
Définissons maintenant une mise en forme pour le titre de premier niveau: h1.
• Dans la zone de saisie Sélecteur, indique la mention h1.
• Clique ensuite sur le bouton Créer la règle de style.
Dans la zone Feuilles et règles, l’existence d’une règle pour les titres h1 apparaît.
• Sélectionne l’onglet Texte qui peut maintenant être activé.
• Dans la zone Couleur, indique la mention red (pour rouge, en anglais).
La couleur rouge apparaît sur le bouton situé à droite.
• Si nécessaire, déplace la boîte de dialogue de l’éditeur KaZcadeS de manière à voir un titre de niveau 1 dans la page.
Le titre de niveau 1 doit maintenant se présenter en caractères de couleur rouge.
• Clique sur le bouton OK de l’éditeur KaZcadeS.
• Enregistre le document.
Définition d’un style pour les titres de deuxième niveau
En utilisant la même méthode que ci-dessus, définis, pour les titres de niveau 2 (h2):
• la couleur verte (green) pour les caractères
• la couleur jaune (yellow) pour le fond.
• Vérifie que les couleurs sont appliquées immédiatement dans la page.
• Enregistre le document.
Définition d’un style pour le corps du document
Quelle est la balise qui définit le corps du texte, dans une page HTML?
<h1>
<h2>
<head>
<body>
• En utilisant la même méthode que ci-dessus, définis une couleur de fond fuchsia (attention à l’orthographe) pour le fond du corps du texte.
• Enregistre le document.
Dites, vous être vraiment sûr de votre choix de couleur. Parce que, franchement… Je ne suis pas sûr que ce soit du meilleur goût.
Je pense devoir vous donner raison sur ce point. Mais cela nous permet de mieux comprendre ce qui se passe. Il faut parfois souffrir pour apprendre.
Télécharger le cours complet
