HTML [Hyper Text Markup Language]. HTML Hypertext: It provides a way to create a link between information in the same document as well as in different

HTMLHTML[Hyper Text Markup Language][Hyper Text Markup Language]

HTMLHTML

Hypertext:It provides a way to create a link between information in the same document as well as in different documents.

Markup LanguageMarkup refers to the special tags that are a part of the HTML document. These tags specify how the document content should be displayed.

Structure of an HTML Structure of an HTML document.document.

Every HTML document should have the following structure:

A head : It is used to identify the head of a document. Many browsers don’t require this tag.

A body : The body of HTML document contains the text that will show up on the Web page. Moreover it contains pictures, links to other Web pages etc.

HTML TagsHTML Tags

Syntax:

<tag> </tag>

Moreover, tags are not case sensitive:

<tag> </tag>

<TAG> </TAG>

Both of the lines above means same thing.

ExampleExample

<html> </html>

(or)

<HTML> </HTML>

Code Structure of HTML Code Structure of HTML DocumentDocument

<html><head>

</head>

<body>

</body></html>

<title> Tag<title> Tag

The <title> element in a document must occur within the <head> element of the document and is one of the only elements permitted to be in the head section.

<title> </title>

It gives title to your document.

<p> & <br> Tags<p> & <br> Tags

For a paragraph break we use tag <P> or <p>.

For a line break we use tag <BR>, <br> or <Br>.

<pre> Tag<pre> Tag

Pre stands for Preformatted. Sometimes you want to include spaces in your text and you don’t want your browser to ignore these spaces. Such spaces are included in the

<pre> </pre> tag.

<hn> Tage<hn> Tage

It is used to give headings. In the tag <hn> h stands for the heading where as n can be replaced with any number between 1-6. Where <h1> is the largest and <h6> is the smallest heading size.

<h1>MY PAGE</h1>

<hr> Tag<hr> Tag

<hr> stands for horizontal row.

Properties:SizeWidthColorNOSHADE

<B>, <<B>, <II>, & <U>>, & <U>

<b> </b> Bolds the data<I> </I> Italicizes the data<u> </u>Underlines the data

BGCOLORBGCOLOR

It gives background color to the body. It is a property of the body tag.

Example:

<body bgcolor=“red”>

</body>

COLORSCOLORS

Colors can be given by their names like “green”, “blue”, “cyan” etc.

And also by their hexadecimal notations like 123ABC, 6789EF etc. One important thing to notice is that the color in hexa-decimal notations are also preceded by a ‘#’ sign.

Examples of bgcolorExamples of bgcolor

<body bgcolor=“red”> <body bgcolor=“#123ABC”>

Some basic colors are:

#FFFFFF ----- White

#000000 ----- Black

#FF0000 ----- Red

#00FF00 ----- Green

#0000FF ----- Blue

Text (color) PropertyText (color) Property

<body> tag has another property called “text.”

<body text=“red”>

Changes the color of the text, that appears on the page, to “red.”

Background propertyBackground property

<body> tag has another property called Background. This property helps us to give an image as a background of the page.

<body background=“sam.gif”>

BlockquoteBlockquote

The blockquote element is used to denote a long quotation – one that should be set off from the surrounding text in the document. Browsers typically display this type of quotation as indented text.

<blockquote> </blockquote>

Address TagAddress Tag

This element is used to hold addresses. Typically, it occurs at the end of documents and is used to enclose the author’s name and electronic mail address. Browsers usually display addresses in italic style.

<address> Sam Andrew<br>

[email protected] </address>

center Tagcenter Tag

This allows text to appear in the center of page.

<center> I am centered </center>

Align PropertyAlign Property

With help of align property you can set text, pictures etc. to center, right or left.

<p align=“center”> This is centered text </p>

TT tagTT tag

This tag is called monospace tag. It is called monospace because each letter in this typeface occupies exactly the same space. It typically looks like a typewriter font.

<tt> This is written using tt tag</tt>

Big TAGBig TAG

This tag increases the size of font.

<big> I am big </big>

<big> I am even bigger </big>

Size keeps on growing as you keep on adding the tag big.

Small TAGSmall TAG

This tag decreases the size of font.

<small> I am small </small>

<small><small>

I am even smaller

</small></small>

Size keeps on diminishing as you keep on adding the tag small.

S or strike TAGS or strike TAG

s or strike tags is used to strike through the text.

<s> I am striked</s>

<strike> I am striked as well</strike>

CITE TAGCITE TAG

This tag is use for citation. Browsers usually display citations in italics.

<cite> I am cited </cite>

Code TAGCode TAG

We use this tag while displaying programs on internet. Browsers usually display this text in a fixed-width font.

<code>

A=34;<br>

System.out.println(“A=” + A);

</code>

DFN TAGDFN TAG

Use to specify definitions.

HTML:

<dfn>

HyperText Markup Language

</dfn>

DEL TAGDEL TAG

Its output is similar to that of <s> or <strike>. It displays your information in deleted text.

<del> I am fine. </del>

<EM> TAG<EM> TAG

Used to denote emphasis of the affected text. Browsers usually display emphasis as italics.

<EM> I am italicized </EM>

<STRONG> TAG<STRONG> TAG

Used to denote strong or important text. Browsers usually display display it in bold font.

<strong> I am bold </strong>

<INS> Tag<INS> Tag

Browsers usually display it as an underline text.

<ins> I am underlined </ins>

<SUB> & <SUP> Tag<SUB> & <SUP> Tag

<SUB> displays your information in subscript.

H<SUB>2</SUB>

<SUP> displays your information in superscript.

H<SUP>2</SUP>

Font TAGFont TAG

Font tag is used to set the following font properties:

SizeColorFace

BASEFONT TAGBASEFONT TAG

