Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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