Scribd
Upload
33 views23 pages

WT & Ecommerce Unit II

Uploaded by

piyushdongre1010
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
33 views23 pages

WT & Ecommerce Unit II

Uploaded by

piyushdongre1010
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/ 23

BCA I UNIT II

HTML
1. Explain the working of frames with example.
2. What is HTML? Explain versions of HTML and basic tags of HTML with example.
3. Explain the working of Image tag with example.
4. Explain internal and external hyperlinking with example.
5. Explain <from> tag with example.
6. Explain <table> tag with example.
7. Explain any 8 HTML tags.
8. How can we create hyperlink in a Web Page? Write step to apply Hyperlink Targets to a
frame.
9. Write short note on the following-
Frame
HTML Control

What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and
web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you
click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two
or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and formatting
conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into
images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A
web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of
HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and
which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML
tag contains different content.

Let's see a simple example of HTML.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Test it Now
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web
document. It is a container for all other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the metadata(information about
the document). It must be closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser
window. It must be placed inside the head tag and should close immediately. (Optional)

<body> : Text between body tag describes the body content of the page that is visible to the end user. This tag
contains the main content of the HTML document.

<h1> : Text between <h1> tag describes the first level heading of the webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.

Brief History of HTML


In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN
researchers. In 1989, he wrote a memo proposing an internet based hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a document called
"HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5, which we will learn later in
this tutorial.

HTML Versions
Since the time HTML was invented there are lots of HTML versions in market, the brief introduction about the
HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML language, and it was
released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard language version for website
design. HTML 2.0 was able to support extra features such as form-based file upload, form elements such as text box,
option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of creating tables
and providing support for extra options for form elements. It can also support a web page with complex
mathematical equations. It became an official standard for any browser till January 1997. Today it is practically
supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version of HTML
language. This version is the current official standard, and it provides added support for stylesheets (CSS) and
scripting ability for various multimedia elements.

HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this version was
announced in January 2008. There are two major organizations one is W3C (World Wide Web Consortium), and
another one is WHATWG( Web Hypertext Application Technology Working Group) which are involved in the
development of HTML 5 version, and still, it is under development.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along with the text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of
browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh,
etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more
attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.

HTML <!DOCTYPE> tag


On the HTML document you have often seen that there is a <!DOCTYPE html> declaration before the <html> tag.
HTML <!DOCTYPE> tag is used to inform the browser about the version of HTML used in the document. It is
called as the document type declaration (DTD).

Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser about the document type. It is a
null element which does not contain the closing tag, and must not include any content within it.

Actually, there are many type of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset,
XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc.

The doctype declaration differs between HTML versions. The HTML 5 doctype declaration is given below.

Syntax
<!DOCTYPE html>

Following are some specifications about the HTML <!DOCTYPE>

Display None

Start tag/End tag Start tag only

Usage Structural

Let's see an example of HTML document with doctype declaration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This is the title</title>
5. </head>
6. <body>
7. This is the content of the document.
8. </body>
9. </html>

HTML <html> Tag


The <html> tag in HTML is used to define the root of HTML and XHTML documents. The <html> tag tells
the browser that it is an HTML document. It is the second outer container for everything that appears in an
HTML document followed by the <!DOCTYPE> tag. The <html> tag requires a starting and end tag.
Syntax:

<html> HTML Contents... </html>

Example 1:

• HTML

<!DOCTYPE html>
<!-- html tag starts here -->
<html>

<body>

<h1>GeeksforGeeks</h1>
<h2><html> Tag</h2>

</body>

</html>
<!-- html tag ends here -->

Output:

HTML - The Head Element


The HTML <head> element is a container for the following elements: <title>,

<style>,
<meta>,
<link>
<script>
<base>.
The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag
and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML <title> Element

The <title> element defines the title of the document. The title must be text-only, and it is shown in the
browser's title bar or in the page's tab.

The <title> element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used
by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

• defines a title in the browser toolbar

• provides a title for the page when it is added to favorites

• displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

A simple HTML document:

Example

<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>

The HTML <style> Element

The <style> element is used to define style information for a single HTML page:

Example

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element

The <link> element defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets:

Example

<link rel="stylesheet" href="mystyle.css">

The HTML <meta> Element

The <meta> element is typically used to specify the character set, page description, keywords, author of
the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload
page), by search engines (keywords), and other web services.

Examples

Define the character set used:

<meta charset="UTF-8">

Example

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

The HTML <script> Element

The <script> element is used to define client-side JavaScripts.

