Subject: INTRODUCTION TO WEB DESIGNING
Subject Code: 100219
Chapter 2: Introduction to HTML
What is HTML
HTML (Hypertext Markup Language) is the standard language used to create and structure
content on the web. It is the backbone of web development and is used to define the structure
of web pages, such as headings, paragraphs, links, images, and other elements.
More About of HTML:
Markup Language: HTML is a markup language, meaning it uses "tags" or "elements" to
describe the content on the web. These tags tell the browser how to display text, images,
links, and other content.
Structure: HTML is used to structure the content of a web page in a logical way. For
example, it can define headings, paragraphs, tables, forms, and other elements.
Hypertext is text which contains links to other texts.
Markup Lang. it’s a way to give instructions to a computer about how content should
be organized and displayed.
History
HTML Editors
1. Notepad
2. Brackets
3. Sublime Text Editor
4. Atom
5. Visual Studio Code
HTML Structure
HTML Tags:-
HTML tags are used to mark-up HTML elements .HTML tags are surrounded by the two
characters < and >. The surrounding characters are called angle brackets. HTML tags
normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end
tag . The text between the start and end tags is the element content . HTML tags are not case
sensitive, means the same as.
The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Headings Tag
In HTML, headings range from <h1> to <h6>, with <h1> being the most important and
largest, and <h6> being the least important and smallest.
<h1>: Main heading or the highest priority heading.
<h2> to <h6>: Subheadings, with <h2> being used for secondary importance, and so on,
decreasing in size and priority.
<h1>Main Heading</h1>
<h2>Secondary Heading</h2>
<h3>Subheading 1</h3>
<h4>Subheading 2</h4>
<h5>Subheading 3</h5>
<h6>Subheading 4</h6>
Example
Output
Title
The <title> tag in HTML is used to define the title of a web page. This title appears in the
browser's title bar or tab, and it is also used by search engines as the clickable headline in
search results.
Example
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my blog</title>
</head>
<body>
<h1>Blog Homepage</h1>
<p>This is my homepage of my bolg</p>
</body>
</html>
Output
Paragraphs:-
Paragraphs are defined with the tag. Think of a paragraph as a block of text. You can use the
align attribute with a paragraph tag as well.
<p>Lets start HTML.</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>Welcome to IWD</title>
</head>
<body>
<h1>Homepage</h1>
<p>Paragraph 1: Short Paragraph</p>
<p>Paragraph 2: Long Paragraph, this is a long paragraph with more text to fill an entire
line in the website.</p>
<p align="left">This is a paragraph</p>
<p align="center">This is a paragraph</p>
<p align="right">This is a paragraph</p>
</body>
</html>
Output
Pre-formatted Text in HTML
As we have discussed, paragraphs cannot preserve extra lines and space. If we need to create
content that uses multiple spaces and lines, we can use the HTML <pre> tag.
Example
<pre>
This text
will be
displayed
in the same manner
as it is written
</pre>
Output
HTML text formatting
HTML provides us with several tags to help format text, <b> for bold, <i> for italic, <u> for
underlining, etc.
Below are listed the formatting tags available in the latest version of HTML.
<b> tag - Bold Text
<i> tag - Italic Text
<u> tag - Underlined Text
<strong> tag - Strong Text
<em> tag - Emphasized Text
<mark> tag - Highlighted Text
<sup> tag - Superscript Text
<sub> tag - Subscript Text
<del> tag - Deleted Text
<ins> tag - Inserted Text
<big> tag - Big Text
<small> tag - Small Text
HTML <b> and <strong> tag
The HTML <b> is a physical tag used to simply make text bold.
Syntax
<p> This text is <b>bold</b>.</p>
The HTML <strong> tag is a semantic tag that is used to signify that the text inside the tag is
of higher importance. This is shown by making the text bold.
Syntax
<p> The text is <strong>strong</strong>.</p>
HTML <i> and <em> tag
The HTML <i> tag is a physical tag used to make the text italic. It is used to indicate foreign
text.
Syntax
<p> This text is <i>italic</i>.</p>
The HTML <em> tag is a semantic tag that is used to signify that the text inside the tag is
being emphasized.
Syntax
<p> This text is <em>emphasized</em>.</p>
HTML <u> tag
The HTML <u> tag is a physical tag used to make the text underlined.
Syntax
<p> This text is <u>underlined</u>.</p>
HTML <mark> tag
The HTML <mark> tag is a physical tag that is used to highlight text.
Syntax
<p> This text is <mark>marked</mark>.</p>
HTML <sup> and <sub> tag
The HTML <sup> tag is used to create superscript text. The text is placed half a character
height above other text and is a size smaller.
Syntax
<p> This text is <sup>superscripted</sup>.<p>
Example
<p>10<sup>th</sup>marks=290</p>
Output
The HTML <sub> tag is used to create subscript text. The text is placed half a character
height below other text and is a size smaller.
Syntax
<p> This text is <sub>subscripted</sub>.<p>
Example
<p>H<sub>2</sub>o</p>
HTML <ins> and <del> tag
The HTML <del> tag is a semantic tag used to represent that the text is deleted or changed.
Syntax
<p> This text is <del>deleted</del>.</p>
The HTML <ins> tag is a semantic tag used to represent that the text has been inserted in the
document. The <ins> tag generally follows some deleted text.
<p> This text is <del>deleted</del> <ins>inserted</ins>.</p>
HTML <big> and <small> tag
The HTML <big> tag is a physical tag used to make text one font size larger than the
surrounding text.
Syntax
<p> This text is <big>bigger</big>.</p>
The HTML <small> tag is a physical tag used to make text one font size smaller than the
surrounding text.
Syntax
<p> This text is <small>smaller</small>.</p>
Example of Text Formatting
<!DOCTYPE html>
<html>
<head>
<title>Text Tag Example</title>
</head>
<body>
<p> This text is <b>bold</b>.</p>
<p> The text is <strong>strong</strong>.</p>
<p> This text is <i>italic</i>.</p>
<p>10<sup>th</sup>marks=290</p>
<p>H<sub>2</sub>o</p>
<p> Check out this example,<ins> to insert a new paragraph.</ins></p>
<p>Check out this example,<del>this text will be deleted.</del></p>
<p>Big Font:<big> This is an example to show Larger Text.</big></p>
<p>Small Font:<small> This is an example to show Smaller Text.</small></p>
<p>This is normal text.</p>
<p><em>This is emphasized text.</em></p>
</body>
</html>
Output
<br> Tag (Line Break)
The <br> tag is used to insert a line break within text.
Example
<!DOCTYPE html>
<html >
<head>
<title>BR Tag Example</title>
</head>
<body>
<p>This is the first line of text.<br>Now, the text continues on the next line without
starting a new paragraph.</p>
</body>
</html>
Output
HTML style Attribute(HTML color)
We can add CSS inside the style attribute used within the HTML tag using property and
value pair inside the double quotes of the style attribute. If we have multiple property-value
pairs, then they are separated by a semicolon (;).
1. Color
This property is used to specify the font color of the text using the color name, HEX code, or
the RGB code of the color.
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Welcome to VVIT</h1>
</body>
</html>
Output
2. background-color
This property is used to set the background color of various HTML elements
like div, span, body, etc. Use the HEX code or RGB code or the color name of the color you
want.
Example
<!DOCTYPE html>
<html>
<body>
<!--<h1 style="color:blue;">Welcome to VVIT</h1>--> // comment this line
<h2 style="background-color:blue; color:white">Welcome to IWD class</h2>
</body>
</html>
Output
3. font-size
This property is used to set the font size of the text. You can use different units for this
like px.
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:56px">This is a header</h1>
</body>
</html>
Output
4. border
This property is used to set the border width, border type, and border color.
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="border:1px solid red">This is a header</h1>
</body>
</html>
Output
Example of Style Attribute
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Welcome to VVIT</h1>
<h2 style="background-color:blue; color:white">Welcome to IWD class</h2>
<h3 style="font-size:56px">This is a header</h3>
<h4 style="border:1px solid red">This is a header</h4>
</body>
</html>
Output
HTML Comments
Comments are explanations in the source code of a computer program. They are added to
make the program code easier for people to understand. Comments explain the intent behind
your code to others and yourself, especially when you check the code after months.
Comments do not appear on the front end or browser.
Types of HTML Comments
In HTML, there are three types of comments
Single-line comment
Inline comment
Multi-lines comment
Single-line Comments
A single-line comment spans one line. These comments are short and appear online on one
line.
Example
<!DOCTYPE html>
<head>
<title>Comment in HTML</title>
</head>
<body>
<!-- <p> This is an example of single-line comment.</p>-->
<p> This is an example of single-line comment.</p>
</body>
</html>
Output
Inline Comments
In HTML, we can add comments in the middle of a line of code or sentence. The text which is written
inside the <!– –> element will be commented out and the web browser will show the rest of the text.
Example
<!DOCTYPE html>
<head>
<title>Comment in HTML</title>
</head>
<body>
<p>This is <!—an example of--> Inline Comment</p>
</body>
</html>
Output
Multi-lines Comments
Multi-line comments are those that span multiple lines. They are similar to the single-line comments,
except that multi-line comments close on a new line. Multi-line comments also begin with the start tag
<!- - and end with the closing tag - ->.
Example
<!DOCTYPE html>
<head>
<title>Comment in HTML</title>
</head>
<body>
<p>This is <!—an example of--> Inline Comment</p>
<!-- <p>
This is a multi-line comment. It can
have multiple lines. No matter how many
lines you add, comments will not appear on the web browser.
</p>-->
<p> This is an example of multi-line comment.</p>
</body>
</html>
Output
List in HTML
A list refers to any information displayed in a logical or linear form. It is a series of items
written together in a meaningful group or sequence and marked by bullet points, numbers,
etc.
There are mainly two types of lists in HTML:
Ordered list
Unordered list
Unordered List or Bulleted List
In HTML unordered list, the list items have no specific order or sequence. An unordered list
is also called a Bulleted list, as the items are marked with bullets. It begins with the <ul> tag
and and closes with a </ul> tag. The list items begin with the <li> tag and end with </li> tag.
Syntax
<ul>List of Items</ul>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>
Output
example to show the use circle to list the items
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ul type ="circle">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>
Output
Ordered List or Numbered List (ol)
In HTML, all the list items in an ordered list are marked with numbers by default instead of
bullets. An HTML ordered list starts with the <ol> tag and ends with the </ol> tag. The list
items start with the <li> tag and end with </li> tag.
Syntax
<ol>List of Items</ol>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
</body>
</html>
Output
Different Types of Ordered Lists in HTML
Instead of numbers, you can mark your list items with the alphabet: A, B, C or a,b,c, or
roman numerals: i, ii, iii, etc. You can do this by using the <ol> tag type attribute. Let’s
explore how to order lists with alphabets and roman numbers.
To mark the list items with letters A, B, C, etc., you must specify A as the type attribute’s
value in the <ol> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="A">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Output
example to show the use of Lower case letters to list the items
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="a">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Output
example to show the use of Roman numerals to list the items
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="i">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Output
HTML IMG Tag
The HTML <img> tag is used to embed images in a web page. It is an empty or self-closing
tag, meaning it doesn’t have a closing tag. It allows to display images from various sources,
such as files on a website or URLs from other websites.
Syntax
<img src="./[Link]" alt="image description" width="200" height="100">
Example
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="[Link]
direction-
[Link]?s=1024x1024&w=is&k=20&c=9Qfj9S124ojed7s4OWu3a3vbbMC76QYkqczg4L4
M-Sc=" hright="200" width="300">
</body>
</html>
Output
HTML image Tag Attributes
src: Specifies the path to the image
alt: Provides alternate text for the image, useful for informing users about the image and
displaying in case of network issues.
height and width: Specifies the height and width of the image.
Example
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="[Link]
[Link]" alt="tree image">
</body>
</html>
Output
HTML Links Hyperlinks
HTML Links, also known as hyperlinks, are defined by the <a> tag in HTML, which stands
for "anchor." These links are essential for navigating between web pages and directing users
to different sites, documents, or sections within the same page.
Syntax
<a href="url">link text</a>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="[Link]
about anchor tag
</a>
</body>
</html>
Output
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this,
you must specify another target for the link.
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
[Link]
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="[Link]
target="_blank">
about anchor tag
</a>
</body>
</html>
Use an Image as a Link in HTML
We can add image as a link and other HTML elements as a link. A link is a connection from
one Web page to another web page.
We can add page links to a web page. HTML links are hyperlinks. The <a> tag defines a
hyperlink and used to link from one page to another. The href attribute is used with
the <a> tag, which indicates the link's destination.
Syntax
<a href="link address"><img src="image destination"></a>
Example
<!DOCTYPE html>
<html>
<head>
<title> My Website </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<h2> Apply link on image</h2>
<a href="[Link]
<img src="picture/image/[Link]" height="60px" width="60px">
</body>
</html>
Table Tag:
The <table> tag in HTML is used to create a table on a webpage. Tables allow you to
organize data into rows and columns, which makes it easier to present and read structured
information.
Basic Structure of a Table:
A table in HTML consists of several elements:
<table>: The container element that defines the table.
<tr>: Represents a row in the table.
<td>: Represents a cell in the table (where data is placed).
<th>: Represents a header cell, typically used to define column or row headers.
Example
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Ram</td>
<td>Singh</td>
<td>33</td>
</tr>
</table>
</body>
</html>
Output
Styling HTML Tables - Adding CSS
we use CSS (Cascading Style Sheets) to add styles such as borders, background colors, text
alignments, and much more. Here are some basic styles to make your table look neater and
more professional:
1. Adding a Border to an HTML Table
A border is set using the CSS border property. If you do not specify a border for the table, it
will be displayed without borders.
Syntax
table, th, td {
border: 1px solid black;
}
Example
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
<style>
table,
th,
td {
border: 1px solid black;
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Ram</td>
<td>Singh</td>
<td>33</td>
</tr>
</table>
</body>
</html>
Output
2. Adding Collapsed Borders in an HTML Table
For borders to collapse into one border, add the CSS border-collapse property.
Syntax
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Example
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Ram</td>
<td>Singh</td>
<td>33</td>
</tr>
</table>
</body>
</html>
Output
3. Adding Left Align Headings in an HTML Table
By default, the table headings are bold and centered. To left-align the table headings, we must
use the CSS text-align property.
Syntax
th {
text-align: left;
}
Example
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
th,
td {
padding: 20px;
th {
text-align: left;
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output
HTML Table Rowspan & Colspan
In HTML table design, the Colspan and Rowspan attributes are mainly used for defining the
structure and layout of the table. Colspan attribute defines how many columns a cell should
span horizontally and is a handy tool for headers grouping columns. Conversely, Rowspan
attribute determines the number of rows a cell should cover vertically helping in various tasks
like merging cells for a clear and organized appearance.
These attributes are essential for customizing the look of overall HTML tables, enabling both
horizontal and vertical cell merging. Understanding and using Colspan and Rowspan
provides great control over table layout, resulting in a more efficient and organized
presentation of information.
Colspan
Example
<html>
<head>
<title> Colspan </title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th colspan="2"> Telephone No. <th>
</tr>
<tr>
<td> Rahul </td>
<td> 1234567890 </td>
<td> 0987654321</td>
</tr>
</table>
</body>
</html>
Output
Rowspan
Example
<html>
<head>
<title> Rowspan </title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Telephone No. <th>
</tr>
<tr>
<td rowspan="2"> Rahul </td>
<td> 1234567890 </td>
</tr>
<tr>
<td> 0987654321 </td>
</tr>
</table>
</body>
</html>
Output
<div> tag in HTML
The <div> tag in HTML is a block-level element for grouping other HTML elements. "Div"
stands for "division" or "divider," and it's one of the most commonly used elements for
structuring and styling web pages.
Features of <div> Tag
A <div> takes up the entire width available to it, creating a block. This means that
any content following a <div> starts on a new line.
<div> tags are often used with CSS (Cascading Style Sheets) to style elements
grouped within them. They can be styled with properties like width, height,
background color, margin, padding, and more.
<div> tags are ideal for grouping together elements that form a section or a part of the
webpage. This grouping can be useful for applying styles or for layout purposes,
especially when used with CSS Flexbox or Grid systems.
<div> element does not add any visual change to the content by itself. It’s primarily a
structural element, and any visual styling needs to be defined with CSS.
<div> tags are versatile and can contain almost any other HTML element, including
headings, paragraphs, links, images, and other <div> tags.
With the introduction of HTML5, more semantic elements like <section>, <article>,
<header>, and <footer> are often preferred over <div> for better document structure
and search engine optimisation. However, <div> remains useful for general-purpose
grouping where no other semantic element is appropriate.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div style="background-color:aqua;">
<h1>This is heading</h1>
<p> Welcome </p>
<ul>
<li> Apple </li>
<li> Mango </li>
<li> Orange </li>
<li> Cherry </li>
</ul>
</div>
</body>
</html>
Output
<span> tag in HTML
The <span> tag in HTML is an inline element used for styling and grouping inline content
within a webpage. Unlike block-level elements like <div>, which create a new block or line
in the layout, <span> allows for styling or grouping without affecting the document's flow.
Features of <span> Tag
The <span> tag does not cause a line break or block formation, meaning the content
remains inline with other elements or text. It's used for small-scale adjustments or
styling within the flow of a document.
<span> is commonly used with CSS (Cascading Style Sheets) to apply specific styles
to a part of the text or content, such as changing the color, font, or background of
selected text without altering the rest of the text around it.
By itself, a <span> tag does not add any formatting or visual change to the content.
It's used as a hook for CSS styles or JavaScript functions.
<span> can be used to group together inline elements or text for styling or scripting
purposes. It’s especially useful when you want to target a specific part of the text or
inline elements with a class or id.
The <span> tag is semantically neutral, meaning it doesn’t convey any specific
meaning about its content. This is in contrast to more semantically specific tags
like <em> for emphasis or <strong> for important content.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div style="background-color:aqua;">
<h1>This is heading</h1>
<p> Welcome </p>
<ul>
<li> Apple </li>
<li> Mango </li>
<li> Orange </li>
<li> Cherry </li>
</div>
<p>This is an example of a <span style="background-color:RED;" >span tag bacground
red</span></p>
<p> no grouping </p>
</body>
</html>
Output
character entities in HTML
HTML character entities are basically a set of characters (entity) used to represent few
characters reserved by the HTML, especially invisible characters or characters difficult to
type out using a regular keyboard. HTML provides some entity names and entity numbers to
use these symbols.
Syntax:
&entity_name; or &#entity_number;
Some useful symbols with their entity name and entity numbers are discussed below:
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Character entities</title>
</head>
<body>
<h3>Indian rupee sign = ₹</h3>
<h3>Euro sign = €</h3>
<h3>Dollar sign = $</h3>
<h3>Pound sign = £</h3>
</body>
</html>
Output
HTML URL Encoding
Uniform Resource Locator or URL is used as the address of a document on the web. It can be
composed of words, typically the Domain Name Server(DNS), or IP address. For
example, [Link] is a URL.
The structure of this URL is as follows-
scheme://[Link]:port/path/filename
/Example
[Link]
Here:
Scheme – Defines the internet service type, commonly http or https.
Prefix – Defines the domain prefix, www.
Domain – It defines the domain name of the internet, [Link]
Port – Defines the host’s port number, 80 is the default port number for http.
Path – Defines the path at the server.
Filename – It defines the name of the file or the document that is being displayed.
HTML URL Schemes
Some common URL schemes are-
Http(HyperText Transfer Protocol) – Used for common web-pages. It is not
encrypted.
Https(Secure HyperText Transfer Protocol) – Used for secure web-pages. It is
encrypted.
ftp(File Transfer Protocol) – Used for downloading and uploading files.
Frames
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document independently. 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.
NOTE
The <frame> tag is no longer recommended as it is not supported by HTML5. Instead of
using this tag, we can use the <iframe> or <div> with CSS to achieve the similar effects.
Frameset Tag
The HTML <frameset> tag was used in older versions of HTML to create multi-pane
layouts within a web page. By dividing the browser window into multiple sections, each
frame could display a separate HTML document. This allowed for the creation of complex
web layouts with different content in each pane.
Syntax
<frameset rows="50%,50%">
<frame name="top" src="link/to/frame1" />
<frame name="bottom" src="link/to/frame2" />
</frameset>
Creating Frames in HTML
To make frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of <frameset> tag defines
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.
Example
ROW wise(create three horizontal frames)
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="40%,30%,30%">
<frame src="[Link]"/>
<frame src="[Link]"/>
<frame src="[Link]"/>
</frameset>
</html>
Output
Creating vertical Frames(Cols wise)
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="40%,30%,30%">
<frame src="[Link]"/>
<frame src="[Link]"/>
<frame src="[Link]"/>
</frameset>
</html>
Output
iframe in html
In HTML, the inline frame is defined with the <iframe> tag. This tag creates a rectangular
region at a specified place within the HTML document in which the browser can display an
external document such as a map or another web page.
Syntax
<iframe src="url" title="description"></iframe>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>It is an example of HTML Iframe</p>
<iframe height = "400px" width = "700px"></iframe>
</body>
</html>
Output
Image
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>It is an example of HTML Iframe</p>
<!-- <iframe height = "400px" width = "700px"></iframe> -->
<iframe src="[Link]" height = "400px" width = "700px"></iframe>
</body>
</html>
Output
Video
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>It is an example of HTML Iframe</p>
<!-- <iframe height = "400px" width = "700px"></iframe> -->
<!-- <iframe src="image.1" height = "400px" width = "700px"></iframe> -->
<iframe src="video.1" height = "400px" width = "700px"></iframe>
</body>
</html>
Linking to an Iframe: Target and Name Attributes
You can use an iframe as a target frame to open a webpage on clicking a link.
You can create a target iframe for a link (hyperlink) by using the name attribute of
the <iframe> tag. The value of the name attribute is used in the target attribute of elements
like <form> and <a> to specify the target frame.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<iframe height = "400px" width = "700px" name ="myframe"></iframe>
<br>
<a href="[Link]" target="myframe">Image</a>
</body>
</html>
Output
The <iframe> Tag Attributes
The following table describe the attributes used with the <iframe> tag.