Department of Information Technology Chapter 7 - Web Page Design & Creation Lecturer: Ms Melinda Chung.

Department of Information Technology

Chapter 7 - Web Page Design & Creation

Lecturer: Ms Melinda Chung


2 of 43

The World Wide Web (WWW)

existed since early 1990s the most widely used service on the Net a virtual network consists of Web pages

residing on computers/servers distributed across the Internet

Web pages - electronic documents contain text, images and hyperlinks

Web pages are prepared using the Hypertext Markup Language (HTML)


3 of 43

WWW (cont.)

a Web site - a collection of related web pages each web site has a unique address - URL a Web site is stored on a Web server A Web server can have multiple Web sites http - communication protocol used to transfer

pages on the Web Web browser - used to access and view Web

pages


4 of 43

WWW (cont.)

A way to provide and access information resources on the Internet

Protocol - HTTP (Hypertext Transfer Protocol)

Non-linear Multimedia Flexible


5 of 43

The Web: "understands" other Internet protocols, provides an easy-to-use interface

Webpage

link

link

linkgopher site with

images,

sounds, text

Library Catalogue

(telnet)

Software Repository(ftp)

WWW (cont.)


6 of 43

Home page design consideration

Use a summaryTable of contentsRemind reader to bookmark your pageInclude a help sectionDisplay design credit (name, e-mail),

acknowledgementAvoid clustering


7 of 43

General guides for web page design

contain a link back to the home page or top-level page (not all viewers access your site at the home page)

Avoid too much information (< 3 screenful) Have value in content Maintain same navigation icons Maintain same design layout


8 of 43

Continue...

Include a modification dateUse paragraphs, headings, listingsAvoid specific instructionCheck for duplicationCopyright consideration


9 of 43

Web Authoring Tools

Three types of Web Authoring tools: Text editors

General purpose, such as Notepad, Simple Text HTML editors

Show HTML text, but provide tools for inserting tags. Eg. Hotdog, HTML Assistant, Web Edit, BBEdit

WYSIWYG editors HTML hidden (although source view provided). Eg. GoLive, Pagemill, Dreamweaver. Claris Home Page


10 of 43

SGML & HTML

SGML [Standard Generalised Markup Language] a language describes other mark-up languages

used for composing electronic document, publishing documents

a meta-language that contains rules from which other languages (HTML, XHTML,XML..etc) are developed

HTML [HyperText Markup Language] uses a predefined subset of SGML tags


11 of 43

• Describes the appearance of web pages and the links contained within them

• Multimedia options• Supports scripting languages• Accommodates Style sheets• No rigid programming standards apply• All Web browsers interpret HTML codes &

display the contents

HTML


12 of 43

HTML 4 Conforms to an International Standard ISO 8879• Widely regarded as the standard publishing

language of the World Wide Web• HTML is not applicable to a wide range of Web

clients (TVs, fridges, PDAs, mobile phones etc). • Compatibility problems for documents across

different platforms• Need a basic set of HTML features applicable to

wide range of features - XHTML


13 of 43

XML & XHTML• XML -eXtensible Markup Language

• Extensible - the markup symbols are unlimited and self-defining

• Meant to overcome some of the problems of HTML4• removes many of the more complex features of SGML but

retaining its power and flexibility• a structured set of rules for defining any kind of data to be

shared on the Web

• XHTML - eXtensible HyperText Markup Language• A reformulation of HTML 4 • Layout of the code much more structured• Pages written in XHTML work well in most browsers• Elements (tags) are almost identical to HTML4


14 of 43

XHTML

Will become the standard used for WWW documents Introduces more rigid programming standards Uses HTTP - Hyper Text Transfer Protocol

Check how good your XHTML codes at: http://validator.w3.org/

for conformance with W3C recommendations


15 of 43

SGML

XML

HTML

XHTML

Reference: Hughes, C. M. 2005. The Web Wizard’s Guide to XHTML. Pearson: Boston

XHTML


16 of 43

How do you write XHTML

Create Text File*.htm or *.html

Editor eg NotePad Browser eg Internet Explorer

FileOpen

BrowseCheck Result

ReviseCorrect

AddReload/Refresh

As oftenAs needed


17 of 43

XHTML components

an XML declaration (although depending on the document type this may not be essential)

a DOCTYPE (similar to define a style-sheet in a Word document)

the element <html> must be the first one in an XHTML document

the XML namespace (xmlns) and its appropriate value

tags and attributes contained within the <body> of XHTML document.


18 of 43

Essential structure of every XHTML document

1. XML declaration

This is a statement to indicate that it is an XML application. This statement is included in the very first line of the XHTML document.

<?xml version="1.0" encoding="UTF-8"?>


19 of 43

Essential structure of every XHTML document

2. DOCTYPE

The DOCTYPE used is referred to a DTD (Document Type Definition). It specifies the version of XHTML the document will use

Strict: for clean structural mark-up free from formatting (use in conjunction with Style sheets)

Transitional: allows some flexibility, very similar to HTML4, includes formatting elements

Frameset: must be used if document is to include frames


20 of 43

DOCTYPEHow to define the respective DOCTYPE

Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


21 of 43

DOCTYPE

Resemble more closly the future of XHTML versions Incorporate it CAREFULLY in the Web pages that you

generate Need to use the W3C validator to check the quality of

your XHTML codes For this subject you are required to use the

