Scribd
Upload
59 views

Unit2 L4 HTML Multimedia

The document discusses HTML hyperlinks and embedding multimedia. It defines hyperlinks as links that allow navigation between web pages by clicking words, phrases or images. It describes how the <a> tag is used to create hyperlinks and some attributes like href, target and name. It also discusses embedding videos and sounds using the <embed> tag and supported file types. Attributes of the <embed> tag like src, width, height and controls are also summarized.

Uploaded by

princy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
59 views

Unit2 L4 HTML Multimedia

The document discusses HTML hyperlinks and embedding multimedia. It defines hyperlinks as links that allow navigation between web pages by clicking words, phrases or images. It describes how the <a> tag is used to create hyperlinks and some attributes like href, target and name. It also discusses embedding videos and sounds using the <embed> tag and supported file types. Attributes of the <embed> tag like src, width, height and controls are also summarized.

Uploaded by

princy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML

(Hypertext Markup Language)


HTML - Linking

• A webpage can contain various links that take you directly to


other pages and even specific parts of a given page. These
links are known as hyperlinks.

• Hyperlinks allow visitors to navigate between Web sites by


clicking on words, phrases, and images. Thus you can create
hyperlinks using text or images available on a webpage.
URL

• Every document on the Web has a unique address. This address is


known as Uniform Resource Locator (URL).

• Several HTML tags include a URL attribute value, including


hyperlinks, inline images, and forms. All of them use the same syntax
to specify the location of a web resource, regardless of the type or
content of that resource. That's why it is known a Uniform Resource
Locator.
Absolute and Relative URLs

You may address a URL in one of the following two ways:

• Absolute − An absolute URL is the complete address of a resource. For


example http://www.dspsr.in/html/html_text_links.htm

• Relative − A relative URL indicates where the resource is in relation to


the current page. Given URL is added with the <base> element to
form a complete URL. For example /html/html_text_links.htm
Linking Documents

• A link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing
</a> tag becomes part of the link and a user can click that part
to reach to the linked document. Following is the simple syntax
to use <a> tag.

• <a href = "Document URL" ... attributes-list>Link Text</a>


Example

<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.dspsr.in" target = "_self">DSPSR</a>
</body>

</html>
HTML Target Attribute

HTML target attribute is used to specify the place in the browser


where the linked document should be opened. For example,
whether the user wants to open the link in a new tab, new
window, or in the same tag. The target attribute has different
values for all these different locations.
The target attribute can have one of the
following values:
Value Description
_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same window/tab. This is


the default value.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

_framename Opens the linked document in a named frame.


Example
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.dspsr.in" target = "_self">DSPSR</a>
<a href = "https://www.dspsr.in" target = "_parent">DSPSR</a>
<a href = "https://www.dspsr.in" target = "_blank">DSPSR</a>
</body>

</html>
Linking to a Page Section

You can create a link to a particular section of a given webpage


by using name attribute. This is a two-step process.
• First create a link to the place where you want to reach with-in a webpage
and name it using <a...> tag as follows −
<h1>HTML Text Links <a name = "top"></a></h1>
• Second step is to create a hyperlink to link the document and place where
you want to reach
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
• This will produce following link, where you can click on the link generated
Go to the Top to reach to the top of the HTML Text Link tutorial.
Go to the Top
HTML Link Colors

By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red

<body alink="green" vlink="red“ link=“yellow”>


HTML Image Link

Images in HTML can also work as a Hyperlink. It means you can

add an image with a link attached to it. When the user clicks on

the image, he gets redirected to the attached link.


Example

<a href="link.html">
<img src="map.png" alt="HTML tutorial" />
</a>
HTML - Embed Multimedia

• Sometimes you need to add music or video into your web page. The
easiest way to add video or sound to your web site is to include the
special HTML tag called <embed>. This tag causes the browser itself
to include controls for the multimedia automatically provided browser
supports <embed> tag and given media type.
• You can also include a <noembed> tag for the browsers which don't
recognize the <embed> tag. You could, for example, use <embed> to
display a movie of your choice, and <noembed> to display a single JPG
image if browser does not support <embed> tag.
<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<embed src = “abc.mpeg" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" > </noembed>
</embed>
</body>
</html>
Supported Video Types

You can use various media types like Flash movies (.swf), AVI's (.avi),
and MOV's (.mov) file types inside embed tag.

• .swf files − are the file types created by Macromedia's Flash program.
• .wmv files − are Microsoft's Window's Media Video file types.
• .mov files − are Apple's Quick Time Movie format.
• .mpeg files − are movie files created by the Moving Pictures Expert
Group.
The <embed> Tag Attributes
Sr.No Attribute & Description
1 align
Determines how to align the object. It can be set to either center, left or right.
autostart
2
This boolean attribute indicates if the media should start automatically. You can set it either true or false.
loop
3
Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false)
4 playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
5 hidden
Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes.
6 width
Width of the object in pixels
7 height
Height of the object in pixels
8 name
A name used to reference the object.
9 src
URL of the object to be embedded.
10 volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

You might also like