HTML4 Et CSS2.1
description
Transcript of HTML4 Et CSS2.1
10/03/2015 Formation en Développement WEB
Formation en Développement WEB
[Le Web Statique] HTML, CSS, et JavaScript
10/03/2015 Formation en Développement WEB
Plan – Le WEB statique
10/03/2015 Formation en Développement WEB
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
10/03/2015 Formation en Développement WEB
Plan – Le WEB dynamique
10/03/2015 Formation en Développement WEB
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
› TP : Langage PHP partie 2
Partie 3 PHP : Les Concepts Orienté Objet › Classe et Objet
› La visibilité
› L’héritage
› Classe abstraite
› Interface
› La sérialisation des objets
› TP : Langage PHP partie 3
10/03/2015 Formation en Développement WEB
Plan – Le WEB dynamique avancé
10/03/2015 Formation en Développement WEB
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
10/03/2015 Formation en Développement WEB
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.
10/03/2015 Formation en Développement WEB
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
10/03/2015 Formation en Développement WEB
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 :
10/03/2015 Formation en Développement WEB
Fonctionnement du web
Communication entre navigateur et serveur
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
10/03/2015 Formation en Développement WEB
Fonctionnement du web
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.
10/03/2015 Formation en Développement WEB
Fonctionnement du web
Communication entre navigateur et serveur
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
10/03/2015 Formation en Développement WEB
Fonctionnement du web
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.
10/03/2015 Formation en Développement WEB
Les bases de HTML
Les bases de HTML
HyperText Markup Language
10/03/2015 Formation en Développement WEB
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.
10/03/2015 Formation en Développement WEB
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>
10/03/2015 Formation en Développement WEB
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>
10/03/2015 Formation en Développement WEB
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
10/03/2015 Formation en Développement WEB
Les bases de HTML - Structure générale d’un document HTML
10/03/2015 Formation en Développement WEB
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.
10/03/2015 Formation en Développement WEB
Les bases de HTML - Structure générale d’un document HTML
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 : <!--votre commentaire-->
10/03/2015 Formation en Développement WEB
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>
10/03/2015 Formation en Développement WEB
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 :
10/03/2015 Formation en Développement WEB
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>.
10/03/2015 Formation en Développement WEB
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)
10/03/2015 Formation en Développement WEB
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.
Les bases de HTML – Les Liste s(UL LI - OL LI - DL DT DD)
10/03/2015 Formation en Développement WEB
Les bases de HTML – Les Liste s(UL LI - OL LI - DL DT DD)
Syntaxe :
<DL>
<DT>terme n°1
<DD>définition n°1</DD>
<DD>définition n°2</DD>
</DT>
<DT>terme n°2</DT>
<DD>définition n°1</DD>
</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.
10/03/2015 Formation en Développement WEB
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>
10/03/2015 Formation en Développement WEB
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.
10/03/2015 Formation en Développement WEB
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>
10/03/2015 Formation en Développement WEB
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>
10/03/2015 Formation en Développement WEB
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
10/03/2015 Formation en Développement WEB
Les bases de CSS
Les bases de CSS
Cascading Style Sheets
10/03/2015 Formation en Développement WEB
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.
10/03/2015 Formation en Développement WEB
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.
10/03/2015 Formation en Développement WEB
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)
10/03/2015 Formation en Développement WEB
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;
Proprieté2: Valeur2;
Proprieté3: Valeur3;
}
10/03/2015 Formation en Développement WEB
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.
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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;}
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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;}
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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;}
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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>
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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>
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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>
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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>
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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;}
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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;}
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les sélecteurs
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.
10/03/2015 Formation en Développement WEB
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;}
10/03/2015 Formation en Développement WEB
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
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les unités
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.
10/03/2015 Formation en Développement WEB
Les bases de CSS - Les unités
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.
10/03/2015 Formation en Développement WEB
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).
10/03/2015 Formation en Développement WEB
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