Unfortunately, BASEFONT was not named BASEFONTSIZE because what it does is to set the default font size. I.E. 2.0 and above supports same attributes for BASEFONT as for FONT. Default font-size value is 3.

<basefont size=7> My size = 7 </basefont>

Special CharactersSpecial Characters

In order to display some special characters on your web page we use & sign.

Example: To show copyright symbol we use:

©And many more…They always end with (;) symbol.

LISTSLISTS

Definition ListsOrdered ListsUnordered ListsOther Approaches

Definition ListsDefinition Lists

Definition List includes the following terms:

<DT> means definition term<DD> means Definition description<DL> Definition List

<DL>

<DT>HTML:

<DD>HyperText Markup Language.

<DT>XML:

<DD>Extensible Markup Language.

<DT>DHTML:

<DD>Dynamic HyperText Markup Language.

</DL>

Unordered ListUnordered List

Unordered List includes the following terms:

<UL> means unordered list.<LI> means list.

<UL>

<LI>HTML

<LI>DHTML

<LI>XML

<LI>SGML

</UL>

Unordered List 3Unordered List 3

Unordered list have an option called “type.” With the help of this option you can change the appearance of the bullets that appear on your screen. Following are the types of bullets available in UL.

CircleDiscSquare

ExamplesExamples

<ul type=“circle”>

<ul type=“disc”>

<ul type=“square”>

Ordered ListOrdered List

Ordered Lists includes the following:<OL> means ordered list<LI> means list

<OL>

<LI>HTML

<LI>DHTML

<LI>XML

<LI>SGML

</OL>

Ordered List 3Ordered List 3

Ordered list have an option called “type.” With the help of this option you can change the appearance of the bullets that appear on your screen. Following are the types of bullets available in OL.

1 Arabic Numerals A Uppercase Letters a Lowercase Letters I Large Roman i Small Romans

Ordered List 4Ordered List 4

Apart from type we also have an option called “start.” Start tells HTML what will be the initial value where as type tells HTML what kind of bullet I want to use.

EXAMPLE:

<OL TYPE=1 START=9>

<OL TYPE=a START=9>

<OL TYPE=A START=9>

<OL TYPE=I START=9>

<OL TYPE=i START=9>

Other ApproachesOther Approaches

There are two more methods to achieve unordered list format:

<DIR><MENU>

There is no difference in the output.

MENU TAG EXAMPLEMENU TAG EXAMPLE

<menu>

<LI>HTML

<LI>DHTML

<LI>XML

<LI>SGML

</menu>

DIR TAG EXAMPLEDIR TAG EXAMPLE

<dir>

<LI>HTML

<LI>DHTML

<LI>XML

<LI>SGML

</dir>

Nested ListsNested Lists<ol>

<li> Paste Tomatoes <li>

<ul>

<li> Banana Legs </li>

<li> Principle Borghese </li>

</ul>

<li> Cherry Tomatoes </li>

<ul>

<li>Gold Nugget</li>

<li>Small Fry</li>

</ul></ol>

<ul>

<li>Level One

<ul>

<li>Level Two

<ul>

<li>Level Three

</ul>

</ul>

</ul>

ImagesImages

Adding images to a web page improves its environment. Images are part of multimedia. Following are some of the widely used image extensions. Images are viewed according to the extension they carry:

Description Extension

GIF image .gif

JPEG image .jpg (or) .jpeg

Progressive JPEG image

.pjpg

Portable network graphic

.png

Computer Graphics Metafile

.cmg

Windows Bitmap image

.bmp

PICT image .pict

Adobe Acrobat File .pdf

Description Extension

Encapsulated PostScript

.eps

PostScript File .ps

TIFF Image .tiff

XBM bitmap image .xbm

Choosing an Image FormatChoosing an Image Format

However, most browsers have built-in or “inline” support for only one or two formats. While most browsers may be configured to support additional formats.

There are two methods that browsers may use to support image format that do not have built-in inline support.

Method – 1Method – 1

The older method uses an external program to display the image. With this method the image does not appear in the browser window; instead the browser runs the viewer program, and the image is displayed in the viewer program’s window, rather than in the browser.

Method - 2Method - 2

The newer method employs the use of plug-ins or Active-X controls.

Method – 2.2Method – 2.2

Plug-ins:

A plug-in is a module that the browser uses to add extra functionality to its native capabilities. Since plug-ins are not part of the browsers they need to be install before using. Once they are installed the browsers can display images that are stored in that format.

Method – 2.3Method – 2.3

Active-X control:

They provide similar functionality as plug-ins but unlike plug-ins they are automatically downloaded and installed.

AdviceAdvice

Since you cannot count on your readers to configure their browsers to support additional image formats, it is advisable to choose one of the widely supported formats for your images.

Most common FormatsMost common Formats

Two most common formats are:GIFJPEG

If you already have images but in other format try converting them to any of these two formats.

GIFGIF

GIF stands for Graphics Interchange Format. It was developed by CompuServe. GIF images are limited to 256 colors, making it poor choice for photographic images

Interlaced GIFInterlaced GIF

These images are images in which the scan lines have been rearranged so that a low-resolution version image can quickly be displayed. The rest of the image is then filled in over several passes. Although storing images in this format does not speed up transmission time. It rather takes slightly more space than regular GIF file.

Interlaced GIF 2Interlaced GIF 2

What it does is that it provides readers with a quick preview of the final image and helps to provide the impression that your document has loaded quickly.

Remember that all browsers don’t take help from this feature. It just makes pictures available to readers fast.

JPEGJPEG

JPEG stands for Joint Photographic Experts Group, which is the group that originally developed this standard. A related standard called “MPEG” is used for video.

JPEG TechnologyJPEG Technology

It stores information about the image by keeping track of the color changes in the image rather than storing information about each pixel in the image. It is known as the lossy format because final image is not exactly same as the original. However the human eye does not usually perceive the tiny differences introduced by this format.

