Hyper Text Markup Language (HTML)





HTML (Hyper Text Markup Language) is a tag based scripting language, interpreted by browser.

The hypertext is a nonlinear text. It has a capacity to open door of other related information or files. When it is clicked, something new must be appeared.

Tags and attributes of HTML documents tell browsers how to display documents.

Version

Comments

HTML

HTML was first time invented by British scientist named Tim Berners Lee while he was working in laboratory at Cern, Switzerland on practical Physics (1980).

HTML +

HTML + is modified form of old HTML Dave Raggett did the modification in 1993. The image tag is added by college students Marc Anderssen to display image along with text.

HTML 2.0

The HTML 2.0 was created in 1994 and edited by Dan Cannolly. It is a first popular version of HTML language.

HTML 3.2

Originally codenamed Wilbur and lunched in market in January 1997. The version 2.0 was able to code table. The version 3.2 version is well-modified version able to code table and completely supported by IE3 and Netscape.

HTML 4.0

It was released on December 1997 with style sheet and multimedia facilities. In version 4.0, Unicode is used as character sets that allow thousands of different characters. So, it is a very powerful version of HTML, used widely in web page designing.

HTML 5.0

It is a latest version of HTML, It is still in the development phase as of April , 2012.

W3C

 

The World Wide Web Consortium (W3C) is a guardian association which controls its communication protocols and other building block of web and standardizes it. It was established by inventor of web, Tim Burner-Lee in October 1994. The standard of W3C is termed as W3C recommendation. It is hosted by three Universities:

(a) MIT (Massachusetts Institute of Technology) in United States.

(b) ERCIM (European Research Consortium for Informatics and Mathematics) in Sophia-Antipolis in France Keio University.

(c) Keio University: Shonan Fujisawa Campus in Japan.

Tim Berners-Lee is a graduate of Oxford University England. In 1989, he invented the World Wide Web, an internet based hypermedia for global information sharing at CERN, the European, particle Physics Laboratory. He wrote the first web client (browser-editor and server) in 1990. Now, he is a director of W3C and professor of computer science at Southampton ECS.

 

Skeleton of HTML

 

HTML is a tag based scripting language. The skeleton is its basic structure without it, it cannot be constructed. The minimum requirement for HTML designing and its position in document can be discussed here. The < HTML> and </HTML> tags are backbone or main platform on which other tags are located. All element of HTML is written within <HTML> and </HTML>.

We place following tags:

<HEAD>–</HEAD>

<TITLE>–</TITLE>: written within <HEAD> tags.

<SCRIPT>—<SCRIPT>: written within <HEAD> tags.

<BODY>—<BODY>

<FORM>—<FORM>: written within <BODY> tags.

The <BODY> is the main body of HTML documents in which applet, multimedia, link and several other elements are placed. JavaScript and VBScript are scripting language for Internet. The scripting languages are placed within <SCRIPT> and </SCRIPT> tags in <HEAD> section. In this way we can say that the HTML document has following two important sections:

(a) HEAD section

(b) BODY section

HEAD section contains TITLE and SCRIPT sections.

A BODY section contains APPLET section, FORM sections and many other sections.

The text, bgcolor, background, link, vlink, alink are attributes of <BODY> tags. The text attribute is used to control text color, bgcolor is used for background color, background is used for wallpaper and link, vlink and alink are used anchor text color.

Example:

<body bgcolor=”black” text=”forestgreen” link=”yellow” vlink=”red” alink=”green”>

</body>

 

Some Important tags:

These tags are usually used in every web documents. The concept of these tags is basic requirement for any web programmers.

Sn.

Elements

Comments

1.

Hn(Header)

The Header HTML documents is controlled by <Hn> and </Hn> tags. The value of n ranges from 1 to 6. The H1 is largest size of header and h6 is smallest of all.

Grammer:

<hn> Header</Hn>

Where, n=1, 2, 3, 4, 5 and 6.

Example:

<h1> Universal Book</H1>

Header alignment is also used. Header is aligned to left by default, but can be aligned center, right or justify.

2.

P(Paragraph)

It is used to move cursor in new line leaving blank space. It is used in beginning of text. In this way, it is used to separate different paragraph.

Grammar:

<P>—-</P>

<P align=”left/center/right/justify”>—–<P>

3.

BR(break)

