Lecture 1

INTRODUCTION TO
1
THE INTERNET
TOPICS
 Overview of Internet
 World Wide Web
 Client-server Architecture
 Web server and security
 Protocols
-URL
-WWW
-HTTP

2
SOME COMMON TERMS
 The Internet is a network of computers spanning the
globe. It is also called the World Wide Web.

 An Internet Browser is a software program that enables

you to view Web pages on your computer. Browsers
connect computers to the Internet, and allow people to
“surf the Web.”

 Internet Explorer is one of the browsers most

commonly used. There are other browsers available as
well, including Netscape.
3
 WHAT IS WEB?
 The Web (World Wide Web) consists of information
organized into Web pages containing text and graphic
images.
 It contains hypertext links, or highlighted keywords
and images that lead to related information.
 A collection of linked Web pages that has a common
theme or focus is called a Web site.
 The main page that all of the pages on a particular Web
site are organized around and link back to is called the
site’s home page.
4
 A Web Page is like a page in a book. Websites often
have several pages that you can access by clicking on
links. A Web site can be a collection of related Web
pages.

 Different
computers will have different home pages.
You can set your own webpage.

5
CLIENT-SERVER ARCHITECTURE
 A network architecture in which each computer or
process on the network is either a client or a server
 Components of client/server architecture:
 Communication network
 Clients
 Servers

6
2-TIER CLIENT-SERVER ARCHITECTURE

7
CON’T…
 2-tier client-server architecture
 client (browser) web
 Web page request
 mainly for presentation of information browser
 serving mainly static HTML pages

 server (simple web server)

 Response the request by client
 web-server processing web page

 The business logic can be done either of in the client

side or server side

web
server
8
3-TIER CLIENT-SERVER ARCHITECTURE

9
CON’T…
 3-tier client-server architecture
 data persists beyond request and response
 Application server
 server layer
 Make logical decision ,Evaluate and calculations

 expanded functionality

 database connectivity

 user authentication and sessions

 perhaps multi-threading

 client layer (web browser)

 Top most level of the application

 Translate tasks and results as user understandable form

 forms interface to interact with data

10
WEB SERVER AND SECURITY

 Web server
 Every Web site sits on a computer known as a Web server
 Every Web server that is connected to the Internet is given a unique
address called ip address.
 Common examples of web server software are
 Apache HTTP server
 MS Internet Information Server (IIS)
 Sun ONE web server
 Wamp(apache+ php+ mysql)

11
CON’T…
 Firewall –
 A firewall is simply a program or hardware device that filters the
information coming through the Internet connection into your
private network or computer system.
 If an incoming packet of information is flagged by the filters, it
is not allowed to pass through
 Methods
 Packet filtering
 Proxy service

 Stateful inspection

12
PROTOCOLS
 Each document/resource on the WWW needs to have an
identifier in order to be accessed by others.
 A Uniform Resource Identifier (URI), is a compact
string of characters used to identify or name a resource.
 A Uniform Resource Locator (URL) is a URI which
provides means of obtaining the resource by describing
its network “location”.

13
CON’T…
 URL
Uniform Resource Locator (URL): unique
identifiers used to locate a particular resource on the
network
A Uniform Resource Locator (URL) is a URI
which provides means of obtaining the resource by
describing its network “location”.

14
PARTS OF A WEB ADDRESS
 A web address is typically composed of four parts:
 For example, the address http://www.CoEng.et is made
up of the following areas:
 HTTP
This Web server uses Hypertext Transfer Protocol
(HTTP). This is the most common protocol on the
Internet.
 WWW
This site is on the World Wide Web.
 CoEng
The Web server and site maintainer.
 et
This tells us it is a site in Ethiopia.
15
CON’T
Top Level Domain (TLD) names
 com - Originally for commercial organizations, but now used by
individuals, government agencies, and nonprofits as well
 www.google.com
 Net - Internet service providers and other network-related
companies
 www.ethio.net
 org - Noncommercial (often nonprofit) organizations
 www.sourceforge.org
 gov - government agencies
 www.ena.gov.et
 mil - military
 edu - Educational domains
 www.bdu.edu.et
 int - International organizations like NATO and the International
Red Cross
16
 Generally top level domains classified as
1. Generic Top Level Domains
top-level domain that is used in particular by a specific type
of organization.
2. Sponsored Top Level Domain
proposed by private agencies or organizations
example .aero is sponsored by the
Société Internationale de Télécommunications Aéronautiques
3. Country Code Top Level Domains
example, .Ca

17
HOW TO SEARCH THE INTERNET
Two basic ways
1. if you know the address of the web page (example:
www.cbc.ca)

2. Using a search engine like Google to find the address.

This is called a keyword search

18
SEARCH THE INTERNET
 If you don’t know the address of the webpage, but
want to learn more about a topic or find a particular
website, you will need to do a search.

 There are several handy search engines out there

that will locate information for you. Two of the
mostly commonly used are:
www.google.com
www.yahoo.com
19
 WEB DESIGN FUNDAMENTALS
 Technical definitions:
 A webpage is a single HTML document
 A website is a collection of related WebPages
 Designing a good website requires more than just putting
together a few pages.
 Layout of web pages is very important

 Poor layout makes for -

 Difficult navigation
 Hard to locate information on page
 Visually unappealing

20
STEPS TO A WELL DESIGNED WEB SITE
 Have a goal
 Target your audience

 Create a plan

 Select a Web service provider

 Try it out

 Maintain it