Advantage of JPEGAdvantage of JPEG

For certain types of images JPEG requires much less storage space than do equivalent GIF. Hence requires less transmission time.

Compression UtilityCompression Utility

JPEG offers several levels of compression.. Highly compressed images require less space and less time to transfer. The drawback is that they must be uncompressed on the other hand which requires additional time.

GIF vs JPEGGIF vs JPEG

Originally GIF formatted images had the widest support. However, almost all browsers with exception of older versions support JPEG images. For graphics such as logos or line drawing, GIF will almost always produce sharper results. And may even require less storage. Photographs and other complex images must be should be stored in JPEG format.

Progressive JPEGProgressive JPEG

It offers the advantages of interlaced GIF images accompanied by the low storage requirements of the JPEG format.

ThumbnailsThumbnails

A thumbnails copy of an image is a small version that your users can use to decide whether they want to get the full-size version.

Image TagImage Tag

We use <img> tag to display images on web pages/sites. <img> tag has following properties:

SrcWidthHeightAltAlign

Image Tag 2Image Tag 2

HspaceVspaceBorder

<img> SRC Property<img> SRC Property

We already know that IMG stands for "image.” Src stands for “source.” It is a reference to the location of the image file.

If the image is in the same directory as the file you will write:

<img src=pic1.gif>

And if it is in some other directory then you

<img> SRC Property 2<img> SRC Property 2

And if it is in some other directory then you

may have to give the full path name.

<img src=“c:\windows\sun.gif”>

(or)

<img src=http://www.so.com/bk/s1.gif>

Labeling an ImageLabeling an Image

For Labeling an image we use “ALT” property. The ALT stands for alternate text because this message will appear in place of the image in older Web browsers that don't display graphics.

A note for the Browsers UsersA note for the Browsers Users

The message you put in the ALT attribute will be seen by some people who are using the latest Web browser software, too. Many people--especially those with slow modems--turn off the Auto Load Images option in Netscape Navigator and Show Picture option in I.E., so they can see the text on Web pages without wasting time downloading images they don't care about.

Use of ALT propertyUse of ALT property

This is how we use this property:

<img alt=“My picture one” src=pic1.gif>

In order to view how it looks on text-browsers type:

<img alt="my picture">

Image AlignmentImage Alignment

Images on web pages can be aligned:LeftRightCenter

By default images are aligned left. Therefore it is not necessary to write align=“left”

Image Alignment ExampleImage Alignment Example

By default:

<img src=pic1.gif>

Right align:

<img src=pic1.gif align=“right”>

Center align:

<img src=pic1.gif align=“center”>

HSpace PropertyHSpace Property

This property allows image to give some horizontal spacing:

<img src=“pic1.jpg” hspace=40>

VSpace PropertyVSpace Property

This property allows image to give some horizontal spacing:

<img src=“pic1.jpg” VSpace=40>

LinkingLinking

The link markup tag in HTML is <a>. <a> stands for anchor. This is followed by the URL of the destination document. Then the content or name of the hyperlink is entered. The closing anchor tag is of course </a>

The whole statement appears like this:

<a href=“prg1.html”>Program Number 1</a>

Linking 2Linking 2

<a href=“prg1.html”>Program Number 1</a>

In the line above <a> and </a> are opening and closing tags. href stands for hypertext reference which basically followed by the name of the file which has to be opened. “Program Number 1” is the text that appears on your web page. Clicking this text wiil take you to “prg1.html.”

Title propertyTitle property

This attribute or property is used to give additional information about link. When you brink your mouse near link it open a box with the message that works as an online help for the user.Example:<a href="sam.html" title="This will take you to Sam.">Web Site of Sam</a>

Target AttributeTarget Attribute

Lets say you have a link on your web page and you want it work like this: “When the link is clicked, it must open the requested page in another window instead of the same one.” Then answer to your problem is target.

Target Attribute ContinuesTarget Attribute Continues

Example:

<a href=“pg1.html” target=“newin”>ME</a>

In the example above, page “pg1” will open in another window named “newin,” instead of the same window as your web page is in.

Using Pictures in LinksUsing Pictures in Links

If you want to use pictures instead of text as links, then the answer is:

<a href=“me.html”> <img src=s1.gif></a>If you want to use both text as well as picture then the answer to your problem is:<a href=“me.html”> Click Here<img src=s1.gif></a>

alink, vlink & linkalink, vlink & link

These are three more attributes that can be added to your body tag:

<body alink=“red” vlink=“green” link=“blue”><body alink=“red” vlink=“green” link=“blue”>

Link set colors for links that have not yet been visited.

vlink set the colors for links that have been visited.

alinkset the colors for links that are active i.e. which are in the process of being loaded.

*BGProperties*BGProperties

Another property for body tag is Bgproperties. It is a non-standard property and works only in I.E. It is used to prevent the background from scrolling. It takes a single value: “fixed.” Example:Example:

<body background="picture.jpg" bgproperties="fixed“>

Intra Page LinksIntra Page Links

This method allows you to jump around at different places on the same page. Instead of linking to other pages the page is linked to itself.

Intra Page Links 2Intra Page Links 2

Regular links are written as:

<a href=“mp.html”>My page</a>

The destination link is present in one page and the original page is at another location.

In intra Page links, both things are present in the same page.

Intra Page Links 3Intra Page Links 3

Links are included in the following way:

1. < a href=“#place1”>Go There</a>

2. < a name=“place1”></a>

First statement represents link and second statement represents the location of the link. Lets look at the following example:

<a href=“#mypplace”>Click here to go to my place</a>

.

.

.

.

.

<a name=“myplace”></a> So finally you have reached. I was waiting for you. I was worried about you. I am glad you reached safely.

