III BBM NOTES: III BBM UNIT-3

Q) Describe the structure of HTML Document.

Structure of HTML Document:

<HTML>

<TITLE>Title of the Web Page </TITLE>

</HEAD>

</BODY>

</HTML>

An HTML file can be created by using a simple text editor viz notepad, textpad, editplus.
HTML file must have an extension htm or html.
The entire web page is enclosed within the <HTML> </HTML> tag. Within this tag, two distinct sections, head and body are created. These sections are Head and Body.
Document Head: The text between the <HEAD> tag and the </HEAD> tag is header information. Header information is not displayed in the browser window, it is necessary for the internal working of the document. An exception to this is the <TITLE> </TITLE> tag, which displays the document title in the browser’s title bar.
Document Body: the <BODY></BODY> tag encloses the body of the HTML document.

· HTML Document – Body Enclosed in <BODY> </BODY> tag. Some important attributes of the BODY tag

– BGCOLOR = “color” / “#rrggbb”

– BACKGROUND = “url of the image”

– TEXT = “color” / “#rrggbb”

– LEFTMARGIN = n

– LINK = “color” / “#rrggbb”

– TOPMARGIN= n

Q) Explain heading tag with example.

Header Tags. HTML has six level of headings. Displayed in larger and bolder fonts. The font size of the heading will go on decreasing from H1 to H6. Different level heading tags.

o <H1> Heading 1 </H1>

o <H2> Heading 2 </H2>

o <H3> Heading 3 </H3>

o <H4> Heading 4 </H4>

o <H5> Heading 5 </H5>

o <H6> Heading 6 </H6>

Example

<html>

<head>

</head>

<body>

<h1>Around the World</h1>

<h2>Asian Countries</h2>

<h3>India</h3>

</body>

</html>

Q) Describe the formatting of the web page.

<FONT> tag – Allows you to specify the font face and font size. Some common attributes are

o FACE specifies the font style.

o SIZE specifies the font size. Value can range from 1 to 7. The default is 3.

o SIZE can be set as a relative value using + or – .

o COLOR- The color of a font can be specified using a hexadecimal number value six characters long.

o E.g.: <FONT FACE=“Helvetica, Arial” SIZE=“7” OLOR=“#FF0000”>

Header Tags. HTML has six level of headings. Displayed in larger and bolder fonts. The font size of the heading will go on decreasing from H1 to H6. Different level heading tags.

o <H1> Heading 1 </H1>

o <H2> Heading 2 </H2>

o <H3> Heading 3 </H3>

o <H4> Heading 4 </H4>

o <H5> Heading 5 </H5>

o <H6> Heading 6 </H6>

Paragraphs: <P> </P> - used to create paragraphs.

Line Breaks: <BR> - to insert returns or blank lines in the document. e.g. :<P>This <BR> is a para<BR>graph with line breaks</P>

Horizontal Lines: <HR> - used to draw a horizontal line across the web page. e.g: <HR ALIGN = “right”

WIDTH = “50%” NOSHADE >

Physical text formatting tags

Tag Description

1. <B>….</B> - Bold

2. <I>……</I> - Italic

3. <U>….</U> - Underline

4. <STRIKE>…</STRIKE> - Strikethrough

5. <TT>….</TT> - Typewriter (monospaced)

6. <CENTER></CENTER> - Centers the text on the screen.

7. <SUB>….</SUB> - Subscript

8. <SUP>….</SUP> - Superscript

9. <BIG>….</BIG> - Bigger font (one font size bigger)

10. <SMALL>….</SMALL> - Small font (one font size smaller)

Q) Brief Note on Linking Pages (or) Short note on Anchor Tag (or) Explain the Hyperlink creation

The anchor tag, <A> and </A> , is the mechanism by which hyperlinks are placed in hypertext documents. The

term anchor is used because it indicates the static positioning of a hyperlink.

Attributes : – HREF – NAME – TITLE

e.g.: <A href=“next.html”> Click here </A>

Links help the user to navigate across pages as well as within a page. The text or an image that provides such

link(s) is called Hypertext or Hyperlink. Hyperlinks can be created by using a <A> tag, which stands for anchor

and has the following attributes.

