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 Address

Significance

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/”.

 

  • 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.
  • 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 sybbol 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.
<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.

  • <body bgcolor="#FFFF00">                   : Hexadecimal Representation
  • <body bgcolor="rgb(255,255,0)"> : RGB (Red Green Blue)
  • <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>

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.

 

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. 

 

Different type of lists can be mentioned using “Type” attribute inside UL tag.  “Type” can contain values “A”, “a”, “I”, “i” and “1”. 


Ex. <UL TYPE=I>

Starting values of the list can be controlled by using the “value” attribute of the UL tag.


Ex. <OL START = 3>

Controlling bullets can be done by using “Type” attribute in the UL tag.  Values can be “disc”, “circle”, and “square”.  These are supported by on Netscape Navigator.

 

Ex. 6 Unordered List
<HTML>
<HEAD>
<TITLE>My test on Ordered List tag</TITLE>
</HEAD>
<BODY>
<H3>
<UL TYPE = i>
<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 = “A”>
<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.


  1. 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>


  1. 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 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.


  1. Links to places in other HTML documents.

Allows links to jump to some point halfway down another web page. 
Like the previous one this link also contains source 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

Ex. <a href=”http://www.indusnetacademy.com” target=”_blank” >Visit Indus Net Academy</a>

With the target attribute, you can define where the linked document will be opened.
Values for target attribute are :-

    ? _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">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. 
  • “SRC” (source) attribute enables you to give the URL for the file location. 
  • “ALT” attribute will display the message in case the “display image” option is off in browser settings.
  • “ALIGN” attribute allows you to align the image to “TOP/MIDDLE/BOTTOM/RIGHT/ LEFT”

 

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


Resizing images
Images download takes comparatively large space and time. We can specify the size of the image so that the browser reserves that space and goahead with the rest of the contents download.

  • WIDTH & HEIGHT attributes allow you to set the dimension of the images.
  • If only one dimension is given the second dimension is adjusted with corresponding value.
  • Setting can be done in “pixels” and  “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
Default border is 2 pixels.  The BORDER attribute of IMG tag will allow you 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
You can place the image in the place where you write the text for highlighting in the hyperlink.

 

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)

<HR> tag is a empty tag.  Adds horizontal lines in document. 

  •  “SIZE” attribute of <HR> tag defines the weight of the line(thickness).
  • Ex. <HR SIZE=10>

  • “NOSHADE” attribute of <HR> tag defines that there is no shade for the line.  The default setting is shaded.
  • Ex. <HR SIZE=10 NOSHADE>

  • “WIDTH” attribute allows to set the width of the line in context with the browser window.  It can be set in pixels or percentage.  By default horizontal lines are centered in a browser.
  • Ex.<HR SIZE=10 WIDTH=75%>
    Ex.<HR SIZE=10 WIDTH=400>

  • “ALIGN” attribute of <HR> tag allows to align the horizontal line in context with the browser. By default its center aligned.  Values can be LEFT/RIGHT.

 

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:APTECH@WORLKLINK.COM>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 allow you to insert an image as a bcackground of the document.  You can specify the file on the web or in other directory.

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>

Creating Tables
<TABLE> and </TABLE> tags are used for creating tables all the contents are embedded between these two tags.

Every cell is independently written with <TR> </TR> or <TD> </TD> tags.  If you need to contain several cells in a row, then use several <TD></TD> tags embedded inside <TR> and </TR>.  <TD> and </TD> contains the contents of the cell as data between them.


Adding Borders
By default, the table does not contain a border.  BORDER attribute inside the <TABLE> tag is used for mentioning the border.  Ex.<TABLE BORDER=2>


 

Adding Column Headings
<TH> and </TH> tag is used to define a cell as a heading cell rather tan as a ordinary data cell.  First create <TR> and </TR> and embed the <TH> and </TH> tags inside them to mention the data cells instead of <TD> and </TD> cells.
<TR><TH>Roll No.</TH><TH>First Name</TH><TH>Second Name</TH></TR>


Adding Row Headings
<TH> and </TH> is used to create row headings also.  Only difference is that the first cell of every row should be defined using <TH> and </TH> tags instead of <TD> and </TD>.

<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 in <TABLE> tag adds space between the cells. Cell spacing adds thickness of the border of each cell.

“CELLPADDING” attribute in <TABLE> tag adds space between contents and 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.

Ex.  <TABLE BORDER=1 CELLSPACING=6 CELLPADDING=6>
<CAPTION>I. MYTABLE </CAPTION>


Setting Table Width and Height
The WIDTH and HEIGHT attributes can be used to specify the size of your 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> allows you to 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 top tow with 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 with 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

  • Written to a file which is saved on the server.
  • Submitted to a database for collecting necessary information requested by the user.
  • 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/>

 

  • HIDDEN: 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

  • NAME=”text” Provides the name of the component.
  • SIZE=”number” Controls the number of elements.  You can define more elements than mentioned here.
  • 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 : -

  • NAME=”text” Provides the name for controlling the component.
  • ROWS=”number” specified the no of lines on the screen to display.
  • COLS=”number” specified the no of columns on the screen for display.

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>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></TBODY></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>


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.

SIGN UP FOR NEWSLETTER

Sign up to received our free newsletter!
Name:
E-mail ID:

MOST READ

Views: 4999 Times
Making a Surreal Manipulation in Photoshop READ MORE
Views: 2910 Times
Computer virus hits office printers READ MORE
Views: 2830 Times
Court Orders Pirate Bay Block in the UK, Stopping No One READ MORE
Views: 5497 Times
How to use Bluetooth technology to connect laptop and cell phone? READ MORE
Views: 7040 Times
Lock A File/Folder with RAR or ZIP READ MORE

Home|IT News|Computer Tips|Video Tutorials|Download Softwares|Subjects|Contact Us
Copyright © 2018. Jumbo Education (Information Technology). All rights reserved.
Free counter and web stats

Large Visitor Globe