21
HAVE A GOAL FOR YOUR WEB SITE
 What were you put on earth to accomplish?
 review your mission statement
 Do you want your web site to accomplish all or some of
those things?
 the more goals, the more difficult the task becomes
 What information do you need or want to provide?

22
IDENTIFY YOUR TARGET AUDIENCE
 Who is the information for?
 Do you have more than one audience?
 Can you serve them all with one Web site?

 What are the information needs of your audience?

 What are their habits, characteristics, culture, technical
capabilities, etc.
 Are they likely to start with the Web or another information
source?

23
PLAN IT OUT
 Identify information you already provide your audience.
 Identify information that you haven’t, but would like to
provide your audience.
 Identify the sources of information you want to provide
through your Web site.
 Prepare that information for the web by collecting it and converting
it.

24
PLAN IT OUT
 Develop a vision for your Web site and storyboard it
before construction begins.
 Share your vision and storyboard with your colleagues
and your bosses.
 Estimate initial times and costs for construction.
 Decide on the software/hardware tools necessary to construct your
site.

25
SELECT A WEB SERVICE PROVIDER
 Coordinate the method for publishing and updating your
Web pages.
 mail files
 FTP files

 Know your root address (domain name).

 Will you have a need for scripting and database
interaction?

26
TRY IT OUT: OPTIMIZE IT FOR YOUR
AUDIENCE
 Test it in-house.
 Test it on a sample audience.

 Test it on as many different computers and monitors and

browsers as possible.
 Test it using various Internet connections.
 Modems
 Direct connects

27
MAKE YOUR SITE WELL-ORGANIZED
 Decide how you want to organize your information
based on your users and what you know about them
 Ways to organize your site:
 by department or organizational chart
 by audience type

 marketing

 by subject

28
MAKE YOUR SITE ATTRACTIVE
 Choose simple colors that compliment each other &
work on most web browsers.
 Keep graphics less than 20,000 Bytes
(20 kilobytes) to make them download reasonably on a
home modem.
 Keep animated gifs to a minimum.

 Use graphics that compliment your image.

29
MAKE YOUR SITE USEFUL
 If you are unique, you’re already useful!
 If you are not unique, how do you differ from similar
Web sites?
 Is your content unique?
 Is your approach unique?
 Is your audience unique?
 Are you more up to date?
 Are you better organized?
 Are you more comprehensive?

30
KEEP YOUR SITE UP-TO-DATE
 In an organization, make this part of someone’s job. Pay
them to do it. It’s worth it.
 If a person is currently the “documentation person” or
the “flier person,” consider that person to be your
Webmaster.

31
SOME MORE TIPS

 What to do,
 why to do it on the Web
 Before we get started…
 What sites are you working on?
 What’s the purpose of your site?
 What audience(s) are you trying to reach?
 Site Planning
 Determine site goals
 Analyze your audience
 Analyze the “competition”
 Know your own abilities and resources
 Map the current site
 Design your new site 32
SITE GOALS AND GUIDELINES
 Why are you creating this site?
 What does the site owner hope to achieve with this site?

 What action does the site owner want the audience to

take as a result of visiting?
 What restrictions or guidelines must be followed when
designing the site?

33
AUDIENCE ANALYSIS
 Who are you trying to reach?
◦ Age
◦ Language and Culture
◦ Level of education
◦ Access to the Web (High-speed? Dial-in?)
◦ Familiarity with the Web
◦ Barriers to access?
What are they looking for at your site?
◦ Information
◦ Services
◦ Community
34
ANALYZE THE “COMPETITION”
 Look for sites with similar contents, purpose
 At other universities
 At other organizations
 In the private sector

 What are the trends and precedents?

 Where do they excel or fall short?

 Does your site need to “match” a parent site?

35
KNOW RESOURCES & ABILITIES

◦ What technical knowledge do you have?

◦ What tools, resources, and time do you have access
to (now AND later)?
 Software
 Web authoring tools

 Image editing and tools

 Animation tools

 Hardware
 Camera (video and/or still)

 Scanner (flatbed or slide)

 Other people
 NB: Think long-term, i.e., Be sure you have the
resources (human and technical) to maintain the site
once you’ve created it.
36
SITE MAP
 A site map is designed to show the connections between
pages
 A graphical site map uses lines to connect linked pages

37
 DESIGN (OR REDESIGN) THE SITE

 Review audience needs/wants with site owner

 Determine the site structure (site map)

 Gather content (visuals, information)

 Mock up a visual design

 Build the site in a “test” mode

 Perform (user) testing and make changes

 Put the site into production

 Maintain and update the site

38
 USABLE WEB PAGES
 Effective:
 enable user to find required information
 Efficient:
 enable information to be found quickly without additional effort
 Satisfying:
 motivate user to come again and give appropriate image

 To create a usable site it is essential to take a user-

centered approach to design.

39
USABILITY TESTING
 The testers should…
 Reflect your audience demographics

 Be (relatively) un coached

 The test should…

 Have clearly defined goals

 Be observed in some way

 Ask for tester feedback

 Notes

 Post-test interviews

40
HTML

Hypertext Markup Language

(HTML)

41
 HYPERTEXT MARKUP
LANGUAGE (HTML)
 An open standard
 Developed by the World Wide Web Consortium (W3C)
 A language used to format text and objects (such as images) to
