E-Mail And Internet (1 Day)

 Introduction Internet, E-mail, Protocol

Internet: The internet is a “network of networks”. It is a global collection of high powered computers
that are connected to each other with network cables telephone lines, microwave dishes, satellites etc.

Server: Computer storing documents, sound files, video clips, program files, electronic shopping
centres, animations, pictures, interactive contents and other information and presenting them
electronically to others on net are known as servers.

Gateway: A Gateway is a communication device or programs that pases data between networks having
similar funtions but dissimilar implemetations.

Ineternet Service Providers(ISP): ISP is a interenet service provider on periodical charges and/or
installation charges. Serial Line Input Protocol(SLIP) or Point to Point Protocol (PPP) is used for
connecting internet. This allows the users to surf without any intervention of the ISP servers. TCP/IP
connection internet must have PPP and SLIP protocols.

Modem: (Modular/Demodular) Modem is a device to translate the digital signals to analog and vice
versa. (Integrated Services Digital Network) ISDN is a digital telephone network which provides fastest
internet for the users.

How Internet Works : Once you send the mail. The user and the Recipient may be on different
networks, its like calling a local telephone number and asking for the area code. The exact IP Address
may be away from the User. There may be many networks which the user mail has to cross to reach the
recipient. The email is broken into many pieces and sent in many packets, routers will redirect the
packets to the destination. The mails while passing through networks are stored in different places with a
table of contents & addresses, and sent at their leisure.

WWW: Berner Lee is known as father of Word Wide Web. It’s a consortium.

Search Engines: Search engines provide the information based on certain keyword/keyword
combination. Ex : Google.com, infoseek.com, altavista.digital.com, cyber411.com.

Helper Application: Helper applications are small programs which take little space in the memory of
your computer to play certain files, audio, video, etc on your system. They will be downloaded by the
browser automatically and play the file on your system. Ex: Quick Time, Real Player etc.

Types of Emails :

(a) Web Based Free E-Mail These mails are free on the net, but you have to bear with the
advertisements they pose. Ex. Google, yahoo, hotmail etc.
(b) Internet – Based Forwarding Services NetForward.com is an example, which will allow you
give all your emails of different free-email services and get one email and address from them so
that you can attend to all the emails with one ID and Password.
 (c) E-mail Service Providers They are superior in quality of service and solutions. ESPs use X.25
or X400 protocol for email. Return confirmation, prioritization of mails are few advantages of
this system. Charges are made as per the volumes of mails.
(d) Email through Internet Service Provider: This is known as Gateway Internet Service,
generally based on Unix and text based mails.

Protocol : A protocol is a set of rules to be followed while communicating with other computers. The
protocol mentions the style of bits on net for lower levels(the bit sequence for reading information) and
exchange for high level application programs (the way two programs send a file on net).

TCP/IP(Transmission Control Protocol/Internet Protocol) is a collection of protocols. It uses five layers

of the ISO/OSI model (International Standard Organization’s Open System Interconnect). ISO/OSI model
defines (1) Application (2)Presentation (3)Session (4) Transport (5) Network (6) Data Link (7) Physical
layers.

HTTP (Hyper Text Transmission Protocol) is web Native Protocol.

SLIP(Serial Line Internet Protocol) and PPP(Point to Point Protocol) are used by ISPs to connect their
users on their servers.

POP (Post Office Protocol) & SMTP(Simple Mail Transport Protocol) are two protocols used for mail
services.

FTP (File Transfer Protocol) is a protocol used for transferring files on net. To transfer files using FTP,
one needs a client program and a server program. FTP server is a program on a computer which will
assist the files to be downloaded to client computer. Its like an online library. Windows provides a
program for FTP called ftp.exe. Type ftp in the run command from start button. WSFTP is also a
program which allows to upload files to a server.

Protocols for EMail: There are two mail protocols POP(Post Office Protocol) and SMTP(Simple Mail
Transfer Protocol). All the ISPs have POP and SMTP servers for maintaining emails.

WWW consortium is a combination of private industries and universities that work together to guide
technical development of the Web and set the web standards. RFC(Request For Comments) is one way
how you can get information about internet. Each RFC has a number to address.
 HTML(Duration 10 Days)
Hyper Text Markup Language

Domain Names and IP Addressing

Addressing computers on net is done in two ways (a) Domain names and (b) IP Addresses.

Domain Names (for human understanding)

Domain names follow a format called the Domain Name System(DNS). Domain names describe
organizational or geographic realities. They indicate which country the domain is and which organization
owns it.

Ex1: .com – commercial, .edu – Education, .gov – government, .mil – military networks.
Ex2: .in – India, .de – Germany, .np – Nepal, .nz – New Zealand.

IP Address (for Machine understanding)

An IP Address is a set of four numbers separated by a dot(32 bits). Ex: “202.54.15.175”. It contains two
parts (a) network address (b) Node address. There are three classes of networks and also IP Address
reserved for special purposes. Ex 1.1.1.1 means “All Networks”, 0.0.0.0 means “This Network” and 127
is reserved for loop back tests.

Class Decimal range of network Significance

Address
A 1-127 Netwk.Node.Node.Node
B 128-191 Netwk.Netwk.Node.Node
C 192-223 Netwk.Netwk.Netwk.Node

DNS Server: Domain Name Service (DNS) servers translates the domain name of another computer into
an IP(Internet Protocol) address and vice versa on request. A format called Domain Name System is
followed by all computers on net.

Server : Server is the computer which provides the information. It has server side scripts for handling the
requests of the client and sending the data required. It has a IP Address and Domain Name.

Client: Client is the user of the information which is provided by the server. It can ask information and
collect the data and display.

Browser : A Browser is a software programme which connects other systems on the world wide web. It
automatically connects other systems, maintains connections, maintains memory cache, and displays the
data in a formatted style that a user can understand. Ex: Internet Explorer, Netscape Navigator, Mozilla
FireFox etc.

Java Plug-In A java plug-in is incorporated in almost all the latest browsers. This is an additional
software for the browsers for extending the facilities of programming to User and Server.
URL: Uniform Resource Locator is the address of any file. For ex “HTTP://WWW.Google.com”
contains two parts (a) HTTP which is the protocol which has to be used along with this site. (b)
“Google.com” which gives the domain.
Ex: “http//www.w3.org/TR/REC-html40/” means There is a document available via the HTTP protocol,
residing on the machine www.w3.org, accessible via the path “/TR/REC-html40/”.

(a) Fragment Identifiers : This kind of URI which denotes a link within the current page ends with
“#” followed by an anchor identified (fragment identifier). Ex :
“http/mywebsite.com/html/top.html#section_2” indicates that “section_2” is an anchor in
top.html page.
(b) Relative URI’s: Denotes a path which is in relation to the current directory. One level up/down
to the current directory. Relative path is resolved to full URI’s using the base URI. Base URI is
the path of the current directory.

How to create HTML pages.

