HTML - Hyperlinks, Multimedia

Hyperlinks
Multimedia

Hyperlinks

Introduction

So lets start with the hyperlinks or the just call them "links". Ok you just think for a minute that what may be the meaning of the links in your point of view. Yes again you are going in the right direction. Links means "connection between the two things" might it be any thing. Be two Persons, Roads, or two computers. And the links provide the facility or path between two things through which we can go from one to another.

In the same way the links can be provided between the two web pages, to go directly from one page to the another page. Such type of links are called as the Hyperlinks. This technique of linking one pages with other is called as the Hyperlinking.

Hyperlinking between two html pages:

We can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

Hyperlinks

So lets start with the hyperlinks or the just call them "links". Links means "connection between the two things" might it be any thing. Be two Persons, Roads or two computers. And the links provide the facility or path between two things through which we can go from one to another.

linking between two html pages

linking on same page

As you see in the above diagram if the user first click on the Page1.php then user automatically jumps to the Page2.php and vice-versa. Because the links on the both pages have been provided just the user have to click on those links. We can point to any resource on the Web: an HTML page, an image, a sound file, a movie etc.

Tags Used in the Hyperlinks

Tag	Description
<a>	Defines an anchor

You see there is only one tag in the Table i.e. <a> tag, it is called as anchor tag. This tag is used to link the documents in the Html and it is quite simple.

The <a> Anchor Tag and its Attributes:

<a>Attributes	Description
href	specifies the address or path (of any file) to which we want to jump.
target	specifies where the linked document will be opened.
name	specifies the name of the anchor.

Types of linking

1) Open a link in the same browser window

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web:
an HTML page, an image, a sound file, a movie, etc.

Different attributes of the <a> tag are href, name, target.
So lets see some practical on <a> tag and its attributes.

If you want to open the new hyperlinked page in the same window then do not write the "target" attribute in the <a> tag.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a> OR <a href="url" >Text to be displayed</a>

Example:

<a href="http://www.mkdtutorials.com"> Visit www.mkdtutorials.com </a>
<a href="c:\abc.html" > Visit abc.html </a>

Note:

You can write the path in both ways in HTML

<a href="c:\abc\abc.html" > Visit www.mkdtutorials.com </a> or
<a href="c:/abc/abc.html" > Visit abc.html </a>

The <a> tag is used to create an anchor to link from, in href attribute we provide the address or path of the web page (any file) to which we want to link (jump, open) and the words between the open and close of the anchor tag will be displayed as a hyperlink text.

Remember the file you want to open on an hyperlink should exist on the location you provided in the href attribute of the <a> tag.

The above Example will display the text in a browser:

Visit www.mkmovietrailer.blogspot.com

And now click on above text you will get linked to website of mkmovietrailer.blogspot.com. And the Website of mkmovietrailer.blogspot.com gets opened in the same window. In this way a hyperlinking to jump to another page is done.

2) Open a link in a new browser window

HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie etc.

Different attributes of the <a> tag are href, name, target. so lets see some practical on <a> tag and its attributes.

The syntax of creating an anchor:

<a href="url"> Text to be displayed </a> OR <a href="url" target="_blank "> Text to be displayed </a>

Example:

<a href="http://www.mkdtutorials.com"> Visit www.mkdtutorials.com </a>
<a href="c:\abc.html" target="_blank "> Visit abc.html </a>

Note:

You can write the path in both ways in HTML

<a href="c:\abc\abc.html" target="_blank "> Visit www.mkdtutorials.com </a> or
<a href="c:/abc/abc.html" target="_blank "> Visit abc.html </a>

Remember the file you want to open on an hyperlink should exist on the location you provided in the href attribute of the <a> tag.

The above Example will display the text in a browser:

Visit www.mkmovietrailer.blogspot.com

And now click on above text you will get linked to website of mkmovietrailer.blogspot.com. And the Website of mkmovietrailer.blogspot.com gets opened in the new window. In this way a hyperlinking to jump to another page is done.