transitional DOCTYPE


22 of 43

Essential XHTML elements

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns=http://www.w3.org/1999/xhtml xml:lang=“en”>

<head><title>My first XHTML file</title>

</head>

<body> <h1>Hello World</h1></body>

</html>

XHTML documents consist of data (between the tags) and instructions (within the tags)

Indenting makes it easier to follow


23 of 43

STF = Strict,TF = Transitional,E.g. <applet>, <center> can be used for TF

If you want to make sure which tags you can use….

Source: http://www.w3schools.com/tags/default.asp


24 of 43

Start tag Content End tag

Element


<h1> Hello World !!!!!! </h1>

Some basic XHTML terms


25 of 43


Attributes of tag (in red): <a href=“http://www.google.com”>Google</a>

Some basic XHTML terms


26 of 43

HTML vs XHTML

The most important differences between HTML and XHTML are:

XHTML elements must be properly nested

Incorrect Correcte.g. <b><i>NB</b></i> <b><i>NB</i></b>

XHTML documents must be well-formed and nested within the <html> root element <html> <head> ... </head> <body> ... </body> </html>


27 of 43

Lower case and end tags

Tag names (elements) must be in lowercase XHTML is case sensitive e.g. <li> and <LI> are different tags. Therefore ….

Incorrect Correct<A HREF = <a href =

All XHTML elements must be closed

Incorrect Correct<p>John <p>John</p><p>Mary <p>Mary</p>


28 of 43

More XHTML rules

Including empty tags:

- Horizontal rule - <hr /> rather than <hr>- Break - <br /> rather than <br>- image - <img src=“dave.jpg" alt=“David Roma" />

Attribute values must be quoted

Incorrect Correct<table width = 100%> <table width = “100%”>


29 of 43

Head tag

The <head> tag provides information about the HTML document including: <title> tag - appears at the top of the browser. It

can be used by search engines <meta> tag –can include meta data in this section


30 of 43

Between the <Head> tag

<title>...

</title>

• The title appears at the top of the browser window • <meta> tag examples:

<meta name="Title" content="ITC125 - Info Superhighway"><meta name="Source" content="Charles Sturt University"><meta name="Description" content="A tutorial on HTML"> <meta name="Keywords" content="HTML, syntax, tutorial"><meta name="URL” content="http://www.csu.edu.au/itc125"><meta name="Date" content="1 Feb 2005"><meta name="Author" content=”David Roma">


31 of 43

<body> tag

<body>...

</body>

Elements:

headings ordinary text lists pictures tables links


32 of 43

Headings

To display a heading, use the following HTML code:

<hn> ..heading text.. </hn>

where n is a value from 1 to 6

h1 is the largest font, while h6 is the smallest

Note: different browsers will react to the heading command differently


33 of 43

Text Formatting

We can ask for emphasis (usually interpreted as italics)

<i> and </i> We can ask for strong (usually interpreted as

bold)<b> and </b> We can ask for samples of code (most browsers

change to a monospaced font)<pre> and </pre>


34 of 43

Spaces and new lines

Browsers turn multiple spaces and carriage returns in an XHTML document into a single space. So the following:

"This is a sample of spaced out text”would be displayed as:"This is a sample of spaced out text”where multiple spaces and carriage returns are ignored


35 of 43

Spaces and new lines (cont.)

To start a new paragraph (with a blank line spacer - like pressing ENTER twice)

<p> </p> (new Paragraph)

To start a new line (like pressing ENTER once)

<br /> (line BReak)

To have multiple blanks use lots of

(non breaking space))


36 of 43

A longer Example

<html><head><title>A Longer Example</title></head><body><h1>A Page Showing Some Text Formatting</h1><h2>The Usual Character Formatting</h2><i>Some italic text</i><br></br><b>Some bold text</b><p></p><h2>Special Characters</h2><p>A paragraph of text.</p></body></html>


37 of 43

Actual Netscape output

<H1>

<H2>

<P>

<I> & <B>


38 of 43

Lists

There are three main types of lists:

Numbered Bullet Definition


39 of 43

Numbered lists

To create a numbered list use:<ol> <li> the first item </li>

<li> the second item </li> </ol>

which gives:

1. the first item

2. the second item

ol stands for Ordered List


40 of 43

Bullet lists

To create a bulleted list use:<ul> <li> the first item </li>

<li> the second item </li>

</ul>

which gives: the first item the second item

ul stands for Unordered List


41 of 43

Definition listsTo create a definition list use:

<dl> <dt>the first item <dt>

<dd>and its definition <dd> <dt>the second item <dt>

<dd>and its definition <dd></dl>

which gives:the first item and its definitionthe second item and its definition


42 of 43

Nested lists

<ul><li>First level list item 1 </li> <li>First level list item 2<ol> <li>Second level list item 1 </li> <li>Second level list item 2

<ul> <li>Third level list item 1</li> <li>Third level list item 2</li> </ul> </li> <li>Second level list item 3 </li>

</ol> </li> <li>First level list item 3 </li></ul>


43 of 43

This is the result

First level list item 1 First level list item 2

1. Second level list item 12. Second level list item 2

• Third level list item 1• Third level list item 2

3. Second level list item 3• First level list item 3


44 of 43

Next week

To be continued with more tags

Department of Information Technology Chapter 7 - Web Page Design & Creation Lecturer: Ms Melinda Chung.

Documents