Start notepad from the start – programs – accessories. Enter the HTML code in the file and save it with
“ .html” file extension. Open the browser(Internet Explorer/Opera) and open the file from the browser
from the place where you have stored. And see the output of your file. Use “Alt +Tab” to toggle between
the notepad and browser.

What is HTML?
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
 The browser will remove extra spaces and extra lines when the page is displayed.
 HTML is not case sensitive. No difference between “TEXT” and “text”.

HTML Structure :
<HTML>
<HEAD>
</HEAD>
<BODY>
YOUR CODE HERE
</BODY>
</HTML>

HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

Container Tags
Container tags are those having text or tag elements in the middle and start with a tag and end with
another tag. Ex.

Start tag * Element content End tag *

<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
* The start tag is often called the opening tag. The end tag is often called the closing tag.

Nested HTML Elements

<html>
<body>
<p>This is my first paragraph</p>
</body>
</html>

Empty Tags
HTML elements without content are called empty elements. Empty elements can be closed in the start
tag. <br> is an empty element without a closing tag (it defines a line break). In XHTML, XML, and future
versions of HTML, all elements must be closed so use <br /> instead is more future proof.

Attributes provide additional information about HTML elements. Attributes are always specified in the
start tag Attributes come in name/value pairs like: name="value"

Ex: <a href="http://www.w3schools.com">This is a link</a>

Attribute values should always be enclosed in quotes. Double/Single style quotes allowed.
Below is a list of some attributes that are standard for most HTML elements:

Basic HTML tags

All the files should include at least these tags.
(a) HTML : <HTML> and </HTML> tags defines that complete html file. All the tags are inside
these two tags.
(b) Head : <HEAD> and </HEAD> contains information about your HTML file. Usually the only
tag contained within this tag is “title” tag.
Keywords for Search Engines
 Some search engines on the WWW will use the name and content attributes of the meta
tag to index your pages.
This meta element defines a description of your page:
<meta name="description" content=" Complete Overview to HTML & CSS Tags">
This meta element defines keywords for your page:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript,
VBScript">
(c)Title : <TITLE> and </TITLE> is within the Head tag. It identifies your page to the rest of the
world. The tag output is displayed on your browser’s title bar but dos not appear as part of the
page. If you don’t mention the title “untitled” or url is displayed.

(d) Body : contains all the elements that a browser actually displays as the body of your HTML
document.

HTML Headings
There are six levels of Heading tags viz, <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. H1 tag contains
the biggest size of characters and H6 contains the lowest size of characters.

Ex: 1.
<HTML>
<HEAD>
<TITLE>
MY FIRST WEB PAGE
</TITLE>
<HEAD>
<BODY>
<H1>This is a top-level heading </H1>
<H2> This is a second level heading </H2>
<H3>This is a third level heading </H3>
<H4> This is a fourth level heading</H4>
<H5> This is a fifth level heading</H5>
<H6> This is a sixth level heading</H6>
</BODY>
</HTML>

HTML Paragraphs
<P> tag specifies the beginning of a paragraph. When you define a new P tag it automatically
implies that it’s the beginning of a new paragraph. So you can use only the starting P tag.

Line Break Tag:

The BR (Line Break) tag is an empty, or stand-alone tag that simply inserts an line break.

Ex:
<HTML><BODY>
This line will <br/> be displayed in <br/> three lines</br>
</BODY></HTML>

Comments in HTML
<!-- and --> are the tags used for commenting out in the HTML file.
Ex: <!-- type your comments here -->

Ex : 2 simple HTML file

<HTML>
<HEAD>
<TITLE>
MY FIRST HTML
</TITLE>
<HEAD>
<BODY>
<H1>Hyper Text Markup Language</H1>
<P>
In this unit you are going to learn some basics of HTML, which is used to write HTML documents. Once
you create an HTML document it can be viewed in any browser.

<P>
You will be learning how to use List and Hyperlink text effectively in your document.

</BODY>
</HTML>

FORMATTING TEXT

Bold : <B> and </B> is used to bold the text between the start and end tags.
Italic : <I> and </I> is used to italicize the text between the start and end tags.
Underline : <U> and </U> is used to underline the text between the start and end tags.

Justification with 5 spaces Lt and Rt:

<BLOCKQUOTE> </BLOCKQUOTE> tags are used to double-indent on Lt and Rt margins.

Ex: 3 Formating
<HTML>
<HEAD>
<TITLE>
MY Formatting tags
</TITLE>
<HEAD>
<BODY>
<H1><B>This line is in bold</B></H1>
<BR/><BR/>
<H2><I> This line is in italics</I><H2>
<H3><BLOCKQUOTE> This text is in “blockquote” tags and is displayed with an indent on left margin
of five spaces and right margin with five spaces. The text will be justified in the middle. Any type of
formatting is possible with PRE tag. This tag displays the contents as you enter in the document. It is
known as pre-defined text style. This is useful when entering columnar data. </BLOCKQUOTE>.
</H3>
</BODY>
</HTML>
Character Entities
“<” symbol defines the start of an HTML tag but if we want the symbol be inserted then character
entities in the HTML source are used.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity
number, and finally a semicolon (;). Entity number are more reliable than entity names.
Note that the entities are case sensitive.

To display a less than sign in an HTML document we must write: &lt; or &#60;

The Most Common Character Entities:

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
‘ apostraphe &apos; (does not work in) &#39;

Some Other Commonly Used Character Entities:

Result Description Entity Name Entity Number

¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;

Text highlighting tags

 <SUP></SUP> tags makes the text between them as superscript.
 <SUB></SUB> tags makes the text between them as subscript.
 <STRIKE></STRIKE> tags makes the text between them to appear as strike out.

EX.12 FORMATTING DEMO

<HTML>
<HEAD>
<TITLE> DEMO OF TEXT FORMATTING</TITLE>
<HEAD>
<BODY>
<P><H2>THIS IS DEMONSTRATION OF TEXT FORMATTING.</H2>
<HR NOSHADE>
 <P>THE TEXT APPEARS NORMAL BUT
<P>MATHEMETICAL EXPRESSIONS LIKE 245<SUP>21</SUP>
<p>ORDINALS LIKE 21<SUP>st</SUP> AND
<P>CHEMICAL COMPOSITIONS LIKE H2 SO<SUB>4</SUB><BR/>
ARE EXPRESSED COMFORTABLY WITH THIS FORMATTING TAGS.
</BODY>
</HTML>

Text Alignment
The “ALIGN” attribute can be used with headings to align the text within the window. The
attribute has values as LEFT/RIGHT/CENTER/JUSTIFY.
<P> tag also can contain “ALIGN” attribute with LEFT/RIGHT/CENTER values.
<CENTER></CENTER> tags can be used with any combination of text, images, tables etc to
center the whole contents.

Ex.13 Text Alignment demo

<HTML>
<HEAD>
<TITLE> DEMO OF TEXT ALIGNMENT</TITLE>
<HEAD>
<BODY>
<P><CENTER>
(create some random text and place it here)
</CENTER>
<CENTER><IMG SRC=FLOWERS.JPG></CENTER>
See image, which is also centered to the window.
</BODY>
</HTML>