When you click on “Click here to go to my place” it will take you to the When you click on “Click here to go to my place” it will take you to the location where its says, “myplace.” location where its says, “myplace.”

Linking to Specific part of Linking to Specific part of another Web Pageanother Web Page

This feature allows you to connect from one web page to a specific part of another web page.

Follow the instructions below to understand this concept practically:

ExampleExample

Create a web page with the following contents:

<html><body><A HREF="prog2.html#two">II. The President</A></body></html>Save the program above as prog1.html

Example ContinuesExample Continues

Now create another page and write the following things to the page:

<html>

<body>

<a name=#two></a>Hi! how are you???

</body>

</html>

Save this program as prog2.html

Run prog1.Click on the link; it will take you to “two” in prog2.

Linking Your Email addressLinking Your Email address

In order to link your email address follow these steps:

<A HREF="mailto:[email protected]"> Send me an e-mail message.</A>

MarqueeMarquee

Marquee is a horizontally scrolling text. Its direction can be changed though but by default it scrolls horizontally.

<marquee> is the opening tag.

</marquee> is the closing tag.

Marquee 2Marquee 2

Marquee has the following properties: Direction Behavior BgColor ScrollAmount Width Height Loop

BGColorBGColor

It gives background color to your marquee.

Example:

<marquee bgcolor=“red”>Hello!</marquee>

HeightHeight

It can be used to set height of marquee.

<marquee bgcolor=“red” height=100>

Or

<marquee bgcolor=“red” height=60%>

WidthWidth

It can be used to set width of marquee.

<marquee bgcolor=“red” width=100>

Or

<marquee bgcolor=“red” width=40%>

ScrollAmountScrollAmount

Using this property you can set the scroll speed of marquee.

<marquee bgcolor=“red” scrollamount=200>

Hello

</marquee>

BehaviorBehavior

There are three behaviors that a marquee observes:

Scroll [ by default behavior]Slide [ slides only once ]Alternate [ gives bouncing effect to text ]

DirectionDirection

Marquee can move in four possible directions:

Left [by default]RightUpDown

Example of DirectionExample of Direction

For example: <marquee

direction=“right”>Hello!!!</marquee>

LoopLoop

It can help you set the number of times you would like the marquee to move.

<marquee loop=2>Hello</marquee>

AppletApplet

If you like to add an applet to your HTML page:

<applet code=“program1.class” height=100Width=100></applet>

Comments in HTMLComments in HTML

Comments are given as follows:



Or

<comment>This is a comment.</comment>

MoviesMovies

To include a movie you have to upload the movie file on your web server and has to provide a link to it.

<a href=“movie.avi”> J. Kennedy </a>

SoundsSoundsDescription Extension

AIFF sound .aiff

LAW sound .au

MIDI sound file .mid

RealAudio .ra or .ram

WAV sound file .wav

BGsoundBGsound

You can also set a back ground sound for your web page.

Bgsound has following properties:SrcLoop

SrcSrc

Here you provide with the name of the source file:

<bgsound src=“mjackson.wav”>

LoopLoop

I controls the number of times sound will be played.

<bgsound src=“amitc.wav” loop=2>

(or)<bgsound src=“amitc.wav” loop=infinite>

Image MapImage Map

You can also subdivide an image into regions that link to different documents, depending on where someone clicks. This is called an image map, and any image can be made into an image map.

Image Map 2Image Map 2

To make any type of image map, you'll need to figure out the numerical pixel coordinates of each region within the image that you want to be a clickable link.

Example:Example:

<map name=“heads”><area shape=“rect” coords=“40,20,130,40”href=“james.html”><area shape=“rect” coords=“50,100,34,120”Href=“john.html”></map><img src=“friends.jpg” width=200 height=100

usemap=“#heads””>

ExplanationExplanation

SHAPE="RECT" indicates that the region is rectangular.

COORDS="40,10,130,130" gives the top-left and bottom-right corner coordinates for the rectangular region.

HREF=“james.html" specifies the page that clicking on the region will link to. You can use any address or filename that you would use in an ordinary <A HREF> link tag.

Example for other shapesExample for other shapes

<area shape=“poly" coords=“3,60,4,10,130,130" href="james.html">

<area shape=“circle" coords="4,10,10" href="james.html">

TablesTables

One of the most powerful tools for creative Web page design is the table, which allows you to arrange text and images into multiple columns and rows. To make tables, you have to start with a <TABLE> tag. Of course, you end your tables with the </TABLE> tag.

Properties of Table 1Properties of Table 1

Properties:BorderBgcolorWidthHeightCellpaddingCellspacing

Properties of Table 2Properties of Table 2

BorderColorBorderColorDarkBorderColorLightFrameRulesAlign

<table><table>

Table consists of:<th> heading<tr> row<td> cell

Example – I [table]Example – I [table]

<table>

<tr>

<td>Green</td>

<td>Blue</td>

</tr>

</table>

Example – II [table]Example – II [table]

<table>

<tr>

<td>Green</td><td>Blue</td>

</tr>

<tr>

<td>Black</td><td>Red</td>

</tr>

</table>

<caption><caption>

This tag is used to give heading to a table.

<table>

<caption>Colors</caption>

<tr>

<td>red</td><td>blue</td>

</tr>

</table>

Border propertyBorder property

This property gives border to table.

<table border=5>

<caption>Authors</caption>

<tr>

<td>Dickens</td><td>Shakespeare</td>

</tr>

</table>

BgColor PropertyBgColor Property

<table border=5 bgcolor=“red”>

<caption>Cars</caption>

<tr>

<td>Honda</td><td>Ford</td>

</tr>

</table>

Width and Height 1Width and Height 1

Ordinarily, the size of a table and the size of its individual cells automatically expand to fit the data you place into it. However, you can choose to control the exact size of the entire table by putting WIDTH and/or HEIGHT attributes in the <TABLE> tag.


