Web Design and HTMLLecture 14 – COMPSCI111/111G SS 2018

u Mike Barley

u Email: barley@cs.auckland.ac.nz

u Room: 488 Building 303S

u Office Hours: by appointment/drop by

u Email: ALWAYS PUT “CS 111” INTO SUBJECT LINE!!!!!

CompSci 111 2018 2

Web Page vs Web Site

u A web page is a single page viewable using web browser

u Should be visually appealing, informative

u A web site is a set of web pages

u Same theme

u Consistent design

3CompSci 111 2018

Navigation

u Users have trouble navigating in many web sites

u Navigation should be easy - three click-rule

u Navigation bar on the left is common

u Navigation bar on the right is more ergonomic

u Each page should

u Tell the user what the page is about

u Clearly identify how to get to other pages (Obvious links)

u Familiarity

Use layout and design that people are familiar with

4CompSci 111 2018

Links

u Don’t make the user guess where the links are

u All links should be clearly identified

u Underlining

u Do not underline any normal text.

u Remember that links are different colour to normal text

u Check the appearance of links on your background

u Name of the link should indicate where it links to

u Don’t use “Click here”

5CompSci 111 2018

Text

u Make the text easy to read

u Keep text short – reading on screen is 15% slower than paper

u Bullet points, headings, empty space

u Use a word processor to prepare the text (spelling)

u Use good titles for page

u Sensible headings

u Make the text legible

u Font size (not too small to read, not too large)

u Aligned to the left. Centre only used for headings

u Colours / contrast

u Not all uppercase / italic / bold

6CompSci 111 2018

Bad use of colour

u Colour

u Use sparingly to reinforce other information

u Colour blindness (Red / Green, Blue / Yellow)

u Poor use of contrast

u Don’t over use colour just because “it is there”

7CompSci 111 2018

Images and Backgrounds

u Design for low bandwidth

u Use images that have small file sizes

u File Formats

u JPEG for photos

u GIF / PNG for graphics

u Backgrounds

u Simple

u Consistent across the entire site

u Should not interfere with content

8CompSci 111 2018

Things to avoid

u Keep the design simple

u Avoid making the page cluttered

u Avoid using Frames

u Make navigation more difficult

u Avoid using Flash animations

u Not all browsers support flash

u Takes too long to download

u Cannot be indexed / searched

9CompSci 111 2018

Markup Languages

<h1>Formatting.</h1> <p>Plain text contains all the content which will appear on the page.</p> <p> Using a variety of formatting styles makes the text much <em>easier to read</em> and can be used to <em>emphasise points.</em></p>

Formatting. Plain text contains all the content which will appear on the page. Using a variety of formatting styles makes the text much easier to read and can be used to emphasise points.

Heading

Paragraph

Emphasise

Markup Tags(HTML)

Formatting

Plain text contains all the content which will appear on the page.

Using a variety of formatting styles makes the text much easier to readand can be used to emphasise points.

Final Appearance

10HTML5 01

Paragraph

Markup Languages

u Markup

u Indicates the formatting that should be used to display the page

u Markup Language

u A markup language consists of special tags which are placed in the text

u Specifies how to format the text

u Hypertext Markup Language (HTML)

u Used to format web pages

u Contains hypertext information (links)

u Written in ASCII / Unicode

u Embedded format codes (tags)

HTML5 01 11

Browser Wars

u HTML 1.0

u Tim Berners Lee (1993)

u Browsers added extra features

u Internet Explorer had unique tags

u Netscape Navigator had unique tags

u Major problem

u What tags should a publisher use?

u How can this problem be resolved?

13

http://en.wikipedia.org/wiki/Browser_warsCompSci 111 2018

Development of HTMLu HTML 2.0

u Internet Engineering Task Force standard (1995)

u HTML 3.2 / HTML 4.0

u W3 Consortium recommendation (1997)

u HTML 4.01

u W3C recommendation (1999)

u XHTML 1.0

u W3C recommendation (2000)

u HTML5

u Fifth revision of HTML standard. Standardized October 2014.

14

http://en.wikipedia.org/wiki/HtmlCompSci 111 2018

Document Type Definition

u Defines which standard is being used for the page

u We use HTML5

u Should appear at the top of the file

15

<!DOCTYPE html>

CompSci 111 2018

Encoding methods

u Different character sets used to encode the page

u ASCII

u UTF-8

u Unicode

u Need to tell the browser which encoding is used

u Located in the head of the document.

16

<meta charset="UTF-8">

CompSci 111 2018

Use at the start of every file

u Copy and paste the code exactly as it appears

u Will be provided in tests and exams

17

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> </head>

CompSci 111 2018

HTML Source Code

u Code used by the browser to display the page

u White space is ignored

u Comments

u Ignored by the browser

u Allow you to document your code

u <!-- Put your comment here -->

u Layout

u Use tidy layout where possible

u Make code easy to understand

u Make code easy to maintain/ modify

u Use whitespace and comments to help

18CompSci 111 2018

Overview of tags

u Markup achieved with “tags”

u Enclosed with angle brackets < … >

u Use lower case

u Most come in pairs <tag> … </tag>

u Tag usually applies to text between start and end tag

19

This word is in <span>italics</span>

CompSci 111 2018

Attributes

u Some tags require additional information

u Properties or attributes of the tag

u <tag property=“value”> </tag>

20CompSci 111 2018

Nested Tags

u Tags must be correctly nested

u Cannot close an open tag until all the open tags that it affects are also closed

21

<tag>Text only affected by “tag”

<tag2>Text affected by both “tag” and “tag2”</tag2>

Text only affected by “tag”</tag>

CompSci 111 2018

Essential tags

<html lang="en">u Encloses the entire document

u Specifies that the document uses html

u lang attribute is used to specify the primary language of a webpage – en is the code for English

22

<html lang="en">........</html>

CompSci 111 2018

Essential tags

<head>u Contains information for the browser

u E.g. character encoding used

u Does not contain any content to be displayed on the page

23

<html lang="en"><head><meta charset="UTF-8"></head>.....</html>

CompSci 111 2018

Essential tags

<body>

u Contains all the content that will appear on the page

24

<html lang="en"><head><meta charset="UTF-8"></head><body>...</body></html>

CompSci 111 2018

Essential tags

<title>

u Part of the head

u Specifies the title to be used by the browser

u Name of the window

u Used in navigation (bookmarks, history, etc.)

25

<html lang="en"><head><meta charset="UTF-8"><title>Introduction to tags</title></head><body>...</body></html>

CompSci 111 2018

HTML5 Exercise

26

Exercise 1: What does HTML stand for?

• Hypertext Markup Language

Exercise 2: What is a document type definition used for?

• Defines which standard is being used for the webpage

Exercise 3: What is “white space”?

• Characters or series of white space characters that define horizontal or vertical spaces

CompSci 111 2018

Block-level tags

Define the structure of a “block”

u Headings

u Paragraphs

u Lists

u Tables

u Preformatted text

27HTML5 01

Paragraphs

<p>

u Defines a paragraph of text

<html><head><meta charset=“UTF-8”><title>Introduction to tags</title></head><body><p>This is a very simple web page</p><p>It contains two different paragraphsof text.</p></body></html>

28HTML5 01

HTML5 Exercise

u Exercise 4: Create a complete HTML5 document with thetitle “Simple page”. The only text that should appear on thepage is “Hello World”.

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8”>

<title>Simple Page</title>

</head>

<body>

<p>Hello World</p>

</body>

</html>

HTML5 01 29