be displayed in a Web browser.
 The display language of a browser
 Static—it is only display.
 Use other technologies to add dynamic function:
 Client-side (browser) scripting languages (JavaScript)
 Server-side programs (PHP, Java servlets)

42
HTML (CONT…)
 The user interface language of the Web.
 An HTML file is a text file containing small markup tags.
◦ The markup tags tell the Web browser how to display the page.
 Appearance
 Layout
 Content(can’t enforce an exact look)
 An HTML file must have an .htm or .html file extension.
 Text mixed with markup tags
◦ Tags enclosed in angle brackets
e.g., <H1>introduction</H1>

43
HTML (CONT…)
 Constitutes a collection of platform independent styles that
define the various components of a web document.
•
 Styles indicated by markup tags.
 What is HTML really?
 Plain-text documents can be created using any text editor.

44
 HTML (CONT…)
 What is a markup language?
 One where we can embed special tags or formatting commands in the
text.
 To describe how the text should be displayed / printed.
 HTML is a markup language
 Special formatting codes (called tags) to adjust fonts, create bulleted
lists, create forms, display images, create tables, etc.

45
HTML (CONT…)
 Simple, purist design principles
 HTML describes the logical structure of a document

 Browsers are free to interpret tags differently

 HTML is a lightweight file format

 Size of file containing just ”Hello World!”:

 Postscript: 11,274 Bytes
 MS Word: 19,456 bytes
 PDF: 4,915 bytes
 HTML :28 bytes

46
WHY DO WE USE HTML?
 Light
 Files are flat text and very small
◦ Quickly transferred over a network
 Easy to learn
 Smaller and less complex than other markup languages
 Less tags (instructions)
 Open standard
 Not proprietary
 Works with all platforms, all browsers, and all Web servers
 The rise of Internet technologies

47
TWO PARTS TO HTML

Source code Display

Browser
Text/HTML editor
When you open an HTML file
HTML files are flat-text files that
with a browser, the code is run.
have a .html (or .htm) extension. 48
SOME POINTS

 Most of the tags belong to the first category.

<tag-name> …… directives …… </tag-name>
 Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
 Tags may be nested
<html> <head>…</head> <body>…</body> </html>
 Most browsers have a VIEW SOURCE menu option.
 The HTML version of the page can be displayed.

49
SOME POINTS (CONT...)
 Browsers ignore all extra spaces and carriage returns within a
HTML document.
 Why?
 Browsers have to reformat the document to fit in the current display
area.
 It is good practice to use white spaces in a HTML document.
 Improves readability.

50
SOME POINTS (CONT...)
 Some tags can have one or more (named) attributes to define
some additional characteristics of the tag.
<img src=“baby.jpg”>
<body text=“#FFFFFF”
bgcolor=“#0000FF”>
<body text=“white” bgcolor=“blue”>

51
SOME POINTS (CONT...)
 Unrecognized tags
 Browsers normally ignore tags it does not recognize.
 Comment lines
 Comments are included between <!--- and --->.
 Comments cannot be nested.

<!--- A comment here --->

<!--- Another comment in
two lines --->

52
SOME POINTS (CONT...)
 A markup language formats text in between two “tags”. These
look like:
<code>formatted text</code>
 <code> begins the formatting tag
 </code> ends the formatting tag
 These tags are then read by a browser, which translates the tags
into the formatting that they represent.

53
SOME POINTS (CONT...)
 The left and right angle brackets are used to enclose all special
instructions, called tags.
 Two classes of tags:
◦ Those which appear in pairs.
<i> Good morning </i>
 Those which appear individually.

<img src=“baby.jpg”>
 Browsers interpret the tags to display a HTML page in
properly formatted form.

54
HTML DOCUMENT STRUCTURE

 A HTML document consists of two major portions:

 Head
 Contains information about the document, like the title and

“meta” data describing the contents.

 Body
 Contains the actual matter of the document.

 Gets displayed within the browser window.

55
HTML DOCUMENT STRUCTURE (CONT…)

<html>
<head>
(Header: information about the page)
</head>
<body>
(Body: Web page content)
</body>
</html>

56
BASIC HTML SYNTAX

HTML syntax
 Tags

– Instructions for the browser

<tag> Some text</tag>
 Nesting

– Close tags in the opposite order in which you opened

them.
<tag1><tag2>Some text</tag2></tag1>
 Attributes
– Specify attributes to use non-default behavior
57
<tag attribute=“value”>Text</tag>
HTML TAGS
 HTML
 <HTML>……</HTML>
 These tags begin and end an HTML document

 Used to bracket an entire HTML document.

 Optional for most browsers.

 Attributes:

 lang = language code

 Language code indicates the primary language of the document.

 en – English

58
HTML TAGS (CONT…)
 HEAD
 <HEAD >……</HEAD>
 These tags are in the beginning of the document.
 Important information is stored in-between these
tags including: title, meta-data, styles, and
programming scripts.
 Used to provide information about a web page.
 Nests within itself other tags like
<base>, <meta> and <title>.

59
HTML TAGS (CONT…)
 <base>
 Attribute: href=url
 Specifies the base pathname for all relative URLs in the document.
 No end tag.
 <meta>
 Used to provide information about a document.
 Keywords or descriptions to aid search engines.

60
HTML TAGS (CONT…)

 TITLE
 <TITLE>……</TITLE>
 These tags are in-between the HEAD tags and contain the
text that appears in the title of the webpage.
 Usually appears on the title bar of the browser
window.

61
HTML TAGS (CONT…)

 BODY
