Le cours HTML

13.1. FrontPage

13.2. Les tableaux

13.3. Insertion d'images

13.4. Format des paragraphes

13.5 Bases en HTML

13.6. Liens et signets

13.7. Structure du site, taille des pages

13.8. Extensions FrontPage

13.9. Introduction aux CSS

13.10. Feuilles de styles, les tableaux

13.11. Positionnement de zone en CSS

13.12 Formulaires

Divers

Petites annonces sur le Luxembourg
Darut.be, le portail de la Province de Luxembourg en Belgique, annuaire local, petites annonces, agenda des activités.

Une formation webmaster? YBET informatique en 60 heures dans nos locaux ou par groupes.

Sur le sujet

Créer son site Internet, avant de débuter, petites explications

Le fonctionnement des moteurs de recherche, comment sont positionnées les page dans les requêtes.

Référencement Web, un beau site, c'est bien, visité c'est encore mieux. -> Quelques explications sur le positionnement dans les recherches de Google.

La mise en ligne d'un site, explications complémentaires

Le PHP, la base de donnée MySQL: programmation de sites dynamiques, rien de plus simple

Le fichier .htaccess
Commandes et fonctionnalités du fichier .htaccess sous serveur Apache

Votre site Internet, conception, hébergement, référencement, vente en ligne, ...
YBET informatique discutons-en ensemble
00 32 (0)61/32.00.15.

9. Feuilles de styles, CSS.

1. Utiliser une feuille de style - 2. Enregistrement et insertion dans une page - 3. Feuille de style pour les textes de la page - 4. Mise en forme de la page - 5. Pour terminer

Les feuilles de styles sont utilisées pour différentes raisons. La principale est de modifier automatiquement les couleurs des textes, liens, contenu des balises H1, H2, ... Dans un exercice précédant, nous l'avons fait manuellement pour chaque texte entre balise. La deuxième utilisation est liée au tableaux qu'ils remplacent dans certains cas. Le principal avantage est de réduire la taille du code HTLM, de le rendre plus léger.

FrontPage inclus quelques feuilles de styles par défaut. Ce chapitre verra ceux implantés dans le logiciel et quelques propriétés et exemples standards d'utilisations. Un chapitre suivant nous permettra de créer des feuilles de styles personnelles plus évoluées.

Une feuille de style peut-être utilisée en HTML et en PHP. On l'appelle également CSS (Cascading Style Sheets).

1. Utiliser une feuille de style

Dans le menu Fichier, sélectionnez Nouveau -> Page. Au lieu d'utiliser l'onglet général, nous allons utiliser l'onglet Feuilles de Style.

Plusieurs sont déjà programmées. Parmi celles-ci, sélectionnez par exemple Courbes. Le fichier devrait ressembler à ceci:

a:link

{

color: rgb(51,153,255);

}

a:visited

{

color: rgb(51,102,204);

}

a:active

{

color: rgb(255,153,0);

}

table

{

table-border-color-light: rgb(255,204,102);

table-border-color-dark: rgb(204,153,102);

}

body

{

font-family: Verdana, Arial, Helvetica;

background-color: rgb(255,255,204);

color: rgb(102,102,51);

}

{

font-family: Times New Roman, Times;

color: rgb(153,153,51);

}

{

font-family: Times New Roman, Times;

color: rgb(204,153,0);

}

{

font-family: Times New Roman, Times;

color: rgb(0,102,153);

}

Analysons le contenu de ce fichier. On retrouve des groupes comme

a:link, a:visited, a:active qui gère les liens
table qui gère les tableaux par défaut
Body qui gère le corps du texte
h1, h2, ... qui gère les styles de paragraphes titre 1, titre 2, ...

Pour chaque groupe, on retrouve entre {} les propriétés. Chaque propriété est séparée par ;

Font-family désigne la police de caractères utilisée. La première listée est la principale. Si elle n'est pas présente sur l'ordinateur du navigateur, c'est la deuxième qui sera utilisée et ainsi de suite.
Color: reprend la couleur. Quelques options sont utilisées pour désigner le type de codage
RGB indique que les couleurs sont données dans le format RGB (Red - rouge, Green - Vert et Blaw -bleu) en décimal, 3 chiffres entre 0 et 255.
Sans cette option, vous pouvez également utiliser Black, White, ...
#CCFFCC donne la couleur sous forme hexadécimal. 000000 donne le noir, FFFFFF donne le blanc.
Background-color: définit la couleur de fond pour le corps du texte (body) ou les tableaux (table)
Dans le cas des tables, on retrouve table-border-color-light: et table-border-color-dark: pour les couleurs des bordures claires et foncées.

