Structure type dun document XHTML

(1)

(2)

(3)

Structure type d

un document XHTML

<?xml version="1.0" encoding="UTF-8" ?>!

(4)

Structure type d

un document XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">!

(5)

Structure type d

un document XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">! <html xmlns="http://www.w3.org/1999/xhtml">! ! ! ! </html>!

(6)

<html xmlns="http://www.w3.org/1999/xhtml">!

<head>!

! <meta http-equiv="Content-Type" content="text/html;charset=Utf-8"/>!

! <title>Structure</title>!

</head>!

</html>!

(7)

Structure type d

un document XHTML

<html xmlns="http://www.w3.org/1999/xhtml">! <head>!

! <meta http-equiv="Content-Type" content="text/html;charset=Utf-8"/>! ! <title>Structure</title>! </head>! <body>! ! ! </body>! </html>!

(8)

<!DOCTYPE

…

> ! <html>! !<head>! ! ! !

…!

!

!…

! !</head>! ! !<body>! ! ! !…! ! ! !…! !</body>! </html>!

(9)

Balise

…

</balise>

<h1>

Texte

</h1>

< balise / >

< br / >

(10)

Attribut de balise

…

</balise>

Texte

</table>

(11)

Les données

Les textes

Les URI

Les couleurs définies par un nom ou un nombre

Les longueurs définies en pixel ou en porcent

Les types de contenus

(12)

(13)

Les entités HTML

à

é

è

ç

espace

(14)

Les URI

Les URL’s absolues

protocol://

login:pwd@

server

:port/path/file.extension?q=req&q2=req2#signet

Exemples

http://www.ulg.ac.be/

http://www.ulg.ac.be/cms/c_5000/accueil http://maps.google.fr/maps?hl=fr&tab=wl https://pour:[email protected]

(15)

Les URL’s relatives

construite en définissant un chemin depuis l’adresse du fichier

XHTML dans lequel cette URL est définie.

./ correspond au dossier actuel

../ correspond au dossier parent

(16)

(17)

Les types de contenus

text/html

contenu HTML

text/palin

texte sans mise en forme

text/css

contenu CSS

application/javascript

contenu JavaScript

image/jpeg

contenu JPEG

(18)

Encodage de caractères

ISO-8859-1

ISO-latin-1

IBM819

windows-1252

utf-8

macroman

(19)

Les commentaires

<!-- ...

-->

(20)

Balises d

entête : meta

! ! !

!

(21)

Balises d

entête : title

<title> Cours de XHTML </title>! !

Balise: < title> titre du document HTML Type : -

(22)

(23)

Les titres

Balise: < h1>,<h2>, <h3>, < h4>, <h5>, < h6> Type : bloc Attributs : <h1> Le titre 1 </h1>! <h2> Le titre 2 </h2>! <h3> Le titre 3 </h3>! <h4> Le titre 4 </h4>! <h5> Le titre 5 </h5>! <h6> Le titre 6 </h6>!

LLee ttiittrree 11!!

LLee ttiittrree 44!! LLee ttiittrree 55!! LLee ttiittrree 66! !

(24)

H1 a une valeur de 200 % par rapport à la valeur de body

H4 a une valeur de 100 % par rapport à la valeur de body

(25)

Les paragraphes

Balise: < p>

Type : bloc Attributs :

<p>!

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et

dolore magna aliqua.!

</p>

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et

(26)

La mise en évidence

Balise: <em> …. </em> mise en évidence faible Type : en ligne

Attributs :

<em> Lorem ipsum... </em>! !

<strong> Lorem ipsum... </strong>! !

Lorem ipsum ...!

!

LLoorreemm iippssuumm ...!

!

Balise : <strong> …. </strong> mise en évidence forte Type : en ligne

(27)

Information sur l'auteur

Balise : <address> …. </address> informations sur l'auteur Type : bloc

Attributs :

<address>Lorem ipsum...</address>!

(28)