The following JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":

Example

<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

The HTML <base> Element

The <base> element specifies the base URL and/or target for all relative URLs in a page.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document!

Example
Specify a default URL and a default target for all links on a page:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

HTML head Elements

Tag Description

<head> Defines information about the document

<title> Defines the title of a document

<base> Defines a default address or a default target for all links on a page

<link> Defines the relationship between a document and an external resource

<meta> Defines metadata about an HTML document

<script> Defines a client-side script

<style> Defines style information for a document

<body> tag

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.

Note: There can only be one <body> element in an HTML document.

Example

A simple HTML document:

<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>,
and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:

Example

<h1 style="font-size:60px;">Heading 1</h1>

Aligning the headings


Syntax

Following is the syntax for the heading alignment in HTML.

<h1 align="left | right | center | justify">

Example

Following is the example program for the heading alignment in the center.
<!DOCTYPE html>
<html>
<body>
<h1 align="center">Tutorials point </h1>
</body>
</html>

HTML Lists

HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Links

What is a link?

It is a connection from one web resource to another. A link has two ends, An anchor and direction. The link
starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as
an image, a video clip, a sound bite, a program, an HTML document or an element within an HTML
document. You will find many websites or social media platforms ( Like YouTube, and Instagram ) which
link an image to a URL or a text to a URL etc.
This basically means that by using the ‘a’ tag, you can link 1 element of the code to another element that
may/may not be in your code.

HTML Link Syntax

Links are specified in HTML using the “a” tag.


Syntax Explanation:

href : The href attribute is used to specify the destination address


of the link used. "href" stands for Hypertext reference.

Text link : The text link is the visible part of the link.
It is what the viewer clicks on.

Input :

<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>

<body>
<p>Click on the following link</p>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
</body>

</html>

Output :

Internal Links
An internal link is a type of hyperlink whose target or destination is a resource, such as an image or
document, on the same website or domain.

Input:

<!DOCTYPE html>
<html>
<h3>Internal Link And External Link Example</h3>

<body>
<!--internal link-->
<p>
<a href="https://www.geeksforgeeks.org/html-links/?ref=gcse">
GeeksforGeeks Contribute
</a>
It is a link to the contribute page on GeeksforGeeks' website.
</p>

<!--external link-->
<p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
It is a link to the GeeksforGeeks website on the World Wide Web.
</p>
</body>

</html>

Output :

Changing Link Colours in HTML


Different types of links appear in different formats such as:
1. An unvisited link appears underlined and blue in colour by default.
2. A visited link appears underlined and purple in colour by default.
3. An active link appears underlined and red in colour by default.

HTML Links - Different Colors


An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or
is active.

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

You can change the link state colors, by using CSS:


Example
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An
active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become
red and underlined:

<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>

External link and Internal Hyperlink


1. Internal Link : Internal links are hyperlinks that direct the readers to a target page on your website. Internal link is a
link from one page to another page on the same domain.
Example are website navigation.

Advantages of good internal link are :

• Internal link improves usability through anchor text.


• Internal linking improves page rank.
• Internal linking boots page views.
• Internal link decreases the bounce rate.
• Internal linking improves the indexing of your site.
2. External Link : External links are that which wants customers clicking on links that directs them away from your
website. External links are sometimes called outbound links are an important part of search engine optimization.
Example of external link are example.com, someplace.com etc.

Advantages of good external linking are :

• External link may helps the readers.


• Good external link helps to improve the authority of your website.
• Linking to outside website will not hurt your page rank .
• External link is just like your giving some extra resources to read that.
• External links help in enhancing credibility.
•
Difference between external link and internal link :

External link Internal link

It is difficult to control. It is easy, fast and free to control.

It appears within the body text, in content. It appears in website navigation as well as in the content.

It passes SEO authority from other site to your site, It passes SEO authority pages on your site, increasing
increasing your “domain authority”. the “page authority” of specific pages.

It has more value. It has less value.

It connects to your external pages. It connects to your internal pages.

Domain 1 A links to Domain 2 b. Domain 1 A links to B.

It improves the quality of web pages. It helps bots to find other web pages on your site.

It helps in increasing traffic to your website. It also helps in increasing traffic to your website.

HTML Images
Images can improve the design and the appearance of a web page.

Example
<img src="pic_trulli.jpg" alt="Italian Trulli">

Example
<img src="img_girl.jpg" alt="Girl in a jacket">

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.


Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding
space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:


• src - Specifies the path to the image
• alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

The src Attribute


The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into
the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your
visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of
slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