◦ <BODY>…..</BODY>
◦ As you may have guessed, the body tags contain all the text in the body
of the document.
◦ Used to bracket the body of a HTML document.
◦ Attributes:
 background=url specifies an image file to be used as tiling background.
 bgcolor=color Sets the background color of the document.
 text=color Sets the default color for the normal text in the document.

62
HTML TAGS (CONT…)

 alink=color Sets the color of active links.

 link=color Sets the default color for all the links in a document.
 vlink=color Sets the color for the visited links.

63
 HTML TAGS (CONT…)
Source code Display
<html>
<head>
<title> My First Webpage</title>
</head>
<body>
<h1 align="center">My First
Webpage</h1>
<p>Welcome to my first web page. I am
writing this page using a text editor and
plain old html.</p>
<p>By learning html, I'll be able to create
web pages like a pro....<br>
which I am of course.</p>
</body>
</html>
64
HOW TO SPECIFY COLORS?
 Two ways:
 By specifying the red, green, blue or RGB components.
 Each color encoded in 8 bits.
 00 means that the color is turned off; FF means fully turned on.
 Example:
<body text=“#FFFFFF” bgcolor=“#0000FF”>

65
HOW TO SPECIFY COLORS?
(CONT…)
 By specifying the color name.
◦ Some of the colors that are supported by browsers are:
aqua black blue fuchsia
gray green lime maroon
Navy olive purple red
Silver teal yellow white
◦ Many other colors are possible.
◦ Example:
<body text=white>
<body bgcolor=“yellow”>

66
 TEXT FORMATTING IN HTML
Paragraphs and Headings
 <Hn> ……. </Hn>
◦ Used to generate headings, 1 ≤ n ≤ 6.
◦ Six different levels of headings.
 <H1> is the largest, <H6> is the smallest.
 <P>
◦ Paragraph marker, used to separate text into paragraphs.
◦ End tag </P> is optional.
◦ A series of paragraph tags <p><p>…<p> with no intervening text is
treated as a single <p>.

67
TEXT FORMATTING IN HTML
 <BR>
 Used to indicate that the text following <BR> should begin on the
next line.
 The amount of line spacing is less than that of a <P> break.
 Example:

This is the first line. <br>

This is the second line. <br>
This is the third.

68
TEXT FORMATTING IN HTML
 <HR>
 Produces a horizontal line, which can be used to delimit sections.
 Length of the line can be specified.
 Examples:
<hr>
<hr size=“20”> [ noshade option possible ]
<hr width=“75%”>
<hr align=“right” width=120>
 Across full width of browser, 20 pixels thick, 75% of available

page width, and 120 pixels right-justified.

69
TEXT FORMATTING IN HTML
 <address> ……. </address>
 Supplies the contact information of the author.
 Generally formatted in italics, with a line break above and
below.
 Example
<address>
Ato Ayele Kebede <br>
Dept. of Information Systems <br>
Bahir Dar University <br>
Email: [email protected]
</address>

70
APPEARANCE OF TEXT
 <b> ……. </b>
 Displays the enclosed text in bold.
 <i> ……. </i>
 Displays the enclosed text in italics.
 <cite> ……. </cite>
 Tells the browser that this is a citation. Usually displayed in italics.

71
 TEXT FORMATTING IN HTML
 <pre> ……. </pre>
 Allows browser to display carefully laid out text.
 Used to display program listings.
 Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>

72
TEXT FORMATTING IN HTML
 _…….
 Displays the enclosed text as subscript.
 ^…….
 Displays the enclosed text as superscript.
 <font> ……. </font>
 Specifies the style of the enclosed text.
 Attributes:
 color = color name
 face = typeface

 size = value [1 to 7; 3 is the default]

73
TEXT FORMATTING IN HTML
 <center> ……. </center>
 Centers the enclosed elements horizontally on the page.
 <P align=option> ……. </P>
 Used to align a paragraph.
 Option can be left, right or center.

74
SOME EXAMPLES
<html>
<head>
<title> Title of the Document </title>
</head>
<body text="white" bgcolor=“blue”>
This is the content of the document.
This is an <i> italic </i> font,
and this is <b> bold </b>.
</body>
</html>

75
EXAMPLE
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text
editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like....<br>
which I am of course.</p>
</body>
</html>
76
EXAMPLE
<html>
<head><title>Demonstration of Headings </title></head>
<body text="#FFFFFF" bgcolor="#0000FF">
<h1>This is a first level heading. </h1>
<h2>The second level</h2>
<h3>The third level</h3>
<h4>Fourth level. </h4>
<h5>Fifth level.</h5>
<h6>And, finally, the sixth .</h6>
A small amount of plain non-heading text.
</body>
</html>
77
EXAMPLE
<html>
<head><title>Paragaph Aligning</title></head>
<body text=“white” bgcolor=“green”>
<h3>
<P ALIGN=CENTER> This paragraph will be aligned
at the center. Even as the browser window
size changes, the alignment remains the same. </P>
<P ALIGN=LEFT>This demonstrates left alignment. </P>
<P ALIGN=RIGHT>How about aligning by the right
margin? </P>
</h3>
</body>
</html> 78
 EXAMPLE