a. HREF - Hypertext Reference: This attribute points the link to a bookmark, another file, either within the same webs site or elsewhere on the internet.

b. NAME - Name: The name of the bookmark. This attribute lets you “bookmark” a location on the web page. An HREF anchor can point a link to that area on the page.

c. ALINK - Specifies the color of the activated links

d. LINK - Specifies the color of links

e. VLINK - Specifies the color of the visited links

Syntax and Examples :

(a) Clickable Text Hyperlinks

<A HREF = http://www.usa.gov/document/index.html> White House </A>

(b) Clickable Image Hyperlinks

</A > …..with this if user clicks on the baroow image, the document named index.html will be loaded.

<A HREF=mailto:xyz@gmail.com>Contact xyz </A> - when user clicks on the hyperlink “Contact xyz”, a mail

dialog box will be launched, with To field filled in with xyz@gmail.com. All the user has to do is complete the

remainder of the message and send it.

(d) Intra-document Linking

Another important attribute of the anchor tag is NAME. The NAME attribute lets you crate a hyperlink to

any part of your document, rather than just the beginning. That is, any portion of the document can

automatically be displayed at the top of the browser’s document area. This is useful if you have a long web

page and would like users to be able to jump to various section of it without scrolling.

<A HREF = “#one”> First </A>

<A HREF = “#second”> Second </A>

<A HREF = “#third”> Third </A>

………..

<A NAME = “first”> <H3>FIRST</H3></A>

<A NAME = “second”> <H3>SECOND</H3></A>

<A NAME = “third”> <H3>THIRD</H3></A>

Note that if the hyperlink is in the same page/file, as in shown above, the URL does not need to be specified. You can begin the HREF with # symbol as shown above.

Q) Explain the Semantic v/s syntactic based style types in HTML.

Semantic based style types:- [content based style types]

HTML tags are used to indicate the content of the text for example the text may be an address or citation and the browser interprets address and citations according to built-in settings. You merely tell the browser the category into which the text falls.

1. Emphasis Tag: The Emphasis Tag, <EM>, with its corresponding </EM> ending tag is used for highlighting text.

Example: Meet me to night. It is <EM> important </EM>

2. Strong Tag: The strong tag,<STRONG>, is used to indicate an even higher level of emphasis.

Example: I <STRONG> love <STRONG> you Juliet. Yours, Romeo

3. Citation Tag: The citation tag, <CITE>, is used to specify a reference. A collection of citation creates a bibliography. Every reference is bracketed between <CITE> and </CITE>.

Example: lots of interesting information about networking can be found in Tannenbaum’s book. <BR>

<CITE> Andrew S. Tannenbaum <BR>

Computer Networks <BR>

Prentice Hall <BR>

1996 <BR>

</CITE>

4. Address Tag: The address Tag,<ADDRESS>,is used to indicate an address. If it is used throughout a series of web pages, it is easy to automate the process of developing an address book for the pages.Tag ended with </ADDRESS>.

Example:

Please send e-mail to

<ADDRESS> Paula Ferreria <BR>

412 Jenkins avenue <BR>

Nashville, Tannessee 37212 <BR>

</ADDRESS>

5. Keyboard Tag : This tag is used to delineate keyboard input.

Example: At the UNIX prompt type <KBD>ls –l</KBD> in order to list your files in the long form.

6. Code Tag: The code tag,<CODE>, is used for specifying program code.

Example: beginning programmers often have difficulty understanding why the following program does not stop: <CODE> let I have the value 1 <BR>

while I have the value 1 <BR>

increment I <BR>

< /CODE>

7. Small Tag: The method for reducing the relative font size is to use the small tag,<SMALL>. Text appearing in this tag is made proportionally smaller than the surrounding text. It is closed with </SMALL>.

Example:

I thought I heard a voice coming from the floor. What I saw When I looked < SMALL> closely </SMALL>

was mind boggling.

8. Big Tag: The big tag, <BIG>,plays the opposite role of the small tag.

Syntactic based style types:- [physical based style types]

In contrast to the semantic based style types, syntactic based style types allow you to tell the browser specifically, how you want the text to appear.