Setting Font Sizes

 The <FONT></FONT> tags are used along with SIZE attribute to change the size of the
font of a section.
 SIZE attribute has values range from 1 to 7.
 Default size is 3.
 <BASEFONT> tag with SIZE attribute sets the default size. Ex.<BASEFONT SIZE=4>

Ex.14 Font size demo

<HTML>
<HEAD>
<TITLE> Font size DEMO</TITLE>
<HEAD>
<BODY>
<FONT SIZE=1>Font Size 1 </FONT><BR/>
<FONT SIZE=2>Font Size 2 </FONT><BR/>
<FONT SIZE=3>Font Size 3 </FONT><BR/>
 <FONT SIZE=4>Font Size 4 </FONT><BR/>
<FONT SIZE=5>Font Size 5 </FONT><BR/>
<FONT SIZE=6>Font Size 6 </FONT><BR/>
<FONT SIZE=7>Font Size 7 </FONT><BR/>
<HR SIZE=9 NOSHADE>
<CENTER>THIS IS THE DEFAULT SIZE OF FONT, THAT IS 3.
<P><BASEFONT SIZE=5>
AFTER USING "BASEFONT SIZE=5", THIS IS THE TEXT IN 5. <BR/> <BR/>
<FONT SIZE=-2>AFTER USING "FONT=-2", THIS IS THE TEXT IN 3.
<BR/><BR/></FONT>
<FONT SIZE =+1>AFTER USING "FONT =+1", THIS IS THE TEXT IN 6</FONT>
<HR SIZE=9 NOSHADE>
<H3 ALIGN=CENTER><u>USING THE BIG AND SMALL TAGS</U></H3>
<BASEFONT SIZE=3>
<SMALL>THIS TEXT IS BETWEEN THE SMALL TAGS DECREASING BASEFONT FROM 3
TO 2, RELATIVELY.</SMALL>
<P><BIG>THIS TEXT IS BETWEEN THE BIG TAGS INCREASING BASEFONT FROM 3 TO
4, RELATIVELY</BIG>
</CENTER>
</BODY>
</HTML>

Changing font color

The <FONT> tag is used to display the color with “COLOR” attribute. Any of the 16 colors can
be used as value to the COLOR attribute. Basic colors are (1)Black, (2)White, (3)Aqua, (4)Blue,
(5)Fuchsia, (6)Gray, (7)Green (8)Lime, (9)Maroon (10)Navy (11)Olive (12)Purple (13)Red
(14)Silver (15)Teal and (16)Yellow.

We can address colors in three ways.

(a) <body bgcolor="#FFFF00"> : Hexadecimal Representation
(b) <body bgcolor="rgb(255,255,0)"> : RGB (Red Green Blue)
(c) <body bgcolor="yellow"> : Basic text representation of color

Ex. <FONT SIZE=7>

<FONT COLOR=”AQUA”>
You can use any of the 16 color names to specify a font color.
</FONT>

EX.15 DEMO OF COLORS

<HTML>
<HEAD>
<TITLE> DEMO FOR COLORS</TITLE>
<HEAD>
<BODY>
<CENTER>
<FONT SIZE=1 COLOR=BLACK>Font Size 1 </FONT><BR/>
<FONT SIZE=2 COLOR=YELLOW>Font Size 2 </FONT><BR/>
 <FONT SIZE=3 COLOR=BLUE>Font Size 3 </FONT><BR/>
<FONT SIZE=4 COLOR=FUCHSIA>Font Size 4 </FONT><BR/>
<FONT SIZE=5 COLOR=GRAY>Font Size 5 </FONT><BR/>
<FONT SIZE=6 COLOR=GREEN>Font Size 6 </FONT><BR/>
<FONT SIZE=7 COLOR=LIME>Font Size 7 </FONT><BR/>
<FONT SIZE=6 COLOR=MAROON>Font Size 6 </FONT><BR/>
<FONT SIZE=5 COLOR=NAVY>Font Size 5 </FONT><BR/>
<FONT SIZE=4 COLOR=OLIVE>Font Size 4 </FONT><BR/>
<FONT SIZE=3 COLOR=PURPLE>Font Size 3 </FONT><BR/>
<FONT SIZE=2 COLOR=RED>Font Size 2 </FONT><BR/>
<FONT SIZE=1 COLOR=TEAL>Font Size 1 </FONT><BR/>
</CENTER>
</BODY>
</HTML>

Changing Font Face

FACE attribute of the <FONT> tag assigns the font style. The fonts should be available in the
system before it can be used.

Ex. Font Face

<html><head><title>Font face demo</title>
<body>
<p>
<font face=arial size=14 color=#00ff00> This is Arial font with size 14 and green in
color</font>
<p>
<font face=impact size=16 color=#ff0000> This is Impact font with size 16 and red in
color</font>
<p>
<font face="arial black" size=12 color=#0000ff> This is Arial Black font with size 12
and Blue in color</font>
</body>
</html>

Style tag for deprecated tags of font, underline, strike

Style is an attribute inside paragraph and heading tags. It carries different properties to put
forth the font, style, size, etc. It carries variable and value pairs separated by a colon(:). The
pairs of Variable and values are separated with a semicolon follows(;).

Ex.<P style=”font-family:arial; font-size:14; text-decoration:underline;”>

Preformatted text: The <PRE> and </PRE> tags are used to display a block of
“preformatted” text. The display will be “as is” state of text.

Ex : 4 Preformatting Tag
<HTML>
<HEAD>
<TITLE>
Pre-formatting tags in html
</TITLE>
<HEAD>
<BODY>
<PRE>
SALES FIGURES FOR FIRST QUARTER OF 2008
----------------------------------------------------------
-------------------------------------------------------------------------
JAN FEB
-------------------------------------------------------------------------
ANDERSON 10,200 20,015
BAKER 30,500 25,885
PETERSON 15,900 20,115
WILSON 40,100 35,000
------------------------------------------------------------------------
GRAND TOTAL 96,700 101,015
------------------------------------------------------------------------
</PRE>
</BODY>
</HTML>

Creating Lists

Ordered List
<OL> and </OL> tags specify a sequentially numbered list of items. It is used in conjunction
with <LI> tag. LI tag does not have end tag, its implied.
Attributes:
TYPE : specifies the type of format ex.A, a, L i, 1.
START : sepifies the start no eg 2, c, etc.

Ex: 5 Ordered Lists

<HTML>
<HEAD>
<TITLE>My test on Ordered List tag</TITLE>
</HEAD>
<BODY>
<OL>
<LI>COMPUTER CONCEPTS
<LI>MS-ACCESS
<LI>MS-EXCEL
<LI>MS-WORD
<LI>MS-POWERPOINT
</OL>
</BODY>
</HTML>
Unordered List
<UL> and </UL> define a bulleted list of items. The <LI> tag is nested inside the UL tag and
defines each item within the list.

Attributes
TYPE : specifies the style of bullets like “disc”, “circle”, and “square”. These are supported by
Netscape Navigator.