<html>
<head><title>Layout Features 1</title></head>
<body text=“yellow” bgcolor=“blue”>
<h2> <pre>
begin
if (a > b)
then max := a;
else max := b;
end;
</pre> </h2>
<hr size=8 width=50%>
<hr>
<hr size=20 width="75%" noshade>
79
</body>
</html>
EXAMPLE
<html>
<head><title>Layout Features 2</title></head>
<body text=“yellow” bgcolor=“blue”>
<h3>Extended Quotations</h3>
<blockquote>
<P>This is the first paragraph within
the BLOCKQUOTE environment. </P>
<P>Another paragraph starts here. </P>
We type some text here without explicitly
giving paragraph break.
</blockquote>
</body>
</html> 80
EXAMPLE
<html>
<head><title> Superscript and Subscript </title></head>
<body text=“white” bgcolor=“blue”>
<h1> y = x ³ + 2 x ² + 4
</h1>
<br>
<h2> W _total = x ² - 5 <h2>
</body>
</html>

81
HTML LISTS
Types of Lists
 There are a number of tags for building lists.
◦ Serves the purpose of improving the readability of the text.
 Depending on the way the list items are displayed, lists may
be divided into three types:
 Unnumbered list
 Numbered list
 Definition list

82
UNNUMBERED LIST

 Used to display a set of related items that appear in no

particular order.
◦ Each item is indented with a preceding bullet symbol.
 Specified using the tag:
<UL> ……… </UL>
 The individual items in the list are specified using the <LI> tag.
 Attributes:
type = disc | circle | square

83
 UNNUMBERED LIST (CONTD.)
 The <li> items can contain multiple paragraphs, specified using
<P>.
 Example:
<UL>
<LI> First item of the list</li>
<LI> Second item of the list</li>
<LI> Third item of the list</li>
</UL>

84
UNNUMBERED LIST (EXAMPLE 1)
<html>
<head><title> Bulleted list 1 </title></head>
<body text=“white” bgcolor=“blue”>
<h2> List of flowers: </h2>
<h3>
<UL>
<li> Rose </li>
<li> Lotus </li>
<li> Daffodil </li>
<li> Marigold </li>
</UL>
</h3>
</body>
85
</html>
UNNUMBERED LIST (EXAMPLE 2)

<html>
<head><title> Bulleted list 2 </title></head>
<body text=“white” bgcolor=“blue”>
<h2> List of flowers: </h2>
<h3>
<UL type=square>
<li> Rose</li>
<li> Lotus </li>
<li type=“circle”> Daffodil </li>
<li> Marigold </li>
</UL>
</h3>
</body>
</html> 86
NUMBERED LIST
 Numbered or ordered lists are used when the sequence of the
items is important.
 Specified using the tag:
<OL> ……… </OL>
 The individual items in the list are specified using the <LI> tag.
 Example:
<OL>
<LI> This is number one</LI>
<LI> This is number two</LI>
<LI> This is number three</LI>
</OL>

87
NUMBERED LIST (CONTD.)
 The list items are numbered sequentially as 1,2,3,…
 Attributes:
type = 1 | A | a | I | i
 Specifies the style of numbering.
 1,2,3,… or A,B,C,… or a,b,c,… or I,II,III,… or i,ii,iii,…

88
NUMBERED LIST (EXAMPLE 1)
<html>
<head><title> Numbered list 1 </title></head>
<body text=“white” bgcolor=“blue”>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil</LI>
<LI> Put in noodles and masala </LI>
<LI> Wait for 2 minutes </LI>
<LI> Serve in a plate </LI>
</OL>
</h3>
</body>
</html>

89
NUMBERED LIST (EXAMPLE 2)
<html>
<head><title> Numbered list 2 </title></head>
<body text=“white” bgcolor=“blue”>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =“A”>
<LI> Put some water to boil</LI>
<LI> Put in noodles and masala </LI>
<LI> Wait for 2 minutes </LI>
<LI> Serve in a plate </LI>
</OL>
</h3>
</body>
</html>

90
NUMBERED LIST (EXAMPLE 3)
<html>
<head><title> Numbered list 3 </title></head>
<body text=“white” bgcolor=“blue”>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =“I”>
<LI> Put some water to boil </LI>
<LI> Put in noodles and masala </LI>
<LI type=1> Wait for 2 minutes </LI>
<LI> Serve in a plate </LI>
</OL>
</h3>
</body>
</html>

91
 DEFINITION LIST
 Specified using the tag:
<DL> ……… </DL>
 Each definition comprises of a definition term (<DT>) and a
definition description (<DD>).
 Web browsers format each definition on a new line and indent it.

92
DEFINITION LIST (CONTD.)
 Example:
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL>

93
DEFINITION LIST (EXAMPLE)
<html>
<head><title> Definition list 1 </title></head>
<body text=“white” bgcolor=“blue”>
<h2> Some important protocols: </h2>
<h3>
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL></h3>
</body>
</html>
94
 NESTING OF LISTS
 Any list can be nested within another list.
 When unnumbered lists are nested, the browser automatically uses a
different bullet symbol for each level.
 When numbered lists are nested, by default, every level is numbered
using the arabic numerals (1, 2, 3, …).