Retour à la ligne et trait

Balise: <br / > retour à la ligne suivante Type : en-ligne

Attributs :

Lorem <br/> ipsum ...! Lorem !

ipsum ...! ! Lorem <hr/> ipsum ...! ! LLoorreemm!!!! iippssuumm ...! !

Balise: <hr / > trait horizontal Type : bloc

(29)

Acronyme, abréviation et définition

Balise: <acronym> …. </acronym> acronyme Type : en ligne

Attributs : title = …

<acronym title="Institut National

dAssurance Maladie Invalidité"> !

INAMI </acronym>

!

<abbr title="et caetera"> etc.</abbr>!

!

INAMI!

etc.!

!

Balise : <abbr> …. </abbr> abréviation Type : en ligne Attributs :title = … Balise : <dfn> …. </dfn> définition Type : en ligne Attributs :title = … <dfn> Lorem ipsum... <dfn>! ! Lorem ipsum...! !

(30)

Les citations

Balise: <q> …. </q> citation courte Type : en ligne

Attributs :

<q>Lorem ipsum...</q>!

!

<blockquote>Lorem ipsum...</blockquote>!

! «"Lorem ipsum …"»! ! ! !Lorem ipsum ...! !

<cite>Lorem ipsum...</cite>!

! Lorem ipsum ...! !

Balise : <cite> …. </cite> citation moyenne Type : en ligne

Attributs :

Balise : <blockquote> …. </blockquote> citation longue Type : bloc

(31)

Code, sortie, saisie clavier

Balise: <code> …. </code> code informatique Type : en ligne

Attributs :

<code>Lorem ipsum...</code>!

! <kbd>Lorem ipsum...</kbd>! !

Lorem ipsum ...

!

Lorem ipsum ...

!

<samp>Lorem ipsum...</samp>!

!

Lorem ipsum ...

_!

!

Balise : <samp> …. </samp> exemple de sortie Type : en ligne

Attributs :

Balise : <kbd> …. </kbd> saisie clavier Type : en ligne

(32)

Insertion, suppression

Balise: <ins> …. </ins> texte inséré Type : en ligne

Attributs :

<ins> Lorem ipsum... </ins>! !

<del> Lorem ipsum... </del>! !

Lorem ipsum ...!

!

Lorem ipsum ...!

!

Balise : <del> …. </del> texte supprimé Type : en ligne

(33)

Indice, exposant

Balise: <sub> …. </sub> texte en indice Type : en ligne

Attributs :

<sub> Lorem ipsum... </sub>!

<sup> Lorem ipsum... </sup>! !

Lorem ipsum ...!

Lorem ipsum ..._!

!

Balise : <sup> …. </sup> texte en exposant Type : en ligne

(34)

Les listes ordonnées (1)

Balise: <ol> liste ordonnées Type : bloc

Attributs :type, start

<ol>! !<li>Elément 1</li>! !<li>Elément 2</li>! </ol>! ! ! 1. Elément 1! 2. Elément 2! ! ! ! !

Balise: <li> élément d'une liste Type : bloc

(35)

Les listes ordonnées (2)

<ol>! !<li value="34">Elément 1</li>! !<li value="52">Elément 2</li>! !<li>Elément 3</li>! </ol> 34. Elément 1! 52. Elément 2! 53. Elément 3.! ! ! ! !

<ol type="A" start="3">!

!<li>Elément 1</li>! !<li>Elément 2</li>! </ol>! ! ! C. Elément 1! D. Elément 2! ! ! ! !

(36)

Les listes non-ordonnées

Balise: <ul> Type : bloc Attributs :type <ul>! !<li>Elément 1</li>! !<li>Elément 2</li>! </ul>! ! ! •! Elément 1! •! Elément 2! ! ! ! ! <ul type="circle">! !<li>Elément 1</li>! !<li>Elément 2</li>! </ul>! ! ! o! Elément 1! o! Elément 2! ! ! ! !