Ex. 6 Unordered List

<HTML>
<HEAD>
<TITLE>My test on Ordered List tag</TITLE>
</HEAD>
<BODY>
<H3>
<UL TYPE = disc>
<LI>COMPUTER SOFTWARE
<br/>
<H5>(THIS IS ORDERED LIST NESTED INSIDE UNORDERED LIST)</H5>
<OL>
<LI>MS-ACCESS
<LI>MS-EXCEL
<LI>MS-WORD
<LI>MS-POWERPOINT
</OL>
<BR/>
<LI>COMPUTER HARDWARE
<UL TYPE = circle>
<LI>CPU
<LI>KEYBOARD
<LI>VISUAL DISPLAY UNIT
<LI>HARD DISK
</UL>
</UL>
<BR/><BR/>
<H2><U>CONTROLLING STARTING ITEM OF A LIST </U></H2>
<OL START=5>
<LI>THIS IS FIFTH ITEM
<LI>THIS IS SIXTH ITEM
<LI>THIS IS SEVENTH ITEM
<LI>THIS IS EIGHTH ITEM
<LI>THIS IS NINTH ITEM
<LI>THIS IS THE LAST ITEM
</OL>
</H3>
</BODY>
 </HTML>

Creating Definition Lists

<DL> and </DL> defines a definition list. <DT> tag is used to define the terms of the list and
<DD> tag is used for defining data of the list. This is like having a heading and some text
content under the heading, but in a listing fashion.

Ex. 7 Definition Lists

<HTML>
<HEAD>
<TITLE> DEFINITION LISTS TEST</TITLE>
</HEAD>
<BODY>
<h3>
<DL>
<DT>HARDWARE
<DD>Is defined as physical or tangible equipments associated with computer systems.
Examples of hardware are central processing Unit, input devices, output devices, and
secondary storage devices.<br/><br>
<DT>SOFTWARE
<DD>is a set of programs run on a computer.<br/><br/>
<DT>PERIPHERALS
<DD> Equipment connected around the CPU are known as peripherals.
</h3>
</BODY>
<HTML>

CREATING HYPERTEXT LINKS

With Hyperlinks you can link to other sources like web page, display an image, download a
program, send an e-mail message etc.

Anchor tag(<A> & </A>) is used for hyper linking. The Target is mentioned in the start tag and
the text is written between the anchors.

Ex. <A HREF = “SUB.HTML”>Go to Sub document</A>

HREF (Hyper Reference) attribute specifies the URL. If partial URL or only file name is
mentioned, it means that the file is located on the same server. Otherwise complete URL is a
must. There are three types of links in HTML.

(a) Links to other HTML documents or data objects.

This type of link allows jumps to other web page and as well as anything that has an
address on the net, like FTP archives and images also. This type of link has only “target
file” or object which is given with a “HREF” attribute.
 Ex: <p>Click here to jump to <A HREF = “SUB.HTML”> subdocument </A>

(b) Links to other places in the same HTML document.

Allows you to jump from one section to another section of the same page/document.
This links have two parts the source link and the target link.
Ex. Source Link : <A HREF=”#sec1”>Go to section 1</A>
HREF attribute is referring to another anchor whose name would appear as
“sec1”. “Go to section 1” text will be the highlighted text.

Target Link : <A NAME=”sec1”>This is the contents of the section one which
would appear for the user after the jump</A>

“#” means a link to a section within a document/other page.

Target link should contain the “NAME” attribute for the source to recognize the target
anchor. The complete text is embedded in the “<A> & </A>” tags.

(c) Links to places in other HTML documents.

Allows links to jump to some point halfway down another web page.
Contains “link” and “target link”, with only difference of web page being other file, which
is provided with a URL.

Ex. <A HREF=”C:\MYDIR\APTECH.HTML#Sec3”>Goto Sec3 of APTECH</A>

“C:\MYDIR\APTECH.HTML” is the file and “Sec3” is the part of the file which the link is
going to jump.

Target attribute

Define where the linked document will be opened.

? _blank : - the target URL will open in a new window

? _self : - the target URL will open in the same frame as it was clicked. Frame will be
discussed later.
? _parent : - the target URL will open in the parent frameset
? _top : - the target URL will open in the full body of the window

EX: 8 Creating simple link list.

Create three HTML files by name Linktype1.html, Linktype2.html, and mainlink.html in the same
directory and third file with the list of links.

Contents of linktype1.HTML:

<HTML>
<HEAD>
 <TITLE>LINK FILE ONE </TITLE>
</HEAD>
<BODY>
<H2>Here are the contents of file one</H2>
<P>

(enter random text with =rand(9) in word and copy here and put<P> before
paragraphs)

</BODY>
</HTML>

Contents of linktype2.HTML:
<HTML>
<HEAD>
<TITLE>LINK FILE TWO </TITLE>
</HEAD>
<BODY>
<H2>Here are the contents of file Two with sub section</H2>
<P>

(enter random text with =rand(9) in word and copy here and put<P> before
paragraphs)

<P><A NAME=sec1><h2>Section 1 of File two</h2>

(contents of last paragraph come here)

</A>

</BODY>
</HTML>

Contents of mainlink.HTML:

<HTML>
<HEAD>
<TITLE>LINK LIST </TITLE>
</HEAD>
<BODY>
<H2>COURSES</H2>
<UL>
<LI><A HREF=linktype1.html>Normal Link to another HTML file</A>
<LI><A HREF=#bottom>Link to another Section in same page</A>
<LI><A HREF="linktype2.html#sec1" TARGET=”_blank”>Section-wise Link to another
HTML File</A>
<BR/>
 <BR/>

(enter random text with =rand(9) in word and copy here and put<P> before
paragraphs)

<A NAME=bottom><h2>Bottom</h2><P>
(contents of last paragraph come here)
</A>

</UL>
</BODY>
</HTML>

Inserting Inline Images

<IMG> is an empty tag allowing to insert image in a document.

<IMG> Attributes

SRC specifies URL for the image.

BORDER specifies the width of the border. Zero means no border.
WIDTH specifies the width of the image. If width is not realistic it will be fit to scale.
HEIGHT Specifies height of image. If no is realistic it will be fit to scale.
TARGET Specifies the window in which it will be loaded. Takes following values:-
(a) “_blank” Loads into a new window.
(b) “_parent” loads into immediate parent of the document.
(c) “_self” loads into the same windows : DEFAULT.
(d) “_top” loads into full body of the current window.

Ex.<IMG SRC = FLOWERS.JPG ALT=a sample image>

Resizing images
HEIGHT and WIDTH attributes leave space for the image and go ahead with rest of loading.
Values can be in pixels or percentage.

Ex. <IMG SRC=”BLUE HILLS.JPG” WIDTH=75%>

Ex. <IMG SRC=”BLUE HILLS.JPG” WIDTH=250 HEIGHT=200>

Controlling Border around an image link

BORDER attribute allows to define the border weight.
Ex. <IMG SRC=”FLOWERS.JPG” BORDER=14>

