Total Pageviews

Tuesday 5 March 2013

HTML IN SIMPLE STEPS
PART-III
LINKS, IMAGES & MULTIMEDIA


CREATING HYPERLINK:

EG: <a href="www.google.com">Google</a>

OUTPUT:

SETTING HYPERLINK COLORS:

HTML provides 3 attributes viz. link, vlink,alink which can be used inside the <body> tag.

link specifies the color of the hyperlink that has not been visited before on the web page.
vlink specifies the color of the hyperlink that has been visited before on a web page.
alink specifies the color of currently active links.

EG:
<body link="green" vlink="red" alink="blue">
<a href="www.google.com">Google</a>

NAVIGATE TO DIFFERENT PLACES IN THE SAME PAGE:

EG: 


<body link='green' vlink="red" alink="blue">
<a href="#BOTTOM">bottom</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<hr>
<a name="BOTTOM"><h1>this is the bottom!</h1></a>
</body>

INSERTING AN IMAGE:

Use <img> tag and src attribute to insert an image in the web page.

EG:

<body>
<img src="D:\full blossom.jpg"></img>
</body>

OUTPUT:









ALTERNATE TEXT FOR THE PICTURE:

Alternate text appears when the mouse pointer is placed on the picture. To add an alternate text, use alt attribute in <img> tag. Sometimes the inserted image doesnot appear in the browser due to path error. In such case, alternate text helps in identifying what the picture is. Alternate text feature is also used to give a short description about the image. 

EG:
<body>
<img src="D:\full blossom.jpg" alt="flower"></img>
</body>

GIVING BORDER AND ALIGNING TO THE IMAGE:

border attribute is used in <img> tag to give border to the image. align attribute is used to align the image on the browser screen. Values for align attribute can be "left", "right" or "center".

EG:

<body>
<img src="D:\full blossom.jpg" alt="flower" border=4 align="left"></img>
</body>

OUTPUT:












USING IMAGE AS A LINK:

Similar to text hyperlink, images can also be used to redirect to other pages.

EG:

<body>
<a href="www.flower.com">
<img src="D:\full blossom.jpg"></img>
</a>
</body>


WORKING WITH MULTIMEDIA:
EMBEDDIND A SOUND:
An audio can be embedded in the browser using the <embed> tag. src attribute is used in the <embed> tag to specify the source file path.

EG:

<body>
<embed src="D:\brittania.mp3">
</body>

OUTPUT:












EMBEDDING A VIDEO:

It is exactly similar to embedding the audio.

EG:

<body>
<embed src="D:\gangnam style psy.mp4">
</body>

OUTPUT:











Some browsers does not support embedding. To handle those browsers <noembed> tag is used. In this tag a message can be specified which will be shown if the browser doesn't support embedding.

CREATING LINK TO AUDIO/VIDEO:

A hyperlink can be directed to an audio file or a video file.

EG:

<body>
<a href="D:\brittania.mp3">music!</a>
<a href="D:\gangnam style psy.mp4">gangnam style!</a>
</body>

USING <OBJECT> TAG:

HTML also provides the facility to insert various multimedia objects using a common object tag (<object>). <object> uses two attributes to give specification of the multimedia object. The first attribute is data which specifies the path of the multimedia object and the second attribute is type which specifies the type of multimedia object, such as audio, video.

EG:

<body>
<object data="D:\brittania.mp3" type="audio/mp3">
</body>



-----------------------------------END OF PART - III---------------------------------

PART - IV WILL BE PUBLISHED SHORTLY! :-)

No comments:

Post a Comment