Home


Welcome


Welcome to the PROG101. This is free tutorial guide blog. The goal is to provide, the most helpful and complete guide to learn some of the programming languages.



HTML


HTML is the language used for developing web pages and if you are serious about creating quality content for your web-site or blog you must have knowledge of HTML.

If you are a web developer or going to be one, then you must know the HTML scripting. If you are blogger though it requires basic understanding of HTML. Yes, there are plenty of tools available for blogging that requires no coding, but if something goes wrong with the code then it ends up with errors messages that difficult to ubderstand.

If you know HTML, you can customize the content in the way you want and in more better way.

So what are you waiting for, lets start programming!

Start learning HTML.


Display/ Hide blogger Navbar

The Blogger Navbar is a navigation and search bar on top of all blogspot blogs. It is available in several colors.


The only reason why people remove Blogger Navbar is its mismatch color. Most of Blogger user find that Navbar color is not going with their template design and so they try to remove it.

Beside this it has many advantages:
1. Reduce number of undetected spam blogs. Spam blog can be informed through use of it.
2. Easy share allows your blog post to share without using any additional widgets or gadjets.
3. Search blog feature allows you to search your blog without adding any extra search boxes and displays result on the same page.
4. Next blog feature allows you to gain new visitors and traffic which can improve your overall experience.

To Display Navbar follow these steps :
1. Login to your blogger account.
2. From Dashboard select layout option. It will take uyou to the Layout page. Select Edit HTML menu from Layout tab.
3. Delete the code below to show Navbar on your blog.

#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

4. If you want to hide the Navbar insert above code into your template and it will hide Navbar.

Inserting post in the middle

You can insert particular post in the middle of post order. Lets say you have number of posts listed in your blog and some other day you realise that there should be one or more post to be inserted. You may create these post, but these newly published post appear on top rather than appearing inbetween some posts.

You may do this by following below steps.
1. Crate a new post that you want to appear in between your post-list.

2. Publish this post.

3. After publishing post, once again go for editing the same post. At the bottom-left side click on "Post Options". Change date and time of the post to something newer. Such that date should be set to newer than than its bottom post and older than its top post.

Lets say you have the post1 and post2 created on 1st Jan 2009 and 3rd Jan 2009 respectively. Later on in lets say June you want to insert some new posts in middle of these two. you create a new post and change its date to 2nd Jan 2009. This newly created post will be placed after post1 and before post2. If there are posts created on same day, you may change its time for the same purpose.

4. After changing date click "Publish Post" button.

Seetting up sticky post

What is sticky post?
Sticky post is the post that is displayed on your homepage URL.

You may have seen these, when you type some web address you are redirected to its home page. In case of your blog when you type your blog address, the latest post is displayed on your home page. Blogger displays your newer posts on the top and older moved down the page. The more newer post will likely to get displayed first and older later.

Why you need sticky post?
There might be situation where you want your visitors to visit this sticky post before visiting other post. Blog-Introduction, general information before visiting other posts, some important links or content or just some friendly talk you may want to share with visitors when they visit your blog.

What you achieve?
The sticky post remains there above all posts. All other posts are arranged below this post.

Here’s how to do it.
Follow these steps to make your sticky post.

1. First write a post that you want to display on homepage and click on Publish Post.

2. After clicking Publish Post you will be directed to a new page, here click on Edit post. Like here :

3. Here on the edit post page at the left bottom click on Post Options and in the right bottom page change the date and time, till you want the post to remain sticky. This means that if you will publish any new post, it will come below the sticky post.

For eg. I have changed the post date from 11/3/09 to 11/30/09. Now the sticky post will remain at the top till 11/30/09 and after that, new posts will come at the top.

4. After changing the date and time, again click on Publish Post.

You may change this date from time-to-time to appear the sticky post on homepage. Just change this date to something newer than the recent one.
Hope you got it.

Introduction to HTML


Introduction to HTML

* HTML stands for Hypertext Mark-up Language.
* Hypertext refers to the text that has been decorated in some way.
* It is called markup language because everything is marked up by using tags like,

<b>It displays text in Bold</b>

* HTML is used to create active documents.
* It is specific type of language that can be used to develop a web page.

Tags

