Développement web avec XHTML et CSS

Transcription

Développement web avec XHTML et CSS
Pierre Dorbais
Table des matières
I
Fond avec XHTML
3
1
Une page minimale
3
2
Les commentaires
3
3
Paragraphes
3
4
Titres
3
5
Saut de ligne et ligne horizontale
4
6
Mise en valeur
4
7
Listes
4
7.1
7.2
4
4
Liste à puces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Liste numérotée . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
Tableau
4
9
Les liens
5
9.1
9.2
9.3
9.4
Lien
Lien
Lien
Lien
simple vers une autre page
interne à une page . . . . .
vers un autre site . . . . .
pour envoyer un mail . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5
5
5
6
10 Les images
6
II
7
Forme avec CSS
TABLE DES MATIÈRES
TABLE DES MATIÈRES
11 Mettre en forme avec CSS
11.1
11.2
11.3
11.4
7
Les commentaires . . . . . . . . . . . . . .
Mise en forme sur toutes les balises . . . .
Mise en forme sur une balise en particulier
Styles personnalisés avec les classes . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
12 Mise en forme du texte
7
7
8
8
8
12.1 Alignement . . . . . . . . . . .
12.2 Les polices . . . . . . . . . . . .
12.3 La taille . . . . . . . . . . . . .
12.3.1 En pixels . . . . . . . .
12.3.2 Avec le nom de la taille .
12.3.3 En em . . . . . . . . . .
12.3.4 En pourcentage . . . . .
12.4 Mise en valeur . . . . . . . . . .
12.4.1 Gras et italique . . . . .
12.4.2 Minuscules et majuscules
12.4.3 Décoration . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
13 Couleur et fond
9
9
9
9
10
10
10
10
10
11
11
11
13.1 Couleur du texte . . . . . . . . . . . . . . .
13.1.1 Avec le nom des couleurs . . . . . . .
13.1.2 Avec les codes couleurs héxadécimaux
13.2 Couleur du fond . . . . . . . . . . . . . . . .
2
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
11
11
12
12
4
Première partie
Fond avec XHTML
1
Une page minimale
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Titre de mon site</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
</body>
</html>
2
Les commentaires

