HTML COURSE FOR EASY LEARNING

lesson-2

lesson-3

lesson-4

This course is developed for the online community who are willing to learn online in the leisure periods, the web designing course,and this is the first step in learning the web designing. Every one can easily learn this by sitting before their personal computers and practice themselves.ok wish you good luck.

lesson-7 LINKS,IMAGES AND SOUNDS

HYPERLINKS

The hyper links are the text or grafhic part that takes to another webpage or part of webpage when mouse is clicked on the link. The Links are written with the help of anchor tags and the anchor tags will look like as follows:-( (<a.....> ...</a> )
Example of a link.
Example:
A link to yahoo.com is written as follows:-
<a href=http://www.yahoo.com/>yahoo!</a> ---This links looks in webpage as -yahoo!!.
if you click on this link you will visit yahoo.com.
If you are just linking to a page in the same directory as your current page, you don't need the domain, Example: the 1.html is a webpage located in the same directory of the present webpage( the webpage right now you are reading) so you can use the code.
<a href="1.html">page1</a>.
this will give the link as page1..
( To test this click on page1 and your browser will open the webpage 1.html which is located in the same directory )
If you want a link to open in a new window, add target="_blank" to the end of the anchor tag, e.g. <a href="http://www.yahoo.com/" target="_blank">yahoo.com</a> this will be displayed as yahoo.com.. when you click on this link the yahoo.com website opens in a new window

Mail link:

To send an email a mailto:user@host link is used. This is called as mail link and when you click on the link it will open a mail form to send your mail to the specified email address in the link.

Example of a Mailto: Link... .
Send email to <a href=mailto:[email protected]>activewebworld</a>! This will be as follows-- Send email to activewebworld!.

Navigation within a document

The anchor links are useful to navigate easily within a document and to a certain area of some specified document. This is possible by two steps, first the part of the document to be visited is to be named and in the sencond step the link to be written with a target of reaching the named part of the document.To name the part of the document, go to the area you want to name, and place <a name="name_of_area">text</a>, then to call a link to that place from somewhere else in the document, use <a href="#name_of_area">text</a> Example:
In this example a cats chapter and a dogs chapter are presented and bother are named and if you are willing to go directly to dogs chapter without reading cats chapter you follow

Go To story 2(<a href="#story2">Go To story 2</a>)
Now study this cats chapter(<a name="story1">Now study this cats chapter</a>)

Mr.Robert is coming here
He saw a big cat is running on the road
He tried to catch it
But failed and next time He again tried
This time he succeeded
Unfortunately the cat bitten him seriously
Immediately he was rushed to Hospital by his kith and kin
The doctors advised him to take bed rest for three months
He was mentally and physically must disturbed
He lost all good opportunities in his life
Thus the cat has changed his destiny
So becareful of cats
Now study this dogs chapter(<a name="story2">Now study this dogs chapter</a>)
Go To story 1(<a href="#story1">Go To story 1</a>)

lmage as a link

If the displaying text between two anchor tags is replaced by an image tag then the image becomes a link. For example you take the following link <a href="1.html">page1</a> In this link if you replace the page1 with the image link <img src="fruit.jpg"> the fruit will become a link to page1.

<a href="http://www.yahoo.com"><img src="fruit.jpg" WIDTH=99 HEIGHT=101 ALT="image of a fruit"align=right></a>
this will be viewed as follows:- .
This fruit image is a link to yahoo.com if you click on this fruit image this will take you to the yahoo website.

Images

the Image is expressed with the following tag
<img src="image.ext" width=x height=x border=x alt="x"align=left/right>
Only the .gif and .jpg and.jpeg type of images are supported by html.(The IMG tag has no closing tag!) the following image is in the same directory of this webpage so we can just use the image name. fruit.jpg, as <img src="fruit.jpg"> Then add the appropriate height, width, and alt attributes. The alt attribute defines the alternative text to be displayed if image is not loaded.
Example of an image:
<img src="fruit.jpg" WIDTH=99 HEIGHT=101 ALT="image of a fruit">

Image alignment in a text

If the image is left aligned then the text after the image tag will be adjusted to the rightside of the image and if the image is aligned to right the text after the image tag will be adjusted to the left side of the image. If the align attribute is missed then the text after the image tag will not be adjusted. So it is necessary to define the alignment of the image.

<img src="fruit.jpg" WIDTH=99 HEIGHT=101 ALT="image of a fruit"> This is an image of a fruit the best for good health. If you write this code the image and text will look like as follows(note: here the align attribute is missed and look the above text is written after the image tag):-

This is an image of a fruit
the best for good health.

To start the text from the top of the image the align attribute is necessary, and follow the example:
<img src="fruit.jpg" WIDTH=99 HEIGHT=101 ALT="image of a fruit"align=ďż˝leftďż˝> This is an image of a fruit the best for good health. If you write this code the image and text will look like as follows:-

This is an image of a fruit
the best for good health

To avoid such problem the use of   is necessary. If you use this   tag then the text after the image will start after the image.(ie the text will not be adjusted by the side of the image) <img src="fruit.jpg" WIDTH=99 HEIGHT=101 ALT="image of a fruit"> This is an image of a fruit the best for good health. If you write this code the image and text will look like as follows:-

This is an image of a fruit
the best for good health,

Sounds

The <EMBED >tag is used to add sounds to webpages. This tag supports many common file formats... such as .wav, .mid, and .au. the structure of the tag is as follows
<embed src="filename.ext" width=x height=x autoplay=x hidden=x loop=x volume=x></embed>
If you want the file to automatically play when the web page is loaded, set autoplay=true, if you do not want the file to automatically start, set autoplay=false. If you want the control box to be hidden, use the hidden=true attribute. Normally the file will stop playing after it is completed the first time, so if you want it to start over once it is done use the attribute loop=true. You can set the volume setting with the volume attribute, a value from 1 to 100 (default is 50).
Example of the embed tag... <embed src="apari.mid" loop="true" autoplay="false" width="180" height="60"></embed>

In the above format the sound will play automatically when the autoplay is set as true but here it is set as false so the sound plays only when you click on play button.
The sound file can be shown as a link address and setting an image as a button for playing sound as follows:-
<A HREF="apari.mid">
<IMG SRC="cd.gif" BORDER=0 WIDTH=36 HEIGHT=28 ALT="sound button">
</A>
It works as follows:-

You click on the image to play sound
The sound files can be inserted in the following ways also. <BGSOUND SRC="soundfile.wav">
But in the above two methods the sound will play automatically.
Example:- open this linksound file inthis directory

end of LESSON-7

Hosted by www.Geocities.ws