Web Interface & Design

IS365
Web Interface
Design
Lecturer : Ly Romny
E-mail :
Rly@mekong.edu.kh
Introductio
n
Cambodian Mekong University IS365
What is HTML?
 HTML is a type of Standard
Generalized Markup Language. It
is portable, meaning it allows all
sorts of computers, all across the
world, to view documents
created in any SGML .HTML
allows portability across
platforms.
 HTML come from the word
3
 Whatis Web browser?

a software application used to
locate and display Web
pages. The two most popular
browsers are
Netscape Navigator and
Microsoft Internet Explorer.
Both of these are graphical
4
 In addition, most modern

browsers can present
multimedia information,
including sound and video,
though they require plug-ins
for some formats.
There are many Web
browsers like:
5
What is Web server?

 isthe program that runs
on a computer and is
responsible for replying to
web browser requests for
files. You need a web
server to publish
documents on the Web.
6
 There are many different Web

servers today like:
APACHE are available for all
platforms. APACHE is
actually a play on word,
derived from “a patch-y
server” .
Internet Information Server
or IIS (Microsoft Technology)7
 iPlanet Web server (From Netscape’s

Enterprise server)
 Zeus and others
 What is URL?
 URL stand for Uniform Resource
Locator. Simply, it describe the
location, or Internet address, of the
specific resource we want to use for our
document.
Ex: http://www.mekong.edu.kh/ or
http://www.yahoo.com/ is yahoo
homepage or
http://www.nytimes.com/pages/world/in
dex.html 8
Protocol?
The protocol of a URL tells the

browser what kind of resource
it is accessing.
The browser must know how to
interpret what it finds. It is as
if your browser could
translate several different
languages into English. 9
Before it could translate a

page, it would have to know
what language it was
translating from. That is what
the protocol tells the browser
what type of resource it will
be using.
There are seven common
protocols 10
Protoco Example
lftp: ftp://ftp.fancyfoo.stuff/foob
ar.txt
Gophe gopher://deep.gopher.ho
r: le/
http: http://unreal.place.com/
mailto mailto:rly@mekong.edu.kh
:
news: News:alt.some.cool.newsgr
oup
telnet: telnet://user:password@ser
ver:port 11
Domain?
 The domain name is the
second part of the URL. It
specifies the physical location
of the file or information
resource. A domain is the
computer that runs the server
software to handle the
protocol specified in the first
part of the URL 12
The domain portion of the URL