* Tags are instruction or set of symbols that are written into the text of document & have special meaning.
For eg. <html> ,<head>,etc.
* Tags are sometimes called as HTML elements.
* Tags may have one or more attributes.
* Tags can be use in the pairs or in single depending upon their type.
For eg. <b>..text..</b>.
* It causes anything between <b> & </b> to be rendered in Bold.
Attributes

* Attributes provide additional information about HTML elements.
* A HTML element may have one or more attributes.
* Attributes are specified in opening tag of HTML element.
* Attributes are written as attribute_name="Its_value"
* For eg. <a> is used with its href attribute as follows:

<a href="http://prog101.blogspot.com">This is a link</a>


Getting started


Getting started!

Where to write code?
You can use notepad or wordpad to write HTML code.
There are plenty of HTML editors available that can be used for the same purpose like, Dreamweaver, FrontPage.
The most likely used one is Dreamweaver.
It not only allows you to edit HTML, but provides support editing for other languages including, CSS, Javascript, VBScript, ASP, ColdFusion, PHP, ASP.NET, XML, XSLT and some other cool features.
While saving the file give .html or .htm extension.

Structure of an html program.

Entire html page is enclosed between <html> & </html>
tag. These tags may contain other tags <head>,<title>,<body>,<frameset> depending upon requirement.

Basically html page has following structure:

<html>
< head>
<title >title name</title>
</head>
< body>
Document body
</body>
</html>


Basic tags


Basic tags
<html> :

As earlier discussed this tag contain entire page.This tag may contain <head>,<body>,<frameset>,etc.

<head> :
This tag is used to provide information for inner working of document. Document is nothing but your HTML page itself.
It contain <title> tag, which defines document title and displayed in Title-bar of your web-browser.
<head> defines document header.This tag end with <head> tag.
It may contains other tags that defines & manage documents contents. Here are these tags <base>, <link>, <meta>, <style>, and <script>.
<head> tag is placed just after the <html> tag & before <body> or <frameset> tag.

Head tags and thier descriptions :
TagDescription
<title>It defines the document title.
<base>Defines a base URL for all the links on a page.
<link>Defines a resource reference.
<meta>Defines meta information.

<title> :
It defines document title.Anything entered between <title> & </title> is displayed on the title-bar.It has end tag </title>.

<body> :
It defines document body.It contains body content.It ends with <body>.
It has following attributes:
AttributesDescriptionValues
alink:Defines color for active link.rgb(x,x,x) or #xxxxxx or colorname
background:Sets a background image for a document.URL
link:Sets hyperlink color which are not clicked by user.rgb(x,x,x) or #xxxxxx or colorname
vlink:Set color for link which the user had followed.rgb(x,x,x) or #xxxxxx or colorname
bgcolor:It defines document background color.rgb(x,x,x) or
#xxxxxx or colorname
text:Changes body text color from default value.rgb(x,x,x) or #xxxxxx or colorname
title:Specifies extra information about an element.text

First program


First program
Lets write-down our first program :

* Open Notepad, wordpad or editor of your choice and write-down or simply copy-paste following text:

<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="blue" text="yellow">
This is my page content.

Note the Title-Bar it has title as "My First Page".

Background color is set to Blue and text will be displayed in Yellow.

</body>
</html>


* Save above program with the .html extension.
* After saving file it will create one HTML file, open it and see the result.
* Code above needs no explaination as it is so simple. We have displayed page with blue background and yellow text. We have given page title.

Adding comment


Adding comment :

To create description about html code & not to be display this description in the browser when visitor visits to the site, <comment> tag can be used.It is helpful while editing code.
This tag works fine in Internet Explorer only.Other browser do not support this tag i.e.comment get displayed in the browser.
<!--and--!> sequences are used to eliminate this effect.
Eg. <!--comment can be placed here--!>.

Some HTML Do's and Don'ts :

* While you write HTML code, each tag opened must be closed with its respective tag.
For Eg., <b> and </b> tags.
First tag is called opening tag and other that begins with forward(/) slash is called closing tag.
The first tag turns the action on, and the second turns it off.
There are some exceptions.
For instance, the <br> tag creates a blank line and doesn't have closing tag.

