Scribd
Upload
2 views

Part2 HTML

The document provides an overview of creating hyperlinks in HTML using the <a> tag, including options for the target attribute to specify how linked documents open. It also discusses the use of the <font> tag for styling text, the deprecated <marquee> tag for scrolling text, and the <frameset> tag for creating frames in a webpage. Additionally, it highlights the disadvantages of frames and provides examples of their usage, while noting that certain tags are not supported in HTML5.

Uploaded by

asmizashaikh6543
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Part2 HTML

The document provides an overview of creating hyperlinks in HTML using the <a> tag, including options for the target attribute to specify how linked documents open. It also discusses the use of the <font> tag for styling text, the deprecated <marquee> tag for scrolling text, and the <frameset> tag for creating frames in a webpage. Additionally, it highlights the disadvantages of frames and provides examples of their usage, while noting that certain tags are not supported in HTML5.

Uploaded by

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

Linking Documents

Text Links

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>

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the
location where linked document is opened. Following are the possible options −

Sr.No Option & Description

1 _blank
Opens the linked document in a new window or tab.

2 _self

Opens the linked document in the same frame.

3 _parent
Opens the linked document in the parent frame.

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

5 Targetframe

Opens the linked document in a named targetframe.

<!DOCTYPE html>

<html>

<body>

Regal College, Kalyan F.Y.BCA Web-Part2


1
<p>Click any of the following links</p>

<a href = "/html/index.htm" target = "_blank">Opens in New</a> |

<a href = "/html/index.htm" target = "_self">Opens in Self</a> |

<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |

<a href = "/html/index.htm" target = "_top">Opens in Body</a>

</body>

</html>

Image Links

We have seen how to create hypertext link using text and we also learnt how to use images in our
webpages. Now, we will learn how to use images to create hyperlinks.

<!DOCTYPE html>

<html>

<body>

<p>Click following link</p>

<a href = "https://www.tutorialspoint.com" target = "_self">

<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>

</a>

</body>

</html>

Email Links

HTML <a> tag provides you option to specify an email address to send an email. While using
<a> tag as an email tag, you will use mailto: email address along with href attribute. Following
is the syntax of using mailtoinstead of using http.

<a href = "mailto: [email protected]">Send Email</a>

This code will generate the following link which you can use to send email.

Send Email

Regal College, Kalyan F.Y.BCA Web-Part2


2
Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express
etc. ) installed on your user's computer. There is another risk to use this option to send email
because if user do not have email client installed on their computer then it would not be possible
to send email.

HTML <font> Tag.


Fonts play a very important role in making a website more user friendly and increasing content
readability. Font face and color depends entirely on the computer and browser that is being used
to view your page but you can use HTML <font> tag to add style, size, and color to the text on
your website. You can use a <basefont> tag to set all of your text to the same size, face, and
color.

The font tag is having three attributes called size, color, and face to customize your fonts. To
change any of the font attributes at any time within your webpage, simply use the <font> tag.
The text that follows will remain changed until you close with the </font> tag. You can change
one or all of the font attributes within one <font> tag.

Attribute Value Description

color rgb(x,x,x) Not supported in HTML5.


#xxxxxx Specifies the color of text
colorname

face font_family Not supported in HTML5.


Specifies the font of text

size Number Not supported in HTML5.


Specifies the size of text

<!DOCTYPE html>

<html>

<body>

<p><font size="3" color="red">This is some text!</font></p>

<p><font size="2" color="blue">This is some text!</font></p>

<p><font face="verdana" color="green">This is some text!</font></p>

Regal College, Kalyan F.Y.BCA Web-Part2


3
<p><strong>Note:</strong> The font element is not supported in HTML5. Use CSS
instead.</p>

</body>

</html>

HTML - Marquees
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically
down your webpage depending on the settings. This is created by using HTML <marquees> tag.

Note − The <marquee> tag deprecated in HTML5. Do not use this element, instead you can use
JavaScript and CSS to create such effects.

Syntax

A simple syntax to use HTML <marquee> tag is as follows −

<marquee attribute_name = "attribute_value"....more attributes>

One or more lines or text message or image

</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.

Sr.No Attribute & Description

1 Width
This specifies the width of the marquee. This can be a value like 10 or 20% etc.

2 Height
This specifies the height of the marquee. This can be a value like 10 or 20% etc.

3 Direction
This specifies the direction in which marquee should scroll. This can be a value
like up, down, left or right.

Regal College, Kalyan F.Y.BCA Web-Part2


4
4 Behavior
This specifies the type of scrolling of the marquee. This can have a value
like scroll, slide and alternate.