(37)

Les listes de définitions

Balise: <dl> Type : bloc Attributs : <dl>! !<dt>HTML</dt>!

!<dd>HyperText Markup Language</dd>! </dl> !

HTML!

HyperText Markup Language ! !

!

Balise: <dt> terme à définir Type : bloc

Attributs :

Balise: <dd> définition Type : bloc

(38)

(39)

Les images (1)

!

Balise: <image/> Type : en-ligne

(40)

Les images (2)

Balise: <map> Type : -

Attributs : shape, coords, href Balise: <area/>

Type : -

Attributs : shape, coords, href, title, alt

<img src="belgique.gif" alt="Photo de Belgique" usemap="#carte" border="0" />!

<map name="carte">!

!<area shape="rect" coords="221,125,250,157" href="bruxelles.html"/> !

(41)

Les images (3)

Image map avec Photoshop CS2!

! !http://www.golumfr.com/photshp/imagemap.html! ! Gimp! ! http://www.infetech.com/article.php3?id_article=159!

(42)

(43)

Les liens (1)

Balise: <a> Type : en-ligne

Attributs : href, name, target

<a href="http://www.apple.be">Visitez le site d'Apple</a>

!

<a href="pageB.html">Visitez le page B</a>

!

(44)

Les liens (2)

<a href="#suite">Aller à la suite sur la même page </a>!

...! ...!

<h1 id="suite">Ceci est la suite</h1>

!

<a href="#suite">Aller à la suite sur la même page </a>!

...! ...!

<a id="suite"/> !

(45)

(46)

Les tableaux (1)

Balise: <table> Type : bloc

Attributs :summary, border, width, cellspacing, cellpadding, frame, rules Balise: <tr> ligne d'un tableau

Balise: <td> cellule d'un tableau Type : bloc

Attributs : rowspan, colspan, width, height, align, valign Balise: <th> cellule de rubrique Type : bloc

(47)

Les tableaux (2)

<table border="1px">! !<tr>! ! !<td>Contenu de la cellule 1</td>! ! !<td>Contenu de la cellule 2</td>! !</tr>! !<tr>! ! !<td>Contenu de la cellule 3</td>! ! !<td>Contenu de la cellule 4</td>! !</tr>! </table>! ! !

(48)

Les tableaux (3)

<table border="1px" width="300px">!

!<tr>! ! !<td>Contenu de la cellule 1</td>! ! !<td>Contenu de la cellule 2</td>! !</tr>! !<tr>! ! !<td>Contenu de la cellule 3</td>! ! !<td>Contenu de la cellule 4</td>! !</tr>! </table>! ! !

(49)

Les tableaux (4)

!

(50)

!

Les tableaux (5)

!<tr>! ! !<th>Titre 1</th>! ! !<th>Titre 2</th>! !</tr>! !<tr>! ! !<td>Contenu de la cellule 1</td>! ! !<td>Contenu de la cellule 2</td>! !</tr>! </table>!

(51)

Les tableaux (6)

Balise: <caption> légende de tableau Type : bloc

(52)

Les tableaux (7)

!<caption>Légende du tableau</caption>!

!<tr>! ! !<th>Titre 1</th>! ! !<th>Titre 2</th>! !</tr>! !<tr>! ! !<td>Contenu de la cellule 1</td>! ! !<td>Contenu de la cellule 2</td>! !</tr>! </table>! ! !

(53)

Les tableaux (8)

<table cellspacing="10px" cellpadding="20px" border="1px" width="500px">!

!<tr>! ! !<td>Cellule 1</td>! ! !<td>Cellule 2</td>! !</tr>! !<tr>! ! !<td>Cellule 3</td>! ! !<td>Cellule 4</td>! !</tr>! </table>! ! !

(54)

Les tableaux (9)

!<caption>Légende du tableau</caption>!