You can also control the size of each cell by putting WIDTH and HEIGHT attributes in the individual <TD> tags. The WIDTH and HEIGHT can be specified as either pixels or percentages.


For example, the following HTML makes a table 500 pixels wide and 400 pixels high: <TABLE WIDTH=500 HEIGHT=400> To make the first cell of the table 20 percent of the total table width, and the second cell 80 percent of the table width, you would type:

<TABLE><TR><TD WIDTH=20%>Skinny cell</TD> <TD WIDTH=80%>Fat cell</TD>

</TR></TABLE>

ExampleExample

<TABLE WIDTH=500 HEIGHT=400> <caption>Computers</caption><tr>

<td>HP</td><td>GateWay</td>

</tr>

</table>

AlignAlign

<table border=2 align=center><tr><td>Hi</td><td>Hola</td></tr></table>

(or)<table border=2 align=right><tr><td>Hi</td><td>Hola</td></tr></table>

BorderColorBorderColor

We can also set colors of borders.<table bordercolor=“red”><tr><td>How are you?</tr></table>

BorderColorLight BorderColorLight & BorderColorDark& BorderColorDark

These properties are used to give a 3-D effect to your table. They are supported only by I.E.

ExampleExample

<table bordercolorlight=“red” bordercolorlight=“green” bordercolor=“blue”>

<tr><td>How are you?</td></tr></table>

CellPaddingCellPadding

Spacing Between the edge of a cell and the cell’s contents.

< table cellpadding=5><tr><td>Sam</td><td>Mark</td></tr><tr><td>Saad</td><td>Asad</td></tr>

</table>

CellSpacingCellSpacing

Amount of space between the edge of a cell and the edge of the table and other cells.

< table cellspacing=5><tr><td>Sam</td><td>Mark</td></tr><tr><td>Saad</td><td>Asad</td></tr>

</table>

Frame Properties 1Frame Properties 1

Frame property can be assigned any of the following values:

Void---No sides.Above---Top side only.Below---Bottom side onlyHsides---Horizontal sides onlyVsides---Vertical sides only

Frame Properties 2Frame Properties 2

LHS---Left Hand Side only.RHS ---Right Hand Side only.

RulesRules

Void---no linesRows---only between rowsCols---only between columnsAll---between all rows and columns

ExampleExample

<table border=3 rules=void> </table><table border=3 rules=cols> </table><table border=3 rules=rows> </table><table border=3 rules=all> </table>

<th><th>

<table border=2><tr><th>Food</th><th>Drink</th></tr><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>

Group of RowsGroup of Rows

<thead> ... </thead> - Table Header <tbody> ... </tbody> - Table Body

<table border> <thead> <tr><th>Food</th><th>Drink</th>

<th>Sweet</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table>

ColSpan & RowspanColSpan & Rowspan

The number of columns spanned by the cell is called colspan and number of rows spanned by a cell is called rowspan.

<table border=2>

<caption>A very silly Table</caption>

<tr>

<th>column one</th><th>column two</th>

<th>column three</th><th>column four </th>

</tr>

<tr align=center>

<td>A plain cell</td><td colspan=2>

I am here</td><td>Hi!</td></tr>

<tr>

<td colspan=2>This cell spans two columns</td>

<td align=right colspan=2> I am right justified </td> </tr>

<tr><td rowspan=2>This cell spans two rows</td>

<td>A</td><td>B</td><td>C</td></tr>

<tr align=right><td>Right-Justified row </td> <td>E</td><td>F</td>

</tr>

</table>

Some Table Examples Some Table Examples

Calendar Example.

Others

<meta><meta>

The meta element belongs in the head portion of a document. Meta allows you to provide meta-information about your document. Some of its uses include providing additional indexing information and extra document control information such as expiration dates etc. Meta tag is used to provide information about information.

<meta> Attributes<meta> Attributes

Meta tag has three attributes.

1.HTTP-EQUIV

2.Name

3.Content

HTTP-EQUIVHTTP-EQUIV

HTTP is used by Web Servers to send HTML documents on the internet. This attribute is used to specify one of the predefined HTTP response headers. Names of these headers are not case sensitive. Example: Reply-to, Refresh, Expires, Keywords etc.

NameName

Meta information name. Assumed equal to the value of HTTP-EQUIV if not set explicitly. Examples: Author, Description, Keywords etc.

ContentContent

Used to set information content to be associated with the given name and/or HTTP response header.

Examples:Examples:

<meta name=“author” content=“Greta,Gardener” ><meta name=“copyright” content=“Greta Gardener, 1998” ><meta name=“Keywords” content=“oranges, apples,mango” ><meta name=“Resource-Type” content=“Document” >

Forcing Document ReloadForcing Document Reload

<meta http-equiv=“Expires” content=“wed, 10 Apr 1998 00:00:00 –0000”>

With some browsers it will force the document to be reloaded from server rather than read from cache. Browsers who understand this tag will check the time and should not cache the page at all.

Automatic Document RefreshAutomatic Document Refresh

<meta http-equiv=“Refresh” content=“1”>

Clients request data from servers. If content property is set to an integer, the browser will wait that number of seconds before reloading the current document.

<html>

<head>

<meta http-equiv=“Page-Enter” content=“revealTrans(Duration=7.0, Transition=30)”>

<meta http-equiv=“Page-Exit” content=“revealTrans(Duration=7.0, Transition=30)”>

</head>

<body>

Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br> Your text goes here<br>

</body></html>

TransitionsTransitions

Transition=n, where n is equal to any integer form 1-22.

Any integer entered for n greater than 22 will randomly cycle through the 22 available transitions each time the page loads.

FramesFrames

One major limitation of HTML in the old days was that you could see only one page at a time. Frames overcome this limitation by dividing the browser window into multiple HTML documents. Like tables, frames allow you to arrange text and graphics into rows and columns of text and graphics.

