Scribd
Upload
5 views

HTML Notes

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and presentation of content. This document covers fundamental HTML concepts, including basic tags, document structure, and various elements such as headings, paragraphs, links, and images. It also discusses text formatting, tables, and attributes that enhance the functionality and appearance of web pages.

Uploaded by

Technosoft Academy
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
5 views

HTML Notes

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and presentation of content. This document covers fundamental HTML concepts, including basic tags, document structure, and various elements such as headings, paragraphs, links, and images. It also discusses text formatting, tables, and attributes that enhance the functionality and appearance of web pages.

Uploaded by

Technosoft Academy
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/ 18

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?
HTML stands for Hyper Text Markup Language. It is the standard markup language for creating
Websites. It is used to describe the structure of a Web page. HTML consists of elements that tell
the browser how the content is displayed on the screen. We’ll walk you through fundamental
HTML examples and teach you how to create a webpage. This HTML Basics covers fundamental
HTML examples.

In this guide, the basics of HTML include learning HTML tags ( <h1>, <p>, <img>, etc),
attributes, elements, and document structure which collectively form a working web page.
Basic HTML Document

Every HTML document begins with a document type declaration, setting the foundation for the webpage.
This section introduces basic HTML tags that structure the page, such as <head>, <body>, and <title>.
Although this is not mandatory, it is a good convention to start the document with the below-mentioned
tag.

Below mentioned are the basic HTML tags that divide the whole page into various parts like head, body,
etc.

Basic HTML Tags for Document Structure

Tags Descriptions

<html> Encloses the entire HTML document, serving as the root element for all HTML content.

Contains header information about the webpage, including title, meta tags, and linked
<head>
stylesheets. It is part of the document’s structure but is not displayed on the webpage.

Used within the <head> section to define the title of the HTML document. It appears in the
<title>
browser tab or window and provides a brief description of the webpage’s content.

Encloses the visible content of the webpage, such as text, images, audio, videos, and links.
<body>
All elements within this tag are displayed on the actual webpage when viewed in a browser.

<!DOCTYPE html>
<html >

<head>

<title>HTML</title>

</head>

<body>

</body>

</html>
HTML TAGS
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Eg.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Eg.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
HTML Links
HTML links are defined with the <a> tag. The link's destination is specified in the href attribute. Attributes
are used to provide additional information about HTML elements. You will learn more about attributes
in a later chapter.
Eg.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://www.youtube.com">This is a link</a>


</body>
</html>

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Eg.
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>
</body>
</html>

Empty HTML Elements


HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
Eg.
<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>
The <img>tag
The <img> tag is used to embed an image in an HTML page. It’s a empty Tag.
Attributes
The src attribute specifies the path to the image to be displayed:
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be
in violation of copyright laws. In addition, you cannot control external images; it can suddenly be
removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include
the domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".

The width and height Attributes


The <img> tag should also contain the width and height attributes, which specify the width and height of
the image (in pixels):
Eg. :
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src
attribute:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some
reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if
the user uses a screen reader.
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get an
understanding of what the image contains:</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
</body>
</html>
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>

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:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>

The title Attribute

The title attribute defines some extra information about an element.


The value of the title attribute will be displayed as a tooltip when you mouse over the element:
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be
used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single
quotes:
<!DOCTYPE html>
<html>
<body>
<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single
quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>
<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>
</body>
</html>

HTML Line Breaks

The HTML <br> element defines a line break.


Use <br> if you want a line break (a new line) without starting a new paragraph:
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
HTML Text Formatting

HTML text formatting tags enhance web content’s visual presentation and semantic meaning. By using tags
like <b>, <i>, <em>, and <strong>, you can style text as bold, italic, emphasized, or important, improving
readability and user experience on webpages.
Table of Content
 Logical Tags
 Physical Tags
 HTML Formatting Elements
 Example of Text Formatting
 Conclusion
HTML text formatting can be categorized into two techniques:
1. Logical Tags
These tags denote the logical or semantic value of the text. They convey meaning without directly affecting the
visual appearance.
 <em>: Emphasizes text (commonly styled as italic).
 <strong>: Indicates important content (often styled as bold).
2. Physical Tags
These tags directly impact the visual appearance of the text, altering font styles, sizes, and other visual properties.
 <b>: Displays text in a bold format.
 <i>: Italicizes text.
Example of Text Formatting
Example 1: Basic Text Formatting
In this example we demonstrates various text formatting tags: <strong> for important and bold text, <em>
for emphasized and italic text, <b> for bold text, <i> for italic text, and <mark> for highlighted text.
Eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Formatting Example</title>
</head>
<body>
<p>
<strong>Strong:</strong>
This text is important and bold.
</p>
<p>
<em>Emphasized:</em>
This text is emphasized and italic.
</p>
<p>
<b>Bold:</b>
This text is bold.
</p>
<p>
<i>Italic:</i>
This text is italic.
</p>
<p>
<mark>Marked:</mark>
This text is highlighted.
</p>
</body>
</html>

Example 2: Combining Logical and Physical Tags

This example shows how logical and physical tags can be combined for enhanced text formatting:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Advanced Text Formatting</title>
</head>
<body>
<p>This is a
<strong><em>very important</em></strong> message.
</p>
<p>The chemical formula of water is H
<sub>2</sub>O.
</p>
<p>
<del>Deleted text </del> and
<ins>inserted text</ins>
are shown here.
</p>
<p><small>Smaller text</small>
can be used for disclaimers.
</p>
<p>E = mc<sup>2</sup></p>
</body>

