Learn Complete HTML (English)

[Shaheen]

Re: Learn Complete HTML (English)

• How to create links to different pages in html?
  How to use a image as link?

Link: <a> </a>

Lets us consider you have two pages test.html and test1.html.
You want to give a link in test.html so that others can click on it and go to test1.html.
The tag used is "a" with attribute named "href"

Example Code:
<a href="test1.html"> Click to test1.html </a>
Result:
Click to test1.html
So the tag should be used as above.
The text in between the tag will be displayed on the page.
On clicking the text the user will be taken to the page defined in the attribute href

Link using Images:

Even images can be used for creating links.
Its simple.
Give the image in between the "a" tags.

Example Code:
<a href="test1.html"> <img src="./test.jpg"> </a>
Result:


You can see. Its so simple.
In the previous case we gave the text as link.
Now we have given image as a linking code.

[Shaheen]

Re: Learn Complete HTML (English)

• I want to create links that will open the pages in new window?

• How can I link to website (say google.com)?

Opening Link in New Page:

Many a times we want to open the links in new window.
It's simple.
Use the attribute "target=_blank" inside the tag "<a>".

Example Code:
<a href="test1.html" target="_blank"> Click to test1.html </a>
Result:
Click to test1.html

Click on the link to test. It will open the page in new window.
----------------------------------------------------------
Linking to a external website:

The tag is same as other, only thing is that we have to use "http://".
So to link to google.com we have to use "http://www.google.com".

Example Code:
<a href="http://www.google.com"> Google </a>
Result:
Google

This will take you to the website.

[Shaheen]

Re: Learn Complete HTML (English)

• I want to create links that can be used for mailing?
• How to create a mailto link?

HTML MAIL:

Its simple.
In the href attribute we have to use the text "mailto".
Format will be as "mailto:" then mailid.

Example Code:
<a href="mailto:Saahir@pegham.com"> Click to mail </a>

Result:
Click to mail



Link that goes no where:

You can create a link that will not go to any page when you click on it

Example Code:
<a href="#nogo"> Go No where </a>

Result:
Go No where

[Shaheen]

Re: Learn Complete HTML (English)

• How to make moving text in html?
  How the make vertical marquee ( upward scrolling text )?
  How to set color behind marquee text?

Marquee Tag: <marquee> </marquee>

If you want your text to move with in the screen, use this tag.
The tag used is "marquee"

Example Code:
<marquee> This text will move </marquee>
The text in between the tags will move horizontally.
Result:
This text will move

Marquee tag has so many attributes, we are going to see them one by one

Attribute: bgcolor This sets the background color for marquee path
Example Code:
<marquee bgcolor=orange> Moving Text </marquee>
Result: Moving Text

Attribute: height,width The attribute width sets the width of marquee area
The attribute height sets the height of marquee area
Example Code:
<marquee bgcolor=orange width=100 height=20> Moving Text </marquee>
Result:
Moving Text

Attribute: direction
This sets the background color for marquee path.
It takes values LEFT or RIGHT or UP or DOWN
Example Code:
<marquee bgcolor=orange width=100 height=20 direction=right> Text will Move </marquee>
Result with direction as RIGHT:
Text will Move
Result with direction as (vertical) UP:
Text will Move

[Shaheen]

Re: Learn Complete HTML (English)

• How to set the marquee scrolling speed?
• Marquee behavior!
• Make scrolling image?

Attribute: behavior
This sets the background color for marquee path.
It takes values SCROLL or SLIDE or ALTERNATE
Example Code:
<marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate> Moving Text</marquee>
Result:
Moving Text

Attribute: scrollamount
This controls the amount of movement (in pixels) between the successive displays that give the impression of animation.
Example Code:
<marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrollamount=5> Moving Text Tag </marquee>
Result with scrollamount as 5:
Moving Text Tag
Result with scrollamount as 50:
Moving Text Tag

Attribute: srolldelay
This controls the delay (in milliseconds) between the successive displays that give the impression of animation.
Example Code:
<marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrolldelay=5> Scrolling Text Tag </marquee>
Result with scroll delay as 5:
Scrolling Text Tag
Result with scroll delay as 500:
Scrolling Text Tag

Moving Image
Similarly image can be moved. Instead of text in between marquee tags give an image. It will scroll/move
Example Code:
<marquee width=100 height=20> <img src="./test.jpg"> </marquee>
Result: Scrolling Images

[Shaheen]

Re: Learn Complete HTML (English)

• How to make the text or word blink?

blink: <blink> </blink>

If you want blinking text, use this tag.
The tag used is "blink"

Example Code:
<blink> blinking text tag</blink>

Result:
blinking text tag

[Note: This may not work on few browsers]

[Shaheen]

Re: Learn Complete HTML (English)

• Creating html tables!

Table is most beautiful concept in html.
Now a days, most of the websites are created using table structure.
The concept of table is very simple, just rows and columns.
We will split the window in to so many number of rows and columns as required.


Table
This tag can not act alone. It needs "tr" and "td" tags with in it.
Example Code:
<table> </table>
As we know that table is a set of rows and columns, we introduce rows inside the table using <tr> </tr>. Also each row can have any number of columns. one to n..., so we introduce columns inside the rows using the tags <td> </td>

So putting things together we define a table with a row and column as follows

Code:
<table>
<tr>
<td> This is first column
</td>
</tr>
</table>
Result:
The result for above tag will be as This is first column


Now we will create a table with one row and two columns

Code:
<table>
<tr>
<td>
This is first column
</td>

<td>
This is second column
</td>
</tr>
</table>
Result:
The result for above tag will be as This is first column This is second column