This tag moves the cursor in new line without leaving blank spaces.

Example:

University book store<BR>

Cosmopolitan Book Marts<BR>

4.

HR(Horizontal Ruler)

It is used to draw horizontal line to separate section. Its attributes are :

Color: Color name

Noshade: unshaded dark gray line without the hollow and slightly three-dimensional appearance.

Size: number

Width: number or %

Align: left/right/center

Example:

<HR size=”6” color=”red”>

It draws 6 pixels thick line.

5.

<CENTER>–</CENTER>

<center> is used to place text in center position. The text written within <center> and <center> is aligned to the central part of document.

Grammar:

<CENTER>—-</CENTER>

Example:

<center><H1>OSCIENCE.INFO</H1></center>

6.

TEXT

The text color for whole page could be defined within <BODY> tag.

Example:

<BODY TEXT=”RED”>

7.

LINK, VLINK and ALINK

The color of anchor text is also defined within <BODY> tags. The default color of LINK is blue, default color of VLINK is purple and ALINK color is red for Netscape Navigator and Microsoft Internet Explorer.

<BODY TEXT=”green” LINK=”YELLOW” VLINK=”RED” ALINK=”GREEN”>

8.

TOPMARGIN and LEFTMARGIN

These are attributes of BODY tags, used to set top and left margins of document. Some browsers ignore these attributes.

Example:

<BODY TOPMARGIN=”25” LEFTMARGIN=”30”>

9.

BGCOLOR and BACKGROUND

These are also BODY attributes used to display background color and background images.

Example:

<BODY BGCOLOR=”forestgreen”>

<BODY BACKGROUND=”cloud.gif”>

Sometimes, we use BGPROPERTIES attributes with Background to prevent scrolling of images with text. This is a browser-sensitive attributes.

<BODY BACKGROUND=”cloud.gif” BGPROPERTIES=”FIXED”>

 

WEBDOCUMENT

 

<HTML>

<BODY BGCOLOR=”#FFFFFF” TEXT=”RED” TOPMARGIN=”25” LEFTMARGIN=”30”>

<CENTER>

<H1>

<U>FILE TRANSFER PROTOCOL</U></H1>

</CENTER>

<HR>

The FTP, is a tool that allows transfer of files between computers which is most cases would be connected over the internet.

<HR>

</BODY>

</HTML>

 

Document Design

 

There are two types of ground for desktop presentation: background and foreground.

The background is like as background on foreground is text. There are three types of techniques applied for background decorations are:

(a) Color

(b) Image, and

(c) Sound

Color: The background color is defined at the time of declaration of BODY tabs. The color name of RBG code is used for color. The light color is appropriate for background color. If we use dark color as background, the existence of foreground cannot be attractive and char.

Grammar:

<BODY bgcolor=”ColorName or code”>

—-

</BODY>

 

Example:

<BODY BGCOLOR=”#FF0000”>

—–

</BODY>

Or

<BODY BGCOLOR=”RED”>

—-

</BODY>

 

Image: The background image is introduced in BODY tags. The background image is displayed side-by-side and top-to-button to fill the whole page. The GIF is the best format for background (wallpaper), we use image of light color for background.

Grammar:

<BODY BACKGROUND=”imagefile”>

—-

</BODY>

 

Example:

<BODY BACKGROUND=”cloud.gif”>

</BODY>

 

We can create our GIF image for background using any standard graphics package. The Adobe Photoshop, Corel photo-paint, painter. PhotoPro are standard graphics software in market.

Sound: The background sound is used with background tags and some attributes. The loop attribute is used to define number of time of sound production. It supports .mid, .wav, .au sound.

Grammar:

<BGSOUND SRC=”soundfile” LOOP=”number/infinite”>

Example:

<BGSOUND SRC=”autum.mid” LOOP=”infinite”>

We can embed background sound using <EMBED> tags. It has some important attributes like as SRC, AUTOSTART, LOOP, CONTROLLER, VOLUME, WIDTH and HEIGHT etc.

Grammar:

<EMBED SRC=”soundfile” AUTOSTART=”true/false” LOOP=”true/false” CONTROLLER=”false/true” VOLUME=”n” WIDTH=”n” HEIGHT=”n”>

Where, n=numbers

<EMBED SRC=”subash.mid” AUTOSTART=”true” CONTROLLER=”false” VOLUME=”50” WIDTH=”0” HEIGHT=”0”>

 