Nous verrons d'autres propriétés par la suite.

2. Enregistrement et insertion dans une page

Deux méthodes sont possibles. La première fait un lien vers une feuille de style externe. L'autre insère les propriétés dans l'en-tête de votre page. La première méthode permet d'utiliser la même feuille dans plusieurs pages. La deuxième permet de créer des propriétés pour une seule page Internet.

2.1. Feuille de style externe

Enregistrons notre feuille de style sous le nom style. Le fichier créé prend automatiquement l'extension CSS. Il nous reste à l'implanter dans nos pages.

Plusieurs solutions sont possibles. La plus simple est d'utiliser la commande du menu Format: Liens de feuille de style. Vous pouvez utiliser plusieurs feuilles de styles dans la même page mais c'est la dernière qui est la principale. Cette commande permet d'utiliser la feuille de style sélectionnée pour la page en cours ou pour toutes les pages, ce qui permet d'automatiser la mise en forme de vos pages Internet.

Le code HTML <link rel="stylesheet" type="text/css" href="style.css"> est automatiquement inséré entre <head> et </head>. style.css est le nom de la feuille de style.

En mode manuel, cette ligne doit simplement être implantée dans le header.

2.2. Propriétés par page Internet

Dans ce cas, les propriétés ne sont utilisée que dans la page en cours. Placez le code suivant dans le header (entre <head> et </head>)

.... vos propriétés

</style>

3. Feuille de style pour les textes de la page

Pour améliorer la présentation, nous allons voire en détail chaque groupe suivant un classement textes, corps de la page, tableau et liens. Commençons par les groupes de textes.

Cette partie de la formation analyse le body, balises H1, H2, ... Nous avons déjà rencontré quelques options comme color ou Font-Family. D'autres sont possibles pour désigner la taille du texte dans le paragraphe.

3.1. Font-size

Cette propriété permet de définir la taille des caractères. Quatre méthodes de codage peuvent être utilisées:

la taille relative. Dans ce mode, 3 options sont possibles: smaller, medium, larger. La taille se base sur la valeur courante du navigateur (medium par défaut).
la taille absolue: Dans ce mode, 7 options sont proposées: xx-small (soit 6,9pt), x-small (8,3pt), small (10pt), medium (12pt, valeur par défaut), large (14,4pt), x-large (17,28pt), xx-large (20,7pt). Cette méthode impose la taille. Le navigateur ne pourra pas réduire ou augmenter la taille de la police.
la valeur numérique: dans ce mode, on définit la taille de la police sur l'écran. Deux modes sont possibles, en absolu ou en relatif
- en mode absolu, on utilise les unités de mesures in (pouce), cm (centimètres), mm (millimètres), pc (pica utilisé en imprimerie, 1 pica = 12 points) et pt (points). Attention la notation est américaine, les virgules sont remplacées par le point. Exemple: Font-size: 12.5pt
- en mode relatif, les valeurs em, ex et px sont utilisées. Cette méthode n'est utilisée que dans des cas exceptionnels.
la valeur en pourcentage. Dans ce cas, on désigne la taille par rapport au texte courant. Les symboles + et - peuvent être utilisés, + par défaut.

Exemple d'utilisation:

Font-size:15pt;
Font-size:xx-small;

3.2. Text-align

Cette commande va permettre d'aligner votre paragraphe. options sont possibles.

center: alignement centré
Left: alignement à gauche (par défaut)
Right: alignement à droite
Justify: justifié

Exemple: text-align : right;

3.2. Margin

La feuille de style permet également de positionner le contenu de la page en fonction de l'écran. Dans cette partie, voyons déjà les solution de marges:

Margin: la marge sur l'ensemble des 4 cotés.
margin-top: la marge supérieur
margin-right: la marge de droite de la feuille
margin-left: la marge de gauche de la feuille
margin-bottom: la marge en-dessous

La valeur de margin peut prendre les valeurs numériques en px, %, pt ou em. Si vous raccourcissez la commande, ceci donne margin (top,right,bottom,left);

body

{

margin:0px;

}