1. Bold Tag: The bold Tag , <B>, is used to make text in bold face. Most browsers darken the text and widen the letters.

Example: <B> The mighty, Mighty Bosstones </B> have some lyrics that could be considered controversial.

2. Italic Tag: To place a portion of text in italics, use the italics tag, <I>. Italics might be a good choice for the text of a poem:

Example:Mono spaced Typewriter <I>

When I met you my life was enhanced. <BR>

When I met you my heart danced. <BR>

When I met you I felt forever blessed. <BR>

Your image came to me as I ran out of time on the test <BR>

<I>

3. Strike Tag: The strike tag, <STRIKE>, may be used for crossing out a word by having a line drawn through it. Example: Nail polish now <STRIKE> 50 </STRIKE> 60 percent off.

4. Subscript Tag: The subscript tag ,<SUB>, is used to generate a subscript.

Example: H<SUB>2 </SUB>O

5. Superscript Tag: The subscript tag ,<SUP>, is used to generate a superscript.

Example: a<SUB>2 </SUB>

6. Underline Tag: The underline tag, <U>, is used to underline text.

Example:<U> Huckleberry Finn </U> was written by Mark Twain.

7. Blink Tag: Flashing text is created using the blink tag, <BLINK>. Because most users find flashing text very

Annoying, it should be used very sparingly.

Example: <BLINK> I’m annoying you, aren’t I ? </BLINK>

Q) Write a short note on Headers and Footers

Headers:- The beginning part of a html page is called the “header”. Note that it is not header with the contents of the head tag i.e., the header is not formatted with in the head tag but in the body of a document. Most headers contain a subset of the following information.

1. The title of the page

2. Last update information

3. Signature of the page developer

4. An icon or logo associated with the page

5. A counter of the number of visitors

6. An advertisement etc.,

The purpose of the header is convey the most important information about the page and set the tone for the

page. In any collection of related web pages, it is a good idea to use consistent headers. This helps the reader to

determine boundaries of the presentation.

The HTML Tag is <HR> The horizontal rule tag has several attributes that are supported by most browsers. They are

WIDTH – attribute is used to specify how wide the horizontal should be. The default draws a line that crosses the entire width of the browser window. The value can be specified either as a percentage of the browser window’s width, or as a fixed number of pixels.

Example: <HR WIDTH = “45%”>

SIZE – attribute allows to define a taller(thicker) line.

Example: To draw a Horizontal line across 75% of the screen that is 10 pixels high, the HTML code is

<HR WIDTH = “75%” SIZE = “10” > The order of the attributes is not important.

NOSHADE – To produce a darker,flatter-looking horizontal line, use the NOSHADE attribute, which functions like a switch and has no value.

ALIGN – may have any of the following values: left, right, center

Example: HTML code to produce the horizontal line is

Footers:- The ending part of a web page is called the footer, most footers contain a subset of the following information.

1. Navigational aides

2. The web-masters name

3. Last update information

4. A mail-to hyperlink to the webmaster

5. A hyper link to a Frequently asked questions

6. A copy right notice

7. Publication date

8. Acknowledgements etc.,

The purpose of the footer is to convey additional important information about a page. For the collection of related web pages, is a good idea to use consistent footers similar to the headers.

Q) Explain briefly about Lists in HTML.

In HTML lists are segregated into three types

· Ordered lists

· Unordered lists

· Definition lists

Unordered lists:- These lists are also called “Bulleted lists”. Unordered list are characterized by list items, that do not have numbers. They are delimited by the <UL> . .</UL>. Each point in the list is delimited by <LI></LI>.

The syntax of <UL> of tag is

....

</UL>

Type can be disc, square or circle with which you can change the appearance of the bullet.

Example:-

<UL>

<LI> A big red truck</LI>

<LI> An aeroplane</LI>

<LI> A walkwan</LI>

</UL>

Ordered list: In an ordered list, the elements are items are prefixed by a symbol (1,2,3…..,A,B,C, …..a,b,c …,i,ii,iii…..) that denotes their relative order with in the list. The beginning and end tags for an ordered list are <OL></OL>. The beginning tag for each list item is <LI>, the end tag for list item is optional. By default, the items in an order lists are numbered using number.

