Conception Internet

Transcription

Conception Internet

Conception Internet
HTML Statique
Licence 1ère Année
Fabrice Lefèvre
2005-2006
Listes
9 Liste à puce :
@
• <UL type="circle|square|disc"> entrées… </UL>
• <LI> entrée </LI> pour chaque entrée de la liste
9 Liste numérotée :
• <OL type="I|i|A|a" start="numéro">
entrées… </OL>
• <LI value="numéro"> entrée </LI> pour chaque entrée de la liste
9 Liste hiérarchisée (definitions) :
• <DL> entrées… </DL>
• <DT> entrée </DT> pour chaque entrée de la liste
• <DD> blabla </DT> descriptif pour l’entrée correspondante
Conception Internet - L1S1
43
Tableaux (1)
9 <TABLE> </TABLE>
9 Objectifs des tableaux sous HTML :
• structurer des infos en ligne et colonne
• structurer des éléments dans une page (images, texte,
objects, …)
9 Tableau constitué de lignes :
• <TR> </TR> pour chaque nouvelle ligne du tableau
9 Ligne constituée de cellules :
• <TD> </TD> pour chaque cellule d’une ligne
9 Cellule de titre :
• <TH> </TH>
44
Tableaux (2)
9 Attributs:
<HTML>
@
<HEAD>
<TITLE>Exemple de tableau</TITLE>
</HEAD>
<BODY>
<BODY bgcolor="blue" text="magenta">
<H3>Exemple de tableau</H3>
<TABLE BORDER="1">
<TR><TH>col 1</TH><TH>col 2</TH><TH>col 3</TH></TR>
<TR><TD>1*1</TD><TD>2*1</TD><TD>3*1</TD></TR>
<TR><TD>1*2</TD><TD>2*2</TD><TD>3*2</TD></TR>
</TABLE>
</BODY>
</HTML>
Exemple d’attributs @
•
•
•
•
•
•
•
•
•
•
WIDTH
HEIGTH
ALIGN
BORDER
FRAME
BGCOLOR
COLSPAN
ROWSPAN
CELLSPACING
CELLSPADDING
9 Autres :
• <CAPTION>
45
Tableaux (3)
9 Réglages des espaces
46
Tableaux (4)
9 Prédéfinition des colonnes :
@
• accélère le chargement des grands tableaux
• formatage précis
• largeur absolue :
− <COLGROUP> <COL width="80"> ...
</COLGROUP>
• largeur propotionnelle :
− <COLGROUP> <COL width="3*"> ...
</COLGROUP>
• factorisation :
− <COLGROUP width="80" span="3" >
47
Tableaux (5)
9 Entêtes et pieds de pages :
@ @
•
•
•
•
entête définie par <THEAD> </THEAD>
pied de page par <TFOOT></TFOOT>
corps du tableau par <TBODY></TBODY>
les 3 éléments doivent êtres utilisés toujours dans cet
ordre
• chacun peut comporter plusieurs lignes <TR></TR>
• plusieurs groupes peuvent être définis avec
<TBODY></TBODY>
− si <TABLE rules="groups"> seules les lignes entre les
groupes sont visibles (none|groups|rows|cols|all)
• gestion de l'impression
48
Frames (1)
9 Fractionnement d’une page de manière à afficher plusieurs
documents HTML
9 <FRAMESET> </FRAMESET>
• Attribut COLS="taille en pixels ou %"
• Attribut ROWS="taille en pixels ou %"
9 <FRAME> : définit un nouveau cadre
• Attribut SRC="page.htm"
• Attribut NAME= " Nom de la frame"
9 <NOFRAME></NOFRAME> : définit ce qui doit être affiché
si le navigateur n’accepte pas l’utilisation des frames !
9 <BODY> n’apparaît que dans la partie <NOFRAME> dès
l’utilisation de <FRAMESET>
49
Frames (2)
<HTML>
@
<HEAD>
<TITLE>Exemple de Frame</TITLE>
</HEAD>
<FRAMESET COLS="60%,40%">
<FRAMESET ROWS="33%,33%,33%">
<FRAME src="liste.htm" name="liste">
<FRAME src="table.htm" name="table">
<FRAME src="table2.htm" name="table2">
</FRAMESET>
<FRAME src="body.htm" name="body">
</FRAMESET>
<NOFRAME>
<BODY>
page sans frame
</BODY>
</NOFRAME>
</HTML>
9 Attributs:
•
•
•
•
•
NORESIZE
SCROLLING
FRAMEBORDER
BORDER
…
9 Autres :
• <IFRAME>: cadre
intègré
50
Frames (3)
9 <IFRAME> : définit un nouveau cadre
intègré
@
• n'est pas inclus dans un FRAMESET
• s'intègre/s'incorpore dans le flux de texte
• comparable à <IMG> avec un contenu HTML au lieu
d'une image
51
Frames (4)
9 Avantages :
• séparation/partitionnement logique de l'affichage
• pas de redondance dans le projet : éléments commun ne
sont pas répétés (menus, copyright...)
• visualisation simultanée d'une action et de son résultat
9 Inconvénients :
•
•
•
•
•
manipulation complexe
navigateurs ne supportant pas les cadres
cadres et résolution d'écran
temps de chargement
liaisons problématiques à des sous pages (signets...)
52
Images (1)
9 <IMG SRC="chemin absolu ou relatif de @
l’image">
9 Affichage par le navigateur de l’image dans la
dimension d’origine => utilisation de :
• Attribut WIDTH="Valeur" en pixels
• Attribut HEIGHT="Valeur" en pixels
9 Autres attributs:
• ALT, ALIGN, BORDER, HSPACE, VSPACE, …
53
Images (2)
9 3 formats supportés: GIF, JPEG, PNG
9 Attention au temps de chargement des images
• fonction de la taille en pixels
•
"
du taux de compression (JPEG ou PNG)
73ko
228ko
30ko
6ko
54
Images (3)
• Complexité de l'image (16M vs 256 couleurs)
9 GIF
• Transparence
• Animation (GIF89a)
55
Images (2)
9 Images réactives
@
• forme la plus simple consiste à utiliser l'image pour
représenter un lien
• 2 formes :
− server-side : les coordonnées de la souris sur l'image sont
transmises au serveur (<IMG ... ISMAP ...>)
− client-side : une carte (map) de l'image est fournie qui
identifie les liens par zone (<IMG ...USEMAP="#carte"
...>)
o carte : <MAP NAME="carte"> zones </MAP>
o zones : <AREA SHAPE="RECT|CIRCLE|POLY"
ID="..." COORDS="..." HREF="..." >
56
Multimedia (1)
9 <EMBED SRC="chemin absolu ou relatif du contenu
multimedia">
9 Résultat dépend de nombreux facteurs (par exemple du
type de fichier, de la configuration matérielle chez
l'utilisateur, des plugiciels installés et des programmes
étrangers disponibles connus du navigateur)
9 Quand le navigateur Web ne peut pas traiter le fichier, il
doit produire un message d'erreur et afficher à la place du
fichier le symbole des données ne pouvant être affichées
9 Un lien vers le contenu multimedia peut suffire pour le son
(cf. infra) aux formats classiques
57
Multimedia (2)
9 Formats classiques pour l’audio :
•
•
•
•
•
•
•
•
@
AIF (Mac)
U-law (Unix)
MPEG
Midi
Wave (MS)
Real Audio (streaming/transit)
Windows Media Audio
Ogg Vorbis
9 Pour la video : MPEG, Quicktime, Realvideo,
Windows Media File
58
Multimedia (3)
<HTML>
@
<HEAD>
<TITLE>Exemple de Multimedia/Flash</TITLE>
</HEAD>
<BODY>
<H1>Une partie du "jeu du ver" avec Flash </H1>
<NOEMBED>
<P>Vous manquez quelque chose !</P>
</NOEMBED>
<EMBED SRC="nibbles.swf" quality="high" scale="exactfit" menu="false"
bgcolor="#000080" width="600" height="400" swLiveConnect="false"
type="application/x-shockwaveflash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_V
ersion=ShockwaveFlash">
</BODY>
</HTML>
59
Multimedia (4)
9 <OBJECT classid="url"></OBJECT> @
permet de généraliser l'introduction de tout fichier
externe
9 classid peut être un nom de fichier ou un code
• <OBJECT classid="java:zticker.class"> pour Java
• <OBJECT classid="CLSID:D27CDB6E-AE6D-11cf96B8-444553540000" > pour Flash (et <PARAM>
donne le fichier à jouer)
60
Multimedia (4)
9 Type MIME
@
• <OBJECT DATA="html.txt" TYPE="text/plain" >
9 Paramètres des exécutables :
• <PARAM NAME="..." VALUE="..."
9 Syntaxe uniforme, évite duplication de balises
pour tous les types de fichiers
61
Conception de Site Internet
Licence 1ère Année
Partie 4 - Feuilles de styles CSS
Fabrice Lefèvre
2005-2006
Feuilles de styles CSS (1)
9 Avec les feuilles de style, le consortium du W3C
revient à la conception initiale :
le HTML structure le texte, la Feuille de Style le présente
9 À partir de la version 4 : on peut définir des
feuilles de style (Style Sheets)
9 On définit globalement des instructions de mise en
forme
9 Les instructions peuvent être rassemblées dans un
document indépendant
9 Ce document peut être associé à un ou plusieurs
documents HTML
63
9 Application des styles :
• Appel à l'attribut style
− <h2 style="text-decoration:overline">
• Feuille de style interne
− possible de spécifier une feuille de style "interne" entre
deux balises <style> et </style>.
− <head><style type="text/css">(...)</style></head>
• Feuille de style externe
− appel d'un fichier externe (.css) via la meta-balise <link>,
− <head><link rel="stylesheet" href="../styles/site.css"
type="text/css"></head>
9 Cascading Style Sheets :
• style externe << style interne << style attribut
64
Feuilles de style CSS (2)
/* Le fond est toujours en blanc */
BODY {background-color: white}
/* Couleur rouge pour ancres et en-têtes */
A, H1, H2, H3 {color: #ca0000}
CAPTION {font-size:large;
color: #ca0000}
/* Classes pour alterner les couleurs des lignes */
TR.A0 {background-color:white}
TR.A1 {background-color:yellow}
.attention {background-color:red;
color:white}
65
9 Des instructions globales:
A, H1, H2, H3 {color: #ca0000}
• le style sera appliqué à toutes les balises
9 Des classes pour raffiner les styles
TR.A0 {background-color:white}
• on peut appliquer <TR CLASS="A0">
9 Les classes peuvent être génériques :
.attention {background-color=red}
• Ex : <B CLASS="attention">
66
Feuilles de style CSS (4)
<HTML>
@
<HEAD>
<TITLE>Tableau HTML</TITLE>
<LINK REL=stylesheet HREF="ExCSS.css" TYPE="text/css">
</HEAD>
<BODY>
<TABLE BORDER=4 CELLSPACING=2 CELLPADDING=2>
<CAPTION><B>Mes films</B></CAPTION>
<TR><TH>Titre<TH>Année<TH>Nom Réalisateur</TR>
<TR CLASS=A0><TD>Alien<TD>1979<TD>Scott
<TR CLASS=A1><TD>Vertigo<TD>1958<TD>Hitchcock
<TR CLASS=A0><TD>Van Gogh<TD>1991<TD>Pialat
</TABLE>
<B CLASS=’attention’>Et voilà !</B>
</BODY>
</HTML>
67
XHTML !
9 Norme rapprochant HTML du langage XML
9 Permet l’édition de sources HTML par des éditeurs XML
9 Des contraintes :
• Spécification d’un DOCTYPE particulier
• Toutes les balises doivent être fermées. Si pas de balise de
fermeture prévue => <BAL />
• Ordre d’imbrication des balises à respecter :
− <B><I> texte </B></I> interdit !
• Elément et attribut doivent être écrits en minuscule (XML sensible
à la casse)
• Minimisation de l’attribut interdite : checked =>
checked="checked"
• …
68
Conclusion
9 Langage HTML plus que largement utilisé !
9 Standard => portable malgré certains
détournements des éditeurs de navigateurs !
9 Evolution rapide mais a atteint ces limites si
utilisé tout seul !
9 Utilisation du DHTML ! Pas un standard, mais
juste l’association du langage HTML avec
d’autres langages (Javascript, PHP …) pour le
rendre dynamique !
• Module - Sites Dynamiques au L1S2
69
DOCTYPE
"-//IETF//DTD HTML Level 1//EN"
"-//IETF//DTD HTML//EN"
"-//IETF//DTD HTML 3.0//EN"
"-//W3C//DTD HTML 3.2//EN"
"-//W3C//DTD HTML 4.0 Transitionnal//EN"
"-//W3C//DTD HTML 4.0//EN"
HTML 1.0
HTML 2.0
HTML 3.0
HTML 3.2
HTML 4.0
HTML 4.0
" ... "
Par défaut
9 Définition du type de document ie standard pris en
compte dans la page
9 Optionnel car non utilisé par les navigateurs !!!
70

Conception Internet

Transcription

Documents pareils

La propriété BACKGROUND-COLOR

Html 05 - HTML facile - Pagesperso

HTML Statique - Laboratoire Informatique d`Avignon

HTML/CSS - Travaux Pratiques 2

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

bookmarks - Nathalie Vanassche

offre d`emploi planet form

VENDS RAQUETTES HEAD

Exercices Html, Css, Protocoles

Cours d`Informatique