5 Scrolldelay
This specifies how long to delay between each jump. This will have a value like
10 etc.

6 Scrollamount
This specifies the speed of marquee text. This can have a value like 10 etc.

7 Loop
This specifies how many times to loop. The default value is INFINITE, which
means that the marquee loops endlessly.

8 Bgcolor
This specifies background color in terms of color name or color hex value.

9 Hspace
This specifies horizontal space around the marquee. This can be a value like 10 or
20% etc.

10 Vspace
This specifies vertical space around the marquee. This can be a value like 10 or
20% etc.

1) <html>

<body>

<marquee>This is basic example of marquee</marquee>

</body>

</html>

2) <html>

Regal College, Kalyan F.Y.BCA Web-Part2


5
<body>

<marquee width = "50%">This example will take only 50% width</marquee>

</body>

</html>

3) <html>

<body>

<marquee direction = "right">This text will scroll from left to right</marquee>

</body>

</html>

HTML - Frames
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the tables are organized: into
rows and columns.

Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages −

• Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.

• Sometimes your page will be displayed differently on different computers due to different
screen resolution.

• The browser's back button might not work as the user hopes.

• There are still few browsers that do not support frame technology.

Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rowsattribute of <frameset> tag defines

Regal College, Kalyan F.Y.BCA Web-Part2


6
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.

Note − The <frame> tag deprecated in HTML5. Do not use this element.

Example

Following is the example to create three horizontal frames −

<!DOCTYPE html>

<html>

<frameset rows = "10%,80%,10%">

<frame name = "top" src = "/html/top_frame.htm" />

<frame name = "main" src = "/html/main_frame.htm" />

<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>

<body>Your browser does not support frames.</body>

</noframes>

</frameset>

</html>

Let's put the above example as follows, here we replaced rows attribute by cols and changed
their width. This will create all the three frames vertically −

<html>

<frameset cols = "25%,50%,25%">

<frame name = "left" src = "/html/top_frame.htm" />

<frame name = "center" src = "/html/main_frame.htm" />

<frame name = "right" src = "/html/bottom_frame.htm" />

<noframes>

<body>Your browser does not support frames.</body>

</noframes>

Regal College, Kalyan F.Y.BCA Web-Part2


7
</frameset>

</html>

The <frameset> Tag Attributes

Sr.No Attribute & Description

Cols

Specifies how many columns are contained in the frameset and the size of each
column. You can specify the width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols =
"100, 500, 100".
A percentage of the browser window. For example, to create three vertical frames,
1 use cols = "10%, 80%, 10%".
Using a wildcard symbol. For example, to create three vertical frames, use cols =
"10%, *, 10%". In this case wildcard takes remainder of the window.
As relative widths of the browser window. For example, to create three vertical
frames, use cols = "3*, 2*, 1*". This is an alternative to percentages. You can use
relative widths of the browser window. Here the window is divided into sixths: the
first column takes up half of the window, the second takes one third, and the third
takes one sixth.

Rows
This attribute works just like the cols attribute and takes the same values, but it is
2 used to specify the rows in the frameset. For example, to create two horizontal
frames, use rows = "10%, 90%". You can specify the height of each row in the
same way as explained above for columns.

border
3 This attribute specifies the width of the border of each frame in pixels. For
example, border = "5". A value of zero means no border.

4 frameborder

Regal College, Kalyan F.Y.BCA Web-Part2


8
This attribute specifies whether a three-dimensional border should be displayed
between frames. This attribute takes value either 1 (yes) or 0 (no). For example
frameborder = "0" specifies no border.

framespacing

5 This attribute specifies the amount of space between frames in a frameset. This
can take any integer value. For example framespacing = "10" means there should
be 10 pixels spacing between each frames.

The <frame> Tag Attributes

Sr.No Attribute & Description

Src

1 This attribute is used to give the file name that should be loaded in the frame. Its
value can be any URL. For example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.

Name

This attribute allows you to give a name to a frame. It is used to indicate which
2 frame a document should be loaded into. This is especially important when you
want to create links in one frame that load pages into an another frame, in which
case the second frame needs a name to identify itself as the target of the link.

frameborder

3 This attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the <frameset> tag if one
is given, and this can take values either 1 (yes) or 0 (no).

marginwidth

4 This attribute allows you to specify the width of the space between the left and
right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth = "10".

Regal College, Kalyan F.Y.BCA Web-Part2


9
marginheight

5 This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight = "10".

noresize

6 By default, you can resize any frame by clicking and dragging on the borders of a
frame. The noresize attribute prevents a user from being able to resize the frame.
For example noresize = "noresize".

