1 HTML-CSS-XHTML. 2 HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages html4.01 XHTML: eXtensible HTML xhtml 1.0 CSS: Cascading

1

HTML-CSS-XHTML

2

• HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages

html4.01

• XHTML: eXtensible HTML

xhtml 1.0

• CSS: Cascading Style Sheets. Sert a gérer la présentation du HTML

3

ex1.html<html><head>

<title>M2 Protocoles Internet </title></head><body>

<h1> Ceci est le début du cours, avec un grand titre</h1><p> Pour faire le premier paragraphe avec du texte et autre</p><h2> Ceci est un titre de niveau inférieur il y a 6 niveaux </h2><p> Pour faire le second paragraphe avec une image

<img src=« vache.gif"> et autre</p><p> Pour faire le <em>troisième paragraphe</em> avec du texte.Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire.</p>

</body></html>

4

ex2.html<html><head>

<title>M2 Protocoles Internet exemple2 </title><style type="text/css">

body { background-color: #d2b48c;margin-left: 20%;margin-right: 20%;font-family: sans-serif;

}</style>

</head><html><head>

<title>M2 Protocoles Internet </title></head><body>


<img src=« vache.gif"> et autre</p><p> Pour faire le <em>troisième paragraphe</em> avec du texte.Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire.</p>

</body></html>

5

http://validator.w3.org<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" ><title>M2 Protocoles Internet: exemple 2 </title><style type="text/css">….</style>

</head><body>


<img src="vache.gif" alt=" une vache"> et autre</p><p> Pour faire le <em>troisième paragraphe</em> avec du texte.Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire.</p><p> <img src="valid-html401.png" alt="Valid HTML 4.01 Strict" height="31" width="88"></p><p> <img src="rien.png" alt="Valide" height="31" width="88"></p>

</body></html>

ex2VALID.html Certif

6

Construction d’une page

Elément en-ligne, élément de bloc– Chaque élément de bloc s’affiche toujours

comme si il y avait un saut de ligne avant et après

– Un élément en ligne s’affiche dans le cours du texte de la page

7

Elément de bloc

• <h1>… </h1> titre (6 niveaux)• <p>…</p> paragraphe• <div>…</div>• Listes:

– <ol>…</ol> liste numérotée– <ul>…</ul> liste non numérotée

<li>…</li> pour un élément de liste

– <dl>…</dl> liste de définitions (balise titre dt, description dd)

8

ex4.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" ><title>M2 Protocoles Internet </title><style type="text/css">

body {background-color: #d2b48c;margin-left: 20%;margin-right: 20%;font-family: sans-serif;

}</style>

</head>

9

ex4.html<body><h1>Cours HTML</h1>

<p>En HTML il y a des balises, la première est < html>. Avec & suivi d'une entité vous aurez tous les symboles spéciaux.Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts">

www.unicode.org/charts </a>.<ol>

<li>Pour renvoyer vers le <a href="ex1.html"> premier exemple</a></li>

<li>Pour renvoyer vers le <a href="ex2.html">second exemple</a> </li><li>Pour renvoyer vers le <a href="ex3.html"> troisième

exemple</a></li></ol><hr><dl>

<dt> un autre type liste</dt><dd> avec indentation des éléments</dd>

<dt> le titre </dt><dd> et sa description</dd>

</dl></p>

</body></html>

10

Maintenant il y a le contenu qui occupe toute cette partie. C’est du texte certaines parties peuvent être emphasées, etc….

espacement

bordure

marge

Contenu

11

Elément de ligne

• <em> …</em> mis en emphase

• <a….> </a> hypertexte

• <img…> insertion d’une image

• <br> saut de ligne

• <hr> ligne horizontale

• <span>...</span> structuration

12

Attributs

Permettent de donner à un élément des informations supplémentaires

Ex: ex5.html• Pour les listes:

<ol start="3"> • Pour l’élément ancre <a>

<a href="ex2.html" title=" M2 protocoles Internet exemple 2" >

<a target="_blank" href="ex3.html"> <a id="debut" ><a href="#debut" > (<a href="ref#debut" >)

13

• <a href="ex1.html">• <a href="../ex.html#debut">• <a href="http://www.liafa.jussieu.fr/~cd"> ~cd/public_html/index.html

• <a href="http://www.liafa.jussieu.fr/~cd/Master_SRI.html">

14