Ex. 9 Inline Image Settings

<HTML>
<HEAD>
 <TITLE> Setting images </TITLE>
</HEAD>
<BODY>
<H2><U>
This is an image set to sizes 400 x 350 and aligned to the right side of the window
</U></H2>
<IMG SRC="blue hills.jpg" WIDTH=400 HEIGHT=350 ALIGN=RIGHT BORDER=12
ALT="A simple image">
<h3><p>The image border is set to 12 pixels.
<p>All the images and documents should be placed in the same Directory. Try deleting
the image from the current directory and see the alternate message being displayed
without any changes in the border and dimensions of the image.
</h3>
</BODY>
<HTML>

Creating Image Links

Just place the <IMG> tag in the place where text appears
Ex. <A HREF=”Myfile”>Click here<IMG SRC=”flowers.jpg”></A>

“click here” and also the image will be made as hyperlinks.

Ex.10 Image as a link

<HTML>
<HEAD>
<TITLE> Image as Hyperlink</TITLE>
</HEAD>
<BODY>
<H2><U>
This is an image which can be used as hyperlink to connect to linktype1.html file
<P>You can use both text and also image as a hyperlink.
</U></H2>

<P>
<A HREF=LINKTYPE1.HTML>CLICK HERE <IMG SRC="BLUE HILLS.JPG" WIDTH=400
HEIGHT=350 ALIGN=RIGHT border=12 ALT="A simple image">

</BODY>
<HTML>

Horizontal Rules (Lines)

Inserts horizontal line.

HR Attributes
SIZE Gives thickness for the line
COLOR Mentions color for the line
WIDTH Gives length of the line as %
ALIGN Specifies alignment – RIGHT/LEFT/CENTER
NOSHADE Without shade a solid line

Ex. <HR SIZE=10 WIDTH=75% NOSHADE>

Ex. <HR SIZE=10 WIDTH=400>

Ex. 11 Horizontal Rulers

<HTML>
<HEAD>
<TITLE> Horizontal Rulers</TITLE>
</HEAD>
<BODY>
<H2><u>
THIS IS DEMONSTRATION OF HORIZONTAL RULERS.
</H2><P> YOU CAN SEE THE DEFAULT LINE BELOW THIS TEXT
<HR NOSHADE>
<P> RESIZE THE WINDOW TO SEE THE SIZE OF RULERS CHANGE IN CONTEXT WITH THE
WINDOW<P>
</U></H2>
<P>
<HR SIZE=24 NOSHADE WIDTH=43% ALIGN=LEFT>
<P>
<A HREF=linktype1.html><IMG SRC="blue hills.Jpg" width=400 height=350 border=12
alt="A simple image">

<HR SIZE=24 NOSHADE WIDTH=43% ALIGN=LEFT>

</BODY>
<HTML>

ADDRESS TAG
The address tag contains information on contact details. Horizontal ruler usually seperates an
address from the rest of the web page.

Ex. 12 ADDRESS DEMO

<HTML>
<HEAD>
<TITLE> DEMO OF ADDRESS TAG</TITLE>
<HEAD>
<BODY>
<P>THIS IS DEMONSTRATION OF ADDRESS TAG.
<P><P>CLICK ON THE HYPERLINK IN ADDRESS BELOW HORIZONTAL RULER.
<P>DEFAULT EMAIL IS OUTLOOK.
 <P>YOU NEED TO HAVE CONFIGURED OUTLOOK ACCORDINGLY
<P>THE “FROM ADDRESS” IN THE MAIL IS ALREADY FILLED WITH DETAILS.
<HR NOSHADE>
<ADDRESS>
APTECH,<br/> Siddhi Bhavan,<br/> Kanthipath,<br/>Kathmandu
<A HREF=MAILTO:[email protected]>E-mail</A><BR>
</ADDRESS>
</BODY>
</HTML>

WORKING WITH BACKGROUNDS

Background of the document can be manipulated with the <BODY> tag of the html file.
 “BGCOLOR” attribute will change the background color of the document.
 “TEXT” attribute will change the text color for the whole of the document.
 “LINK” attribut e will change the color of the hyperlinks.
 “VLINK” attribute will change color of already visited links.
 “ALINK” attribute will change color of Active links.(when mouse is on the link).

Ex. <BODY BGCOLOR=CYAN TEXT=RED LINK=BLUE VLINK=GREY ALINK=GREEN>

Setting Background with a image.

“BACKGROUND” attribute of the <BODY> tag inserts an image as a background for the
document.

Ex. <BODY BACKGROUND=”c:\tests\flowers.jpg”>

Marquee Tag.
<MARQUEE> </MARQUEE> tags are used to display embedded text to move
vertically/horizontally. This tag is unique to Internet Explorer only.

Syntax :

<MARQUEE BEHAVIOUR=”motion type” DIRECTION=”scroll direction” HEIGHT=”pixel”

WIDTH=”pixel” BGCOLOR=”color” LOOP=”number” SCROLLDELAY=”milli seconds”>
…………………………………….. </MARQUEE>

 BEHAVIOUR : “motion type” attribute sets the motion to ALTERNATE/SCROLL/ SLIDE.

It works within the rectangular space provided for the MARQUEE tag.

 DIRECTION : “scroll direction” specifies the scrolling direction of the text direction.
Values can be UP/DOWN/LEFT/RIGHT.

 HEIGHT & WIDTH: “pixel” renders rectangular space on the page with these
attributes. Default value is determined by the largest font assigned to the content in the
marquee.

 BGCOLOR : “color” establishes the color for the rectangular space reserved for the
MARQUEE tag.
  LOOP : “number” sets the number of times the text should move. -1 will set it to infinite
loop. Once the set number of times is over the text will come to still position.

 SCROLLDELAY : “milli seconds” will assign the dealy for the scroll text. The bigger the
number slower the text is. And smaller number will speed up the scroll text.

Ex. 13 Marquee Demo

<HTML><HEAD><TITLE> BACKGROUND & MARQUEE DEMO</TITLE><HEAD>

<BODY BGCOLOR=BLACK TEXT=FUCHSIA VLINK=GREEN ALINK=PINK>

<MARQUEE HEIGHT=50 WIDTH=1000 BGCOLOR=GRAY>

<FONT SIZE=7 COLOR=LIME><B><===</B>
</FONT><BR/> </MARQUEE>

<MARQUEE DIRECTION=DOWN>
<FONT SIZE=7 COLOR=LIME><PRE><B>
||
||
||
||
****
**

</B></PRE></FONT><BR/>
</MARQUEE>

<MARQUEE DIRECTION=UP>
<FONT SIZE=7 COLOR=LIME><PRE><B>
**
****
||
||
||
||
</B></PRE></FONT><BR/>
</MARQUEE>

<MARQUEE DIRECTION=RIGHT HEIGHT=50 WIDTH=1000 BGCOLOR=GRAY>

