Formation HTML

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
Partie 1: HTML
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
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
<jalals>
<dirigeants>
</dirigeants>
<employes>
</employes>
</jalals> http://jalals.info 7
<jalals>
<dirigeants>
<dirigeant>Rida</dirigeant>
<dirigeant>Yassine</dirigeant>
</dirigeants>
<employes>
<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>
</employes>
</jalals>
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
Les éditeurs
Notepad++
NetBeans
Eclipse
Dreamweaver
Sublime Text
Les navigateurs
Mozilla Firefox
Google Chrome
Opera
Safari
Internet explorer
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)
La structure d'une page web
(head)
Le titre – La description - Favicon

Les meta tags – Média – Scripts - Styles
Code HTML général
<doctype>
<html>
<head>
<title>Le titre de la page</<title>
<meta>
<link>
<script>
</head>
<body>
Le contenu
<body>
</html>
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
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>
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 »
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 !
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" />
- 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" />
- Commantaires :

- A quoi sert un commentaire ?
1 - Mettre des infos utiles pour nous même

2 - Commenter du code sans le perdre
- 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>
- 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)
- 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>
- 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>
- 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
- 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>
- 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>
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>
Les tableaux structurés :
<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>
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>
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
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
Mettre du audio :
<audio>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
Mettre du audio :
La méthode flash :
http://www.alsacreations.fr/dewplayer.html
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
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>
Balises purement HTML 5:
<header> <section>
<nav> <article>
<footer>
<canvas>
http://www.w3schools.com/html/html5_new_elements.asp
http://www.mediafire.com/view/34atcjy9ggz1u6u/HTML5.pdf
Datalist
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Autofocus
<input type="text" autofocus>
Autres balises utiles
Citation :
<q> : Citation courte
<cite> : Citation du titre d'une œuvre ou d'un
évènement
<blockquote> : Citation longue
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
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
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
Partie 1: CSS
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…
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>
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>
Relation CSS / HTML
2 - La balise style au head
Exemple :
<head>
<style type="text/css">
Code…
</style>
</head>
Relation CSS / HTML
3 - La balise média <link>
Exemple :
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
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>

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… }
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
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 */
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
Les blocks
Les dimentions
1 - Les pixels
2 - Pourcentage
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
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
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;
Bordures et ombres
Les différents styles de bordure :
None - hidden - dotted - dashed - solid - double

groove - ridge - inset - outset - inherit
Bordures et ombres
Arrondir les cotés de la bordure :
border-radius: valeur;
Exemple :
border: 1px solid;
border-radius: 5px;
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
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
Les blocks
Exemple :
margin: 10px 0 0 30px;
padding: 0 30px;
10px
Texte Texte Texte Texte
M 30px
Les blocks
Limiter le texte
Le overflow :
overflox: (visible, hidden, scroll, auto)
Le word-wrap :
word-wrap: (normal, break-word)
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
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;
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;
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;
Formatage du texte
Le positionnement :
-> Le positionnement en absolu :
balise{
position: absolute;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
Formatage du texte
Le positionnement :
-> Le positionnement en absolu :

Point de départ
Page ou block
Formatage du texte
Le positionnement :
-> Le positionnement en relatif :
balise{
position: relative;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
Formatage du texte
Le positionnement :
-> Le positionnement en relatif :

Page ou block
Point de départ
Block
Formatage du texte
Le positionnement :
-> Le positionnement fixe:
balise{
position: fixe;
top: 100px;
Bottom: valeur…;
right: valeure…;
left: valeure…;
}
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
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/
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
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%)
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");
Couleurs et fonds
Manipulation de l’image du fond :
exemple de l’image suivante :
Background: (image.jpg);
Résultat :
PAGE
Couleurs et fonds
Background: (image.jpg) no-repeat;
Résultat :
PAGE
Couleurs et fonds
Background: (image.jpg) repeat-x;
Résultat :
PAGE
Couleurs et fonds
Background: (image.jpg) repeat-y;
Résultat :
PAGE
Couleurs et fonds
Background: (image.jpg) no-repeat right bottom;
Résultat :
PAGE
Couleurs et fonds
Background: (image.jpg) no-repeat right bottom;
No-repeat
Top
Repeat-x Right Center
Repeat-x Center Bottom
Left
Couleurs et fonds
La transparence :
Opacity: valeur;
Valeur = entre 0 et 1
Exemple
<img src="image.jpg" style="opacity:0.5" >
Apparences dynamiques
Dynamiser un élément au survol de la sourie
Exemple :
<div id="block">texte</div>
#block:hover{
background:black;
color: white;
}
Changer la couleur de selection
::selection{ background: couleur; }