Transition=n, where n is an integer, 1-22. Any integer 23 or greater randomly cycles through

Transitions 1 through 22

Frames 2Frames 2

However, unlike a table cell, any frame can contain links that change the contents of other frames (or itself). Frames are basically a way of arranging and presenting several Web pages at once.

Frames are only supported by Netscape Navigator version 2.0 or higher and Microsoft Internet Explorer version 3.0 or higher.

Frames 3Frames 3

In short, a frame is a rectangular region within the browser window that displays a Web page, alongside other pages in other frames.

How to use FramesHow to use Frames

First create the contents of each frame as an ordinary HTML page.

To put them all together, use a special kind of page called a frameset document.

FramesetFrameset

A frameset document actually has no content. It only tells the browser which pages to load, and how to arrange them in the browser window.

NoteNote

In an HTML document you will see that instead of a <BODY> tag, there is a <FRAMESET> tag. No tags that would normally be contained in a <BODY> tag can be within the <FRAMESET> tag.

FrameSet 3FrameSet 3

The <FRAMESET> tag includes a ROWS attribute, meaning that the frames should be arranged on top of each other like the horizontal rows of a table. If you want your frames to be side-by-side, use a COLS attribute instead of ROWS.

Frameset 4Frameset 4

<FRAMESET ROWS="80,*,80">

means to split the window horizontally into three frames.

<FRAMESET COLS="80,*,80">

means to split the window vertically into three frames.

Frameset – rows/cols sizeFrameset – rows/cols size

You must specify the sizes of the ROWS or COLS, either as precise pixel values or as percentages of the total size of the browser window. You can also use an asterisk (*) to indicate that a frame should fill whatever space is available in the window.

<frame> tag<frame> tag

Within the <FRAMESET> and </FRAMESET> tags, you should have a <FRAME> tag indicating which HTML document to display in each frame. (If you have fewer <FRAME> tags than the number of frames defined in the <FRAMESET> tag, any remaining frames will be left blank.) You don't need to specify a closing </FRAME> tag.

Src propertySrc property

Include a SRC attribute in each <FRAME> tag, with the address of the Web page to load in that frame

You can include any HTML page you want in a frame

Example - IExample - I

<FRAMESET COLS="80,*,80">

<frame src=“pg1.html">



</frameset>

Example - IIExample - II

<FRAMESET COLS=“20%,50%,30%">




</frameset>

Example - IIIExample - III

<FRAMESET COLS=“*,*,*">




</frameset>

Linking Between the Frame Linking Between the Frame WindowsWindows

The real fun begins when you give a frame a name with the <FRAME NAME> attribute. You can then make any link on the page change the contents of that frame using the <A TARGET> attribute.

Linking Between the Frame Linking Between the Frame Windows 2Windows 2

<FRAME SRC="main.html" NAME="main"> This displays the main.html page in that frame when the page loads, and names the frame "main."

Linking Between the Frame Linking Between the Frame Windows 3Windows 3

<A HREF="makeit.html" TARGET="main">See us make it.</A>Include this line in one of the pages being displayed in frameset. When you will click on the link above, makeit.html will be displayed in the frame name “main.”

Example p1Example p1

<frameset cols="20%,*">

<frame src="index.html">

<frame src="page1.html" name="main">

</frameset>

Example p2Example p2

<html>

<body>

<a href="page1.html" target="main">Page1</a><p>

<a href="page2.html" target="main">Page2</a><p>

<a href="s3.html" target="main">Page3</a><p>

<a href="s4.html" target="main">Page4</a><p>

</body>

</html>

Margins, Borders, and Margins, Borders, and ScrollingScrolling

In addition to the NAME attribute, the <FRAME> tag can take the following special frame-related attributes:

MARGINWIDTH: Left and right margins of the frame (in pixels)

MARGINHEIGHT: Top and bottom margins of the frame (in pixels)

SCROLLING: Display scrollbar for the frame? ("yes" or "no")

NORESIZE: Don't allow this frame to be resized by the user

ScrollingScrolling

Normally, any frame that isn't big enough to hold all of its contents will have its own scrollbar(s). If you don't want a particular frame to ever display scrollbars, you can put SCROLLING=NO in the frame tag. Conversely, SCROLLING=YES forces both horizontal and vertical scrollbars to appear, whether or not they are needed.

ResizeResize

People viewing your frames can ordinarily resize them by grabbing the frame border with the mouse and dragging it around. If you don't want anyone messing with the size of a frame, put NORESIZE in the <FRAME> tag.

No BordersNo Borders

If you want borderless frames to show up in browser, type BORDER=0 in your <FRAMESET> tag .

MarginMargin

MARGINWIDTH and MARGINHEIGHT are pretty self-explanatory. They are used to set the margin width and margin height.

Marginheight=num of pixels

Marginwidth=num of pixels

ExampleExample

<FRAMESET COLS="*,*,40%” border=0>

<frame src=“pg1.html" name="main" scrolling="yes" noresize marginheight=10 marginwidth=10>



</frameset>

Nested FramesNested Frames

By nesting one <FRAMESET> within another, you can create rather complex frame layouts.

EXAMPLE:<FRAMESET COLS="*,*,*" border=0>

<frame src="ss.html" name="main" scrolling="no" noresize marginheight=10 marginwidth=10>

<frameset rows="*,*">

<frame src="prog1.html">

<frame src="prog2.html">

</frameset>

<frame src="s2.html">

</frameset>

Supporting Frameless Supporting Frameless BrowsersBrowsers

We use <noframe> tag to show text to the browsers who do not show frames. Example:

<noframe><body>I think your browser does not supports frame.</body></noframe>

This message does not appear to those users whose browsers support frames.

ExampleExample

