Introduction to HTML

In this unit you are going to learn some basics of HyperText Markup Language which is used to write HTML documents. Once you create an HTML document it can be viewed in any browser. There are lot of web sites like xoom.com and rediff.com, which provide web space for your personal web site. After finsihing this chapter, you will be able to write web documents. Once you create your web pages, you can upload these pages to your site using any FTP Software. This unit dicusses the basic tags required for creating the HTML document.

You will be learning how to use List and Hyperlink text effectively in your document. You will also learn to format your document and to include images in your document. Images will improve the appearance of your document.

2. Introduction to URI

The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:

· A uniform naming scheme for locating resources on the Web (URI)

· Protocols for accessing resources over the Web (HTTP).

· Hypertext for easy navigation among the resources (HTML).

Every resource available on the Web i.e. HTML document, image, video clip, program, etc. has an address that may be encoded by a Universal Resource Identifier, or "URI". URI’s typically consist of three pieces:

· The naming scheme of the mechanism used to access the resource.

· The name of the machine hosting the resource.

· The name of the resource itself, given as a path.

Consider the URI that takes you to the HTML 4.0 specification in World Wide Web:

http://www.w3.org/TR/REC-html40/

This URI may be read as follows: There is a document available via the HTTP protocol, residing on the machine www.w3.org, accessible via the path "/TR/REC-html40/". Other schemes you may see in HTML documents, include "mailto" for email and "ftp" for FTP.

You may be familiar with the term "URL" and not the term "URI". URLs are a subset of the more general URI naming scheme.

3. Fragment Identifiers

Some URI’s refers to a location within a page. This kind of URI ends with "#" followed by an anchor identifier (called the fragment identifier). For instance, here is a URI pointing to an anchor named section_2 in top.html page.

http://somesite.com/html/top.html#section_2

4. Relative URI’s

A relative URI doesn’t contain any naming scheme information. Its path generally refers to a resource on the same machine as the current document. Relative URI’s may contain relative path components (e.g., ".." means one level up in the hierarchy defined by the path), and may contain fragment identifiers.

Relative URI’s are resolved to full URI’s using a base URI. Base URI is specified in the document Head. As an example of relative URI resolution, assume we have the base URI "http://www.acme.com/support/intro.html". The relative URI in the following markup for a hypertext link is

<A href="suppliers.html">Suppliers</A> would expand to the full URI "http://www.acme.com/support/suppliers.html", while the relative URI in the following markup for an image is

<IMG src="../icons/logo.gif" alt="logo"> would expand to the full URI "http://www.acme.com/icons/logo.gif".

In HTML, URI’s are used to:

· Link to another document or resource.

· Link to an external style sheet or script.

· Create an image map.

· Submit a form.

· Create a frame document.

· Cite an external reference.

· Refer to metadata conventions describing a document.

5. History of HTML

HyperText Markup Language (HTML) is a method where ordinary text can be converted into hypertext. It is a set of special codes included to control the layout and appearance of the text. Technically, HTML is not a programming language. It combines instructions within data to tell a display program called browser, how to render the data that the document contains.

· HTML is the character-based method for describing and expressing the content. The content is pictures, text, sound and video clips.

· It delivers the contents to multiple platforms.

· It links document components or documents together to compose compound documents.

Tim Berners-Lee developed HTML in early 1990 at CERN (Conseil European de la Recherche Nucleaire), the European Particle Physics Laboratory in Geneva, Switzerland. HTML is a public domain and not owned by anybody. The W3C [World Wide Web Consortium www.w3.org] is the body, which controls the HTML standards. The HTML Working Group comprises of industry leaders, content providers and other leading experts who provide input on Web accessibility and internationalization.

Tim Berners-Lee originally developed HTML, and was popularized by the Mosaic browser. During 1990s it has blossomed with the explosive growth of the Web. During this time, HTML has been extended in a number of ways. HTML 2.0 specification was developed under the protection of the Internet Engineering Task Force (IETF) to codify common practice in late 1994. HTML 3.0 proposed much richer version of HTML. Despite never receiving consensus in standards discussions, these drafts led to the adoption of a range of new features. The efforts of the World Wide Web Consortium’s HTML Working Group to codify common practice in 1996 resulted in HTML 3.2. HTML 4.0 extends HTML with mechanisms for style sheets, scripting, frames, embedding objects improved support for right to left and mixed direction text, richer tables and enhancements to forms, offering improved accessibility for people with disabilities.

6. Standard Generalized Markup Language

HTML is a subset of SGML. SGML originated in 1960s at IBM to overcome the problems in moving the documents across the multiple hardware platforms and Operating Systems. IBM’s efforts were called GML [General Markup Language]. Later in 1980 SGML came into existence.

7. Structure of HTML document

HTML generally has 2 parts an on-code and an off-code, which contains the text to be defined. Few tags do not require an off-code.

Syntax: <tagname>…. </tagname>

The most important thing to keep in mind about HTML is that its purpose is not to specify the exact formatting or layout of a web page, but rather to define and specify the specific elements that make up a page such as the body of the text, heading, paragraphs, line breaks, text elements and so on. You can use HTML to define the composition of a web page, not the appearance.

8. Switching Between Your Editor and Browser

1. Load any editor. E.g., Notepad.

2. Create the HTML file and save it, with extension .htm or. html.

3. View it in any browser e.g., Internet Explorer or Netscape Navigator.

Tag or Tag element: refers to the HTML codes that define the element in an HTML file, such as headings, images, paragraphs and list. There are two kinds of tags – the container tag and empty tag (HTML tags are inserted into a document between < and > symbols. Tags are not case-sensitive).

Container Tag: These tags which bracket or contain text or other tag elements are called container tags. These actually consist of two tags, a start tag and an end tag which enclose the text they affect.

Empty Tag: These are standalone and do not bracket or contain text or any other tag elements. An empty tag function is a standalone element within an HTML documents and thus does not bracket or contain anything else.

Attribute: Allows you to specify how web browsers should treat a particular tag. An attribute is included within the actual tag, either within a start tag or an empty tag. End tags should not contain attributes.

Syntax: Attribute = “value”

E.g., align=”center”

Starting your Page Document tags: All HTML files should include at least these tags:

· The HTML tag

· The Head tag

· The Title tag

· The Body tag

The HTML Tag: This tag defines the top-most element, identifying it as an HTML document. It is a container tag that has a start and an end tag and all the other tags and texts are nested within it.

Syntax: <HTML>

…….

</HTML>

The Head Tag: This tag contains information about your HTML file. It may also contain other tags that helps you to identify your HTML file to the outside world. The Head Tag is nested within the HTML tag.

Syntax: <HTML>

<HEAD>

…….

</HEAD>

</HTML>

Usually, the only tag contained within the head tag is the title tag. Other tags also can be contained within the head tag but they are used less often.

The Title Tag: This tag is nested 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 does not appear as part of the page.

Syntax: <HTML>

<HEAD>

<TITLE>

Your Title: Describe your title

</TITLE>

</HEAD>

</HTML>

Title tag is a required element that you should include in each and every HTML document. If you do not include a title, the title of your page appears in some browsers as ‘Untitled’ whereas in others just the URL for the page appears on the browser’s title bar.

The Body tag: This tag is the compliment of the Head tag and contains all of the tags, or elements that a browser actually displays as the body of your HTML document. Both the Head tag and the Body tag are nested within the HTML tag. Body tag comes after the head tag, they denote a separate part of the HTML document.

Syntax: <HTML>

<HEAD>

<TITLE>

My First Web page

</TITLE>

</HEAD>

<BODY>

….

</BODY>

</HTML>

9. STRUCTURING YOUR WEB PAGE

You can use headings to organize your web into hierarchical levels. Headings also act as separators in a word processing document. The top level heading (H1) actually is the title for your page, i.e., it is appears in a browser window at the top of the web page. There are 6 levels of heading.

