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. 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>
3
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 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
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
5
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
6
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. 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. 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>
9
10. espacement
Maintenant il y a le contenu qui
occupe toute cette partie. C’est du
texte certaines parties peuvent être bordure
emphasées, etc….
marge
Contenu
10
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. 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" >)
12
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>
14
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
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
17
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>
19
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. • 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. 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. 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
24
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. 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. 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. <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.
28
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>
38
Editor's Notes
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