WEBDOCUMENT

<HTML>

<BODY>

<BGSOUND SRC=”c:\sounds\tracks\subash.wav” LOOP=”infinite”>

</BODY>

</HTML>

 

Background and foreground color:

The HTMl 4 supports 16 named colors. Colors vary system to system. We can use either color name or hexadecimal code for background, foreground and links.

Example:

<BODY BGCOLOR=”GRAY” TEXT=”RED”>

<BODY BGCOLOR=”PINK” TEXT=”#FFFFFF”>

Color name

Hexadecimal codes

Color name

Hexadecimal value

Black

#000000

Maroon

#800000

Silver

#c0c0c0

Red

#FF0000

Gray

#808080

Purple

#800080

White

#FFFFFF

Fuchsia

#FF00FF

Green

#008000

Navy

#000080

Lime

#00FF00

Blue

#0000FF

Olive

#808000

Teal

#008080

Yellow

#FFFF00

Aqua

#00FFFF

 

Navigator and IE support 125 named colors. So, the background and foreground of document are not dependent on only 16 named colors.

Some colors are listed below:

Aliceblue

Darkgreen

Hotpink

Orange

Antiquewhite

Darkkhaki

Indigo

Orchid

Acquamarine

Darkmagneta

Khaki

Palegreen

Azure

Darkolivegreen

Lightblue

Palevioletred

Beige

Darkorange

Lightcoral

Peru

Bisque

Darkorchid

Lightcyan

Pink

Blueviolet

Darkred

Lightgreen

Plum

Brown

Darkseagreen

Lightgrey

Powderblue

Chocolate

Darkvoilet

Lightpink

Rosybrown

Coral

Deeppink

Lightgreen

Royalblue

Crimson

Deepskyblue

Lightyellow

Salmon

Cyan

Floralwhite

Linen

Seagreen

Darkblue

Forestgreen

Magenta

Seashell

Darkcyan

Gold

Mintcream

Skyblue

Darkgrey

Greenyellow

Mistrose

snow

 

Font style

The font is the type face or a special type of symbol represents script of language. Three types of style are placed in toolbar of all word processor are bold, italic and underline. HTML browsers support the Subscript, superscript, big, strong and small and many other styles.

 

Sn.

Style

Comment

1.

<b>—</b>

It displays text in bold typeface.

Grammar:

<B>—</B>

Example:

<B>Science and Technology</B>

2.

<i>—-</i>

It displays text in italic typeface.

Grammar:

<I>—</I>

Example:

<I> Science and Technology</I>

3.

<u>—</u>

It displays text in underline typeface.

Grammar:

<U>—</U>

Example:

<U>Science and technology</U>

4.

<big>—</big>

It is used to display text in larger font.

Grammar:

<BIG>Text</big>

5.

<small>—<small>

It is used to display text in smallest size.

Grammar:

<SMALL>Text</small>

7.

<blink>—-</blink>

It is used to provide blinking effect to the text. It was first introduced by Netscape 1.0.

Grammar:

<blink>Text</blink>

Example:

<BLINK>Science and technology</BLINK>

8.

<sub>—</sub>

It is used for subscript.

Grammar:

<sub>text</sub>

Example:

H<sub>2</sub> O

9.

<sup.—</sup>

It is used for superscript.

Grammar:

<sup>text</sup>

Example:

(a+b)<sup>2</sup>

10.

<s>—-</s>

It is used to strike out text.

Grammar:

<s>Science and Technology</s>

It displays Science and Technology.

11.

<q>—</q>

The quotation is written within <q> and </q> tags.

Grammar:

<q> text</q>

Example:

The king said, <q>” you are arrested”</q>

12.

<tt>—</tt>

It is used for Teletype rendering of text. The browser uses Courier font by default for this purpose.

Grammar:

<tt> text</tt>

Example:

<tt>Science and Technology>/tt>

13.

<em>—</em>

The text written within <em> and <em> text is emphasized.

Grammar:

<em> text<em>

Example:

You must be at least <em> graduated<em>.

 

Example:

<FONT FACE=”+3”> text</FONT>

<FONT FACE=”-2”> text </FONT>

The (+ve) sign is used to increase current size of font and (-ve) sign is used to decrease present size of fonts.

 

