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>
<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>
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>
<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" 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">
body {background-color: #d2b48c;margin-left: 20%;margin-right: 20%;font-family: sans-serif;
}</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">
body {background-color: #d2b48c;margin-left: 20%;margin-right: 20%;font-family: sans-serif;
}</style>
</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="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
<!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><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)
<!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><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)
body {background-color: #d2b48c;color: red;margin-left: 20%;margin-right: 20%;font-family: sans-serif;
}
#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
body {background-color: #d2b48c;color: red;margin-left: 20%;margin-right: 20%;font-family: sans-serif;
}.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>