<meta> tag in HTML


<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

  • Share

Adding audio and video in a web page


<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 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
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 DescriptionValues
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.
<video height="315" width="420" controls="true" autoplay="true" loop="true" > <source src="flower.mp4" type="video/mp4"> <source src="flower.ogg" type="video/ogg"> </video>
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 DescriptionValues
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

<audio controls loop="2" >
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio >

  • Share

Create user Form in HTML


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



  • Share

Image mapping - Creating multiple links on a single image


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:
AttributesDescriptionValues
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:
AttributesDescriptionValues
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 berectangle :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="https://sites.google.com/site/developthecode/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://www.blogging-hacks.com/">
<area shape="circle" coords="90,58,3" alt="Circle" href="http://www.blogging-hacks.com/">
</map>
Output :


Rectangle
Circle

  • Share

Creating table in HTML


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:
AttributesDescriptionValues
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:
AttributesDescriptionValues
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:
AttributesDescriptionValues
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:
AttributesDescriptionValues
align :Sets the alignment of the caption.right, left, top or bottom

Following code will generate a table, lets have a look:
<table align="right" cellpading="2" cellspacing="2" >
<caption align="top">Fruits and their Color</caption>
<tr><th>Fruit</th><th>Color</th></tr>
<tr bgcolor="yellow" ><td>Mango</td><td>Yellow</td></tr>
<tr bgcolor="red" ><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 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

  • Share

Adding IFrame in a web page


<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 this tags with the eg.,
Inserting iframe into your document :
<iframe src ="http://prog101.blogspot.com" width="100%" height="300">
</iframe>
Output :


  • Share

How to add images in a web page


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="https://3.bp.blogspot.com/-P5Y5UhTXJqc/WSsgqkK5LwI/AAAAAAAAFtw/4xQNWNZgLKgzhMY3zozWc4_2OsGWBnw_QCKgB/s320/P70507-190500.jpg">
Output :


Image as hyperlink
Image can be act as hyperlink in the following way:
<a href="http://blogging-hacks.blogspot.com/"> <img src="img src="https://3.bp.blogspot.com/-P5Y5UhTXJqc/WSsgqkK5LwI/AAAAAAAAFtw/4xQNWNZgLKgzhMY3zozWc4_2OsGWBnw_QCKgB/s320/P70507-190500.jpg"></a>
Output :


  • Share

Character entities used in HTML


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;

  • Share

Creating Ordered and Unordered list in HTML


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

  • Share

Creating Hyperlink in HTML


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://blogging-hacks.blogspot.com">Blogging Hacks</a>
<a href="http://blogging-hacks.blogspot.com" name="mylink1">MYLINK</a>
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 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 :

  • Share

Text formatting tags in HTML


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.

<strong> tag :

It causes anything between <strong> & </strong> to be rendered in boldfaces.

<em> tag :

It defines anything between <em> & </em> 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 typed in. It also preserves
line breaks and      blank spaces.
AttributesDescriptionValues
align :Sets align of the inner content.left, right, center, justify
width :It defines number of characters per line.number

<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

  • Share

Adding Paragraph in HTML


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

  • Share

<H1> to <H6> 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

  • Share

How to comment in HTML program


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

  • Share

First HTML program


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

  • Share

4 Basic tags in HTML


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: , , and <body>.<h4 style="text-align: left;"> Basic tags</h4> <div> <h5> <html> </h5> <p> As discussed earlier <html> & </html> tags contain entire web-page. This tag may contain <head>, <body>, <iframe>, etc. </p> <hr> <h5> <head> :</h5> <p> This tag is used to provide information for inner working of document. Document is nothing but your HTML page itself. </p> <p> It contain <title> tag, which defines document title and displayed in Title-bar of your web-browser.</p> <p> <head> defines document header. This tag end with </head> tag.</p> <p> It may contain other tags that define & manage document contents. Here are these tags <base>, <link>, <meta>, <style>, and <script>.</p> <p> <head> tag is placed just after the <html> tag & before <body> or <iframe> tag.</p> <p> Head tags and thier descriptions:</p> <table><tbody> <tr><th><p> Tag</p> </th><th><p> Description</p> </th></tr> <tr><td><p> <title></p> </td><td><p> It defines the document title.</p> </td></tr> <tr><td><p> <base></p> </td><td><p> Defines a base URL for all the links on a page.</p> </td></tr> <tr><td><p> <link></p> </td><td><p> Defines a resource reference.</p> </td></tr> <tr><td><p> <meta></p> </td><td><p> Defines meta information.</p> </td></tr> </tbody></table> <hr> <h5> <title> : </h5> <p> It defines document title. Anything entered between <title> & is displayed on the title-bar. It has end tag
.
:
It defines document body. It contains body content. It ends with .
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

  • Share

Getting started with HTML


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:
<!doctype html>
< head>
<title >title name</title>
</head>
< body>
Document body
</body>
</html>

  • Share

Follow by Email

My photo
Hi. I am Ramesh Wetkoli. Three things I try to include in my blog posts are creativity, useful insights, and trendy information. I.T. graduate and working professional. I have leveraged 6+ years of work experience in I.T. industry and learnt various technologies, providing merchandizing support and handling digital marketing responsibilities.

Find us on Facebook