WEB DOCUMENT

<HTML>

<HEAD>

<BODY BGCOLOR=”BLACK” TEXT=”ORANGE”>

<CENTER><H1><FONT COLOR=”RED”> WORK</FONT><FONT COLOR=”PURPLE”>ING</FONT></H1></CENTER>

<HR>

<FONR SIZE=”4” FACE=”Georgia”> After reading this article you will be able to configure your <B> for client-server application merely in <FONT face=”Helvetica” color=”blue” size=”+1”> Linux</font> is an <U> operating system</U> and is free of cost <EM><B>OS</B></EM>. Application development in linux platform can reduce your deployment cost.

</FONT>

<HR>

</BODY>

</HTML>

 

Table

 

The single dimensional array is called list and multi-dimensional array is called table. We know that array is a subscripted variable to store large amount of data. The list is a single columned and multi-rowed data stores, but table has multi columns and rows to store more data. When we store data in table, the readability of data is increased as well as storing capacity is also increased. The table is technique of data management. The table for HTML has mainly three parts:

(i) Caption: It is a title of table.

(ii) Heading: the field of table is called heading. Heading are column name in which particular data are stored.

(iii) Data: the data are stored below all heading or fields.

 

Some attributes:

(a) <TABLE>—-</TABLE>

The whole contents of table is enclosed within <TABLE> and </TABLE> tags. Some attributes of table’s tags are:

Attributes

Comments

Bgcolor

It is used to paint background of table with valid color.

Example:

<table bgcolor=”gray”>—-,/gray>

Border

It is used to display border. We put its value in pixels.

Example:

<table border=”1”>—-</table>

The border color can be assigned by bordercolorlight and bordercolordark.

Example:

<table border=”1” border colorlight=”blue”>—-</table>

Align

This attributes is used for table alignment. The left alignment is a default alignment. Some other alignments are center and left

Example:

<table align=”center”>—</table>

The CAPTION has alignment at top, bottom, left and right. The top is the default value.

Example:

<CAPTION ALIGN=”RIGHT”>—</CAPTION>

Width

It is used to assign width to table in numbering of percentage.

Example:

<table width=”605”>—</table>

Height

It is used to determine height of table in number of percentage.

Example:

<table border=”3” height=”20%”>

Cellspacing

It is a common border width around each cell. It is a amount of space between two cells. It is measured in pixels.

Example:

<table cellspacing=”50”>—</table>

The default value for cellspacing is 2 pixels for Navigator and IE.

Cellpadding

The amount of space between an object contained in a cell and the other border of the cell called- cell padding.

Example:

<table cellpadding=”9”>—</table>

The default value for cellpadding is 1 pixel for Navigators or IE.

Rowspan

It is used to merge two or more rows.

Example:

<TD rowspan=”2”>—-</TD>

Colspan

It is needed when we have to merge more than two columns.

Example:

<TD colspan=”2”>—-</TD>

Attributes of TH and TD tag

With TD and TH tags we can use BGCOLOR, BCKGROUND, WIDTH, HEIGHT, VALIGN etc.

Example:

<TD valign=”top” width=”n” height=”n” bgcolor=”red” background=”bird.gif”>

 

(b) <CAPTION> caption text</CAPTION>: is used for declare caption.

Example:

<Caption> Science and technology<caption>

 

(c) <TR> table heading and data</TR>: All rows of table are written within <TR> and </TR> tags.

Example:

<TR> Name area sale</TR>

<TR> MR. Subash Poudel 50000</TR>

 

(d) <Th> heading text</TH>: The each heading of table is written within <TH> and </TH> tags.

Example:

<TH> Name</Th>

<TH> Area</TH>

<TH>Sale</TH>

<TD> data</TD>: each is written within <TD> and </TD> tags.

Example:

<TD> Mr. Ashish Pant</TD>

<TD> Dhangadi</TD>

<TD>50000</TD>

 

Background color and image in a table:  we can create colored cells or put image also on table.

Grammar:

<TH bgcolor=?>

<TH background=?>

<TD bgcolor=?>

<TD background=?>

Example:

<TH bgcolor=”red”>

<TH background=”bird.gif”>

<TD bgcolor=”red”>

<TD background=”bird.gif”>

 

WEB DOCUMENT

<HTML>

<BODY>

