1. Scientific Communication CITS7200 Lecture 11 Designing and Writing Web Pages

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

3. 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

4. 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

5. The Title of the Page

6. 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

7. 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

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

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

10. 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

11. 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

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

13. 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

14. 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

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

16. 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

17. 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

18. 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