95
NESTING OF LISTS (EXAMPLE 1)
<html><head><title> List Nesting 1 </title></head>
<body text=“white” bgcolor=“blue”>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented </LI>
<LI> platform independent </LI>
<LI> can be embedded within HTML </LI>
</UL> </LI><BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language </LI>
<LI> powerful string handling capabilities </LI>
<LI> widely used for writing CGI scripts </LI>
</UL></LI>
</UL> </H3> 96
</body></html>
NESTING OF LISTS (EXAMPLE 2)
<html><head><title> List Nesting 2 </title></head>
<body text=“white” bgcolor=“blue”>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented </LI>
<LI> platform independent </LI>
<LI> can be embedded within HTML </LI>
</UL> </LI> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language </LI>
<LI> powerful string handling capabilities </LI>
<LI> widely used for writing CGI scripts </LI>
</OL> </LI>
</OL> </H3> 97
</body></html>
SPECIFYING HYPERLINKS

Hyperlinks
 Chief power of HTML comes from its ability to link text and/or
image to another document or section of a document.
 These links are called hyperlinks.
 Browser by default highlights the hyperlinks with color and/or underline.

98
 HYPERLINKS (CONTD.)
 Specified using the anchor tag:
<A> ……. </A>
 Requires an attribute called “HREF” which specifies the path
of the resource to be linked.
 Anchors can be used to go to a particular section in a document.

 Within the same (or different) document.

 Example:
<a href=“face.jpg”> portrait </a>
<a href=www.google.com> search </a>
<a href=“mailto:[email protected]”> Mail me </a>
<a href=slides/ch5.pdf> download pdf </a>

99
 URLS
Relative URL
 Provides a link to another document relative to the
location of the current document.
 Commonly used when referring to documents
residing on the same web site.
 Examples:
<a href=“TENNIS/sania.html”> Sania Mirza </a>
 means that the document is one folder down from the html document that

called for it. This can go on down as many layers as necessary.

<a href=“../NEWS/cricket.html”> Cricket </a>
 means that the document is in one folder up from the html document that

called for it.

 These kind of links are called relative links.
100
RELATIVE VERSUS ABSOLUTE
URLS (CONTD.)
Absolute URL
 The complete path name of the document in the server is
specified.
 Necessary when linking to documents on other servers.

 Example:

<a
href=“www.iitkgp.ac.in/people/isg/paper5.pdf”
> One of my recent papers </a>

101
LINKING TO SPECIFIC SECTIONS
 Two steps involved.
 Define a named section in a document.
<a name=“tennis”> <h2>About tennis</h2> </a>
 Provide a link to the named section.
<a href=“#tennis”> Information on Tennis </a>

102
 LOCAL HYPERLINKS
 When two pages are on the same directory you can link
from one to the other by using only the filename.

103
LOCAL HYPERLINKS
Pros:
 If you upload the whole directory on another server, the links
will still work.

Cons:
 If you copy a part of your web pages on a local disc, the links
may not work.

104
INTERNAL HYPERLINKS
 Internal hyperlinks can be used to jump to another part of the
same web page.

105
INTERNAL HYPERLINKS
 Anchor tag using a # before the name of the target
location.
 Use the name attribute to define where the link will
take you.

106
HYPERLINKS (EXAMPLE)
<html><head><title> Link to Other Sites </title></head>
<body text=“white” bgcolor=“blue” link=“red” vlink=“green”>
My favorite search engines are:
<ol>
<li> <a href="http://www.google.com"> Google </a></li>
<li> <a href="http://www.yahoo.com"> Yahoo </a></li>
<li> <a href="http://www.altavista.com"> Altavista</a></li>
</ol>
<hr>
<address>
Mr. Ayele Kebede<BR> <BR>
<a href="mailto:[email protected]"> <img src="x.gif"
align=middle width="70" height="70“/> </a>
</address>
</body></html>

107
INLINE IMAGES AND OTHER DOCUMENTS
 Supported image formats:
 JPEG, GIF, PNG
 Specified using the standalone tag:
<IMG>
 Attributes of <IMG>:
 SRC: specifies the URL of the image file
 HEIGHT: height (in pixels) to be set aside for the image.
 WIDTH: width (in pixels) to be set aside for the image.

108
INLINE IMAGES (CONTD.)
 The HEIGHT and WIDTH attributes tells the
browser to set aside appropriate space (in pixels)
for the image as it downloads the rest of the file.
 Some browsers stretch or shrink an image to fit into the allotted space.
 Example:
<IMG SRC=xyz.gif>
<img src=tiger.jpg height=80 width=150>

109
INLINE IMAGES (EXAMPLE 1)
<html><body>
An image
<img src=xyz.gif align="bottom" width="48“ height="48">
in the text
<p> An image
<img src =xyz.gif align="middle" width="48“ height="48">
in the text
<p> An image
<img src =xyz.gif align="top" width="48“ height="48">
in the text
</body></html>

110
INLINE IMAGES (EXAMPLE 2)
<html>
<body>
<img src =“xyz.gif” align ="left" width="48"
height="48">
A paragraph with an image. The image will float to the left of this text.
<p>
<img src =“xyz.gif” align ="right" width="48“ height="48">
A paragraph with an image. The image will float to the right of this
text.
</body>
</html>

111
INLINE IMAGES (EXAMPLE 3)
<html>
<body>
<img src= “x.gif" width="20" height="20"> <p>
<img src= “x.gif" width="45" height="45"> <p>
<img src= “x.gif" width="70" height="70"> <p>
Resizing an image by changing the values in the
"height" and "width" attributes of the img tag.
</body>
</html>

112
INLINE IMAGES (EXAMPLE 4)
<html>
<body>
It is possible to use an image as a link. Click on the
image below to go to google.
<P>
<a href=“www.google.com"> <img src=x.gif> </a>
</body>
</html>