<TABLE                 align=”center” BORDER=”10” CELLSPACING=”1” CELLPADDING=”5” BGCOLOR=”orange”>

<CAPTION><FONT FACE=”verdana” SIZE=”4” COLOR=”navy”><B>STAFF’S SLARY</B></FONT></CAPTION>

<TR>

<TH bgcolor=”red”>Sr.</TH>

<TH bgcolor=”red”>Name</TH>

<TH bgcolor=”red”> Basic</TH>

</TR>

<TR>

<TD>1</TD>

<TD>Mr. Dabbal BDr. Bist</TD>

</TR>

<TR>

<TD>2</TD>

<TD>Mr. Gulab Chand Sharma</TD>

<TD> 115000</TD>

</TR>

<TR>

<TD>3</TD>

<TD> Mr. chetraj sharma</TD>

<TD>11500</TD>

</TR>

<TR>

<TD>4</TD>

<TD background=”bird.gif”></TD>

<TD>11500</TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

List handling

The single array is called list. There are many types of list supported by navigator and IE. Generally, web designer use unordered and ordered list in their documents, but other types of list is also seldomly used by some web designers. There are directory and menu list.

(a) Unordered List or Bullet List: The unordered list is enclosed within <UL> and </UL> tags and list elements are started by <LI> tags.

Grammar:

<UL TYPE=?>

<LI>—

<LI TYPE=?>—

</UL>

 

Example:

<UL>

<LI>Floppy

<LI>Mouse

<LI>Scanner

</UL>

Output:

  • Floppy
  • Mouse
  • Scanner

Example:

<BODY>

<TABLE BORDER=”5” WIDTH=”55%”>

<TR>

<TD WIDTH=”25%”><IMG SRC=”sun.gif” WIDTH=”150” HEIGHT=”150”></TD>

<TD WIDTH=”30%”><B><FONT COLOR=”blue” SIZE=”+1”><U>Ingredient for tea</U></FONT></B>

<UL>

<LI>Milk

<LI>Sugar

<LI>Tea

</UL>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

The default type of unordered list is bullet, we can assign its type as CIRCLE (hollow bullet), DISC (solid bullet) and Square (solid bullet), but many browser do not support all the type of unordered list.

Example:

<UL TYPE=”DISC”>—-</UL>

<UL TYPE=”SQUARE”>—</UL>

(b) Ordered list: The ordered list displays list in definite sequences. It supports TYPE for starting number or letters.

Example:

TYPE=”1”

TYPE=”a”

TYPE=”a”

TYPE=”X”

Grammar:

<OL=?>

<LI>

<LI TYPE=?>

</OL>

When we use START attributes with <OL>, the list is started from assigned number.

Example:

<OL START=”3”>

<LI>Floppy

<LI>CD-ROM

<LI>Mouse

<LI>Scanner

<LI TYPE=”10”> Printer

<LI>light pen

</OL>

 

(c) DIR and MENU: DIR and MENU are used for list creation. These types of lists are displayed as unordered lists.

Example:

<DIR>

<LI>Basket

<LI>Bucket

<LI>Garden-Pot

<Li>Wallets

</DIR>

 

Example of MENU LIST:

<MENU>

<LI> fruits

<LI>Water

<LI>Flowers

<LI>Sugar

</MENU>

 

(d) Definition List: <DL> is used to create definition list. The <DT> is used as Definition Title and <DD> for definition rendering.

 

WEB DOCUMENT

<HTML>

<BODY>

<DL>

<DT>Barsat

<DD>Rajkapoor, Nargis, Premnath

<DT>pakiza

<DD>Meena Kumar, raj Kumar, Ashok Kumar

<DT>Payasa

<DD>Guru Datta, Wahida rahman, rahman, Jony Walker

</Dl>

</BODY>

</HTML>

 

The concept of Link

 

The link is process of relate one document to other documents for communication. In the world of Internet, the term Link has very wide meaning. We do all the works to link with each other. We link one computer to another computer, computer to internet, document to document, graphics to document etc. in this way, all the processes are linking process. We discuss about internal and external link. The e-mail is also external link. The e-mail is the most popular use of internet in which message of one person is sent to other through SMPT (Simple Mail Transfer Protocol). So, we can say the Link can link everything, even broken hearts.

<A> and </A> tags are used for anchoring elements. It has some important attributes like as HREF, TITLE, TARGET, NAME etc.

