HTML CSS

INSA - ASI TechnoWeb : HTML/CSS
Technologie Web
HTML et CSS
1
Olivier Martineau
SpreadButton
olivier@sb.am
Alexandre Pauchet
INSA Rouen - Dpartement ASI
BO.B.RC.18, pauchet@insa-rouen.fr
INSA - ASI TechnoWeb : HTML/CSS 2
1. Introduction
2. HTML
3. Les formulaires
4. Les CSS
PLAN
Annes 1990 : HTML est cr par Tim Berner-Lee au Centre

Europen de Recherche Nuclaire (CERN)
1995 : HTML 2.0 normalisation par lIETF 1
1996 : HTML 3.2 ajout des tables, des applets (Java), etc.
1998 : HTML 4.01 ajout des feuilles de styles, des frames, etc.
2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0
2002 : XHTML 2.0 en cours de spcication
2007 : HTML 5
HISTORIQUE
1 : Le navigateur effectue une requte spcie travers lURL
2 : Le serveur retourne un ot typ de donnes
3 : Le navigateur interprte le ot de donnes et lafche

PRINCIPE DE FONCTIONNEMENT
Un chier HTML/XHTML est un chier texte (cf. protocole Http)

contenant des balises appelant des commandes, dont laction est limite au
texte contenu entre la balise de dbut et la balise de n.
Extension HTML : .htm ou .html
Balise de dbut :
<commande[ attribut1=valeur1[ attribut2=valeur2 ...]]> Balise de n : </
commande>
Commentaires : 

Remarque : retours chariot, succession despaces et/ou de tabulations ne sont
pas pris en compte.
LANGAGES BALISES
Un chier HTML/XHTML est un chier texte (cf. protocole Http)

contenant des balises appelant des commandes, dont laction est limite au
texte contenu entre la balise de dbut et la balise de n.
Extension HTML : .htm ou .html
Balise de dbut :
<commande>
Balise de n :
</commande>
Balise autofermante :
<commande />
Commentaires : 

Remarque : retours chariot, succession despaces et/ou de tabulations ne sont
pas pris en compte.
LANGAGES BALISES
XHTML : Hritage HTML, cd SGML
XHTML : trs strict, XML
HTML 5 : souple, plus XML, mais plus non plus SGML

compatibilit : dans une certaine mesure, les navigateurs web grant comme
ils le veulent
HTML 4 / XHTML 1.0 / HTML 5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
<HTML>
<HEAD>
<TITLE>Page HTML 4 Type</TITLE>
</HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>
SQUELETTE DUN DOCUMENT HTML 4
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page XHTML Type</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
<p>Hello world!</p>
</body>
</html>
SQUELETTE DUN DOCUMENT XHTML
<!DOCTYPE html>
<html>
<head>
<title>Page HTML 5 Type</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Hello world!</p>
</body>
</html>
SQUELETTE DUN DOCUMENT HTML 5
BUT :
Rduire le besoin de plugins externe (comme Flash)
Mieux grer les erreurs
Plus de contrle pour moins de javascrit
HTML5 doit tre indpendant du terminal (pc, mobile, tele...)

Concrtement :
Llment <canvas> pour les dessin 2D
Les <video> and <audio> pour le multimdia
Gestion dun stockage local
De nouveaux tags dlment : <article>, <footer>, <header>, <nav>,

<section>
Des contrles pour les formulaires : calendar, date, time, email, url, search
POURQUOI HTML 5
Apporte du sens :
<title></title> : titre de la page
<h1></h1> : Grand titre
<h2></h2> : plus petit titre
<hx></hx> : etc.
<p></p> : paragraphe
<code></code> : portion de code informatique

Dbut de mise en page :
<br/> : retour la ligne
<hr/> : ligne horizontable
<strong> </strong> : mot important (en gras)
<mark></mark> : soulign
<em></em> : mot mis en avant (en italique)

LES BALISES
<ul><li>blabla</li></ul> : liste puce
<ol><li>blabla</li></ol> : liste ordonne, avec numrotation auto
<dl><dt>PHP</dt><dd>Language de programmation web</dd></dl> : liste

de dnition
LES BALISES : LISTES
<table>
<tr> 
<th>Nom col</th> 
<th>Nom col 2</th>
</tr>
<tr>
<td>Bla bla</td> 
<td>123</td>
</tr>
</table>
LES BALISES : TABLEAU
Un peu de structure :
<thead></thead> : en tte
<tfoot></tfoot> : lignes
<tbody></tbody> : pied de tableau