* When nesting tags i.e. when you start a tag within another tag, the inner most must be closed first. Like,

<head> <title>
You page title goes here </title></head>

Where following notation is wrong as per the HTML rules

<head> <title>
You page title goes here </head></title>


* Attributes values must be closed within double quotes("") or single quotes('').
It is required because your attributes value may contain multiple strings and such case if it is not quoted the second word in value is considered as attributes name. And it may result in Error.

Heading tags


Heading tags
<h1> to <h6>:
Heading tags are used to define different heading levels.These six tag can be used to define document heading.
<h1> defines highest heading level.
And so on <h6> defines lowest heading level.
Eg.

<html>
<head>
<title>My Heading Program</title>
</head>
<body bgcolor="blue" text="yellow">
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>


Attributes for <h1> to <h6>:
AttributesDescriptionValues
align:Sets align of the heading.left,right,center,justify

Paragraph



<p> tag :
It defines paragraph of text. Each paragraph starts with <p> & ends with </p>. This tag contains plain text.
Eg.

<p align="right" > This is my paragraph with right align. </p>

Output:

This is my paragraph with right align.

Paragraph can be justified in four ways with alignment attribute in following way:
Attributes DescriptionValues
align : Set the alignment of the paragraph. left, right, center, justify

<br> tag :
This tag inserts line break. It has no ending tag.When user wants text to be appear on the next line this tag is used. Like in following eg. :

My address :<br> Street address 1, <br> Street address 2, <br> City, <br> Country, <br> Pincode.

Output:
My address :
Street address 1,
Street address 2,
City,
Country,
Pincode.

<hr> tag :
It displays a horizontal rule on the web page. The horizontal line displayed here after the following table is by using this tag. This tag doesn't have closing tag. This line can be drawn in several ways by using the following attributes:
Attributes DescriptionValues
align : Set the alignment of the line. By default it is centered aligned. left, center or right
size : Set the size of line in pixels. pixels
width : Sets the width of the line in pixels.pixels, percentage

Formatting tags



Formatting tags
<b> tag :
It causes anything between <b> & </b> to be rendered in boldfaces.

<i> tag :
It defines anything between <i> & </i> to displayed in Italic.

<u> tag :
This tag underlines the text appearing in between this tag.

<s> tag :
It puts line through the text containing inside the <s> tag & its </s> tag.

<address> tag :
This tag defines information about web page such as URL(Uniform Resource Locator), date of last version, adress, etc. It provides contact information for the author and enables readers to contact the author.

<pre> tag :
The text appearing in between <pre> & </pre> displayed in exactly same format as type in.
AttributesDescriptionValues
align :Sets align of the inner content.left, right, center, justify
width :It defines number of characters per line.number

<em> tag :
This tag defines text to be displayed in italics.

<strong> tag :
This tag displays text in boldfaces.

<big> tag :
This tag displays text one font size larger than surrounding text.

<small> tag :
This tag displays text one font size smaller.

<sub> tag :
This tag displays text half a character size lower. Like here,

H<sub>2</sub>O, CO<sub>2</sub>, O<sub>2</sub>, So<sub>2</sub>

Output :

H2O, CO2, O2, SO2


<sup> tag :
This tag displays text half a character size height higher. Eg.

(x+y)<sup>2</sup>, (5888)<sup>3</sup>

Output :
(x+y)2, (5888)3

<tt> tag :
This tag displays text in monospaced form.

<font> tag :
This tag changes texts size,style & color.
This tag have following attributes:
AttributesDescriptionValues
size : Defines size of text. number
face : Sets the fonts style. font_family
color : Sets color for enclosed text. rgb(x,x,x), #xxxxxx or colorname
lang : Language for a text to be appear in can be set here. language_code

<marquee> tag :
This tag causes text to be scroll across the browser.
This tag doesn't work in all browsers. Eg.

<marquee align="top" bgcolor="blue" behavior="alternate" width="50%" height="30px" direction="right" scrollamount="10" scrolldelay="1000" >This text will bounce from left to right</marquee>