You can also use a second-level heading (denoted by the H2 tag) to define a major division in your page, and a third level heading (using the H3 tag) to define a sublevel division within a major division. Most browsers support upto six different levels.

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

10. PARAGRAPH AND LINE BREAK TAGS

The P (paragraph) and BR (break) tags lets you insert block and lines of text on your page.

The P (Paragraph) tag:

The P tag is a container element, but with an implied ending. You do not have to include the </P> end tag. Any following start tag that defines a new block element implies the end of the tag. So, when you use the P tag, just insert the <P> start tag at the beginning of a paragraph but leave off the </P> at the end.

Example: <HTML>

<HEAD>

<TITLE>

MY FIRST WEB PAGE

</TITLE>

</HEAD>

<BODY>

<H1>MANIPAL ACADEMY OF HIGHER EDUCATION</H1>

<P>

The Government of India conferred the deemed University status on Manipal on June 1993, giving birth to the Manipal Academy of Higher Education, popularly known as MAHE.

</BODY>

</HTML>

The BR (Line Break) tag:

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

Example: <P>For Further details contact <BR>

MAHE<BR>MANIPAL<BR>

Karnataka

11. ADDING COMMENTS

The comment tag is a stand-alone tag that enables you to include messages for your own or anyone else’s future references. A comment always begins with a <!– and ends with a — >

Example: <! — type your comments here — >

12. FORMATTING YOUR TEXT

Using Italic and Bold Highlighting: HTML has two ways to include italic or bold text on your web page. The first way involves using literal tags: the B (Bold) tags and I (Italic). The second way is to use logical tags: the EM (emphasis) and Strong (strong emphasis) tags. Most browsers displays the I (Italic) and EM (Emphasis) tags identically, just as they display the B (Bold) and Strong (Strong Emphasis) tags identically.

Block Quotes : The Blockquote (Block Quote) tag double-indents a block of text from both margins.

Example: <HTML>

<HEAD>

<TITLE>

MY FIRST WEB PAGE

</TITLE>

</HEAD>

<BODY>

<H1>MANIPAL ACADEMY OF HIGHER EDUCATION</H1>

<P>

The Government of India conferred the deemed University status on Manipal on June 1993, giving birth to the Manipal Academy of Higher Education, popularly known as MAHE.

</BLOCKQUOTE>

</BODY>

</HTML>

Figure 5.2

Preformatted text : The PRE (Preformatted text) tag is used to display a block of “preformatted” text in a monospace, fixed-pitch font. You use the PRE tag to display a block of text “as is”, including all spaces and hard returns. One of the primary uses of the PRE tag is to display text in a tabular or columnar format in which you want to make sure that the columns remain properly aligned.

HTML Computer Output tags:

<code> : Defines computer code text.

<kdb> : Define Keyboard text.

<samp> : Define Sample computer code text.

<bdo> : The <bdo> tag is used to override the current text direction. Use dir attribute to set values.

<bdo dir="ltr">Sample Text</bdo>, <bdo dir="rtl">Sample Text</bdo>

13. CREATING LISTS

Headings and paragraph text elements are used more commonly than lists. Many Web pages are nothing but lists of hypertext links. You can create two types of list: Ordered and unordered. An ordered list is a numbered list, and an unordered list is a bulleted list.

13.1 The OL (Ordered List) Tag

The OL (Ordered List) tag defines a sequentially numbered list of items. It is used in conjunction with the LI (List Item) tag, which is used to tag the individual list items in a list.

Example: <HTML>

<HEAD>

<TITLE>MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

<OL>

<LI> COMPUTER CONCEPTS

<LI> MS-WINDOWS

<LI> MS-EXCEL

<LI> MS-WORD

<LI> FOXPRO

</OL>

</BODY>

</HTML>

Notice that the LI tags do not have end tags in this example. The reason is that the end tag (</LI>), like the end tag for the P tag is implied.

13.2 The UL (Unordered List) Tag

The UL (Unordered List) tag defines a bulleted list of items. The Li (List Item) lag is nested inside the UL tag and defines each item within the list.

Example: <HTML>

<HEAD>

<TITLE>MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

<UL>

<LI> COMPUTER CONCEPTS

<LI> MS-WINDOWS

<LI> MS-EXCEL

<LI> MS-WORD

<LI> FOXPRO

</UL>

</BODY>

</HTML>

13.3 Nesting Lists

You can nest a list inside another list. The browser automatically indents nested list levels. You can nest the same or different kinds of lists.

Example: <HEAD>

<TITLE>MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

<UL>

<LI>SOFTWARE

<OL>

<LI> COMPUTER CONCEPTS

<LI> MS-WINDOWS

<LI> MS-EXCEL

<LI> MS-WORD

<LI> FOXPRO

</OL>

<LI> HARDWARE

<OL>

<LI> CPU

<LI> INPUT DEVICES

<LI> OUTPUT DEVICES

<LI> HARD DISK

<LI> FLOPPY DISK

</OL>

</UL>

</BODY>

</HTML>

13.4 Controlling how Ordered Lists are Displayed

The TYPE attribute allows you to specify the number type for an ordered (OL) list. Besides making it possible for you to specify a number type for a numbered list, this attribute allows you to create multilevel outlines.

Specifying the Number Type: You can use the TYPE attribute to specify the number type for an ordered (OL) list. The values that you can use with the TYPE attribute are “A”, “a”, “I”, “i”, and “1” for specifying uppercase letters, lowercase letters, uppercase roman numerals, lowercase roman numerals, or Arabic numbers, respectively.

Example: <OL TYPE=”I”>

<LI>This is item one.

<LI>This is item two.

<LI>This is item three.

<LI>This is item four.

</OL>

13.5 Creating a Multilevel Outline

By applying different number types to the different levels of a nested ordered list, you can create a multilevel outline.

Example: <HTML>

<HEAD>

<TITLE>MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

<LI>LEVEL ONE OUTLINE LEVEL.

<LI>LEVEL TWO OUTLINE LEVEL.

<LI>LEVEL THREE OUTLINE LEVEL.

<LI>LEVEL FOUR OUTLINE LEVEL.

</OL>

<LI>LEVEL THREE OUTLINE LEVEL.

</OL>

<LI>LEVEL TWO OUTLINE LEVEL.

</OL>

<LI>LEVEL ONE OUTLINE LEVEL.

</OL>

</BODY>

</HTML>

13.6 Using START and Value Attributes in an Ordered List

The START attribute in an OL start tag is used to start the numbering sequence at a particular number. You can use the VALUE attribute in an LI tag to restart the numbering sequence at a particular number.

For example, first start the numbering sequence at 3, and then restart it at 8, then enter the following commands.

<LI>THIS SHOULB BE NUMBERED AS 3.

<LI>THIS SHOULD BE NUMBERED AS 4.

<LI VALUE =”8”>THIS SHOULD BE NUMBERED AS 8.

<LI>THIS SHOULD BE NUMBERED AS 9.

</OL>

The numbering sequence will be started or restarted using the current TYPE attribute value.

13.7 Controlling the Display of Unordered List

Specifying a Bullet Type: The TYPE attribute can be used to specify the type of bullet for an unordered list. The values that you can use with the TYPE attribute are “disc”, “circle”, and “square”. Only Netscape Navigator recognizes this attribute.

Example: <HEAD>

<TITLE>MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

<LI>SOFTWARE

<LI> COMPUTER CONCEPTS

<LI> MS-WINDOWS

<LI> MS-EXCEL

<LI> MS-WORD

<LI> FOXPRO

</UL>

<LI> HARDWARE

<LI> CPU

<LI> INPUT DEVICES

<LI> OUTPUT DEVICES

<LI> HARD DISK

<LI> FLOPPY DISK

</UL>

</BODY>

</HTML>

14. CREATING DEFINITION LISTS

The DL (definition List) tag allows you to create glossaries or list of terms and definitions. A glossary consists of three tag elements: a tag to define the list (DL), a tag to define the term (DT), and a tag to define the definitions (DD).

