Formation
HTML / CSS
[Link]
[Link] 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
[Link] 2
Partie 1: HTML
[Link] 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
[Link] 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 : [Link]
5
[Link]
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
[Link] 6
<jalals>
<dirigeants>
</dirigeants>
<employes>
</employes>
</jalals> [Link] 7
<jalals>
<dirigeants>
<dirigeant>Rida</dirigeant>
<dirigeant>Yassine</dirigeant>
</dirigeants>
<employes>
<employe>….</employe>
<employe>….</employe>
</employes>
</jalals> [Link] 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>
[Link] 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
[Link] 10
Les éditeurs
Notepad++
NetBeans
Eclipse
Dreamweaver
Sublime Text
[Link] 11
Les navigateurs
Mozilla Firefox
Google Chrome
Opera
Safari
Internet explorer
[Link] 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)
[Link] 13
La structure d'une page web
(head)
Le titre – La description - Favicon
Les meta tags – Média – Scripts - Styles
[Link] 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>
[Link] 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
([Link]
- Un site bien validé et un site plus rapide
[Link] 16
Les différents doctypes
HTML 1 ---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
HTML 4 ----------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
xHTML -----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
HTML 5 ----------------------------------------------------------
<!DOCTYPE html>
[Link] 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 »
[Link] 18
Notre première page !
- Création d’un dossier de travail + dossier pour images
- Création d’un fichier nommé « [Link] »
- Mettre du contenu !
- Sauvegarder et ouvrir !
[Link] 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" />
[Link] 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="[Link]“>
<link rel="stylesheet" media="screen"
href="petite_resolution.css" />
[Link] 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
[Link] 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>
[Link] 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)
[Link] 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="[Link]" target="_blank">jalals</a>
[Link] 25
Les balises, attributs et commentaires
- Les liens relatifs et absolus
- Exemple : [Link]
- Lien relatif :
<a href="presentation">Présentation de jalals</a>
- Lien absolu:
<a href=" [Link] de jalals</a>
[Link] 26
Les balises, attributs et commentaires
- L'arborescence de fichiers /[Link]
Root ../../[Link]
../[Link]
[Link]
/images ../[Link]
[Link]
/images/[Link]
[Link]
/fondecran
[Link]
/fondecran/[Link] [Link]
/images/fondecran/[Link]
[Link] 27
Les balises, attributs et commentaires
- Afficher une image
<img src="[Link]" alt="titre de l’image" width="200"
height="400">
- Une image avec un lien ?
<a href="lien"> <img src="[Link]" alt="titre de
l’image" width="200" height="400"></a>
[Link] 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>
[Link] 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>
[Link] 30
Les balises, attributs et commentaires
Les tableaux structurés :
[Link] 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>
[Link] 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>
[Link] 33
Les balises, attributs et commentaires
Exemple :
<form method="get" action="[Link]">
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
[Link] 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
[Link] 35
Les balises, attributs et commentaires
Mettre du audio :
<audio>
<source src="[Link]" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
[Link] 36
Les balises, attributs et commentaires
Mettre du audio :
La méthode flash :
[Link]
[Link] 37
Les balises, attributs et commentaires
Mettre une vidéo :
<video src="film.mp4" width="360" height="240“
poster="[Link]" controls></video>
Attributs :
Controls : afficher les controlleurs
Poster : afficher un aperçu
Problème : Firefox ne détient pas la licence mp4
[Link] 38
Les balises, attributs et commentaires
Mettre une vidéo :
<video controls width="360" height="240" poster="[Link]">
<source src="[Link]" type="video/ogg">
<source src="film.mp4" type="video/mp4">
</video>
[Link] 39
Les balises, attributs et commentaires
Balises purement HTML 5:
<header> <section>
<nav> <article>
<footer>
<canvas>
[Link] 40
[Link]
[Link] 41
[Link] 42
[Link]
[Link] 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>
[Link] 44
Autofocus
<input type="text" autofocus>
[Link] 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
[Link] 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
[Link] 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
[Link] 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
[Link] 49
Partie 1: CSS
[Link] 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…
[Link] 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>
[Link] 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>
[Link] 53
Relation CSS / HTML
2 - La balise style au head
Exemple :
<head>
<style type="text/css">
Code…
</style>
</head>
[Link] 54
Relation CSS / HTML
3 - La balise média <link>
Exemple :
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
[Link] 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>
[Link] 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… }
[Link] 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>
[Link]
[Link] 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 */
[Link] 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
[Link] 60
Les blocks
Les dimentions
1 - Les pixels
2 - Pourcentage
[Link] 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
[Link] 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
[Link] 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;
[Link] 64
Bordures et ombres
Les différents styles de bordure :
None - hidden - dotted - dashed - solid - double
groove - ridge - inset - outset - inherit
[Link] 65
Bordures et ombres
Arrondir les cotés de la bordure :
border-radius: valeur;
Exemple :
border: 1px solid;
border-radius: 5px;
[Link] 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
[Link] 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
[Link] 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
[Link] 69
[Link] 70
Les blocks
Limiter le texte
Le overflow :
overflox: (visible, hidden, scroll, auto)
Le word-wrap :
word-wrap: (normal, break-word)
[Link] 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
[Link] 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;
[Link] 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;
[Link] 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;
[Link] 75
Formatage du texte
Le positionnement :
-> Le positionnement en absolu :
balise{
position: absolute;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
[Link] 76
Formatage du texte
Le positionnement :
-> Le positionnement en absolu :
Point de départ
Page ou block
[Link] 77
Formatage du texte
Le positionnement :
-> Le positionnement en relatif :
balise{
position: relative;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
[Link] 78
Formatage du texte
Le positionnement :
-> Le positionnement en relatif :
Page ou block
Point de départ
Block
[Link] 79
Formatage du texte
Le positionnement :
-> Le positionnement fixe:
balise{
position: fixe;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
[Link] 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 : [Link]/[Link]
[Link] 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 : [Link]
[Link] 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
[Link] 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%)
[Link] 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("[Link]");
La propriété background :
background: couleur url("[Link]");
[Link] 85
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: ([Link]);
Résultat :
PAGE
[Link] 86
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: ([Link]) no-repeat;
Résultat :
PAGE
[Link] 87
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: ([Link]) repeat-x;
Résultat :
PAGE
[Link] 88
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: ([Link]) repeat-y;
Résultat :
PAGE
[Link] 89
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: ([Link]) no-repeat right bottom;
Résultat :
PAGE
[Link] 90
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: ([Link]) no-repeat right bottom;
No-repeat
Top
Repeat-x Right Center
Repeat-x Center Bottom
Left
[Link] 91
Couleurs et fonds
La transparence :
Opacity: valeur;
Valeur = entre 0 et 1
Exemple
<img src="[Link]" style="opacity:0.5" >
[Link] 92
Apparences dynamiques
Dynamiser un élément au survol de la sourie
Exemple :
<div id="block">texte</div>
#block:hover{
background:black;
color: white;
}
[Link] 93
Apparences dynamiques
Changer la couleur de selection
::selection{ background: couleur; }
Exemple
<style type="text/css">
::selection{ background: yellow; }
</style>
[Link] 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
[Link] 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 !
[Link] 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 !
[Link] 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 !
[Link] 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 !
[Link] 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”.
[Link] 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.
[Link] 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.
[Link] 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.
[Link] 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.
[Link] 104
CSS 3
-ms- : Internet Explorer
-moz- : Mozilla Firefox
-webkit- : Google chrome & Safari
-o- : Opera
[Link] 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;
[Link] 106
Proprétés CSS 3
border-image :
div {
border-image:url([Link]) 30 30 round;
-webkit-border-image:url([Link]) 30 30 round;
-o-border-image:url([Link]) 30 30 round;
}
[Link] 107
Proprétés CSS 3
text-shadow :
h1{
text-shadow: 5px 5px 5px #FF0000;
}
[Link] 108
Proprétés CSS 3
transition :
div{
width:100px;
transition: width 2s;
-webkit-transition: width 2s;
}
div:hover {width:300px;}
[Link] 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"
[Link] 110
Application : création d’un petit site
• Appliquer tout ce qu’on a apprit
• Une bonne organisation
• Ecrire du code propre
[Link] 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 !
[Link] 112
Liens utiles
[Link]
[Link]
[Link]
[Link]
[Link] 113