Vous êtes sur la page 1sur 113

Formation

HTML / CSS
Jalals.info

http://jalals.info 1
Les finalités

1. Apprendre une bonne organisation des fichiers


2. Maitrise des langages HTML et CSS
3. Ecrire du code claire et lisible
4. Connaitre la procédure d'upload vers un host
5. Comment se procurer un nom de domaine

http://jalals.info 2
Partie 1: HTML

http://jalals.info 3
Qu’est ce que le HTML ?
– Histoire :
• HTML 1 : c'est la toute première version créée par Tim
Berners-Lee en 1991.
• HTML 2 : la deuxième version du HTML apparaît en 1994
• HTML 3 : apparue en 1996
• HTML 4 : il s'agit de la version la plus répandue du HTML
apparue en 1998
• xHTML 1.0 : eXtensible HyperText Markup Language
apparue en 2000
• HTML 5 : apparue en 2011
http://jalals.info 4
Tim Berners-Lee
né le 8 juin 1955

« Je n'ai fait que prendre le principe d’hypertexte et


le relier au principe du TCP et du DNS et alors –
boum ! – ce fut le World Wide Web ! »

Développe aussi le premier navigateur web et


l'éditeur web.

Source : http://fr.wikipedia.org/wiki/Tim_Berners-Lee

5
http://jalals.info
Qu’est ce que le HTML ?
– Plus concrétement
Le HTML est comme le XML (les 2 sont issues du SGML:
Standardized Generalised Markup Language)
- Ils sont des langages de balisage !
- Une balise ? => <balise>
- Ils ont une balise ouvrante et une autre fermante (sauf
dans certains cas) => <balise>contenu </balise>
Exemple avec XML :
On imagine une société, qui à 2 gérants, et plusieurs
employés
http://jalals.info 6
<jalals>
<dirigeants>
</dirigeants>

<employes>
</employes>
</jalals> http://jalals.info 7
<jalals>
<dirigeants>
<dirigeant>Rida</dirigeant>
<dirigeant>Yassine</dirigeant>
</dirigeants>
<employes>
<employe>….</employe>
<employe>….</employe>
</employes>
</jalals> http://jalals.info 8
<jalals>
<dirigeants>
<dirigeant role="pdg">Rida</dirigeant>
<dirigeant
role="cofondateur">Yassine</dirigeant>
</dirigeants>
<employes>
<employe role="comptable"
cnss="3445333">….</employe>
<employe>….</employe>
</employes>
</jalals>

http://jalals.info 9
Concernant le HTML :
- Un langage stricte (on ne peut pas choisir n’importe
quoi pour le nom des balises)
- Des noms spécifiques et une structure à suivre

http://jalals.info 10
Les éditeurs

Notepad++

NetBeans

Eclipse

Dreamweaver

Sublime Text
http://jalals.info 11
Les navigateurs
Mozilla Firefox

Google Chrome

Opera

Safari

Internet explorer

http://jalals.info 12
La structure d'une page web
(body)
L’en-tête (header)

Menu horizontal (nav bar)


B
o
Menu vertical

d Corp – contenu

y
Corp – contenu (footer)

http://jalals.info 13
La structure d'une page web
(head)

Le titre – La description - Favicon


Les meta tags – Média – Scripts - Styles
http://jalals.info 14
Code HTML général
<doctype>
<html>
<head>
<title>Le titre de la page</<title>
<meta>
<link>
<script>
</head>
<body>
Le contenu
<body>
</html>
http://jalals.info 15
Qu’est ce que le doctype
Doctype ou DTD (Déclaration de Type de Document)

- Indique la version du HTML


