Scientific Communication CITS7200 Lecture 11 Designing and Writing Web Pages

Proposed in 1989 by Tim Lee at CERN Mosaic released in 1993 Working group to define standards in HTML set up in 1994

Web pages are written in HTML Markup language, similar to LaTeX Uses non case-sensitive tags HTML is an application of SGML - Standard Generalized Markup Language XML is a subset of SGML

HTML documents have a head and a body Documents typically consist of (tables of) paragraphs of text, images, lists, and hypertext links The default file is called index.html and is kept in (a subdirectory of) a directory called WWW, which is a subdirectory of the top directory WWW must be world executable, and all files must be world readable

The Title of the Page

Images Images make your documents more exciting visually Must be used with care, e.g. –can be very slow to load –copyright issues –disabled users

URL refers to a Uniform Resource Locator –absolute or relative ALT gives an alternative textual description of the image ALIGN attribute takes values TOP, MIDDLE, or BOTTOM and aligns at those places any text that comes with the image

Tables are used to layout information on the page Can define table rows or columns, data and captions

Design Good design is simple Write in well-formed HTML for tutorialswww.htmlgoodies.com for code snippets and ASCII colour codes for web-safe colourswww.webmonkey.com Also – –

What to include It is essential to say Who you are What you do How you can be contacted Opening page should be simple and concise, with options to click for more detail

Navigation Navigation should be logical and sequential The 3-click rule states that you should be able to get anywhere in the site in three or fewer clicks The structure of the site should be easy to follow Every page should exhibit a visual consistency, with the same location of menus, buttons, and information in each page Draw up a site design before you begin

Page size should be designed to a ratio of 2:3 for height:breadth

Backgrounds There should be a high contrast between the background and text or images Beware of green against red: colourblind users cannot distinguish these All text should be coded as text, because text is easier to read and clearer than graphics

Default font is Arial, default size is 12pt Keep backgrounds simple –Plain backgrounds load quickly and give best readability –Backgrounds should never be busy Text downloads much faster than images, so make sure there is some text to read while images are downloading

Short pages are best; avoid scroll bars Text that runs across the page is harder to read than text that appears in small blocks

Images One large image loads more quickly than several small images Use gif format for line drawings, maps, and other fine featured or detailed images gif supports only 256 colours Use jpg for natural colour images

Balance text with images and have no more than about 20k in images per page A whole site should fit onto one floppy if you want to be sure of fast download time Do not use HTML to resize images

Menus Limit the number of menu items you have on a page, and restrict each item to one or two words List similar items together Use the same placement of menus throughout your site