Example: <HTML>

<HEAD>

<TITLE>DEFINITIONS LIST</TITLE>

</HEAD>

<BODY>

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

<DT>Software

<DD>Is a set of Programs. <DT>Peripherals

<DD>Equipments connected around the CPU.

</BODY>

</HTML>

15. CREATING HYPERTEXT LINKS

One of the main reasons to create a Web page is to create links to other pages. To do that, you need the A (Anchor) tag.

Hyperlink text is not only used to jump to and view another Web page, or jump to a specific place in either the same web page or another Web page, but to display an image, download a program, send an e-mail message, run a script, access a database, telnet to server, and so on. You can use hypertext links to jump to anything that has an address on the Internet, as long as you do not need a password. The three basic kinds of hypertext links are:

¨ Links to other HTML documents or data objects. These are by far the most commonly used links on the Web. They allow you to jump from one Web page to another, as well as to anything else that has an address on the Net (not just the Web), such as Gopher files, FTP archives, and images.

¨ Links to other places in the same HTML document. These links allow you to jump from one place in the same Web page to another point on the same Web page. Many Web pages have directories or table of contents at the beginning of the page, allowing you to decide which part of the page you would like to view. You just have to click the link to jump to that section of the page or document.

¨ Links to places in other HTML documents. These links are quite similar to links to places in the same document, except that you can jump to a certain section on other pages i.e. you can click on a hypertext link and jump to some point halfway down another Web page.

You use the A (Anchor) tag to anchor one or both ends of a hypertext links. The first kind of link, where you link to another Web page or data object, requires only one anchor. The second and third kinds of links, where you link to another place in the same or another Web page, however, require both ends of the link, that is, both a “launch pad” and a “landing spot”. This “other end” of a hypertext link, where you link to a specific place in the same or another Web page, is often called as a target anchor.

Anatomy of the A (Anchor) Tag

The hypertext links is composed of three elements:

· Start and end tags that enclose the whole link

· The link target

· The link text

The figure illustrates the three parts of a hypertext links.

The figure uses the HREF (Hypertext Reference) attribute to specify the URL or address of the “object” of the link, which here is simply another Web page. Note that the full address (URL) is not given, just the filename. This means that the Web page being linked to is in the same directory as the Web page from where the link is being made. If you want to form a link to a Web page on another server, then the full URL should be specified.

When using the A (Anchor) tag, you must include the HREF attribute or the NAME attribute. You use the NAME attribute, only when you want to create a target link. Therefore, linking to another Web page or data object requires only the A (Anchor) tag with the HREF attribute, whereas linking to another place in the same or another Web page requires two A (Anchor) tags – the first with the HREF attribute and the second with the NAME attribute.

15.1 Linking to a File or Data Object

You can form an HTML link to anything on the Web that has an address, or URL. You can jump to Australia, or simply to a file residing in your own directory on your own server. To create a hypertext link that jumps to a file that is not in your own directory, include the entire URL of the file to which you want to jump.

Example:

<p>Click here to jump to <A HREF=”SUB.HTML”> subdocument </A>

15.2 Linking to NON-WWW Files

You can link to files other than just HTML files. Generally, your browser should be able to directly display any ASCII text file, whether on a Web or a Gopher server, and should also be able to display ZGIF or JPEG graphics. Other kinds of files might require viewers or players, such as sound, animation, or video files. One of the newest things, however, is support for streaming audio and animation with RealAudio or Shockwave, which allows audio and animation clips to be streamed (played while being downloaded) rather than downloaded first and then played.

15.3 Linking to a Place in the Same HTML File

To link to another place in the same HTML file requires both an HREF anchor and a NAME anchor. An HREF anchor that links to a NAME anchor has a special form:

<A HREF=”#anchorname”>anchortext</A>

Notice the # symbol. In an HREF anchor, the # symbol is the only thing that identifies the HREF attribute as the name of a NAME anchor rather than an address or filename. (The # symbol combined with the following anchorname sometimes is also called as a fragment identifier)

The common uses for linking HREF and NAME anchors on the same page are:

· A directory or table of contents that links to the major headings of a page.

· Cross-references between different points in the text.

· Links to footnotes at the bottom of the page.

The following is an example of creating a directory or table of contents that will be displayed at the top of the Web page and that will then link to subheading sections in the same document.

<HTML>

<HEAD>

<TITLE>Linking Pages</TITLE>

</HEAD>

<BODY>

<H2>USING HYPERTEXT LINKS </H2>

<P>

<A HREF="#PAGE"> LINKING TO ANOTHER PAGE OR FILE </A><BR>

<A HREF="#LOCAT">LINKING TO A PLACE ON THE SAME PAGE </A><BR>

<A HREF="#LOCPG">LINKING TO A PLACE ON ANOTHER PAGE </A><BR>

<H3>

LINKING TO ANOTHER PAGE OR FILE</A></H3>

<P>

YOU CAN FORM A LINK WITH ANYTHING ON THE WEB THAT HAS AN ADDRESS, OR URL…

<BR>

<H3>

<A NAME="LOCAT">LINKING TO A PLACE ON THE SAME PAGE</A></H3>

<P>

YOU CAN FORM A LINK WITH ANOTHER PLACE ON THE SAME PAGE BY LINKING AN HREF AND A NAME ANCHOR…<BR>

<H3>

<A NAME="LOCPG">LINKING TO A PLACE ON ANOTHER PAGE</A></H3>

<P>

YOU CAN NOT ONLY LINK TO ANOTHER HTML FILE, BUT TO A PLACE IN THAT FILE…

</BODY>

</HTML>

15.4 Linking to a Place in Another HTML File

You not only can make a hypertext link with another HTML file, but also with a place in that HTML file, as long as you mark it with a NAME anchor. An HREF anchor that links to a place in another HTML file:

<A HREF=”ADDRESS#ANCHORNAME”>ANCHORTEXT</A>

This actually combines the forms for linking to another page and linking to a place on a page. First, the link is made to the address, which is either a URL or filename of an HTML file, and then following the # sign, the link is made to the place in that file that is marked by the NAME anchor corresponding to the anchorname.

<P>Go to <A HREF=”SUB.HTM#PARTTWO”>Part Two</A>of the

<A HREF=”SUB.HTM”>How to use links</A> web page.

16. CREATING LINK LISTS

A link list is just what it sounds like – a list of hypertext links, usually bulleted, but sometimes numbered. Because link lists are so universal, everybody should know how to create them. To create a simple link list, all you have to do is combine an unordered list and some hypertext links.

16.1 Creating a Simple Link List

In the simplest form of a link list, the text of each link comprises the entire list item. Often the link text simply is the title of a Web page being linked, although sometimes a little editing is necessary to make it more informative. No other explanatory or descriptive text is included.

Example: <HTML>

<HEAD>

</HEAD>

<BODY>

<H2>COURSES</H2>

<UL>

<LI><A HREF="PG.HTM">PG DIPLOMA</A>

<LI><A HREF="ADVANCE.HTM">ADVANCED COURSES</A>

</UL>

</BODY>

</HTML>

17. INSERTING INLINE IMAGES

The IMG (Image) tag allows you to display inline images on your Web page. The term inline simply means that an image is inserted at a particular location, “in a line,” within a Web page.

The most commonly used image format for inline images is the GIF format. All current graphic Web browsers should be able to display GIF images as inline images. Not all current graphical Web browsers support the JPEG graphics format, which provides file compression and more colors than GIF.

The IMG (Image) tag is an empty or stand-alone, document element.

Syntax: <IMG SRC=”imagefile”>

The SRC (source) attribute is a required attribute that identifies the full or partial address (URL) or just the name of the file to display.

Example: <p>The inline graphics, FLOWERS.GIF, is displayed here:

A p tag is placed in front of the IMG tag. The IMG tag does not form a new block element here and would appear on the same line as the text that precedes it (that is, unless you added the P tag here). In this case, however, you want the image to appear below the line of text.

