tag syntax and attributes like href and target for linking to resources. It explains how to create bookmarks, use images as links, and incorporate audio and video elements in web pages. Additionally, it distinguishes between absolute and relative URLs for linking to web pages and resources."> tag syntax and attributes like href and target for linking to resources. It explains how to create bookmarks, use images as links, and incorporate audio and video elements in web pages. Additionally, it distinguishes between absolute and relative URLs for linking to web pages and resources.">
[go: up one dir, main page]
Scribd
Upload
8 views3 pages

Chapter 6 Notes

Chapter 6 covers the use of hyperlinks in HTML, detailing the <a> tag syntax and attributes like href and target for linking to resources. It explains how to create bookmarks, use images as links, and incorporate audio and video elements in web pages. Additionally, it distinguishes between absolute and relative URLs for linking to web pages and resources.

Uploaded by

juryfelix8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views3 pages

Chapter 6 Notes

Chapter 6 covers the use of hyperlinks in HTML, detailing the <a> tag syntax and attributes like href and target for linking to resources. It explains how to create bookmarks, use images as links, and incorporate audio and video elements in web pages. Additionally, it distinguishes between absolute and relative URLs for linking to web pages and resources.

Uploaded by

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

Chapter 6

Anchor: An element in a webpage that creates a hyperlink between a source anchor and
a destination anchor. These can be used to link 2 resources together
Links are found in nearly all web pages. Links allow users to click their way from page to
page.When we move the mouse over a link, the mouse arrow will turn into a little hand.
The HTML <a> tag defines a hyperlink. It has the following syntax: <a href="url">link
text</a>The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
The link text is the part that will be visible to the reader.Clicking on the link text, will send
the reader to the specified URL address.By default, links will appear as follows in all
browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
<style>
a:link { color: green; background-color: transparent; text-decoration: none;}
a:visited {color: pink; background-color: transparent; text-decoration: none;}
a:hover {color: red; background-color: transparent; text-decoration: underline;}
a:active { color: yellow; background-color: transparent; text-decoration: underline;}
</style>

The target attribute specifies where to open the linked document.


The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email program (to
let them send a new email):
<a href="mailto:someone@example.com">Send email</a>
<a href="mailto:shanmugapriya@pnccs.edu.in?subject=Test"> Contact us</a>
Link Titles
The title attribute specifies extra information about an element. The information is most
often shown as a tooltip text when the mouse moves over the element.
<a href="https://www.google.com/html/" title="Google Page">Visit our HTML Tutorial</a>
HTML Links - Create Bookmarks
HTML links can be used to create bookmarks, so that readers can jump to specific parts of a
web page.
Create a Bookmark in HTML
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.
Example
First, use the id/name attribute to create a bookmark:
<h2 name="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>
We can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
HTML <audio>
<audio controls autoplay> <source src="horse.mp3" type="audio/mpeg">
The browser does not support the audio element.
</audio>
Add muted after autoplay to let the audio file start playing automatically (but muted):
HTML Audio - Media Types
File Format Media Type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav

HTML Video
The HTML <video> element is used to show a video on a web page.
The HTML <video> Element
To show a video in HTML, use the <video> element:
<video width="320" height="240" controls src="movie.mp4" type="video/mp4">The
browser does not support the video tag.</video>
To start a video automatically, use the autoplay attribute and add muted after autoplay to let
the video start playing automatically
HTML Video - Media Types

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

FRAMES
The iframe in HTML stands for Inline Frame. The ” iframe ” tag defines a rectangular
region within the document in which the browser can display a separate document, including
scrollbars and borders. An inline frame is used to embed another document within the current
HTML document. The ‘ src ‘ attribute is used to specify the URL of the document that
occupies the iframe.
Syntax:
<iframe src="URL" title="description"></iframe>
Attributes value: It contains a single value URL that specifies the URL of the document that
is embedded in the iframe. There are two types of URL links which are listed below:
• Absolute URL: It points to another webpage.
• Relative URL: It points to other files of the same web page.
Absolute URLs and Relative URLs
Use a full URL to link to a web page:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Link to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
Link to a page located in the same folder as the current page:
<a href="default.asp">HTML tutorial</a>
The main difference between an absolute URL and a relative URL is this. A relative URL
points to a file relative to the current directory or file, whereas an absolute URL is a complete
address that leads to a file or resource. Since a relative URL is shorter and more portable than
an absolute URL, which includes more information, it is simpler to utilize. But only links
hosted on the same server as the page from which they are referred are allowed to use relative
URLs.

You might also like