Html2eme Partie 1

(2eme Partie)
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
...  ...
</body>
</html>
Le langage CSS (Cascading Style Sheets : Feuilles de Style en
Cascade) a pour but de séparer totalement la présentation d'une
page Web de son contenu (c'est à dire du langage HTML), et de
faciliter ainsi la maintenance et l'accessibilité d'un site.
Le design d'un site évolue toujours au fil du temps. Le problème,

lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut
reprendre toutes les pages html une à une pour modifier une
police de caractère ou une couleur de fond.
Dans la feuille de style CSS nous allons déclarer toute la mise en

forme des pages : le positionnement des éléments, l'image de
fond, les polices de caractère, les couleurs, etc. Celle-ci sera liée
à chaque page html. Ainsi, lorsqu'on en modifiera un élément,
cela se répercutera immédiatement sur toutes les pages html.
On peut écrire du code CSS dans 2 endroits différents :
Dans un fichier .css : C’est la méthode recommandée. Parmi les
nombreux avantages que cette solution apporte, il y a la
possibilité de pouvoir proposer facilement plusieurs designs
différents à vos visiteurs.
Balise intégrant un emplacement externe du code CSS
Par mis les
< !DOCTYPE html>
attributs de La
<html lang=’’fr’’>
balise <link/>
<head>
nous trouvons :
<title> Bienvenu sur mon site ! </title>
title : c’est le
nom de la feuille
de style, <link rel="stylesheet" type="text/css" href=« toto.css"/>
href : c’est </head>
l’emplacement <body>
où se trouve la <p>Cette page comporte une feuille de style externe. C'est la meilleure
méthode à utiliser quand on fait du CSS.</p>
feuille de style.
</body>
</html>
Directement dans le header du fichier HTML : il est aussi possible
de taper du CSS directement à l'intérieur même du fichier HTML,
entre les balises <head ></ h e a d >. Vous devrez y mettre une
balise <style ></ style > à l'intérieur, exemple :
Balise intégrant le code CSS dans le header de la pageHTML

< !DOCTYPE html>
<html lang=’’fr’’>
<head>
<title> Bienvenu sur mon site ! </title>
<style type="text/css">
/* Vous taperez votre code CSS ici */
</style>
</head>
<body>
<p> Cette page comporte du CSS directement dans le header.</p>
</body>
</html>
Schéma d’un fichier CSS
Chaque propriété est suivie du symbole "deux-points" (:)
puis de sa valeur correspondante. Et chaque ligne se balise1
termine par un point-virgule (;) {
propriete: valeur;
propriete: valeur;
Exemple : propriete: valeur;
}
Pour modifier tous les paragraphes pour qu'ils soient écrits balise2
{
en bleu, avec une taille de 18 pixels. On peut écrire le propriete: valeur;
code CSS suivant : propriete: valeur;
propriete: valeur;
p { color : blue; font-size : 18px; }
propriete: valeur;
}
37
Une classe permet d'appliquer un style précis au sein d'une balise HTML.
Appliquons le style suivant sur les paragraphes :
- arrière-plan de la page gris,
- taille de police "30", fichier TOTO2.CSS
- bordure sur le texte body {
- couleur du texte #333333 background: #eeeeee;
- alignement centrer. }
p{
Page HTML font-size: 30;
color: #333333;
<html> }
<head> Il est possible de
<title>titre de ma page</title> changer une partie au
<l i n k rel="stylesheet" type="text/css" sein du paragraphe en
href=“TOTO2.css" / > insérant une Class dans
</head> la feuille de style,
< b o d y> comme mettre une
<p> phrase en vert et gras
Voici un texte <span class="class1"> sans toucher au reste.
avec une phrase en gras et vert</span>
alors que le reste ne change pas
.class1{
</p>
font-size: small;
</body>
color: #008080;
</html>
font-weight: bold;
}
Le résultat est le suivant :
On utilise souvent les ID pour définir la structure générale du site (le haut, contenu,
navigation...)
Remarque : On utilise un # pour les id et un "." pour les classes
Exemple : Nous voulons créer une page avec deux blocs. Dans la feuille style nous
écrivons le code
fichier TOTO3.CSS
Page HTML #x { width: 80%;
<html> border: 1px solid #666;
<head> backgroundcolor:#CCCCCC;
<title>titre de ma page</title> position:absolute;
<l i n k rel="stylesheet" type="text/css" href=“TOTO3.css" left: 99px;
/> top: 11px;
</head> }
< b o d y> #y { width: 80%;
<div i d = “ x“ > border: 1px solid #666;
< p > Voici le premier texte <span class="class1"> avec background-color:#999999;
une phrase en gras et vert</span> alors que le reste ne position:absolute;
change pas < / p > left: 51px;
</div> top: 209px;
<div id=“y“> }
< p > Voici le deuxième texte <span class="class1"> avec p { font-size: 30; color:
une phrase en gras et vert</span> alors que le reste ne #333333; text-align:center;
change pas < / p > }
</div> .class1{ font-size: 30;color:
</body> #008080; font-weight: bold;
</html> font:italic }
Le résultat est le suivant :
La balise < d i v > est utilisée pour déclarer une zone
spécifique sur la page HTML, tout en appliquant un style
au contenu de cette dernière.
Dans la page TOTO3.CSS selon le code CSS utilisé, le