Do one frame Example by yourself.

IFRAMEIFRAME

It allows a frame to be embedded in a regular HTML document. Unlike a document that contains a FRAMESET, documents with IFRAME elements follow the standard HTML document structure.

IFRAME 2…IFRAME 2…

An IFRAME element looks like this:

<iframe src=“tomato.html”>

What ever you write here is displayed to those whose browsers don’t support iframes.

</iframe>

PropertiesProperties

Align = LEFT | RIGHT | CENTERFrameBorder (NO | YES | 0 | 1)Height = n <Where n is amount in pixels>Width= n <Where n is amount in pixels>HSPACE= n <Where n is amount in pixels>VSPACE= n <Where n is amount in pixels>

Properties 2…Properties 2…

MARGINHEIGHT= n <Where n is amount in pixels>

MARGINWIDTH= n <Where n is amount in pixels>

SCROLLING = AUTO | YES | NOSRC

Property Descriptions Property Descriptions Follow…Follow…

Property

Name

Property Description

ALIGN Frame Alignment. It can have any of these three values: (left, right, or center)

FrameBorder Determines whether a border is drawn around frame. It can have any of these values: (0 , No, 1, Yes).

HEIGHT The Height of the Space Reserve for the frame. The value may be provided in pixels or %.

Property

Name


WIDTH Width of the Space Reserve for the frame. The value may be provided in pixels or %.

HSPACE The horizontal margin for the frame in pixels.

VSPACE The vertical margin for the frame in pixels.

SRC URL of the document to be included in the frame.

SCROLLING Includes a Scrollbar with the frame.

Property

Name


MARGINWIDTH The width of left and right margins in pixels.

MARGINHEIGHT The height of left and right margins in pixels.

EXAMPLE IFRAMEEXAMPLE IFRAME<html> <body>

This page includes an IFRAME.<p>

<center> <iframe src="prog2.html">

If you can see me, then you can’t see iframe.

</iframe> </center>

<p> Did you like this new concept?

</body> </html>

Creating HTML FormsCreating HTML Forms

HTML is a two-way street; you can use your Web pages to gather information from the people who read them as well. Web forms allow you to receive feedback, orders, or other information from the readers of your Web pages. If you've ever used a Web search engine such as Lycos or Excite, you're familiar with HTML forms. Product order forms are also an extremely popular use of forms.

How Form WorksHow Form Works

Before you learn the HTML tags to make your own forms, you should understand how the information that someone fills out on a form makes its way back to you. You also need to have the person who runs your Web server computer set it up to process your forms. Every form must include a button for the user to submit the form. When someone clicks on this button, all the information they have filled in is sent (in a standard format) to an Internet address that you will specify in the form itself.

How Form Works 2How Form Works 2

Almost all Internet service provider companies that offer Web page hosting also provide pre-programmed scripts to their customers for processing forms. The most common thing that such a script would do is forward the information from the form to your e-mail address, though it might also save the information to a file on the Web server or format the form data to make it easier for you to read.

Form tagForm tag

Every form must begin with a <FORM> tag, which can be located anywhere in the body of the HTML document.

Form ObjectsForm Objects

Form has the following objects:

1. Text

2. CheckBox

3. ListBox

4. Button

5. RadioButton

6. Image

7. TextArea

Form Input: INPUTForm Input: INPUT

The input element should be used only with in the form element and is denoted by <input>. It specifies the kind of input field presented to the user. These fields must use the name attribute so that they can be referenced from anywhere within or outside the program. The value property tells us about the value that a particular object holds.

Properties 1Properties 1

NameMaxlengthSizeSrcValueTypechecked

Properties 2Properties 2

disabledreadonlyalign

Type AttributeType Attribute

It is used to specify the type of data used in an input field. The other attributes that are applicable to a particular field depend on the field’s TYPE attribute.

Text TypeText Type

This specifies a single line text entry field; it can be used in conjunction with the maxlength and size attributes.

Examples:

<input type=text name=“text1” maxlength=10

Size=5>

Example:Example:

<p>What's your first name? <INPUT TYPE="text" SIZE=20 MAXLENGTH=30 NAME="firstname"> What's your last name? <p><INPUT TYPE="text" SIZE=20 MAXLENGTH=30 NAME="lastname">

Text TypeText Type

The TYPE attribute indicates what type of form element to display, a simple one-line text entry box in this case. The SIZE attribute indicates approximately how many characters wide the text input box should be. MAXLENGTH determines the number of characters the user is allowed to type into the text box.

Password TypePassword Type

Password is the same as text, except the text entered by the user is obscured. Like text you can use the size and maxlength attributes with this field.

<p>Please Enter your Password:

<input type=password name=“pass” maxlength=15 size=10>

Button Input TypeButton Input Type

The button type creates a button. The action associated with a button field must be defined through scripting and onClick event. e.g.

<p> Click Here: <input type=button name=“b1” value=“Click”><p>

Click Here: <input type=button name=“b2”>

Submit & ResetSubmit & Reset

The submit button is used to submit form’s content where as reset is used to set all the fields in the form to their initial value.

<p> <input type=“submit”>

<p> <input type=“reset”>

Image TypeImage Type

If you do not like the look of the plain button used with SUBMIT, you may use the IMAGE type along with an image as an alternative to submit. The image type defines an image field that can be clicked on by the user with a pointing device causing the form to submit immediately.

Examples AExamples A

<input type="image" src="msn.jpg“>

<input type="image" src="m1.jpg" alt="msn-logo">

<input type="image" src="msn.jpg“ alt="msn-logo" height=100 width=50></p>

Examples BExamples B

<table border=7><tr><td><p align="right"><input type="image" src="msn.jpg" alt="msn-

pictures" height=100 width=50></p></td> </tr></table>

Examples CExamples C

<form action=“page1.html”>