!<tr>! ! !<th colspan="2">Titre 1</th>! !</tr>! !<tr>! ! !<td>Contenu de la cellule 1</td>! ! !<td>Contenu de la cellule 2</td>! !</tr>! </table>!! ! !

(55)

Les tableaux (10)

Balise: <thead> en-tête du tableau Type : -

Attributs

Balise: <tbody> coprs du tablea Type : -

Attributs :

Balise: <tfoot> pied du tableau Type : -

(56)

Les tableaux (11)

!<caption>Légende du tableau</caption>! <thead>! !<tr>! ! !<th>Titre 1</th>! ! !<th>Titre 2</th>! !</tr>! <thead>! <tbody>! !<tr>! ! !<td>Contenu de la cellule 1</td>! ! !<td>Contenu de la cellule 2</td>! !</tr>! </tbody>! </table>!! ! !

(57)

Les tableaux (12)

Balise: <col> en-tête du tableau Type : -

(58)

Les tableaux (13)

!<col span="2" width="100px"/>! !<tr>! ! !<td>Cellule 1</td>! ! !<td>Cellule 2</td>! ! !<td>Cellule 3</td>! !</tr>! !<tr>! ! !<td>Cellule 4</td>! ! !<td>Cellule 5</td>! ! !<td>Cellule 6</td>! !</tr>! </table>!! ! !

(59)

(60)

Les formulaires (1)

Balise: < form> Type : bloc

Attributs : action, method, enctype

<form !action="http://127.0.0.1/test.php" !

!method="get" ! !enctype="application/x-www-form-urlencoded" >! ! !....! ! !....! ! !....! </form>!

!method="post" ! !enctype="multipart/form-data" >! ! !....! ! !....! ! !....! </form>!

(61)

Les formulaires (2)

Balise: < input type="text" /> Type : en)ligne

Attributs : name, size, maxlength, value

<form action="http://127.0.0.1/test.php" method="post" >! <p>!

!

</p>!

</form>!

!

(62)

!

Les formulaires (3)

Balise: < input type="submit" /> Type : en)ligne

Attributs : name, value, id

<form action="http://127.0.0.1/test.php" method="post" >! <label>Entrez votre prénom </label> !

<input name="prénom" type="text" size="15" /> !

<br/><br/>!

!

</form>!

(63)

!

Les formulaires (4)

Balise: < input type="password" /> Type : en)ligne

Attributs : name, size, maxlength, value

!

(64)

! !

Les formulaires (5)

Balise: < label> Type : en)ligne Attributs : for

<label>Entrez votre prénom </label> !

<input name="prénom" type="text" value="blabla" size="15" maxlength="20"/>!

</p>! </form>!

(65)

!

Les formulaires (6)

Balise: < input type="radio" /> Type : en)ligne

Attributs : name, checked, value, id

<label > Cliquez ici si vous êtes abboné </label> !

<input name="aonnné" type="radio" value="ab" /> ! </p>!

(66)

<label for= "ab-bouton"> Cliquez ici si vous êtes abboné </label> !

<input name="aonnné" type="radio" value="ab" id="ab-bouton"/>! </p>!

</form>!

!

(67)

<form action="http://127.0.0.1/test.php" method="post" >!

<label> Sexe </label> <br />!

<input name="sexe" type="radio" value="homme" id="h-bouton"/>!

<label for= "h-bouton"> homme </label> <br />!

<input name="sexe" type="radio" value="femme" id="f-bouton"/>!

<label for= "f-bouton"> femme </label> <br /> ! </form>!

!

(68)

!

Les formulaires (9)

Balise: < input type="checkbox" /> Type : en)ligne

Attributs : name, checked, value, id

<label> Sous quel type d'OS travaillez-vous? </label> <br />!

<input name="Windows" type="checkbox" value="oui" id="w-bouton" /> !

<label for="w-bouton"> Windows </label> <br />!

<input name="MacOS" type="checkbox" value="oui" id="m-bouton" /> !

<label for="m-bouton"> MacOS </label> <br />!

