department of information technology chapter 7 - web page design & creation lecturer: ms melinda...
TRANSCRIPT
Department of Information Technology
Chapter 7 - Web Page Design & Creation
Lecturer: Ms Melinda Chung
Department of Information Technology
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)
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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.)
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
8 of 43
Continue...
Include a modification dateUse paragraphs, headings, listingsAvoid specific instructionCheck for duplicationCopyright consideration
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
15 of 43
SGML
XML
HTML
XHTML
Reference: Hughes, C. M. 2005. The Web Wizard’s Guide to XHTML. Pearson: Boston
XHTML
Department of Information Technology
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
Department of Information Technology
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.
Department of Information Technology
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"?>
Department of Information Technology
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
Department of Information Technology
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">
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
24 of 43
Start tag Content End tag
Element
Reference: Hughes, C. M. 2005. The Web Wizard’s Guide to XHTML. Pearson: Boston
<h1> Hello World !!!!!! </h1>
Some basic XHTML terms
Department of Information Technology
25 of 43
Reference: Hughes, C. M. 2005. The Web Wizard’s Guide to XHTML. Pearson: Boston
Attributes of tag (in red): <a href=“http://www.google.com”>Google</a>
Some basic XHTML terms
Department of Information Technology
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>
Department of Information Technology
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>
Department of Information Technology
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%”>
Department of Information Technology
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
Department of Information Technology
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">
Department of Information Technology
31 of 43
<body> tag
<body>...
</body>
Elements:
headings ordinary text lists pictures tables links
Department of Information Technology
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
Department of Information Technology
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>
Department of Information Technology
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
Department of Information Technology
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))
Department of Information Technology
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>
Department of Information Technology
37 of 43
Actual Netscape output
<H1>
<H2>
<P>
<I> & <B>
Department of Information Technology
38 of 43
Lists
There are three main types of lists:
Numbered Bullet Definition
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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
Department of Information Technology
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>
Department of Information Technology
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
Department of Information Technology
44 of 43
Next week
To be continued with more tags