Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens

Size: px

Start display at page:

Download "Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens"

Nancy Marsh
5 years ago
Views:

1 Scientific Communication CITS4008 Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens

2 Proposed in 1989 by Tim Lee at CERN Mosaic released in 1993 Working group to define standards in HTML set up in 1994 (HTML ) HTML5 Working Draft in 2008 HTML5 full specification: target 2014

3 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

4 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

5 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

6 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

7 Example <!DOCTYPE html> <html> <head> <title>title of the document</title> </head> <body>  <h1>my First Heading</h1> <p>my <b>first</b> paragraph</p> </body> </html>

8 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

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

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

11 Design Good design is simple Write in well-formed HTML for tutorials for code snippets and ASCII colour codes for web-safe colours Also

12 What to include It is essential to say Who you are What you do How you can be contacted (but beware machine readable addresses) Opening page should be simple and concise, with options to click for more detail

13 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

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

15 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

16 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

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

18 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

19 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

20 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

22 research/postgraduate-profiles

26 management/crc-executive/tony-wong/

27 Google Scholar Automatically Generated Pages

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph. What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe