Lecture 01 2pp

Lecture 1 – HTML
SCM6814
Data Management 2
Dr. Hao Shi

School of Computer Science & Mathematics
Victoria University of Technology
hao.shi@vu.edu.au
Room: D623 Phone: 9688 4060
© February 2003
Brief Overview of HTML
z HTML: HyperText Markup Language.

– Not WYSIWYG
– For publishing hypertext on the World Wide Web
– A SGML application conforming to ISO 8879
– Case insensitive
– Links - the beauty of HTML documents
SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML
SCM6814 Data Management 2 © Hao Shi 2003 1

Lecture 1 – HTML
HTML Terminology
z Tags
– HTML codes that are in angle brackets (< and >)
– Tags come in two general types
– Container and empty tags.
z ELEMENTS
– Whose names appear between start tag and/or end tag
e.g. <element-name> and </element-name>
z attributes
– Elements may have associated properties, called attributes
z Containers
– which have both start tag and end tag
HTML Command Format

z A container
<P align= "RIGHT"> Right is Right </P>
value
attribute
beginning tag content of container ending tag
z An empty tag
<HR align="CENTER" size="2" width="50">
attribute
empty tag

Lecture 1 – HTML
World Wide Web Consortium (W3C)

The World Wide Web Consortium (http://www.w3.org) was
created in October 1994 to lead the World Wide Web to its
full potential by developing common protocols that promote
its evolution and ensure its interoperability. W3C has more
than 400 Member organizations from around the world and
has earned international recognition for its contributions to
the growth of the Web.
Necessary Tools
z ASCII Editor
– NotePad
z HTML Editor
– Dreamwaver/UltraDev (http://www.macromedia.com)
– Frontpage/InterDev (http://www.microsoft.com)
z JavaScript Editor
– ScriptBuilder (http://www.netobjects.com)
z Browsers
– Internet Explorer (http://www.microsoft.com)
– Netscape (http://www.netscape.com)

Lecture 1 – HTML
HTML template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML dir="LTR" lang="en">

<HEAD>
<META http-equiv="refresh"
content="3;url=http://www.vu.edu.au">
<STYLE type="text/css">…</STYLE>
<SCRIPT language="JavaScript">…</SCRIPT>
<TITLE> …</TITLE>
</HEAD>
<BODY>
…document body…
</BODY>
</HTML>
Refresh the page regularly


<HEAD>
<META http-equiv="refresh" content="3">
<TITLE>Refresh Demo</TITLE>
</HEAD>
<BODY>
<P align="CENTER">This page is refreshed every 3
seconds.</P>
</BODY>
</HTML>

Lecture 1 – HTML
Redirect the page


<HEAD>
<META http-equiv="refresh"
content="10;url=http://www.vu.edu.au">
<TITLE>Redirect Demo</TITLE>
</HEAD>
<BODY>
<H1><P align="CENTER">WE'VE MOVED!</P></H1>
<H2><P align="CENTER">
<A href="http://www.vu.edu.au">Victoria University
</A></P></H2>
<P align="CENTER">The new page will be automatically loaded for
you in 10 seconds, or you may click on the link above to go
there right now.</P>
</BODY>
</HTML>
10
HTML Headings
<H1>…</H1> Heading 1

Lecture 1 – HTML
11
Character Formatting
<EM>…</EM> Emphasis
<STRONG>…</STRONG> Strong
<CODE>…</CODE> i = i + 1;
<B>…</B> Bold
<I>…</I> Italic
<TT>…</TT> Typewriter
12
<A> Anchor </A>

Element: Create a link or anchor
<A>…</A>
Attributes:
href="…" URL link
name="…" The name of the anchor
target="…" Targeted window
shape="…" Object shapes
coords="…" Object coordinates
onClick An intrinsic event
onMouseOver An intrinsic event
onMouseOut An intrinsic event

Lecture 1 – HTML
13
Common Elements & Attributes

Elements:
<HR> a horizontal rule line
<BR> a line break
<P>…</P> a plain paragraph
<BLOCKQUOTE>… long quotes or citations
</BLOCKQUOTE>
<ADDRESS>…</ADDRESS> information on author
Attributes:
document-wide unique id
id
class values
class
language values
lang
direction for weak/neutral text
dir
advisory title
title
alignment
align
14
Tables
Elements: Create a Table
<TABLE>…</TABLE> a table
<CAPTION>…</CAPTION> caption for the table
<TR>…</TR> table row
<TH>…</TH> table headers
<TD>…</TD> table data cell
<THEAD>…</THEAD> scrolling area of a table
<TFOOT>…</TFOOT> above the scrolling body
<TBODY>…</TBODY> below the scrolling body
<COLGROUP> combing a group of columns
<COL> specifications for one more columns

Lecture 1 – HTML
15
TABLE element
Attributes:
id,class,lang,dir,title,align
Style, inline style information
bgcolor background color
summary, summary of the table
Width, table width
frame, rules, border borders and rules
cellspacing, cellpadding cell margins
onClick, ondblClick, onMouseDown, intrinsic events
onMouseUp, onmouseover, "
onMouseMove, onMouseOut, "
onKeyPress, onKeyDown, onKeyUp "
16
A 3x3 Table


<TABLE border="2" align="RIGHT">
<CAPTION>3x3 Table</CAPTION>
<TR>
<TH>col. 1</TH>
<TH>col. 2</TH>
<TH>col. 3</TH>
</TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>

Lecture 1 – HTML
17
Some TABLE attributes

z bgcolor
– <TABLE bgcolor="#FF0000"> or
– <TABLE bgcolor="RED">
z style
– Property:border-color, float, padding
– Usage: <TABLE style="proerty1:value1;property2:value2">
– Note: padding replaces cellpadding and measurement units are px, mm,
cm and in.
z width
– Usage: <TABLE width="50%"> or
– <TABLE width="200"> or
– <TABLE width=“*">
18
A 3x3 Table version 1


<TABLE border="2" align="RIGHT"
bgcolor="#00FF00"
style="border-color:RED"
width="50%">
<TR>
<TH>col. 1</TH>
<TH>col. 2</TH>
<TH>col. 3</TH>
</TR>
</TABLE>

Lecture 1 – HTML
19
Create a Menu Bar Using TABLE


<TABLE border="0" align="RIGHT"
bgcolor="#00FF00" width="100%">
<TR><TH width="100">Home</TH>
<TH width="100">About Us</TH>
<TH width="100">Join Us</TH>
<TH width="100">Contact Us</TH>

<TH> </TH>
<TH width="100">Member Login</TH>
</TR>
</TABLE>
20
A Menu Bar without Document Margins
<html>
<head><title>Table Menubar</title></head>
<body leftmargin="0" topmargin="0">

<TABLE border="0" align="RIGHT" bgcolor="#00FF00" width="100%">
<TR><TH width="100">Home</TH>
<TH width="100">About Us</TH>
<TH width="100">Contact Us</TH>

<TH> </TH>
<TH width="100">Member Login</TH>
</TR>
</TABLE>
</body>
</html>

Lecture 1 – HTML
21
Browser-Safe Palette
These are the Hexadecimal codes for the 216 colors that
will not be dithered in any standard browser. The codes are
made up of 3 hexadecimal values with each value being
two digits long. The first Hex value is for Red, the second
for Green and the third for Blue.
## ## ## = Red Green Blue
22
216 Browser-Safe colors

Lecture 1 – HTML
23
A 3x3 Table version 2


<TABLE border="2" align="RIGHT" bgcolor="#00FF00"
style="border-color:red" width="50%"
onMouseOver="document.bgColor='yellow'"
onMouseOut="document.bgColor='#FFFFFF'"
onClick="window.open('3x3table.htm', 'newWin')">
<TR>
…
</TR>
</TABLE> onMouseOver
onMouseOut
24
MULTIMEDIA
z "A picture is worth a thousand words" is certainly an
understatement in the world of the Web. Here a picture is
worth many thousands of words, at least in terms of how
much space/memory a picture takes.
z An image comes with many different formats such as
GIF, JPEG, PNG, PDF, TIFF, BMP, PCX. The first two
are commonly used for web pages.
z Multimedia is a combination of text, graphical art, sound,
animation and video.

Lecture 1 – HTML
25
GIF - Web Image Format
All graphical web browsers recognize GIF format. GIF

supports 8-bit color (256 colors). GIF compression is
considered "lossless". There are three forms of the GIF
format:
z Plain GIF
z Transparent GIF
z Animated GIF
z Demo: gif.htm
26
JPEG - Web Image Format
JPEG is a better choice for photographic-quality color

than GIF, because it can support either 8-bit or 24-bit
color. JPEG uses a higher compression ratio. However
you must be careful when repeatedly saving a JPEG file
because of the lossy compression used to store image.

Lecture 1 – HTML
27
IMG Element
Attributes:
src, the image source
alt, text-based description
width, height, image size
hspace, vspace, space around image
ismap, server-side image map
usemap, client-side image map
align,border,class,dir,
id,lang,longdesc,
onClick, onDblClick, onKeyDown,
onKeyPress, onKeyUp, onMouseDown,
onMouseMove, onMouseOut,
onMouseOver, onMouseUp,
style,title
28
Display Sizes and Alignment

<!—images.htm -->
<IMG width="100" height="100"
src="gif_plain.gif" alt="50% VU LOGO">
src="gif_plain.gif" alt="100% VU Logo">
src="gif_plain.gif" alt="200% LOGO"><BR>
<IMG align="TOP" src="img.gif">
<IMG align="MIDDLE" src="img.gif">
<IMG align="BOTTOM" src="img.gif">
<IMG align="LEFT" src="img.gif">
<IMG align="RIGHT" src="img.gif">
Note: The download time for the image will be the same regardless of
the display size.

Lecture 1 – HTML
29
Client-Side Image Map

An image map consists of an image that is divided into
regions. Each region is then associated with URL by means
of <A> or <AREA> tag, which is called hot spot.
elements:
IMG contains a src attribute specifying the name of the image
file and a name attribute specifying the name of the
<MAP>…</MAP> tag pair.
MAP
contains the name attribute used by <IMG>
within <MAP>…</MAP> tag pair that identify the

AREA coordinates within the image that will be recognized as
hot spot.
30
Pixel Reference
x=0, y=0
x=300, y=80
400x400
x=50, y=350
x=400, y=400

Lecture 1 – HTML
31
AREA Element
attributes:
coords The coordinates of the shape in pixels. The coordinates
you enter depend on the shape you specify with the
shape attribute.
href
The URL associated with the area
name
the name of the area
nohref
Not to be associated with a URL
shape
the shape of the defined region such as
zrect: left-x, top-y, right-x, bottom-y
zcircle: center-x, center-y, radius
zpoly: x1, y1, x2, y2, ..., xN-1, yN-1,x1,y1
32
Australian Map

Lecture 1 – HTML
33
Image Map - Australian Map


<IMG src="ausmap.gif" border="0" usemap="#ausmap">
<MAP name="ausmap">
<area href="http://www.act.gov.au" alt="ACT" shape="poly"
coords="220,154,190,154,189,164,197,168,212,166 220,154">
<area href="http://www.nsw.gov.au" alt="NSW" shape="poly"
coords="232,131,213,125,157,125,157,150,161,150,186,165,186,152,222,152,230,137, 232,131">
<area href="http://www.tas.gov.au" alt="TAS" shape="rect" coords="168,191,203,215">
<area href="http://www.vic.gov.au" shape="poly"
coords="159,153,205,179,203,183,184,188,156,177,156,152, 159,153">
<area href="http://www.sa.gov.au" alt="SA" shape="poly"
coords="154,104,154,176,138,163,123,141,94,134,94,106, 154,104">
<area href="http://www.nt.gov.au" alt="NT" shape="poly"
coords="154,101,154,42,140,29,140,2,103,2,94,25,94,101, 154,101">
<area href="http://www.qld.gov.au" alt="QLD" shape="poly"
coords="157,101,157,41,162,43,172,-1,180,-1,206,61,234,104,232,127,212,122,158,122, 157,101">
<area href="http://www.qld.gov.au" alt="WA" shape="poly"
coords="89,27,74,18,42,59,3,82,3,108,24,146,20,159,35,163,64,152,91,138,91,27, 89,27">
</MAP>
34
Audio
Audio files can be found in several different formats.
Usually each format requires a different plug-in, so it is
a good idea to limit the format of the sound. MPEG3
(.mp3) audio compression is now available to deliver
CD-quality sound files at much smaller file size.
z link
<A href="AuAnthem.mp3">Australian National
Anthem</A>
z embed
<EMBED src="AuAnthem.mp3" WIDTH=200 HEIGHT=200
AUTOSTART="false" ALIGN=center>

Lecture 1 – HTML
35
Video
MPEG format is the most common format for digital video

files or movies because all the graphical browsers support
it. The other two common formats are QuickTime (Apple
Macintosh) and AVI (Microsoft).
z embed
<EMBED src="clock.avi" WIDTH=200 HEIGHT=200
AUTOSTART="false" ALIGN=center>
z link
<A href="sample.mov" WIDTH=200 HEIGHT=200
ALIGN=center>Quick Time Sample</A>
36
Frames
Using frames to divide a web page into smaller "pagelets"
is a popular way to control the layout of the screen. A
standard document has one HEAD section and one BODY.
A frameset document has a HEAD, and a FRAMESET in
place of the BODY.
elements:
FRAMESET specifies the layout of views in the main window
FRAME defines the contents and appearance of a single frame
provides alternate content for user agents that do not

NOFRAMES support frames

Lecture 1 – HTML
37
FRAMESET Element
attributes:
cols, together rows and cols define how many frames are
on the screen
rows,
The example divides the screen vertically in two
(i.e., creates a top half and a bottom half).
<FRAMESET rows="50%, 50%"> ...the rest of the
definition... </FRAMESET>
id, class, title, intrinsic events

style, onLoad,
OnUnLoad
38
FRAME Element
attributes:
name, assigns a name to the current frame (target for other
links)
src, specifies the initial contents to be contained in the
frame
noresize, if present, frame window will not be resizable
scrolling, specifies scroll information (YES|AUTO|NO)for the

frame window
target, specifies the name of a frame where a document is
to be opened
frameborder,
marginheight,mar
ginwidth,
id, class,
longdesc, title,
style

Lecture 1 – HTML
39
FRAMs Demo
<FRAMESET cols="25%, *">

<FRAMESET rows="30%, *">
<FRAME src="f1.htm" name="logo">
<FRAME src="f3.htm" name="TopBanner">
</FRAMESET>
<FRAMESET rows="30%, *">
<FRAME src="f2.htm" name="leftMenu">
<FRAME src="f4.htm" name="main">
</FRAMESET>
</FRAMESET>
40
FRAMs Demo1
<FRAMESET rows="25%, *">

<FRAMESET cols="30%, *">
<FRAME src="f2.htm" name="TopBanner">
</FRAMESET>
<FRAMESET cols="30%, *">
</FRAMESET>
</FRAMESET>

Lecture 1 – HTML
41
text MenuBar with Frames


<FRAMESET cols="15%, *">
<FRAMESET rows="10%, *">
<FRAME src="menus.htm" name="TopBanner">
</FRAMESET>
<FRAMESET rows="20%, *">
</FRAMESET>
</FRAMESET>
42
Text Menu Bar with target="main"


<TABLE border="0" align="RIGHT" bgcolor="#00FF00"
width="100%">
<TR><TH width="100"><A href="home.htm"
target="main">Home</A></TH>
<TH width="100"><A href="aboutus.htm"
target="main">About Us</A></TH>
<TH width="100"><A href="joinus.htm"
target="main">Join Us</A></TH>
<TH width="100"><A href="contactus.htm"
target="main">Contact Us</A></TH>
<TH> </TH>
<TH width="100"><A href="login.htm"
target="main">Member Login</A></TH>
</TR>
</TABLE>

Lecture 1 – HTML
43
Text Menu Bar with <BASE>

<HTML>
<HEAD>
<BASE target="main">

<BODY>
<TABLE border="0" align="RIGHT" bgcolor="#00FF00" width="100%">
<TR><TH width="100"><A href="home.htm">Home</A></TH>
<TH width="100"><A href="aboutus.htm">About Us</A></TH>
<TH width="100"><A href="joinus.htm">Join Us</A></TH>
<TH width="100"><A href="contactus.htm">Contact Us</A></TH>
<TH> </TH>
<TH width="100"><A href="login.htm">Member Login</A></TH>
</TR>
</TABLE>
</BODY>
</HTML>
44
Special Targets
z _self
if an anchor tag (<A>) does not specify a target value, the _self target is the
default target.
z _parent
The _parent target causes the document to be loaded into the parent window,
which is the window containing the frameset that has the actual hypertext
reference.
z _top
it causes the browser to load the documents into a window without any
frames.
z _blank
To initiate a newly opened window, the browser uses the _blank target.
There is no real use for most Web weavers.

Lecture 1 – HTML
45
Forms - Handling User Input

The FORM is an independent HTML document, but it could
also be a part of an existing document that allows users to
provide input by performing any of the following actions:
z Selecting one of a set of radio buttons
z Choosing one or more checkboxes
z Using a list box to select one or more elements from a predefined list
z Entering free-flowing text into a text field
z ……
After entering all the data, users activate a submission button

to send the data to the server for processing or to a specified
device such as an e-mail address.
46
Form-Related Elements
FORM insert a form, which contains one or

more form elements
INPUT creates form elements such as text and
password boxes, hidden fields, radio
buttons, check boxes, submit and reset
buttons, images, files, and buttons
creates elements such as a drop-down
SELECT list and a list box
creates a multi-line text box in a form
TEXTAREA

Lecture 1 – HTML
47
A Contact Us Form
48
A Simple Form
<FORM action="mailto:s6666666@vu.edu.au?Subject=A
HTML email test "
method="POST">
Your name:<BR>
<INPUT type="TEXT" name="name"size="30"
MAXsize="80"><BR>
E-Mail address:<BR>
<INPUT type="TEXT" name="email" size="30"
MAXsize=80<BR>
<INPUT type="SUBMIT" value=“Submit Now"><BR>

</FORM>

Lecture 1 – HTML
49
mailto:
Microsoft Outlook 97 now supports the following

additional mailto fields:
mailto: someone@microsoft.com
mailto: someone@microsoft.com?Subject=Subject of Message
mailto: someone@microsoft.com?Subject=Subject of
Message&CC=others@ microsoft.com
mailto: someone@microsoft.com;
someone1@microsoft.com?subject=Subject of Message
50
GET and POST methods

In the previous example, the form sends an e-mail
containing the data that were collected. Note: you must
always use the POST method instead of the GET method to
send data using e-mail.
ASP stores the data of each type of request in two different
collections of the Request object. The collections are the
QueryString collection (for HTTP GET request) and the
Form (for HTTP POST request).
The GET method is only used to send data (usually < 2000
chars) in ASCII while the POST is used to send bulk data
and can be used in unicode. The POST method is generally
considered more robust.

Lecture 1 – HTML
51
Handling Electronic Mail
The following string would show up as part of an e-mail message

in the mailbox after the user clicks the “Submit Now" button:
name=Hao+Shi&email=s6666666@vu.edu.au
space ampersands
A name-pair in a HTTP request takes the form: name=value. The
ampersand (&) character delimits the name-value pairs. Note
some special characters are encoded by their hexadecimal value
%hex (% is prefix) or represented as other ASCII characters.
52
FORM Element
attributes:
action, specifies a form processing agent.
method, GET (restrict to ASCII) or POST
onReset, clear the user's input
onSubmit, client-side user input validation on submission
direct return data form to a target (window)
target,
accept-charset,
class,dir,encyte,id,
lang, name, onClick,
onDblClick, onKeyDown,
onKeyPress, onKeyUp,
onMouseDown, onMouseMove,
onMouseOut, onMouseOver,
onMouseUp, style, and title

Lecture 1 – HTML
53
INPUT Element – A Single Line Input

attributes:
name, the control name (variable name)
size, maxlength, initial/maximum width of the control
value the initial value of the control
type, the type of control to create
src, the value "image" for submit button
accept,accessKey,align,alt,bo
rder,class,dir,disabled,id,la
ng, onBlur,
onChange,onFocus,onSelect,
onClick, onDblClick,
onKeyDown, onKeyPress,
onKeyUp, onMouseDown,
readonly,style,tabindex,
title, usemap
54
INPUT Element - Type Attribute
CONTROLS: Required Attribute(s)

BUTTON name,value
CHECKBOX name,value
FILE name
HIDDEN name,value
IMAGE src
PASSWORD name,value
RADIO name,value
RESET None
SUBMIT None
TEXT name

Lecture 1 – HTML
55
Enctype Attribute
The enctype attribute of the FORM element specifies the
content type used to encode the form data set for submission to
the server (when the value of method is "POST"). The default
value for this attribute is "application/x-www-form-urlencoded".
The value "multipart/form-data" should be used in combination
with the INPUT element, type="file".
Examples of content types include "text/plain", "text/html",

"image/png", "image/gif", "video/mpeg", "text/css", and
"audio/basic".
56
TEXTAREA Element - Multi-Lines

attributes:
cols, the visible width
rows, the number of visible text lines
class, cols,
dir,disabled,id,lang,
onBlur,
readonly,style,tabindex,
title, wrap

Lecture 1 – HTML
57
SELECT Element
attributes:
size, visible options shown
multiple, allows multi-selection
class, cols, Note: must contain at least one

dir,disabled,id,lang, name, OPTION element
onBlur,
onSelect,style,tabindex,
title
58
OPTION Element
(sub-element of SELECT element)
attributes:
value, option value
selected, pre-selected options
class, cols,
dir,disabled,id,lang, onBlur,
onClick, onDblClick, onKeyDown,
onKeyPress, onKeyUp,
onMouseDown, onMouseMove,
onMouseOut, onMouseOver,
onMouseUp, onSelect,style, and
title

Lecture 1 – HTML
59
BUTTON Element
attributes:
class, cols, a more sophisticated set than
dir,disabled,id,lang, <INPUT type="BUTTON">
name,onBlur,
onRest, onSubmit,style,
title, type and value
60
Online Membership Application
ASPCourse\Module1\demo1\app_form.htm

Lecture 1 – HTML
61
Appform.htm - FORM
• FORM
<FORM
action="mailto:s6666666@vu.edu.au?Online
Membership Application"
enctype="text/plain"
name="Form1"
method="POST">
...
</FORM>
62
Appform.htm - TEXT
• TEXT
<TR>
<TD align="RIGHT">First Name:</TD>
<TD>
<INPUT type="TEXT" name="firstname" size="20"
MAXsize=“20">
Last Name:
<INPUT type="TEXT" name="lastname" size="20"
MAXsize=“20"></TD>
</TR>
<TR><TD align="RIGHT">E-Mail address:</TD>
<TD><INPUT type="TEXT" name="email" size="50"
MAXsize=80><TD>
</TR>

Lecture 1 – HTML
63
Appform.htm – RADIO Button
• RADIO Button
<TR><TD align="RIGHT">Gender:</TD>
<TD>
<INPUT type="RADIO" name="gender" value="M">Male
<INPUT type="RADIO" name="gender" value="F">Female
</TD>
</TR>
64
Appform.htm - CHECKBOX
• CHECKBOX
<TR>
<TD align="RIGHT">Hobbies:</TD><TD>
<INPUT type=CHECKBOX name="hobby1"
value="basketball"> Basketball
<INPUT type=CHECKBOX name="hobby2"
value="golf"> Golf
<INPUT type=CHECKBOX name="hobby3" value="swimming">
Swimming
<INPUT type=CHECKBOX name="hobby4" value="tennis" >
Tennis
</TD>
</TR>

Lecture 1 – HTML
65
Appform.htm - SELECT
• SELECT
<TR>
<TD align="RIGHT">Occupation:</TD>
<TD>
<SELECT name="occupation">
<OPTION value="">[SELECT occupation]</OPTION>
<OPTION value="executive">executive</OPTION>
<OPTION value="professional">professional</OPTION>
<OPTION value="academic">academic</OPTION>
<OPTION value="technician">technician</OPTION>
<OPTION value="other">other</OPTION>
</SELECT>
</TD>
</TR>
66
Appform.htm - TEXTAREA
• TEXTAREA
<TR>
<TD align="RIGHT">Message:</TD>
<TD>
<TEXTAREA name="message" cols="50" rows="2">
</TEXTAREA>
<TD>
<TR>
<TR>

Lecture 1 – HTML
67
Appform.htm – SUBMIT & RESET
• SUBMIT & RESET

<TR>
<TD>
<INPUT type="SUBMIT" name="membership"
value="Submit Now">
<TD>
<INPUT type="RESET" value=“Reset"></TD>
</TD>
</TR>
68
Development Tools
Web = HTML + Scripting + Components
Simple Frontpage HTML Web Professional
V InterDev Scripting Web Developer
Component
VC++,VJ++,VB Components Developer
ActiveX(COM)
Commercial
System Services Professional
Developer
Complex Win32

Lecture 1 – HTML
69
Lab1
Design a Web Site for a Club
z Set up an account with a Free Web Host (optional)

e.g. http://www.brinkster.com/
z Visit http://www.staff.vu.edu.au/haoshi/scm6814/lab1
– Familiarize yourself with the prepared files in the directories
z Redesign your own Membership Application Form

– Insert three more text fields, ie, Phone, Fax & Mobile to the Membership
Application Form (joinus.shtm)
– Add warning message for Reset & Submit buttons
– Validate the passwords (between password and password2)

Lecture 01 2pp

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lecture 01 2pp

Încărcat de

Drepturi de autor:

Formate disponibile

Lecture 1 – HTML

Dr. Hao Shi

Brief Overview of HTML

z HTML: HyperText Markup Language.

– For publishing hypertext on the World Wide Web

– A SGML application conforming to ISO 8879

– Links - the beauty of HTML documents

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 1

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

HTML Command Format

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 2

World Wide Web Consortium (W3C)

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 3

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

Refresh the page regularly

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 4

Redirect the page

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 5

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

<A> Anchor </A>

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 6

Common Elements & Attributes

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

Elements: Create a Table

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 7

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 8

Some TABLE attributes

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

A 3x3 Table version 1

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 9

Create a Menu Bar Using TABLE

A Menu Bar without Document Margins

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 10

## ## ## = Red Green Blue

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

216 Browser-Safe colors

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 11

A 3x3 Table version 2

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

SCM6814 Data Management 2 © Hao Shi 2003 12

GIF - Web Image Format

All graphical web browsers recognize GIF format. GIF

SCM6814 Data Management 2 © Hao Shi 2003 Lecture 1 – HTML

JPEG - Web Image Format

JPEG is a better choice for photographic-quality color