Download Department of Information Technology

Department of Information Technology
Chapter 7 - Web Page
Design & Creation
Lecturer: Ms Melinda Chung
The World Wide Web (WWW)
Department of
Information Technology





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)
2 of 43
WWW (cont.)






Department of
Information Technology
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
3 of 43
WWW (cont.)
Department of
Information Technology
A way to provide and access information
resources on the Internet
 Protocol - HTTP (Hypertext Transfer
Protocol)
 Non-linear
 Multimedia
 Flexible

4 of 43
WWW (cont.)
Department of
Information Technology
The Web:


"understands" other Internet protocols,
provides an easy-to-use interface
Library Catalogue
(telnet)
Webpage
link
gopher site with
link
images, sounds,
text
link
Software Repository
(ftp)
5 of 43
Home page design consideration
Department of
Information Technology
Use a summary
 Table of contents
 Remind reader to bookmark your page
 Include a help section
 Display design credit (name, e-mail),
acknowledgement
 Avoid clustering

6 of 43
General guides for web page
design





Department of
Information Technology
contain a link back to the home page or toplevel 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
7 of 43
Continue...
Department of
Information Technology
Include a modification date
 Use paragraphs, headings, listings
 Avoid specific instruction
 Check for duplication
 Copyright consideration

8 of 43
Web Authoring Tools
Department of
Information Technology

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
9 of 43
SGML & HTML

SGML [Standard Generalised Markup
Language]



Department of
Information Technology
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
10 of 43
HTML
Department of
Information Technology
• 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
11 of 43
HTML 4

•
•
•
•
Department of
Information Technology
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
12 of 43
XML & XHTML
Department of
Information Technology
• XML -eXtensible Markup Language
• Extensible - the markup symbols are unlimited and selfdefining
• 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
13 of 43
XHTML
Department of
Information Technology

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
14 of 43
XHTML
Department of
Information Technology
XHTML
XML
SGML
HTML
Reference: Hughes, C. M. 2005. The Web Wizard’s Guide to XHTML. Pearson: Boston
15 of 43
How do you write XHTML
Department of
Information Technology
Editor eg NotePad
Browser eg Internet Explorer
Create Text File
*.htm or *.html
File
Open
Browse
Check Result
Revise
Correct
Add
As often
As needed
Reload/Refresh
16 of 43
XHTML components





Department of
Information Technology
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.
17 of 43
Essential structure of every
XHTML document
Department of
Information Technology
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"?>
18 of 43
Essential structure of every
XHTML document
Department of
Information Technology
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
19 of 43
DOCTYPE
Department of
Information Technology
How 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/xhtml1transitional.dtd">

Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
20 of 43
DOCTYPE




Department of
Information Technology
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
21 of 43
Essential XHTML elements
Department of
Information Technology
<?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
22 of 43
If you want to make sure
which tags you can use….

Department of
Information Technology
Source: http://www.w3schools.com/tags/default.asp
STF = Strict,
TF = Transitional,
E.g. <applet>,
<center> can be
used for TF
23 of 43
Some basic XHTML terms
Department of
Information Technology
Start tag
Content
<h1> Hello World !!!!!!
End tag
</h1>
Element
Reference: Hughes, C. M. 2005. The Web Wizard’s Guide to XHTML. Pearson: Boston
24 of 43
Some basic XHTML terms
Department of
Information Technology
Attributes of tag (in red):
<a href=“http://www.google.com”>Google</a>
Reference: Hughes, C. M. 2005. The Web Wizard’s Guide to XHTML. Pearson: Boston
25 of 43
HTML vs XHTML

Department of
Information Technology
The most important differences between HTML and XHTML
are:

XHTML elements must be properly nested
Incorrect
e.g. <b><i>NB</b></i>

Correct
<b><i>NB</i></b>
XHTML documents must be well-formed and
nested within the <html> root element
<html>
<head> ... </head>
<body> ... </body>
</html>
26 of 43
Lower case and end tags
Department of
Information Technology

Tag names (elements) must be in lowercase
XHTML is case sensitive e.g. <li> and <LI>
are different tags. Therefore ….
Incorrect
<A HREF =

Correct
<a href =
All XHTML elements must be closed
Incorrect
Correct
<p>John
<p>Mary
<p>John</p>
<p>Mary</p>
27 of 43
More XHTML rules
Department of
Information Technology
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
<table
width = 100%>
Correct
<table width =
“100%”>
28 of 43
Head tag

Department of
Information Technology
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
29 of 43
Between the <Head> tag
Department of
Information Technology
<title>
...
</title>
•
•
The title appears at the top of the browser window
<meta> tag examples:
<meta
<meta
<meta
<meta
<meta
<meta
<meta
name="Title" content="ITC125 - Info Superhighway">
name="Source" content="Charles Sturt University">
name="Description" content="A tutorial on HTML">
name="Keywords" content="HTML, syntax, tutorial">
name="URL” content="http://www.csu.edu.au/itc125">
name="Date" content="1 Feb 2005">
name="Author" content=”David Roma">
30 of 43
<body> tag
Department of
Information Technology
<body>
...
</body>

Elements:






headings
ordinary text
lists
pictures
tables
links
31 of 43
Headings
Department of
Information Technology
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
32 of 43
Text Formatting
Department of
Information Technology






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>
33 of 43
Spaces and new lines
Department of
Information Technology
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
34 of 43
Spaces and new lines (cont.)
Department of
Information Technology

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
&nbsp; (non breaking space))
35 of 43
A longer Example
Department of
Information Technology
<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>
36 of 43
Actual Netscape output
Department of
Information Technology
<H1>
<H2>
<I> & <B>
<P>
37 of 43
Lists
Department of
Information Technology
There are three main types of lists:



Numbered
Bullet
Definition
38 of 43
Numbered lists
Department of
Information Technology
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
39 of 43
Bullet lists
Department of
Information Technology
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
40 of 43
Definition lists
Department of
Information Technology
To 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 definition
the second item
and its definition
41 of 43
Nested lists
Department of
Information Technology
<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>
42 of 43
This is the result
Department of
Information Technology

First level list item 1
 First level list item 2
1.
2.
Second level list item 1
Second level list item 2
•
•
3.
•
Third level list item 1
Third level list item 2
Second level list item 3
First level list item 3
43 of 43
Next week
Department of
Information Technology
To be continued with more tags
44 of 43