- Indispensable pour les validateurs
(http://validator.w3.org/)
- Un site bien validé et un site plus rapide

http://jalals.info 16
Les différents doctypes
HTML 1 ---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4 ----------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
xHTML -----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5 ----------------------------------------------------------
<!DOCTYPE html>

http://jalals.info 17
Notre première page !

- Afficher les extensions


- Win XP : -> Poste de travail -> Outils -> Options des
dossiers -> Options des dossiers -> Décocher « masquer les
extensions des fichiers dont le type est connu »

- Win7 : -> Ordinateur -> Organiser -> Option des dossiers


et de recherche -> Affichage -> Décocher « masquer les
extensions des fichiers dont le type est connu »

- Win 8 : -> Ordinateur -> Affichage -> Décocher


« extensions de noms de fichiers »

http://jalals.info 18
Notre première page !

- Création d’un dossier de travail + dossier pour images


- Création d’un fichier nommé « index.html »
- Mettre du contenu !
- Sauvegarder et ouvrir !

http://jalals.info 19
Les balises, attributs et commentaires
- Mettre le bon doctype
- Mettre un titre
- Mettre une favicon si souhaité
- Choisir le bon encodage
<meta charset="utf-8">

- Définir les meta « description » et « keywords »


<meta name="description" content="texte"/>
<meta name="keywords" content="key, key, key" />

http://jalals.info 20
Les balises, attributs et commentaires

- La balise <script> ?
<script type="text/javascript"></script>

- La balise <style> ?
<style type="text/css"></style>

- Les balises médias


<link rel="stylesheet" href="style.css“>
<link rel="stylesheet" media="screen"
href="petite_resolution.css" />
http://jalals.info 21
Les balises, attributs et commentaires
- Commantaires :

<!-- Votre commentaire -->

- A quoi sert un commentaire ?

1 - Mettre des infos utiles pour nous même


2 - Commenter du code sans le perdre

http://jalals.info 22
Les balises, attributs et commentaires
- Les paragraphes :
<p> texte </p>
- Le retour à la ligne :
<br>
- Les titres :
Du <h1> au <h6>
- Les listes a puces :
<ul>
- Les listes a numérotées :
<ol>
http://jalals.info 23
Les balises, attributs et commentaires
- Les attributs des listes à puces :
Type (circle, square, disc)

- Les attributs des listes à numérotées:


Type (1, A, a, I, i)
Start (préciser un numéro)

http://jalals.info 24
Les balises, attributs et commentaires
- Créer un lien :

<a href=" votre lien " target=" votre target " > Le texte de
votre lien </a>

Les targets : _blank (ouvre le lien dans une nouvelle


fenêtre)
_self (ouvre le lien dans la même fenêtre)

Exemple : <a href="jalals.info" target="_blank">jalals</a>

http://jalals.info 25
Les balises, attributs et commentaires
- Les liens relatifs et absolus

- Exemple : http://jalals.info/presentation/

- Lien relatif :
<a href="presentation">Présentation de jalals</a>

- Lien absolu:
<a href=" http://jalals.info/presentation/">Présentation de jalals</a>

http://jalals.info 26
Les balises, attributs et commentaires
- L'arborescence de fichiers /index.html
Root ../../index.html
../index.html

Index.html
/images ../ciel.jpg
ciel.jpg
/images/ciel.jpg
chateau.jpg
/fondecran
fond1.jpg
/fondecran/fond1.jpg fond2.jpg

/images/fondecran/fond1.jpg

http://jalals.info 27
Les balises, attributs et commentaires
- Afficher une image

<img src="image.jpg" alt="titre de l’image" width="200"


height="400">

- Une image avec un lien ?

<a href="lien"> <img src="image.jpg" alt="titre de


l’image" width="200" height="400"></a>

http://jalals.info 28
Les balises, attributs et commentaires
- Les tableaux simples :
<table> : pour définir le cadre du tableau
<tr> : définir une ligne
<td> : définir une cellule
Exemple :
<table border="1">
<tr>
<td> Cellule 1</td>
<td> Cellule 2</td>
</tr>
</table>
http://jalals.info 29
Les balises, attributs et commentaires
Les tableaux simples avec titre et en-tête :
<table border="1">
<caption>Le titre de mon tableau</caption>
<tr>
<th>en-tête 1</th>
<th>en-tête 2</th>
</tr>
<tr>
<td> Cellule 1</td>
<td> Cellule 2</td>
</tr>
</table>
http://jalals.info 30
Les balises, attributs et commentaires
Les tableaux structurés :

http://jalals.info 31
<table border="1">
<caption>Le titre de mon tableau</caption>
<thead>
<tr>
<th>en-tête 1</th>
<th>en-tête 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th>en-tête 1</th>
<th>en-tête 2</th>
</tr>
</tfoot>

<tbody>
<tr>
<td> Cellule 1</td>
<td> Cellule 2</td>
</tr>
</tbody>
</table>

http://jalals.info 32
Les balises, attributs et commentaires
Les inputs :

<input type="text" value="une valeure primaire"


name="nom">

Type : (text, password, submit, reset, button, checkbox,


color, date, email, file, hidden, radio, search, tel, url)
--------------------------------------------------------------------
<textarea name="nom">Texte</textarea>

http://jalals.info 33
Les balises, attributs et commentaires
Exemple :

<form method="get" action="index.php">


Nom : <input type="text" name="nom" placeholder="Nom">
Email : <input type="text" name="email" placeholder="Email">
Message : <textarea name="message"
placeholder="message"></textarea>
<input type="submit" value="envoyer" >
</form>

NB: PHP est nécessaire pour l’envoi des infos

http://jalals.info 34
Les balises, attributs et commentaires
Mettre du audio :

<audio src="audio.mp3"></audio>

Attributs : autoplay: jouer automatiquement


Loop: rejouer automatiquement
Controls : afficher play, pause, stop

Problème : Firefox ne possède pas de licence mp3


Alternative : .ogg
http://jalals.info 35
Les balises, attributs et commentaires
Mettre du audio :

<audio>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>

http://jalals.info 36
Les balises, attributs et commentaires
Mettre du audio :

La méthode flash :

http://www.alsacreations.fr/dewplayer.html

http://jalals.info 37
Les balises, attributs et commentaires
Mettre une vidéo :

<video src="film.mp4" width="360" height="240“


poster="image.jpg" controls></video>
Attributs :
Controls : afficher les controlleurs
Poster : afficher un aperçu

Problème : Firefox ne détient pas la licence mp4

http://jalals.info 38
Les balises, attributs et commentaires
Mettre une vidéo :

<video controls width="360" height="240" poster="apercu.jpg">


<source src="film.ogv" type="video/ogg">
<source src="film.mp4" type="video/mp4">
</video>

http://jalals.info 39
Les balises, attributs et commentaires
Balises purement HTML 5:

<header> <section>

<nav> <article>

<footer>
<canvas>

http://jalals.info 40
http://www.w3schools.com/html/html5_new_elements.asp

http://jalals.info 41
http://jalals.info 42
http://www.mediafire.com/view/34atcjy9ggz1u6u/HTML5.pdf

http://jalals.info 43
Datalist
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
http://jalals.info 44
Autofocus

<input type="text" autofocus>

http://jalals.info 45
Les balises, attributs et commentaires
Autres balises utiles

Citation :
<q> : Citation courte
<cite> : Citation du titre d'une œuvre ou d'un
évènement
<blockquote> : Citation longue

http://jalals.info 46
Les balises, attributs et commentaires
Autres balises utiles

Mettre du text en valeur

<b> : mettre en gras + importance pour les moteurs


de recherche
<strong> : mettre en gras
<mark> : mettre en gras

http://jalals.info 47
Les balises, attributs et commentaires
Les balises universelles <span> et <div>

La balises <div>
- Prend toute la largeur
- C’est un conteneur
- Un élément block !
100%

Un élément block
Un autre élément block
Un autre élément block
http://jalals.info 48
Les balises, attributs et commentaires
Les balises universelles <span> et <div>

La balises <span>

- Prend uniquement la taille de son contenu


- Un élément inline !
100%

inline Inline Inline inline

La page

http://jalals.info 49
Partie 1: CSS

http://jalals.info 50
Qu’est ce que le CSS ?
Cascading Style Sheets

- Manipuler les polices, les couleurs, les marges, les


lignes, la hauteur, la largeur, les images d'arrière-plan,
les positionnement…

http://jalals.info 51
Relation CSS / HTML
Comment intégrer CSS à HTML :

1 - L’attribut style sur chaque élément


2 - La balise style au head
3 - La balise média <link>

http://jalals.info 52
Relation CSS / HTML
1 - L’attribut style sur chaque élément

Exemple :

<p style="color:red">Texte</p>
<div style="text-align:center">Texte</div>

http://jalals.info 53
Relation CSS / HTML
2 - La balise style au head

Exemple :
<head>
<style type="text/css">
Code…
</style>
</head>

http://jalals.info 54
Relation CSS / HTML
3 - La balise média <link>

Exemple :
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

http://jalals.info 55
Les class et id
Qu’est ce qu’une class et id ?

- 2 attributs qui se mettent dans tous les éléments


- Font la relation avec l’élément spécifié et le CSS

Exemple :

<p class="paragraphe" id="mon_parag">texte</p>


http://jalals.info 56
Les class et id
Les spécificités d’une class

- Manipuler plusieurs éléments à la fois


- L’ajout d’une class au HTML : class="nom"
- La modification d’une class en CSS :
.nom{ code… }

http://jalals.info 57
Les class et id
Les spécificités d’un id
- L’attribuer à un seul élément unique
- L’ajout d’un ID au HTML : id="nom"
- La modification d’un ID au CSS :
#nom
- Profiter de l’ancre html #
Exemple :
<p id="parag1">Texte</p>
http://site.com/#parag1
http://jalals.info 58
Exemple concret de l’utilisation du CSS

- <p id="parag22">texte</p>
 #parag22{ code…. } /* Marche seulement sur
l’élément avec ID parag22 */

- <div class="mon_block">texte</div>
 .mon_block{ code… } /* marche avec toutes
les class avec nom mon_block */
- <a href="lien">Mon lien</a>
 a{ code… } /* marche avec toutes les balises A */

http://jalals.info 59
Les blocks
Les éléments block :

1 - html, body, blockquote, div, form, h1, h2, h3, h4,


h5, h6, ol, p, ul…
2 -Les blocks peuvent avoir un width et un height
3 - On peut transformer un block en inline avec :
balise{ display: inline; }
-> Pourquoi changer un block en inline ?
- La nécessité la plus commune est celle des listes

http://jalals.info 60
Les blocks
Les dimentions

1 - Les pixels
2 - Pourcentage

http://jalals.info 61
Les blocks
Qu’est ce qu’un pixel ?

- Un point d’écran

- Les pixels forment la résolution


De l’écran

Exemple : 1024px par 800px

http://jalals.info 62
Les blocks
Changer les dimensions d’un block

Modifier la largeur
<div style="width:250px;">….</div>
ou en pourcentage
<div style="width:50%;">….</div>

Min-width - max-width

http://jalals.info 63
Bordures et ombres
Mettre une bordure à un block
Border-width: 0px;
Border-color: couleur;
Border-style: le style;

Ou

Border: 0px style couleur;


Ex : border: 1px solid #000;
http://jalals.info 64
Bordures et ombres
Les différents styles de bordure :

None - hidden - dotted - dashed - solid - double


groove - ridge - inset - outset - inherit

http://jalals.info 65
Bordures et ombres
Arrondir les cotés de la bordure :

border-radius: valeur;

Exemple :
border: 1px solid;
border-radius: 5px;

http://jalals.info 66
Les blocks
Changer les dimensions d’un block

Modifier la hauteur
<div style="height:250px;">….</div>
ou en pourcentage
<div style="height:50%;">….</div>

Min-height - max-height

http://jalals.info 67
Les blocks
Les marges
Les marges intérieurs :
Padding-top, padding-bottom, padding-right, padding-left
Les marges extérieurs :
Margin-top, margin-bottom, margin-right, margin-left

Marge extérieurs Marge extérieurs

Texte Texte Texte Texte Texte Texte Texte Texte Texte


M
Texte Texte Texte Texte Texte Texte Texte Texte Texte

Marge extérieurs Marge extérieurs

http://jalals.info 68
Les blocks
Exemple :
margin: 10px 0 0 30px;
padding: 0 30px;
10px
Texte Texte Texte Texte
Texte Texte Texte Texte
Texte Texte Texte Texte
Texte Texte Texte Texte
M 30px
Texte Texte Texte Texte
Texte Texte Texte Texte
Texte Texte Texte Texte
Texte Texte Texte Texte

http://jalals.info 69
http://jalals.info 70
Les blocks
Limiter le texte

Le overflow :
overflox: (visible, hidden, scroll, auto)

Le word-wrap :
word-wrap: (normal, break-word)

http://jalals.info 71
Bordures et ombres
Ombres de texte :
text-shadow: 0px 0px couleur;

Valeur en pixel pour


Valeur en pixel pour
diriger l’ombre à gauche
diriger l’ombre en haut
ou à droite
ou en bas

http://jalals.info 72
Bordures et ombres
Ombre de bordure :
box-shadow: 0px 0px 0px couleur;

Droit ou gauche
Haut ou bas
Quantité de diffusion

Exemple :
box-shadow: 1px 1px 10px #eee;

http://jalals.info 73
Formatage du texte
Polices, tailles et styles

1 - Qu’est ce qu’une police ?


2 - Changer la police :
Font-familly : "Comic sans MS", arial, serif;
3 - Changer la taille du texte :
font-size : 16px;
4 - Changer le style du text
font-style: normal ou italic ou bold;
http://jalals.info 74
Formatage du texte
Alignement du texte

1 - Aligner un texte
text-align: left ou center ou right;
2 - Float du texte
float: left ou right;

http://jalals.info 75
Formatage du texte
Le positionnement :

-> Le positionnement en absolu :

balise{
position: absolute;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
http://jalals.info 76
Formatage du texte
Le positionnement :

-> Le positionnement en absolu :


Point de départ

Page ou block

http://jalals.info 77
Formatage du texte
Le positionnement :

-> Le positionnement en relatif :

balise{
position: relative;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
http://jalals.info 78
Formatage du texte
Le positionnement :

-> Le positionnement en relatif :


Page ou block

Point de départ

Block

http://jalals.info 79
Formatage du texte
Le positionnement :

-> Le positionnement fixe:

balise{
position: fixe;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
http://jalals.info 80
Couleurs et fonds
Les couleurs

Par nom :

Red - blue - green - black - white - silver - gray - silver -


fuchsia - purple - yellow- aqua - tomato - indigo -
greenYellow - rosybrown - royalblue - azure -
antiqueWhite…
Plus : jalals.info/htmlcolors.php

http://jalals.info 81
Couleurs et fonds
Les couleurs

Valeur hexadécimale :
#RRGGBB
Valeur de 0 a F : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Exemple :
Noir : #000000 | Blanc : #FFFFFF
Rouge : #FF0000 | Vert : #00FF00 | Bleu : #0000FF
Outil : http://www.colorpicker.com/
http://jalals.info 82
Couleurs et fonds
Les couleurs

Valeur hexadécimale abrégé:


#RGB
Valeur de 0 a F : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Exemple :
Noir : #000 | Blanc : #FFF
Rouge : #F00 | Vert : #0F0 | Bleu : #00F

http://jalals.info 83
Couleurs et fonds
Les couleurs

Valeur RGB :
rgb(0,0,0)
Valeur comprise entre 0 et 255
Exemple : rgb(0,120,255)

ou en pourcentage !
Ex : rgb(10%,100%,33%)
http://jalals.info 84
Couleurs et fonds
Procédure en CSS :
Changer la couleur d’un texte :
Color : le couleur;
Changer le fond :
background-color: couleur;
Mettre une image au fond :
background-image:url("image.jpg");
La propriété background :
background: couleur url("image.jpg");
http://jalals.info 85
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: (image.jpg);
Résultat :

PAGE

http://jalals.info 86
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: (image.jpg) no-repeat;
Résultat :

PAGE

http://jalals.info 87
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: (image.jpg) repeat-x;
Résultat :

PAGE

http://jalals.info 88
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: (image.jpg) repeat-y;
Résultat :

PAGE

http://jalals.info 89
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: (image.jpg) no-repeat right bottom;
Résultat :

PAGE

http://jalals.info 90
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: (image.jpg) no-repeat right bottom;

No-repeat
Top
Repeat-x Right Center
Repeat-x Center Bottom
Left

http://jalals.info 91
Couleurs et fonds
La transparence :
Opacity: valeur;
Valeur = entre 0 et 1

Exemple
<img src="image.jpg" style="opacity:0.5" >

http://jalals.info 92
Apparences dynamiques
Dynamiser un élément au survol de la sourie

Exemple :
<div id="block">texte</div>

#block:hover{
background:black;
color: white;
}
http://jalals.info 93
Apparences dynamiques
Changer la couleur de selection

::selection{ background: couleur; }


Exemple
<style type="text/css">
::selection{ background: yellow; }
</style>

http://jalals.info 94
Apparences dynamiques
Les différents comportements d’un lien cliquable

:hover : Quand la sourie passe dessu


:active : Au moment du clique
:visited : Quand le lien est déjà visité
:focus : Le passage avec le touche tabulation

http://jalals.info 95
Apparences dynamiques
Le hover

Utilisable sur tout élément, généralement pour les liens


Exemple :
<style type="text/css">
a:hover{ color: red; }
</style>
Quand la sourie passera sur un lien, sa couleur
deviendra rouge !

http://jalals.info 96
Apparences dynamiques
Le active

Utilisable sur tout élément (déconseillé), généralement pour les liens


Exemple :
<style type="text/css">
a:active{ color: #FF6161; }
</style>
Quand la sourie cliquera sur un lien, sa couleur
deviendra #FF6161 !

http://jalals.info 97
Apparences dynamiques
Le visited
Utilisable sur tout élément (déconseillé), généralement pour les
liens
Exemple :
<style type="text/css">
a:visited{
color: yellow; }
</style>
Quand se lien sera visiter sa couleur changera en
jaune !
http://jalals.info 98
Apparences dynamiques
Le focus
Utilisable sur les éléments passable par tabulation (les liens, les inputs),
généralement pour les inputs
Exemple :
<style type="text/css">
input:focus {
background: #000;
color:#fff; }
</style>
Quand la sourie se mettra dans un input; son fond
devinedra noir tandis que sa couleur blanche !

http://jalals.info 99
Les selecteurs
Selector type Pattern Description

Substring matching attribute E[att^=”val”] Matches any E element


selector whose att attribute value
begins with “val”.

Substring matching attribute E[att$=”val”] Matches any E element


selector whose att attribute value ends
with “val”.

Substring matching attribute E[att*=”val”] Matches any E element


selector whose att attribute value
contains the substring “val”.

http://jalals.info 100
Les selecteurs
Structural pseudo-class E:root Matches the document’s
root element. In HTML, the
root element is always the
HTML element.

Structural pseudo-class E:nth-child(n) Matches any E element that


is the n-th child of its
parent.
Structural pseudo-class E:nth-last-child(n) Matches any E element that
is the n-th child of its
parent, counting from the
last child.
Structural pseudo-class E:nth-of-type(n) Matches any E element that
is the n-th sibling of its
type.

http://jalals.info 101
Les selecteurs
Structural pseudo-class E:nth-last-of-type(n) Matches any E element
that is the n-th sibling of
its type, counting from
the last sibling.
Structural pseudo-class E:last-child Matches any E element
that is the last child of its
parent.
Structural pseudo-class E:first-of-type Matches any E element
that is the first sibling of
its type.
Structural pseudo-class E:last-of-type Matches any E element
that is the last sibling of
its type.

http://jalals.info 102
Les selecteurs
Structural pseudo-class E:only-child Matches any E element that
is the only child of its
parent.
Structural pseudo-class E:only-of-type Matches any E element that
is the only sibling of its
type.
Structural pseudo-class E:empty Matches any E element that
has no children (including
text nodes).
Target pseudo-class E:target Matches an E element that
is the target of the referring
URL.
UI element states pseudo- E:enabled Matches any user interface
class element (form control) E
that is enabled.

http://jalals.info 103
Les selecteurs
UI element states pseudo- E:disabled Matches any user interface
class element (form control) E
that is disabled.
UI element states pseudo- E:checked Matches any user interface
class element (form control) E
that is checked.
UI element fragments E::selection Matches the portion of an
pseudo-element element E that is currently
selected or highlighted by
the user.
Negation pseudo-class E:not(s) Matches any E element that
does not match the simple
selector s.
General sibling combinator E ~ F Matches any F element that
is preceded by an E
element.

http://jalals.info 104
CSS 3
-ms- : Internet Explorer
-moz- : Mozilla Firefox
-webkit- : Google chrome & Safari
-o- : Opera

http://jalals.info 105
Proprétés CSS 3
Border-radius :

border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius:10px;

http://jalals.info 106
Proprétés CSS 3
border-image :

div {
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;
-o-border-image:url(border.png) 30 30 round;
}

http://jalals.info 107
Proprétés CSS 3
text-shadow :

h1{
text-shadow: 5px 5px 5px #FF0000;
}

http://jalals.info 108
Proprétés CSS 3
transition :

div{
width:100px;
transition: width 2s;
-webkit-transition: width 2s;
}
div:hover {width:300px;}

http://jalals.info 109
Petite démonstration
Refaire la même barre de facebook

Petite aide :
- Un block div
- width de 100% et height de 38px
- Champs input 350x24 px
- Utilisation de placeholder="Trouvez des
personnes, des lieux ou d’autres choses"

http://jalals.info 110
Application : création d’un petit site

• Appliquer tout ce qu’on a apprit


• Une bonne organisation
• Ecrire du code propre

http://jalals.info 111
Bonus : Transférer votre site en ligne

• Qu’est ce qu’un hébergement et comment en obtenir ?


• Qu’est ce qu’un nom de domaine et comment en
obtenir ?
• Transférer votre site en ligne !

http://jalals.info 112
Liens utiles

http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/css3_intro.asp
www.colorpicker.com

http://jalals.info 113