How To Add a Border to an Image


Use the border property to add a border to an <img> element:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
border: 5px solid;
}
</style>
</head>
<body>
<h2>Border Around Image</h2>
<p>Use the border property to add a border to an image:</p>
<img src="img_snow.jpg" alt="Snow" style="width:150px">
</body>
</html>
Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

How to align Image in HTML?

Image alignment is used to move the image at different locations (top, bottom, right, left, middle) in our web
pages. We use <img> align attribute to align the image. It is an inline element.

<img align=”left|right|middle|top|bottom”>
<!DOCTYPE html>
<html>
<head>
<style>
img
{
border: 5px solid;
}
</style>
</head>
<body>
<h2>Border Around Image</h2>
<p>Use the border property to add a border to an image:</p>
<img align = "right" src="img_snow.jpg" alt="Snow" style="width:150px">
</body>
</html>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img
{
border: 5px solid;
}
</style>
</head>
<body>
<a href="https://www.geeksforgeeks.org">">
<img src="smiley.jpeg" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria


Island Trading Helen Bennett UK

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.

Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.

HTML <caption> Tag


Definition and Usage
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.

Example
A table with a caption:

<table>
<caption>Monthly savings</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

EMIL TOBIAS LINUS

HTML Table Headers


Table headers are defined with th elements. Each th element represents a table cell.

<table>
<caption>Monthly savings</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Setting a table border in html


HTML tables can have borders of different styles and shapes.

How To Add a Border


To add a border, use the CSS border property on table, th, and td elements:
Example
table, th, td
{
border: 1px solid black;
}

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border:

Example
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}

HTML <table> align Attribute

The HTML <table> align Attribute is used to specify the alignment of the table and its content.

Syntax:
<table align="left | right | center">

Example

<table align=”center”>
<caption>Monthly savings</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Changing background color of a table

If you set a background color of each cell, and give the border a white color (the same as the document background),
you get the impression of an invisible border:
Example
<table align=”center” bgcolor="green">
<caption>Monthly savings</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Setting cell padding and cell spacing

Cell Padding

The cell padding is used to define the spaces between the cells and its border. If cell padding
property is not applied then it will be set as the default value.
Example:
th, td {
padding: 20px;
background-color:none;
}

Cell Spacing
The cell spacing is used to define the space between the cells.

Example:
table
{
border-spacing: 30px;
}

Spanning rows and column

HTML Table – Rowspan

To make a cell span over multiple rows, use the rowspan attribute:
To do this, use the colspan attribute on the <th> element:

<table>
<tr>
<th rowspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table – Colspan


To make a cell span over multiple columns, use the colspan attribute:

<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Name Age

Jill Smith 50

Eve Jackson 94

Working with frames

HTML <frame> tag define the particular area within an HTML file where another HTML web page
can be displayed.

A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames,
and each frame can contain different web pages.
Syntax
1. < frame src = "URL" >

Following are some specifications about the HTML <frame> tag

Display Block

Start tag/End tag Start tag(required), End tag(forbidden)

Usage Frames

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="https://www.w3schools.com">
8. <frame src="https://www.w3schools.com">
9. <frame src="https://www.w3schools.com">
10. </frameset>
11. </html>

Create Horizontal frames:


1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset rows="30%, 40%, 30%">
7. <frame name="top" src="https://www.w3schools.com">
8. <frame name="main" src="https://www.w3schools.com">
9. <frame name="bottom" src="https://www.w3schools.com">
10. </frameset>
11. </html>

HTML | <frame> frameborder Attribute

The HTML <frame> frameborder attribute is used to specify whether or not a border should be
displayed between the frames. For this, we use two values 0 and 1, where 0 defines no border and 1
defines the border.

Syntax

<frame frameborder="1|0">

Attribute Values:
• 0: It has a default value. It sets the border on one state.
• 1: It sets the border off state.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="https://www.w3schools.com" frameborder="1" />
8. <frame src="https://www.w3schools.com" frameborder="1" />
9. <frame src="https://www.w3schools.com" frameborder="1" />
10. </frameset>
11. </html>
Applying Hyperlink target to a frame

he HTML <iframe> tag specifies an inline frame.


An inline frame is used to embed another document within the current HTML document.

Syntax
<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

iframe - Target for a Link

An iframe can be used as the target frame for a link.


The target attribute of the link must refer to the name attribute of the iframe:

Example
<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%"


title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>

<p>When the target attribute of a link matches the name of an iframe, the link will open
in the iframe.</p>

</body>
</html>

You might also like