</html>

HTML | body text Attribute

The HTML <body> text Attribute is used to define a color for the text in the Document.
Syntax:
<body text="color_name”>
<!DOCTYPE html>
<html>

<head>
<title>HTML body Text Attribute</title>
</head>
<!-- body tag starts here -->

<body text="green">
<h1>GeeksforGeeks</h1>
<h2>HTML <body> Text Attribute</h2>
<p>It is a Computer Science portal For Geeks</p>
</body>
<!-- body tag ends here -->

</html>

HTML <font> size Attribute

The HTML <font> size attribute adjusts text size within `<font>` elements, simplifying font size
modification directly. Deprecated in HTML5, it ranged from 1 to 7, defaulting to 3..
Syntax:
<font size="number">
<!DOCTYPE html>
<html>

<head>
<title>HTML font size Attribute</title>
</head>

<body>
<font size="1">GeeksforGeeks! </font><br />
<font size="2">GeeksforGeeks! </font><br />
<font size="3">GeeksforGeeks! </font><br />
<font size="4">GeeksforGeeks! </font><br />
<font size="5">GeeksforGeeks! </font><br />
<font size="6">GeeksforGeeks! </font><br />
<font size="7">GeeksforGeeks! </font>
</body>

</html>

HTML <font> face Attribute

The HTML <font> face Attribute is used to specify the font family of the text inside <font> element. Using
the <font> tag for styling is outdated.
Syntax:
<font face="font_family">
Eg.
<!DOCTYPE html>
<html>
<head> <title> HTML font face Attribute </title> </head>
<body>
<font size="6" face="verdana"> GeeksforGeeks!</font> <br>
<font size="6" face="arial"> GeeksforGeeks! </font> <br>
<font size="6">
GeeksforGeeks!
</font>
</body>
</html>
Tables

HTML tables allow web developers to arrange data into rows and columns.
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag. You can have as many rows as you
like in a table; just make sure that the number of cells are the same in each row.

Table Cells (Details)


Each table cell is defined by a <td> and a </td> tag.

<!DOCTYPE html>
<html>
<body>
<h2>TR elements define table rows</h2>
<table style="width:100%">
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>

Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag. By default, the text in <th> elements are bold and centered.

HTML Table Borders


HTML tables can have borders of different styles and shapes.

<!DOCTYPE html>
<html>
<style>
table, th, td { border:1px solid black; }
</style>
<body>

<h2>TH elements define table headers</h2>


<table style="width:100%">
<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>
</body>
</html>

HTML Table Padding & Spacing


HTML tables can adjust the padding inside the cells, and also the space between the cells.

HTML Table - Cell Padding


Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

</body>
</html>
Lists
HTML lists allow web developers to group a set of related items in lists.

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:
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

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

</body>
</html>

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:
<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

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

</body>
</html>

HTML Description Lists


HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes
each term:
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>
class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also be used by a
JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of "city". All
of the three <div> elements will be styled equally according to the .city style definition in the head
section:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing. The HTML <form> element
is used to create an HTML form for user input. The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.

Syntax :
<form>
.
form elements
.
</form>

The <input> Element


The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute
1) <input type="text"> Displays a single-line text input field
2) <input type="radio"> Displays a radio button (for selecting one of many choices)
3) <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
4) <input type="submit"> Displays a submit button (for submitting the form)
5) <input type="button"> Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>

The <label> Element


The <label> tag defines a label for many form elements. The <label> element is useful for screen-reader
users, because the screen-reader will read out loud the label when the user focuses on the input
element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them
together.

Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">

<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language" value="JavaScript">

<label for="javascript">JavaScript</label>
</form>

</body>
</html>

Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>
HTML Styles - CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.

What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements
are positioned and laid out, what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!
Tip: The word cascading means that a style applied to a parent element will also apply to all children
elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs,
and other text elements within the body will also get the same color (unless you specify something
else)!

Using CSS
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial
we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it
yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>

Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue"
background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The external style sheet can be written in any text editor. The file must not contain any HTML code,
and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;

}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
<!DOCTYPE html>
<html>
<head>
<style>
p { border: 2px solid powderblue;
padding: 30px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

CSS Margin
The CSS margin property defines a margin (space) outside the border.
<!DOCTYPE html>
<html>
<head>
<style>
p{ border: 2px solid powderblue;
margin: 20px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

Link to External CSS


External style sheets can be referenced with a full URL or with a path relative to the current web page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Iframes
An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax


The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.
<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen
readers to read out what the content of the iframe is.

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:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>

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


</body>
</html>

Or you can add the style attribute and use the CSS height and width properties:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" style="height:200px;width:300px" title="Iframe Example">
</iframe>
</body>
</html>

Iframe - Remove the Border


By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>To remove the default border of the iframe, use CSS:</p>
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
</body>
</html>

With CSS, you can also change the size, style and color of the iframe's border:
<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<p>With CSS, you can also change the size, style and color of the iframe's border:</p>
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

</body>
</html>
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:
<!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="HtmlColors.html" target="iframe_a">Colors in HTML</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