IS365 Web Interface Design Lecturer : Ly Romny E-mail : [email protected]

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

Cambodian Mekong University

IS365

 What

is 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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

What is Web server?  is

the 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

Cambodian Mekong University

 There

IS365

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

Cambodian Mekong University

 iPlanet



IS365

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 8 dex.html

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

Protoco Example lftp: ftp://ftp.fancyfoo.stuff/foob

ar.txt

Gophe gopher://deep.gopher.ho r: le/ http: http://unreal.place.com/ mailto mailto:[email protected] : news: News:alt.some.cool.newsgr oup telnet: telnet://user:password@ser ver:port 11

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

 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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

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:

---

25

Cambodian Mekong University

IS365

 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 for CLEAR attribute of left, right, Value or all. Any other value given will be ignored. Ex:
26

Cambodian Mekong University

IS365

 Nesting

Tags In some case you may want to modify your page contents with more than one tag. Ex:

Big Size Letter

Big Size Incorrect Letter

27

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

29

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

Starting Your Web Page

Designing Your Site

32

Cambodian Mekong University

IS365

Organizing Files

33

Cambodian Mekong University

IS365

Starting Web Page

<TITLE>your page title -------------- 34

Cambodian Mekong University

IS365

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 :

Using Heading

35

Cambodian Mekong University

IS365




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

Cambodian Mekong University

IS365

Figure 1

37

Cambodian Mekong University

IS365

---

The Horizontal rule tag,

---

, puts a horizontal line, or rule, across the screen. This is an tag. Ex: empty Robert Frost wrote:

---

“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

Cambodian Mekong University

IS365

Figure 2

39

Cambodian Mekong University

IS365



Attribute of BGCOLOR : The BGCOLOR attribute controls the background color of the page. It is expressed as a mixture of red, green, and blue (RGB).

40

Cambodian Mekong University

IS365

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: or

41

Cambodian Mekong University

IS365

42

Cambodian Mekong University

IS365

BACKGROUND:

This attribute allows you to place a picture or image in the background of your page. Ex:
BACKGROUND=“pic.jpg”>
Cambodian Mekong University

IS365

44

Cambodian Mekong University

IS365

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

Cambodian Mekong University

IS365

Text:

This attribute sets the color for all the text on the page except the text enclosed in an anchor,, container. Ex: 46

Cambodian Mekong University

IS365

 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:
Cambodian Mekong University

IS365

48

Cambodian Mekong University

IS365

Some Tags ...  <STRONG>....  ...  ... 

...

 <SUB>...  <SUP>...  <STRIKE>... 

49

Cambodian Mekong University

IS365


SIZE=n> The tag is useful for changing the size of the font for the whole page Ex: Size=5 50

Cambodian Mekong University

IS365

Change the Font 
Face=“fontname” Size=n Color=“Colorcode, colorname”> The container allows you to change the size of the contained text. 51

Cambodian Mekong University

IS365

Ex: <TITLE>with size increments This line is shown in the normal font
Change the FONT size bigger 52

Cambodian Mekong University

IS365



Attribute of tag: SRC=“URL” WIDTH=“X” HEIGHT=“Y” ALT=“Text” VSPACE=“M” HSPACE=“N” ALIGN=Direction 53

Cambodian Mekong University

IS365

This picture below was generate by using
<IMG> with theirs attribute

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

Cambodian Mekong University

IS365

55

Cambodian Mekong University

IS365

Ex: CNN A> Ex:

 Monday Wednesday AC101 EI101 COM103



Tuesday EN101 HU127



56



 Cambodian Mekong University



IS365



57