Scribd
Upload
100 views28 pages

Video Audio Hyperlinks

This document discusses embedding various multimedia elements like video, audio, and hyperlinks in web pages. It explains how to add video and audio using HTML5 tags like <video> and <audio>. It describes the different types of hyperlinks and attributes used to create links within and between pages. Specific codes are provided to demonstrate how to create links to other pages, emails, and use graphics as links.

Uploaded by

Koleen Lopez Ü
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
100 views28 pages

Video Audio Hyperlinks

This document discusses embedding various multimedia elements like video, audio, and hyperlinks in web pages. It explains how to add video and audio using HTML5 tags like <video> and <audio>. It describes the different types of hyperlinks and attributes used to create links within and between pages. Specific codes are provided to demonstrate how to create links to other pages, emails, and use graphics as links.

Uploaded by

Koleen Lopez Ü
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Video, Audio

and HYPERLINKS
OBJECTIVES Embedding video and audio
Understand what a hyperlink is and its
types
Build a link from one page to another
and link to a page on a different website
Identify the attributes for anchor and
target attributes
Build an e-mail link
Use graphic as link
ADDING VIDEO
In order to embed a video or movie on a web
page, you can use the <video> element.

You have to specify the width and height


attributes so that the space required for the
video is reserved when the page is loaded.
HTML5 VIDEO TAGS
TAG DESCRIPTION
<video> Defines a video or
movie
<source> Defines Multiple
media resources for
media elements
such as video and
audio
<track> Defines text tracks
in media players.
<body>
<video width=240 height=120
controls=controls>
<source src=UNG.mp4 type=video/mp4>
UNG
</video>
</body
controls
The controls property sets or returns whether the
browser should display standard audio/video
controls.
Standard audio/video controls should include:
Play
Pause
Seeking
Volume
Fullscreen toggle (for video)
Embedding a video file
Adding audio

In order to insert an audio file


on a web page, you can use
the container tag
<audio></audio>.
<audio controls="controls" autoplay>
<source src="EXO - Lotto FULL
Audio.mp3 type="audio/mpeg">
EXO
</audio>
AUTOPLAY

When present, the audio will


automatically start playing as soon as it
can do so without stopping.
HYPERLINK

Hyperlink is a reference link that


allows you to navigate to another
page of the same document or to
another document.
Hyperlink or link may be
represented by a colored text with
an underline or with an image.
Three types of HYPERLINKS

Absolute URL Links to a PAGE on a different


Web server.
Relative URL Links to a PAGE on the same
Web server.

Named Anchor Links to a DIFFERENT


LOCATION on the same Web
page.
Creating a link from one PAGE to
ANOTHER.
anchors
Term used to define a hyperlink

It can also be made to make email hyperlinks.

Anchors can be made thru the container


tag <a></a> and setting the value of
the attribute href as the target
destination page.
Ex.

<a href=www.yahoo.com> Yahoo!


</a>

<a href=homepage.html> Home </a>


<a>www.google.com google <a/>
Attributes for <a></a>
ATTRIBUTE DEFINITION
HREF Indicates the target of the anchor
Ex: <a href=sampleParagraphs.html> Paragraphs!
</a>

TARGET Indicates the behavior the Web Browser will carry


out.
Ex: <a href=sampleParagraphs.html target=blank>
Paragraphs! </a>

Name Assigns a name to the anchor defining an internal


bookmark of the page.
Ex: <a href=sampleParagraphs.html name=paragraph>
Paragraphs! </a>
ULS HREF VALUE

1. Office.html
Books 2. CreativeDesign.html
Office Productivity 3. HTMLBooks.html

Creative Design
HTML
Note: To change the text hyperlink color

<a href=uls.htmll style=color:


#cc0000> ULS bldg.! </a>
Note: To make the visited link a different
color from the unvisited link so that
visitors can tell where they have been.

<body vlink = #0000ff>


Creating an EMAIL link

You can make your own email


hyperlink by setting the value of
the attribute href as mailto:
followed by the email address.
Ex.

<a
href=mailto:[email protected]>E-
MAIL US NOW! </a>
Linking to a Page on a Different Web Site
To link to a page on a different
website, you have to find first
the destination file path first and
then copy it to your code to
create a link.
USING GRAPHICS AS LINKS
Examples of codes that you can use
to add graphics link:

<a href="group heading.html"><img


src="home.png"></a>

You might also like