5.TIS2 - HTML et CSS

Transcription

Projet Base de Données – Génie Logiciel
HTML et CSS
Fabrice Dubost
[email protected]
BDGL – TIS2 – 2008/2009 - F Dubost
1
Cadre
Cadre pédagogique
pédagogique
Objectifs :
– savoir construire une page HTML
– savoir utiliser une feuille de style
Durée :
– 2h00
2
1.
1. Concepts
Concepts de
de base
base
3
15
15 ans
ans d’histoire
d’histoire
Le World Wide Web Consortium (W3C) émet des
recommandations qui définissent l’HyperText Markup Language.
Quelques dates :
– 1993 : HTML 1.0
– 1995 : HTML 2.0 (images, tableaux, formulaires)
– 1996 : HTML 3.2 (images liens, applets,
JavaScript)
– 1999 : HTML 4.1 (frame, multimédia)
4
Objectifs
Objectifs :: hyperliens
hyperliens et
et portage
portage universel
universel
Des liens entre documents
Un résultat indépendant de la machine interprété
par un navigateur.
5
Les
Les balises
balises pour
pour structurer
structurer l’information
l’information
<p> Ceci est un paragraphe illustrant l'usage des balises</p>
<p><b>Ceci est un paragraphe en gras illustrant l'usage des
combinaisons de balises</b></p>
Résultat
6
Les
Les attributs
attributs :: compléter
compléter ou
ou modifier
modifier le
le comportement
comportement
des
des balises
balises
<p align="center">Ceci est un paragraphe au centre de la
page, illustrant un usage des attributs</p>
Résultat
7
Une
Une entête
entête et
et un
un corps
corps
<html>
<head>
<title>Voici le titre de la page ...</title>
</head>
<body>
<p>... et voici le contenu !</p>
</body>
</html>
Résultat
8
44 contenus
contenus de
de base
base pour
pour une
une entête
entête
<html>
<head>
<title>Le titre</title>
<meta name="author" content="F.Dubost">
<meta name="keywords" content="HTML, cours">
<meta name="description" content="Cette page est un exemple
pour le cours d'HTML">
<meta name="date" content="2008-10-15T16:55:37+01:00">
<link rel="stylesheet" type="text/css" href="Cours.css">
</head>
</html>
9
Les
Les caractères
caractères spéciaux
spéciaux
< <
ù ù
> >
û û
& &
ü ü
à à
ö ö
â â
ï ï
ä ä
î î
æ æ
ç ç
é é
œ &oelig;
è è
ê ê
ë ë
10
2.
2. La
La mise
mise en
en forme
forme du
du texte
texte
11
66 niveaux
niveaux de
de titres
titres et
et de
de sous-titres
sous-titres
<h1>Titre de niveau 1</h1>
Résultat
12
Un
Un paragraphe
paragraphe n’est
n’est pas
pas une
une division
division
<p>Voici, avec la balise P, un exemple de paragraphe¨se
terminant par un retour à la ligne</p>
<p>Voici, avec la balise SPAM, un exemple de divison dans
un paragraphe.Avez vous compris ?<span lang="en">Yes ?
No ?</span></p>
<div>
<p>Voici, avec la balise DIV, un exemple de division de la
page consacré à l'explication de cette balise</p>
<div>
Résultat
13
La
La séparation
séparation par
par un
un trait
trait horizontal
horizontal ou
ou un
un saut
saut de
de ligne
ligne
<p>Voici, un paragraphe au dessus de la ligne.</p>
<hr>
<p>Voici, un paragraphe au dessous de la ligne.</p>
<p>Et voici <br> quelques <br> retour <br> à la ligne.</p>
Résultat
14
Le
Le changement
changement de
de police
police
<font face="Verdana, Arial, Helvetica, sans-serif" size="5"
color="red">Verdena, 5, rouge,</font>
<font face="Arial, Helvetica, sans-serif" size="7"
color="blue">Arial, 7, bleu,</font>
<font face="Helvetica" size="4" color="orange">Helvetica,
4, orange.</font>
Résultat
15
La
La mise
mise en
en forme
forme des
des caractères
caractères
<b> gras </b>
<i> italique </i>
<tt> police avec pas fixe </tt>
<big> taille sup</big>
<small> taille inf </small>
<s> barre </s>
<u> soulignement </u>
Résultat
16
Le
Le codage
codage des
des couleurs
couleurs
16 couleurs de base accessibles par un nom, mais d’autres
teintes en RGB
17
3.
3. Les
Les liens
liens hypertextes
hypertextes
18
Le
Le lien
lien interne
interne avec
avec la
la balise
balise <a>
<a>
Quelques attributs de la balise <a>
– Href :Hypertexte REFerence, désigne l'adresse à
atteindre par le navigateur
– name: Etiquette de l'ancre
– accesskey : touche du clavier. La combinaison "ALT +
touche" a le même effet que le clic sur le lien.
– tabindex : fixe la position de l ’élément dans l'ordre
séquentiel des tabulations.
– Title : rapide description du lien
19
33 composants
composants pour
pour une
une adresse
adresse relative
relative
Protocole : mode de dialogue utilisé pour communiquer avec
la ressource
– http:// Hyper Text Transfer Protocole, pour les pages Web.
– ftp:// File Transfer Protocole pour l ’échange de fichiers.
– mailto: courrier électronique
– file:// fichier interne
Adresse du serveur : adresse IP ou nom du serveur
– 195.220.82.108
– polytech.ujf-grenoble.fr
Chemin d ’accès : dossiers et sous-dossiers du
fichier contenant la page Web à afficher.
Extensions des fichiers contenant des pages HTML :
.htm, .html, .shtml, .asp, .aspx, .php ..
20
Une
Une adresse
adresse relative
relative par
par rapport
rapport àà quoi
quoi ??
Ressource dans le répertoire de la page d'appel
– href= "home.html".
Ressource dans un sous-répertoire du répertoire dela page
d'appel
– href= "Polytech/TIS/TIS2.html".
Ressource située dans un répertoire contenant la page
d'appel
– href="../../home.html".
Ressource située dans dans une branche latérale
– href="../../RICM/RICM2.html".
21
4.
4. Les
Les listes
listes et
et les
les tableaux
tableaux
22
La
La liste
liste àà puce
puce
<ul type="disc">
<li>Premier point avec puce "disque"</li>
<li>Second point avec puce "disque"</li>
</ul>
<ul type="circle">
<li>Premier point avec puce "cercle"</li>
<li>Second point avec puce "cercle"</li>
</ul>
<ul type="square">
<li>Premier point avec puce "carré"</li>
<li>Second point avec puce "carré""</li>
</ul>
Résultat
23
La
La liste
liste numérotée
numérotée
<ol type="1">
<li>Premier point avec chiffre</li>
<li>Second point avec chiffre</li>
</ol>
<ol type="A">
<li>Premier point avec lettre</li>
<li>Second point avec lettre</li>
</ol>
<ol type="i">
<li>Premier point avec chiffre romain</li>
<li>Second point avec chiffre romain</li>
</ol>
Résultat
24
Un
Un tableau
tableau :: déclaration
déclaration de
de la
la structure
structure
<table border="4">
<caption>Titre du tableau</caption>
<col width="200"></col>
<colgroup span ="2" width="50"></col>
<thead align ="center">
<td>Titre 1</td>
<td>Titre 2</td>
<td>Titre 3</td>
</thead>
<tfoot align ="center">
<td>Total 1</td>
<td>Total 2</td>
<td>Total 3</td>
</tfoot>
25
Un
Un tableau
tableau :: des
des lignes
lignes et
et des
des cellules
cellules
<body>
<tr>
<td>A</td>
<td>I</td>
<td>1</td>
</tr>
<tr>
<td>B</td>
<td>II</td>
<td>2</td>
</tr>
</body>
</table>
Résultat
26
Les
Les principaux
principaux attributs
attributs de
de la
la balise
balise <table>
<table>
summary : résumé du tableau
width : largeur du tableau (pixels ou % de fenêtre)
border : épaisseur de la bordure (pixels, par défaut 0)
frame : Type d’encadrement extérieur
• void : aucune, above : haut seulement,below : bas seulement,
hsides : haut et bas, vsides : gauche et droite, lhs : gauche
seulement, rhs : droite seulement, border : sur les 4 côtés
rules : Type d’encadrement intérieur
• none : aucun, groups : seulement entre les groupes de lignes et
les groupes de colonnes, rows : entre les lignes, cols : entre les
colonnes, all : partout
cellspacing: marge entre cellules (pixels)
cellpadding : marge entre le bord et le contenu de la
cellule (pixels)
27
Les
Les principaux
principaux attributs
attributs de
de la
la balise
balise <td>
<td>
rowspan : nombre de lignes concernées par la balise
courante. (0 : toutes les lignes)
colspan : nombre de colonnes concernées par la cellule
courante. (0 : toutes les cellules de la ligne courante à la
dernière ligne du <colgroup>.
align : alignement horizontal
• left, right, center, justify
valign : alignement vertical
• top : alignement en haut de la cellule, middle : alignement au
milieu de la cellule, bottom : alignement en bas de la cellule
28
5.
5. Le
Le multimédia
multimédia
29
Balise
Balise <img>
<img> pour
pour insérer
insérer des
des images
images
<img src="5.TIS2 - HTML et CSS - Exemple13 image.jpg"
alt="Angle bâtiment Polytech" width="300"
height="300">
Résultat
30
L’image
L’image réactive
réactive :: une
une «image-lien»
«image-lien»
<a href="http://www.polytech-grenoble.fr"><img src="5.TIS2 HTML et CSS - Exemple13 image.jpg" alt="Angle bâtiment
Polytech" width="300" height="300">
Résultat
31
..
.. ou
ou une
une «image-carte»
«image-carte»
<map name="Polytech">
<area shape="RECT" COORDS="109,80,179,130"
HREF="http://www.polytech-grenoble.fr/tis.html" TITLE="TIS">
<area shape="POLY"
COORDS="2,91,60,12,60,12,199,56,196,56,196,1,196,1,0,0,0,2,
0,93" HREF="http://www.polytech-grenoble.fr/ri.html"
TITLE="International">
<area shape="CIRCLE" COORDS="113,61,9"
HREF="http://www.polytech-grenoble.fr" TITLE="Accueil">
</map>
<img src="C:\Partage\Cours Polytech\TIS\TIS2\BDGL\5.TIS2 HTML et CSS - Exemple13 image.jpg" USEMAP="#Polytech"
BORDER="0">
Résultat
32
<object>
<object> :: Son,
Son, vidéo,
vidéo, applets
applets Java,
Java, ..
..
<object type="application/x-shockwave-flash »
data="http://www.polytechgrenoble.fr/plugins/Lecteur_multimedia/player_flv.swf"
width="400" height="300">
<param name="movie" value="http://www.polytechgrenoble.fr/plugins/Lecteur_multimedia/player_flv.swf"/>
<param name="FlashVars"
value="flv=http://www.polytechgrenoble.fr/IMG/flv/france3.flv& width=400&
height=300& startimage=dist/vignettes/flv.png" />
<param name="wmode" value="opaque" />
</object>
Résultat
33
6.
6. Les
Les formulaires
formulaires
34
Le
Le formulaire
formulaire et
et ses
ses composants
composants
<form action="http://www.monsiteWeb.fr" method="post">
Prénom : <input type="text" name="firstname"><br>
Nom : <input type="text" name="lastname"><br>
Email: <input type="text" name="email"><br>
<input type="radio" name="sex" value="Homme"> Male<br>
<input type="radio" name="sex" value="Femme">
Female<BR>
<input type="submit" value="Send">
<input type="reset">
</form>
Résultat
35
Principaux
Principaux attributs
attributs de
de <form>
<form> ::
présentation
présentation générale
générale
action : URL du script CGI (ou autre) fourni par le serveur,
qui traite les données recueillies. Cet attribut est obligatoire
• http : pour un traitement direct
• mailto : pour un traitement différé
methode : forme de codage des informations.
• get : Liste de valeurs accolées à l'URL séparés par « ? »
• post : Liste nom/valeur accolées à l'URL avec données par défaut
enctype : méthode MIME de codification de l'envoi.
• application/x-www-form-urlencoded : nom1=valeur1&nom2=valeur2
• text/plain : idem mais le séparateur est un retour chariot.
• multipart/form-data : fichier attaché
36
Les
Les modalités
modalités de
de saisie
saisie :: attributs
attributs de
de <input>
<input>
type : définit le type de contrôle
• text, password, chekbox, radio, submit, reset, image, button, hidden, file
name : nom du contrôle.
alt : courte description.
disabled : désactive (grise) le contrôle
accesskey : définit un raccourci clavier
37
La
La sélection
sélection avec
avec la
la balise
balise <select>
<select>
<form action="http://www.plytech-grenoble.fr" method="post">
<select name = "Choix" size = "6" multiple = "true">
<option>3I</option>
<option>Geotech</option>
<option>Materiaux</option>
<option>PRI</option>
<option>RICM</option>
<option selected = "true">TIS</option>
</select>
<input type="submit" value="Send"> <INPUT type="reset">
</form>
Résultat
38
7.
7. Les
Les frames
frames
39
Le
Le quadrillage
quadrillage de
de <frameset>
<frameset>
<html>
<head>
</head>
<frameset cols ="10%,90%" frameborder="no" border="3">
<frame name= "zone1" src="frame1.htm" >
<frameset rows="100,*" frameborder="yes" border="3"
framespacing="3" bordercolor="gray">
<frame name= "zone2" src="frame2.htm" >
<frame name= "zone3" src= "frame3.htm">
</frameset>
</frameset>
</html>
Résultat
40
Le
Le cadre
cadre de
de <frame>
<frame>
src : URL du document à charger dans le cadre
name : nom du cadre.
frameborder : présence (1) ou absence (0) d ’une bordure.
noresize : redimensionnement du cadre
scrolling : barres de défillement
• yes : toujours, no : jamais, auto : si besoin
41
La
La «lucarne»
«lucarne» <iframe>
<iframe>
<html>
<head>
<title>Page avec iframe</title>
</head>
<body>
<p> Voici une lucarne" </p>
<iframe name = "iframe1" src= "iframe1.htm" >
</body>
</html>
Résultat
42
8.
8. Les
Les feuilles
feuilles de
de style
style
43
AA chacun
chacun son
son style
style
Le style regroupe les informations de présentation de
l’information dans un document HTML
Définir un style dans une page HTML évite la répétition de
ces informations dans la page.
Définir une feuille de style évite la répétition de ces
informations dans le site ou l’application.
44
Définir
Définir le
le style
style
<html><head>
<style type="text/css" media "print" >
h1.encadre { border-width: 1; border: solid; text-align: center ;
color : blue}
p.vert { color : green; }
</style>
</ head ><body>
<h1 class="encadre">Titre avec style</h1>
<h1>Titre sans style</h1>
<p class="vert"> Vert</p>
<p>Noir</p>
<p class="vert"><font color="blue">Bleu</font></p>
</body></html>
Résultat
45
La
La feuille
feuille de
de style
style
Cascade Style Sheet : feuille de style externe, utilisables
par plusieurs pages HTML.
1.HTML
A.CSS
h1
{
text-align : center;
color : black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href= "A.css">
</head>
<body> (...) </body>
</html>
2.HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href= "A.css">
</head>
<body> (...) </body>
</html>
46
Une
Une suite
suite de
de règles
règles
h1
{
color : black;
}
h2, h3, ul
{
color : green;
}
47
Des
Des classes
classes personnalisées
personnalisées
CSS
.TexteRouge
{
color : red;
}
.TexteBleu
{
color : blue ;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="s.css">
</head>
<body>
<p class="TexteBleu">Texte bleu</p>
<ol class="TexteRouge">
<li class="TexteBleu">Elément bleu</li>
<li>Elément rouge</li>
</ol>
</body>
</html>
Résultat
48
Un
Un sélecteur
sélecteur contextuel
contextuel
CSS
h1 b, h2 b,
{
color : yellow;
}
La couleur jaune ne s’applique que aux <b> s ’ils sont euxmême contenus dans un <h1> (sélecteur avec espace entre
les balises) et aussi (regroupement avec une virgule entre
les balises) aux <b> s ’ils sont eux-même contenus dans un
<h2>
49
Pseudo-classes
Pseudo-classes // Pseudo-éléments
Pseudo-éléments
CSS
a:active {color : orange;}
a:link {color : red; font-style : italic;}
a:visited {color : green; font-weight : bold;}
a:hover {color : blue;}
p:first-letter {color : orange; font-size : 200%;font-weight : bold;}
HTML
Résultat
<html>
<head>
<link rel="stylesheet" type="text/css" href="classe.css">
</head>
<body>
<a href="#lien">Lien interne</a>
<p>Texte d'un paragraphe</p>
<p>Texte d'un autre paragraphe</p>
</body>
</html>
50
Les
Les polices
polices de
de caractères
caractères
<STYLE TYPE="text/css">
H1 {
font-family: Arial, serif;
font-size: 22pt; color: #96b9E3;
}
</STYLE>
51
Questions
Questions ??
« Je ne peux rien pour qui ne se pose pas de questions »
Confucius
52

5.TIS2 - HTML et CSS

Transcription

Documents pareils

Modèle lettre demande de formation des élus

Pierre-JULIEN DUBOST

la femme noire américaine

questionnaire qui est - Saint-Apollinaire-de-Rias

Feuille de style généralités Html 15

Maison à vendre La Monnerie-le Montel MONTAGNE THIERNOISE

Fashions-addict Juin 2014

Communication ANNONCE POUR PANNEAUX LUMINEUX