Programming Tutorials

Sunday, January 19, 2014

Html Subscript/Superscript - (PART_52)

Topic: How to make the text superscript or subscript?

Code:

This is a <sub>subscript</sub> example
This is a <sup>superscript</sup> example

Result:

This is a _subscript example

This is a ^superscript example

The <sub>,<sup> can also be used along with the CSS.

[1] - Superscript example - E=MC²

[2] - Subscript example - H₂O

Html>> Image tags - HTML form with submit button as image - (PART_51)

Topic: How to submit a form using image as button?
Html Button style.

Code:
<form name="hiox" action="index.php" method="POST">
<div align="center"> Name:<input type="text" size="25" name="name"><br>
<input type="image" src="submit.gif" name="image" width="40" height="40">
</div>
</form>

Result:

Name:

name - defines an internal name to the button.

type - defines the input type(text,image,etc,.)

src - defines the URL of the image.

width - defines the width of the image.

height - defines the height of the image.

Html>>Image tags- MAP/Image Mapping - (PART_50)

Topic: How to map an image using HTML?

<img src="tmahal.jpeg" usemap = #imgmap border=0>
<map name=imgmap>
<area shape=Rect Coords=30,30,59,59 Href="tam.jpg" Target="_blank">
<area shape=Rect Coords=100,60,129,80 Href="elephant.gif" Target="_blank" >
</map>

Result:

Attributes for image area

Class
indicates that the text is to be formatted using the specified class.

dir=direction
Indicates the direction (right or left) of the text to be displayed. Useful for languages which display left to right.

id="name"
You can name the text, which allows it to be referred and changed in a script (dynamic HTML).

NAME="NAME"
Name of an image map.

style= "style"
Defines the style for the text to be displayed title="title"
You can give a text a title if you want. This provides some additional information about the text.

HTML>> DTD - Document Type Definition - (PART_49)

Topic: How the DTD tags are used in html files?

Explanation: Document Type Definition>>

Document Type Definition is the definition tag which tells the type of document to the browser.DTD tag should be in the first line of the html file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/trans.dtd">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frame.dtd">

Saturday, January 11, 2014

Htm>> HTML Tooltip - (PART_48)

Topic:

How to create a tooltip using title attribute?
How to create a tool tip in html?

HTML Tooltip using title attribute:

Tool tip is a popup menu box appears when you hover on any link. Tooltip can be created using the title attribute to the object.

Example Code:

<a href=" http://tutorialsprogram.blogspot.com/search/label/Tutorials" title=" Tutorials"> tutorials</a>

Result:

tutorials

In IE, the browser will display the alt text on hovering images as a tool tip. But, it is better to use the title attribute to display the tool tip in other browsers.

HTML Tooltip using javascript:

The tool tip can also be created using the javascript and div tag. It is used as a reference for any text field in the web page.

Example Code:

<DIV TITLE="header=[First row] body=[second row]" STYLE="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 40px"> My div with some text inside. Move over me to see my popup menu. </DIV>

Result: My div with some text inside. Move over me to see my popup menu.

Html>> HTML Fieldset and Legend Tags - (PART_47)

Topic: How to draw outline or boxes around the elements in the html page using fieldset? How Legend tag is used as a caption for html page elements?

HTML Fieldset and Legend Tag:
Fieldset is an element used for drawing an outline or boxes around the field elements in the html page. Legend tag is used as a caption for fieldset element.

Example Code:

<legend>Details</legend>

Name <input type="text" size="10" />

Age <input type="text" size="3" />

</fieldset>

Result:

DetailsName Age

This example shows drawing an outline box with "Details" as caption using legend tag. Size of the outline box can be adjusted by resizing the width.

Example Code:

<legend>Details</legend>

Name <input type="text" size="10" />

Age <input type="text" size="3" />

</fieldset>

Result:

DetailsName Age

Mostly, these tags are used in lengthy forms to give the webpage a good look. Here is an example where these tags are used in feedback form.

Note: Fieldset encloses content between <td> and </td>, so it doesnt work for forms defined by multiple rows and columns.

Wednesday, January 8, 2014

Html>>Frame tags >>Frames and Frameset Tag - (PART_46)

Topic:

What is Frames in HTML?
How to divide the window using frameset tag?

Explanation:

<frameset tag>:
Frameset element is used to divide the window into frames with mentioned width and height. Rows and columns can be defined by using the ROWS and COLS attributes. Rows and cols are defined by the percentage(%) to get the desired frames.

Example Code:

<frameset rows="50%,50%" cols="50%,50%">
<frame name="Img1" >
<frame name="Img2" >
<frame name="title1">
<frame name="title2">
</frameset>

Result:

click here to view the result

Noresize & Scrolling:

Noresize and scrolling attributes are much used here to customise the window size. Noresize will not allow the user to adjust the frameborder. Scrolling can be done by setting Scrolling attribute as "Yes/No". These both attributes are used to make the frames more precise.

Example Code:

<frameset rows="50%,50%" cols="50%,50%">
<frame noresize="noresize" name="Img1" >
<frame noresize="noresize" name="Img2" >
<frame noresize="noresize" name="title1">
<frame noresize="noresize" name="title2">
</frameset>

Result:

click here to view the result

Likewise, we can have different type of frames by using the above frameset tags. Frameset is mainly used for navigation within the single window and to display multiple web pages at the same time.

Navigation within frames:

Mostly the web site uses the frames to have the links in left frame and its contents to be opened in the right frames. There can be navigation within the frames in a single window. The links in the first frame can be linked to any other frames in the same window. The site navigation can be done just by giving the target link to the frame name of the same window.

Example Code:

<frameset cols="150,*">
<frame name="left" scrolling="no" noresize target="rbottom" src="leftpane.htm">
<frameset rows="20%,*">
<frame name="rtop" scrolling="no" noresize align="center" target="rbottom" src="head.jpg">
<frame name="rbottom" src="http://income2earning.blogspot.com">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

Result:

click here to view the result

Thus, the frameset is used in making the webpages more compatible and ease to navigate. The links can be given from any frame to other.

Drawbacks:

Frameset do also have some drawbacks which makes its usage much low.

1. First, it is hardly affected by search engines. You have to create seperate pages especially for the search engines which does not support them.

2. While bookmarking a page, only the frames get bookmarked and not the exact html page. So, it is difficult to catch the relevant page on visiting the bookmarked page.