start immediately after the
colon or the two slashes(“//”)
that end the protocol. The
domain portion ends with
single slash. You can specify
the domain either by its IP
address or by using a domain
name that stands for the
13
IP stand for Internet Protocol. IP

addresses are four sets of one,
two, or three digits separated by
periods. They define the Internet
address of the particular machine
pointed to by the URL. And
example of an IP address is
198.95.251.5. It identifies a
specific computer somewhere on
the World Wide Web. If you
14
Ex:
Extension Meaning
.edu an educational sites
.com a commercial site or
business
.gov government sites
.org nonprofit organizations
.net usually an ISP sites 15
Path and Filename

Let’s use the following
example:
http://etext.lib.virgina.edu/mo
deng/modengC.browse.html.
The last part of this URL is the
path and file we are
interested in. If the resource
you are connecting to is a file,
then the URL will end in a
filename. In this example, the
16
Anatomy of a Website
 Website A collection of one or
more web pages linked together in
a meaningful way that, as a whole,
describes a body of information or
creates an overall effect
 Web page A single document on a
website, usually consisting of an
HTML document and any items
that are displayed within that
17
 Home page The entry page

for a website, which can link
to additional pages on the
same website or pages on
other sites. Most of your
users will access your site
through your home page, but
some will enter your site
through other pages.
19
Chapter 1(HTML Building

Blocks)
 HTML Tags are commands
written between less than (<)
and greater than (>) signs,
also known as angle brackets,
that indicate how the browser
should display the text.
21
There are opening and closing

versions for many (but not all)
tags, and the affected text is
contained within the two tags.
Tags come in two general types:
empty tags and containers. The
tag is an example of an
empty tag.
It does not hold or surround 22
So it is called empty .
Containers start with a
beginning tag, contain some
text that is modified by the
container, and end with and
ending, or closing tag. The
closing tag looks like the
beginning tag except that it
has a slash preceding its 23
Following is an example of a
container that causes the text
within it to appear in italics.
 is the beginning tag, and
 is the closing tag.
Ex: this text is in
italics
 Attributes Many tags have
special attributes that offer a 24
The attribute is entered between

the command word and the
final greater than symbol.
Often, you can use a series of
attributes in a single tag.
Simply write one after the other
Attribute
in any order with a space
between each one
Tag
Ex: <HR SIZE> 25
 Value Attributes in turn often

have values. In some cases,
you must pick a value from a
small group of choices. For
example, the CLEAR attribute
for the BR tag can take values
of left, right, Value
or all. Any other
for CLEAR attribute
value given will be ignored.

Ex: 
26
 Nesting Tags In some case

you may want to modify your
page contents with more than
one tag.
Ex: <H1>Big Size
Letter</H1>
<H1>Big Size
Incorrect
Letter</H1> 27
Absolute & Relative URLs

URLs can be either absolute or
relative.
An absolute URL shows the
entire path or the file,
including the scheme, server
name, the complete path,
and the file name itself.
When you’re referencing a file
from someone else’s server, 28
29
File Names
File name, in all
lowercase letters Extension
 Ex:
capital_punishment.html
Capital_Punishment.html
File names with capital letter are a pain
to type and to communicate
p://www.yoursite.com/WebPages/TORTURE/Capital_Punishment
31
Starting Your Web Page
Designing Your Site
32
Organizing Files
33
Starting Web Page

<HTML>
<HEAD>
<TITLE>your page title</TITLE
</HEAD>
<BODY>
---------------
</BODY>
</HTML>
34
<Hn Align=direction>
Where n=1,..,6>
Where direction=left, center,
right
 HTML provides for up to six
levels of headers in your Web
pages for dividing your page
into manageable chunks.
EX : <H1
ALIGN=“Center”>Using
Heading</H1>
35
 
The line break tag, ,
cause the browser to stop the
current line and move cursor
to the left margin. It functions
like a carriage return on a
Ex: Robert Frost wrote: 
keyboard.
“Two roads diverged in a yellow
wood, 
And sorry i could not travel both 
And be one traveler, long i stood 
36
Figure 1
37
<HR>
The Horizontal rule tag,<HR>,
puts a horizontal line, or rule,
across the screen. This is an
Ex: empty tag.
Robert Frost wrote:
<HR SIZE=“3” WIDTH=“50%” ALIGN=“LEFT”>
“Two roads diverged in a yellow wood, 
And sorry i could not travel both 
And be one traveler, long i stood 
(See Figure 2)
38
Figure 2
39
<BODY>
Attribute of <BODY>
BGCOLOR : The
BGCOLOR attribute
controls the background
color of the page. It is
expressed as a mixture of
red, green, and blue
(RGB). 40
Some of the colors available are

White FFFFFF
Bright red FF0000
Bright green 00FF00
Bright blue 0000FF
Yellow FFFF00
Magenta FF00FF
Cyan 00FFFF
Black 000000
Ex: <BODY BGCOLOR=“YELLOW”>
or
<BODY BGCOLOR=“#FFFF00”> 41
42
BACKGROUND: This attribute

allows you to place a picture or
image in the background of
your page.
Ex: <BODY
BACKGROUND=“pic.jpg”>
<BODY
BACKGROUND=“images/wall.gif”>
<BODY 43
44
BGPROPERTIES: This attribute

works in conjunction with the
BACKGROUND attribute. The
value is always “fixed"
meaning it causes the
background to freeze in the
browser image so it will not
scroll with the rest of the
windows contents. if you wish
to use it, you would code it like
this: 45
Text: This attribute sets the

color for all the text on the
page except the text enclosed
in an anchor,<A>, container.
Ex:
<BODY BGCOLOR=“yellow”
TEXT=“#FFFF00”>
46
 LINK, ALINK, VLINK

LINK : Controls the color of all the
hyperlinks the user has not yet
followed(Click).
ALINK : Control the color of active
link, or the link that is being targeted
by the mouse. This attribute is
currently used only by Netscape; the
others ignore it.
VLINK : Controls the color of all the
links the user has already followed at
one time or another.
EX: <BODY LINK=“#FF0000”
47
48
Some Tags
 ...
 ....
 ...
 <CITE>...</CITE>
 ...
 ...
 ...
 <STRIKE>...</STRIKE>
49
 <BASEFONT SIZE=n>
The<BASEFONT> tag is
useful for changing the size
of the font for the whole
page
Ex: <BASEFONT SIZE=4>
Size=5</BASEFONT>
50
Change the Font

 
The container allows
you to change the size of the
contained text.
51
Ex:
<HTML>
<HEAD>
<TITLE>with size
increments</TITLE>
<BODY>
This line is shown in the normal
font 
Change the FONT
size bigger
</BODY>
</HTML> 52
<IMG>
 Attribute of <IMG> tag:
SRC=“URL”
WIDTH=“X”
HEIGHT=“Y”
ALT=“Text”
VSPACE=“M”
HSPACE=“N”
ALIGN=Direction
53
<html>
<head>
<title>Using <IMG> Tag</title>
</head>
<body>
<H1 align="center"> This picture below was
generate by using <IMG> with theirs
attribute
</H1>
<img src="204_browsers.jpg" alt="Using Alt
attribute in <IMG>Tag" align="left">
The width and height attributes tell the browser how
big the image is.
This allows the Web page to render more quickly, as
the browser can
allocate space for the image and then move on to the
rest.
If you load the image in Netscape, the width and 54
55
<A HREF=“URL”>
Ex:
<A
HREF=“http://www.cnn.com”>CNN</
A>
Ex: <PRE>
<PRE>
Monday Tuesday
Wednesday
AC101 EN101
EI101
COM103 HU127 56
57

Web Interface &amp; Design

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Interface &amp; Design

Uploaded by

Copyright:

Available Formats

IS365

 Whatis Web browser?

 In addition, most modern

What is Web server?

 There are many different Web

 iPlanet Web server (From Netscape’s

The protocol of a URL tells the

Before it could translate a

The domain portion of the URL

IP stand for Internet Protocol. IP

Path and Filename

 Home page The entry page

Chapter 1(HTML Building

There are opening and closing

The attribute is entered between

 Value Attributes in turn often

value given will be ignored.

 Nesting Tags In some case

Absolute & Relative URLs

Starting Your Web Page

Designing Your Site

Starting Web Page

Some of the colors available are

BACKGROUND: This attribute

BGPROPERTIES: This attribute

Text: This attribute sets the

 LINK, ALINK, VLINK

Change the Font

You might also like

Web Interface & Design

Web Interface & Design