Monday, January 14, 2013

HTML Tutorial: How to Create a Link (All About Both Text and Image Links)

<a href="http://www.fairytips.blogspot.com">Fairytips</a> is a simple line to create a link. When you will type this line in your webpage then you will get a link like Fairytips. Here I have used <a></a> tag and href="value" attribute to create a link. You may also use the attribute target="value" and value=_blank/_parent/_self/_top. When you will use the attribute target="value" with the value _blank that means if you use <a href="http://www.fairytips.blogspot.com" target="_blank">Fairytips</a> then you will get a link like Fairytips. Thus you will get...

<a href="http://www.fairytips.blogspot.com" target="_blank">Fairytips</a>                       Fairytips
If you use the above codes and if you use the attribute target="_blank" then the linked document or page will open in a new tab or new window.

<a href="http://www.fairytips.blogspot.com" target="_parent">Fairytips</a>                      Fairytips
If you use the above codes and if you use the attribute target="_parent" then the linked document or page will open in the parent frame/page.

<a href="http://www.fairytips.blogspot.com" target="_self">Fairytips</a>                          Fairytips
If you use the above codes and if you use the attribute target="_self" then the linked document or page will open in the same frame.

<a href="http://www.fairytips.blogspot.com" target="_top">Fairytips</a>                          Fairytips
If you use the above codes and if you use the attribute target="_top" then the linked document or page will open in the full body of the window.

And if you use the attribute target="framename" then the linked page or document will show in a named frame.
Posted by at 2 comments:
Labels: ,

Thursday, January 10, 2013

HTML Tutorial: Lets's make a table and learn to customize fully

We will use three HTML Tags to create a table and we have to use these tags into the <body> and </body> tags. We will use the following tags, <table> <tr> and <td>. These three are the starting tags. So we must need to use the closing tags of them.
<table> and </table> to declare a table.
<tr> and </tr> tr means Table Row and we will use it to create a row.
<td> and </td> td means Table Data and we will use it to create a column and to show the data.

Make Your First Table Simply

Look at the table given below. There is two column and one row in the table. The table is placed at the center point and there is also border showing in the table.

HTML Tutorial CSS Tutorial

Now see the codes given below into the box. I have used the following codes to create the above table. Look, I have also used two attributes align="center" and border="1" with the tag <table>. The value of the attribute align may be left/right/center and the value of the border attribute may be any number. You have to use border="0" to hide the border.

 <table align="center" border="1"> 
<tr>
<td>HTML Tutorial</td>
<td>CSS Tutorial</td>
</tr>
</table>

Learn to Add More Rows and Columns

Now if you want to create a table of three columns and four rows then you have to use the following codes. Look I have just added <td>JavaScript Tutorial</td> into the above codes in <tr> and </tr> tag. And finally I have copied and later pasted the all of the <tr>...</tr> tags for more three times. Thus I have got more three rows.

 <table align="center" border="1"> 
<tr>
<td>HTML Tutorial</td>
<td>CSS Tutorial</td>
<td>JavaScript Tutorial</td>
</tr>

 <tr>
<td>HTML Tutorial</td>
<td>CSS Tutorial</td>
<td>JavaScript Tutorial</td>
</tr>

 <tr>
<td>HTML Tutorial</td>
<td>CSS Tutorial</td>
<td>JavaScript Tutorial</td>
</tr>

 <tr>
<td>HTML Tutorial</td>
<td>CSS Tutorial</td>
<td>JavaScript Tutorial</td>
</tr>
</table>

This is the result of the above codes. If you need more column then you have to add more <td>Your Text</td> tags. Thus if you need more rows then you have to add more <tr></tr> tags.

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
Website Designing
Graphics Designing
Programming
PHP Tutorial
Flash Tutorial
Dreamweaver Tutorial
ASP.NET Tutorial
My SQL Tutorial
Ajax Tutorial

Customize the Width and the Height of a Table and the Cells

You have already learned to create a table. Now we will see how to fix the width and the height of a table or of a cell. Look at the codes given bellow.

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

The above codes are very simple codes to create a table. Now we will learn to customize it. <table> is an Opening Tag to create a table and we can use some attributes to customize a table. For example, we may use the attribute align="value" to confirm the position of the table. We can use three values with the align attribute. The values are-left, right and center.
border="value" value=any number
align="value" value=left/center/right
width="value" value=any number or 100%, 80% etc
bgcolor="value" value=any color name or code

