Html css-xhtml

• 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

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

<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>
</head>
<body>
<img src=« vache.gif"> et autre</p>
</body>
</html>

4

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>
<img src="vache.gif" alt=" une vache"> et autre</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

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

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

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" >
body {background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
}
</style>
</head>
8

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

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

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

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

• <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

<!DOCTYPE….
<body>
<a id="debut"></a>
<h1>Cours HTML</h1>
<p>
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">
<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

…
<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

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" />
margin-left: 20%;
margin-right: 20%;
}
</style>
</head>
<body>
…
</body>
</html>
Ex6.html

16

http://validator.w3.org
<head>

<title>M2 Protocoles Internet: exemple 2 </title>
margin-left: 20%;
margin-right: 20%;
}
</style>
</head>
<body>
<img src="matete.gif" alt="ma tête"/> et autre</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

CSS

• p {background-color: yellow;
}
• h1,h2 {font-family:times;
}

18

<body>
<h1>Cours </h1>
<h2> HTML </h2>
<p>
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

html

body

h1 h2 p h2 p

em em

20

<head>
color: red;
margin-left: 20%;
margin-right: 20%;
}
p {background-color: yellow;
}
em {color : black;
}
h1,h2 {font-family:times;
}

</style>
</head>

21

• On peut créer une feuille de style valable pour plusieurs
documents.
• Attention c’est du css pas du html pas <style>
• Ex:
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

Inclusion dans un document (X)HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<link type="text/css" rel="stylesheet" href="mafeuille.css" />
</head>
<body> Ex8.html
….
</body>
</html>
23

Sélecteur: particulariser le style des
éléments (attribut class et id)
<head>
<link type="text/css" rel="stylesheet" href="mafeuille2.css" />
</head>
<body>
<h1 class="titre"> Cours </h1>
<h2 class="titre"> HTML </h2>
<p>
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

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

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

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

<body>
<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>
Avec & suivi d'une ….
Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts">
</p>
<p> Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir. Un nouveau paragraphe
pour voir. Un nouveau paragraphe pour voir.

28

mafeuille3.css (ex10.html)
color: red;
margin-left: 20%;
margin-right: 20%;
}

#gauche { color: green;
width: 200px;
float: left;}

29

mafeuille3b.css (ex10b.html)
ex10b.html:
<p id="dernier"> Un nouveau paragraphe
pour voir

mafeuille3b.css:
#dernier {clear:left;}

30

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

ex11.html
<body>
<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

color: red;
margin-left: 20%;
margin-right: 20%;
}
.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

Vérification
• Par W3Chttp://jigsaw.w3.org/css-
validator

validCSS.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énom"
value="" />
POST possible
<input type="submit" value="Envoyer" />
..
</form>
36

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

<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

Html css-xhtml

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Html css-xhtml (20)

Html css-xhtml

Notes de l'éditeur