contenu entre les deux balises div sera mis en forme (voir
exemple précèdent).
Les marges permettent de définir l'espace entre les éléments
HTML (haut, gauche, bas et droite)
La syntaxe est :
margin-top: espace en pixels,
pourcentage ou auto;
margin-left: espace en pixels,
margin-right: espace en pixels,
margin-bottom: espace en pixels,
En CSS, parmi les propriétés qui permettent la mise en
forme du texte nous citons :
- color: Gestion de la couleur du texte

- letter-spacing: Espace entre les lettres
- text-align: Alignement d'un texte
- text-decoration: Habillement d'un texte
- text-indent: Espace avant un texte
- text-transform: Transformation du texte
- white-space: Contrôle des espaces blancs
- word-spacing: Espace entre les mots
Voici comment choisir l'apparence de vos liens sur un site :
<style type="text/css">
a:link {color: #009900;
a:visited {color: #999999;
a:hover {color: #FF0000;
a:focus {color: #000000;
a:active {color: #009900;
< / s t yl e >
La première ligne définie la couleur du lien si aucun évènement intervient.

La deuxième définie la couleur du lien si l'internaute a déjà cliqué sur le lien.
La troisième définie la couleur du lien en cas de survol avec la souris (ici en rouge)
La quatrième presque identique au précédent, couvre le cas où l'internaute
n'utilise pas de souris mais plutôt une touche de son clavier.
Le dernier définie la couleur si le lien est cliquée.
Nous pouvons définir directement en CSS le fond d'une page HTML et
même une image. Exemple avec la balise BODY:
body { background-color:: #eeeeee; font-family: Verdana, Geneva, Arial;

font-size : 12px; }
Les propriétés
possibles :
Nous pouvons définir la couleur des bordures
des tableaux en CSS.
Les propriétés possibles :
La propriété « position » sert à définir la
position des éléments dans une page HTML.
position: valeur;
Valeurs possibles:
- static
- relative
- absolute
- fixed
Plusieurs balises ont été introduites avec HTML5 pour délimiter les
différentes zones qui constituent la page web :
<header> : en-tête ;
<f o o t e r > : pied de page ;
<n a v > : liens principaux de navigation ;
<section> : section de page ;
<aside> : informations complémentaires ;
<article> : article indépendant.
Ces balises peuvent être imbriquées les unes dans les autres. Ainsi,
une section peut avoir son propre en-tête.
Ces balises ne s'occupent pas de la mise en page. Elles servent
seulement à indiquer à l'ordinateur le sens du texte
qu'elles contiennent.
ce schéma
propose un
exemple
d'organisation
de la page. Rien
n’empêche de
modifier cette
structure
Exemple:
-imbriquer <nav>
dans <header>
-ajouter une
nouvelle
<section>
-L’objectif est de
mettre en place
un menu
dynamique avec
des liens
interactifs au
moment du
survol .
- O n crée une
liste qui
contient - O n crée une seconde
plusieurs section div qui contient
éléments liens l’élément <iframe>
< a > imbriqués -L’attribut name
dans une balise permet d’afficher la
< nav> page choisie lors de la
sélection du lien avec
son attribut target
Section div avec
id= 2
Section div avec

id= 1 (IFRAME)
Création de la feuille de style
type tag Body ( arrière plan
sous forme d’image, couleur
du texte blanche, taille de la
police 16 pixel, … )
Création des deux feuilles de

style type id
Déclaration de la feuille de style
nav de type tag:
Alignement horizontal en bloc
d’une largeur de 340px
Déclaration de la feuille de style li

de type tag sous l’élément nav :
Alignement des éléments de la liste
avec une marge de séparation de
30 px entre chaque élément.
Déclaration de la feuille de style a

de type tag sous l’élément nav :
Une couleur de texte noir avec une
taille de police de 14px et sans
Déclaration de la feuille de style a
soulignement.
de type tag sous l’élément nav lors
du survol du lien
Une couleur de texte rouge avec
une bordure en dessous de
l’élément de la même couleur.
Le lien change de couleur au
moment où il est survolé
Le lien sélectionné,
l’affichage de la page
s’effectue au niveau de
l’emplacement Iframe.

Html2eme Partie 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Html2eme Partie 1

Transféré par

Droits d'auteur :

Formats disponibles

(2eme Partie)

Le design d'un site évolue toujours au fil du temps. Le problème,

Dans la feuille de style CSS nous allons déclarer toute la mise en

Balise intégrant le code CSS dans le header de la pageHTML

Dans la page TOTO3.CSS selon le code CSS utilisé, le

- color: Gestion de la couleur du texte

La première ligne définie la couleur du lien si aucun évènement intervient.

body { background-color:: #eeeeee; font-family: Verdana, Geneva, Arial;

Section div avec

Création des deux feuilles de

Déclaration de la feuille de style li

Déclaration de la feuille de style a

Vous aimerez peut-être aussi