---

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

---

<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	Description	Values
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	Description	Values
name :	Name of the parameter passed to the embedded object.	name
value :	Specifies value for the parameter.	value

---

---

<video> tag

The <video> tag can be used if you want the video to appear on the web page.
The controls attribute let you add video controls, like play, pause, and volume.
The <source> tag associated with this tag let you specify alternative video formats. Browser will play the video file which is been recognized firstly among the formats specified. .mp4 is the most commonly recognized video format by the several browsers.
It has following attributes:

Attributes	Description	Values
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
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
controls:	Specifies whether you want the media controller bar to be shown or not.	true or false

The <source> tag has following attributes:

Attributes	Description	Values
src :	URL of the video file.	URL
type :	file format of the video file.	Video/mp4, Video/WebM, Video/ogg

---

Now let see the eg.

Output:

---

<audio > tag

This tag can be used to play an audio in the HTML file.
The controls attribute let you add audio controls, like play, pause, and volume.
The <source> tag associated with this tag let you specify alternative audio formats. Browser will play the audio file which is been recognized firstly among the formats specified. .mp3 is the most commonly recognized audio format by the several browsers.
It takes following attributes :

Attributes	Description	Values
name :	Provides label for embedded object.	text
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
controls:	Specifies whether you want the media controller bar to be shown or not.	true or false

---

---

---

Creating a form

Form is the way to collect information from user by giving inputs.
Form may contain text boxes, clickable buttons , multiple choice check boxes, pull down menues & 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	Description	Values
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	Description	Values
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, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
value :	Defines the value of the option to be sent to the server.	text

---

<textarea> tag

This tag creates text multi-line input area in a form.
Attributes:

Attributes	Description	Values
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:

Attributes	Description	Values
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	Description	Values
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	Description	Values
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	Description	Values
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	Description	Values
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. showcasing usage of above tags:

Output:

---

---

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 :

---

<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	Description	Values
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	Description	Values
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:

Output :

---

---

Adding tables in your documents

<table>:

The <table> tag defines a table within a body of the document. A table is divided into rows and columns. <tr> tag is used to define a row in the 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	Description	Values
align :	Sets the horizontal alignment of the table.	left, center or right
bgcolor :	Sets the background color for a table	rgb(x,x,x), #xxxxxx or colorname
border :	Sets the size of border to be displayed around the table.	pixels
cellpadding:	cellpadding sets the distance between the data in the cell &cells boundaries.	pixels eg. cellpadding=10px
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>:

The <tr> 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	Description	Values
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 table	rgb(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	Description	Values
align :	Sets the horizontal alignment of the cell content.	right, left, center or justify
bgcolor :	Sets the background color for a table	rgb(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	Description	Values
align :	Sets the alignment of the caption.	right, left, top or bottom

---

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

Output :

---

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

Output :

---

---

<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	Description	Values
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 this tags with the eg.,
Inserting iframe into your document :

Output :

---

---

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	Description	Values
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:

Output :

---

Image as hyperlink

Image can be act as hyperlink in the following way:

Output :

---

---

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

Listing in HTML 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:

Attributes	Description	Values
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.

Output :

Another example with with changed start value and sequence:

Output :

* Note start value of list is 5 and in-between 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:

Attributes	Description	Values
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.

Output :

---

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

Attributes	Description	Values
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

---

---

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

Output :

When this code is executed the text between <a> & </a>(Blogging Hacks) 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	Description	Value
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 link	default, rect, circle, poly
coords :	Specifies the coordinates of a link	coordinates

---

Linking within same page :

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

Output :

---

---

HTML Formatting tags :

There are several tags in HTML used to format the text, like , <strong>, <em>,etc. These formatting tags can make text bold, italic, sub/superscripted and more.

---

<p> tag :

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

Output:

Paragraph can be justified in four ways with alignment attribute in following way:

Attributes	Description	Values
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. :

Output:

---

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

---

---

Heading tags :

<h1> to <h6>:

H1 to H6 are heading tags, which are used to define different heading levels. These six tags can be used to define document heading.

<h1> defines highest heading level and displays text in the bigger font as compared to other heading tags. Similarly, <h6> defines the lowest heading level which displays text in a smaller font size as compared to the rest of the heading tags.

Eg.

---

Attributes for <h1> to <h6>:

Attributes	Description	Values
align:	Sets align of the heading.	left, right, center, justify

---

---

Adding comment:

To create description about html code & not to be display this description in the browser when visitor visits to the site, <!-- --> tag can be used.It is helpful while editing code.
<!--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,
Where following notation is wrong as per the HTML rules

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

---

---

First program

It's time to write our first HTML program. Follow below step-by-step process and create our first HTML page :

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

---

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

---

---

Mainly entire HTML document is divided into two parts: the head and the body. A new HTML page must have a declaration: . It tells browser that the following file is an HTML file. Basically four primary tags are used to build any webpage: , , is displayed on the title-bar. It has end tag

---

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. These are, Dreamweaver, FrontPage, EditPlus, etc.

The most likely used one is Dreamweaver.
It not only allows you to edit HTML, but provides support for editing other languages including, CSS, Javascript, VBScript, ASP, ColdFusion, PHP, ASP.NET, XML, XSLT and some other cool features.

While saving the HTML coding file give it .html or .htm extension.

---

Structure of a 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:

---