(a) Internal Link: When we link one document to other document of same site, is termed as internal link. This type of link is used to connect several HTML documents to each other.

It has two types:

(i) Document to document link, and

(ii) One part to other part of same document

 

Document to Document link: We link one document with other using anchor text.

Grammar:

<A HREF=?> text</A>

Example:

<A HREF=”hello.html”> Hello ! world</A>

<A HFER=”Student.html”> University student</A>

 

WEB DOCUMENT

<HTML>

<BODY>

<A HREF=”hello>html”> Hello ! world</A><BR>

<A HREF=”student>html”>University students</A>

</BODY>

</HTML>

 

The Linking of parts of same long documents:

 

In long documents, only screen full documents are displayed and rests of document are hidden. When accidently we need information not displayed currently can be accessed through HREF and a NAME.

The linking of two or more part of same document is very easy. We can navigate large documents easily from one part to other part using link between source and target text.

<A HREF=”#BUTTON”>—-</A> contains source (hypertext) and <A NAME=”bottom”>—</A>contains target text.

Example:

Language for <A HREF=”#button”> laymen because of its simple syntax structures </a>, that is not verbose

<A NAME=”button”> The Main Features</A> of Q-basic

 

(b) External Links:  The external links is capability of HTML to link one site to other site through Internet. The HTML is not language for desktop publishing and clerical drafting work, but it is a language for Internet. The web page is designed and linked to Internet. All the activities of HTML are related with designing and linking.

Example:

<A HREF=HTTP://WWW.YAHOO.COM>YAHOO Site Surfing</A>

 

Form

 

The user interactivity is the bonfire side of HTML languages. The option menu, text, textarea, password facilities, checkbox, buttons etc are interactively elements of web documents placed in container called FORM. It is an invisible interactivity portion of web document. The scripting languages are used to increase capability of interactivity. This is the age of Internet and all the business transaction, college registration, shopping, publishing etc are easily and effectively done through Internet. So, clear-cut concept of interactivity is most important for web designer. The only decorate documents with picture, fonts, color and multimedia is not end objective of web designers, the objective should be ability of interactivity.

 

Option Menu

The option menu is an element of form. It can contain list of data in limited area of web page. It is a storehouse of data. We click and select data for our purpose. In the given figure, option menu is given with some options; we can select option by mouse clicking.

Grammar:

<SELECT NAME=? SIZE=? MULTIPLE>

<OPTION> data -1

<OPTION> data -2

<OPTION> data –n

</SELECT>

 

Example:

<SELECT NAME=”footballer”>

<OPTION> 1. Rem Singh

<OPTION> 2. Hari Thapa

<OPTION> 3. Shiv Gurung

<OPTION> 4. Asmita thapa

</SELECT>

SELECT has mainly three important attributes: NAME, SIZE and MULTIPLE.  The NAME attribute is used to assign selected options. In our example, the value of NAME is footballer and 1.Ram Singh is selected from list. It will say to web server as

Footballer=1. Ram Singh

The MULTIPLE attribute is used to select more than one options and SIZE is responsible to display options given in size. Suppose, 3 options can be displayed when SIZE is assigned as SIZE=”3”.

 

WEB DOCUMENT

<HTML>

<BODY BGCOLOR=”skyblue” TEXT=”WHITE”>

<FORM>

<SELECT NAME=”books” SIZE=”3”>

<OPTION> 1. A TO z: c PROGRAMMING

<OPTION> 2. A to Z: C programming

<OPTION> 3. A to Z: C++ Programming

<OPTION>4. HTML in Web

<OPTION>5. Introduction to IT

<OPTION> 6. Introduction to Applet

<OPTION> 7. Data Structures for All

</SELECT>

</FORM>

</BODY>

</HTML>

 

Label, Text and Text area

 

The label, text and textarea are used to input data, so these are user-friendly mechanism of form.

(a) LABEL: The <LABEL> and </LABEL> attributes are used to label for TEXT, checkbox, radio buttons etc. it is very simple in use because only leading the FORM elements.

Grammar:

<LABEL> text</LABEL>

Example:

<LABEL> Name: <Input type=”text” name=”user”></LABEL>

 

(b) Text and Textarea

TEXT

TEXTAREA

It is used for single line input box.