<FONT SIZE=7 COLOR=LIME><B>===></B></FONT><BR/>
</MARQUEE>
<FONT COLOR=YELLOW SIZE=4>THIS IS LINK DEMO, CLICK TO CHANGE COLOR
<A HREF="linktype1.html">CLICK ME</A>
</FONT>
</BODY>
</HTML>
Working with Tables in HTML

Creating Tables
<TABLE> and </TABLE> tags are used for creating tables. All tags are embedded in between.
If you need to contain several cells in a row, then use several <TD></TD> tags embedded
inside <TR> and </TR>.

Adding Borders
BORDER attribute inside the <TABLE> tag is used for mentioning border. No border by default.
Zero value gives no border. Ex.<TABLE BORDER=2>

Adding Border Color

BORDERCOLOR attribute specifies the color for border.
EX. <TABLE BORDER=2 BORDERCOLOR=BLUE>

Adding Table Background

BACKGROUND attribute in TABLE tag assigns background as tiled.
Ex. <TABLE BACKGROUND=FLOWERS.JPG>

Adding background color

BGCOLOR attribute in TABLE tag assigns color as background.
Ex. <TABLE BGCOLOR=GREEN>

Adding Column Headings

Use <TH> and </TH> tags to define a cell as heading cell. Create the <TR> tags and use
<TH> instead of <TD> inside them.
“ALIGN” attribute of <TH> sets contents horizontal alignment to LEFT/RIGHT/CENTER.
Ex. <TR><TH>Roll No.</TH><TH>First Name</TH><TH>Second Name</TH></TR>

Adding Row Headings

First cell of every row should be defined using <TH> and </TH> tags instead of <TD> and
</TD>.
Ex.
<TR><TH>Roll No.</TH><TH>First Name</TH><TH>Second Name</TH></TR>
<TR><TH>5344</TH><TD>ASHA</TD><TD>HEDGE</TD></TR>
<TR><TH>4456</TH><TD>USHA</TD><TD>MANJREKAR</TD></TR>

Cell Spacing and Padding

“CELLSPACING” attribute adds spacing between cells.
“CELLPADDING” attribute adds space between contents and cell border within the cell.

Ex. Cell padding

<TABLE BORDER=2 CELLSPACING=6 CELLPADDING=6>
<HTML>
 <HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifing CELLPADDING !</B><BR>
<HR>

<I>Without Cellpadding</I>

<CENTER>
<TABLE BORDER=1 WIDTH=25% ALIGN=CENTER>

<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>

<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>

<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>

<HR>

<I>With Cellpadding of 10</I>

<CENTER>
<TABLE BORDER=1 WIDTH=25% CELLPADDING=10 ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>

<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Ex : Cell spacing
<HTML>
<HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Controlling the space between Adjacent Cells ! </B><BR><BR>
<HR>

<I>Without Cellspacing</I>

<CENTER>
<TABLE BORDER=1 WIDTH=25% ALIGN=CENTER>

<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>

<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>

<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>

</TABLE>
</CENTER>
<HR>

<I>With Cellspacing of 10</I>

<CENTER>
<TABLE BORDER=1 CELLSPACING = 10 WIDTH=25% ALIGN=CENTER>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>

<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>

<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>

</TABLE>
</CENTER>
</BODY>
</HTML>

Adding Caption
<CAPTION> and </CAPTION> tags are used to insert a caption for the table.
ALIGN attribute specifies the alignment as LEFT/RIGHT/BOTTOM/TOP.

Ex. <TABLE BORDER=1 CELLSPACING=6 CELLPADDING=6>

<CAPTION>I. MYTABLE </CAPTION>

Setting Table Width

WIDTH attributes specifies width of table. You can either use absolute value(in no of pixels) or
relative values (Percentages).

Ex. <TABLE BORDER=1 CELLSPACING=6 CELLPADING=6 WIDTH=80%>

Ex. Border and width of Table

<HTML>
<HEAD>
<TITLE>Table Attributes</TITLE>
</HEAD>
<BODY BGCOLOR = LIGHTGREY>
<B>Specifing the BORDER and WIDTH of the Table!</B>
<BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=5 WIDTH=50%>
<CAPTION ALIGN=bottom>
<B>Personal Information</B>
</CAPTION>
<TR>
<TH>NAME</TH>
<TH>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD >Shilpa</TD>
<TD >21 </TD>
</TR>
<TR ALIGN=CENTER>
<TD>Vaishali</TD>
<TD>22</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Aligning cell contents of the table

“Align” attribute can be used with <TH> or <TD> tags to align the contents of the cell with
values LEFT/CENTER/RIGHT.

Ex. <TH ALIGN=RIGHT> ROLL NO.</TH>

<TD ALIGN=CENTER> ROLL NO</TH>

Setting column width

“WIDTH” attribute inside the top cell of the column will set the width of the entire column. You
can enter the value of WIDTH tag either in absolute value(in pixels) or in relative value
(percentage).

Ex. <TR>
<TH WIDTH =20%>ROLL NO</TH>
 <TH WIDTH =20%>FIRST NAME</TH>
<TH WIDTH =20%>LAST NAME</TH>
<TH WIDTH =20%>FEES PAID</TH>
<TR>

Centering a table
Embed the entire table inside <CENTER> and </CENTER> tags to center the table within the
window.

Inserting an Image
Use the image source tag <IMG SRC = URL> tag inside the tags of <TD>, <TH>.
Ex.<TH><IMG SRC=”flowers.jpg”></TH>

Ex. images in tables

<HTML>
<HEAD>
<TITLE>Images in tables</TITLE>
<HEAD>
<CENTER>
<TABLE BGCOLOR=lightgrey WIDTH=350 HEIGHT=220 BORDER=14 CELLSPACING=12>
<TR>
<TD><IMG SRC=FLOWERS.JPG WIDTH=100 HEIGHT=80></TD>
<TD><IMG SRC="BLUE HILLS.JPG" WIDTH=100 HEIGHT=80></TD>
<TD><IMG SRC=FLOWERS.JPG WIDTH=100 HEIGHT=80></TD>
</TR>
<TR>
<TD><IMG SRC="BLUE HILLS.JPG" WIDTH=100 HEIGHT=80></TD>
<TD><IMG SRC=FLOWERS.JPG WIDTH=100 HEIGHT=80></TD>
<TD><IMG SRC="BLUE HILLS.JPG" WIDTH=100 HEIGHT=80></TD>
</TR>
</CENTER>
</BODY>
</HTML>

Spanning Columns
“COLSPAN” attribute lets you span columns. It contains the value as the number of required
columns to merge. It is embedded inside the first tag of <TH>.
Ex. <TH COLSPAN=4> S T U D E N T R E P O R T</TH>

Spanning Rows
“ROWSPAN” attribute lets you span rows. It contains the value as the number of required
columns to merge. It is embedded inside the first tag of <TH>
Ex. <TH ROWSPAN=2>

Ex. Columns and rows spanning

<HTML><HEAD>
<TITLE>Working With Table</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifing ROWSPAN and COLSPAN Attributes !</B>
<BR><BR><BR><BR>
<CENTER>
<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER>
<TR>
<TH ROWSPAN=2>NAME
<TH COLSPAN=3>MARKS
</TR>
<TR>
<TH>PowerBuilder
<TH>VisualBasic
<TH>Developer2000
</TR>
<TR ALIGN=CENTER>
<TD> Shilpa
<TD> 21
<TD> 45
<TD> 30
</TR>
<TR ALIGN=CENTER>
<TD> Vaishali
<TD> 26
<TD> 30
<TD> 40
</TR>
<CAPTION ALIGN=bottom><B><BR>Mark Sheet</B></CAPTION>
</TABLE>
</CENTER>
</BODY>
</HTML>

Assigning background colors.

You can assign a background color to an entire table, a row within a table, or a single cell.
Ex. <TR BGCOLOR=LIME>

Ex. Background colors for tables

<HTML>
<HEAD>
<TITLE>Assigning background colors to Tables</TITLE>
</HEAD>
<BODY BGCOLOR=LIGHTGREY>
<B>Specifing Coloured Table Cells !</B><BR><BR><BR><BR>

<CENTER>
<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER>
<TR>
<TH Bgcolor = LIME>NAME</TH>
<TH Bgcolor = LIME>AGE</TH>
</TR>
<TR ALIGN=CENTER>
<TD Bgcolor = PINK><FONT Color=BLACK>Shilpa</FONT></TD>
<TD Bgcolor = YELLOW><FONT Color=BLACK>21 </FONT></TD>
</TR>
<TR ALIGN=CENTER>
<TD Bgcolor = WHITE><FONT Color=RED>Vaishali</FONT></TD>
<TD Bgcolor = VIOLET><FONT Color=BLACK>22</FONT></TD>
</TR>
<CAPTION ALIGN=bottom><B><BR>
Personal Information</B>
</CAPTION>

</TABLE>
</CENTER>
</BODY>
</HTML>

Frames
<FRAMESET></FRAMESET> tags display frames in a window. Each frame can have its own
HTML file. Frames can be scrolled & resized by the user, unless scrolling and resizing is turned
off.

Absolute dimensions
Ex. <Frameset rows=80,400>
Defines a table with top row 80 pixels and bottom row with 400 pixels.
Percentage dimensions
Use % as dimensions instead of pixel. The % will set in context with the window size.
Ex.<Frameset rows=”80%,20%”>
Top row with 80% of window and bottom with 20% of window is set.

Relative dimensions
Ex.<FRAMESET ROWS=”*,100”>
Bottom row is set to 100 pixel and top row takes the rest of the space in context with the
window.

<FRAME> tag is nested inside the <FRAMESET> AND </FRAMESET> tag.

Ex.<FRAME NAME=”FRAMENAME” SRC=URL FRAMEBORDER=”1/0” MARGINHEIGHT= ”PIXELS”
MARGINWIDTH=”PIXELS” NORESIZE SCROLLING=”YES/NO/AUTO”>

NAME attribute specifies the name of the frame.

SRC attribute specifies the url of the html document.
FRAMEBORDER can be switched on with value “1” and off with value “0”.
MARGINHEIGHT sets the margins in pixels (minimum is 2).
NORESIZE stops the manual resize of the frame.
SCROLLING determines how scrollbars are treated in a frame. NO value turns off the scrolls.
AUTO lets the control of scrolls automatically. Default value is “AUTO”.
NOFRAME tag is used to provide contents to browsers which do not support frames or frames
have been turned off. This tag can be placed after the last FRAME element or after
</FRAMESET> tag. No frame capable browser will ignore the frames and frame capable
browsers will ignore the NOFRAME tag.

You cannot use the <body></body> tags together with the <frameset></frameset> tags!
However, if you add a <noframes> tag containing some text for browsers that do not support
frames, you will have to enclose the text in <body></body> tags! See how it is done in the
first example below.

Ex. Demo of frames

Name this file as frames.html
<html>
<head><title>Demo of frames</title>
<frameset rows=20%,*>
<frame src="TOPFRAME.HTML"></frame>
<frameset cols=20%,*>
<frame src="LEFTFRAME.HTML">/frame>
<frame src="MAINFRAME.HTML" name=main></frame>
</frameset>
 </frameset>
</HEAD>
<BODY>
</body>
</html>
</body>
</html>

Name this file as topframe.html

<HTML><HEAD><TITLE> TOPFRAME </TITLE></HEAD>
<BODY BGCOLOR="BLACK">
<H1 ALIGN=CENTER><FONT COLOR=LIME> THIS IS IN THE TOP FRAME FOR
EXHIBITING THE MENUS </FONT></H1>
</BODY>
</HTML>

Name this file as leftframe.html

<HTML><HEAD><TITLE> Left frame </TITLE></HEAD>
<BODY Bgcolor="BLACK">
<H2><font color=violet> THIS IS IN THE LEFT FRAME FOR SPECIFYING
TOPICS</font></H2>
</BODY>
</HTML>

Name this file as mainframe.html

<HTML>
<HEAD><TITLE> DETAILS FRAME </TITLE></HEAD>
<BODY BACKGROUND="BLACK">
<H1 ALIGN=CENTER> THIS IS IN THE MAIN FRAME FOR GIVING DETAILS ON THE
TOPICS SELECTED IN THE LEFT FRAME</H1>
</BODY>
</HTML>

Creating Forms
A form is used to collect data from the users and submit it to the server for further process.
The information may be
(a) Written to a file which is saved on the server.
(b) Submitted to a database for collecting necessary information requested by the user.
(c) E-mailed to someone in particular.

The data validation may be done at the browser level before submitting the data.
The ACTION attribute in the <FORM> tag specifies a URL that indicates specific CGI scripts or
program that collect the form data that a user entered.
Likewise the METHOD attribute describes the way in which the input data is delivered to a
forms-handling program. Values can be POST or GET.

<FORM> </FORM> tags embed all other tags and text inside them. Action for the web server,
and method of dispatch is also mentioned inside these tags itself.

 Specifying input (the <INPUT> tag and its many attributes).

 Setting up text input areas (the <TEXTAREA></TEXTAREA> tags.
 Selecting values from a predefined set of possible inputs (<SELECT></SELECT>).
 Managing the forms’ content (using the SUBMIT attribute for INPUT to deliver the
content to the server, or the RESET attribute to clear its contents, and start again).
<INPUT> Tag : Takes two basic elements TYPE and NAME attributes. TYPE indicates the
shape of element on document. NAME assigns a name to the component so that it can be
controlled for assigning and modifying its values.

“TYPE” attributes can carry the following values.

 CHECKBOX : produces check-box component on the form for multiple selection.
Ex.<INPUT NAME=”EMPLOYED” TYPE=”CHECKBOX” VALUE=”Y”>YES<BR/>
Ex. <INPUT NAME=”EMPLOYED” TYPE=”CHECKBOX” VALUE=”N”>NO<BR/>
 PASSWORD: produces no visible area hence used for password.
 IMAGE: Lets you include icons or other graphical symbols.
 RADIO: Creates a radio button for a range of selections. User may select only one.
Ex. Sex <br/>
<INPUT NAME=”sex” TYPE=”Radio” value=”M”>Male<br/>
<INPUT NAME=”sex” TYPE=”Radio” value=”F”>Female<br/>
 RESET: this button lets the user to clear the contents.
<INPUT TYPE=”Reset” value=”cancel data”>
 SUBMIT: creates “SUBMIT” button. This button tells the browser to bundle the form
data and pass it all to the CGI script indicated by the ACTION attribute.
Ex.<INPUT TYPE =”SUBMIT”VALUE= “REGISTER NOW”>
 TEXT: Provides a one-line input entry.
Ex. <INPUT NAME = “name” TYPE=”Text” SIZE=20 MAXLENGTH=”25”>

Other <INPUT> Attributes

 VALUE=”Value” supplies the default value for TEXT element.
Ex. VALUE=”Join Now” for a submit or VALUE=”Clear Form” for a reset.
 SRC=”URL” Provides pointer to the graphic for an image.
 CHECKED: Makes sure that a certain radio button/check box is checked.
 SIZE: “number” Sets the number of characters that a TEXT element can display without
scrolling.
  MAXLENGTH=”number” Sets the max no of chars that a value in a TEXT element can
contain.
 ALIGN=”TOP/MIDDLE/BOTTOM/LEFT/RIGHT” For IMAGE elements, ALIGN determines
how the graphics is aligned on the form accompanying the text.

<SELECT> </SELECT>
This tag works like lists. Its attributes are
(a) NAME=”text” Provides the name of the component.
(b) SIZE=”number” Controls the number of elements. You can define more elements
than mentioned here.
(c) MULTIPLE: indicates that multiple selections are possible in absence of this attribute
the user can make only one selection.
Ex. <SELECT NAME=BANKS SIZE=4>
<OPTION>HIMALAYAN BANK
<OPTION>STANDARD CHARTERED BANK
<OPTION>NABIL BANK
<OPTION>SBI NEPAL
<OPTION>GLOBAL TRUST BANK
</SELECT>
<TEXTAREA> … </TEXTAREA>
This tag allows you to create a text area without size. Text is embedded between the tags.
Attributes are : -
(a) NAME=”text” Provides the name for controlling the component.
(b) ROWS=”number” specified the no of lines on the screen to display.
(c) COLS=”number” specified the no of columns on the screen for display.
(d) WRAP=HARD/SOFT/NONE specifies how text will wrap.
You can include more text than specified in the rows and columns.
Ex. <TEXTAREA NAME=”REMARKS” ROWS=3 COLS 4>
THIS STUDENT IS JOINING Masters in information technology.
</TEXTAREA>

Ex. Demo of Form

<HTML><HEAD><TITLE>FORM</TITLE>
<BODY>
<FORM>
<TABLE align=center border=1>
<TR>
<TH colSpan=2><TD>STUDENT INFORMATION</TD></TR>
<TR>
<TD>NAME</TD>
 <TD><INPUT name=TXTNAME> </TD>
<TR>
<TD>ADDRESS</TD>
<TD><INPUT name=TXTADDRESS> </TD>
<TR>
<TD>SEX</TD>
<TD><INPUT type=radio value=M name=RDOSEX>MALE
<INPUT type=radio value=F
name=RDOSEX>FEMALE </TD>
<TR>
<TD>PHONE NO</TD>
<TD><INPUT name=TXTPHONENO> </TD>
</tr>
<TR>
<TD>HOBBIES</TD>
<TD><INPUT type=checkbox value=CHATTING name=CHKCHATTING>CHATTING
<INPUT type=checkbox value=PLAYING name=CHKPLAYING>PLAYING<BR>
<INPUT type=checkbox value=SLEEPING name=CHKSLEEPING>SLEEPING
<INPUT type=checkbox value=HIKING name=CHKHIKING>HIKING </TD>
<TR>
<TD>CLASS</TD>
<TD><SELECT name=CBOCLASS> <OPTION value=XI selected>XI</OPTION>
<OPTION value=XII>XII</OPTION>
<OPTION value=BBA>BBA</OPTION>
</SELECT> </TD>
<TR>
<TD>COMMENTS</TD>
<TD><TEXTAREA name=AREACOMMENTS rows=5></TEXTAREA> </TD>
<TR>
<TD align=middle colSpan=2><INPUT type=button value=SEND name=CMDSEND>
<INPUT type=submit value=SUBMIT> <INPUT type=reset value=RESET>
</TD></TR></TABLE></FORM></BODY></HTML>

Ex. Demo of Logon Form

<HTML><HEAD><TITLE>log on form</TITLE>
</HEAD>
<BODY>
<FORM>
<TABLE align=center border=2>

<TR>
<TH align=CETNER colSpan=2>Log On Form</TH></TR>
 <TR>
<TD>UserName</TD>
<TD><INPUT name=txt></TD></TR>
<TR>
<TD>Password</TD>
<TD><INPUT type=password name=txt password></TD></TR>
<TR>
<TD>Log On as</TD>
<TD><SELECT name=cbologonas> <OPTION value=administrator
selected>Administrator</OPTION> <OPTION
value=operator>Operator</OPTION></SELECT> </TD></TR>
<TR>
<TD align=CENTER colSpan=2><INPUT type=button value=ok name=btnok> <INPUT
type=button value=cancel
name=btncancel></TD></TR></TBODY></TABLE></FORM></BODY></HTML>

Multi-column text
<MULTICOL> and </MULTICOL> displays text in multiple columns

 COLS : specifies the number of columns to use.

 GUTTER: specifies the number of pixels between each column.
 WIDTH: specifies the width of the columns as a whole.
This will work with Netscape browser.

Working of Internet

 When SUBMIT button is clicked the information passes on to server.

 CGI interface ties the user information from the browser through Word Wide Web, to
the program on the server.
 CGI Script is invoked and the information is passed through two REQUEST_METHOD,
GET or POST.
 REQUEST_METHOD is the environment variable carrying the value GET/POST.

GET
It’s a request method which packs the information from the browser at the end of the URL
string. QUERY_STRING is the environment variable carrying the pair of element and value.

Ex.<a href ”cgi-bin/abc.exe?iname=aptech&fname=kantipath”>

In this example REQUEST_METHOD contains GET as its value, and QUERY_STRING

contains “iname=aptech&fname=kantipath” as its value. Some servers use “?” and some
use “/” as the separator between the program and values. If “/” is used then the
environment variable in place of QUERY_STRING is “PATH_INFO”. In unix environment this
length is max 100 chars. The query string is displayed in the URL.

POST
Post also passes the information from browser in the same way. But POST uses STDIN.
Standard Input stream. CONTENT_LENGTH contains the size of the stream. Post method
variable and values are not seen in the URL. There is no restriction on the size of the data
sent to the server.

To evaluate the data the server should examine the “REQUEST_METHOD” value and use
the information accordingly.