113
 HTML TABLES
 Tables are made up of cells, arranged into rows.
 Tags used in creating an HTML table:
 <table></table> marks the start and end of table contents
 <tr></tr> marks the start and end of each table row
 <td></td> marks the start and the end of the contents of a data cell
 <caption></caption> formats text to appear as a table caption
 An example:
<table>
<tr>
<td> Good </td> <td> Bad </td>
</tr>
<tr>
<td> Cute </td> <td> Ugly </td>
</tr>
</table>
114
HTML TABLES

Good Bad

cute ugly

115
THE TABLE TAGS
 <TABLE> …… </TABLE>
 Defines the beginning and the end of a table.
 Can have several attributes:
 bgcolor = #rrggbb or color name

 rules = all | cols | rows | none

 border = number

 height = number, percentage

116
HTML TABLES
 <TR> …….. </TR>
 Defines a row of cells within a table.
 Can have several attributes:
 bgcolor = #rrggbb or color name
 align = left | center | right | justify

 <CAPTION> …….. </CAPTION>

 Provides a caption for the table.
 Must immediately follow the “table” tag, and precede all other tags.

117
 HTML TABLES
 <TD> …….. </TD>
 Defines a table data cell.
 A table cell can contain any content, like an image, or even another
table.
 Can have several attributes:
 bgcolor = #rrggbb or color name
 colspan = number
specifies the number of columns the currect cell should span

(default is 1).
 rowspan = number

similar

118
 HTML TABLES
 <TH> …….. </TH>
 Defines a table header cell.
 Browsers generally display the contents of the header cells in bold, and
centered.
 Same attributes as the <TD> tag.

119
 TABLE EXAMPLE 1

<table>
<tr> <td colspan=2> Hello </td> </tr>
<tr> <td> Good </td> <td> Day </td> </tr>
</table>

Hello
Good Day

120
TABLE EXAMPLE 2
<table>
<tr> <td rowspan=2> Hello </td>
<td> Good </td> </tr>
<tr> <td> Day </td> </tr>
</table>

Hello Good
Day

121
TABLE EXAMPLE 3
<table border=1>
<caption> My Table </caption>
<tr> <th> Name </th> <th> Marks </th> </tr>
<tr> <td> Ayele</td> <td> 86</td> </tr>
<tr> <td> Kebede</td> <td> 65</td> </tr>
</table>

Name marks
Ayele 86
Kebede 65

122
 HTML FRAMES
 What are frames?
 A method for dividing the browser window into smaller subwindows.
 Each subwindow displaying a different HTML document.
 How does a page with frame look like?

123
124
MERITS AND DEMERITS

 Merits:
 Allow parts of the page to remain stationary while other parts scroll.
 They can unify resources that reside on separate web servers.
 There is a <noframe> tag, using which it is possible to add
alternative content for browsers that do not support frames.

125
 MERITS AND DEMERITS
Demerits:
 All browsers do not support frames.
 Documents nested in a frame is more difficult to bookmark.
 Load on the server can be significantly increased, if there are a large
number of frames in the page.
 Frames are very difficult to handle for search engines.

126
 THE FRAME TAGS
<FRAMESET> …….. </FRAMESET>
 Defines a collection of frames or other framesets.
 Attributes:
 cols = list of lengths (number, %, or *)
 rows = list of lengths (number, %, or *)

 Establishes the number and sizes of columns (vertical frames) or rows

(horizontal frames) in a frameset.

 In number of pixels, percentage of total area, or relative values (*) based on

available space.

127
THE FRAME TAGS

 <FRAME>
 Defines a single frame within a frameset.
 Attributes:
 frameborder = 1 | 0

 src = url

 scrolling = yes | no | auto

 marginwidth = number

 marginheight = number

 name = text

128
THE FRAME TAGS
 <NOFRAMES> …… </NOFRAMES>
 Specifies the contents to be displayed by browsers that cannot display
frames.
 Ignored by browsers that support frames.

129
 FRAME EXAMPLE 1
<html>
<head><title> A document with
frame </title> </head>
<frameset cols = “*,*”>
<frame src = “left.htm”>
<frame src = “right.htm”>
</frameset>
<noframes>
Browser does not support
frames.
</noframes>
</html>

130
FRAME EXAMPLE 2

<html>
<head><title> Another one with frames </title>
</head>
<frameset cols = “100,2*,*”>
<frame src = “left.htm”>
<frame src = “right.htm”>
</frameset>
<noframes>
Browser does not support frames.
</noframes>
</html>
131
FRAME EXAMPLE 3

<html>
<head> <title> Nested frames </title> </head>
<Body><frameset cols = “25%, *”
<frame src = “one.htm”>
<frameset rows = “100,150,100”>
<frame src = “two.htm”>
<frame src = “three.htm”>
<frameset cols = “*,*”>
<frame src = “four.htm”>
<frame src = “five.htm”>
</frameset> </frameset> </frameset>
</body></html> 132
LINKING TO A FRAMED
DOCUMENT
 When a hyperlink is clicked, by default, the new page is
loaded into the same frame.

 We can load the linked page into new frame also.

133
LINKING TO A FRAMED DOCUMENT
 Assign a name to the targeted frame.
<frame src = “somepage.htm” name = “abc”>
 Specify this frame in a hyperlink as follows:
<a href = “newpage.htm” target=“abc”> … </a>
 The document newpage.htm will load into the frame names
“abc”.

134
 HTML FORMS
Introduction
 Provides two-way communication between web servers and