Output :
This text will bounce from left to right.
It has following attributes:
AttributesDescriptionValues
align : Sets the alignment of the text to be scroll over the marquee.left, right, top, bottom or middle.
bgcolor : Sets the background color of the marquee.rgb(x,x,x), #xxxxxx or colorname
height : Sets the height of the marquee area.pixels or %
width : Sets the width of the marquee area.pixels or %
direction : Sets the direction from where the text will start scrolling.left, right, up or down.
scrollamount : How many pixels the text should moves between 'frames' is set here.pixels
scrolldelay : Smoothness of scrolling can be achieve by setting this attribute. This sets the amount of time, in milliseconds, between 'frames'.milliseconds

Creating list



Creating list
Listing can be done in two ways :
  1. Order listing &
  2. Unorder listing.

Order listing
<ol> :

This tag format list in order list. An ordered list starts with the <ol> tag an item in a list starts with the <li> tag.
This tag have following attributes:
AttributesDescriptionValues
start : User can change start value of listing by spacifying particular number.number
type : Type of listing can be specified here.A, a, I, i or 1.
value : Sequence of order can be change by setting this attribute value.number or alphabate
compact :Specifies that the list should render smaller than normal.compact
Eg.

<ol type="a" >
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>

Output :
  1. Mango
  2. Apple
  3. Banana
Another example with with changed start value and sequence:

<ol type="1" start="5" compact="compact">
<li>Mango</li>
<li>Apple</li>
<li value="11">Banana</li>
<li>Guava</li>
<li>Orange</li>
</ol>

Output :
  1. Mango
  2. Apple
  3. Banana
  4. Guava
  5. Orange
* Note start valu of list is 5 and inbetween sequence number is changed to 11.

Unorder listing
<ul>:

Unorder list refers to the collection of related items that have no specific order sequence.
Attributes of this tags are:
AttributesDescriptionValues
type :Set the type of list to appear.bullets, disc, circle or square.
compact :Specifies that the list should render smaller than normal.compact
Eg.

<ul type="suare" >
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ul>

Output :
  • Mango
  • Apple
  • Banana

<li> :
This tag defines an item in the list.
This tag is used in both <ol> and <ul> to define a list.
Attributes used with this tag are:
AttributesDescriptionValues
type :Set the type of list to appear.A, a, I, i, 1, bullets, disc, circle or square.
value : Sequence of order can be change by setting this attribute value.number or alphabate

Character entities



Character entities

User can not directly display HTML tag or other special symbols which have specific meaning in HTML on the web page or document. HTML provide such facility by using special keywords called character entity.
Character entity starts with ampersand ,followed by the name & ends with semicolon.
These special characters are displayed with the help of these character entity or thier entity numbers.
The most used character entities are:
Character Description HTML Entity Entity Number
  non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Creating Hyperlink



Hyperlinks
Hyperlink refers to the text that is linked to other web page. Hyperlink may provide link to any resource on the web including HTML page, an image, a sound file, a movie, etc.

<a> :
To create hyperlinks <a> is used.
The value of href attribute should be the URL where the linked page is located.
For eg.,

<a href="http://prog101.blogspot.com">PROG101</a>
<a href="http://prog101.blogspot.com" name="mylink1">PROG101</a>

Output :
PROG101
MYLINK

When this code is executed the text between <a> & </a>(PROG101) becomes a hyperlink & when user clicks on its, he gets desired web page.
<a> tag can be used with name attribute to mark specific hyperlink.
It has the following attributes:
Attributes DescriptionValue
href : URL of the page where the desired page is located. URL
name : This attribute is used for linking within the same page.link_name
target: Value for this attribute can be name of the frame where web page will open after click or values can be of the following type:
_blank - the target URL will open in a new window ,
_self - the target URL will open in the same frame as it was clicked,
_parent - the target URL will open in the parent frameset,
_top - the target URL will open in the full body of the window.
framename, _blank, _parent, _self, _top
shape :Specifies the shape of a linkdefault, rect, circle, poly
coords :Specifies the coordinates of a linkcoordinates

Linking within same page

See the following eg. that jumps over the above link we have created. Just click following Link.

<a href="#mylink1">Jumps to MYLINK</a>

Output :
Jumps to MYLINK

Adding images



Adding images to your web page
HTML let you display images in web page by using <img> tag. <img> tag doesn't have closing tag.