Permet au navigateur de rpter les titres si ncessaire (impression par ex)
<tfoot> doit tre avant <tbody> pour permettre de positionner avant.
LES BALISES : TABLEAU
Le ux HTML :
Les balises sont lues squentiellement,
Et sont afch au fur et mesure,
Les une en dessous des autres.

Lafchage se modie au fur et mesure du chargement de la page, et de ses
composants (images...)
HTML : LA NOTION DE FLUX
Balise de dbut :
<commande[ attribut1=valeur1[ attribut2=valeur2 ...]]> Balise de n : </
commande>
Balise autofermante :
<commande[ attribut1=valeur1[ attribut2=valeur2 ...]] />
LES ATTRIBUTS
rowspan="x" : la cellule est sur plusieurs lignes
colspan="x" : la cellule est sur plusieurs colonnes

<table border= "1" >
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td colspan= "2" >1 et 2</td><td rowspan= "2" >3 et 3</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
LES ATTRIBUTS DES TABLEAUX
La balise <img/> permet dinsrer une image
Les attributs :
src : lURI o se situe limage
alt : courte description de limage
heigth : hauteur de limage en pixels
width : largeur de limage en pixels
Exemple
<img src="debian.png"alt="le logo Debian"/>
En spciant la taille des images, on acclere le chargement

BALISE IMAGE
Llment <a href="...">...</a> permet dinsrer un lien
Le contenu de llment est celui qui sera afch en tant que lien.
Lattribut href contient lURI vers laquelle le lien pointe :

URL : http://www.google.com
URL : mailto:olivier@sb.am
Fichier local : autrepage.html
Fichier local en relatif : dossier/autre.html ou ../dossier/autre.html
Fichier local en absolu : /dossier/autre.html
Exemple :
<a href="lienversuneautrepage.html">Texte affich</a>
BALISE LIEN
Avant, les HTML entities :

é
è
Maintenant, encodage des caractres :

UTF-8 : best practice !
ISO-8859-1 : adapt au Franais, mais pas multilingue.
Dni plusieurs endroits :

HTML : <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTTP : Content-Type: text/html; charset=utf-8
ENCODAGE DES ACCENTS
Llment <form> ... </form> dclare un formulaire
Les attributs :
action : URL spcie le traitement des donnes
method : spcie la mthode dacheminement des donnes (GET par dfaut

ou POST)
enctype : spcie la mthode dencodage

application/x-www-form-urlencoded par dfaut
multipart/form-data (notamment pour le le-upload)
LES FORMULAIRES
Llment <input/> contient les attributs suivant :
type : spcie le type dlment utiliser
name : donne un nom llment
value : donne une valeur llment

<input type="text" name="champs" size="10" value="texte"/>
<input type="password" name="mdp" size="10" maxlength="8"/>
<input type="hidden" name="id" value="123456"/>
<input type="checkbox" name="chk1" value="ok"/>
<input type="checkbox" name="chk2" value="ok" checked="checked"/>
<input type="radio" name="choix" value="rd1"/>
<input type="radio" name="choix" value="rd2" checked="checked"/>
<input type="radio" name="choix" value="rd3"/>
LES FORMULAIRES : LES CHAMPS
Un lment <input/> de type :
submit : afche un bouton et permet lenvoi des donnes du formulaire au

serveur
image : afche une image et permet lenvoi des donnes du formulaire au

serveur
reset : afche un bouton et permet de restaurer les valeurs par dfaut du

formulaire
le : afche un bouton permettant douvrir une boite de recherche de chier

<input type="submit" name="action" value="Insert"/>
<input type="file" name="unFichier" id="fichier" />
<input type="image" src="images/croix.jpg" name="action" value="Delete"/>
<input type="reset" value="Reset"/>
LES FORMULAIRES : LES BOUTONS
Un lment <textarea> permet de faire des champs textes
<textarea rows="4" cols="50">
Ce texte est ditable et sera envoy lors du submit
</textarea>
LES FORMULAIRES : TEXTE
La balise <select> permet de dnir une liste de choix
Les attributs :
multiple : permet de slectionner plusieurs lments dans la liste
size : si >2, afche un tableau, sinon un menu droulant