... est par exemple équivalent à

body

{

margin-top:0px;

margin-left:0px;

margin-bottom:0px;

margin-right:0px;

}

Cette marge est l'équivalent de la commande <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"> placée après </head> pour débuter le corps de la page (body). Attention la commande Margin n'existe pas en <body>. Cette page utilise par exemple cette propriété pour qu'il n'y ai pas de bord au-dessus. La feuille de style est prioritaire sur la commande placée en body.

Remarque, si vous utilisez des feuilles de styles de tableaux, vous serez quasiment obligé de mettre margin:0px avec Internet Explorer, alors que Firefox ne posera aucun problème sans. C'est d'ailleurs le problèmes des feuilles de styles, c'est que tous les navigateurs ne réagissent pas de la même manière à toutes les commandes.

3.3. Padding

Le padding définit les marges à l'intérieur d'un élément.

padding-top	Espace intérieur entre la bordure supérieure et l'élément
padding-right	Espace intérieur entre la bordure droite et l'élément
padding-bottom	Espace intérieur entre la bordure inférieure et l'élément
padding-left	Espace intérieur entre la bordure gauche et l'élément
padding	espace intérieur complet, command globale

La valeur padding peut prendre les valeurs numériques en px, %, pt ou em.

Si la propriété css padding est suivie d'une seule valeur, cette valeur est utilisée pour toutes les marges intérieures (top, bottom, left, right). Si elle est suivie de 2 valeurs séparées par un espace, la première valeur gère les marges horizontales, la deuxième les marges verticales. Dans le cas de 4 valeurs, les marges sont reprises dans l'ordre haut, gauche, bas et droite

Cette propriété s'adapte par exemple au corps du texte.

Exemple:

body

{

padding: 50px;

font-family: Verdana, Arial, Helvetica;

background-color: rgb(255,255,204);

color: rgb(102,102,51);

}

donne une marge de 50 pixels tout au-tour de la page pour le contenu, même si cette notion s'adapte plus (un peu trop important en pratique).

Padding ou margin? Ces deux propriétés ne sont pas équivalentes, mais complémentaires.

body

{

margin:0px;

padding: 50px;

background-color: rgb(255,255,204);

}

Cette feuille de style donnera une feuille parfaitement alignée contre les bords de l'affichage avec une couleur de fond grise, mais le texte sera à 50 px du bord.

3.4. Font-weight

Cette propriété des feuilles de styles définit la grosseur des traits. Elle peut être définie comme:

normal
bold (gras)
bolder (très gras)
lighter (plus fin)
100, 200, 300, 400, 500, 600, 700, 800 ou 900. Très fin prend la valeur 100, très gras prend la valeur 900

Exemple: font-weight: bold;

3.5. Font-style

Cette propriété permet de définir l'italique des caractères. Trois options sont proposées:

normal, met le texte dans son aspect normal
italic, met le texte en italique
oblique, quasiment identique à italique pour la majorité des polices.

3.6. Font-variant

Cette propriété des feuilles de styles permet de mettre en petite majuscule le texte. Les lettre en majuscules effectives sont standard. Les autres caractères ont l'aspect des majuscules, mais de taille inférieure. Toutes les polices n'acceptent pas cette propriété. On retrouve 2 valeurs possibles:

Normal.
small-caps: met le texte en petite majuscule.

3.7. Font

Les propriétés Font ci-dessus (font-style, font-weight, font-size, font-variant, font-family) peuvent être regroupées sur une seule ligne de commande, Font [font-style] [Font-variant] [Font-weight] [Font-family]

Exemple: h1{ Font: 12pt Arial bold italic}

Les propriétés non mentionnées gardent leur valeur initiale.

3.8. Propriétés spéciales

Je regroupe ici d'autres propriétés moins utilisées, même parfois délicates à utiliser. Letter-Spacing définit l'espace entre chaque lettre, Word-Spacing, l'espace entre chaque mot.

Letter-Spacing (valeur numérique, pourcentage), exemple: { letter-spacing : -1px ; }
Word-Spacing (valeur numérique seulement), exemple {word-spacing : 9px;}

D'autres existent.

4. Mise en forme de la page

Cette partie reprend les fonds de couleurs et images de fond d'écran.

4.1. Couleur de fond.

Nous l'avons déjà rencontré ci-dessus avec:

body

{

background-color: rgb(255,255,204);

}