Target Attribute

With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.mkmovietrailer.blogspot.com/" target="_blank"> Visit www.mkmovietrailer.blogspot.com </a>

3) Link to a location on the same page The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

So the first write this named anchor on the section of the page to which you want to get link.

surround the text "Hyperlink" by a named tag as shown below:

Syntax of a named anchor:

<a name="label">Text (to which you want to link)</a>

Example:

<a name="intro"> Hyperlinks </a> for e.g. Write this line instead of the Hyperlink at the top of page

In this way the the named anchor is defined on the same document in which Hyperlink section of this page is linked. The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
To link directly to the named anchor "intro" section, if from the end of the page you want to go to the Hyperlink introduction, then include the following line at the end of page in body section.

Add a # sign and the name of the anchor to the end of a URL, like this:

<a href="#intro"> Hyperlinks Introduction (text you like) </a>

In this we use the href attribute of the <a> tag to link to named anchor "#intro" and which automatically jumps to the top of the page where it was defined.

Example:

Iif you want to link to the tips section of basic.html page of xyz.com then the formate will be:

<a href="http://www.xyz.com/basic.html#tips"> Jump to the Useful Tips Section </a>

only the thing is that the basic.html page tips section should have a named anchor as

so now you have done a lot in the links now you saw how simple hyperlinks are.

So now lets do some Practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

<html>
<head>
<title>Links</title>
</head>
<body>

Open a link in a new browser window
(using href & target attribute of the tag).
 
 
click here to go
<a href="http://www.mkdtutorials.com">
www.mkdtutorials.com.</a> 
 
click here to go
<a href="hyperlinks.html">hyperlinks.html.</a>

Link to a location on the same page

 
 
go to<a href="#lesson11">
Lesson11</a> 
go to <a href="#lesson10">Lesson10</a> 
go to
<a href="#lesson8">Lesson8</a> Lesson1 
 
Lesson 2 
 
Lesson 3 
 
Lesson 4 
 
Lesson 5 
 
Lesson 6 
 
Lesson 7 
 

<a name="lesson8" >Lesson 8</a> 
 
Lesson 9 
 
<a name="lesson10" > Lesson 10</a> 
 
<a name="lesson11" >Lesson 11</a> 

</body>
</html>

Your above web page in the web browser looks like:

How to Hyperlink an Image

To hyperlink an image first we have to insert the image on the web page. So question is how to insert the image on the web page. In html the image can be inserted using the <img> tag. <img> tag has the attributes like width, height and src, which specifies the height and width of the image that is to displayed on the web page and scr has the value of the path where the image is stored. <img> tag does not have the end tag. so now use the <img> tag.

<img> tag

Format:

Example:

The example inserts the image "logo_in.gif" with the height of 200 pixel and width of 200 pixel. By using this tag you can insert the image in your html file, now if you want to create this image the hyperlink then follow the steps:

How to make the image as Hyperlink

Format:

Example:

To make an image as hyperlink just enter the <img> tag between the <a> anchor tag. And it will get Hyperlinked.

So now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

<html>
<head>
<title>Links</title>
</head>
<body>
 Here the image is hyperliked.
<a href="list_tags.php">
<img src="img/logo_in.gif" width="200" height="100"></a>
</body>
</html>

Page in browser will Look Like:

So now you have seen how the Images are inserted in the HTML pages and how these inserted images are made as hyperlinks to any other HTML page.

Multimedia

Introduction

In multimedia, you will learn how to provide the songs, video and picture (images) in your web page. How it will feel to you that whenever you open your web page it starts singing, playing movie, or display your family picture.

You can learn all of these things very easily. Just go on reading the Chapter and learn the Magic of the multimedia elements.

Working with Images

In this section you will learn about "how the images can be used in HTML".

1. How you can create a page with image as background.

2. How you can make a picture as a hyperlink to another file (any type of file).

How to Hyperlink an Image

<img> tag does not have the end tag.

So now use the <img> tag.

Format of <img> tag :