<select name="laliste" size="3" multiple="multiple">
<option value="1">toto</option>
<option selected="selected" value="2">titi</option>
<optgroup label="les autres">
<option value="3">tata</option>
<option value="4">tutu</option>
<option value="5">tete</option>
</optgroup>
</select>
LES FORMULAIRES : LISTE
La balise <label> sert nommer les champs
Lattribut for est nom (name) du champ dcrit
Trs utile sur le radio et checkbox : permet de cliquer sur le nom et plus
seulement sur la case pour activer (plus ergonomique)
<form>
<label for="h">Homme</label>
<input type="radio" name="genre" id="h" />
<br />
<label for="f">Femme</label>
<input type="radio" name="genre" id="f" />
</form>
LES FORMULAIRES : LE NOM DES CHAMPS
<form action=""> <fieldset>
<legend>Exemple de formulaire</legend>
<label>Nom :</label> <input type="text" name="monNom" id="nom" />
<label>PrnomGGG :</label> <input type="text" name="monPrenom" id="prenom" />
<hr/>
<input type="checkbox" name="maNewsletter" id="newsletter" /> <label for="newsletter">Une
checkbox</label>
<input type="radio" name="monSexe" id="homme" /><label for="homme">Homme</label>
<input type="radio" name="monSexe" id="femme" /><label for="femme">Femme</label><br/>
<label for="photo">Fichier :</label> <input type="file" name="maPhoto" id="photo" /><br/>
<select name="laliste" size="3" multiple="multiple">
<option value="1">toto</option>
<option selected="selected" value="2">titi</option>
<optgroup label="les autres">
<option value="3">tata</option> <option value="4">tutu</option> <option value="5">tete</
option>
</optgroup>
</select>
<hr/><textarea name="texte" rows="10" cols="80">Raconte-moi une histoire...</textarea>
<hr/>
<input type="submit" name="maSoumission" id="soumission" />
<input type="submit" name="action" value="Insert"/>
<input type="submit" name="action" value="Update"/>
<input type="image" src="Images/logoasi.png" name="action" value="Delete" width="75px"/>
<input type="reset" value="Reset"/>
</fieldset> </form>
EXEMPLE COMPLET DE FORMULAIRE
EXEMPLE COMPLET DE FORMULAIRE
Cascading Style Sheets
Feuille de style en cascade
Dcoration du HTML : sparation du contenu et de la prsentation
3 normes :
CSS 1
CSS 2
CSS3
CSS
3 faons de lutiliser :
Style dans les balises ( viter) :

<h2 style="color:red">Titre en rouge</h2>
Style dans le <head> (utile) :

<style type="text/css"> h2 {color:red}</style>
Style dans un chier (best practice) :

h2 {color:red}
Inclus dans le <head>
<link href="messtyles.css" rel="stylesheet" type="text/css"/>
CSS : SYNTAXE
h2 {color:red;}
h2 : slecteur
text-color : proprit
red : valeur
On peut mettre plusieurs couples proprit+valeur par slecteur avec les ;

/* Commentaire dans du CSS */
CSS : SYNTAXE
un nom de balise : h2 , p, strong, etc.
un id, avec # devant
une classe avec . devant