<INPUT TYPZE=”TEXT” NAME=? SIZE=?>

The size is written in pixels.

Example:

SIZE=”30”

Example:

<FORM>

<INPUT TYPE=”TEXT” NAME=”user” SIZE=”30”>

</FROM>

The INPUT TYPE=PASSWORD in also text box in which input is converted into asterisks.

<INPUT TYPE=”PASSWORD” NAME=”USER”>

The TEXTAREA control is used to control multilane input texts.

<TEXT AREA NAME=? COLS=? ROWS=?>

</TEXT AREA>

The value of COLS and ROWS are written in pixels.

Example:

<FORM>

<TEXTAREA NAME=”user” COLS=”50” ROWS=”30”>

</TEXT AREA>

</FORM>

The TEXT AREA has WRAP attributes which value is soft/hard/off.

 

 

Radio and Check Box

 

The radio button and checkboxes are also form elements used for the purpose of user interaction. In a given group of radio buttons, any one can be selected but in checkbox more than one options can be checked.

Grammar:

<INPUT TYPE=”RADIO” NAME=? VALUE=? CHECKED>

Example:

When we have to develop free ship or admission on line admission, the income options are given on the form, for which only one can be selected by applications.

<FORM>

<INPUT TYPE=”RADIO” NAME=”USER” VALUE=”NO”>

<INPUT TYPE=”RADIO” NAME=”USER” VALUE=”YES” CHECKED>

<INPUT YTPE=”RADIO” NAME=”USER” VALUE=”NOT”>

</FORM>

 

Checkbox

The checkboxes are user input interface elements. When more than one options have to be selected, we use it. Like as other FORM elements. It is also written within <FORM> and <FORM> tags.

Grammar:

<INPUT TYPE=”CHECKBOX” NAME=? VALUE=? CHECKED>

Example:

We have to develop on line admission form for admission; the basic qualification can be displayed through checkboxes. These applicants can check his/her basic qualification easilty.

<FORM>

<INPUT TYPE=”CHECKBOX” NAME=”USER” VALUE=”NO”>

<INPUT TYPE=”CHECKBOX” NAME=”USER” VALUE=”YES” CHECKED>

<INPUT YTPE=”CHECKBOX” NAME=”USER” VALUE=”NOT”>

</FORM>

 

Button

The button is a clicking, when it is clicked, some specified actions take place. In our daily life, switch on/off is very common routine work, we interact with computer, TV and so many applicants through buttons. In web page, button is used for communication amongst web servers. Some special type of server language is used for this purpose, called CGI (Common Gateway Interface) script.

(a) SUBMIT: The SUBMIT button is used to transfer input to target.

(b) RESET: The RESET button is used to set form in default stage clearing all input data.

(c) BUTTON: The common type of button.

(d) Image: The image is also used as SUBMIT button.

(e) Browser button: It is used to browse files.

Grammar:

<INPUT TYPE=”SUBMIT” VALUE=?>

<INPUT TYPE=”RESET” VALUE=?>

<INPUT TYPE=”BUTTON” VALUE=?>

<INPUT TYPE=”IMAGE” SRC=? BORDER=? WIDTH=? HEIGHT=? ALT=?>

<INPUT TYPE=”FILE” NAME=? SIZE=?>

 

Example:

<INPUT TYPE=”SUBMIT” VALUE=”Registration”>

<INPUT TYPE=”RESET” VALUE=”Default Setting”>

<INPUT TYPE=”BUTTON” VALUE=”PUSH” ONCLICK=”SHOW()”>

<INPUT TYPE=”IMAGE” SRC=”BIRD.GIF” BORDER=”0” WIDTH=”100” HEIGHT=”120” ALT=”SUBMIT”>

<INPUT TYPE=”FILE” NAME=”MYFILE” SIZE=”40”>

 

WEB DOCUMENT

<!—browse.html–!>

<HTML>

<BODY>

<FORM>

<INPUT TYPE=”FILE” NAME=”MYFILE” SIZE=”40”><BR>

<LABEl>Enter Password:</label>

< INPUT TYPE=”password” name=”mypass”></br>

< INPUT TYPE=”Image” src=face3.jpg” WIDTH=”60” HEIGHT=”60” ALT=”SUBMIT” BORDER=0>

</FORM>

</BODY>

</HTML>

 

CGI (Common Gateway Interface):

 

