HTML4 Et CSS2.1

10/03/2015 Formation en Développement WEB

Formation en Développement WEB

[Le Web Statique] HTML, CSS, et JavaScript


Plan – Le WEB statique


1-Les bases du WEB

› L’histoire du Web

› Les bases de HTML

› Les bases de CSS

› Les bases de JavaScript

2-Le HTML 5

› Vue d’ensemble

› HTML 5 vs XHTML1.1

› Navigation et Support

› Éléments et Attributs

› Les formulaires

› Audio et Vidéos

› Les canevas

3-Le CSS 3

› Vue d’ensemble

› Les principales propriétés de CSS 3

› Les préfixes de navigateur

› Les transitions

› Les bordures

› Les arrière-plans multiples

4-jQuery « Ecrire moins et faire Plus »

› Premiers pas avec jQuery

› Les Sélecteurs

› Le Événements

› Les Effets

› Ajax / json

› La bibliothèque jQuery UI


Plan – Le WEB dynamique


Partie 1 PHP : Les bases de PHP › PHP : Raisons du succès

› Langages concurrents de PHP

› PHP : Historique

› Structure d’un script PHP

› Les types de données et variables

› Tests conditionnels, Les boucles et les

Fonctions

› Tableaux scalaires et Tableaux

multi-dimentionnel

› Etape d’exploitation des formulaires

› Récupération des paramètres

› Architecture MySQL

› PHP et MySQL

› PHP MyAdmin

› Les fichiers : lecture, écriture, déplacement et

suppression

› TP : Langage PHP partie 1

Partie 2 PHP : Les aspects avancés › Traitement des sessions

› Les expressions régulières

› Sécurités des applications web


Partie 3 PHP : Les Concepts Orienté Objet › Classe et Objet

› La visibilité

› L’héritage

› Classe abstraite

› Interface

› La sérialisation des objets



Plan – Le WEB dynamique avancé


Framework Symfony2 › Architecture MVC

› Architecture de Symfony2

› Les bundles

› Routing dans Symfony2

› Contrôleur

› Templating avec Twig

› Les formulaires dans Symfony2

› Sécurité et gestion des utilisateurs

› L’internationalisation et la localisation

› Déploiement des applications


L’évolution du Web et de HTML

L’ère du Web 1.0(90s) s'est construite autour

d'une forme pyramidale. Les webmasters

rédigent et envoient des informations vers les

internautes sans que ces derniers puissent

réellement interagir avec le site web.

L’ère du Web 2.0(2000s) les usagers entrent

dans un mode actif : au fur et à mesure de leur

navigation, les utilisateurs ajoutent du contenu,

et contribuent a la richesse des sites web.

Le web de l’avenir ou Le web 3.0 est un

concept en pleine évolution qui a fait son

apparition dans les années 2008.


L’évolution du Web et de HTML

Le langage HTML1.0 a été développé initialement

par Tim Berners-Lee(1989), Il a rapidement connu un

vif succès grâce au navigateur Mosaic.

La spécification HTML 2.0 (RFC 1866 de novembre

1995) a vu le jour sous le contrôle de l’IETF

(Internet Engineering Task Force)

Le groupe de travail HTML du W3C (World Wide Web

Consortium) diffuse en janvier 1997 la spécification HTML

3.2, qui apporte plusieurs améliorations et modifications

HTML 4, un progrès immense. Ses principales innovations

concernent l’internationalisation, l’accessibilité, les tableaux, les

documents composés, les feuilles de style, et les scripts.

HTML5 est la dernière révision majeure d'HTML

disponible depuis 2011, Le W3C vise une finalisation

de la spécification en 2014


Fonctionnement du web

Le Protocole HTTP

Le protocole de transfert hypertexte http (HyperText Transfer Protocol), de la

couche application du modèle OSI (Open Systems Interconnection), est le

langage commun entre logiciels clients (navigateurs) et serveurs Web.

Il est utilisé pour la plupart des transactions du Web : requête d'une ressource,

envoi de données d'un formulaire, navigation...

Communication entre navigateur et serveur

La communication entre le navigateur et le serveur se fait en deux temps :




