Scientific Communication CITS4008 Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens
Proposed in 1989 by Tim Lee at CERN Mosaic released in 1993 Working group to define standards in HTML set up in 1994 (HTML 3.0 1995) HTML5 Working Draft in 2008 HTML5 full specification: target 2014
Hyper Text Markup Language (HTML) Web pages are written in HTML HTML documents are called web pages Markup language, similar to LaTeX HTML documents contain tags and plain text http://www.w3schools.com/html/
Cascading Style Sheets (CSS) Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem (tags for style elements) External Style Sheets can save a lot of work External Style Sheets are store in CCS files http://www.w3schools.com/css/
You will also come across XML is used to transport and store data Javascript is usde to add functionality, validate forms, communicate with the server., and more PHP is a scripting language for making dynamic and interactive web pages http://www.w3schools.com/
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
Example <!DOCTYPE html> <html> <head> <title>title of the document</title> </head> <body> <!-- content of the document this is a comment --> <h1>my First Heading</h1> <p>my <b>first</b> paragraph</p> </body> </html>
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
<img src= url alt= text description width= 304 height= 228 > URL refers to a Uniform Resource Locator absolute or relative ALT gives an alternative textual description of the image Height and width are in pixels (by default) You can 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 www.htmlgoodies.com for tutorials www.webmonkey.com for code snippets and ASCII colour codes for web-safe colours Also www.htmldog.com www.w3schools.com
What to include It is essential to say Who you are What you do How you can be contacted (but beware machine readable email addresses) 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
http://robotics.stanford.edu/~ok/
http://web.csse.uwa.edu.au/ research/postgraduate-profiles
http://users.ecs.soton.ac.uk/km/
http://www-cs-faculty.stanford.edu/~knuth/
http://people.csse.uwa.edu.au/rachel/
http://watersensitivecities.org.au/about-the-crc/ management/crc-executive/tony-wong/
Google Scholar Automatically Generated Pages http://scholar.google.com.au/citations?user=vkfc88eaaaaj&hl=en