Introduction to HTML
Linking <a> Anchor tag
The <a> tag defines a hyperlink, which is used to link from one page to another. The anchor tag connects one web component with multiple other web components by leveraging hyperlinks. Hyperlinks established by the anchor tag can also lead to different sections of the same document.
The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
In a webpage links 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
Anchor Tag Attributes
Anchor Tag Attributes
There are five commonly-used Anchor Tag attributes:
- href
- name
- target
- title.
href Attribute
The href stands for Hypertext REFerence. It is used to specify the destination of web page, which is linked. Notice, the pages on Internet should give a complete URL, i.e. alongwith http://.
<a href=”https://www.cbsecs.in” target=”_blank”>Visit cbsecs.in</a>
name Attribute :
It is used to give identity to anchor tag by giving it a name. whenever it is refer, it is used like this #name
This tag enables users to jump to specific sections of a web document. This tag is especially useful for navigating across large pages. An important example of this could be:
<a name=”to top”></a>
title Attribute:
The title attribute of anchor tag is used to specify the title of the document to which, we are linking. The value of the title attribute can be any string enclosed within double (or single) quotes. It is used for referencing an unlabeled resource (like an image or a non–HTML document). The value specified for this attribute appears as a tooltip when the mouse pointer is placed over the hyperlink. The title attribute can also be used by the browser, when adding the link to the user’s hotlist.
<a href=”https://www.cbsecs.in” title=”this link will open cbsecs.in website created by sir” >Visit cbsecs.in</a>
To illustrate the use of title attribute.
<HTML>
<HEAD><TITLE>Creating Hyperlink
</TITLE></HEAD>
<BODY>
<A href =”http://www.google.com” title =”It
is a hyperlink”> Click Here </A>
</BODY>
</HTML>
target Attribute:
It specify where to open the linked page.
e.g. <a target=”_blank|_self|_parent|_top|framename”>
<a href=”https://www.cbsecs.in” target=”_blank”>Visit cbsecs.in</a>
Types of Linking
There are two types of linking in a web page, which are as follows
1. External Linking
2. Internal Linking
External Linking
This leads to a link that go to another website. In other words, it refers to a different page on a different website.
Internal Linking
This is a type of HTML linking that links pages within a single website, various sections of same document or different document.
Example of External Linking
<HTML>
<HEAD> <TITLE> Creating a Hyperlink </TITLE>
</HEAD>
<BODY>
<H1> Look at the image </H1>
<IMG src =”D:\images.jpg” alt = “It is a beautiful picture”>
<A href = “http://www.google.com”>
Click Here </A> to get more flower images.
</BODY>
</HTML>
Images as Links
Images can also be used as hyperlinks. To create image as a link, following syntax is used
<A href = “URL”> <IMG src=”image1.jpg”> </A>
e.g.
To show image as link.
<HTML>
<HEAD>
<TITLE>Image as Link</TITLE>
</HEAD>
<BODY>
<A href=”http://en.wikipedia.org/wiki /Tweety”>
<IMG src=”D:\Class10\computer
\tweety1.jpg”></A>
</BODY>
</HTML>
Listed Hyperlinks
It is noticeable that < A > tag can also be used for more complex task (as with images or with lists etc.),
e.g. To show listed hyperlinks.
<HTML>
<HEAD> <TITLE> List </TITLE> </HEAD>
<BODY> <H1> List </H1>
<UL>
<LI><A href=”link1.html”><IMG src=”F:\Fruits-wallpaper-91.jpg”
align=”middle” height=”75″ width=”75″>
Fruit Chart </A></LI><BR><BR>
<LI> <A href= “link2.html”>
<IMG src=”F:\vegetable.jpg” align=”middle” width=”75″ height=”75″>
Vegetable Chart </A> </LI> </UL>
</BODY>
</HTML>
2. Internal Linking
This is a type of HTML linking that links pages within a single website, various sections of same document or different document.
Linking on the Same Web Page To create an internal link, you need to use a pair of < A > tags. The first < A > tag is used to specify the name of the target location for identification purpose. It is known as
target fragment. You can use the < A > tag with its name or id attribute to identify a fragment. This type of anchor is
commonly called as named anchor.
The first step is to make the target fragment. The simple
syntax to do so is written below
<A name =”aa”> Part A </A>
where, “aa” is the name of fragment/segment that you want to refer (like top, bottom etc.). The second < A > tag is used to create a link to the target fragment.
The simple syntax to
link to the target segment is written below
<A href = “#aa”> Click Here </A>
In the second <A> tag, the value of href attribute with #symbol is to be specified.
e.g. To show the internal linking in an HTML document.
<HTML> <HEAD><TITLE>Internal Linking</TITLE></HEAD>
<BODY>
<H1>Linking in a page </H1>
<H3>Click here to go to the
<A href=”#bottom”>bottom</A>of the page.</H3>
<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>
<A name=”bottom”><H3> You are at the bottom of the page.</H3></A>
</BODY>
</HTML>
Audio and Video in HTML Page
The <AUDIO>
element defines an in-browser audio player. The audio player an provide a single piece of audio content. To specify the source file of the audio content, use one or more <SOURCE> elements inside the <AUDIO> element.
All <SOURCE> files should contain the same audio content, but in different file formats. The browser will select the first file format that it is able to play. If you are not going to provide multiple source file formats, you may indicate the source file in the src attribute, instead of in a separate <SOURCE> element.
Attributes of <AUDIO> tag
Attribute Description
autoplay This boolean attribute if specified, the audio will
automatically begin to play back as soon as it can do
so without stopping to finish loading the data.
autobuffer This boolean attribute if specified, the audio will
automatically begin buffering even if it’s not set to automatically play.
controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking
and pause/resume playback.
loop This boolean attribute if specified, will allow audio
automatically see back to the start after reaching at the end.
src This attribute specifies the location (URL) of the audio file. This is optional, you may instead use the <SOURCE>
element within the audio block to specify the audio to embed.
type This attribute specifies the audio file standard type.
Most commonly used audio formats are ogg, mp3 and wav.
You can use <SOURCE> tag to specify media along with media type and many other attributes. An audio element
allows multiple source elements and browser will use the first recognised format.
e.g.
<HTML>
<BODY>
<AUDIO controls autoplay>
<SOURCE src = “/html/audio.ogg”
type = “audio/ogg”/>
<SOURCE src = “/html/audio.wav”
type = “audio/wav”/>
Your browser does not support the <AUDIO>
element.
</AUDIO>
</BODY>
</HTML>
Embed Video Element
<Video>
The <VIDEO> element allows us to embed video files into an HTML document, very similar to the way images are embedded. The HTML does not specify which video formats
browser should support in the <VIDEO> tag, but most commonly used video formats are ogg, mpeg4.
Attributes of <VIDEO> tag
Attribute Description
autoplay This boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobuffer This boolean attribute if specified, the video will automatically begin buffering even if it’s not set to automatically play.
controls If this attribute is present, it will allow the user to control video playback, including volume, seeking and pause/resume playback.
height This attribute specifies the height of the video display area in pixels.
width This attribute specifies the width of the video display area in pixels
src The URL of the video to embed. This is optional, you may instead use the <SOURCE> element
within the video block to specify the video to embed.
type This attribute specifies the video file standard type.
e.g.
<HTML>
<BODY>
<VIDEO width = “300” height = “200” controls
autoplay>
<SOURCE src = “/html/foo.ogg”
type = “video/ogg”/>
<SOURCE src = “/html/foo.mp4”
type = “video/mp4″/>
Your browser does not support the <VIDEO>
element.
</VIDEO>
</BODY>
</HTML>
Attributes of <TABLE> Tag
Tag This tag is used to create tables in HTML. The table tags in HTML areand. Everything to be put in a table, should be enclosed between these two tags. Since,is a container tag thus both the tags, i.e. opening and closing are required. SyntaxMWithin thetags, a variety of attributes can be added to determine the look of table. You can specify width of the table, add border, background color, spacing between cells (cellspacing) and spacing between border of the cell and its content (cellpadding) in a table.
Attributes | Explanation | Syntax |
border | Add border to the table | <TABLE border=”pixel”> |
bordercolor | Specifies the color of table’s border. | <TABLE bordercolor=”color_name|hex_number|rgb_number”> |
Frame | Specifies which part of the table’s border will be visible. (Outer border) | <TABLE frame=”void|above|below|hsides| lhs|rhs|vsides|box|border”> |
rules | Specifies which lines or rules to draw between rows and columns. | <TABLE rules=”none|groups|rows|cols|all”> |
cellpadding | Specifies the space (in pixel) between the edges of cells and its contents. | <TABLE cellpadding=”pixel”> |
cellspacing | Specifies the space (in pixel) between two cells. | <TABLE cellspacing=”pixel”> |
align | Specifies the alignment of the table in a web browser. | <TABLE align=”left|right|center”> |
background | Used to set an image in background of the table. | <TABLE background=”path |image_name”> |
bgcolor | Specifies the background color of the table. | <TABLE bgcolor=”color_name|hex_number|rgb_number”> |
height | Set the height of the table. | <TABLE height=”pixel|percentage”> |
width | Set the width of the table. | <TABLE width=”pixel|percentage”> |
summary | Provides information about the table. | <TABLE summary=”text”> |
|
|
|
Attributes of <TD> and <TH> Tags
Attributes | Explanation | Syntax |
rowspan | Used to span multiple rows, i.e. how many rows a cell should take. | <TD|TH rowspan=”number”> |
colspan | How many columns a cell should spanacross. | <TD|TH colspan=”number”> |
align | Used to align the table data | <TD|TH align= “left|right|center”> |
background | Specifies the background image of anindividual cell. | <TD|TH background=”path|image_name”> |
bgcolor | Specifies the background color of and individual cell. | <TD|TH bgcolor=” color_name |hex_number|rgb_number”> |
height | Used to define the height of the cell. | <TD|TH height=” pixel|percentage”> |
width | Used to define the width of the cell | <TD|TH width=”pixel|percentage”> |
rowspan | Used to span multiple rows, i.e. how many rows a cell should take. | <TD|TH rowspan=”number”> |
colspan | How many columns a cell should spanacross. | <TD|TH colspan=”number”> |
valign | Set the vertical alignment of that particular cell’s content (when rowspan is more than one row). | <TD|TH valign=”top|bottom|middle”> |