Using the ALT Attribute

You use the ALT attribute to provide an alternative to an image in the case of someone using a text-only browser or using a graphical browser with images turned off. The capability of turning off the display of images to help pages load faster.

Example: <p>The inline graphics, FLOWERS.GIF, is displayed here:

17.1 Using the ALIGN Attribute In Inline Graphics

The ALIGN attribute allows you to position an inline image relative to the line of text that it is on. All current graphical Web browsers recognize these values: “top”, “middle”, and “bottom.”

Example:

<p>The image on this line <IMG ALIGN=”TOP” SRC=”FLOWERS.GIF” is top-aligned.

<p>The image on this line <IMG ALIGN=”MIDDLE” SRC=”FLOWERS.GIF” is middle-aligned.

<p>The image on this line <IMG ALIGN=”BOTTOM” SRC=”FLOWERS.GIF” is bottom-aligned.

17.2 Setting the Height and Width of an Inline Image

The height and width of an inline image can be specified. Normally, a Web Browser has to download an image before it allocates space for it on a Web page. This means that if you have a relatively large graphic, everything else has to wait until the image downloads.

If you set the dimensions of the graphic using the Height and WIDTH attribute of the IMG tag, the browser can allocate space for the graphic, and then display the remainder of the page without waiting for the graphic to download completely.

Example: <IMG SRC=”FLOWERS.GIF” WIDTH=”100%”>

This will resize the graphics to fit horizontally within a browser window, regardless of the screen resolution or the width of the browser. The height of the image will also be resized correspondingly.

18. CREATING IMAGE LINKS

Including an Image in a Link

Besides text, you can also include an inline image inside a hypertext link, which causes the image to display a blue border, indicating that it is a hypertext link that you or your users can click and activate.

Example:<p><A HREF=”SUB.HTM”>

<IMG SRC=”FLOWERS.GIF”>Both the image and the text is a link.</A>

Controlling the Border around an Image Link

The default width of the border around an image link is 2 pixels. The IMG tag’s BORDER attribute allows you to specify a custom width for the border.

Example: <p><A HREF=”SUB.HTM”>

The border has been increased to 10 pixels. </A>

19. HORIZONTAL RULES

The HR (Horizontal Rule) tag is a stand-alone, or empty, document element that allows you to add horizontal rules to your Web pages.

19.1 Changing the Height of a Horizontal Rule

To change the height of a horizontal rule, the SIZE attribute value in the HR tag can be used. The value you set is the rule’s height, or thickness, in pixels. The following example is used for creating a horizontal rule that is 10 pixels thick.

Example: <p>This is a normal rule:

<HR>

<p>This is a 10-pixel thick horizontal :

<HR SIZE=”10”

19.2 Changing Between Shaded and Unshaded Horizontal Rule

The default setting for a rule is “shaded”. To set an “unshaded” horizontal rule, add the NOSHADE attribute to the HR tag.

Example: <P>This is an unshaded, 15-pixel thick horizontal rule:

20.3 Changing the Width of a Horizontal Rule

You can also change the width of a horizontal rule, either by setting the width in actual pixels or by specifying a percentage of the total width of the browser window. By default, horizontal rules are centered in the browser window. Following is an example of creating a 15-pixel sized horizontal rule with a width that is 75 percent of a browser’s window.

Example: <P>This is a 75%wide, unshaded, 15-pixel thick horizontal rule:

20.4 Setting the Alignment of a Horizontal Rule

The ALIGN attribute in the HR tag is used to left-align or right-align a horizontal rule (center-alignment is the default).

Example: <P>This is a left-aligned, 50% wide, 20-pixel thick horizontal rule (Shaded)

20. ADDRESS TAG

The Address tag is used to define a signature block for Web page. It might contain your name, title, organizational or business affiliation, as well as information on how to contact you. A horizontal rule usually separates an address from the rest of a Web page.

Example: <HTML>

<HEAD>

<TITLE>Deemed University – MAHE</TITLE>

</HEAD>

<BODY>

Manipal has already made a name in imparting professional education not only in India, but also at the international level. Doctors, engineers, nurses, pharmacists and other professionals from Manipal have made a mark wherever they have gone to practice or work. The Government of India conferred the deemed University status on Manipal on June 1993, giving birth to the Manipal Academy of Higher Education, popularly known as Mahe.

<HR>

MANIPAL ACADEMY OF HIGHER EDUCATION

DEEMED UNIVERSITY

DISTANCE EDUCATION WING

MANIPAL

</ADDRESS>

</BODY>

</HTML>

The Mailto: protocol can also be used with HREF tag. When the user clicks this link, the default mail system is activated. E-mail id specified wit h Mailto: is automatically placed in the ‘To:’ Text box as shown in figure below.

21. WORKING WITH TEXT

This section covers additional features available while working with text, including text highlighting tags and right or center aligning paragraphs, headings, and other document sections.

Text Highlighting Tags: HTML recognizes a number of additional character rendering tags, including the SUP (Superscript), SUB (Subscript), U (Underline), and STRIKE (Strikethrough) tags.

The SUP and SUB tags are highly useful tags that you should use wherever you need superscripts or subscripts. The STRIKE command is more limited to using the Web in workgroup document preparation processes, rather than for displaying final renditions. The U tags is used for underline a word.

Example: <HTML>

<HEAD>

<TITLE>MY FIRST WEB PAGE</TITLE>

</HEAD>

<BODY>

<P>This is a regular text. <SUP>Use SUP for Superscripts.</SUP>This is regular text.<SUB>Use SUB for subscripts.</SUB>This is a regular text. <U>Use U for underlining. </U>This is a regular text. <STRIKE>Use Strike for Strikethrough </STRIKE>

</BODY>

</HTML>

22.1 Text Alignment

You can align paragraphs, headings, and other document division in a number of ways. You can use the ALIGN attribute with paragraphs or headings to center-align, right-align, or left-align these elements.

Using the ALIGN Attribute in Headings and Paragraphs

The Align attribute is used to center-align, or right-align headings and paragraphs by using an attribute value of either “center” or “right”.

Example: To center align a level-two heading

<H2 ALIGN=”CENTER”>Your Heading Here </H2>

To right-align level-two heading

<H2 ALIGN=”RIGHT”>Your Heading Here </H2>

Centering Text and Other Elements Using the Center Tag

The CENTER element is used to center-align text and other document elements.

Example: <HTML>

<HEAD>

</HEAD>

<BODY>

<H2>Level-Two Heading</H2>

<p>This paragraph, and the level-two heading above it, is centered using the center tag.

<UL>

<LI>First list item

<LI>Second list item

</UL>

</CENTER>

</BODY>

</HTML>

22. CHANGING FONT SIZES AND COLORS

The FONT tag allows you to specify the size and color of a section of text.

23.1 Setting Font Sizes

The FONT tag uses the SIZE attribute to change the size of a font. You can set font sizes using absolute or relative size values.

Setting Absolute Font sizes

There are seven “absolute” (or fixed) sizes, numbered from 1 to 7, that you can set using the SIZE attribute of the FONT tag. The default is 3, which is the same as regular paragraph text; 1 is the smallest and 7 is the largest, which means you can set two absolute font sizes that are smaller than normal paragraph text and four sizes that are larger. Each Web browser determines the actual sizes of these fonts.

Example: <HTML>

<HEAD>

</HEAD>

<BODY>

<p>

</BODY>

</HTML>

Setting Relative Font Sizes

You can set “relative” font sizes. Relative font size changes are indicated by either a plus (+) or (-) sign preceding the SIZE attribute value. For instance, FONT SIZE=”+1” indicates a font size that is one size larger than the base font. Because the default base font is the same as an absolute font size of 3, a relative font of +1 would be the same as an absolute font size of 4 (3+1=4).

Example: <P>

23.2 Setting the Base Font