<img> tag :
Images can be inserted in web page by using <img> tag.
To display an image on a page, you need to use the src attribute. Src stands for 'source'. The value of the src attribute is the URL of the image you want to display on your page.
Following are the attributes of <img> tag:
Attributes DescriptionValues
align : Controls alignment of the image.top, bottom, middle, left, right
border : Sets the size of the border to be placed around the image. pixels
src : This is the main attribute of <img> tag.It contains URL of the image where image is located.URL
width : Controls width of the image.pixels, %
height : Sets height of the image.pixels, %
hspace : It indicates amount of space to be left at the left & right of the image.pixels
vspace : It indicates amount of space to be left at the top & bottom of the image.pixels
alt : It displays text when image fails to appear in the browser or when mouse pause over that image.text

The following eg. shows the use of <img> tag:

<img src="http://developthecode.googlepages.com/flower11.jpg">

Output :


Image as hyperlink
Image can be act as hyperlink in the following way:

<a href="prog101.blogspot.com"><img src="img src="http://developthecode.googlepages.com/flower22.jpg""></a>

Output :


Adding Table



Adding table's in your documents
<table> :
This tag defines a table within a body of the document. A table is divided into rows an columns. <tr> tag is used to define a row in table and <th> or <td> tag defines a column. The <table> tag may contains other tags which are always written in between <table> & </table> tags.
Attributes of this tag are listed below:
Attributes DescriptionValues
align : Sets the horizontal alignment of the table. left, center or right
bgcolor : Sets the background color for a tablergb(x,x,x), #xxxxxx or colorname
border : Sets the size of border to be displayed around the table.pixels
cellpading: It sets the distance between the data in the cell &cells boundaries.pixels
cellspacing: Sets the distance between two adjacent cells.pixels
width : Sets the width of the table to specific number of p
ixels or percentage of available screen.
pixels, %

Other tags used within a <table> tag are :
<tr> :
This tag defines rows in a table. This tag ends with </tr> tag. A single row may contain multiple cells. A <tr> tag contains one or more <th> or <td> tags.
Attributes of <tr> tag are:
Attributes DescriptionValues
align : Sets the horizontal alignment of the cell content.right, left, center or justify
valign : Sets hte vertical alignment the cell content.top, baseline, center or bottom
bgcolor : Sets the background color for a tablergb(x,x,x), #xxxxxx or colorname

<th> & <td> :
These tags are used to create table cells. The only difference between these tags is <th> tag gives heading to each column in table. Anything between <th> & </th> tag get displayed in boldface's. Whereas <td> tag displays normal text.

Attributes:
Attributes DescriptionValues
align : Sets the horizontal alignment of the cell content.right, left, center or justify
bgcolor : Sets the background color for a tablergb(x,x,x), #xxxxxx or colorname
valign : Sets hte vertical alignment the cell content.top, baseline, center or bottom
width : Sets the width of the individual cell to specific number of pixels or percentage of available table.pixels, %
height : Sets hte height of the cell.pixels, %
colspan : Set to number of columns to be merge together.number
rowspan : Set to number of rows to be merge together.number

<caption> :
This tag is used to explain table contents & appears as table heading to top or bottom of the table. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table.
Attribute:
Attributes DescriptionValues
align : Sets the alignment of the caption.right, left, top or bottom

Following code will generate a table, lets have a look:

<table bgcolor="#303030;" align="right" cellpading="2" cellspacing="2" >
<caption align="top">Fruits and their Color</caption>
<tr><th>Fruit</th><th>Color</th></tr>
<tr><td>Mango</td><td>Yellow</td></tr>
<tr><td>Apple</td><td>Red</td></tr>
</table>

Output :
Fruits and their Color
FruitColor
MangoYellow
AppleRed

Another eg. to illustrate the use of colspan and rowspan attributes:

<table bgcolor="#303030;" align="center" cellpading="2" cellspacing="2" >
<tr><td>AAA</td><td>BBB</td></tr>
<tr><td colspan="2">CCC</td></tr>
<tr><td>DDD</td><td rowspan="2">EEE</td></tr>
<tr><td>FFF</td></tr>
</table >

Output :
AAABBB
CCC
DDDEEE
FFF

Frames in web page


