LIS1510 Library and Archives Automation Issues Further features of XHTML

1
LIS1510 Library and Archives Automation Issues
Further features of XHTML Stylesheets and CSS

• Andy Dawson
• Department of Information Studies, UCL
  (University of Malta 2010)

2
What we will be covering today

• A very quick look at most of the advanced
  elements of the XHTML workbook
• Image maps
• Tables
• Forms
• Frames
• Stylesheets in a little more detail
• Using colour values in XHTML and stylesheets
• More practical work on your projects!

3
Image maps

• A method for making areas of images clickable
• Client-side processed
• Overlays an invisible grid on your image the
  image map
• Map definition and image are quite separate
• Always remember to provide a textual alternative!

4
Image maps

• Assigning a map to an image
• ltimg SRC"image.gif" USEMAP"mapname"
  WIDTH"120" HEIGHT"300"gt
• Defining the map
• ltmap NAME"mapname"gt
• ltarea SHAPE"RECT" COORDS"10,10, 100,100"
  HREF"file1.htm" ALT"rectangle"gt
• ltarea SHAPE"POLY" COORDS"10,110, 20,110,
  20,200, 100,200, 20,200, 30,150, 20,120"
• HREF"file2.htm" ALTUnusual shape"gt
• ltarea SHAPE"CIRCLE" COORDS"50,250,25"
  HREF"file3.htm" ALT"circle, radius 25"gt
• lt/mapgt

5
Tables

• a useful facility
• for tables of information ?
• for laying out some page designs without CSS
• Tables need to be specified carefully
• Cells of data, within rows, within a table
• Tables are not automatically reconciled!
• Best to create blank tables in reverse and then
  populate with data

6
Using tables for page design
7
A simple table

• lttablegt
• lttrgt
• lttdgtRow 1, Col 1lt/tdgt
• lttdgtRow 1, Col 2lt/tdgt
• lt/trgt
• lttrgt
• lttdgtRow 2, Col 1lt/tdgt
• lttdgtRow 2, Col 2lt/tdgt
• lt/trgt
• lt/tablegt

8
Forms

• A tool for gathering information from users
• Provides specific prompts for information
• Data is then sent somewhere (usually to a
  computer process)
• Cant really do much without server-side
  processing

9
Structure of forms

• Forms placed anywhere inside ltbodygt element
• Can have multiple forms on a page, as long as
  each form is kept separate
• Basic structure
• ltformgt
• lt!--form elements go here--gt
• lt/formgt

10
Some other FORM elements

• Form attributes
• Method (post, or get)
• Action (e.g. mailto)
• Form controls
• Input
• type (text, submit, reset, radio, checkbox)
• size, maxlength, checked, value, name
• Textarea cols, rows, name
• Select size, multiple, name

11
Frames

• Screen split into independent sections
• a different document displayed in each section
• frame loading and the target atttribute
• Now deprecated by W3C
• bookmarking problems
• Tables and CSS quite often used to mimic some
  effects of frames without the drawbacks

12
An example
13
Creating frames

• three files are needed to create just two frames
  on the screen
• The frameset INDEX.HTM
• 1st frame
• MENU.HTM
• 2nd frame
• BODY.HTM

14
The frameset

• ltHTMLgt
• ltFRAMESET cols25,gt
• ltFRAME nameleft srcmenu.htmgt
• ltFRAME nameright srcbody.htmgt
• lt/FRAMESETgt
• ltNOFRAMESgt
• lt! ordinary HTML goes here -gt
• lt/NOFRAMESgt
• lt/HTMLgt

15
Other FRAME features

• Mixing rows and columns
• Any ltframegt can be replaced by another frameset
  which can then itself be split
• Links and TARGETs
• Links default to loading in the frame clicked in
• To load elsewhere the link needs a specified
  target attribute (a named frame)

16
Stylesheets

• A definition of a documents appearance
• typeface, size, colour for headings and text
• line spacing, margin widths on all sides
• spacing between headings and much more!
• Specified at the beginning of a document by
  linking or embedding, or inline use
• Written in various special languages, e.g. CSS1

17
Stylesheets

• Promotes the separation of form and content
• Allow Web designers to ensure consistency across
  a sites pages
• Specific elements of the overall stylesheet can
  be overridden locally (cascading)
• Use of stylesheets is recommended by the World
  Wide Web Consortium
• Stylesheets can be used with modern (IE5 or
  Netscape 4) graphical browsers

18
Some basic stylesheet elements

• Linking to external stylesheets
• ltlink href"special.css rel"stylesheet
  type"text/css"gt
• Syntax
• TAG property value
• ltTAG stylepropertyvaluepropertyvaluegt
  lt/TAGgt
• Some common properties
• font-family font-size font-style
  font-weight color background-color
• See handbook, cribsheet and the W3c website
  (www.w3.org) for further information
  stylesheets are very useful!

19
Local and Inline style

• Any tag can be given a one-off application of
  style with a style attribute
• Classes can be established to modify tags
  repeatedly but irregularly
• Blocks of a page can be changed with ltdivgt and
  ltspangt tags
• Always remember principles of inheritance!
• Order most local takes precedence!

20
An example embedded stylesheet

• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• body color 000000
• font-family arial sans-serif
• font-size 13px
• p color ff0000
• .special color 00ff00
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgt This paragraph is black text lt/pgt
• ltp class"special"gtThis paragraph is green
  text!lt/pgt
• lt/bodygt
• lt/htmlgt

21
A note about colours

• The Hexadecimal RGB triplet
• RGB colour mixing
• Hexadecimal representation
• How to work out your colours
• Palette tools, e.g. http//www.linkline.com/pers
  onal/jkun/palette.htm
• Websafe colour chartswww.lynda.com/hex.html

22
Thats all for today

• Any questions?
• Next session XML and extensible systemsMore
  practical work
• Now carry on with your projects!