HTML/CSS - Travaux Pratiques 3

Transcription

HTML/CSS - Travaux Pratiques 3
Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS
pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux pour créer vos fichiers.
Chaque fichier doit avoir l’extension .html et la structure suivante :
Syntaxe
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title> ... </title>
</head>
<body>
...
</body>
</html>
Une fois qu’une page est terminée, il est nécessaire de vérifier si elle est valide en utilisant le validateur
W3C sur :
http://validator.w3.org
Par ailleurs, les sites qui peuvent vous être utiles sont :
— alsacreations at http://www.alsacreations.com (site français)
— W3School at http://www.w3schools.com
1
Exercice (sélecteurs de type)
1. Écrire une page contenant deux en-têtes <h1> avec pour chacune d’entre elles une liste nonordonnée telle que par exemple :
1. Films préférés
— Citizen Kane
— Rois et Reines
— Vendredi 13
2. Livres préférés
— Le rouge et le noir
1
— Le choix de Sophie
— La chute
2. Créer une feuille de style relative à cette page et modifiant la forme pour avoir :
— règle de sélecteur body : un fond de couleur rose
— règle de sélecteur h1 : les en-têtes <h1> centrés, de couleur vert claire et soulignés
— règle de sélecteur ul : puces carrées pour les éléments de la liste
Solution: selecteurSimple.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Sélecteurs de types simples</title>
<style type="text/css">
body {
background-color: pink;
}
h1 {
color: crimson;
text-align: center;
text-decoration: underline;
}
ul {
list-style-type: square;
}
</style>
</head>
<body>
<h1> Films préférés </h1>
<ul>
<li> Citizen Kane </li>
<li> Rois et Reines </li>
<li> Vendredi 13 </li>
</ul>
<h1> Livres préférés </h1>
<ul>
<li> Le rouge et le noir </li>
<li> Le choix de Sophie </li>
<li> La chute </li>
</ul>
</body>
</html>
2
Exercice (sélecteurs d’id + pseudo-éléments)
Écrire une page comportant deux paragraphes au format brut, et permettant d’obtenir par CSS
le résultat indiqué par la figure suivante. Plus précisément, en utilisant des sélecteurs d’id, procédez
pour que :
— le premier paragraphe soit décalé sur sa première ligne de 1cm (par rapport aux autres lignes),
entouré d’une bordure double et avec le texte écrit en majuscule ;
— le second paragraphe commence par une lettre rouge de très grande taille, la première ligne
étant en majuscule (mais pas les autres).
2
Solution: styleParagraphe.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Style de Paragraphes</title>
<style type="text/css" >
#p1 {
text-indent:1cm;
border-style:double;
text-transform:uppercase;
}
#p2:first-letter {
color:red;
font-size:40px;
}
#p2:first-line {
text-transform:uppercase;
}
</style>
</head>
<body>
<p id="p1">Le Corps de la page Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis eros dolor, venenatis vitae, pretium ut, suscipit nec, lectus.
</p>
<p id="p2">Le Corps de la page Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis eros dolor, venenatis vitae, pretium ut, suscipit nec, lectus.
</p>
</body>
</html>
Une petite indication : les pseudo-éléments
p::first-letter { color:yellow; }
L’écriture précédente permet d’écrire en jaune la première lettre de chaque élément <p>. Bien
entendu vous pouvez le faire également pour les paragraphes d’une classe donnée (ici une classe
appelée cjaune) comme suit :
3
p.cjaune::first-letter { color:yellow; }
ou un élément précis identifié par son id (ici un élément avec un attribut id dont la valeur est
idel) :
#idel::first-letter { color:yellow; }
3
Exercice (pseudo-classes)
Écrire une feuille de style qui change la couleur des liens en fonction de leur état :
— Italique Bleu si le lien n’est pas encore visité
— Gras Bleu lorsque le lien est survolé par la souris
— Normal Vert lorsque le lien a été visité
Solution: styleLiens.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Style de Liens</title>
a { color:blue; }
a:visited { color:green; }
a:hover { color:blue; font-weight:bold; }
</style>
</head>
<body>
<h1> Quelques Liens </h1>
<p> <a href="http://www.google.fr">Google</a> <br /> </p>
<p> <a href="http://fr.selfhtml.org">Selfhtml</a> <br /> </p>
<p> <a href="http://intranet">Intranet</a> <br /> </p>
</body>
</html>
4
Exercice (sélecteurs de classe)
1. Écrire une page contenant un tableau dans lequel vous mettrez divers produits ainsi que leurs
prix tel que par exemple :
Article
Bic
Feutre
Pochette
Gomme
Prix
1
1.3
0.3
0.5
2. Écrire une feuille de style de façon à avoir une ligne bleu clair et une ligne bleu foncé. Pour
cela, vous allez devoir utilisez des classes.
3. Par ailleurs, lorsque la souris survolera une ligne, les caractères de celle-ci seront affichés en
gras et elle sera affichée avec un fond blanc.
4
Solution: table.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Style de Tables</title>
table {
background-color:#efefef;
width:350px;
border:solid 1px #999999;
}
.bleuc { color:rgb(0,0,80); }
.bleuf { color:rgb(0,0,220); }
tr:hover { font-weight:bold; background-color:white; }
</style>
</head>
<body>
<table>
<caption>Catalogue</caption>
<tr class="bleuc">
<th>Article</th>
<th>Prix</th>
</tr>
<tr class="bleuf">
<td>Bic</td>
<td>1</td>
</tr>
<tr class="bleuc">
<td>Feutre</td>
<td>1.3</td>
</tr>
<tr class="bleuf">
<td>Pochette</td>
<td>0.3</td>
</tr>
<tr class="bleuc">
<td>Gomme</td>
<td>0.5</td>
</tr>
</table>
</body>
</html>
5
Images
1. Positionnez une image au centre de la fenêtre de votre navigateur comme fond d’une page
HTML.
2. Modifiez la question précédente de façon que l’image soit fixe, même en cas de défilement de la
page.
3. Écrivez une feuille de style qui permette de positionner une image dans le coin en haut à gauche
de votre navigateur, le texte situé sur la page sera masqué par cette image.
4. Modifiez la feuille de style précédente afin de permettre au texte d’être affiché au dessus de
l’image.
Une petite indication : position et Z-index Pour les 2 premières questions ci-dessus, vous
utiliserez les propriétés background-... afin de placer votre image. Pour les 2 dernières, vous
utiliserez les propriétés CSS z-index et position conjointement avec les balises <img> et <p>.
5
Solution:
body {
background-image:url("penguin.jpeg");
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}
----body {
background-image:url("penguin.jpeg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
----img {
position:absolute;
top:0px; left:0px;
z-index:5;
}
----img {
position:absolute;
top:0px; left:0px;
z-index:1;
}
#p1 {
position:relative;
top:0px; left:0px;
z-index:4;
}
6
Listes
Écrire une page avec trois niveaux de listes non ordonnées pour lesquelles en utilisant les styles on
obtienne (comme indiqué par la figure suivante) :
— le premier niveau en gras avec des puces rondes
— le second niveau en italique avec des disque
— le troisième niveau, normal avec des puces carrées
6
Solution: styleListe.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Style de Listes</title>
ul { list-style-type:circle; font-weight:bold; }
ul ul { list-style-type:disc; font-style:italic; font-weight:normal; }
ul ul ul { list-style-type:square; font-weight:normal; font-style:normal; }
</style>
</head>
<body>
<ul>
<li>Thé
<ul>
<li>De Chine
<ul>
<li>Cerise</li>
<li>Cassis</li>
</ul>
</li>
<li>Vert</li>
</ul>
</li>
<li>Café
<ul>
<li>Noir
<ul>
<li>Sucré</li>
<li>Serré</li>
</ul>
</li>
<li>Au Lait</li>
</ul>
</li>
</ul>
</body>
</html>
Une petite indication : les sélecteurs de position Dans les feuilles de style, on peut définir un
style pour une balise donnée à condition qu’elle se trouve dans une autre balise. On peut par exemple
définir le style pour toutes les balises <ul> comme ceci
ul { color:red; }
Mais pour celles qui se trouvent dans un autre balise <ul>, on peut rajouter ceci
7
ul > ul { color:blue; }
Cela nous permet de définir le style des balises <ul> de second niveau.
7
Tableaux
Écrire une page avec un tableau comme indiqué par la figure suivante.
Solution: styleTable.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Style de Tables</title>
body { color:#000000; background-color:#ffffff; }
h1 { font-size:18pt; }
table {
background-color:#efefef;
width:350px;
font-family:arial, verdana, sans-serif;
}
caption {
font-weight:bold;
text-align:left;
color:#666666;
}
th {
height:50px;
font-weight:bold;
text-align:left;
background-color:#cccccc;
}
td, th { padding:5px; }
td.code {
8
width:150px;
font-family:courier, courier-new, serif;
font-weight:bold;
text-align:right;
vertical-align:top;
}
</style>
</head>
<body>
<table>
<caption>Font properties</caption>
<tr>
<th>Property</th>
<th>Purpose</th>
</tr>
<tr>
<td class="code">font-family</td>
<td>Specifies the font used.</td>
</tr>
<tr>
<td class="code">font-size</td>
<td>Specifies the size of the font used.</td>
</tr>
<tr>
<td class="code">font-style</td>
<td>Specifies whether the font should be normal, italic, or oblique.</td>
</tr>
<tr>
<td class="code">font-weight</td>
<td class="last">Specifies whether the font should be normal, bold,
bolder, or lighter.</td>
</tr>
</table>
</body>
</html>
9

HTML/CSS - Travaux Pratiques 3

Transcription

Documents pareils

Html 05 - HTML facile - Pagesperso

La propriété BACKGROUND-COLOR

DUT SRC - Webchronique

TP2 - Validation HTML

Exercices Html, Css, Protocoles

1- balises du squelette 2-dans le head 3-dans le body 4

offre d`emploi planet form

HTML/CSS - Travaux Pratiques 2

Les sites Internet dynamiques