HTML Css XHTML

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
grer la prsentation du HTML
2
ex1.html
<html>
<head>
<title>M2 Protocoles Internet </title>
</head>
<body>
<h1> Ceci est le dbut 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 infrieur 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>troisime paragraphe</em> avec du texte.
Si le texte dpasse la ligne ce n'est pas les retours la ligne du
texte source qui sont conservs. De nouveaux retours la ligne seront
insrs l o le navigateur considrera que c'est ncessaire.</p>
</body>
</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>
ex2.html
</head>
<html>
<head>
</head>
<body>
<img src= vache.gif"> et autre</p>
</body>
</html>
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
Construction dune page

Elment en-ligne, lment de bloc
Chaque lment de bloc saffiche toujours
comme si il y avait un saut de ligne avant et
aprs
Un lment en ligne saffiche dans le cours du
texte de la page
Elment de bloc
<h1> </h1> titre (6 niveaux)

<p></p> paragraphe
<div></div>
Listes:
<ol></ol> liste numrote
<ul></ul> liste non numrote
<li></li> pour un lment de liste
<dl></dl> liste de dfinitions (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=iso8859-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 premire est < html>.
Avec & suivi d'une entit vous aurez tous les symboles spciaux.
Pour consulter les entits, 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"> troisime exemple</a></li>
</ol>
<hr>
<dl>
<dt> un autre type liste</dt>
<dd> avec indentation des lments</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. Cest du
texte certaines parties peuvent tre
emphases, etc.
bordure
marge
Contenu
10
Elment de ligne
<em> </em> mis en emphase

<a.> </a> hypertexte
<img> insertion dune image
<br> saut de ligne
<hr> ligne horizontale
<span>...</span> structuration
11
Attributs
Permettent de donner un lment des informations
supplmentaires
Ex: ex5.html
Pour les listes:
<ol start="3">
Pour llment 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
spciaux. Pour consulter les entits, 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">
troisime exemple</a> dans une nouvelle fentre </li>
</ol>
14

<hr>
<p><strong> La mme chose en gras pour avoir un long texte.
</strong></p>
<p> Pour revenir <a href="#debut">au dbut </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 tte"/> 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
h1,h2
{background-color: yellow;
}
{font-family:times;
}
18
<body>
<h1>Cours </h1>
<h2> HTML </h2>
<p>
Avec & suivi d'une <em> entit </em> vous aurez tous les symboles
spciaux.
Pour consulter les entits, 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>
hritage</em>
des proprits suivant la strucyure du document
</p>
</body>
</html>
19
html
body
h1
h2
h2
p
em
p
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 crer une feuille de style valable pour plusieurs

documents.
Attention cest 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=iso8859-1" />
<link type="text/css" rel="stylesheet" href="mafeuille.css" />
</head>
<body>
Ex8.html
.
</body>
</html>
23
Slecteur: particulariser le style des

lments (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 spciaux.
Pour consulter les entits, 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> hritage</em>
des proprits 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 lments sur la

fentre
Le navigateur utilise le flux pour effectuer la mise en
pages des lments (X) HTML.
Commence au dbut du fichier (X)HTML.
Les lments de bloc sont disposs de haut en bas au
fur et mesure de la lecture
Les lment de ligne se placent les uns cot des
autres depuis le coin en haut gauche jusquau coin en
bas droite
Sauf si la taille a t spcifie, les lments occupent la
largeur de la page. La mise en page sadapte la
modification de la taille de la fentre.
26
Attribut float
Lorsque le navigateur rencontre lattribut
float il le place suivant sa valeur gauche
ou droite et le retire du flux
Les blocs se comportent comme si cet
lment nexistait pas
MAIS les lments en ligne sont
positionns en respectant les limites de
llment flottant
27
<body>
<div id="gauche">
<h2 class="titre"> CSS </h2>
<p class="sec">
En CSS, il y a de nombreux paramtres possibles. Il y a <em> hritage</em>......
des proprits suivant la structure du document.
</p>
</div>
<h2 class="titre"> HTML </h2>
<p>
Avec & suivi d'une .
Pour consulter les entits, 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 lment 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
Vrification
Par W3Chttp://jigsaw.w3.org/cssvalidator
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">
Prnom: <input type="text" name="prnom"
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 prnom <br/>
Prnom: <input type="text" name="prnom" 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

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Css XHTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML-CSS-XHTML

HTML: HyperText Markup Language

Construction dune page

<h1> </h1> titre (6 niveaux)

<dl></dl> liste de dfinitions (balise titre dt,

Maintenant il y a le contenu qui

<em> </em> mis en emphase

Pour llment ancre <a>

<a href="ex2.html" title=" M2 protocoles Internet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

On peut crer une feuille de style valable pour plusieurs

Inclusion dans un document (X)HTML

Slecteur: particulariser le style des

body {background-color: #d2b48c;

Placement des lments sur la

body {background-color: #d2b48c;

Gerer les fontes

<input type="submit" value="Envoyer" />

<h2> Acheter vous aujourd'hui? </h2>

Vous aimerez peut-être aussi