<!DOCTYPE….<body><a id="debut"></a><h1>Cours HTML</h1>

<p>En HTML il y a des balises, la première est < html>. Avec & suivi d'une entité vous aurez tous les symboles spéciaux. Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts">

www.unicode.org/charts </a>.<ol start="3">

<li>Pour renvoyer vers le <a href="ex1.html"> premier exemple</a> </li>

<li>Pour renvoyer vers le <a href="ex2.html" title=" M2 protocoles Internet exemple 2" >second exemple</a> </li>

<li>Pour renvoyer vers le <a target="_blank" href="ex3.html"> troisième exemple</a> dans une nouvelle fenêtre </li></ol>

15

…<hr>

<p><strong> La même chose en gras pour avoir un long texte.…</strong></p><p> Pour revenir <a href="#debut">au début </a></p>

</body>

</html>

16

XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>M2 Protocoles Internet </title><style type="text/css">


}</style>

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

Ex6.html

17

http://validator.w3.org<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>M2 Protocoles Internet: exemple 2 </title><style type="text/css">


}</style>

</head><body>


<img src="matete.gif" alt="ma tête"/> et autre</p><p> Pour faire le <em>troisième paragraphe</em> avec du texte.Si le texte dépasse la ligne ce n'est pas les retours à la ligne du texte source qui sont conservés. De nouveaux retours à la ligne seront insérés là où le navigateur considérera que c'est nécessaire.</p><p> <img src="valid-xhtml10.png" alt="Valid HTML 4.01 Strict" height="31" width="88"/></p><p> <img src="rien.png" alt="Valide" height="31" width="88"/></p>

</body></html>

ex2VALIDX.html CertifX

18

CSS

• p {background-color: yellow;

}

• h1,h2 {font-family:times;

}

19

<body><h1>Cours </h1><h2> HTML </h2><p>

En HTML il y a des balises, la première est < html>. Avec & suivi d'une <em> entité </em> vous aurez tous les symboles spéciaux.Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts"> www.unicode.org/charts </a>.

</p><h2> CSS </h2><p>

En CSS, il y a de nombreux parametres possibles. Il y a <em> héritage</em> des propriétés suivant la strucyure du document

</p></body></html>

20

html

body

h1 h2 p h2 p

em em

21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>M2 Protocoles Internet </title><style type="text/css">

body {background-color: #d2b48c;color: red;margin-left: 20%;margin-right: 20%;font-family: sans-serif;

}p {background-color: yellow;}em {color : black;}h1,h2 {font-family:times;}

</style></head>

22

• On peut créer une feuille de style valable pour plusieurs documents.

• Attention c’est du css pas du html pas <style>• Ex:

body {background-color: #d2b48c;color: red;margin-left: 20%;margin-right: 20%;font-family: sans-serif;}

p {background-color: yellow;}em {color : black;}h1,h2 {font-family:times;}

mafeuille.css

23

Inclusion dans un document (X)HTML


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>M2 Protocoles Internet </title><link type="text/css" rel="stylesheet" href="mafeuille.css" />

</head><body>….</body></html>

Ex8.html

24

Sélecteur: particulariser le style deséléments (attribut class et id)


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>M2 Protocoles Internet </title><link type="text/css" rel="stylesheet" href="mafeuille2.css" />

</head><body><h1 class="titre"> Cours </h1><h2 class="titre"> HTML </h2><p>

En HTML il y a des balises, la première est < html>. Avec & suivi d'une <em> entité </em> vous aurez tous les symboles spéciaux.Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts"> www.unicode.org/charts </a>.

</p><h2 class="titre"> CSS </h2><p id="sec">

En CSS, il y a de nombreux parametres possibles. Il y a <em> héritage</em> des propriétés suivant la strucyure du document

</p></body></html>

Ex9.html

25

body {background-color: #d2b48c;color: red;margin-left: 20%;margin-right: 20%;font-family: sans-serif;}

p {background-color: yellow;}p#sec {background-color: green;}em {color : black;}.titre {font-family:symbol;}

mafeuille2.css

26

Placement des éléments sur la fenêtre

• Le navigateur utilise le flux pour effectuer la mise en pages des éléments (X) HTML.

• Commence au début du fichier (X)HTML.• Les éléments de bloc sont disposés de haut en bas au

fur et à mesure de la lecture• Les élément de ligne se placent les uns à coté des

autres depuis le coin en haut à gauche jusqu’au coin en bas à droite

• Sauf si la taille a été spécifiée, les éléments occupent la largeur de la page. La mise en page s’adapte à la modification de la taille de la fenêtre.

27

Attribut float

• Lorsque le navigateur rencontre l’attribut float il le place suivant sa valeur à gauche ou à droite et le retire du flux

• Les blocs se comportent comme si cet élément n’existait pas

• MAIS les éléments en ligne sont positionnés en respectant les limites de l’élément flottant

28

<body><h1 class="titre"> Cours </h1><div id="gauche"> <h2 class="titre"> CSS </h2><p class="sec">

En CSS, il y a de nombreux paramètres possibles. Il y a <em> héritage</em>......des propriétés suivant la structure du document.

</p></div><h2 class="titre"> HTML </h2><p>

En HTML il y a des balises, la première est < html>. Avec & suivi d'une ….Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts"> www.unicode.org/charts </a>.

</p><p> Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir. Un nouveau paragraphe

pour voir. Un nouveau paragraphe pour voir.

29

mafeuille3.css (ex10.html)


}

#gauche { color: green;width: 200px;float: left;}

30

mafeuille3b.css (ex10b.html)

ex10b.html:

<p id="dernier"> Un nouveau paragraphe pour voir

mafeuille3b.css:

#dernier {clear:left;}

31

Pseudo classe

• Un élément peut avoir plusieurs états

• Un lien <a> peut être: – non visité, a:link– visité, a:visited– survolé, a:hover– …

32

ex11.html<body><h1 class="titre"> Cours </h1><h2 class="titre"> HTML/XHTML </h2>

<p>Pour renvoyer vers le <a href="ex1.html"> premier exemple</a> </p>

<div id="chetat"> <p>Pour renvoyer vers le <a target="bb" href="ex2.html">second exemple</a> </p><p>Pour renvoyer vers le <a href="ex3.html">troisieme exemple</a> </p><p>Pour renvoyer vers le <a href="www.google.fr">vers google</a> </p><p><ul>Un lien peut avoir plusieurs états: <li><span class="etat"> non visité </span> <span class="affiche"> a:link </span> </li><li><span class="etat"> visité </span> <span class="affiche"> a:visited </span> </li><li><span class="etat"> survole </span> <span class="affiche"> a:survole</span> </li></ul></p></div></body>

33


}.etat { font-family:times;

color:black}

.affiche {font-family: geneva;color:white}

#chetat a:link {color: green;}#chetat a:visited {color: white;}#chetat a:hover {color:yellow}

34

Vérification

• Par W3Chttp://jigsaw.w3.org/css-validator

validCSS.html

35

A faire….

• Gerer les fontes

• Affichage des images

• Tableaux et tables

• ….

36

Formulaire

<form action="http://www.liafa.jussieu.fr/~cd/affichp.php" method="GET">

Prénom: <input type="text" name="prénom" value="" />

POST possible

<input type="submit" value="Envoyer" />..</form>

37

Ex12.html<body>

<form action="http://www.liafa.jussieu.fr/~cd/affichp.php" method="GET">

<p> Votre nom et prénom <br/>

Prénom: <input type="text" name="prénom" value="Carole" /> <br />Nom: <input type="text" name="nom" value=""/> <br/>

</p>…..<p><textarea name="commentaire" rows="15" cols="20"></textarea></p>

38

<h2> Acheter vous aujourd'hui? </h2><p><input type="radio" name="unouautre" value="oui" />Oui <br /><input type="radio" name="unouautre" value="non" /> Non <br /><input type="radio" name="unouautre" value="on" /> Peut-être <br />

</p>….<p id="gauche"><input type="checkbox" name="choix" value="A" /> Le bon choix <br /><input type="checkbox" name="choix" value="B" /> Le meilleur <br /><input type="checkbox" name="choix" value="C" /> Le moins cher <br />

</p>…<p>Par qui voulez vous être servi?:<select name="nompourselect"><option value="Pierre"> Pierre Bleu</Option><option value="Paul"> Paul Blanc </Option><option value="Jacques"> Jacques Gris </Option><option value="Adeline"> Adeline Rouge </Option></select>

Documents

1 HTML-CSS-XHTML. 2 HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages html4.01 XHTML: eXtensible HTML xhtml 1.0 CSS: Cascading