• 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
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>
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>
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>
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)
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>
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
Elément de ligne
• <em> …</em> mis en emphase
• <a….> </a> hypertexte
• <img…> insertion d’une image
• <br> saut de ligne
• <hr> ligne horizontale
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="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">
<!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">
…
<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
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>
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>
<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>
html
body
h1
h2
p
h2
p
<!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>
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>
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;}
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
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>
<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;}
mafeuille3b.css (ex10b.html)
ex10b.html:
<p id=
"dernier"
> Un nouveau paragraphe
pour voir
mafeuille3b.css:
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
A faire….
• Gerer les fontes
• Affichage des images
• Tableaux et tables
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" />
..
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>
<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>