Les id et class sapplique sur toutes les balises :
<h2 id="legrandtitre" class= "untitre ">Titre</h2>
Les id sont uniques sur un mme page.
Les class sapplique sur plusieurs balises.
CSS : SELECTEUR
Les slecteurs de base :
h2 {color : red;}
#legrandtitre {color : red;}
.untitre {color : red;}
h2, h3, h4 {color : red;} /* le mme style sapplique sur les 3
Combinaisons :
h2.untitre {color : red;} /* un h2 qui la classe untitre
p h2 {color : red;} /* les h2 qui sont dans un p
p>h2 {color : red;} /* les h2 qui sont directement dans un p
p+h2 {color : red;} /* les h2 qui sont juste aprsp (pas dedans)
CSS : SELECTEUR
http://www.w3schools.com/cssref/css_selectors.asp
Tous les styles, peut importe o ils sont dnis se fusionne dans lordre de
chargement dans une seule feuille de style avec un systme dhritage, et
peuvent scraser.
CSS : CASCADE
h1 {
color : red;
font-size : 18px;
}
h2 {
color : green;
}
h1 {
color : blue;
}
h2 {
color : green;
font-size : 12px;
}
h1 {
color : blue;
font-size : 18px;
}
h2 {
color : green;
font-size : 12px;
}
+ =
Tous les styles, les styles sappliquent en cascade : tous les styles applicables sont
appliqus.
CSS : CASCADE
h1 {color : red;}
p { backgroung-color:grey; }
.untitre { font-size : 64px; }
<p>
<h2 class= "untitre">Le titre qui a du style</h2>
</p>
+
=
Le titre qui a du style
Les lments HTML sont de type block ou inline. Les inline se fondent
dans le texte, les block forcent un retour de chariot avant et aprs.
Exemple de block : <p>,<h1>,<table>
Exemples de inline : <strong>, <a>, <img>
Block spcial : <div>
Inline spcial : <span>
Ne signie rien, ne sont utile que pour mettre des styles
CSS : ELEMENTS BLOCK ET INLINE
Texte :
font-size, font-style, font-family, font-weight
Paragraphes :
line-height, text-align, text-indent, text-transform
Blocs :
height, width, margin-right, margin-left, margin-top, margin-
bottom, padding-right, padding-left, padding-top, padding-
bottom, border-style, border-top-width, border-right-width,
CSS : PROPRITS
http://www.w3schools.com/cssref/
Fonctionnement normal :
dans le ux, les uns en dessous des autres
Positionnement ottant (par rapport au bloc contenant):

oat: left;
Positionnement absolu (par rapport la fentre, hors ux):

position:absolute; top : x px; left : y px;
Positionnement relatif (par rapport sa position dans le ux):

position:absolute; top : x px; left : y px;
CSS : POSITIONNEMENT
http://www.w3schools.com/css/css_positioning.asp
HTML 5
w2schools : http://www.w3schools.com/html5/
Toutes les balises : http://www.w3schools.com/html5/html5_reference.asp
CSS
w2schools : http://www.w3schools.com/html5/
Balises : http://www.w3schools.com/html5/html5_reference.asp
Lindispensable Firebug !
Validation
W3C (DTD based) : http://validator.w3.org
Validator.ne (non-DTD) : http://html5.validator.nu
Compatibilit navigateurs : http://caniuse.com

RTFM

HTML CSS

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML CSS

Încărcat de

Drepturi de autor:

Formate disponibile

INSA - ASI TechnoWeb : HTML/CSS

Annes 1990 : HTML est cr par Tim Berner-Lee au Centre

1995 : HTML 2.0 normalisation par lIETF 1

2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0

2002 : XHTML 2.0 en cours de spcication

1 : Le navigateur effectue une requte spcie travers lURL

2 : Le serveur retourne un ot typ de donnes

3 : Le navigateur interprte le ot de donnes et lafche

Un chier HTML/XHTML est un chier texte (cf. protocole Http)

Extension HTML : .htm ou .html

Commentaires :

Un chier HTML/XHTML est un chier texte (cf. protocole Http)

Extension HTML : .htm ou .html

Commentaires :

XHTML : Hritage HTML, cd SGML

XHTML : trs strict, XML

HTML 5 : souple, plus XML, mais plus non plus SGML

Rduire le besoin de plugins externe (comme Flash)

Mieux grer les erreurs

Plus de contrle pour moins de javascrit

HTML5 doit tre indpendant du terminal (pc, mobile, tele...)

Llment <canvas> pour les dessin 2D

Les <video> and <audio> pour le multimdia

Gestion dun stockage local

De nouveaux tags dlment : <article>, <footer>, <header>, <nav>,

<title></title> : titre de la page

<h1></h1> : Grand titre

<h2></h2> : plus petit titre

<code></code> : portion de code informatique

<br/> : retour la ligne

<hr/> : ligne horizontable

<strong> </strong> : mot important (en gras)

<em></em> : mot mis en avant (en italique)

<ul><li>blabla</li></ul> : liste puce

<ol><li>blabla</li></ol> : liste ordonne, avec numrotation auto

<dl><dt>PHP</dt><dd>Language de programmation web</dd></dl> : liste

<tbody></tbody> : pied de tableau

Les balises sont lues squentiellement,

Et sont afch au fur et mesure,

Les une en dessous des autres.

rowspan="x" : la cellule est sur plusieurs lignes

colspan="x" : la cellule est sur plusieurs colonnes

La balise <img/> permet dinsrer une image

En spciant la taille des images, on acclere le chargement

Llment <a href="...">...</a> permet dinsrer un lien

Lattribut href contient lURI vers laquelle le lien pointe :

Avant, les HTML entities :

Maintenant, encodage des caractres :

Dni plusieurs endroits :

action : URL spcie le traitement des donnes

method : spcie la mthode dacheminement des donnes (GET par dfaut

enctype : spcie la mthode dencodage

type : spcie le type dlment utiliser

name : donne un nom llment

value : donne une valeur llment

submit : afche un bouton et permet lenvoi des donnes du formulaire au

image : afche une image et permet lenvoi des donnes du formulaire au

reset : afche un bouton et permet de restaurer les valeurs par dfaut du

le : afche un bouton permettant douvrir une boite de recherche de chier

multiple : permet de slectionner plusieurs lments dans la liste

size : si >2, afche un tableau, sinon un menu droulant

Style dans les balises ( viter) :

Style dans le <head> (utile) :