Requête du navigateur(Client)

Soit l'URL demandée par un utilisateur :

http://www.serveur.ma/. Voyons à quoi ressemble

la requête du navigateur au serveur

GET / HTTP/1.1

Accept: image/gif, image/jpeg, */*

Accept-Language: en-US

Accept-encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)

Host: www.serveur.me

Connection: Keep-Alive



Communication entre Client et Serveur GET / HTTP/1.1

Accept: image/gif, image/jpeg, */*

Accept-Language: en-US

Accept-encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)

Host: www.serveur.me

Connection: Keep-Alive

Ligne par ligne, cette requête veut dire :

1. Il s'agit d'une requête GET, associée à la version 1.1 du protocole HTTP. Cette requête

permet de récupérer une ressource. Il en existe d'autres : HEAD (informations sur la

ressources uniquement), POST (on fournit des informations au serveur),... Le slash qui

suit GET indique l'URL absolue de la ressource.

2. Le client peut récupérer en particulier des images gif et jpeg, mais en fait n'importe

quel autre type MIME (des en-têtes décrivant le contenu du message en utilisant un

codage */* exemple: text/plain, multipart/mixed).

3. Le langue de préférence.

4. Le client sait interpréter une réponse qui serait compressée avec GZIP.

5. Le navigateur est MSIE 5.01 !

6. Rappelle l'adresse littérale du serveur.

7. La connexion restera ouverte après cette requête, jusqu'à ce que le client demande de

la clôturer.




Réponse du serveur

La réponse du serveur sera par exemple la

suivante :

HTTP/1.1 200 OK

Date: Sun, 14 Apr 2004 09:30:12 GMT

Server: Apache-/1.3.6 (Unix)

Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT

ETag: "57d44-122-3cb64bfc"

Accept-Ranges: bytes

Content-Length: 278

Connection: Close

Content-Type: text/html



Communication entre navigateur et serveur HTTP/1.1 200 OK

Date: Sun, 14 Apr 2004 09:30:12 GMT

Server: Apache-/1.3.6 (Unix)

Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT

ETag: "57d44-122-3cb64bfc"

Accept-Ranges: bytes

Content-Length: 278

Connection: Close

Content-Type: text/html Ligne par ligne, cette requête veut dire :

1. Le serveur répond lui aussi en HTTP 1.1, avec un message OK, associé au code 200.

404 Not Found; il y en a d'autres : 302 Moved Temporarily, 401 Unauthorized, 500

Server error,...

2. La date actuelle du serveur par rapport à l'heure de Greenwich (GMT).

3. Le logiciel serveur est Apache 1.3.6 sous Unix.

4. La date de dernière modification de document.

5. Un tag d'entité, c'est un numéro unique qui identifie la ressource sur le serveur, et

est aussi utilisé pour exploiter des données en cache.

6. Le serveur peut renvoyer des contenus binaires.

7. La taille en octets du document HTML qui suit...

8. La connexion sera fermée après l'envoi des données.

9. un document de type MIME text/html, donc un fichier HTML qui est envoyé.

10. Enfin, le code HTML.


Les bases de HTML

Les bases de HTML

HyperText Markup Language


Les bases de HTML - Introduction

Le langage HTML (HyperText Markup Language) est un langage de balisage (dit aussi

langage de marquage), développé initialement par Tim Berners-Lee il permet de

structurer le contenu des pages web dans différents éléments (en-têtes, paragraphes,

listes, liens hypertextes, etc..).

Il peut être créé et traité par de nombreux outils, depuis des éditeurs de texte simples

jusqu’à des outils dédiés sophistiqués WYSIWYG (What You See Is What You Get).

En HTML, chaque élément doit être renfermé dans un élément.


Les bases de HTML - Les éléments et attributs

En HTML, chaque élément à un nom déterminé et la liste des éléments utilisables est

limitative et clairement définie dans la DTD (Document Type Definition) liée à la version

utilisée du langage.

À quelques exceptions près, un élément HTML a la structure suivante :

<nom_element> Contenu </nom_element>


Les bases de HTML - Les éléments et attributs

Les caractéristiques de chaque élément peuvent être précisées par des informations

complémentaires que l’on désigne en tant qu’attributs de l’élément.

Les attributs d’un élément sont toujours définis dans la balise d’ouverture et doivent être

séparés les uns des autres par au moins une espace, Chaque attribut doit avoir une valeur.

La présence de certains attributs est obligatoire dans quelques éléments particuliers.

La syntaxe conforme d’un élément ayant des attributs est donc la suivante : <nom_element attribut1="valeur1" attribut2="valeur2" > Contenu </nom_element>


Les bases de HTML - Les attributs de base

Dans leur quasi-totalité, les éléments disponibles en HTML ont en commun un ensemble

d’attributs ayant chacun le même rôle. Ces attributs se répartissent en trois catégories.

› Les attributs courants (noyau): id, class, title, style

Ils s’appliquent à quasiment tous les éléments

› Les attributs d’internationalisation: lang, dir

Il permet de décrire la langue et le sens de lecture du contenu

› Les attributs de gestion d’événements: Ces attributs permettent de gérer les événements

dont un élément peut être le siège et qui sont créés par l’utilisateur. Leur contenu est un script

coté client


Les bases de HTML - Structure générale d’un document HTML



Nous retrouvons bien dans cet exemple la structure arborescente d’un document

HTML valide.

L’élément racine, au sens XML du terme, est <html>, et il inclut les éléments <head>

et <body>. L’élément <head> contient l’élément <title>, qui est obligatoire, et

l’élément <body>, qui ne doit pas être vide (ce qui est évident). Du point de vue

hiérarchique, <html> est bien le parent ou l’ancêtre de tous les autres.



L’élément racine <html>

C’est l’élément <html> qui est l’élément racine du document, au sens XML du terme.

C’est donc lui qui est le parent de tous les autres éléments

L’en-tête d’un document : l’élément <head>

L’élément <head> englobe un certain nombre d’informations utiles au bon affichage de

la page web. Ces informations sont contenues dans six éléments différents qui ont

chacun un rôle bien déterminé. Il s’agit des éléments <base>, <link>, <meta>, <script>,

<style> et <title>

Le corps du document : l’élément <body>

L’élément <body> est le conteneur de l’ensemble des éléments textuels et graphiques

d’une page web.

Les commentaires

Comme tout code informatique d’ailleurs, pour en permettre une meilleure

compréhension, en particulier quand on souhaite le relire un certain temps après l’avoir

écrit. Exemple : 


Les bases de HTML – Votre première page HTML

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Ma premiere page HTML</title>

</head>

<body>

<h1>Bonjour tout le monde!</h1>

<hr color="red" />

</body>

</html>


Les bases de HTML – Les titres

Niveaux de titre

Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une

structuration hiérarchique des paragraphes dans un texte :


Les bases de HTML – Paragraphes

Paragraphes

Le langage HTML considère les paragraphes comme des blocs de texte. Les navigateurs

répartissent au mieux leur contenu dans la fenêtre.

Espaces

A l'intérieur d'un paragraphe, les espaces, tabulations comptent pour un seul espace.

La mise en page par blocs de texte est réalisée par l'intermédiaire de la paire de balises

<p> et </p>. Cette balise accepte n'importe lequel des attributs vus précédemment.

Retour chariot

Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise<br>.

On peut aussi insérer une ligne horizontale grâce à la balise <hr>.


Une liste est un paragraphe structuré contenant une suite d'articles. Le langage HTML

définit trois types de listes :

› La liste non ordonnée ;

› La liste ordonnée ;

› La liste de définition.

Liste simple non ordonnée

Une liste doit être encadrée par le conteneur UL et chaque item doit être introduit par la

balise LI. Le conteneur provoque une tabulation.

Syntaxe :

<UL>

<LI>item n°1</LI>

<LI>item n°2</LI>

<LI>item n°3</LI>

</UL>

Par défaut, les puces d'une liste non ordonnée sont

des disques pleins. On peut les modifier avec

l'attribut TYPE qui peux prendre les valeurs : square

(carré plein), circle (cercle), disc (rond plein).

Les bases de HTML – Les Liste s(UL LI - OL LI - DL DT DD)


Syntaxe :

<OL TYPE="i" START="8">

<LI>item n°1</LI>

<LI>item n°2</LI>

<LI>item n°3</LI>

</OL>

Liste ordonnée

Une liste ordonnée doit être encadrée par le conteneur OL et chaque item doit être

introduit par la balise LI.

La numérotation est par défaut les chiffres arables. On peut en changer avec l'attribut

TYPE qui peut prendre les valeurs suivantes : [1,a,A,i,I].

La numérotation d'une liste ordonnée commence par défaut par le premier élément du

type de la numérotation choisie. Mais on peut contraindre la numérotation à commencer

au ième élément grâce à l'attribut START.




Syntaxe :

<DL>

<DT>terme n°1

<DD>définition n°1</DD>


</DT>

<DT>terme n°2</DT>


</DL>

Liste de termes avec définitions

Une telle liste est encadrée par le conteneur DL et contient une liste de termes spécifiés

par la balise DT. Un terme ayant lui-même une liste de définitions chacune introduite par la

balise DD.


Les bases de HTML – Les images

On insert une image dans une page HTML avec la balise <IMG> dont les attributs sont

NAME : le nom de l'image (nécessaire pour le JavaScript) SRC : l'adresse (relative ou

absolue) de l'image, WIDTH : sa largeur en pixels ou en pourcentage, HEIGHT : sa hauteur

en pixels ou en pourcentage, BORDER : son éventuelle bordure en pixels (=2 par défaut

lors d'un lien, sinon 0), ALT : un commentaire placé dans le cadre en attendant son

chargement et constitutif d'une bulle lors du passage de la souris, ALIGN : alignement,

HSPACE : marge horizontale entre l'image et les autres éléments (texte, image...) en pixels,

VSPACE : marge verticale en pixels.

<IMG SRC="images/logo.gif NAME="logo-html" WIDTH=161 HEIGHT=68 ALT="Le point

sur les balises HTML" BORDER=1 ALIGN="right" HSPACE=20>


Les bases de HTML – Liens hyper-texte

Un lien hyper-texte : C'est un élément graphique ou textuel d'une page web qui sous

l'action d'un clic de souris commande le chargement d'une autre page dans le navigateur.

La balise de base

La balise <A> qui a pour attributs HREF : l'adresse de destination et TARGET : le cadre de

destination (facultatif). Les éléments situés à l'intérieur (texte, images) renverront vers une

page sous l'action d'un clic. De plus, lorsque la souris survole un lien, son apparence change

d'une flèche a une main.

Syntaxe : <A HREF="adresse_destination">Texte_ou_image_à_cliquer</A>

Les liens internes

Lorsqu'on désire créer une page volumineuse, il est préférable d'insérer un menu avec des

liens hyper-texte internes à la page (comme pour cette page). Pour cela on utilise la même

balise mais cette fois l'adresse de destination est un mots clé précédé du signe musical

dièse #. Et il faudra, au sein de la page insérer une balise marqueur dont l'identifiant sera ce

mot clé pour qu'un clic de souris sur le lien se dirige vers ce marqueur.


Les bases de HTML – Les tableaux

En premier lieu pour mettre en forme des tableaux de données mais aussi et surtout pour

mettre en page son propre site web. En effet, on a tous eu besoin d'écrire du texte sur

plusieurs colonnes, d'aligner des paragraphes avec des images... En HTML, la balise

<TABLE> permet de faire de la véritable mise en page. Mais avec l'apparition des blocs

DIV et des feuilles de styles, on peut désormais s'en passer.

<TABLE>

<TR>

<TD>une seule cellule</TD>

</TR>

</TABLE>


Les bases de HTML – Les cadres

Pourquoi les cadres ?

Un site qui retient l'attention c'est un site sur lequel il est très aisé de naviguer et de

prendre des repères. Il faut donc que l'internaute soit capable de se déplacer rapidement

de page en page et de revenir plus tard très facilement au même endroit. Pour cela, il est

nécessaire d'offrir des menus efficace qui puissent permettre à vos visiteurs de se balader

sur vos pages. La technique la plus utilisée pour cela, et la plus simple : c'est les cadres.

Qu'est-ce qu'un cadre ?

Un cadre est une zone de la fenêtre associée à un fichier HTML. On utilise au minimum

deux cadres dans une fenêtre, l'un associé au menu et l'autre aux documents.

<FRAMESET COLS="30%,70%">

<FRAME NAME="sommaire" SRC="sommaire.php3">

<FRAME NAME="article" SRC="article1.php3">

</FRAMESET>


Les bases de HTML – TP Réalisation d’un CV

Travail a faire:

Réalisation d’un CV sous forme d’une page WEB, avec un Index des éléments constituant le

CV.

Eléments constituant le CV:

› Menu (index)

› Informations personnelles avec photo

› Formation

› Expériences professionnelles


Les bases de CSS

Les bases de CSS

Cascading Style Sheets


Les bases de CSS

La création de styles CSS (Cascading Style Sheets ou feuilles de style en cascade) est le

complément indispensable du langage HTML. Ce procédé correspond parfaitement à la

séparation du contenu et de la présentation sur laquelle nous avons plusieurs fois insisté

en décrivant les différents éléments HTML. D’une part, cette séparation permet d’alléger

les pages en centralisant les définitions des styles en un point unique, une seule définition

pouvant s’appliquer à un grand nombre d’éléments. D’autre part, elle facilite également la

maintenance et l’évolution des sites par voie de conséquence.


Les bases de CSS - Intégrer une feuille de style externe

C'est la façon de faire la plus courante : dans l'élément <head> on ajoute un élément

<link> :

<head>

<style type="text/css" media="screen">

@import url(styles.css);

</style>

...OU...

<link rel="stylesheet" type="text/css" href="fichier.css" media="screen" />

</head>

le fichier CSS est un simple fichier texte qui contient le code CSS qui s'appliquera à toute

la page. L'utilisation de cette balise permet très facilement d'utiliser une feuille de style

pour plusieurs documents HTML.


Les bases de CSS - Définir une feuille de style selon le média

CSS permet de différencier la présentation d'un même document HTML en fonction du

média visé:

› à l'écran d'ordinateur de bureau

› à la projection en grand écran

› au rendu sur l'écran réduit d'un mobile ou PDA

› à l'impression papier

Les principales valeurs de type de média sont, pour celles qui sont actuellement

supportées par les navigateurs:

› all : quel que soit le média de sortie (reconnu par tous les navigateurs Web

traditionnels)

› screen : écrans d'ordinateur de bureau (reconnu par tous les navigateurs Web

traditionnels)

› print : pour l'impression papier (reconnu par tous les navigateurs Web traditionnels)

› handheld : écrans de très petite taille (mobiles, PDA. Cependant, de nombreux

navigateurs pour mobiles reconnaissent également le type de média screen)

› projection : quand le document est projeté (Opera en mode plein écran)


Les bases de CSS - Les règles générales

Une déclaration de style comporte plusieurs parties, selon l’ordre suivant :

• Un sélecteur qui va déterminer à quel élément et éventuellement dans quelles

conditions va s’appliquer le style.

• La déclaration des propriétés que l’on veut voir appliquées à l’élément sélectionné. Elle

doit être incluse entre des accolades ouvrante ({) et fermante (}).

• Dans ces accolades doivent apparaître une ou plusieurs propriétés déterminées chacune

par un mot-clé propre à CSS suivi du caractère deux-points (:), puis de la valeur attribuée à

cette propriété.

SELECTEUR{

Proprieté1: Valeur1;



}


Les bases de CSS - Les sélecteurs

Une des grandes richesses de CSS est la multiplicité des possibilités de sélection des

éléments auxquels on veut attribuer un style donné. Cette très grande diversité permet en

effet d’appliquer un style aussi facilement à tous les éléments, en une seule ligne de code.

De plus, la combinaison de plusieurs sélecteurs dans la même déclaration ouvre la voie à

une quasi-infinité de combinaisons, propres à répondre à tous les besoins, même les plus

complexes.



Sélectionner un seul élément

Il s’agit de la sélection la plus simple, puisque le sélecteur est constitué du nom de

l’élément sans les caractères de début < et de fin de balise />.

Nous écrivons par exemple :

p {color : yellow ; background-color :blue;}



Sélectionner plusieurs éléments

Nous pouvons très facilement appliquer le même style à plusieurs éléments différents en

les énumérant et en les séparant par une virgule dans le sélecteur:

h1,div,p {color : black ; background-color : red;}



Le sélecteur universel

Pour appliquer un style à tous les éléments, nous utiliserons le sélecteur universel * avant la

définition d’une ou plusieurs propriétés. Par exemple, pour que la couleur du fond de tous

les éléments soit le jaune, nous écrirons :

*{background-color : yellow;}



Les classes

Nous avons vu que tous les éléments HTML possèdent l’attribut class. Ce dernier permet

d’appliquer un style défini dans une classe à un élément dont l’attribut class se voit

attribuer le nom de cette classe. Pour créer une classe, le sélecteur est constitué du nom

choisi pour la classe précédé d’un point (.)

.NomClass {color : red;}

<p class="NomClass">Texte contenu du paragraphe</p>



Sélecteur d’identifiant l'attribut id

Pratiquement, chaque élément peut avoir un attribut id qui doit être unique dans une page

donnée. Nous pouvons écrire un style qui ne sera applicable qu’à l’élément dont l’id a une

valeur précise en donnant cette valeur au sélecteur (comme pour une classe) et en le faisant

précéder du caractère dièse (#).

#bleu {color: white; background-color: blue;}

<p id=" bleu">Texte contenu du paragraphe</p>



Les sélecteurs d’attributs

Il est également possible d’appliquer un style à un élément déterminé dès qu’il possède un

attribut donné, quelle que soit la valeur de cet attribut. Pour appliquer ce sélecteur, le nom

de l’élément doit être suivi du nom de l’attribut placé entre crochets ([) et (]). En définissant

le style suivant :

h2[title][id]{background-color: yellow;}

<h2 id=" bleu“ title=“ titre en bleu">Texte contenu du titre</h2>

<h2 id=" T2“>Texte contenu du titre</h2>



Les sélecteurs de valeur d’attribut

Le sélecteur précédent applique un style à un élément par la seule présence d’un attribut

précis. Pour affiner ce système, nous pouvons également appliquer un style à un élément à

condition que tel attribut ait une valeur précise en utilisant la syntaxe suivante :

element [attribut="valeur"] {Définition du style;}

h2[title=“ titre en bleu"]{background-color: yellow;}

<h2 id=" bleu“ title=“ titre en bleu">Texte contenu du titre</h2>

<h2 id=" T2“>Texte contenu du titre</h2>



Les sélecteurs contextuels parent-descendant

Plutôt que de définir un style pour toutes les occurrences d’un élément, nous pouvons

souhaiter ne l’appliquer qu’en fonction de sa position relative par rapport à un autre dans la

hiérarchie des éléments de la page. Ce type de sélecteur est dit contextuel.

element_parent element_enfant {Définition des styles;}

ul li {background-color: #EEE; color: black;}



Les sélecteurs parent-enfant directs

Nous pourrons préciser le sélecteur précédent en n’appliquant qu’un style à un élément à

condition qu’il soit un enfant direct d’un autre élément. Pour opérer ce type de sélection, il

faut utiliser la syntaxe :

element_parent > element_enfant {Définitions des styles;}

div > span{color: red; background-color: #EEE;}



Les Pseudo-classes et pseudo-éléments

Les pseudo-classes et les pseudo-éléments permettent d’attribuer un style à une partie

abstraite d’un document non identifiable dans cette hiérarchie, par exemple le premier

caractère ou la première ligne d’un paragraphe.

D’autres pseudo-classes permettent d’attribuer un style à un document en fonction des

actions prévisibles mais non déterminées de l’utilisateur final, par exemple le fait de placer

son curseur sur un lien ou un composant de formulaire.

› Les pseudo-classes applicables aux liens: a:visited {color: red;}

› Les pseudo-classes dynamiques: input:focus{background–color: blue;}

› Pseudo-classes diverses: span:firsthild {background-color: red; color: white;}

› Les pseudo-éléments: first-letter, qui permet d’affecter un style à la première lettre du

contenu d’un élément indiqué avant ce sélecteur.


Les bases de CSS - La déclaration !important

Chaque déclaration de style peut revêtir un caractère de plus grande importance par

rapport à une autre déclaration concernant le même élément et la même propriété qui

comporte une valeur différente. Ces deux déclarations peuvent entrer en conflit au

moment de la création de la présentation par le navigateur. Pour donner cette importance

à un style, il faut insérer la déclaration d’importance à l’aide du mot-clé !important.

Dans l’exemple suivant :

*{color: black !important; background-color: yellow;}

div{color: blue; background-color: white;}


Les bases de CSS - Les unités

Toutes les propriétés CSS peuvent prendre une valeur dans un domaine particulier propre à

chacune d’elle. En dehors des nombreux mots-clés existants, nous allons faire ici

l’inventaire des différents types de valeurs parmi les plus générales que l’on retrouve pour

un grand nombre de propriétés.

› Les unités de longueur

› Les couleurs



Les unités de longueur

Elles s’appliquent aussi bien à la taille d’une police qu’à la largeur d’une bordure ou la

hauteur d’un élément.

Elles s’expriment par un nombre entier ou décimal selon les cas, suivi d’une unité.

Les unités de mesure relatives

• Px: Valeur en pixels. La définition d'un pixel étant "96 pixels/pouce", le pixel n'est pas

forcément recommandé dans tous les cas (cf. les remarques précédentes).

• Em: Valeur par rapport à la hauteur em d'une police. 1 em correspond à 100% de la taille en

cours de la police, 1.2 em à 120 %, 0.8 em à 80%… Son usage est donc limité aux polices.

• Ex: Valeur par rapport à la hauteur x d'une police. Assez pauvrement implémentée, donc à

éviter.

• %: Valeur en pourcentage. L'élément définit prendra un pourcentage donné de la taille de son

élément parent.



Les unités de mesure absolues: elles sont recommandées quand les caractéristiques

physiques (mesurables) du média sont connues.

Cm: Valeur en centimètres. Risque d'affichage différent sur plusieurs écrans. En effet, les

réglages et résolutions sont tellement variés que ce qui semble correspondre à 1 cm sur un

écran donné pourra être beaucoup plus grand ou plus petit sur un autre.

Mm: Valeur en millimètres. Même remarque que pour les centimètres.

In: Valeur en pouces (inches). Même remarque que pour les centimètres.

Pt: Valeur en point. Le point est une mesure typographique utilisée par les imprimeurs

(d'où les "points par pouce" de certaines résolutions) et les traitements de texte. Ici encore,

les remarques des centimètres s'appliquent.

Pc: Valeur en picas. Un autre terme de typographie, et donc, du fait de son origine "papier",

les remarques précédentes tiennent.


Les bases de CSS - Les couleurs

Une valeur de couleur s’exprime en mettant en œuvre l’une des manières suivantes :

• Un mot-clé parmi une liste limitative des couleurs. Tous les mots-clés sont en anglais,

par exemple black, yellow qui correspond à des couleurs connues ; d’autres sont plus

fantaisistes comme whitesmoke.

• Un code hexadécimal de couleur basé sur les composantes RGB d’une couleur dans le

système additif. Chaque composante prend une valeur qui va de 0 à FF, et l’ensemble

doit être précédé du caractère dièse (#), par exemple #F4C5A8. Il est possible de ne

préciser que trois nombres hexadécimaux de 0 à F, par exemple #FC5, les navigateurs

convertissant ces valeurs par réplications (la couleur notée #FC5 est interprétée comme

#FFCC55).


Les bases de HTML – TP amélioration du CV

Travail a faire:

Modifier le CV réalisé avec du HTML, en spécifiant un style pour chaque section.

Un fichier style pour les éléments suivants:

› Menu

› Informations personnelles avec photo

› Formation

› Expériences professionnelles

10/03/2015 Formation en Développement WEB 10/03/2015 Formation en Développement WEB

Documents

HTML4 Et CSS2.1