The syntax of <OL> tag is,

</OL>

Ex:-

<OL>

<LI>red

<LI>orange

Where type can be 1,a,A,i,I and start is the first item number. So, it is possible to begin numbering from a value other than one, which the help of value to the START attribute. The list item tag also as an attribute. The value attribute of the list item tag can be used to change an items value as illustrated in the below example.

<OL>

<LI>step 1

<LI>step 2

<LI> value=”8”>step 8

<LI>step 9

</OL>

The succeeding items continue from the new value. The VALUE attribute may be used in a similar passion to

change the numbering when letters or roman numerals are used.

Definition list: - Definition list or unordered list in which each item as two parts. A term and its corresponding definition. The beginning and ending tags for the definition tags are <DL> </DL> respectively

Each item in this list requires a definition term tag <DT> and each definition option used data definition tag <DD>

<DL>, <DT> and <DD> tags

Example:-

<DL>

<DD> A sprint

<DD>a quick hard run

<DT><B>marathon</B>

<DD>a 29.9 mile run

</DL>

Q) Descried briefly about Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Tables in HTML are intended to be used in much the same way that you’d use a table in a word-processor. ie. to layout text or graphics in an organised tabular format in your HTML document.

1 Table Tag

HTML tables always begin and end with a table tag. E.g.

<TABLE>
</TABLE>

The table tag itself may include certain attributes that control how the whole table will appear. These attributes are listed below: ALIGN=	This specifies the horizontal alignment of the table. The possible values are left, center and right, with left being the default. The alignment attribute is sometimes left out in favour of aligning the table by enclosing it in a <DIV> or <CENTER> tag but using the ALIGN attribute is preferable.
BGCOLOR=	Sets the background colour for the table, using either a colour name (eg black), or by using a hexadecimal colour code (eg #FF00FF). Introduced with Netscape Navigator version 3, older browsers will ignore this attribute.
BORDER=	Controls the thickness of the line around the table and its cells. Setting this attribute to 0 can hide the border. Most browsers will default to a border width of 0, though some older browsers will default to a thin border appearing. Borders will not appear around empty cells unless there is a non-breaking space (blank space) in the cell. I.e.
CELLPADDING=	The amount of blank space between the cell contents and the edge of the cell.
CELLSPACING=	The amount of blank space between cells in the table. In most word-processor or desktop publishing programs, table cells share borders with their neighbours. In HTML they are each separated by a small space.
WIDTH=	The width of the table can be specified by stating the number of pixels (eg 500 pixels wide) or by specifying how much of the available space will be taken up by the table (eg 80%)

Table Data Tag

Within each row, the cells need to be specified with the table data <TD> tag. Like the table row tag, the closing tag for table data can be left off. The following attributes may be used: ALIGN=	Sets the horizontal alignment for the contents of the cell (left, center or right). Left is the default.
BGCOLOR=	Sets the colour of the cell’s background (overrides the table background colour)
COLSPAN=	Makes the cell span the specified number of columns. This is similar to merging the cell with the cells to the right. Eg COLSPAN=3 means that this cell will be merged with the next 2 cells. You won’t need to put in <TD> tags for the merged cells.
HEIGHT=	Specifies the height (in pixels) for the cell. Other cells in the same row will use the same height. Be careful not to specify different heights for different cells in the same row.
NOWRAP	Prevents the text in a cell from wrapping on to a new line when there is insufficient space.
ROWSPAN=	Merges the cell with the cells below with the value representing the number of rows spanned. Similar to the COLSPAN attribute.
VALIGN=	Sets the vertical alignment for the contents of the cell (top, middle or bottom). Middle is the default.
WIDTH=	Sets the width of the cell in pixels or % of the table’s width. Other cells in the same column will take on the same width. Be careful not to specify different widths for different cells in the same column. It is also a bad idea to have a row of cells with widths that add up to a different amount than the table width. A good idea is to leave the width for the last cell blank so it can use whatever space is leftover from the width specified in the <TABLE> tag.

Example

<TD>cell 2

<TD>cell 3

<TD valign=bottom>cell 4

</TR>

<TR>

<TD>cell 5

<TD>cell 6

</TR>

</TABLE>

Q) Explain briefly about we graphics (OR) Popular images.