3
Paragraphes
<p>Un premier paragraphe</p>
<p>Un deuxième paragraphe</p>
4
Titres
<h1>Un
<h2>Un
<h3>Un
<h4>Un
<h5>Un
<h6>Un
titre
titre
titre
titre
titre
titre
de
de
de
de
de
de
taille
taille
taille
taille
taille
taille
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
3
TITRES
8
5
Saut de ligne et ligne horizontale
N'oubliez pas comment on note les balises auto-fermantes.
<br /> 
<hr /> 
6
Mise en valeur
<em>Texte en italique</em>
<strong>Texte en gras</strong>
7
7.1
Listes
Liste à puces
<ul>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>...</li>
</ul>
7.2
Liste numérotée
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>...</li>
</ol>
8
Tableau
<table>
<tr> 
<td>a1</td> 
<td>a2</td>
</tr>
<tr>
4
TABLEAU
9
LES LIENS
<td>b1</td> 
<td>b2</td>
</tr>
</table>
9
Les liens
9.1
Lien simple vers une autre page
Nous avons deux pages : page1.html et page2.html. Pour faire un lien à partir
de la page1 vers la page2.
<a href="page2.html">Cliquez ici pour aller vers la page 2</a>
Ajout d'une info-bulle
<a href="page2.html" title="Vers la page 2">Cliquez ici pour
aller vers la page 2</a>
9.2
Lien interne à une page
Dans une même page, on peut pointer vers une "ancre".
<a href="#chap3">Aller vers le chapitre 3</a>
...
...
...
...
...
...
<h2 id="chap3">Chapitre 3</h2>
On peut bien sûr combiner.
<a href="page2#chap4">Aller vers le chapitre 4 de la page 2</a>
9.3
Lien vers un autre site
<a href="http://www.google.fr/">Aller chez Google</a>
5
9.4
Lien pour envoyer un mail
9.4
10
LES IMAGES
Lien pour envoyer un mail
<a href="mailto:[email protected]">Écrivez moi pour vos questions</a>
Un clic sur ce lien, ouvre le client de messagerie par défaut avec l'adresse indiquée
dans le champ "A :".
10
Les images
Pour insérer un image, si par exemple j'ai une image qui s'appelle photo.png.
<img src="photo.png" alt="ma super photo" /> 
src
alt
permet d'indiquer le chemin de l'image
qui est obligatoire en xhtml, permet d'acher un texte alternatif si l'image ne
peut être achée.
Ajout d'une info-bulle
avec le paramètre title.
Comme pour les liens, on peut ajouter une info-bulle
<img src="photo.png" alt="ma super photo" title="Comme elle est
belle ma photo!" />
Pour faire une image cliquable, il sut de mettre une image
à la place d'un texte dans un lien.
Image cliquable
<a href="page2.html"><img src="photo.png" alt="ma super photo"
title="Aller vers la page 2" /></a>
6
11
METTRE EN FORME AVEC CSS
Deuxième partie
Forme avec CSS
11
Mettre en forme avec CSS
Avec CSS, on va mettre en forme nos pages (couleurs etc.). Pour cela on crée
un chier (par exemple style.css) qu'on va lier à nos pages html.
Dans le html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Titre de mon site</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css"
href="style.css" />
</head>
<body>
<p>bla bla bla</p>
</body>
</html>
Dans les chiers css, on écrit de cette manière :
élément
{
propriété: valeur;
propriété: valeur;
}
11.1
Les commentaires
/* Un commentaire */
11.2
Mise en forme sur toutes les balises
/* Je centre systématiquement le texte */
7
11.3
*
{
}
12
MISE EN FORME DU TEXTE
text-align: center;
11.3
/* Je veux que les paragraphes soient écrits en rouge */
p
{
color: red;
}
/* Je veux que les titres h1 et h2 soient soulignés */
h1, h2
{
text-decoration: underline;
}
11.4
Styles personnalisés avec les classes
CSS
/* Pour les choses importantes, je veux que ça soit en grand et en rouge */
.important
{
font-size: large;
color: red;
}
HTML
<p class="important">Attention !!!!</p>
12
Mise en forme du texte
Pour la mise en forme du texte, les exemples montreront une mise en forme sur
les paragraphes (balise <p>), mais on peut bien sûr les utiliser sur d'autres.
8
12.1
Alignement
12.1
p
{
}
12
Alignement
text-align: center; /* Le texte est centré */
Les diérentes propriétés :
center pour centrer
right pour aligner à droite
left pour aligner à gauche
justify pour justier
12.2
p
{
}
Les polices
font-family: "Comic Sans MS";
Notez qu'il faut mettre entre guillemets les noms de polices contenant plusieurs
mots.
Les polices "standard" que vous pouvez utiliser sans problème :
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
12.3
12.3.1
p
{
}
La taille
En pixels
font-size: 18px;
9
12.4
Mise en valeur
12.3.2
p
{
}
12
Avec le nom de la taille
font-size: large /* Le texte en grand */
Les diérentes tailles :
xx-small : minuscule
x-small : très petit
small : petit
medium : moyen
large : grand
x-large : très grand
xx-large : très très grand
12.3.3
p
{
}
font-size: 1.5em; /* Une fois et demi la taille normale */
12.3.4
p
{
}
12.4.1
}
En pourcentage
font-size: 50%; /* La moitié de la taille normale */
12.4
p
{
En em
Mise en valeur
Gras et italique
font-weight: bold; /* texte en gras */
font-style: italic; /* texte en italique*/
10
13
12.4.2
p
{
}
COULEUR ET FOND
Minuscules et ma juscules
text-transform: uppercase; /* tout en majuscules */
Les diérentes valeurs :
uppercase : en majuscules
lowercase : en minuscules
capitalize : la première lettre de chaque mot en majuscule (exemple pour
les titres en anglais)
none : rien
12.4.3
p
{
}
Décoration
text-decoration: underline; /* le texte est souligné */
Les diérentes valeurs :
underline : souligné
line-through : barré
overline : ligne au dessus
blink : clignotant
none : rien
13
13.1
p
{
}
Couleur et fond
Couleur du texte
color: blue; /* texte en bleu */
13.1.1
Avec le nom des couleurs
white : blanc
grey : gris
silver : argent
11
13.2
Couleur du fond
}
COULEUR ET FOND
black : noir
red : rouge
maroon : marron
lime : vert clair
green : vert
yellow : jaune
olive : jaune foncé
aqua : bleu clair
blue : bleu
navy : bleu marine
fuschia : rose
purple : violet
teal : bleu/vert
13.1.2
p
{
13
Avec les codes couleurs héxadécimaux
color: #ff0000; /* texte en rouge */
Pour connaître les codes couleurs associés à une couleur en particulier, visitez
le site http://www.code-couleur.com.
13.2
Couleur du fond
body
{
backgroud-color: green; /* le fond de toute la page est vert */
}
/* Ca marche aussi pour les autres balises */
p
{
background-color: blue; /* les paragraphes sont surlignés en bleu */
}
12

Développement web avec XHTML et CSS

Transcription

Documents pareils

Offre stage

Page html vierge

Création web - Sites de vente en ligne - Sites vitrine

tutoriel rapide sur la création de site Web

Memento HTML

Qu`est-ce qu`un webmaster - Pluriels Formation

BEP CSS

Gestion Électronique de Documents et XML

PROJET Le site de la 306 cabriolet

Son CV - David Marchesson

CV - Undergraphic, création de site Internet à Amboise (37)

Le design orienté objet - Jean

Outil de l`Internet - LAMSADE - Université Paris

Intégration et publication avec XML