Name: <input type=“text” name=“name”>

Address:<input type=“text” name=“addr”>

<input type=“submit”>

</form>

Examples DExamples D

<form action=“page1.html”>

Name: <input type=“text” name=“nam”><p>

Address:<input type=“text” name=“ad”><p>

<input type=“image” src=“picture1.jpg”>

</form>

Check Boxes 1Check Boxes 1

The simplest input type is a check box, which appears as a small square the user can select or deselect by clicking. A check box doesn't take any attributes other than NAME:

<INPUT TYPE="checkbox" NAME="baby" VALUE="yes"> Baby Grand Piano <INPUT TYPE="checkbox" NAME="upright"> Upright Piano


Selected check boxes appear in the form result sent to the server script as follows:

baby='yes‘ Blank (deselected) check boxes do not appear in the form output result at all. If you don't specify a VALUE attribute, the default VALUE of "on" is used.


You can use more than one check box with the same name, but different values, as in the following code:

<INPUT TYPE="checkbox" NAME="pet" VALUE="dog"> Dog<INPUT TYPE="checkbox" NAME="pet" VALUE="cat"> Cat<INPUT TYPE="checkbox" NAME="pet" VALUE="iguana"> Iguana


If the user checked both cat and iguana, the submission result would include the following:

pet='cat'pet='iguana'


You can define the initial setting for a checkbox by including the checked attribute. When this attribute is set the checkbox will appear to be selected when the form is originally displayed or after the reset button is chosen. The reader can deselect the box by clicking on it. E.g.

<input name=“cats” value=“unsure” type=checkbox checked>Unsure

Radio ButtonsRadio Buttons

The Radio Type defines an item where only one value can be selected from a set of possibilities. Just use TYPE="radio" and give each of the options its own INPUT tag, as in the following code:

Example:Example:

<INPUT TYPE="radio" NAME="card" VALUE="v" CHECKED> Visa <INPUT TYPE="radio" NAME="card" VALUE="m"> MasterCard <INPUT TYPE="radio" NAME="card" VALUE=“d"> Discover <INPUT TYPE="radio" NAME="card" VALUE=“a"> American Express

Hidden TypeHidden Type

If you want to send certain data items to the server script that processes a form, but you don't want the user to see them, you can use the INPUT TYPE="hidden" attribute. This attribute has no effect on the display at all; it just adds any name and value you specify to the form results when they are submitted. For this attribute to have any effect, someone must create a script or program to read this line and do something about it.

Hidden Type Continues…Hidden Type Continues…

Most scripts require at least one or two hidden input elements. Consult the person who wrote or provided you with the script for details. You can also use hidden items to indicate which of the many similar forms a particular result came from.

ExampleExample

<input type=“hidden” name=“type” value=“websurvey”>

(Or)

<hidden name=“type” value=“websurvey”>

TextAreaTextArea

The <INPUT TYPE="text"> attribute mentioned earlier only allows the user to enter a single line of text. When you want to allow multiple lines of text in a single input item, use the <TEXTAREA> and </TEXTAREA> tags instead. Any text you include between these two tags will be displayed as the default entry.

ExampleExample

<TEXTAREA NAME="comments"> Please send! </TEXTAREA> <TEXTAREA NAME="comments" rows=10> Please send!</TEXTAREA> <TEXTAREA NAME="comments" cols=10> Please</TEXTAREA> <TEXTAREA NAME="comments" rows=10 cols=8> Please</TEXTAREA>

TextArea Attribute: WrapTextArea Attribute: Wrap

This attribute controls how word wrapping for text input should be handled. The following value may be used:

Off: No wrapping.

Select Select

Both scrolling lists and pull-down pick lists are created with the <SELECT> tag. This tag is used together with the <OPTION> tag.

Option AttributeOption Attribute

Option element should be used only with in a select element. It represents one choice in a list of alternatives. Once the user has selected an option from the list, it becomes the visible element in the pull-down list. Two attributes may be used with Option.

Option Attribute 2Option Attribute 2

Selected:This attribute causes the option to be selected until the user chooses another option.

Value:Specifies a value to be returned if the option is chosen If no value is specified, the content of the option element is returned.

Example – IExample – I

<SELECT NAME="extras"> <OPTION value=“EW” SELECTED> Electric windows <OPTION value=“amfm”> AM/FM Radio <OPTION value=“tc”> Turbocharger </SELECT>

Size AttributeSize Attribute

The size attribute allows you to tell the browser the number of options that should be displayed simultaneously.


<SELECT NAME="extras“ size=2> <OPTION value=“EW” SELECTED> Electric windows <OPTION value=“amfm”> AM/FM Radio <OPTION value=“tc”> Turbocharger </SELECT>

Multiple AttributeMultiple Attribute

It allows user to choose more than one option.

Example – IIIExample – III

<SELECT NAME="extras“ size=2 multiple> <OPTION value=“EW” SELECTED> Electric windows <OPTION value=“amfm”> AM/FM Radio <OPTION value=“tc”> Turbocharger </SELECT>

Button ElementButton Element

The Button Element was introduced in HTML 4.0 and is used to create a click-able button. The Button element’s strength over the input element’s button type lies in its display customizing features. The Button element is intended to display anything within the <button> </button> tags as part of the button. Thus it can be used to create graphical buttons that include text labels.

PropertiesProperties

NameType = button | submit | ResetDisabled

Example – IExample – I

<button type="reset" name="b">

<b> My Place </b>

<img src=picture.jpg align=right hspace=10 width=50 height=50>

</button>


<button type="reset" name="b" disabled>

<b> Tomato place </b>

<img src=picture.jpg align=right hspace=10 width=50 height=50>

</button>

Documents

HTML [Hyper Text Markup Language]. HTML Hypertext: It provides a way to create a link between information in the same document as well as in different