SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of HTML – Stylesheets and CSS Andy Dawson School of Library, Archive & Information Studies, UCL School of Library, Archive & Information Studies, UCL (University of Malta 2008)

SCHOOL OF LIBRARY, ARCHIVE AND 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!

SCHOOL OF LIBRARY, ARCHIVE AND 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!

SCHOOL OF LIBRARY, ARCHIVE AND 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">

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson Tables a useful facility –for tables of information –for laying out “unusual” Web page designs 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

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson Using tables for page design

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson A simple table Row 1, Col 1 Row 1, Col 2 Row 2, Col 1 Row 2, Col 2

SCHOOL OF LIBRARY, ARCHIVE AND 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) Can’t really do much without server-side processing

SCHOOL OF LIBRARY, ARCHIVE AND 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:

SCHOOL OF LIBRARY, ARCHIVE AND 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

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson Frames A way of organising information Screen split into independent sections –a different document displayed in each section –Bookmarking problems –Frame loading and the target atttribute Tables and CSS quite often used to mimic frames – different pros and cons

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson An example

SCHOOL OF LIBRARY, ARCHIVE AND 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

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson The frameset

SCHOOL OF LIBRARY, ARCHIVE AND 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)

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson Stylesheets A definition of a document’s 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

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson Stylesheets Promotes the separation of form and content Allow Web designers to ensure consistency across a site’s 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 only be used with modern (IE5+ or Netscape 4+) graphical browsers

SCHOOL OF LIBRARY, ARCHIVE AND 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!

SCHOOL OF LIBRARY, ARCHIVE AND 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!

SCHOOL OF LIBRARY, ARCHIVE AND 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!

SCHOOL OF LIBRARY, ARCHIVE AND 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:

SCHOOL OF LIBRARY, ARCHIVE AND INFORMATION STUDIES Andy Dawson That’s all for today… Any questions? Next session – XML and extensible systems More practical work Now carry on with your projects!