Html css-xhtml

718 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
718
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • HTML contenu structure du texte Apres des debuts ou ily avait des pages specifiques pour Netscape et internet explorer creation d’un seul standard par le consortium World Wide Web W3C (html 4 ) version actuelle (et définitive? 4.1) Né en 99 Dans les versions anciennes inclusion dans les balises html (dans les attributs d’indication sur le style : fonte, couleur) c’est maintenant bani et mis dans les feuilles de style css. Separation strict de la structure et de la presentation. Xhtml depuis 2000 XML +html XML eXtensible Markup Language autre langage de balise
  • Expliquer (ex1.html Balise: <x> se termine par </x> sauf certaines par exemple <img>,<br> Element= balise ouvrante+ Contenu + balise fermante L’idée est que si il n’y a pas de contenu (comme br qui sert a saute une ligne <br> </br> serait idiot) on parle d’un élément vide Element= balise ouvrante+ Contenu + balise fermante Attribut par ex dans la balise img Le fichier commence par la balise <html> Ensuite on sépare la tête (head) du corps (body) Dans le head information concernant la page web Dans le body ce que l’on voit dans le navigateur Les espaces multiples et les tabulations ne se retrouverons pas dans la page affichée
  • Css pour le style Balise style avec un attribut Body décrit que le style s’applique a tout ce qui est dans l’élément body du html
  • Le navigateuir affiche comme il peut, meme s’il manque des balises ou que le html n’est pas tout a fait correct. Si on ne dit pas quel html, on utilise on passe en evaluation quirk mode Si on ne dit pas quel html on utilise on passe en evaluation quirk (capricieux) mode  resultat variable suivant le navigateur Attention si le html utilise des attribut pour faire de la présentation html 4.01 transitoire Si les pages sont conformes elles s’affichent + vite et de maniere plus uniforme. Passage a la validation Doctype precise le type de html ici 4.01 strict (il y a aussi du 4.01 Transitional plus souple et du xhtml) Meta est pour indiquer quels sont les caracteres (les notres ou chinois ,japonais….) Dans img il faut l’attribut alt :ce qui sera affiche si le navigateur ne peut pas afficher l’image Au passage faire remarquer les attriburs de img Autre format d’image (le + moderne ) sinon il y a jpg et gif. jpg plutot pour les photos et gif plutot pour les noir et blanc contrasté Le format png est sensé prendre le meilleur des 2 . On fixe la taille de la photo par wiidth et lenght
  • Html 4.01 strict demande a ce que tous les elements de body soient des blocs. Dans un pargaraphe <p> pad d’ A l’interieur des li on peut mettre du texte des elt en lignes ou des blocs (li est un elt de bloc) Div pour créer un bloc structuration logique
  • On peut inclure deselement de ligne dans un bloc Pour créer un élement de ligne
  • Pour start donne le demarrage de la numerotation Pour l’ancre Title: description textuelle de la page vers laquelle mene le lien, utilisé par les lecteurs d’ecran vocaux pour mal voyants. Certain navigateur affiche une bulle avec ce texte (on suggere que ce soit celui du head de la page ou mène ce lien) target: ouverure de l apage dans une autre fenetre Si a la place de _blanck on met un identificateur toutes les targets de meme id s’ouvriront dans la même fenêtre. Id: identification d’un emplacement , qu’on pourra ensuite adresse au moyen de # Ref une url c’est a dire un protocole , un nom de site web et un chemin absolu vers la ressourceex http://www.liafa.jussieu.fr/~cd certaines parties peuvent être manquantes et sont alors prise par defait
  • Mais parfois www, ou default.htm Reference relative
  • Le xhtml est du xml, On peut donc y inclure de nouvelles balises. On peut aussi reutiliser toutes les documents ecrit en xml Et le fichier sera lisible par tout logiciel comprenant le xml Proche du html 4.1 strict difference doctype est dans les élements vides a la fin \\> Ex meta, img Le xhtml est un peu en avance sur les navigateurs, sera traite comme du html en mode quirk  genere des incoherences dan sl’affichage
  • Le navigateuir affiche comme il peut, meme s’il manque des balises ou que le html n’est pas tout a fait correct. Si on ne dit pas quel html, on utilise on passe en evaluation quirk mode Si on ne dit paas quel html on utilise on passe en evaluation quirk (capricieux) mode  resultat variable suivant le navigateur Attention si le html utilise des attribut pour faire de la présentation html 4.01 transitoire Si les pages sont conformes elles s’affichent + vite et de maniere plus uniforme. Passage a la validation Doctype precise le type de html ici 4.01 strict (il y a aussi du 4.01 Transitional plus souple et du xhtml) Meta est pour indiquer quels sont les caracteres (les notres ou chinois ,japonais….) Dans img il faut l’attribut alt :ce qui sera affiche si le navigateur ne peut pas afficher l’image Au passage faire remarquer les attriburs de img Autre format d’image (le + moderne ) sinon il y a jpg et gif. jpg plutot pour les photos et gif plutot pour les noir et blanc contrasté Le format png est sensé prendre le meilleur des 2 . On fixe la taille de la photo par wiidth et lenght
  • Permet de definir le style, Le style s’applique a un element Si on considere l’arbre de la structure du document Il y a heritage du style (en general par ex heitage de la fonte de lacouleur mais pas encadrement s’il est demandé) Si qqchose defini dans body, s’applique a atous les blocs de body et ainsi de suite La def +precise recouvre la def – precise De nombreux parametres
  • Link liaison avec une info externe Type on dit que c’est une feuille de style css Rel relation entre le fichier xhtml et ce a quoi on lie ici il s’agit d’une feuille de style ( on peut en mettre plusieurs )
  • On a aussi <h1 class="titre alph abeta "> le titre h1 aura les pop defini pour les 3 classes
  • p?.sec s’applique a lelement identifié p.sec ou sec (p.sec quand la feuille s’applique a plusieurs pages) .titre s’applique a tous les éléments de la classe .titre On peut aussi faire appartenir un elt à plusieurs class il recupere les styles de chaque classe Selecteur On peut aussi mettre .titre {font-family:symbol, Geneva, Arial} Dans ce cas la utilise symbol si pas disponible Geneva si pas disponible Arial etc… On peut aussi mettre div h2 {..}s’appliquera a tous les h2 inclus dans des div
  • Antre les blocs des sauts de page
  • Possibilites de positionner le flottant en absolu, fixe
  • 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

    ×