Posted by at No comments:
Labels: ,

Wednesday, January 9, 2013

HTML Tutorial: Unordered List (Complete Tutorial)

Unordered List

Sometimes we need to create Unordered List during creating a Web-page. There are three types of Unordered List- 1. Unordered List with Disc Sign, 2. Unordered List with Circle Sign and 3. Unordered List with Square Sign.

Unordered List with Disc Sign

  • www.fairytips.blogspot.com
  • www.dakbox.blogspot.com
  • www.awebsite2earn.blogspot.com
  • www.exclusive-latest-laptop.blogspot.com
  • www.snigdho-alo.blogspot.com
<ul>
<li>www.fairytips.blogspot.com</li>
<li>www.dakbox.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ul>

You may also use the following codes for the disc sign. Disc sign is default sign for <ul> tag. So you will always get a Disc Sign if you normally type <ul> tag. But you have to type <ul type="circle"> for Circle Sign and <ul type="square"> for Square Sign.

<ul type="disc">
<li>www.fairytips.blogspot.com</li>
<li>www.dakbox.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ul>

Unordered List with Circle Sign

  • www.fairytips.blogspot.com
  • www.dakbox.blogspot.com
  • www.awebsite2earn.blogspot.com
  • www.exclusive-latest-laptop.blogspot.com
  • www.snigdho-alo.blogspot.com
<ul type="circle">
<li>www.fairytips.blogspot.com</li>
<li>www.dakbox.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ul>

Unordered List with Square Sign

  • www.fairytips.blogspot.com
  • www.dakbox.blogspot.com
  • www.awebsite2earn.blogspot.com
  • www.exclusive-latest-laptop.blogspot.com
  • www.snigdho-alo.blogspot.com
<ul type="square">
<li>www.fairytips.blogspot.com</li>
<li>www.dakbox.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ul>

Posted by at No comments:
Labels: ,

Tuesday, January 8, 2013

HTML Tutorial: Complete Tutorial for Ordered List

We need to make list during designing a website. There are main two types of list, 1. Ordered List and 2. Unordered List... Here you will learn detail about Ordered List. You may create four types of Ordered List.
...Normal Ordered List (started with 1, 2, 3...)
...Ordered List Started with A, B, C...
...Ordered List Started with a, b, c...
...Ordered List Started with i, ii, iii...
Lets see how to do it!

01. Normal Ordered List

  1. www.dakbox.blogspot.com
  2. www.fairytips.blogspot.com
  3. www.awebsite2earn.blogspot.com
  4. www.exclusive-latest-laptop.blogspot.com
  5. www.snigdho-alo.blogspot.com
Codes I have used to make the above Ordered List
<ol>
<li>www.dakbox.blogspot.com</li>
<li>www.fairytips.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ol>

02. Ordered List Started with Capital A

  1. www.dakbox.blogspot.com
  2. www.fairytips.blogspot.com
  3. www.awebsite2earn.blogspot.com
  4. www.exclusive-latest-laptop.blogspot.com
  5. www.snigdho-alo.blogspot.com
Codes I have used to make the above Ordered List
<ol type="A">
<li>www.dakbox.blogspot.com</li>
<li>www.fairytips.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ol>

03. Ordered List Started with Small a

  1. www.dakbox.blogspot.com
  2. www.fairytips.blogspot.com
  3. www.awebsite2earn.blogspot.com
  4. www.exclusive-latest-laptop.blogspot.com
  5. www.snigdho-alo.blogspot.com
Codes I have used to make the above Ordered List
<ol type="a">
<li>www.dakbox.blogspot.com</li>
<li>www.fairytips.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ol>

04. Ordered List Started with Roman Number

  1. www.dakbox.blogspot.com
  2. www.fairytips.blogspot.com
  3. www.awebsite2earn.blogspot.com
  4. www.exclusive-latest-laptop.blogspot.com
  5. www.snigdho-alo.blogspot.com
Codes I have used to make the above Ordered List
<ol type="i">
<li>www.dakbox.blogspot.com</li>
<li>www.fairytips.blogspot.com</li>
<li>www.awebsite2earn.blogspot.com</li>
<li>www.exclusive-latest-laptop.blogspot.com</li>
<li>www.snigdho-alo.blogspot.com</li>
</ol>
Posted by at 2 comments:
Labels: ,
Subscribe to: Posts (Atom)

Contact Me

Name

Email *

Message *

All rights reserved to Uzzwal Dhali © 2009 -