HTML-CSS-XHTML            1
• HTML: HyperText Markup Language  (Markup  balisage). Sert à structurer les  pages                                    ht...
ex1.html<html><head>   <title>M2 Protocoles Internet </title></head><body>   <h1> Ceci est le début du cours, avec un gran...
<html>                                                    ex2.html<head>     <title>M2 Protocoles Internet exemple2 </titl...
http://validator.w3.org<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><hea...
Construction d’une pageElément en-ligne, élément de bloc  – Chaque élément de bloc s’affiche toujours    comme si il y ava...
Elément de bloc•   <h1>… </h1> titre (6 niveaux)•   <p>…</p> paragraphe•   <div>…</div>•   Listes:    – <ol>…</ol> liste n...
ex4.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head>    <meta htt...
ex4.html<body><h1>Cours HTML</h1>    <p>En HTML il y a des balises, la première est &lt; html&gt;.Avec &amp; suivi dune en...
espacementMaintenant il y a le contenu quioccupe toute cette partie. C’est dutexte certaines parties peuvent être         ...
Elément de ligne•   <em> …</em> mis en emphase•   <a….> </a> hypertexte•   <img…> insertion d’une image•   <br> saut de li...
AttributsPermettent de donner à un élément des informations  supplémentairesEx: ex5.html• Pour les listes:      <ol start=...
• <a href="ex1.html">• <a href="../ex.html#debut">• <a  href="http://www.liafa.jussieu.fr/~  cd"> ~cd/public_html/index.ht...
<!DOCTYPE….<body><a id="debut"></a><h1>Cours HTML</h1>   <p>         En HTML il y a des balises, la première est &lt; html...
…<hr>   <p><strong> La même chose en gras pour avoir un long texte.   …   </strong></p>   <p> Pour revenir <a href="#debut...
XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd"><html x...
http://validator.w3.org<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11-s...
CSS•   p     {background-color: yellow;          }• h1,h2   {font-family:times;          }                                ...
<body><h1>Cours </h1><h2> HTML </h2><p>    En HTML il y a des balises, la première est &lt; html&gt;.    Avec &amp; suivi ...
html              bodyh1   h2   p          h2   p              em          em                               20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd"><html xmlns=...
• On peut créer une feuille de style valable pour plusieurs  documents.• Attention c’est du css pas du html pas <style>• ...
Inclusion dans un document (X)HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DT...
Sélecteur: particulariser le style des   éléments (attribut class et id)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric...
body {background-color: #d2b48c;               color: red;               margin-left: 20%;               margin-right: 20%...
Placement des éléments sur la               fenêtre• Le navigateur utilise le flux pour effectuer la mise en  pages des él...
Attribut float• Lorsque le navigateur rencontre l’attribut  float il le place suivant sa valeur à gauche  ou à droite et l...
<body><h1 class="titre"> Cours </h1><div id="gauche"><h2 class="titre"> CSS </h2><p class="sec">     En CSS, il y a de nom...
mafeuille3.css (ex10.html)body {background-color: #d2b48c;          color: red;          margin-left: 20%;          margin...
mafeuille3b.css (ex10b.html)ex10b.html:<p id="dernier"> Un nouveau paragraphe  pour voirmafeuille3b.css:#dernier {clear:le...
Pseudo classe• Un élément peut avoir plusieurs états• Un lien <a> peut être:  – non visité, a:link  – visité, a:visited  –...
ex11.html<body><h1 class="titre"> Cours </h1><h2 class="titre"> HTML/XHTML </h2><p>Pour renvoyer vers le <a href="ex1.html...
body {background-color: #d2b48c;                  color: red;                  margin-left: 20%;                  margin-r...
Vérification• Par W3Chttp://jigsaw.w3.org/css-  validatorvalidCSS.html                               34
A faire….•   Gerer les fontes•   Affichage des images•   Tableaux et tables•   ….                            35
Formulaire<form  action="http://www.liafa.jussieu.fr/~cd/affic  hp.php" method="GET">Prénom: <input type="text" name="prén...
Ex12.html<body>  <form action="http://www.liafa.jussieu.fr/~cd/affichp.php"  method="GET"><p> Votre nom et prénom <br/>Pré...
<h2> Acheter vous aujourdhui? </h2><p><input type="radio" name="unouautre" value="oui" />Oui <br /><input type="radio" nam...
Prochain SlideShare
Chargement dans…5
×

Html css-xhtml

780 vues

Publié le

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Html css-xhtml

  1. 1. HTML-CSS-XHTML 1
  2. 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 2
  3. 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 nest 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 cest nécessaire.</p></body></html> 3
  4. 4. <html> ex2.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 nest 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 cest nécessaire.</p></body></html> 4
  5. 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 nest 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 cest 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 5
  6. 6. Construction d’une pageElé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 6
  7. 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) 7
  8. 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> 8
  9. 9. ex4.html<body><h1>Cours HTML</h1> <p>En HTML il y a des balises, la première est &lt; html&gt;.Avec &amp; suivi dune 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> 9
  10. 10. espacementMaintenant il y a le contenu quioccupe toute cette partie. C’est dutexte certaines parties peuvent être bordureemphasées, etc…. marge Contenu 10
  11. 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 11
  12. 12. AttributsPermettent de donner à un élément des informations supplémentairesEx: 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" >) 12
  13. 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"> 13
  14. 14. <!DOCTYPE….<body><a id="debut"></a><h1>Cours HTML</h1> <p> En HTML il y a des balises, la première est &lt; html&gt;. Avec &amp; suivi dune 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> 14
  15. 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> 15
  16. 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 16
  17. 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 nest 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 cest 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 17
  18. 18. CSS• p {background-color: yellow; }• h1,h2 {font-family:times; } 18
  19. 19. <body><h1>Cours </h1><h2> HTML </h2><p> En HTML il y a des balises, la première est &lt; html&gt;. Avec &amp; suivi dune <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> 19
  20. 20. html bodyh1 h2 p h2 p em em 20
  21. 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> 21
  22. 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%; mafeuille.css margin-right: 20%; font-family: sans-serif;} p {background-color: yellow;} em {color : black;} h1,h2 {font-family:times;} 22
  23. 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> Ex8.html….</body></html> 23
  24. 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 &lt; html&gt;. Avec &amp; suivi dune <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 24
  25. 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 25
  26. 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. 26
  27. 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 27
  28. 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 &lt; html&gt;. Avec &amp; suivi dune …. 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. 28
  29. 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;} 29
  30. 30. mafeuille3b.css (ex10b.html)ex10b.html:<p id="dernier"> Un nouveau paragraphe pour voirmafeuille3b.css:#dernier {clear:left;} 30
  31. 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 –… 31
  32. 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> 32
  33. 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} 33
  34. 34. Vérification• Par W3Chttp://jigsaw.w3.org/css- validatorvalidCSS.html 34
  35. 35. A faire….• Gerer les fontes• Affichage des images• Tableaux et tables• …. 35
  36. 36. Formulaire<form action="http://www.liafa.jussieu.fr/~cd/affic hp.php" method="GET">Prénom: <input type="text" name="prénom" value="" /> POST possible<input type="submit" value="Envoyer" />..</form> 36
  37. 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> 37
  38. 38. <h2> Acheter vous aujourdhui? </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> 38

×