scrolling

7 This attribute controls the appearance of the scrollbars that appear on the frame.
This takes values either "yes", "no" or "auto". For example scrolling = "no" means
it should not have scroll bars.

longdesc

8 This attribute allows you to provide a link to another page containing a long
description of the contents of the frame. For example longdesc =
"framedescription.htm"

Browser Support for Frames

If a user is using any old browser or any browser, which does not support frames then
<noframes> element should be displayed to the user.

So you must place a <body> element inside the <noframes> element because the <frameset>
element is supposed to replace the <body> element, but if a browser does not understand
<frameset> element then it should understand what is inside the <body> element which is
contained in a <noframes> element.

You can put some nice message for your user having old browsers. For example, Sorry!! your
browser does not support frames. as shown in the above example.

Frame's name and target attributes

One of the most popular uses of frames is to place navigation bars in one frame and then load
main pages into a separate frame.

Regal College, Kalyan F.Y.BCA Web-Part2


10
Let's see following example where a test.htm file has following code −

<html>

<frameset cols = "200, *">

<frame src = "/html/menu.htm" name = "menu_page" />

<frame src = "/html/main.htm" name = "main_page" />

<noframes>

<body>Your browser does not support frames.</body>

</noframes>

</frameset>

</html>

Here, we have created two columns to fill with two frames. The first frame is 200 pixels wide
and will contain the navigation menu bar implemented by menu.htm file. The second column
fills in remaining space and will contain the main part of the page and it is implemented
by main.htm file. For all the three links available in menu bar, we have mentioned target frame
as main_page, so whenever you click any of the links in menu bar, available link will open in
main page.

Following is the content of menu.htm file

<!DOCTYPE html>

<html>

<body bgcolor = "#4a7d49">

<a href = "http://www.google.com" target = "main_page">Google</a>

<br />

<br />

<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>

<br />

<br />

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>

Regal College, Kalyan F.Y.BCA Web-Part2


11
</body>

</html>

Following is the content of main.htm file −

<html>

<body bgcolor = "#b5dcb3">

<h3>This is main page and content from any link will be displayed here.</h3>

<p>So now click any link and see the result.</p>

</body>

</html>

When we load test.htm file, it produces following result −

The targetattribute can also take one of the following values −

Sr.No Option & Description

_self
1
Loads the page into the current frame.

_blank
2
Loads a page into a new browser window. Opening a new window.

_parent
3 Loads the page into the parent window, which in the case of a single frameset is
the main browser window.

_top
4
Loads the page into the browser window, replacing any current frames.

Regal College, Kalyan F.Y.BCA Web-Part2


12
Targetframe
5
Loads the page into a named targetframe.

HTML - Iframes
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow
related to <frameset> tag, instead, it can appear anywhere in your document. 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 inline frame.

Following is the example to show how to use the <iframe> −

<html>

<body>

<p>Document content goes here...</p>

<iframe src = "/html/menu.htm" width = "555" height = "200">

Sorry your browser does not support inline frames.

</iframe>

<p>Document content also go here...</p>

</body>

</html>

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc,
marginheight, marginwidth, name, scrolling, style,and title behave exactly like the corresponding
attributes for the <frame> tag.

Note − The frameborder, marginwidth, longdesc, scrolling, marginheight attributes deprecated


in HTML5. Do not use these attributes.

Regal College, Kalyan F.Y.BCA Web-Part2


13
Sr.No Attribute & Description

1 Src
This attribute is used to give the file name that should be loaded in the frame. Its
value can be any URL. For example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.

2 Name
This attribute allows you to give a name to a frame. It is used to indicate which
frame a document should be loaded into. This is especially important when you
want to create links in one frame that load pages into an another frame, in which
case the second frame needs a name to identify itself as the target of the link.

3 Frameborder
This attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the <frameset> tag if one
is given, and this can take values either 1 (yes) or 0 (no).

4 Marginwidth
This attribute allows you to specify the width of the space between the left and
right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth = "10".

5 Marginheight
This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight = "10".

6 Height
This attribute specifies the height of <iframe>.

7 Scrolling
This attribute controls the appearance of the scrollbars that appear on the frame.
This takes values either "yes", "no" or "auto". For example scrolling = "no" means
it should not have scroll bars.

Regal College, Kalyan F.Y.BCA Web-Part2


14
8 Longdesc
This attribute allows you to provide a link to another page containing a long
description of the contents of the frame. For example longdesc =
"framedescription.htm"

9 Width
This attribute specifies the width of <iframe>.