Frames in web page
The screen or web page can be divided into two or more regions by using <frameset> tag.
Each unique region is called frame and can display HTML page.
<frameset> tag :
HTML page can be divided into several regions by using <frameset> & </frameset> tag.
The screen can be divided into rows & columns by using the following attributes:
Attributes DescriptionValues
rows : This attribute divides screen into multiple horizontal rows. Value for this attribute can be percentage of the screen resolution or size in pixels or '*' indicating the remaining space of the available screen resolution.pixels, %, *
cols : This attribute divides screen into multiple vertical columns.Value for this attribute can be percentage of the screen resolution or size in pixels or '*' indicating the remaining space of the available screen resolution.pixels, %, *

<frame> tag :
Once the screen is divided into regions each region can be fill with web page by using this tag. This tag can be used in between <frameset> & </frameset> tag. This tag don't have closing tag.
The <frame> tag provides following attributes:




Attributes DescriptionValues
src : Sets the URL of the page to be loaded. URL
marginheight : Sets the amount of white space at the top & bottom of the frame.pixels
marginwidth : Specifies the amount of white space at the right & left of the frame.pixels
name : Sets the unique name for the frame so that the other documents or web pages can target this frame by using <a> tag with its target attribute.name
noresize : Disables the frames resizing capability.noresize
scrolling : Controls the appearance of the horizontal & vertical scroll bars in a frame.yes, no, auto

<iframe> tag :
This tag defines a rectangular region in a document in which browser displays separate web page including scroll bars & borders.
<iframe> tag provides following attributes:
Attributes DescriptionValues
align : Sets the alignment of an iframe. left, middle, right, top or bottom
src : The URL of the frame to be appear in region.URL
name : Sets the name for frame so it can be targeted.name
frameborder : Sets the border around the frame.1 or 0
scrolling : Controls the appearance of scroll bars.yes, no, auto
height : Sets the height for frame in pixels.pixels,%
width : Sets the width for frame in pixels. pixels, %

Now let's see these tags with the eg.,

<html>
<frameset rows="25%,*">
<frame src="http://prog101.blogspot.com" />
<frameset rows="50%,50%">
<frame src="http://prog101-html.blogspot.com" />
<frame src="http://prog101-html.blogspot.com/2007/03/getting-started-where-to-write-code.html" />
</frameset>
</frameset>
</html>


Inserting iframe into your document :

<iframe src ="http://prog101.blogspot.com" width="100%" height="300">
</iframe>

Output :



Image mapping



Image mapping :
Image mapping refers to the single graphic that can be used for multiple links.
There are two ways for image mapping :
1.Server sided mapping
Which requires browser to work with server to interpret your image map.

2.Client side mapping
The browser can map interpret mapped data without depending on server to do so.The <map> & <area> tags are used for client side image mapping.

The syntax for image mapping is :

<img src=http://prog101.blogspot.com/xyz.jpg usemap=map_name >
<map name=name_for_map >
<area shape=shape coords=coordinates_for_shape href=URL_of_web_page>
</area>
</map>


<map> tag :
This tag is used to define a client-side image-map.
The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
Further more the map element contains a number of area elements, that defines the clickable areas in the image map.

Attribute:
Attributes DescriptionValues
name :Defines unique name for map to be used with <img> tag.mapname

<area> tag :
This tag defines the geometric regions of client side image map & the associated link. This tag is responsible for dividing image into parts.
Following are the attributes for this tag:
Attributes DescriptionValues
alt : Provides textual information to visitors. text
coords : Defines coordinates within an image map that define image map area.coordinates
href : URL of the web page when user clicked particular image map area.URL
shape : Specifies type of shape used to represent the map area. The values can be
rectangle :For this coords is set to four integer numbers.
circle :For this coords is set to three integer numbers.
poly :For this coords is set to six integer numbers.
default, rect, circle, poly
target : Name of the frame where the web page will open after clicking the image map area._blank, _parent, _self, _top

Here is an eg. of client-side image mapping:

<img src="http://developthecode.googlepages.com/flower11.jpg"
width="145" height="126"
usemap="#flower">
<map id="flower" name="flower">
<area shape="rect" coords="0,0,82,126" alt="Rectangle" href="http://prog101.blogspot.com">
<area shape="circle" coords="90,58,3" alt="Circle" href="http://prog101.blogspot.com/">
</map>