The most popular types of graphics on web pages are

1. Gif – Graphics Interchange Format

2. Jpg or jpeg – joint photographic experts group

3. Png – portable network graphics

4. Tiff – tagged image file format

5. Bmp – windows bitmap format

6. Ico – windows icon format and fsh, lwf, pcx, tga, emf etc

GIF in detail:-

GIF images are identified by the “gif” extension. This format is commonly used to save simple images that requires a small number of colours. For example buttons, icons, and simple line drawings (cartoons). GIF was developed by compuserve and it uses a petended form of loseless compression called “LZW”. GIF supports upto 256 colors which can be represented by using 8-bits.

Jpg:-

Images in this format are identified by the “jpg” file extension. This format is used to store complex images, which involves large no. of colors. For example photographs, art works etc. “Jpg” was developed by the “Joint photographic Experts Group” and in contract to “gif” it uses a loss compression scheme. As the name implies this compression involves throwing away some of the information contained in the image. The key to the JPG compression is that, the quality different is not perceptible to the human eye.

PNG:-

Images stored in this format have “.png” as file extension. Like “GIF”, “PNG” uses loss less compression. This means that photographs in this format may result in very large files. But for simple images “PNF” compresses slightly more than “gif”. More over PNG supports full color representation of images and it is patent free format.

Q) Explain Image and it attributes.

With this tag one can include web-graphic into the HTML document.

Other values to the attribute “Align”: -

1. Baseline or bottom: - Align the bottom of the image with the baseline (default).

2. Middle:- Aligns the middle of the img with the baseline

3. Abs bottom: - Aligns the bottom of the image with the bottom of the lowest object in the line.

4. Abs middle: - Aligns the middle of the image with the middle of the line.

5. Top: - Aligns the top of the image with the top of the highest object in the line.

6. Text top: - Aligns the top of the image with the highest point of the text in the line.

Spacing control: -

By default the text that wraps around an image to too close to the image. The Horizontal space and Vertical space attributes of the image tag can be used to control the horizontal and vertical space respectively. These two can be assign with numeric values indicating the number of pickles.

Example: -

Centering images:- Using the value of left and right for the <img> tag align, you align your images with the left and right edges of the browser window. There are several ways to center images as illustrated below.

1. Use the paragraphs <p> tag

Example:

xxxxxxxxx

xxxxxxxxx

</p>

2. Use the center tag

3. Use the header tag

4. Use the division tag

5. <div align=center><img……….></div>

Note that header tag is a symbiotic tag

Image borders: - The border attribute of the img tag allows you to create borders around images by selecting BORDER to “0” it is possible to eliminate border.

Low source images: - This provides a preview of what is coming i.e., this attribute allows another image (quickly loadable) to display in place of the intended image, while the page is loading. The “src” attribute should be specified before “lowsrc”.

Example:-

To avoid confusion to the browsers, which are not supporting lowsrc and also note that height and width apply to both

“src” and “lowsrc”.

Q) Image Maps

Image maps:- In the case of clickable image clicking any where on the image will activate same link. Image maps, making it possible to load different html pages by mousing over and clicking on various parts of an image.

Image maps have become quite popular as navigational aids and some applications send themselves especially well to their use.

Two types of image maps are currently being use

1. Server side image maps

2. Client side image maps

Client side image maps:- In client side image maps the HTML document contains the map information and the browser perform the necessary calculations. The result is that the better performance.

There are two steps to create client side image maps

I. For creating a client side image map you will need to specify your pixel location

a. Rectangle:- Requires the upper left and lower right of the defined box

For example:- A=(26,72) and B=(145,146)

b. Circle:- Requires the center point and radius pixels

For example:- A=(262,110) B=42

c. Polygon:- Requires the coordinates of each vertex(point) of the area you want to define

For example:- A(389,64), B(450,64), C(465,105), D(440,167)

II. Create an internal map file

a. <Img src=”test.gif” usemap=”#test”>

b. <map name=”test”>

c. <Area shape=”Rect” cords=”26, 72, 145, 146” href=”c:\two.html”>

d. <Area shape=”circle” cords=”262, 110, 42” href=”c:\three.html>

