HTML-CSS-XHTML
XHTML: eXtensible HTML xhtml 1.0 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 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
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> 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 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
ex2.html Css pour le style Balise style avec un attribut <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> <title>M2 Protocoles Internet </title> <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> 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
http://validator.w3.org ex2VALID.html Certif <!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 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
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
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) 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
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>
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>
espacement Maintenant il y a le contenu qui occupe toute cette partie. C’est du texte certaines parties peuvent être emphasées, etc…. bordure marge Contenu
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 On peut inclure deselement de ligne dans un bloc Pour créer un élement de ligne
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" >) 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
<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"> Mais parfois www, ou default.htm Reference relative
<!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>
… <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>
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 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
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 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
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 < 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> 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 </body> </html>
html body h1 h2 p h2 p em em 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
<!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>
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
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> 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 ) Ex8.html
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 </body> </html> On a aussi <h1 class="titre alph abeta "> le titre h1 aura les pop defini pour les 3 classes Ex9.html
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;} 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 mafeuille2.css
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. Antre les blocs des sauts de page
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
<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> Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir.
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;} Possibilites de positionner le flottant en absolu, fixe
mafeuille3b.css (ex10b.html) <p id="dernier"> Un nouveau paragraphe pour voir mafeuille3b.css: #dernier {clear:left;}
Pseudo classe Un élément peut avoir plusieurs états Un lien <a> peut être: non visité, a:link visité, a:visited survolé, a:hover …
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>
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}
Vérification Par W3Chttp://jigsaw.w3.org/css-validator validCSS.html
A faire…. Gerer les fontes Affichage des images Tableaux et tables ….
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>
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>
<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 /> … 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>