Output :


Rectangle
Circle


Creating a form



Creating a form :
Form is the way to collect information from user by giving inputs.
Form may contains text boxes, clickable buttons , multiple choice check boxes, pull down menu'es & image maps.
A web page can have more than one form & other body content can also be put on same page.

<form> tag :
To insert a form in web page <form> & </form> tags are used.
This tag have following attributes:
Attributes DescriptionValues
action : Gives the URL of the application that is to receive & process the forms data. URL
method : Sets the method by which browser sends the forms data to the server for processing.Value for this attribute can be
get :Web browser submits the form.
post:The web browser sends the forms data separately from the URL as a stream of bits.
get or post
target : Where to open the result form to another window or frame. _blank, _self, _parent, _top, framename

<input> tag :
The <input> tag is used for managing the inputs from the user.
It provides following attributes:
Attributes DescriptionValues
align : Sets the the alignment of an image input.left, right, top, middle, bottom
alt : Sets the an alternate text for an image input.text
checked : Used for an input element to be preselected when the page loads (for type="checkbox" or type="radio")checked
disabled : Used for an input element to be disabled when the page loads.disabled
size : Sets the width of the input control in pixels.number
maxlength : Sets the maximum numbers of input characters allowed in input control.number
readonly : Used when an input field should be read-only (for type="text" or type="password")readonly
src : The location of the image that can be used for graphical buttons.URL
name : It is used to give name for each name field. Name can be in string & symbols & underscore(_) can also be used herewith.name
type : Here you can select type of input field. button, checkbox, file, hidden, image, password, radio, reset, submit, text

<textarea> tag :
This tag creates text multi-line input area in a form.
Attributes:
AttributesDescriptionValues
name : Sets label for text input area.name_of_textarea
rows : Set the number of lines to be in the textarea.number
cols : Sets number of characters to be inserted in horizontal line.number
disabled : Sets a text-area to be disabled.disabled
readonly : Sets a text-area to be readonly.readonly

<label> tag :
This tag defines a label for an input element. It toggles the control.
Attributes:
AttributesDescriptionValues
for : Sets which form element a label should bound with.element_id

<select> tag :
This tag is use for creating drop-down menu or text list menu, depending upon the attribute selection. <option> tag inside an <select> element defines a list items.
Attributes of this tag are:
Attributes DescriptionValues
disabled : It disables the drop-down list.disabled
multiple : It specifies that multiple items can be selected at a time.multiple
name : Defines a unique name for the drop-down list.unique_name
size : Defines the number of visible items in the drop-down list.number

<optgroup> tag :
<optgroup> tag is used to keep together related list-items. It is specially used when you have large number of option in a list.
Attributes:
Attributes DescriptionValues
label : Sets description of list items.text
disabled : Specifies that the option group should be disabled when it first loads.disabled

<option> tag :
This tag is written just after the <select> tag for creating individual list item within the menu.
Attributes of <option> tag are:
Attributes DescriptionValues
disabled : Specifies that the option should be disabled when it first loads.disabled
label : Defines a label to use when using .text
selected : Specifies that the option should appear selected (will be displayed first in the list).selected
value : Defines the value of the option to be sent to the server.text

<button> tag :
<button> tag is used to create button in the form.

This tag have following attributes:
Attributes DescriptionValues
disabled : Specifies that the buuton should be disabled when it first loads.disabled
name : Specifies the name for a button.text
type : Specifies the name for a button.button, reset, submit
value : Specifies the text that goes on button.text

Now let's see the eg. shocasing usage of above tags:

<form>
First name:<input type="text" name="firstname">
Last name:<input type="text" name="lastname">
Password:<input type="password" name="lastname">
More about you: <textarea rows="3" cols="25">This is default text.</textarea>
Select your gender: <input type="radio" name="gender" value="male"><label for="male">Male</label><input type="radio" name="gender" value="female"> <label for="female">Female</label>
Select sports you like:
<input type="checkbox" name="sport" value="Tennis">
<input type="checkbox" name="sport" value="Cricket">
<input type="checkbox" name="sport" value="Football">
Select from the list:
<select>
<option>Tea</option>
<option>Coffee</option>
<option>Soft drink</option>
<option>None</option>
</select>
<input type="reset" value="Reset"> <input type="submit" value="Submit">
</form>