Exemple
::selection{ background: yellow; }
</style>
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
Le hover
Utilisable sur tout élément, généralement pour les liens

Exemple :
a:hover{ color: red; }
</style>
Quand la sourie passera sur un lien, sa couleur
deviendra rouge !
Le active
Utilisable sur tout élément (déconseillé), généralement pour les liens

Exemple :
a:active{ color: #FF6161; }
</style>
Quand la sourie cliquera sur un lien, sa couleur
deviendra #FF6161 !
Le visited
Utilisable sur tout élément (déconseillé), généralement pour les
liens
Exemple :
a:visited{
color: yellow; }
</style>
Quand se lien sera visiter sa couleur changera en
jaune !
Le focus
Utilisable sur les éléments passable par tabulation (les liens, les inputs),
généralement pour les inputs
Exemple :
input:focus {
background: #000;
color:#fff; }
</style>
Quand la sourie se mettra dans un input; son fond
devinedra noir tandis que sa couleur blanche !
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”.
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.
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.
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.
Les selecteurs
UI element states pseudo- E:disabled Matches any user interface
that is disabled.
UI element states pseudo- E:checked Matches any user interface
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.
CSS 3
-ms- : Internet Explorer
-moz- : Mozilla Firefox
-webkit- : Google chrome & Safari
-o- : Opera
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;
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;
}
Proprétés CSS 3
text-shadow :
h1{
text-shadow: 5px 5px 5px #FF0000;
}
Proprétés CSS 3
transition :
div{
width:100px;
transition: width 2s;
-webkit-transition: width 2s;
}
div:hover {width:300px;}
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"
Application : création d’un petit site
• Appliquer tout ce qu’on a apprit

• Une bonne organisation
• Ecrire du code propre
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 !
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

Formation HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Formation HTML

Загружено:

Авторское право:

Доступные форматы

Formation

1. Apprendre une bonne organisation des fichiers

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

Développe aussi le premier navigateur web et

Menu horizontal (nav bar)

Le titre – La description - Favicon

- Indique la version du HTML

- Afficher les extensions

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

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

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

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

- Les balises médias

- A quoi sert un commentaire ?

1 - Mettre des infos utiles pour nous même

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

Les targets : _blank (ouvre le lien dans une nouvelle

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

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

- Une image avec un lien ?

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

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

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

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

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

Attributs : autoplay: jouer automatiquement

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

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

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

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

<input type="text" autofocus>

Mettre du text en valeur

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

- Prend uniquement la taille de son contenu

inline Inline Inline inline

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

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

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

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

- Manipuler plusieurs éléments à la fois

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

- Les pixels forment la résolution

Exemple : 1024px par 800px

Border: 0px style couleur;

None - hidden - dotted - dashed - solid - double

Marge extérieurs Marge extérieurs

Texte Texte Texte Texte Texte Texte Texte Texte Texte

Marge extérieurs Marge extérieurs

Valeur en pixel pour

1 - Qu’est ce qu’une police ?

-> Le positionnement en absolu :

-> Le positionnement en absolu :

-> Le positionnement en relatif :

-> Le positionnement en relatif :

-> Le positionnement fixe:

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

Valeur hexadécimale abrégé:

::selection{ background: couleur; }

:hover : Quand la sourie passe dessu

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

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

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

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