The BASEFONT tag allows you to change the size of the “base font” (paragraph text). You can set it to any of the absolute font sizes, 1 through 7 (3 is the default).

Example: <BASEFONT SIZE=”4”>

23.3 Using the SMALL and BIG Tags

The simplest form of using these tags is to specify a font that is smaller or larger than the default text font (or base font).

Example: <P><SMALL>This is a small font. </SMALL><BR>

This is a normal font <BR>

The SMALL font is the same as a font set with the FONT tag’s size=”2” attribute value and the BIG font is the same as font set with the FONT tag’s SIZE=”4” attribute value. (The default text font is the same as the FONT tag’s SIZE=”3” attribute value.)

23.4 Changing the FONT Color

The FONT tag uses the COLOR attribute to change the color of a font.

Setting the Font Color Using Color Names : You can use any one of 16 color names to specify a font color. Besides black and white, you also can specify aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow.

Example: <P><FONT SIZE=7>

You can use any one of 16 color names to specify a font color.

</FONT>

Setting the Background, Text, and Link Colors: You can set the colors for the background, text, and links by using the following attributes of the BODY tag:

· BGCOLOR sets the background color

· TEXT sets the text or (foreground) color

· LINK sets the color of hypertext links

· VLINK sets the color of visited links

· ALINK sets the color of activated links (when you hold down the mouse button on a link, without releasing it)

The general form for entering these attributes as color names is:

<BODY BGCOLOR=”colorname” TEXT=” colorname” LINK=” colorname”

VLINK=” colorname” ALINK=” colorname”>

Example:

<BODY BGCOLOR=”AQUA” TEXT=”RED” LINK=”GREEN”

VLINK=”NAVY” ALINK=”MAROON”>

23. USING A BACKGROUND IMAGE

The Background attribute of the BODY tag allows you to specify a background image. The Graphic file for the background image can be a GIF or JPEG image. The general format for entering this attribute is as follows:

Where filename is a GIF or JPEG file in the same directory as the Web page and URL is a partial or absolute address of a GIF or JPEG file in a different directory than the Web page.

Example: <HTML>

<HEAD>

<TITLE>Deemed University – MAHE</TITLE>

</HEAD>

<HR>

MANIPAL ACADEMY OF HIGHER EDUCATION

DEEMED UNIVERSITY

DISTANCE EDUCATION WING

MANIPAL

</ADDRESS>

</BODY>

</HTML>

24. MARQUEE TAG

This tag is unique to Internet Explorer. It displays the content as a moving text.

<MARQUEE BEHAVIOUR=”MOTION” DIRECTION=”SCROLL DIRECTION”

HEIGHT=”PIXEL” WIDTH=”PIXEL” BGCOLOR=”COLOR” LOOP=”NUMBER”

SCROLLDELAY=”MILLISECONDS”>

</MARQUEE>

· Behaviour = ”motion type” attribute sets the motion of the text within the rectangular space set aside for the Marquee tag. The values can be alternate, scroll or slide.

· BGCOLOR = ”color” this attribute establishes the color for the rectangular space reserved for the Marquee tag.

· Direction = “scroll direction” specifies the scrolling direction of the text. Direction can be up, down, left or right.

· Height, width tag renders itself as a rectangular space on the page. You can override the default size of this rectangle by assigning values to the HEIGHT and width attributes. The default value for Height is determined by the font size of the largest font assigned to the content in the MARQUEE.

· Loop = “number” sets the number of times the Marquee text scrolls its contents. After the final scroll, the content remains in a still or fixed positions. If the scroll value is set to –1 or “infinite” scroll then the MARQUEE text content scrolls infinitely.

· Scrolldelay = ”milliseconds” Increasing the scroll delay value slows the scroll speed and decreasing the values makes scrolling go faster.

Example: <MARQUEE BEHAVIOUR=”SLIDE” DIRECTION=”LEFT”

WIDTH=”250” BGCOLOR=”WHITE”>

Watch out the text

</MARQUEE>

25.Tables

A table is a two dimensional matrix, consisting of rows and columns. Tables are intended for displaying data in columns on a web page. All tables related tags are included between the <TABLE></TABLE> tags. Each row of a table is described between the <TR></TR> tags.

Table rows can be of two types:

Header Rows (A row that spans across columns of a table)

A table header row is defined using <TH> </TH> tags. The content of a table header row is automatically centered and appears in boldface.

Data Rows:

There could be a single data cell (i.e. a single column table) or multiple data cell (i.e. a multi column table). Data cells hold data that must be displayed in the table. A data row is defined using <TR></TR> tags. Text matter displayed in a data row is left justified by default. Any special formatting like boldface or italics is done by including appropriate formatting tags inside the <TR></TR> tags. An image can also be displayed in a data cell.

The attributes that can be included in the <TABLE> tag are:

ALIGN	Horizontal alignment is controlled by the ALIGN attribute. It can be set to LEFT, CENTER, or RIGHT.
VALIGN	Controls the vertical alignment of cell contents. It accepts the values TOP, MIDDLE, or BOTTOM.
WIDTH	Sets the WIDTH to a specific number of pixels or to a percentage of the available screen width. If width is not specified, the data cell is adjusted based on the cell data value.
BORDER	Controls the border to be placed around the table. The border thickness is specified in pixels.
CELLPADDING	This attribute controls the distance between the data in a cell and the boundaries of the cell.
CELLSPACING	Controls the spacing between adjacent cells.
COLSPAN	The COLSPAN attribute inside a <TH> or <TD> tag instructs the browser to make the cell defined by the tag to take up more than one column. The COLSPAN attribute can be set equal to the number of columns the cell is to occupy. This attribute is useful when one row of the table needs to be a certain number of columns wide.
ROWSPAN	The ROWSPAN attribute works in the same way as the COLSPAN attribute except that it allows a cell to take up more than one row. The attribute can be set by giving a numeric value.

1.1 Creating Tables:

The TABLE tag needs to bracket you table. All other tag or text included in your table should nest inside the TABLE tag.

Example:

<HTML>

<HEAD>

<TITLE>Tables</TITLE>

</HEAD>

<BODY>

<TABLE>

………………

</TABLE>

</BODY>

</HTML>

1.2 Creating Columns and Rows:

The TR (table row) and TD (Table data) tags are use to create a grid of rows and columns.

Example:

<HTML>

<HEAD>

<TITLE>Tables</TITLE>

</HEAD>

<BODY>

<TABLE>

<TR>

<TD>Harish</TD>

<TD>Gurung</TD>

<TD>Kathmandu</TD>

</TR>

<TR>

<TD>Sanju</TD>

<TD>Gurung</TD>

<TD>Pokhara</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Notice the <TR> start tag and the </TR> end tag encloses several <TD> and </TD> tags.

1.3 Adding a Border:

By default, the table does not contain a border. To include a border to the table, specify a BORDER attribute inside the TABLE tag.

<TR>

<TD>Harish</TD>

<TD>Gurung</TD>

<TD>Kathmandu</TD>

</TR>

<TR>

<TD>Sanju</TD>

<TD>Gurung</TD>

<TD>Pokhara</TD>

</TR>

</TABLE>

The BORDER=”1” instructs the browser to display one pixel border.

1.4 Adding Column Headings:

The TH (Table Heading) tag is used to define a “cell” as a heading cell rather than as an ordinary data cell.

To create the headings (column headings) at the top of the table, first create a row using the TR tag and then, use the TH tag to define the cells instead of using the TD tags.

Example:

<TABLE>

<TR>

<TH>First Name</TH>

<TH>Address</TH>

</TR>

<TR>

<TD>Harish</TD>

<TD>Gurung</TD>

<TD>Kathmandu</TD>

</TR>

<TR>

<TD>Sanju</TD>

<TD>Gurung</TD>

<TD>Pokhara</TD>

</TR>

</TABLE>

1.5 Adding Spacing and Padding : The CELLSPACING attribute adds space between the cells, whereas the CELLPADDING attribute adds space within each cell.