HTML - Style Sheet


Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or
perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the
Web since the consortium was founded in 1994.

Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes
for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML
element. Each property has a name and a value, separated by a colon (:). Each property
declaration is separated by a semi-colon (;).

Example

First let's consider an example of HTML document which makes use of <font> tag and
associated attributes to specify text color and font size −

Note − The font tag deprecated and it is supposed to be removed in a future version of HTML.
So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But
still for learning purpose, this chapter will work with an example using the font tag.

<!DOCTYPE html>

<html>

<body>

<p><font color = "green" size = "5">Hello, World!</font></p>

</body>

</html>

Regal College, Kalyan F.Y.BCA Web-Part2


15
We can re-write above example with the help of Style Sheet as follows −

<html>

<body>

<p style = "color:green; font-size:24px;" >Hello, World!</p>

</body>

</html>

You can use CSS in three ways in your HTML document −

• External Style Sheet − Define style sheet rules in a separate .css file and then include
that file in your HTML document using HTML <link> tag.

• Internal Style Sheet − Define style sheet rules in header section of the HTML document
using <style> tag.

• Inline Style Sheet − Define style sheet rules directly along-with the HTML elements
using style attribute.

Let's see all the three cases one by one with the help of suitable examples.

External Style Sheet

If you need to use your style sheet to various pages, then its always recommended to define a
common style sheet in a separate file. A cascading style sheet file will have extension as .css and
it will be included in HTML files using <link> tag.

Example

Consider we define a style sheet file style.css which has following rules −

.red {

color: red;

.thick {

font-size:20px;

.green {

Regal College, Kalyan F.Y.BCA Web-Part2


16
color:green;

Here we defined three CSS rules which will be applicable to three different classes defined for
the HTML tags. I suggest you should not bother about how these rules are being defined because
you will learn them while studying CSS. Now let's make use of the above external CSS file in
our following HTML document −

<html>

<head>

<title>HTML External CSS</title>

<link rel = "stylesheet" type = "text/css" href = "/html/style.css">

</head>

<body>

<p class = "red">This is red</p>

<p class = "thick">This is thick</p>

<p class = "green">This is green</p>

<p class = "thick green">This is thick and green</p>

</body>

</html>

Internal Style Sheet


If you want to apply Style Sheet rules to a single document only, then you can include those
rules in header section of the HTML document using <style> tag.

Rules defined in internal style sheet overrides the rules defined in an external CSS file.

Example

Let's re-write above example once again, but here we will write style sheet rules in the same
HTML document using <style> tag −

<html>

<head>

Regal College, Kalyan F.Y.BCA Web-Part2


17
<title>HTML Internal CSS</title>

<style type = "text/css">

.red {

color: red;

.thick{

font-size:20px;

.green {

color:green;

</style>

</head>

<body>

<p class = "red">This is red</p>

<p class = "thick">This is thick</p>

<p class = "green">This is green</p>

<p class = "thick green">This is thick and green</p>

</body>

</html>

Inline Style Sheet

You can apply style sheet rules directly to any HTML element using styleattribute of the relevant
tag. This should be done only when you are interested to make a particular change in any HTML
element only.

Rules defined inline with the element overrides the rules defined in an external CSS file as well
as the rules defined in <style> element.

Regal College, Kalyan F.Y.BCA Web-Part2


18
Example

Let's re-write above example once again, but here we will write style sheet rules along with the
HTML elements using style attribute of those elements.

<html>

<body>

<p style = "color:red;">This is red</p>

<p style = "font-size:20px;">This is thick</p>

<p style = "color:green;">This is green</p>

<p style = "color:green;font-size:20px;">This is thick and green</p>

</body>

</html>

The id Attribute

To define a specific style for one special element, add an id attribute to the element:

<p id="p01">I am different</p>

then define a style for the element with the specific id:

Example

<!DOCTYPE html>

<html>

<head>

<style>

#p01 {

color: blue;

</style>

Regal College, Kalyan F.Y.BCA Web-Part2


19
</head>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p id="p01">I am different.</p>

</body>

</html>

Note: The id of an element should be unique within a page, so the id selector is used to select
one unique element!

The class Attribute

To define a style for special types of elements, add a class attribute to the element:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

Example

<!DOCTYPE html>

<html>

<head>

<style>

.error {
color: red;

</style>

</head>

<body>

Regal College, Kalyan F.Y.BCA Web-Part2


20
<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p class="error">I am different.</p>

<p>This is a paragraph.</p>

<p class="error">I am different too.</p>

</body>

</html>

Regal College, Kalyan F.Y.BCA Web-Part2


21

You might also like