• Aucun résultat trouvé

[PPT] Cours CSS avec exemples enjeux et pratique | Cours informatique

N/A
N/A
Protected

Academic year: 2021

Partager "[PPT] Cours CSS avec exemples enjeux et pratique | Cours informatique"

Copied!
38
0
0

Texte intégral

(1)
(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

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

(4)

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>

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

(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

(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)

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

(9)

ex4.html

<body>

<h1>Cours HTML</h1> <p>

En HTML il y a des balises, la première est &lt; html&gt;.

Avec &amp; 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>

(10)

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

(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

(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" >

(13)

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

(14)

<!DOCTYPE….

<body>

<a

id="debut

"></a>

<h1>Cours HTML</h1>

<p>

En HTML il y a des balises, la première est &lt; html&gt;.

Avec &amp; 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">

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

(16)

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

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

(18)

CSS

p

{background-color: yellow;

}

• h1,h2 {font-family:times;

}

(19)

<body>

<h1>Cours </h1>

<h2> HTML </h2>

<p>

En HTML il y a des balises, la première est &lt; html&gt;.

Avec &amp; 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>

(20)

html

body

h1

h2

p

h2

p

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

(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%;

margin-right: 20%;

font-family: sans-serif;}

p

{background-color: yellow;}

em

{color : black;}

h1,h2 {font-family:times;}

mafeuille.css

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

….

</body>

(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 &lt; html&gt;.

Avec &amp; 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>

(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;}

(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

(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

(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 &lt; html&gt;.

Avec &amp; 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.

(29)

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;}

(30)

mafeuille3b.css (ex10b.html)

ex10b.html:

<p id=

"dernier"

> Un nouveau paragraphe

pour voir

mafeuille3b.css:

(31)

Pseudo classe

• Un élément peut avoir plusieurs états

• Un lien <a> peut être:

– non visité,

a:link

– visité,

a:visited

– survolé,

a:hover

(32)

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>

(33)

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}

(34)

Vérification

• Par

W3Chttp://jigsaw.w3.org/css-validator

(35)

A faire….

• Gerer les fontes

• Affichage des images

• Tableaux et tables

(36)

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" />

..

(37)

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>

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

Références

Documents relatifs

D’une manière plus évidente, la forte autocorrélation spatiale négative entre proportion d’employeurs et niveaux de pauvreté est surtout le fruit de la très forte concentration

On a montr´e comment une hausse du taux de cotisation peut produire des effets transitoires ambigus en mati`ere d’offre travail (il existe des configurations o`u l’offre de

While I will be focusing on the material results of implementing that philosophy in Cuba, and show how Martí and Guevara contributed to the epistemic framework that has

Modificações morfológicas da copa do cafeeiro são observadas quando se faz variações no espaçamento na linha e no número de haste por planta, essas interações podem contribuir

Arthropod appendages and filamentous algae are also present (Briggs et al., 2018). The Saint-Joachim site represents a snapshot of Ordovician Period fauna based on the sympatric

The virus load in the plants was estimated using three different molecular diagnosis methods, i.e., extraction of PMeV 12 kbp dsRNA from papaya latex, amplifica- tion of PMeV RDRP

Objetivou-se com este trabalho avaliar o desempenho de galinhas caipiras criadas em manejo agroecológico, a partir de dados de produção de ovos em ciclos completos de postura, com

Il faut distinguer clairement ce que l’on peut dire en régime permanent et ce qui est relatif à la période de transition. En régime permanent, le taux d’intérêt se fixe de