Comme précédemment, FrontPage l'a codé sous RGB. Les notations traditionnelles utilisent plutôt la version hexadécimale background-color: #FF00FF où #FFFFFF donne le blanc et #000000 donne le noir.

Remarque: pour chaque feuille, dans le body, vous pouvez également insérer la commande <body bgcolor="#D8EAFA">. La couleur dans la feuille de style est prioritaire.

2.2. Image de fond

La propriété background-image permet d'insérer une image de fond dans un élément.

background-image: url("http://www.ybet.be/logo.gif") ;

Quelques remarques s'imposent:

Choisissez vos images de préférence uniformes
Ajoutez également un fond de couleur par défaut en cas de difficulté de chargement

Exemple.

Pour uniquement une page, dans le header, insérer:

.boite

{

background-image: url("http://www.ybet.be/logo.gif") ;

border: solid 2px #990000 ;

margin-left: 10px ;

width: 60% ;

height: 150px ;

background-color:#FFFFFF ;

}

</style>

</header>

Le point devant le style de paragraphe est obligatoire ! (également le cas d'une feuille de style externe)

Dans votre feuille, utiliser les propriétés du paragraphes (comme pour titre 1 par exemple) pour mettre le texte souhaité avec les propriétés ci-dessus. Insérez dans le codage HTML: <p class="boite">Texte en boîte</p>

Voici le résultat:

Texte en boîte

Valable comme fond de page, insérée directement dans la feuille de style.

body

{

background-color: rgb(255,255,204);

background-image: url("http://www.ybet.be/logo.gif");

}

4.3. Répétition de l'image de fond.

Dans les cas ci-dessus, l'image est automatiquement répétée. Les propriétés suivantes permettent de définir le nombre de fois que l'image est insérée en horizontal (X) et en vertical (y). Cette propriété est donnée par: background-repeat: <valeur>

Valeur peut prendre les valeurs suivantes:

repeat (par défaut)
repeat-x: l'image se répète horizontalement (1 seule ligne d'image)
repeat-y: l'image se répète verticalement.
no-repeat: pas de répétition.

Remarque: il n'y a pas la possibilité de définir le nombre de fois où l'image est reproduite

4.4.Image fixe.

Cette propriété permet de fixée une image d'arrière plan lors du défilement. Plusieurs options sont possibles:

scroll: l'image défile avec la page. Paramètre par défaut.
fixed: l'image reste fixe à son emplacement lors du défilement de la page.

Exemple:

body

{

background-image: url("http://www.ybet.be/logo.gif") ;
background-repeat: repeat-x ;
background-attachment: fixed ;

}

Cette propriété reprend l'image en horizontal au début de la page. Elle descend en même temps que l'ascenseur vertical

body

{

background-image: url("http://www.ybet.be/logo.gif") ;
background-repeat: repeat-x ;
background-attachment: scroll ;

}

Cette image reste fixe en haut de la page, dans ce cas le background-attachement est donc sans intérêt.

4.5. background-position, position sur la feuille

Cette propriété va nous permettre de positionner l'image de fond sur la feuille. Background-position peut prendre 5 valeurs distinctes:

Valeur	alignement horizontal	Alignement vertical
Top	centré	Haut de la page (bloc)
Center	centré	centré
bottom	centré	bas de la page (bloc)
right	droite	centré
Left	gauche	centré

C'est valeur peuvent aussi utiliser des valeurs en chiffres et peuvent même être combinées

X X	valeur en px, première valeur, décalage horizontal, deuxième pour le décalage vertical
% %	valeur donnée en pourcentage par rapport à la page, en horizontal et en vertical ensuite

Exemples:

background-position: center 600px; centre l'image en horizontal et la décale de 600 pixels vers le bas
background-position: left top; en haut à droite
background-position: 50% 30%; 50 % en horizontal, 30 % en vertical

5. Pour terminer

Cette partie permet déjà de créer ses feuilles de styles personnalisées en reprenant les propriétés directement dans l'entête. Nous verrons également quelques propriétés liées aux tableaux.

FORMATIONS	Le MAGASIN YBET	PRODUITS et SERVICES
Formation Internet à Chiny	Activités et présentation	Logiciel de gestion
COURS HARDWARE	Rayon d'action	Caisses enregistreuses TEC
Tutorial access	Plan d'accès	MATERIEL INFORMATIQUE