Example: <TABLE BORDER="1" CELLSPACING="6" CELLPADDING="6">

The CELLSPACING attribute increases the thickness of the border of each cell.

1.6 Adding a Caption : The CAPTION tag is used to insert a caption for the table.

Example: <TABLE BORDER="1" CELLSPACING="6" CELLPADDING="6">

<CAPTION>I. TABLE </CAPTION>

Include <CAPTION ALIGN=”BOTTOM”> to display the caption beneath the table.

1.6 Setting the Table Width and Height : The WIDTH or HEIGHT attribute can be used to specify the size of your table. You can use either absolute value (number of pixels) or relative values (percentages).

Example:

1.7 Add Row Headings: To create a row heading add TH cell instead of a TD cell at the start of a table row.

Example:

<CAPTION>I. TABLE </CAPTION>

<TR> <TH>ROLL NO</TH> <TH>FIRST NAME</TH>

<TD>HEDGE</TD> <TD>MANGALORE</TD> </TR>

<TR> <TH>ROW 2: </TH> <TD>2</TD> <TD>SAVITHA</TD>

<TD>PAI</TD> <TD>MANIPAL</TD> </TR>

</TABLE>

1.8 Aligning Cell Contents : The ALIGN attribute is used to align the contents of TH (Table Heading) and TD (Table Data) cells by assigning “left”, “center”, or “right” as the ALIGN value.

Example:

<CAPTION>I. TABLE </CAPTION>

<TR> <TH>ROLL NO</TH> <TH>FIRST NAME</TH>

<TD>ASHA</TD> <TD>HEDGE</TD> <TD>MANGALORE</TD> </TR>

<TD>SAVITHA</TD>

<TD>MANIPAL</TD>

</TR>

</TABLE>

1.9 Setting Column Width : By inserting a WIDTH attribute in the top cell of a column, you can specify the width of the entire column. To ensure that all of the columns are of equal width, you need to set the same WIDTH attribute value, either as a percentage or in pixels, for each column.

Example: <TR>

<TH WIDTH="20%">FIRST NAME</TH>

</TR>

1.10 Centering a Table : To center the table, put it inside a CENTER tag.

Example:

<CAPTION>I. TABLE </CAPTION>

<TH WIDTH="20%">FIRST NAME</TH> <TH WIDTH="20%">LAST NAME</TH>

<TD>HEDGE</TD> <TD>MANGALORE</TD> </TR>

<TR> <TH ALIGN="RIGHT">ROW 2: </TH> <TD>2</TD> <TD>SAVITHA</TD>

<TD>PAI</TD> <TD>MANIPAL</TD> </TR>

</TABLE>

</CENTER>

1.11 Inserting an Image :

Example:<TR>

</TR>

1.12 Spanning Columns : The COLSPAN attribute lets you create cells that span columns. For example COLSPAN=”4” indicates that 4 cells are merged to become one cell.

Example:

<CAPTION>I. TABLE </CAPTION>

<TR>

1.13 Spanning Rows : The ROWSPAN attribute is used to specify the number of rows to span.

Example:

<CAPTION>I. TABLE </CAPTION>

<TR>

</TR>

1.14 Setting Font Size and Colors :

Example: <TR>

S T U D E N T R E P O R T

</TH>

</TR>

1.15 Assigning Background Colors: You can assign a background color to an entire table, a row within a table, or a single cell.

This example assigns a background color to the entire row.

<TH WIDTH="20%">FIRST NAME</TH>

</TR>

Below is an example that includes all the tags and its output.

<TITLE>Tables</TITLE>

</HEAD>

<BODY>

<CAPTION>I. TABLE </CAPTION>

S T U D E N T R E P O R T</TH>

</TR> <TR BGCOLOR="LIME">

<TH WIDTH="20%">FIRST NAME</TH>

</TR> <TR>

<TD>HEDGE</TD>

<TD>MANGALORE</TD>

</TR>

<TR>

<TD>SAVITHA</TD>

<TD>MANIPAL</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Figure 6.1

26. <DIV> Element:

The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.

Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.

27. <SPAN> Element:

The HTML <span> element is an inline element that can be used as a container for text.

The <span> element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

28. FRAMES

The frameset element allows an author to define a multiple frame Web page, where each frame displays its own HTML document. Frames can be scrolled and resized by the user, unless scrolling and resizing is turned off.

Note: HTML 5 stander does not support <Frameset> tag anymore. New <IFRAME> tag is used for Frames. But browsers still support the <Frameset> tag.

Example:

(This is an absolute pixel dimension).

Defines 2 rows, with the top row being 80 pixels high and bottom row 400 pixels high. But it is better to use the percentage dimensions because if the frames are defined using absolute pixels, some certain browsers do not recognise it.

Percentage dimensions: You can define columns and rows as percentage of the total height or width of the browser windows.

Example: <Frameset rows =“80%,20%>

Defines 2 rows, top filling 80% of the browser window and bottom filling 20% of the total height of the browser window.

Relative dimensions: <Frameset rows =”*,100”>

Defines the top row as the “relative” row that expands or contracts depending on the total space available in the browser window, whereas the bottom row would remain fixed at the height of 100 pixels.

2.1 Frame : The frame element is nested inside the frameset element. It is used to define frames that are included in the frameset.

Here frame border, margin height, margin width, noresize, scrolling is optional. Name names a frame so it can be targeted from hypertext links located in other frames.

· Src specifies frame documents URL.

· Frameborder turns the border of a frame off or on (0 ® off, 1® on (default))

· Margin height and margin width sets the amount of left, right, top and bottom margin spaces (minimum value is “2”)

· Noresize stops the manually resizing of a frame.

· Scrolling determines how scrollbars are treated in a frame.

· NO turns off the scrollbar display even if the document extends beyond the dimension of the frame.

· The default scrolling attribute value is “auto” which will automatically cause scroll bars to be added to a frame if they are required.

· Noframe tag: – is used to provide contents in a frame page that will be displayed by no-frame-capable browsers (or by frame–capable browsers where frames have been turned off)

The noframes tag is placed following the last FRAME element, either before or after any </frameset> end tags.

A non-frame –capable browser will ignore the frameset element, while a frames capable browser will ignore the contents of the noframes element.

Creating 2 rows Frames:

Example:

<HTML>

<FRAME NAME="TOP_BAR" SRC="TRY3.HTML"

MARGINHEIGHT="3" MARGINWIDTH="3" SCROLLING AUTO NORESIZE>

<FRAME NAME="BOT_BAR" SRC="TRY5.HTML"

MARGINHEIGHT="3" MARGINWIDTH="3" SCROLLING AUTO NORESIZE>

</FRAMESET>

SORRY, THIS PAGE REQUIRES A FRAMES CAPABLE BROWSER. FEEL FREE TO VIEW THE

<A HREF="NOFRAME.HTM"> NO FRAMES VERSION</A> OF THIS PAGE </NOFRAMES>

</HTML>

Creating two columns frames:

Example:

<HTML>

<FRAME NAME="TOP_BAR" SRC="TRY3.HTML"

MARGINHEIGHT="3" MARGINWIDTH="3" SCROLLING AUTO NORESIZE>

<FRAME NAME="BOT_BAR" SRC="TRY5.HTML"

MARGINHEIGHT="3" MARGINWIDTH="3" SCROLLING AUTO NORESIZE>

</FRAMESET>

SORRY, THIS PAGE REQUIRES A FRAMES CAPABLE BROWSER. FEEL FREE TO VIEW THE

<A HREF="NOFRAME.HTM"> NO FRAMES VERSION</A> OF THIS PAGE

</NOFRAMES>

</HTML>

Creating two rows and the second row containing two columns:

Example:

<HTML>

<FRAME NAME="MAST_BAR" SRC="TRY3.HTML"

MARGINHEIGHT="3" MARGINWIDTH="3" SCROLLING AUTO NORESIZE>

