DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson Department of Information Studies, UCL Department of Information Studies, UCL (University of Malta 2010)

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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!

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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!

DEPARTMENT OF INFORMATION STUDIES Andy Dawson Image maps Assigning a map to an image: Defining the map: <area SHAPE="POLY" COORDS="10,110, 20,110, 20,200, 100,200, 20,200, 30,150, 20,120" HREF="file2.htm" ALT=Unusual shape">

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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

DEPARTMENT OF INFORMATION STUDIES Andy Dawson Using tables for page design

DEPARTMENT OF INFORMATION STUDIES Andy Dawson A simple table Row 1, Col 1 Row 1, Col 2 Row 2, Col 1 Row 2, Col 2

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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

DEPARTMENT OF INFORMATION STUDIES Andy Dawson Structure of forms Forms placed anywhere inside element Can have multiple forms on a page, as long as each form is kept separate Basic structure:

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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

DEPARTMENT OF INFORMATION STUDIES Andy Dawson An example

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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

DEPARTMENT OF INFORMATION STUDIES Andy Dawson The frameset

DEPARTMENT OF INFORMATION STUDIES Andy Dawson Other FRAME features Mixing rows and columns –Any 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)

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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

DEPARTMENT OF INFORMATION STUDIES Andy Dawson Some basic stylesheet elements Linking to external stylesheets: – Syntax –TAG{ property : value; } – … Some common properties font-family : font-size : font-style : font-weight : color : background-color See handbook, cribsheet and the W3c website ( for further information – stylesheets are very useful!

DEPARTMENT OF INFORMATION STUDIES Andy Dawson 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 and tags Always remember principles of inheritance! Order – most local takes precedence!

DEPARTMENT OF INFORMATION STUDIES Andy Dawson An example embedded stylesheet body{color : #000000; font-family : arial; sans-serif; font-size : 13px;} p{color: #ff0000;}.special{color : #00ff00;} This paragraph is black text… This paragraph is green text!

DEPARTMENT OF INFORMATION STUDIES Andy Dawson A note about colours The Hexadecimal RGB triplet RGB colour mixing Hexadecimal representation How to work out your colours Palette tools, e.g. Websafe colour charts:

DEPARTMENT OF INFORMATION STUDIES Andy Dawson Thats all for today… Any questions? Next session – XML and extensible systems More practical work Now carry on with your projects!