<input name="Linux" type="checkbox" value="oui" id="l-bouton" /> !

<label for="l-bouton"> Linux </label> <br /> ! </form>!

(69)

Les formulaires (10)

Balise: < input type="reset" /> Type : en-ligne

Attributs : name, value

Balise: < input type="button" /> Type : en-ligne

(70)

Les formulaires (11)

Balise: < select> Type : bloc

Attributs : name, size, multiple

Balise: < option> Type : -

Attributs : selected, value Balise: < optgroup> Type : -

(71)

<select name="pays" >!

!<optgroup label="Europe">!

! !<option> Belgique </option>!

! !<option> France </option>!

!</optgroup>!

!<optgroup label="Asie">!

! !<option> Chine </option>!

! !<option> Japon </option>!

!</optgroup>! </select> ! </form>! ! !

Les formulaires (12)

(72)

<label>Commentaires </label><br/>!

<textarea name="commentaires" rows="5" cols="40">! !Inscrivez notre commantaire ici!

</textarea> ! </form>! ! !

Balise: < textarea> Type : en-ligne

(73)

!method="post" !

!enctype="multipart/form-data" >! !

<label>Sélectionner sur votre disque une photo à envoyer </label> !

<input type="file" name="photo" />! </form>!

!

Les formulaires (14)

Balise: < input type="file" /> Type : en-ligne

(74)

Balise: < fieldset> Type : bloc Attributs : Balise: < legend > Type : bloc Attributs :

(75)

<form action="http://127.0.0.1/test.php" method="post" >! <fieldset>!

<legend> !Données personnelles </legend>!

<label>Nom </label> !

<input name="nom" type="text" size="25" maxlength="40"/> <br />! <label>Prénom </label>!

<input name="prénom" type="text" size="25" maxlength="40" /> <br />!

</fieldset>! </form>!

Les formulaires (16)

!

(76)

Attribut tabindex

Balise a, area, button, input, object, select , textarea.!

Attribut disabled

(77)

(78)

Les objets (1)

<object !

!type="application/x-shockwave-flash" !

!data ="anim.swf" !

!width="600" height ="400">!

<param name="movie" value="anim.swf"/>!

</object>

!

Balise: <obect> Type : en-ligne

Attributs : type, data, classid, codebasse

<object !

!type="video/mpeg" ! !data="test.mpg" !

!width="320" height="255">! <param name="src" value="test.mpg">! <param name="autoplay" value="false">! <param name="autoStart" value="0">!

(79)

Les objets (2)

!id="anim" align="middle">!

<param name="allowScriptAccess" value="sameDomain" />!

<param name="allowFullScreen" value="false" />!

<param name="movie" value="anim.swf" />!

<param name="quality" value="high" />!

<param name="bgcolor" value="#ffffff" />!

! name="anim" align="middle" allowScriptAccess="sameDomain" !

! allowFullScreen="false" type="application/x-shockwave-flash" ! ! pluginspage="http://www.macromedia.com/go/getflashplayer" />!

(80)

Les objets (3)

Mpeg sur le Web! !

(81)

(82)

Les cadres (1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"!

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">!

!

</frameset>! </html>! Balise: <frameset> Type :

Attributs : rows, cols Balise: <frame/> Type : -

(83)

Les cadres (2)

!

(84)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"!

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">! <head>!

</head>!

<frameset cols="250,*" >!

<frame name="gauche" src="..."/>!

<frameset rows="150,*" >!

<frame name="haut" src="... />!

<frame name="bas" src="..."/>!

</frameset>!

</html>!

!

(85)

Les cadres (4)

!

(86)

Balises génériques

Balise: <div> ... </div>

Balise: <span> ... </span> Type : en-ligne

(87)

Balise : link

Type : -

(88)

Balise : style

!...!

</style>

!

Balise: < style> Type : -

(89)

Balise : script

Balise: <script>

Type : -

Attributs type, src

</script>

!