When we click submit button, the form is loaded in server with the help of CGI. The CGI is a server language; it runs on servers and compatible with every web browser.

It has two types:

(a) CGI program: It is written in higher level programming language using C, C++, C#, Visual Basic, Java and others. These are compiled program located in special directory of web server, as example, it is located in cgi-bin directory.

(b) CGI Script: These are written in javaScript, VBScript, Jscript, Perl, Tel and DOS batch files. The CGI script is written in interpretable languages.

The writing of CGI program is not common task because it is highly safety and security protocol and programmers have to follow server’s guidelines. The interaction between web-server and CGI program depends on the operating system also. When we click SUBMIT button, the web browser send request to web server, where CGI is responsible for processing and returning in the form of output to server, and server send response to web browser.

The main objective of FORM element is providing interactivity with web documents. When we know about server and CGI our ninny percent headaches are removed.

 

The concept of frame

At railway junction, many trains meet together and departure to destination. Like as concept of platform, many HTML documents can be harbored to main documents or browser. The parent has many children, teacher has many students, and students have many courses. Like as it single browser can display many document at a time. The concept of documents within documents is possible through <FRAMSET> and </FRAMESET> tags. Documents are bounded in scrolling frames. The frames add storing capacity of document very efficiently and add beauty also.

Example:

<HTML>

<FRAMESET COLS=”25%, 75%”>

<FRAME SRC=”student.html”>

<FRAMESET SRC=”university.html”>

</FRAMESET>

</HTML>

The 25% space is provided for student.html and 75% for university.html document to display in browser. We can provide COLS space as <FRAMESET COLS=”1*, 3*”>. At first, we create student.html and university.html document, and these two documents are used in frames of third document.

Example:

<HTML>

<BODY BGCOLOR=”BLACK” TEXT=”WHITE”>

<H1>

<CENTER>Courses</CENTER>

<HR>

<OL>

<LI>B.sc(computer)

<LI>BCA

<LI>PGDCA

<LI>M.SC (Computer)

<LI>mca

</OL>

</BODY>

</HTML>

 

Inline Frame

Inline frame is very hot feature of HTML because it is helpful in designing a special type of frame in which all linked documents can be displayed. This feature helps in development of course material and encyclopedia. We use <FRAMES> and </FRAMES> tags to enclose inline frame element. These tags have NAME, FRAMEBORDER, MARGINHEIGHT, WIDTH, HEIGHT AND ALIGN attributes.

Syntax:

<iframe src=url name=”users” width=”number” height=”number”></iframes>

The <IFRAME> tag is used to display some organs of human system. There are four files created to link with main IFRAME documents. These files are heart1.html, forebrain1.html, cere.html and cranial.html. These files are just graphics files.

Example:

<!—-Cranial.html—-!>

<HTML>

<BODY>

<IMG SRC=”brain2.gif” WIDTH=”320” HEIGHT=”300” ALT=”cranial nerve”>

<CENTER><H2><FONT COLOR=”#FF0000”>Cranial nerve: 12 pairs</FONT></H2></CENTER>

</BODY>

</HTML>

 

Like as cranial.html, other graphics files are developed for main document. The coding of main document is written below:

<HTML>

<BODY BGCOLOR=”black” TEXT=”white” LINK=”white” VLINK=”yellow”>

<H1><CENTER>Human System<CENTER></H1>

<CENTER><IFRAME WIDTH=”400” HEIGHT=”250” NAME=”master”></IFRAME>

</CENTER>

<OL>

<LI><A HREF=”heart1.html” target=”master”>Heart</A>

<LI><A HREF=”forebrain1.html” target=”master”>Forebrain</A>

<LI><A HREF=”cere.html” target=”master”>Cerebellum</A>

<LI><A HREF=”cranial.html” target=”master”>Cranial Nerve</A>

</OL>

</BODY>

</HTML>



Related posts:

  1. Scripting Language The actual strength of web page is hidden in scripting...
  2. [info] Why can’t windows ( notepad ) display Linux text files properly? Windows text editors like notepad cannot display the text files...
  3. Programming Language Grammar Every language has its own grammar. Nepali, Hindi, Mathili, Newari,...
  4. Programming Language Language is a medium of communication. There are several languages...
  5. C++ Cast Explicit type conversion (casts) in c++ or c++ cast It...