<FRAME NAME="LEFT_BAR" SRC="TRY5.HTML"

MARGINHEIGHT="3" MARGINWIDTH="3" SCROLLING AUTO NORESIZE>

<FRAME NAME="RIGHT_BAR" SRC="FORMS.HTML"

MARGINHEIGHT="3" MARGINWIDTH="3" SCROLLING AUTO NORESIZE>

</FRAMESET>

SORRY, THIS PAGE REQUIRES A FRAMES CAPABLE BROWSER. FEEL FREE TO VIEW THE

<A HREF="NOFRAME.HTM"> NO FRAMES VERSION</A> OF THIS PAGE

</NOFRAMES>

</HTML>

29. IFRAME

An iframe is used to display a web page within a web page.

Syntax for adding an iframe:

Attributes of Iframe tag:

a. src: The URL points to the location of the separate page.

b. Height, width: The height and width attributes are used to specify the height and width of the iframe.

c. frameborder: The frameborder attribute specifies whether or not to display a border around the iframe.

d. name:

Use iframe as a Target for a Link:

An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe:

Example

30. FORMS

The essence of serving up useful information is relevancy and immediacy. But the best judge of the quality of your information is your audience. It would be nice if your readers could give you feedback on your Web pages. They could tell you what parts they like, what they do not like, and what other things they would like to see included in your sites.

As it turns out, HTML supports a rich variety of input capabilities to let you allow feedback.

WHAT IS IN A FORM?

When adding forms support to a Web page, special tags can be included to that lets you solicit input from users. These tags can be used with text that prompts user responses. You can include tags that gather the input and ship it to your Web server or to other servers that might offer services – like Gopher or Archie – that your form knows how to query. The process works in the following manner:

· On a particular Web page, you have to include tags to set up a form and to solicit input from users. Some of your users will work their way through this material and provide the information that you want. This essentially amounts to filling out the form that you have supplied.

· After the user fills out your form, the input is directed to the program running on the Web server that delivered the form. In most cases, a particular control, called SUBMIT, is used to gather the information and send it to the proper destination on your Web server.

· Assuming that the program is available for use (installed and running properly, that is), it accepts the input information. Then the program decodes and interprets the contents for further action.

· After the input is received and interpreted, the program can do pretty much anything it wants. In practice, this boils down to recognising key elements in a form’s content and custom building an HTML document in response. Building a document is not required, but it is a pretty commonplace capability within forms-handling programs.

· The custom-built document is then delivered to the user in response to the form’s content. At this point, additional interaction can occur (if the “return page” includes another form), requested information can be delivered (in response to requests on the form), and so on.

The information collected from a form can be

1. Written to a file.

2. Submitted to a database such as Informix or Oracle

3. E-mailed to someone in particular.

Forms also allow the users to participate in building a Web document such as on one Web site that allows users to dictate how a story is played out; in this case, the users collectively determine the outcome.

Thus, forms not only provide communication from users to servers, but also provide for the ongoing interaction between users and servers. This is pretty powerful stuff and adds a lot of value to your Web pages.

Forms involve two-way communication: The input-catching programs on your server rely on an interface between Web browsers and servers called the Common Gateway Interface (CGI). This interface codifies how browsers can send information back to servers. It sets up the formatting for the user-supplied input information, so that forms-handling programs know what to expect and how to deal with what they receive.

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.

<FORM> Tag : HTML includes several different classes of form tags. To begin with, all HTML forms occur within the <FORM> … </FORM> tags. The <FORM> tag also includes attributes that specify where and how to deliver the input to the appropriate Web server.

Within the <FORM>… </FORM> tags, all other forms-related tags and text must appear. These tags include methods for:

· Specifying input (the <INPUT> tag and its many attribute).

· Setting up text input areas (The <TEXTAREA>…</TEXTAREA> tags.)

· Selecting values from a predefined set of possible inputs (the <SELECT>…</SELECT> tags).

· Managing the form’s 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).

The forms input tags support multiple ways to interact with users, including:

· Creating text input fields, where users can type in whatever they want.

· Generating pull-down menus often called as “pick lists”.

· Creating labeled check boxes or radio buttons on-screen, which users can select or deselect to indicate choices. Check boxes allow multiple selections and radio buttons allow just one selection.

If all these controls are combined together then an efficient Web page can be created to obtain information from the user.

Setting the <FORM> environment: The two key attributes within <FORM> tags are METHOD and ACTION. These attributes control how information is sent to the Web server and which input-handling program receives the form’s contents.

METHOD: The METHOD indicates how the information is sent to the server when the form is submitted. METHOD can take one of two possible values: POST or GET.

Of these two methods, we prefer POST because it causes the form’s contents to be passed one element at a time. GET concatenates all the field names and their associated values into one long string. Because UNIX has limit on how long a single string can be, it is not hard to imagine that some of the information might get lost when its contents are truncated.

ACTION: ACTION supplies the URL for CGI script or other input-handling program on the server that receives a form’s input. The URL can be a full specification (absolute) or simply a relative reference. Either way, you need to make sure that the URL points to the right location, to do the job that is expected. You also need to make sure that the CGI script or program is executable and that it behaves properly.

The <LABEL> tag:

Use the <label> element to define labels for <input> elements.

Example:

<label for=”FName”>First Name:</label>

The <INPUT> tag:

The <INPUT> tag defines a basic form element. This tag takes at least two attributes- namely TYPE and NAME. TYPE indicates what kind of element should appear on the form. NAME assigns a name to go with the input field or a value that corresponds to the <INPUT> tag.

You can use NAME to identify the contents of a field in the form information that is ultimately uploaded to the input-handling Web server. In fact, what the server receives is a series of name/value pairs. The name that identifies the value is the string supplied in the NAME=”string” attribute, and the value is what the user enters or selects for that particular field.

<TYPE> attribute: The TYPE attribute can take any of the following values:

TEXT:

Provides a one-line area for text entry. Use this for short fields only. For longer text fields, use the <TEXTAREA>….</TEXTAREA> tags instead.

Example:

Full Name of the Applicant <BR><BR>

These TYPE attribute values provide a wide range of input displays and data types for form input.

PASSWORD:

These TYPE attribute value provide a password input box.

Example: Password<INPUT TYPE=”password” NAME=”password”>

RADIO:

Creates a radio button for a range of selections, from which the user may select only one.

Example:

Sex <BR>

<INPUT NAME="SEX" TYPE="RADIO" VALUE="F">Female<BR>

CHECKBOX: Produces an on-screen check-box for users to make multiple selections.

Example:

Employed <BR>

<INPUT NAME="EMPLOYED" TYPE="CHECKBOX" VALUE="Y">Yes

SUBMIT:

Creates a button labeled “SUBMIT” (by default, or whatever name is supplied to the VALUE attribute for SUBMIT) in your form. The type SUBMIT tells the browser to bundle the form data and pass it all to the CGI script indicated by the ACTION attribute. SUBMIT is the button the readers use to send in the filled-out form, so a form is useless without an <INPUT> field of type SUBMIT.

Example: <INPUT TYPE="SUBMIT" VALUE="Register Now">

HIDDEN:

Produces no visible input area; use this to pass data needed for other uses through the form. For example: this might be an ongoing series of forms based on an earlier interaction during which the user identifies himself or herself -–a HIDDEN field contains the name-value pair for that data but does not show it on the current form. (Some browsers display these fields at the bottom of a form, and each field has no accompanying label.)

IMAGE:

Lets you designate a graphic as a selectable item in a form. You can use this to include icons or other graphical symbols.

FILE:

Defines a file-select field and a "Browse..." button (for file uploads)

RESET:

Creates a button labeled “reset” in your form. It is used to clear a form’s contents and start again. Be sure to place it well away from other controls so that the user does not clear the form by mistake.

Example: <INPUT TYPE="RESET" VALUE="Cancel Data">

New TYPE values of <Input> tag: HTML5