Output :
First name:

Last name :

Password :

More about you:

Select your gender:
Select sports you like:
Tennis
Cricket
Football
Select from the list:




Adding video


<embed> tag :
The <embed> tag can be used if you want the video to appear on the web page.
This tag also work with audio as well as audio & video both together.
It has following attributes:
Attributes DescriptionValues
height : Set the height of the window for video to be appear. pixels
width : Sets the width of the window in pixels or percentage of available screen resolution.pixels
name : Provides label for embedded object.text
pluginspace : Tells the browser where to find the plugin if it is not installed on the client computer.URL
src : URL of the data object.URL
controller : Specifies whether you want the media controller bar to be shown or not. true or false
autoplay : Sets whether the media element should start automatically or not. true or false
loop : Allows you to have the movie play continuously.
true-plays forever from start to end
false-pays once
palindrome-plays forever forwards and backwards
true, false or palindrome
playeveryframe : Sets whether to play all of the frames of the movie or not. Setting true causes the movie to play slower. true or false

Now let see the eg.

<embed src="http://www.youtube.com/v/RduBGc7Aafk&hl=en&fs=1" height="200" width="300" pluginspace="http://www.macromedia.com/go/getflashplayer" controller="true" autoplay="true" loop="true" >
</embed>

Output :



<bgsound > tag :
This tag can be used to play an audio in the background.
This tag work finely in Internet Explorer only.
This tag plays an audio file when HTML documents or web page is first downloaded .
It takes following attributes :
Attributes DescriptionValues
src : The URL of the audio file where it is located . URL
loop : Sets the numbers of times for which the soundtrack is repeated once it is loaded. For continuous playing, set it to '-1'.number
balance : Sets the stereo balance when the sound file is played. It accepts values between '-10000' and '10000'.number
volume : Set the volume at which the sound file will play. It accepts values between '-10000' and '0'.number

<bgsound src="some_file.midi" loop="2" balance="0">
</bgsound >


<meta> tag



<meta> tag :
This tag provides additional information about web page. This tag belongs to document header & has no contents in between <meta> & <meta> tag. Metadata is data or information about data. Meta tag is typically used to specify page description, keywords, author of the document, last modified, and other metadata. This tag don't have closing tag.
It has following attributes:
Attributes DescriptionValues
name : Identifies the name with meta information. author, description, keywords, generator, revised
content : Provides the contents of meta information.text
scheme : Defines a format to be used to interpret the value of the content attribute.Gives the user agents more context for interpreting the information in the content attribute. format/URL

<head>
<meta name="description" content="Learn HTML programming" />
<meta name="keywords" content="HTML,tag,meta tag" />
<meta name="author" content="Ramesh" />"
</head>


<applet> tag :
This tag is used to download & execute an applet. An applets are developed with Java Programming Language & are mini programs the manages web page contents.
Browsers that do not supports Java ignores anything between <applet> & </applet> tag.
It takes following attributes:
Attributes DescriptionValues
align : Specifies the horizontal alignment of applet displayed.left, right, top, bottom, middle, baseline
alt : Displays the textual description of an applet.text
code : Specifies the location of the Java byte code file on the server.URL
codebase : Specifies folder location of all necessary class files on the web server.URL
height : Sets the height of the applet window.pixels
hspace : Specifies the amount of blank space at left & right of the applet window.pixels
name : Labels the applet to identify it.name
title : Sets the label assigned to tag.text
vspace : Sets the amount of space to the top & bottom of applet object.pixels
width : Sets the width of an applet. pixels

<param> tag :
This tag is paced after the <applet> tag. This tag provides parameter for applets within the <applet> tag.
It has no contents & end tag.
Attributes used with this tag are:
Attributes DescriptionValues
name : Name of the parameter passed to the embedded object.name
value : Specifies value for the parameter.value

 
Home

Copyright © 2009 Programming |Designed by Templatemo |Converted to blogger by BloggerThemes.Net | Reviewed by Blogger Templates