Example:

<img src="img\logo_in.gif" width="200" height="200"> Remember the file & path of the file you provided in the src attribute of the any tag should be correct and must exist.

How to make the image as Hyperlink

Format:

Example:

To make an image as hyperlink just enter the <img> tag between the <a> anchor tag.

And it will get Hyperlinked. so now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Your above web page in the web browser looks like:

Format with Example	Page in browser will look like
<html> <body> <img border="0" src="http://www.freeimagehosting.net/newuploads/eqyzr.jpg" width="200" height="110"><br> <a href="http://www.mkmovietrailer.blogspot.com"> <img src="http://www.freeimagehosting.net/newuploads/eqyzr.jpg" width="200" height="110"></a> </body> </html>

In this example the first image is not the hyperlink. But the second image is the hyperlink to the "www.mkmovietrailer.blogspot.com" and this hyperlinking is done by using <a> anchor tag. This you will study in the hyperlinks chapter.

How to create the page with image as back ground

This you can learn in the first chapter also. Use the background="path_of_image_file" of the <body> tag and see what happens.

So now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Format with Example:

<html>
<head>
<title> multi </title>
</head>
<body background="img/LOGO_IN.GIF">
</body>
</html>

Page in browser will look like:

Working with the Video and Audio file Files

Now you can make the web page containing the video file or whenever you open your page a movie starts playing in it. All this can be done using the <bgsound>, <img> & <embed> tags. Only there are some extra attributes added for the playing the video files (movie).

These attributes are:

<bgsound> Tag

This tag is used to insert only audio files on the page. This tag does not provides the control on the audio file.

Format:

Attributes

Attribute	Value	Description
src	path of audio file	Defines the path of the audio file.
loop	positive integer	Defines the no. of times the file must be played.

So now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

<html>
<body>

starts on file open 
<bgsound src="music/border.wav" loop="5">
 
</body>
</html>

<img> Tag

<img> tag is used to insert the audio & Video files.

Format:

This will add the video file to your page.

How to add the audio files to your page

If you want to add the audio file then just replace the name of the video file with the other audio file name.

Example:

Attribute	Value	Description
dynsrc	path_of_movie_file	Defines the path of movie file.
start	fileopen, mouseover	Defines the instances on which movie starts playing.
loop	0 to n , infinite	Defines the no. of times movie should repeat.
width, height	pixels	Defines the height & width of movie window.
border	0 to n	Defines the width of border of movie window.

start

if you want that movie starts playing when page gets opened then use start="fileopen", if you want that it should open when mouse pointer moves over it then use start="mouseover".

Loop

If want to play the movie in repeating manner then use loop="infinite" or you can provide the value 0 to n.

if loop="0" then movie will play only one time.

So lets see an example so will get more clear.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

Page in browser will look like:

<embed> tag

This tag is also used to insert the Audio & Video file on the web pages.

Format:

Attributes

Attribute	Value	Description
dynsrc	path_of_movie_file	Defines the path of movie file.
autostart	true, false	Defines the instances on which movie starts playing. true- the file starts playing automatically on page open false- the do not starts playing on page open.
loop	true false positive integer	Defines the no. of times movie should repeat. true- file will play for infinite loop. false-file will play only once 0 to n positive integer will play file for value of n times.
width, height	pixels	Defines the height & width of movie window.
hidden	true false	Defines the controls to be hidden or not.true-- control gets hidden.
controls	consol, smallconsol, playbutton,pausebutton, stopbutton, volumelever	Defines the types of controls the user wants on the page to control the file.

So now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

<html>
<body>

starts on file open 
<embed src="path of sound file" align="top" autostart="true" controls="consol"height="10" width="10" Hidden="true" loop="true"> 
</body>
</html>

By using the <embed> tag use can play both type of files (audio & video), just you have to provide the path of the file in the src attribute.

« Previous Next Chapter »

SHARE THIS PAGE

HTML - Hyperlinks, Multimedia

0 Comments:

Post a Comment