Вы находитесь на странице: 1из 40

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
INSA - ASI TechnoWeb : HTML/CSS 3

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
INSA - ASI TechnoWeb : HTML/CSS 4

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
INSA - ASI TechnoWeb : HTML/CSS 5

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 : <!--Ceci est un commentaire-->


Remarque : retours chariot, succession despaces et/ou de tabulations ne sont
pas pris en compte.
LANGAGES BALISES
INSA - ASI TechnoWeb : HTML/CSS 6

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 : <!--Ceci est un commentaire-->


Remarque : retours chariot, succession despaces et/ou de tabulations ne sont
pas pris en compte.
LANGAGES BALISES
INSA - ASI TechnoWeb : HTML/CSS 7

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
INSA - ASI TechnoWeb : HTML/CSS 8
<!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
INSA - ASI TechnoWeb : HTML/CSS 9
<?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
INSA - ASI TechnoWeb : HTML/CSS 10
<!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
INSA - ASI TechnoWeb : HTML/CSS 11
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
INSA - ASI TechnoWeb : HTML/CSS 12
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
INSA - ASI TechnoWeb : HTML/CSS 13

<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
INSA - ASI TechnoWeb : HTML/CSS 14
<table>
<tr> <!-- Table row -->
<th>Nom col</th> <!-- Table header -->
<th>Nom col 2</th>
</tr>
<tr>
<td>Bla bla</td> <!-- Table data -->
<td>123</td>
</tr>
</table>
LES BALISES : TABLEAU
INSA - ASI TechnoWeb : HTML/CSS 15
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
INSA - ASI TechnoWeb : HTML/CSS 16
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
INSA - ASI TechnoWeb : HTML/CSS 17

Balise de dbut :
<commande[ attribut1=valeur1[ attribut2=valeur2 ...]]> Balise de n : </
commande>

Balise autofermante :
<commande[ attribut1=valeur1[ attribut2=valeur2 ...]] />
LES ATTRIBUTS
INSA - ASI TechnoWeb : HTML/CSS 18

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
INSA - ASI TechnoWeb : HTML/CSS 19

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
INSA - ASI TechnoWeb : HTML/CSS 20

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
INSA - ASI TechnoWeb : HTML/CSS 21

Avant, les HTML entities :


&eacute;
&egrave;

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
INSA - ASI TechnoWeb : HTML/CSS 22
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
INSA - ASI TechnoWeb : HTML/CSS 23
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
INSA - ASI TechnoWeb : HTML/CSS 24
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
INSA - ASI TechnoWeb : HTML/CSS 25
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
INSA - ASI TechnoWeb : HTML/CSS 26
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
INSA - ASI TechnoWeb : HTML/CSS 27
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
INSA - ASI TechnoWeb : HTML/CSS 28
<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
INSA - ASI TechnoWeb : HTML/CSS 29
EXEMPLE COMPLET DE FORMULAIRE
INSA - ASI TechnoWeb : HTML/CSS 30
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
INSA - ASI TechnoWeb : HTML/CSS 31
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
INSA - ASI TechnoWeb : HTML/CSS 32
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
INSA - ASI TechnoWeb : HTML/CSS 33

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
INSA - ASI TechnoWeb : HTML/CSS 34
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
INSA - ASI TechnoWeb : HTML/CSS 35
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;
}
+ =
INSA - ASI TechnoWeb : HTML/CSS 36
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
INSA - ASI TechnoWeb : HTML/CSS 37
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
INSA - ASI TechnoWeb : HTML/CSS 38

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/
INSA - ASI TechnoWeb : HTML/CSS 39

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
INSA - ASI TechnoWeb : HTML/CSS 40

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