e. <Area shape=”polygon” cords=”389, 64, 440, 64, 465, 105, 440, 147, 389, 149, 365, 105” href=”c:\four.html”>

f. <Area shape=”Rect” cords=”0, 0, 499, 212” href=”c:\one.html”>

g. </map>

Server – side image maps:-

A server side image maps involve three components

1. An image that is used as the image map

2. A map file that defines the areas of the image and their corresponding URLs

3. An image map program

The map file and image map program must reside on the server i.e., each time a user click on an area of user map a connection is made to the server and the image map program handles the request. The browser sends the location of the mouse click in the form of (x, y) coordinates then the image map program which resides on the server performs calculations to determine the associated URL. The corresponding document is sent to the client to satisfy the request.

Server – side image map plays an extra burden on the server since they require the web server to perform calculations. This results in a delay between clicking and resulting web page. Client side image maps are remedy to this delay.

Q) Explain about Frames and its tags.

Frames:- Frames are an important HTML feature, which can give your pages a cleaner look and make them easier to navigate. Frames allow you to divide a browser’s window in to several independent parts.

FRAMESET Tag:-

A group of frames in a single browser window is called a frame set, the tag are <frame set>, </frame set> which this tag the browser window can be partition, they by using <frame> tag we can tell the browser what to load into the different frames.

<Frameset> is the main container for a frame, it has two attributes

Rows
Cols

“A frame document has no body” and no tags that would normally place in the body appear before the <frameset> tag. The <frameset> tag has a matching end tag </frameset> and with in the frameset we can only have other nested <frameset> tags, <frame> tag or the <no frames> tags.

Rows:- (Rows height value list)

This attribute takes a comma separated list of values. These values can be absolute pixel values, percentage value (1-100) or relative scale ling values.

Cols:- (columns width list)

Takes comma separated list of values similar to rows attribute.

The <frameset> tag can be nested inside other <frameset> tag in which case the complete subframe is placed in the space.

FRAME TAG: The <frame> tag defines a single frame in a <frameset> which can have following seven attributes.

1. Src:- This attributes take URL of the document as value. Frames with out this attributes are displayed as blank space.

2. Name:- (window name) This attribute is used to assign a name to a frame. So, that it can targeted by links in another document.

3. Margin width:- This is used when user wants some control of the margin for this frame. The value for margin width, if it is specified in pixels they cannot be less than frame objects.

4. Margin height:- This is just like margin width except it controls the upper and lower margins instead of the left and right margins.

5. Scrolling:- (yes or no or auto) This attribute is used to describe if the frame should have a scroll bar or not. The value auto instructs the browser to decide whether scroll bars are needed or not. This attribute is optional and the default value is auto.

7. Frame border:- This is optional attribute with which user can set the border to the frame.

<HTML>

<head>

<title>My first Frame</title>

</head>

</frame set>

</html>

Q) Describe Frameset design algorithm:

This algorithm assumes that you have specifications of the browser window division you want to create. Then the steps for the framing algorithm are

1. First decide whether to use ‘cols’ or ‘rows’ in the outermost <frameset> declaration.

2. Decide the size of frames in terms of absolute values, relative values or percentage

3. Repeat the one and two steps until no further division are necessary i.e., next <frameset> with in the <frameset> with specifications

4. The algorithm recursive because it uses itself in subsequent steps

Example:-

Q) Explain briefly about forms and its corresponding tags in details.

FORMS: “Forms” are a mechanism that allows you to type information into fields on a browser screen and submit that information to a web server or to any other program i.e., “HTML forms” allow you to create “interactive web pages”.

An ‘HTML Form’ is a document containing normal content, mark-up, special elements called controls, textbox, button, check box, radio buttons, menus etc and labels on those controls users generally complete a form by modifying its control before submitting the form to an agent for processing [web server, mail server, another program etc..]

Form tags:-

Forms can have a number of different types of fields, in which viewer or user can enter information. The beginning and ending tags for form creation are <form> and </form>. All the values assigned to items between above two tags are uploaded to the server when a user submits a form.

Attributes of <form> tag:-

