Unit 1 - Web Designing
Uploaded by
priyanka.pkUnit 1 - Web Designing
Uploaded by
priyanka.pkWEB DESIGNING
UNIT I
HTML: HTML-Introduction-tag basics- page structure-adding comments working with texts,
paragraphs and line break. Emphasizing test- heading and horizontal rules-list-font size, face and color-
alignment links-tables-frames.
Introduction to HTML:
HTML (HyperText Markup Language) is the standard language used to create web pages. It structures the
content on the page, including text, images, links, and multimedia. HTML elements are represented by tags that
are interpreted by web browsers to display the content.
Basic Structure of an HTML Document
An HTML document typically follows a basic structure that includes several key elements:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Introduction</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a basic introduction to HTML.</p>
</body>
</html>
Key Components of an HTML Document
1. <!DOCTYPE html>: This declaration tells the browser that the document is written in HTML5. It is
required at the top of every HTML document.
2. <html>: The root element that wraps the entire HTML document.
3. <head>: This section contains meta-information about the document, such as the character set, title, and
viewport settings (for responsiveness).
o <meta charset="UTF-8">: Defines the character encoding, ensuring the document can handle
special characters.
o <title>: Sets the title of the web page that appears on the browser tab.
o <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the
page is responsive on different devices, particularly mobile devices.
4. <body>: The body of the document, where all visible content goes, such as headings, paragraphs,
images, and links.
Common HTML Tags
Headings (<h1> to <h6>): HTML provides six levels of headings, where <h1> is the highest and <h6>
is the lowest.
<h1>Main Heading</h1>
<h2>Subheading</h2>
Paragraph (<p>): Used to define a block of text.
<p>This is a paragraph of text.</p>
Links (<a>): Used to create hyperlinks to other pages or websites.
<a href="https://www.example.com">Visit Example</a>
Images (<img>): Embeds images in the page. The src attribute specifies the image source.
<img src="image.jpg" alt="An example image" width="300">
Lists: HTML supports both ordered (<ol>) and unordered (<ul>) lists.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Forms: HTML forms are used to collect user input.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
HTML Attributes
HTML elements can have attributes that provide additional information. Attributes are placed within the
opening tag.
href (for links): Specifies the URL of the page the link goes to.
src (for images): Specifies the path to the image file.
alt (for images): Provides alternative text if the image cannot be displayed.
id and class: Used to uniquely identify elements or group them together for styling or scripting.
Example:
<a href="https://www.example.com" target="_blank">Go to Example</a>
In this example, href specifies the URL, and target="_blank" opens the link in a new tab.
HTML Document Flow
1. HTML elements are read top to bottom, left to right.
2. Tags: Most HTML tags have an opening tag (e.g., <p>) and a closing tag (e.g., </p>), but some, like
<img>, are self-closing.
3. Nesting: HTML elements can be nested inside one another. Ensure that tags are properly nested (an
open tag must be closed in the reverse order).
HTML Tag Basics
In HTML, tags are the fundamental building blocks used to define the structure and content of a web page.
HTML tags are surrounded by angle brackets, and most elements have an opening tag and a closing tag. Here's
a detailed explanation of the key concepts of HTML tags:
1. HTML Tag Structure
Opening tag: Marks the beginning of an element.
<p>
Content: The actual content or text that is enclosed by the tags.
This is a paragraph.
Closing tag: Marks the end of an element. It is the same as the opening tag but with a forward slash /.
</p>
Putting it all together:
<p>This is a paragraph.</p>
2. Self-Closing Tags
Some HTML tags don't have content and are self-closing. In HTML5, self-closing tags don’t need a closing tag,
but in XHTML (an older standard), a forward slash is used before the closing bracket.
Example of self-closing tags:
<img src="image.jpg" alt="Sample Image">
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->
3. Common HTML Tags
Here’s a breakdown of some of the most commonly used HTML tags:
a. Heading Tags (<h1> to <h6>)
Headings help structure content into different levels of importance, with <h1> being the most important.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
b. Paragraph Tag (<p>)
Used to define a paragraph of text.
<p>This is a paragraph of text in HTML.</p>
c. Anchor Tag (<a>)
Used to create hyperlinks. The href attribute specifies the destination URL.
<a href="https://www.example.com">Click here to visit Example</a>
d. Image Tag (<img>)
Displays images on a webpage. It uses attributes like src for the image source and alt for alternative text.
<img src="image.jpg" alt="Description of the image">
e. List Tags
Unordered List (<ul>): Creates a bullet-point list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List (<ol>): Creates a numbered list.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
f. Form Tag (<form>)
Used to collect user input.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
g. Division Tag (<div>)
A block-level container for grouping elements, often used with CSS for styling and layout.
<div>
<h2>Section Title</h2>
<p>Content goes here.</p>
</div>
4. Attributes
HTML tags can have attributes, which provide additional information about an element. Attributes are written
within the opening tag and usually come in name-value pairs like name="value".
Common Attributes:
href: Used in the <a> tag to specify the URL.
src: Used in the <img> tag to specify the image file location.
alt: Provides alternative text for an image.
class: Used to assign one or more CSS classes to an element for styling.
id: A unique identifier for an element.
Example:
<a href="https://www.example.com" target="_blank">Open Example</a>
target="_blank": Opens the link in a new tab.
5. Nesting Tags
Tags can be nested inside one another, but they must be properly closed. Incorrectly nesting tags can break the
structure of the page.
Correct Nesting:
<div>
<p>This is a paragraph inside a div.</p>
</div>
Incorrect Nesting (will cause errors):
<div>
<p>This is incorrect nesting.</div>
</p>
6. Comments in HTML
Comments are notes within the code that are not displayed in the browser. They are useful for explaining code
or leaving reminders.
<!-- This is a comment -->
<p>This paragraph will be displayed.</p>
7. HTML5 Semantic Tags
HTML5 introduced semantic tags, which give more meaning to the structure of the page.
<header>: Defines the header of a page or section.
<nav>: Represents a navigation menu.
<main>: Main content of the document.
<section>: A section of content.
<article>: Independent content that could stand alone.
<footer>: Footer of a page or section.
Example:
<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</section>
</main>
<footer>
<p>Footer content © 2024</p>
</footer>
HTML Page Structure
An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets
and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document
structure:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- content -->
</body>
</ A typical HTML page looks like this:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Almost every website uses this structure. The main content goes inside the body tag. No worries if this looks
complicated; let's break it down!
Note: These are the essential elements for a basic HTML document: <!DOCTYPE
html>, <html>, <head>, <title>, </head>, <body>, </body>, </html>
DOCTYPE Declaration
<!DOCTYPE html>
The <!DOCTYPE html> declaration informs the web browser about the HTML version being used. The
latest version is HTML5. But if this changes in the future (maybe 10 years down the line), the doctype
declaration will be helpful!
HTML Root Element
<html>
The <html> tag is the root element that encapsulates all the content on the page.
</html>
The </html> tag marks the end of the <html> section.
Head Section
<head>
The <head> tag contains metadata and links to external resources like CSS and JavaScript files.
</head>
The </head> tag marks the end of the <head> section.
Title Tag
<title>Document</title>
The <title> tag sets the title of the web page, which is displayed in the browser's title bar or tab.
Body Tag
<body>
The <body> tag contains the visible content of the web page. This is where text, images, and other elements
go.
</body>
The </body> tag marks the end of the visible content of the web page.
Every HTML page should include at least these essential elements to define the basic layout. In upcoming
tutorials, we'll dive deeper into the fascinating world of HTML.
Summary:
The <!DOCTYPE html> tag specifies that the document is an HTML5 document.
The <html lang="en"> tag defines the document to be in English.
The <head> section contains metadata and the title of the webpage, which appears in the browser's
title bar.
The <body> section contains the content that will be displayed on the webpage.
The h1 and p are two types of tags. We will learn about more tags in the later section
1. Adding Comments in HTML
Comments are useful for leaving notes or explanations within your code. Comments are not displayed by the
browser and are ignored during rendering.
Syntax:
<!-- This is a comment -->
Example:
<!-- This section contains a header and a paragraph -->
<h1>Welcome to My Website</h1>
<p>This is the introduction paragraph.</p>
2. Working with Text in HTML
HTML provides basic text formatting tags to style and present content on a web page.
Basic Text Formatting Tags:
<b>: Bold text
<b>This text is bold.</b>
<i>: Italic text
<i>This text is italicized.</i>
<u>: Underlined text
<u>This text is underlined.</u>
<strong>: Indicates strong importance, often bold.
<strong>This text is strongly emphasized.</strong>
<em>: Indicates emphasis, usually italicized.
<em>This text is emphasized.</em>
3. Working with Paragraphs (<p>)
The <p> tag is used to define a block of text, making it a paragraph. Browsers automatically add space before
and after paragraphs.
Syntax:
<p>Your text goes here...</p>
Example:
<p>This is the first paragraph of text. It introduces the main topic of the page.</p>
<p>This is the second paragraph, providing more details and context.</p>
In this example, the two paragraphs will appear one after the other with spacing in between them.
4. Line Breaks (<br>)
If you want to force a line break (without starting a new paragraph), use the <br> tag. It’s a self-closing tag,
which means it doesn’t need an end tag.
Syntax:
<br>
Example:
<p>This is the first line.<br>This is the second line, right after a line break.</p>
Here, the text after the <br> tag will appear on a new line, but it will remain part of the same paragraph.
Combining Comments, Text, Paragraphs, and Line Breaks
Here's how you can combine comments, text formatting, paragraphs, and line breaks in a simple HTML
structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text and Formatting Example</title>
</head>
<body>
<!-- This is a heading for the page -->
<h1>Welcome to My Page</h1>
<!-- Start of the introduction section -->
<p><strong>This is an introduction</strong> to my webpage.</p>
<!-- Main body text -->
<p>This paragraph is giving you an overview of the content.<br>
We can also break the line within the same paragraph.<br>
Here is another line break without starting a new paragraph.</p>
<p><em>Don't forget to check the other sections.</em> We have a lot more content below.</p>
</body>
</html>
Explanation:
1. Comments: Comments are added to explain various parts of the code without affecting the output.
2. Text Formatting: <strong> makes text bold (and adds semantic importance), and <em> italicizes text.
3. Paragraphs: Text is divided into separate blocks using the <p> tag.
4. Line Breaks: The <br> tag is used to force new lines within a paragraph.
Emphasizing Text
You can emphasize text in different ways using tags like <strong>, <em>, <b>, and <i>.
Bold (<b> or <strong>)
<b>This text is bold.</b>
<strong>This text is important and bold.</strong>
Italic (<i> or <em>)
<i>This text is italicized.</i>
<em>This text is emphasized and italicized.</em>
2. Headings (<h1> to <h6>)
Headings help structure your content. <h1> is the most important, and <h6> is the least.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
3. Horizontal Rules (<hr>)
Use the <hr> tag to insert a horizontal line that separates sections.
<p>This is the first section.</p>
<hr>
<p>This is the second section, separated by a horizontal line.</p>
4. Lists
HTML supports two types of lists: unordered (bulleted) and ordered (numbered).
Unordered List (<ul>)
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List (<ol>)
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
5. Font Size, Face, and Color
You can customize the font size, face, and color using the style attribute or the deprecated <font> tag. However,
using CSS is the modern and recommended approach.
Using CSS Inline for Font Customization
<p style="font-size:20px; font-family:Arial; color:blue;">This is a customized paragraph.</p>
Using the Deprecated <font> Tag (Not Recommended)
<font size="5" face="Verdana" color="red">This is some text in Verdana font, size 5, and red
color.</font>
6. Text Alignment
You can align text using the align attribute (deprecated) or CSS.
Aligning Text with CSS
<p style="text-align:center;">This text is centered.</p>
<p style="text-align:right;">This text is aligned to the right.</p>
7. Links (<a>)
Use the <a> tag to create hyperlinks.
Basic Link
<a href="https://www.example.com">Visit Example</a>
Open Link in New Tab
<a href="https://www.example.com" target="_blank">Open Example in a New Tab</a>
HTML TABLE:
A table in HTML consists of table cells inside rows and columns.
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.
Example:
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
TABLE ROWS
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example:
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
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.
Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML TABLE TAGS
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
TABLES:
The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under
<td> are regular and left aligned by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
This will produce the following result –
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell.
Normally you will put your top row as table heading as shown below, otherwise
you can use <th> element in any row. Headings, which are defined in <th> tag are
centered and bold by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce the following result –
Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use toadjust the
white space in your table cells.
The cellspacing attribute defines space between table cells, while cellpaddingrepresents
the distance between cell borders and the content within a cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce the following result –
Name Salar
y
Ramesh Raman
5000
Shabbir Hussein
7000
Colspan and Rowspan Attributes
Use colspan attribute if you want to merge two or more columns into a singlecolumn.
Similar way you will use rowspan if you want to merge two or more rows.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
This will produce the following result –
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
Tables Backgrounds
You can set table background using one of the following two ways −
bgcolor attribute − You can set background color for whole table or just for onecell.
background attribute − You can set background image for whole table or just forone cell.
You can also set border color also using bordercolor attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
Table Height and Width
set a table width and height using width and height attributes.
You can specify table width or height in terms of pixels or in terms of percentageof
available screen area.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
This will produce the following result –
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the
table. This tag is deprecated in newer version of HTML/XHTML.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
OUTPUT
This is the caption
row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for
every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should appear before <tbody>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
This will produce the following result –
This is the head of the table
Cell 1 Cell 2 Cell 3 Cell 4
This is the foot of the table
Nested Tables
You can use one table inside another table. Not only tables you can use almost all the tags inside
table data tag <td>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output:
Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000
FRAMES:
HTML frames are used to divide your browser window into multiple sectionswhere
each section can load a separate HTML document.
Introducing Frameset:
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 rowsand columns.
SYNTAX:
<frameset cols=" "> ............ </frameset>
Example:
!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="https://www.javatpoint.com/html-table">
<frame src="https://www.javatpoint.com/css-table">
</frameset>
</html>
Output:
<Frame> elements: Tag-specific attribute
Attribute Value Description
cols Pixels It specifies the number and size of column spaces in theframeset.
% (Not Supported in HTML5)
*
rows Pixels It specifies the number and size of the rows spaces in the
% frameset. (Not Supported in HTML5)
*
r.No Attribute & Description
src
This attribute is used to give the file name that should be loaded in the frame. Its value
1
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 frame a
document should be loaded into. This is especially important when you want to create
2
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
This attribute specifies whether or not the borders of that frame are shown; it overrides
3
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
This attribute allows you to specify the width of the space between the left and right of
4
the frame's borders and the frame's content. The value is given in pixels. For example
marginwidth = "10".
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 inpixels. For
example marginheight = "10".
noresize
By default, you can resize any frame by clicking and dragging on the borders of a frame.
6
The noresize attribute prevents a user from being able to resize the frame. For example
noresize = "noresize".
scrolling
This attribute controls the appearance of the scrollbars that appear on the frame. This
7
takes values either "yes", "no" or "auto". For example scrolling = "no" means it should
not have scroll bars.
longdesc
This attribute allows you to provide a link to another page containing a long description
8
of the contents of the frame. For example longdesc = "framedescription.htm"
Creating Links between Frames :
Creating hyperlinks in HTML frames is a little more complicated than creating them
in standard web pages.
The key difference is outlined in the following:
In a standard web page, clicking on a hyperlink will —by default— reload the original
browser window with the new page.
In a framed web page, on the other hand, clicking on a hyperlink will —by default—
reload the frame in which the hyperlink is located in with the new page.
Loading the new page in the same frame, however, may only be desirable in certain situations.
In other situations, you may instead require that:
A. A hyperlink in one frame loads a new page in another frame. OR
B. A hyperlink loads a new page which breaks out of the frame.
In all cases, to make sure hyperlinks in a framed page perform their intended function, you will
have to do two things:
1. Use the name attribute to give each of your frames a special identity.
2. Use the target attribute in your hyperlinks.
There are also some standard frame target names predefined by the HTML specification which
control other possibilities of handling hyperlinks in frames.
A Link in One Frame Loads a New Page in Another Frame
Example:
<html>
<head>
<title>HTML Frames - A Basic Frame Layout</title>
</head>
<frameset cols="25%,75%">
<frame src="menu.htm" name="menu">
<frame src="chapter1.htm" name="content">
</frameset>
</html>
Setting a default target frame using <base> Elements:
The <base> target Attribute in HTML is used to specify the default targetfor all
hyperlinks and forms in the webpage.
This attribute could also be overridden by the use of the target attributefor each
hyperlink and the Form.
Syntax:
<base target="_blank|_self|_parent|_top|framename" >
Attribute Values:
_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame. it is the default value.
_parent: It opens the linked document in the parent frameset.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame. Example: This
example illustrates the use of target attribute in the <base>element.
Example:
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<title>
HTML Base target Attribute
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML Base target Attribute</h2>
<a href="ide.geeksforgeeks.org/"
alt="GFG"> Geeks Link
</a>
</body>
</html>
Output:
Nested frame sets
Framesets may be nested to any level.
In the following example, the outer FRAMESET divides the available space into three
equal columns. The inner FRAMESET then divides the second area into tworows of
unequal height.
Example:
<FRAMESET cols="33%, 33%, 34%">
...contents of first frame...
<FRAMESET rows="40%, 50%">
...contents of second frame, first row...
...contents of second frame, second row...
</FRAMESET>
...contents of third frame...
</FRAMESET>
Inline or Floating Frames with <iframe>:
Inline Frame or an iframe is allows us to open new pages inside main pages.
Inline frames are also referred to as Floating frames.
<iframe> .. </iframe> tag is used to create inline or floating frame.
Attributes of <iFrame> tag :
name: used to set a name for the iframe.
src: Specifies the url of the document to be loaded into the iframe.
Width: used to specify the width of the iframe.
Height: used to specify the height of the iframe.
Frameborder: used to specify the whether to have a border for the iframe or not.
This attribute possibly takes two values. i.e, 1 for on and 0 for off.
Scrolling: used to specify whether the iframe should have scrolling capability or not.
This attribute possibly takes two values i.e, 1 for on and 0 for off.
vspace: used to leave gaps on the top and bottom of the iframe. This attribute is similar
to cellspacing attribute of a table tag.
hspace: used to leave gaps on the sides of the iframe. This attribute is similar to cellpadding
attribute of a table tag.
marginwidth: used to specify the number of pixels to be left as the left/right
margins.
marginheight: used to specify the number of pixels to be left as the top/bottom
margins.
Example:
<iframe name="iname" src="targetpg.html"></iframe>
Hidden attribute can be added in HTML5
UNIT I COMPLETED
You might also like
- Introduction to Web Technology and HTMLNo ratings yetIntroduction to Web Technology and HTML89 pages
- Web Technologies Time: 2 Hrs. Full Marks: 40 Pass Marks: 16No ratings yetWeb Technologies Time: 2 Hrs. Full Marks: 40 Pass Marks: 162 pages
- 1.squares, Roots, Cubes, Complements Program CodingNo ratings yet1.squares, Roots, Cubes, Complements Program Coding18 pages
- JavaScript Navigator and Screen ObjectsNo ratings yetJavaScript Navigator and Screen Objects32 pages
- To Write A Program To Create A HTML Pages With Frames, Links, Tables and Other TagsNo ratings yetTo Write A Program To Create A HTML Pages With Frames, Links, Tables and Other Tags62 pages
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- On Page SEO Report (Https Shopgoatpowder - Com)No ratings yetOn Page SEO Report (Https Shopgoatpowder - Com)3 pages
- 5 Ways To Get Great "Do-Follow" Links - R - AffiliatemarketingNo ratings yet5 Ways To Get Great "Do-Follow" Links - R - Affiliatemarketing2 pages