browsers.
 Demand for most of the emerging applications.
 Providing dynamic contents.
 What is a HTML FORM?
 A form basically contains boxes and buttons

135
HTML FORMS

 Real-life examples
 Search engines
 On-line purchase of items

 Registration

 The form allows a user to fill up the blank entries and send it back to the
owner of the page.
 Called SUBMITTING the form.

136
FORM TAGS AND ATTRIBUTES
 Several tags are used in connection with forms:
<form> …… </form>
<input>
<textarea> …… </textarea>
<select> …… </select>

137
<FORM> …… </FORM> TAG

 This tag is used to bracket a HTML form.

 Includes attributes which specify where and how to deliver filled-up
information to the web server.
 Two main attributes:
 METHOD
 ACTION

138
HTML FORMS
 METHOD:
◦ Indicates how the information in the form will be sent to the web
server when the form is submitted.
◦ Two possible values:
 POST: causes a form’s contents to be parsed one element at a time.
 GET: concatenates all field names and values in a single large string.
◦ POST is the preferred method because of string size limitations in
most systems.

139
 HTML FORMS
 ACTION:
 Specifies the URL of a program on the origin server that will be
receiving the form’s inputs.
 Traditionally called Common Gateway Interface (CGI).
 The specified program is executed on the server, when the form is
submitted.
 Output sent back to the browser.

140
HTML FORMS
 Typical usage:
<FORM METHOD=“POST” ACTION=“cgi-bin/myprog.pl”>
……..
……..
</FORM>

141
 <INPUT> TAG
 This tag defines a basic form element.
 Several attributes are possible:
 TYPE
 NAME

 SIZE

 MAXLENGTH

 VALUE

 SRC

 ALIGN

142
HTML FORMS
 TYPE:
◦ Defines the kind of element that is to be displayed in the form.
 “TEXT” – defines a text box, which provides a single line area for entering
text.
 “RADIO” – radio button, used when a choice must be made among several
alternatives (clicking on one of the buttons turns off all others in the same
group).
 “CHECKBOX” – similar to the radio buttons, but each box here can be
selected independently of the others.

143
HTML FORMS
◦ “PASSWORD” – similar to text box, but characters are not shown as
they are typed.
◦ “HIDDEN” – used for output only; cannot be modified (mainly used to
refer to choices that have already been made earlier).
◦ “IMAGE” – used for active maps. When the user clicks on the image,
the (x,y) co-ordinates are stored in variables, and are returned for
further processing.
◦ “SUBMIT” – creates a box labeled Submit; if clicked, the form data
are passed on to the designated CGI script.
◦ “RESET” – creates a box labeled Reset; if clicked, clears a form’s
contents.

144
HTML FORMS
 NAME:
◦ Specifies a name for the input field.
◦ The input-handling program (CGI) in reality receives a number of
(name,value) pairs.
 SIZE:
◦ Defines the number of characters that can be displayed in a TEXT box
without scrolling.
 MAXLENGTH:
◦ Defines the maximum number of characters a TEXT box can contain.

145
 HTML FORMS
 VALUE:
◦ Used to submit a default value for a TEXT or HIDDEN field.
◦ Can also be used for specifying the label of a button (renaming
“Submit”, for example).
 SRC:
◦ Provides a pointer to an image file.
◦ Used for clickable maps.
 ALIGN:
◦ Used for aligning image types.
◦ ALIGN = TOP | MIDDLE | BOTTOM

146
 <TEXTAREA> … </TEXTAREA> TAG
 Can be used to accommodate multiple text lines in a box.
 Attributes are:
 NAME: name of the field.
 ROWS: number of lines of text that can fit into the box.
 COLS: width of the text area on the screen.

147
<SELECT> …. </SELECT> TAG
 Used along with the tag <OPTION>.
 Used to define a selectable list of elements.
◦ The list appears as a scrollable menu or a pop-up menu (depends on
browser).
 Attributes are:
◦ NAME: name of the field.
◦ SIZE: specifies the number of option elements that will be displayed
at a time on the menu. (If actual number exceeds SIZE, a scrollbar
will appear).

148
<SELECT> …. </SELECT> TAG
 MULTIPLE: specifies that multiple selections from the list can
be made.
<FORM ………….>
……..
Languages known:
<SELECT NAME=“lang” SIZE=3 MULTIPLE>
<OPTION> English</OPTION>
<OPTION> Amharic </OPTION>
<OPTION> Afan Oromo </OPTION>
<OPTION> Tigrigna </OPTION>
</SELECT>
</FORM>

149
EXAMPLE 1
<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>
<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF“
LINK="#FF9900" VLINK="#FF9900“ ALINK="#FF9900">
<CENTER><H3> Student Registration Form </H3>
</CENTER>
Please fill up the following form about the courses you will
register for this Semester.

150
EXAMPLE 2
<HTML><BODY>
<FORM METHOD="POST" ACTION="/cgi/feedback">
<P> Name: <INPUT NAME="name" TYPE="TEXT“
SIZE="30" MAXLENGTH="50">
<P> Roll Number: <INPUT NAME="rollno“ TYPE="TEXT"
SIZE="7">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT" SIZE="6">
<INPUT NAME="course2" TYPE="TEXT" SIZE="6">
<INPUT NAME="course3" TYPE="TEXT" SIZE="6">
<P> <P> Press SUBMIT when done.
<P> <INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
151
</FORM> </BODY> </HTML>