Les entités html

Transcription

Les entités html

Les entités html
●
Servent pour coder les caractères spéciaux
●
Syntaxe : &nomEntité; ou &#codeAscii;
–
–
●
●
  =   = espace insécable
€ = € = €
Liste complète : http://www.w3org/TR/xhtml1/ à
l'annexe 2
Voir exemple du tableau des entités
Validation des pages
●
Valider un site = valider chaque page
●
http://openweb.eu.org/ressources/validation
●
http://validator.w3.org/
●
http://jigsaw.w3.org/css-validator/
●
●
Attribution de logos qui assure au lecteur la
conformité de la page web ou de la feuille de
style (obligatoire pour le projet)
Validation de l'accessibilité : WAI
Chapitre 8
XHTML et CSS
Gabarit xhtml sans feuilles de style
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Votre titre</title>
<meta name="description" content="Ce texte de description doit apparaître à
l'utilisateur dans les résultats du moteurs de recherche."/>
<meta name="author" content="Fabrice Maurel"/>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
</head>
<body>
…votre code xhtml …
</body>
</html>
Gabarit xhtml avec feuilles de style
interne
<head>
<style type="text/css">
... votre code css ...
</style>
</head>
<body>
</body>
</html>
Gabarit xhtml avec feuilles de style
externe
<head>
<link rel="stylesheet" href="css/nomfeuille.css">
</head>
<body>
…votre code xhtml …
</body>
</html>
Style local à un élément
<head>
</head>
<body>
...
<element style="att1:val1;att2:val2"> texte </element>
</body>
</html>
...
Les unités de longueur en CSS
●
●
6 longueurs absolues :
–
Inch (pouce) : in (= 6 pc = 72 pt = 2,54 cm)
–
Métrique : cm et mm
–
Point : pt ( = 1/12 pc = 1/72 in = 0,351 mm)
–
Pica : pc ( = 12 pt = 1/6 in = 4,212 mm)
Seul le point est reconnue de manière certaine
par tous les navigateurs
Les unités de longueur en CSS
●
●
4 unités de longueurs relatives :
–
1em = taille de la police courante
–
1ex = hauteur d'un x minuscule
–
1px = relatif au média visuel utilisé
–
% = pourcentage dépendant de l'élément utilisé
Meilleure adaptation à différents types de
média (passage à l'impression par exemple)
Taille de police avec font-size
●
●
em relative à la taille de la police de l'élément
parent
Valeurs absolues supplémentaires :
–
●
Valeurs relatives supplémentaires :
–
●
xx-small, x-small, small, medium, large, x-large,
xx-large
Larger, smaller
Montrer exemple
L'espace des couleurs
●
On peut sélectionner une couleur de trois
manières différentes :
–
De manière générale, par son code rvb (rgb) :
●
●
–
En décimal
En hexadécimal
Parfois, par son nom
Le code rvb (rgb)
●
●
Mode décimal :
–
rgb(x,y,z) où x, y, et z sont des entiers entre 0 et
255
–
rgb(x%,y%,z%) où x, y, et z sont compris entre
0.0% et 100.0%
Mode hexadécimal :
–
#abcdef où a, b, c, d, e et f sont des symboles
hexadécimaux (de 0 à 9 puis de A à F)
–
ab pour le rouge, cd pour le vert et ef pour le bleu
Noms de couleurs
●
16 couleurs reconnues par tous les navigateurs
Black
Green
Silver
Lime
Gray
Olive
White
Yellow
Maroon
Navy
Red
Blue
Purple
Teal
Fuchsia
Aqua
●
http://www.ficml.org/jemimap/style/color/couleur.html
●
http://meyerweb.com/eric/tools/color-blend/
●
http://www.colorsontheweb.com/colorwizard.asp
●
http://www.colorsontheweb.com/colorwheel.asp
●
http://h41139.www4.hp.com/fr/fr/online_tools/colour_wheel.html
Les principales propriétés CSS
Les propriétés s'appliquent en cascade :
défaut navigateur < CSS externe < CSS interne < local élément
●
Pour l'arrière plan : background
●
Pour le texte : text
●
Pour la police : font
●
Pour les bordure : border
●
Pour les marges inter-élément : margin
●
Pour les marges intra-élément : padding
●
Pour les dimensions : width et height
●
Pour le positionnement : vertical-align, position:relative,
position:absolute, left, right, bottom, top
Mais aussi... la propriété float
●
●
●
●
●
Définit le flottement d'une boîte à gauche, à droite ou pas
du tout
Applicable à tous les éléments générant des boîtes sauf si
en position absolue
Valeurs :
–
left : le contenu s'écoule sur le flanc droit de l'élément en
commençant en haut (en fonction de la propriété clear)
–
right : idem en inversant droite et gauche
Un élément peut empêcher avec l'attribut clear qu'un autre
élément flotte à sa gauche (left), à sa droite(right) ou des
deux côtés (both)
Utilisation possible avec span (e.g. : lettrine) ou div (e.g. :
mise en page sans table)
Et encore....
●
Alignement des images
●
Style des listes
●
Style des tables
●
Style des liens (pseudo-classes)
●
Style de la première lettre ou de la première
ligne (pseudo-éléments)

Les entités html

Transcription

Documents pareils

Voir corrigé

Gestion Électronique de Documents et XML

Memento HTML

HTML - LITA

Son CV - David Marchesson

Structure de base d`un document XHTML 1.0 Strict (Balises de

1 Validation des documents HTML et XHTML Qu`est

Formation PHP débutant - Portail des étudiants de l`ENSEEIHT

CV - Undergraphic, création de site Internet à Amboise (37)

Fiche5TechnoWeb xml dtd xsl

html

Version PDF - Bienvenue sur le site enseignement de Jean

DUT SRC - Webchronique

creation de site

Introduction au (x)HTML

XHTML, CSS

Format PDF [ 153ko ]

Un exemple de document HTML

Les métadonnées Les métadonnées - LabUnix

Variantes de HTML Variantes de HTML - LabUnix

VENDS RAQUETTES HEAD

Office de Tourisme et du Thermalisme de La Roche