1. Action:- The form itself must contain the name of the program that processes the information submit. The program location is specified using the action attribute. So, the value of action attribute is an absolute “URL”. Usually that of a program.

2. Method:- (get or post) This attribute is used for form submission. There are two different ways of uploading values to a webserver.

First method:-[method=get] This appends the values of the input parameters to the URL specified in the action attribute. In a single communication this information is uploaded to the server that process the form. The “action” URL is separated from the parameter names and values by the question mark symbol as explaining in the below example.

Example:- <form method=”get” action=http://www.acme.com/name.age>

When this form is submitted the browser will just try to load the following URL with two input parameters.

For example,

http//www.acme.com/name.cgi?lname=”Raju & fname=Ranga

Second method:- [method=post] The post value assigned to “method” attribute provides another way of submitting input value (uploading) from a “form” to a web server. In the post method the server specified in the action attribute of the form tag is contacted. After communication has been established the input values are sent to the server. The encoding style of parameters name and values may differ from server to server. Whether a form uses the “get” or “post” method the program that handles the form must be able to decode the parameters and use them for processing.

Form controls (or) widgets:- Form controls are text boxes, radio buttons, check boxes, drop down lists, action buttons, text areas, password boxes and so on. Each control usually creates a name/value pair that forms part of the submitted data. Some controls might also have a default value which can be made so that the user cannot change the default value. You can also have a control which will “rest” all the controls to their default values, so that the users can start over again.

1. Text boxes:- These are controls that allow a user to enter some text. A text has a “type” of “text”. The ‘name’ of the control set which the “name” attribute. The default value is set with the “value” attribute other attributes of control are ‘size’’, ‘maxlength’.

2. Password boxes:- These are identical to text boxes except for the fact that what ever the user types is not displayed in the control i.e., usually ‘*’ displayed in the place of characters. Password boxes are having a type of “password”.

Ex:- password:<input type=”password” size=60>

3. Check boxes:- This is used to offer the user a ‘yes/no’ option for something check boxes can either be checked or unchecked or unchecked by default by using the checked attribute. You can have several check boxes with the same name in which case several pairs will be sent if more than one checked box is check. Check boxes have a type of “check box”.

Ex:-

<form>

subscribe:<input type=”check box” name=”use” value=”yes”CHECK D>

</FORM>

4. Radio buttons:- These are similar to check boxes with the exception that when several radio buttons share the same name only one of them can be checked. When the form is submitted only the value of the selected radio button is sent radio buttons have a type of “radio”.

5. Submit buttons:- (Action buttons) A submit button is a button which, when clicked, will submit the form with its current values. Submit buttons may have names and values, if they don’t the button simply says submit query or something similar. You can also have multiple submit buttons with different names and values i.e., clicking on a different button will produce a different result.

Ex:-

<p> your email

<p>

</form>

6. Selectors:- Alternative to radio and checkboxes is the <select> tag. This allow users to choose any subset of items from a group with out occupying much space on the screen. The items in a given <select> tag are usually reended in the style of pop-up menu. The attributes of the <select> tag are “multiple”, “name” and “size”. The attribute “multiple” allows the user to select more than one item i.e., in this case the <select> tag behaves like a group of check boxes. If the multiple attribute is omitted the <select> tag behaves like a set of radio buttons i.e., only one item may be chosen.

Ex:-

<option>loke

<option>water

<option>float lake

<option selected> juice

</select>

7. Text area:- Text area is to specified a multi row text field rather just a single row. This is useful either to send or receive short messages. For example to create a 20 row 80 column area.

Ex:-

enter message here ………

</text area>

The attribute wrap of a <text area> tag will wrap the text even if user types with out hitting the enter key or return key.

You can also display a default text initially in the text area as shown in the above example.

8. Hidden controls:- These are not displayed and cannot be manipulated by the users i.e., user cannot change hidden control values. These are used to upload fixed values/names along with the rest of the form. Hidden controls have a ‘type’ of “Hidden”. For example if you want to unsubscribe user from a mailing list. You can call action that could have the value (fixed) unsubscribe.

III BBM NOTES

Thursday, 6 April 2017

III BBM UNIT-3

1 Table Tag

Table Data Tag

No comments:

Post a Comment