COLOR: Defines a color picker.

DATE: Defines a date control (year, month and day (no time))

EMAIL: Defines a field for an e-mail address

NUMBER: Defines a field for entering a number.

Other <INPUT> attributes

VALUE=”value”: Supplies the default value for a TEXT or HIDDEN element or supplies the corresponding value for a radio button or check box selection. You can use this to determine the label of a submit or a reset button, like VALUE =”Join Now” for a submit or VALUE=”Clear Form” for a reset.

SRC=”URL”: Provides a pointer to the graphic for an IMAGE.

CHECKED: Makes sure that a certain radio button or check box is checked when the form is either visited for the first time or when it is reset. You can control default settings with the CHECKED attribute of <INPUT>.

SIZE=”number”: Sets the number of characters that a TEXT element can display without scrolling.

MAXLENGTH=”number”: Sets the maximum number of characters 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.

New Attributes of <INPUT> tag: HTML5

AUTOFOCUS=”autofocus”: Specifies that an <input> element should automatically get focus when the page loads.

MULTIPLE=”multiple”: Specifies that a user can enter more than one value in an <input> element.

Example:

<form action="demo_form.asp">
Select images: <input type="file" name="img" multiple>
<input type="submit">
</form>

REQUIRED=”required”: Specifies that an input field must be filled out before submitting the form.

Example:

<SELECT>…</SELECT> tag:

The <SELECT>..</SELECT> pair works much like a list style, except that it builds a selectable list of <OPTION> elements, instead of the <LI> list items. Within the <SELECT> tag, the following attributes can be given:

· NAME=”text”: Provides the name that is passed to the server as the identifying portion of the name-value pair for this element.

· SIZE=”number”: Controls the number of elements that the pick list displays; even though you can still define more than this number of elements, it keeps the size of the list more manageable on-screen.

· MULTIPLE: Indicates that multiple selections from a list are possible. If this flag is not present in the <SELECT> statement, then the user can select only one element from the pick list.

Example: <SELECT NAME="BANK" SIZE="4">

<OPTION>Bank of Baroda

<OPTION>Canara Bank

<OPTION>Corporation Bank

<OPTION>Lord Krishna Bank

<OPTION>State Bank of India

<OPTION>Syndicate Bank

<OPTION>Vijaya Bank

</SELECT>

HTML <fieldset> tag:

The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.

HTML <legend> tag:

The <legend> tag defines a caption for the <fieldset> element.

Example:

<form>
<fieldset>
    <legend>Personal Info:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
</fieldset>
</form>

<TEXTAREA>….</TEXTAREA> tag:

The <TEXTAREA>….</TEXTAREA> tags allows you to create input elements of more or less arbitrary size on a form. Any text that appears between the opening and closing tags is displayed within the text area on-screen.

<TEXTAREA> takes three important attributes:

· NAME=”text”: Provides the identifier part of the all-important NAME-VALUE pair delivered to the server.

· ROWS=”number”: Specifies the number of lines of text that the text area will display on screen. So if the number of rows is given as 5, it does not necessarily mean that the user can type only 5 lines. It actually means that on screen, 5 rows will be displayed at a time.

· COLS=”number”: Specifies the number of characters that can fit onto any one row of the text area. This value also sets the width of the text area on-screen.

Example: <TEXTAREA NAME="REMARKS" ROWS="3" COLS="45">

This student is joining Master’s in Information Technology

</TEXTAREA>

An example which shows the form element and its different attributes.

<HTML>

<HEAD>

<TITLE>MAHE APPLICATIONS</TITLE>

</HEAD>

<BODY>

<H2>MANIPAL ACADEMY OF HIGHER EDUCATION</H2>

<H3>DISTANCE EDUCATION WING</H3>

<H4>APPLICATION FOR ADMISSION TO FIRST SEMESTER IN IT</H4>

</CENTER>

<P>

1. Name of the Applicant<BR>

2. Address<BR>

3. Sex <BR>

<INPUT NAME="SEX" TYPE="RADIO" VALUE="M">Male

<INPUT NAME="SEX" TYPE="RADIO" VALUE="F">Female<BR>

4. Employed <BR>

<INPUT NAME="EMPLOYED" TYPE="CHECKBOX" VALUE="Y">Yes

5. Bank Name <BR>

<OPTION>Bank of Baroda

<OPTION>Canara Bank

<OPTION>Corporation Bank

<OPTION>Lord Krishna Bank

<OPTION>State Bank of India

<OPTION>Syndicate Bank

<OPTION>Vijaya Bank

</SELECT>

<BR>

6. Remarks <BR>

This student is joining Master’s in Information Technology

</TEXTAREA>

</TD>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Note : The following line appears in the code given above.

When the SUBMIT button is clicked the information is sent to the server. The server stores this information in a buffer and then executes APPL from the CGI directory using the POST method. APPL contains CGI script, which is invoked.

· CGI: Stands for Common Gateway Interface which lets developers use a wide variety of programming tools to perform tasks like processing forms, looking up records in a database, sending e-mail etc., The CGI interface ties your programs with the World Wide Web.

When the CGI script is invoked by the server, the server usually passes information to the script in one of two ways, GET or POST. These two methods are known as request methods. The request method used is passed to your script via the environment variable called REQUEST_METHOD.

GET is a request for data – the same method is used for obtaining static documents. The GET method sends request information as parameters tacked onto the end of the URL. These parameters are passed to your CGI program in the environment variable QUERY_STRING.

E.g. If your script is called ABC.EXE and you invoke it from a link with the form, <a href=”cgi-bin/abc.exe?lname=MANIPAL&fname=MAHE”>

The REQUEST_METHOD is the string GET and the QUERY_STRING contains, lname=MANIPAL&fname=MAHE.

The question mark separates the name of the script from the beginning of the QUERY_STRING. On some servers, the question mark is compulsory, even if QUERY_STRING does not follow it. On other servers, a forward slash may be allowed instead of the question mark or in addition to the question mark. If the slash is used the server passes the information to the script using the PATH_INFO variable instead of the QUERY_STRING variable.

· A POST operation occurs when the browser sends data from the fill-in form to the server. With POST, the QUERY_STRING may or may not be blank, depending on your server. If any information is present, it is formatted exactly as with GET and passed exactly the same way.

The data from a POSTed query gets passed from the server to the script using STDIN. Because STDIN is a stream and the script needs to know how much valid data is waiting, the server also supplies another variable, CONTENT_LENGTH, to indicate the size in bytes of the incoming data. The format for POSTed data is

Variable1=value1&variable2=value2&etc.

Your program must examine the REQUEST_METHOD environment variable to know whether or not to read STDIN. The CONTENT_LENGTH variable is typically useful only when the REQUEST_METHOD is POST.

The output of the above code is as below.

HTML <datalist> tag:

The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Example:

</datalist>

HTML <object> Element tag:

The <object> element defines an embedded object within an HTML document.

It is used to to embed plug-ins (like Java applets, ActiveX, PDF, and Flash) in web pages.

It can also be used to embed another webpage, or web content like images, into HTML documents.

Example:

HTML <embed> Element tag:

The <embed> element defines a container for an external application or interactive content (a plug-in).

Many web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.

Example:

Breaking

Home Top Ad

Post Top Ad

Introduction to HTML

Use iframe as a Target for a Link:

Example

No comments:

Post a Comment

Post Bottom Ad

Author Details

Ads

Search This Blog

Report Abuse

Recent

Popular

Comments

Ads

Archive

Pages

Connect With us

Recent News

About Me

Contact Form

Breaking

Home Top Ad

Post Top Ad

Introduction to HTML

Use iframe as a Target for a Link:

Example

No comments:

Post a Comment

Post Bottom Ad

Author Details

Contact Us

Socialize

Ads

Search This Blog

Report Abuse

Recent

Popular

Comments

Ads

Archive

Pages

Connect With us

Recent News

About Me

Contact Form