Scribd
Upload
2 views22 pages

HTML

This document is a comprehensive HTML tutorial that explains the structure and elements of HTML, including tags, attributes, and formatting. It covers various aspects such as HTML documents, headings, paragraphs, links, images, and styling with CSS. The tutorial emphasizes best practices, such as using lowercase tags and attributes, and avoiding deprecated elements.

Uploaded by

sahildesai84529
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
2 views22 pages

HTML

This document is a comprehensive HTML tutorial that explains the structure and elements of HTML, including tags, attributes, and formatting. It covers various aspects such as HTML documents, headings, paragraphs, links, images, and styling with CSS. The tutorial emphasizes best practices, such as using lowercase tags and attributes, and avoiding deprecated elements.

Uploaded by

sahildesai84529
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

HTML TUTORIAL Example Explained

• The text between <html> and </html> describes the web page
• The text between <body> and </body> is the visible page content
• The text between <h1> and </h1> is displayed as a heading
What is HTML? • The text between <p> and </p> is displayed as a paragraph
HTML is a language for describing web pages.
Editing HTML
• HTML stands for Hyper Text Markup Language
HTML can be written and edited using many different editors like Dreamweaver and
• HTML is not a programming language, it is a markup language
Visual Studio.
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We
believe using a plain text editor is the best way to learn HTML.
HTML Tags
.HTM or .HTML File Extension?
HTML markup tags are usually called HTML tags
When you save an HTML file, you can use either the .htm or the .html file extension.
• HTML tags are keywords surrounded by angle brackets like <html>
There is no difference; it is entirely up to you.
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• Start and end tags are also called opening tags and closing tags HTML Headings

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


HTML Documents = Web Pages
Example
• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
<h1>This is a heading</h1>
• HTML documents are also called web pages
<h2>This is a heading</h2>
<h3>This is a heading</h3>
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
documents and display them as web pages. The browser does not display the HTML tags,
but uses the tags to interpret the content of the page:

<html>
<body>

<h1>My First Heading</h1> HTML Paragraphs


<p>My first paragraph.</p>
HTML paragraphs are defined with the <p> tag.
</body>
</html> Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML Elements
HTML links are defined with the <a> tag.
An HTML element is everything from the start tag to the end tag:
Example
Start tag * Element content End tag *
<a href="[Link] is a link</a> <p> This is a paragraph </p>
Note: The link address is specified in the href attribute. <a href="[Link]" > This is a link </a>
<br />
(You will learn about attributes in a later chapter of this tutorial).
* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Images
HTML Element Syntax
HTML images are defined with the <img> tag.
• An HTML element starts with a start tag / opening tag
Example • An HTML element ends with an end tag / closing tag
• The element content is everything between the start and the end tag
<img src="[Link]" width="104" height="142" /> • Some HTML elements have empty content
• Empty elements are closed in the start tag
Note: The name and the size of the image are provided as attributes. • Most HTML elements can have attributes

Tip: You will learn about attributes in the next chapter of this tutorial.

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).

HTML documents consist of nested HTML elements.

HTML Document Example

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
The example above contains 3 HTML elements. The example above works in most browsers, because the closing tag is considered
optional.

Never rely on this. Many HTML elements will produce unexpected results and/or errors
HTML Example Explained if you forget the end tag .

The <p> element:

<p>This is my first paragraph.</p> Empty HTML Elements

The <p> element defines a paragraph in the HTML document. HTML elements with no content are called empty elements.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph. <br> is an empty element without a closing tag (the <br> tag defines a line break).

The <body> element: Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br
/>, is the proper way of closing empty elements in XHTML (and XML).
<body>
<p>This is my first paragraph.</p>
</body>
HTML Tip: Use Lowercase Tags
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>. HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use
The element content is another HTML element (a p element). uppercase HTML tags.

The <html> element: HTML Attributes


<html> • HTML elements can have attributes
• Attributes provide additional information about an element
<body> • Attributes are always specified in the start tag
<p>This is my first paragraph.</p> • Attributes come in name/value pairs like: name="value"
</body>

</html>

The <html> element defines the whole HTML document.


Attribute Example
The element has a start tag <html> and an end tag </html>.
HTML links are defined with the <a> tag. The link address is specified in the href
The element content is another HTML element (the body element).
attribute:

Example
Don't Forget the End Tag
<a href="[Link] [Link]">This is a link</a>
Some HTML elements might display correctly even if you forget the end tag:

<p>This is a paragraph
<p>This is a paragraph
Always Quote Attribute Values

Attribute values should always be enclosed in quotes.


Note: Browsers automatically add some empty space (a margin) before and after each
Double style quotes are the most common, but single style quotes are also allowed. heading.

Tip: In some rare situations, when the attribute value itself contains quotes, it is
necessary to use single quotes: name='John "ShotGun" Nelson'
Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
HTML Tip: Use Lowercase Attributes
Search engines use your headings to index the structure and content of your web pages.
Attribute names and attribute values are case-insensitive.
Since users may skim your pages by its headings, it is important to use headings to show
Newer versions of (X)HTML will demand lowercase attributes. the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less
important H3 headings, and so on.
HTML Attributes Reference

A complete list of legal attributes for each HTML element is listed in our:
HTML Lines
Below is a list of some attributes that are standard for most HTML elements:
The <hr /> tag creates a horizontal line in an HTML page.
Attribute Value Description
class classname Specifies a classname for an element The hr element can be used to separate content:
id id Specifies a unique id for an element
Example
style style_definition Specifies an inline style for an element
Specifies extra information about an element <p>This is a paragraph</p>
title tooltip_text
(displayed as a tool tip) <hr />
<p>This is a paragraph</p>
For more information about standard attributes: <hr />
<p>This is a paragraph</p>
HTML Headings

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

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

Example HTML Comments


<h1>This is a heading</h1> Comments can be inserted into the HTML code to make it more readable and
<h2>This is a heading</h2> understandable. Comments are ignored by the browser and are not displayed.
<h3>This is a heading</h3>
Comments are written like this: Don't Forget the End Tag

Example Most browsers will display HTML correctly even if you forget the end tag:

<!-- This is a comment --> Example

<p>This is a paragraph
<p>This is another paragraph
Note: There is an exclamation point after the opening bracket, but not before the closing
bracket.

The example above will work in most browsers, but don't rely on it. Forgetting the end
tag can produce unexpected results or errors.
HTML Tip - How to View HTML Source
Note: Future version of HTML will not allow you to skip end tags.
Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, right-click in the page and select "View Source" (IE) or "View Page Source"
(Firefox), or similar for other browsers. This will open a window containing the HTML HTML Line Breaks
code of the page.
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
HTML Tag Reference
Example
You will learn more about HTML tags and attributes in the next chapters of this tutorial.
<p>This is<br />a para<br />graph with line breaks</p>
Tag Description
<html> Defines an HTML document The <br /> element is an empty HTML element. It has no end tag.
<body> Defines the document's body <br> or <br />
<h1> to <h6> Defines HTML headings
<hr /> Defines a horizontal line In XHTML, XML, elements with no end tag (closing tag) are not allowed.
<!--> Defines a comment
Even if <br> works in all browsers, writing <br /> instead works better in XHTML and
XML applications.
HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example HTML Output - Useful Tips

<p>This is a paragraph</p> You cannot be sure how HTML will be displayed. Large or small screens, and resized
<p>This is another paragraph</p> windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your
HTML code.
Note: Browsers automatically add an empty line before and after a paragraph.
The browser will remove extra spaces and extra lines when the page is displayed. Any
number of lines count as one line, and any number of spaces count as one space. HTML Text Formatting

This text is bold

HTML Tag Reference This text is big

This text is italic


Tag Description
<p> Defines a paragraph
<br /> Inserts a single line break
HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a
complete reference).

Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the
user understands as "important". Today, all major browsers render strong as bold
and em as italics. However, if a browser one day wants to make a text highlighted
with the strong feature, it might be cursive for example and not bold!

HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
HTML "Computer Output" Tags HTML Styles - CSS

Tag Description CSS is used to style HTML elements.


<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code Look! Styles and colors
<tt> Defines teletype text
<var> Defines a variable This text is in Verdana and red
<pre> Defines preformatted text
This text is in Times and blue
HTML Citations, Quotations, and Definition Tags
This text is 30 pixels high
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document Styling HTML with CSS
<bdo> Defines the text direction
CSS was introduced together with HTML 4, to provide a better way to style HTML
<blockquote> Defines a long quotation elements.
<q> Defines a short quotation
<cite> Defines a citation CSS can be added to HTML in the following ways:
<dfn> Defines a definition term
• in separate style sheet files (CSS files)
• in the style element in the HTML head section
• in the style attribute in single HTML elements
HTML Fonts

The example below shows how the HTML could look by using the <font> tag:
Using the HTML Style Attribute
Example
It is time consuming and not very practical to style HTML elements using the style
<p> attribute.
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color. The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
</font>
</p> However, in this HTML tutorial we will introduce you to CSS using the style attribute.
This is done to simplify the examples. It also makes it easier for you to edit the code and
<p> try it yourself.
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
HTML Style Example - Background Color HTML Style Example - Text Alignment

The background-color property defines the background color for an element: The text-align property specifies the horizontal alignment of text in an element:

Example Example

<html> <html>

<body style="background-color:yellow;"> <body>


<h2 style="background-color:red;">This is a heading</h2> <h1 style="text-align:center;">Center-aligned heading</h1>
<p style="background-color:green;">This is a paragraph.</p> <p>This is a paragraph.</p>
</body> </body>

</html> </html>

The background-color property makes the "old" bgcolor attribute obsolete. The text-align property makes the old <center> tag obsolete.

Deprecated Tags and Attributes


HTML Style Example - Font, Color and Size
In HTML 4, several tags and attributes were deprecated. Deprecated means that they will
The font-family, color, and font-size properties define the font, color, and size of the text not be supported in future versions of HTML.
in an element:
The message is clear: Avoid using deprecated tags and attributes!
Example
These tags and attributes should be avoided:
<html>
Tags Description
<body> <center> Deprecated. Defines centered content
<h1 style="font-family:verdana;">A heading</h1> <font> and <basefont> Deprecated. Defines HTML fonts
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body> <s> and <strike> Deprecated. Defines strikethrough text
<u> Deprecated. Defines underlined text
</html> Attributes Description
align Deprecated. Defines the alignment of text
The font-family, color, and font-size properties make the old <font> tag obsolete.
bgcolor Deprecated. Defines the background color
color Deprecated. Defines the text color

For all of the above: Use styles instead!


HTML Links Example

Links are found in nearly all Web pages. Links allow users to click their way from page <a href="[Link] [Link]/" target="_blank">Visit Xitec Solutions!</a>
to page.

HTML Hyperlinks (Links)


HTML Links - The name Attribute
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
a new document or a new section within the current document. The name attribute specifies the name of an anchor.

When you move the cursor over a link in a Web page, the arrow will turn into a little The name attribute is used to create a bookmark inside an HTML document.
hand.
Note: The upcoming HTML5 standard suggest using the id attribute instead of the name
Links are specified in HTML using the <a> tag. attribute for specifying the name of an anchor. Using the id attribute actually works also
for HTML4 in all modern browsers.
The <a> tag can be used in two ways:
Bookmarks are not displayed in any special way. They are invisible to the reader.
1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute Example

HTML Link Syntax A named anchor inside an HTML document:

The HTML code for a link is simple. It looks like this: <a name="tips">Useful Tips Section</a>

<a href="url">Link text</a> Create a link to the "Useful Tips Section" inside the same document:

The href attribute specifies the destination of a link. <a href="#tips">Visit the Useful Tips Section</a>

Example Or, create a link to the "Useful Tips Section" from another page:

<a href="[Link] Xitec Solutions</a> which will display <a href="[Link] [Link]/html_links.htm#tips">
like this: Visit Xitec Solutions Visit the Useful Tips Section</a>

Clicking on this hyperlink will send the user to Xitec Solutions homepage.

Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML HTML Link Tags
element.
Tag Description
<a> Defines an anchor
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new
tab:
HTML Images
HTML Images - Set Height and Width of an Image
Example
The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

<img src="[Link]" alt="Pulpit rock" width="304" height="228" />

Tip: It is a good practice to specify both the height and width attributes for an image. If
these attributes are set, the space required for the image is reserved when the page is
loaded. However, without these attributes, the browser does not know the size of the
image. The effect will be that the page layout will change during loading (while the
images load).

HTML Image Tags


HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag. Tag Description
<img /> Defines an image
The <img> tag is empty, which means that it contains attributes only, and has no closing <map> Defines an image-map
tag. <area /> Defines a clickable area inside an image-map
To display an image on a page, you need to use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<img src="url" alt="some_text"/>

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.

The value of the alt attribute is an author-defined text:

<img src="[Link]" alt="Big Boat" />

The alt attribute provides alternative information for an image if a 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).
<td>Row 1, cell 1</td>
HTML Tables <td>Row 1, cell 2</td>
</tr>
Apples 44% </table>
Bananas 23%
Oranges 13%
Other 10% HTML Table Headers

Header information in a table are defined with the <th> tag.


Tables are defined with the <table> tag.
All major browsers will display the text in the <th> element as bold and centered.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells
(with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> <table border="1">
tag can contain text, links, images, lists, forms, other tables, etc. <tr>
<th>Header 1</th>
Table Example <th>Header 2</th>
</tr>
<table border="1"> <tr>
<tr> <td>row 1, cell 1</td>
<td>row 1, cell 1</td> <td>row 1, cell 2</td>
<td>row 1, cell 2</td> </tr>
</tr> <tr>
<tr> <td>row 2, cell 1</td>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
<td>row 2, cell 2</td> </tr>
</tr> </table>
</table>
How the HTML code above looks in your browser:
How the HTML code above looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2 row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 row 2, cell 1 row 2, cell 2

Notes:
HTML Tables and the Border Attribute
Tables without borders
If you do not specify a border attribute, the table will be displayed without borders. How to create tables without borders.
Sometimes this can be useful, but most of the time, we want the borders to show.
Table headers
To display a table with borders, specify the border attribute: How to create table headers.
<table border="1"> Table with a caption
<tr> How to add a caption to a table.
Table cells that span more than one row/column
How to define table cells that span more than one row or one column. An ordered list: An unordered list:

Tags inside a table 1. The first list item • List item


How to display elements inside other elements. 2. The second list item • List item
3. The third list item • List item
Cell padding
How to use cellpadding to create more white space between the cell content and its
borders. Unordered list
How to create an unordered list in an HTML document.
Cell spacing
How to use cellspacing to increase the distance between the cells. Ordered list
How to create an ordered list in an HTML document.
The frame attribute
How to use the "frame" attribute to control the borders around the table.

HTML Table Tags HTML Unordered Lists

Tag Description An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<table> Defines a table
<th> Defines a table header The list items are marked with bullets (typically small black circles).
<tr> Defines a table row
<ul>
<td> Defines a table cell <li>Coffee</li>
<caption> Defines a table caption <li>Milk</li>
<colgroup> Defines a group of columns in a table, for formatting </ul>
<col /> Defines attribute values for one or more columns in a table
How the HTML code above looks in a browser:
<thead> Groups the header content in a table
<tbody> Groups the body content in a table • Coffee
<tfoot> Groups the footer content in a table • Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML Lists How the HTML code above looks in a browser:
The most common HTML lists are ordered and unordered lists: 1. Coffee
2. Milk HTML List Tags

Tag Description
<ol> Defines an ordered list
HTML Definition Lists
<ul> Defines an unordered list
A definition list is a list of items, with a description of each item. <li> Defines a list item
<dl> Defines a definition list
The <dl> tag defines a definition list. <dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd>
(describes the item in the list):

<dl>
<dt>Coffee</dt> HTML Forms and Input
<dd>- black hot drink</dd>
<dt>Milk</dt> HTML Forms are used to select different kinds of user input.
<dd>- white cold drink</dd>
</dl> HTML forms are used to pass data to a server.

How the HTML code above looks in a browser: A form can contain input elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label
Coffee elements.
- black hot drink
Milk The <form> tag is used to create an HTML form:
- white cold drink
<form>

Notes: input elements


.
Different types of ordered lists </form>
Demonstrates different types of ordered lists.

Different types of unordered lists HTML Forms - The Input Element


Demonstrates different types of unordered lists.
The most important form element is the input element.
Nested list
Demonstrates how you can nest lists. The input element is used to select user information.

Nested list 2 An input element can vary in many ways, depending on the type attribute. An input
Demonstrates a more complicated nested list. element can be of type text field, checkbox, password, radio button, submit button, and
more.
Definition list
Demonstrates a definition list. The most used input types are described below.

Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into: Checkboxes

<form> <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or
First name: <input type="text" name="firstname" /><br /> MORE options of a limited number of choices.
Last name: <input type="text" name="lastname" />
</form> <form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
How the HTML code above looks in a browser: <input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
First name:
How the HTML code above looks in a browser:
Last name:
I have a bike
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters. I have a car

Password Field
Submit Button
<input type="password" /> defines a password field:
<input type="submit" /> defines a submit button.
<form>
Password: <input type="password" name="pwd" /> A submit button is used to send form data to a server. The data is sent to the page
</form> specified in the form's action attribute. The file defined in the action attribute usually
does something with the received input:
How the HTML code above looks in a browser:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
Password:
<input type="submit" value="Submit" />
</form>
Note: The characters in a password field are masked (shown as asterisks or circles).
How the HTML code above looks in a browser:
Radio Buttons
Submit
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE Username:
of a limited number of choices:
If you type some characters in the text field above, and click the "Submit" button, the
<form> browser will send your input to a page called "html_form_action.asp". The page will
<input type="radio" name="sex" value="male" /> Male<br /> show you the received input.
<input type="radio" name="sex" value="female" /> Female
</form> HTML Form Tags
How the HTML code above looks in a browser:
Tag Description
<form> Defines an HTML form for user input
Male <input /> Defines an input control
Female <textarea> Defines a multi-line text input control
<label> Defines a label for an input element <frameset cols="25%,75%">
<fieldset> Defines a border around elements in a form <frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<legend> Defines a caption for a fieldset element
</frameset>
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the
<option> Defines an option in a select list columns can be set to use the remaining space, with an asterisk (cols="25%,*").
<button> Defines a push button
Basic Notes - Useful Tips

Tip: If a frame has visible borders, the user can resize it by dragging the border. To
prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.
HTML Frames Note: Add the <noframes> tag for browsers that do not support frames.
With frames, you can display more than one HTML document in the same browser
Important: You cannot use the <body></body> tags together with the
window. Each HTML document is called a frame, and each frame is independent of the
<frameset></frameset> tags! However, if you add a <noframes> tag containing some text
others.
for browsers that do not support frames, you will have to enclose the text in
<body></body> tags! See how it is done in the first example below.
The disadvantages of using frames are:

• Frames are not expected to be supported in future versions of HTML


• Frames are difficult to use. (Printing the entire page is difficult).
HTML Frame Tags
• The web developer must keep track of more HTML documents

The HTML frameset Element Tag Description


<frameset> Defines a set of frames
The frameset element holds one or more frame elements. Each frame element can hold a <frame /> Defines a sub window (a frame)
separate document. <noframes> Defines a noframe section for browsers that do not handle frames

The frameset element states HOW MANY columns or rows there will be in the frameset,
and HOW MUCH percentage/pixels of space will occupy each of them.

The HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset.

In the example below we have a frameset with two columns.

The first column is set to 25% of the width of the browser window. The second column is
set to 75% of the width of the browser window. The document "frame_a.htm" is put into
the first column, and the document "frame_b.htm" is put into the second column:
Ivory #FFFFF0 Shades Mix
HTML Iframes
White #FFFFFF Shades Mix
An iframe is used to display a web page within a web page.

Syntax for adding an iframe:

<iframe src="URL"></iframe>

The URL points to the location of the separate page. HTML 4.01 Quick List
Iframe - Set Height and Width HTML Basic Document

The height and width attributes are used to specify the height and width of the iframe. <html>
<head>
The attribute values are specified in pixels by default, but they can also be in percent (like <title>Title of document goes here</title>
"80%"). </head>

Example <body>
Visible text goes here...
<iframe src="demo_iframe.htm" width="200" height="200"></iframe> </body>

</html>

Iframe - Remove the Border Heading Elements

The frameborder attribute specifies whether or not to display a border around the iframe. <h1>Largest Heading</h1>

Set the attribute value to "0" to remove the border: <h2> . . . </h2>
<h3> . . . </h3>
Example <h4> . . . </h4>
<h5> . . . </h5>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<h6>Smallest Heading</h6>

Text Elements
Use iframe as a Target for a Link
<p>This is a paragraph</p>
An iframe can be used as the target frame for a link. <br /> (line break)
<hr /> (horizontal rule)
The target attribute of a link must refer to the name attribute of the iframe: <pre>This text is preformatted</pre>

Example Logical Styles


<em>This text is emphasized</em>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <strong>This text is strong</strong>
<p><a href="[Link] [Link]" target="iframe_a"> <code>This is some computer code</code>
[Link]</a></p>
Physical Styles </tr>
<b>This text is bold</b> <tr>
<i>This text is italic</i> <td>sometext</td>
<td>sometext</td>
Links </tr>
</table>
Ordinary link: <a href="[Link] goes here</a>
Image-link: <a href="[Link] src="URL" alt="Alternate Text" Iframe
/></a>
Mailto link: <a href="[Link] e-mail</a> <iframe src="demo_iframe.htm"></iframe>

A named anchor: Frames


<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a> <frameset cols="25%,75%">
<frame src="[Link]" />
Unordered list <frame src="[Link]" />
</frameset>
<ul>
<li>Item</li> Forms
<li>Item</li>
</ul> <form action="[Link] method="post/get">

Ordered list <input type="text" name="email" size="40" maxlength="50" />


<input type="password" />
<ol> <input type="checkbox" checked="checked" />
<li>First item</li> <input type="radio" checked="checked" />
<li>Second item</li> <input type="submit" value="Send" />
</ol> <input type="reset" />
<input type="hidden" />
Definition list
<select>
<dl> <option>Apples</option>
<dt>First term</dt> <option selected="selected">Bananas</option>
<dd>Definition</dd> <option>Cherries</option>
<dt>Next term</dt> </select>
<dd>Definition</dd>
</dl> <textarea name="comment" rows="60" cols="20"></textarea>

</form>

Tables Entities

<table border="1"> &lt; is the same as <


<tr> &gt; is the same as >
<th>Tableheader</th> &#169; is the same as ©
<th>Tableheader</th>
£ pound &pound; &#163;
HTML ENTITIES
¥ yen &yen; &#165;
[Link] Copyright © [Link]
¦ broken vertical bar &brvbar; &#166;
Some characters are reserved in HTML and they have special meaning when used in HTML § section &sect; &#167;
documemt. For example, you cannot use the greater than and less than signs or angle brackets
within your HTML text because the browser will treat them differently and will try to draw a ¨ spacing diaeresis &uml; &#168;
meaning related to HTML tag.
© copyright &copy; &#169;
HTML processors must support following five special characters listed in the table that follows.
ª feminine ordinal indicator &ordf; &#170;

Symbol Description Entity Name Number Code « angle quotation mark left &laquo; &#171;

" quotation mark &quot; &#34; ¬ negation &not; &#172;

' apostrophe &apos; &#39; soft hyphen &shy; &#173;


& ampersand &amp; &#38; ® registered trademark &reg; &#174;
< less-than &lt; &#60; ™ trademark &trade; &#8482;
> greater-than &gt; &#62; ¯ spacing macron &macr; &#175;

° degree &deg; &#176;


Example
± plus-or-minus &plusmn; &#177;
If you want to write <div > as a code then you will have to write as follows:
² superscript 2 &sup2; &#178;
<!DOCTYPE html>
<html> ³ superscript 3 &sup3; &#179;
<head>
<title>HTML Entities</title> ´ spacing acute &acute; &#180;
</head>
<body> µ micro &micro; &#181;
&lt;div id=&quot;character&quot;&gt;
</body> ¶ paragraph &para; &#182;
</html>
· middle dot &middot; &#183;
This will produce following result:
¸ spacing cedilla &cedil; &#184;
<div id="character">
¹ superscript 1 &sup1; &#185;
There is also a long list of special characters in HTML 4.0. In order for these to appear in your
document, you can use either the numerical codes or the entity names. For example, to insert a º masculine ordinal indicator &ordm; &#186;
copyright symbol you can use either of the following:
» angle quotation mark right &raquo; &#187;
&copy; 2007 ¼ fraction 1/4 &frac14; &#188;
or
&#169; 2007 ½ fraction 1/2 &frac12; &#189;

ISO 8859-1 Symbol Entities ¾ fraction 3/4 &frac34; &#190;

¿ inverted question mark &iquest; &#191;


Result Description Entity Name Number Code × multiplication &times; &#215;
non-breaking space &nbsp; &#160; ÷ division &divide; &#247;
¡ inverted exclamation mark &iexcl; &#161;

¤ currency &curren; &#164; ISO 8859-1 Character Entities


¢ cent &cent; &#162;
Result Description Entity Name Number Code ã small a, tilde &atilde; &#227;
À capital a, grave accent &Agrave; &#192; ä small a, umlaut mark &auml; &#228;
Á capital a, acute accent &Aacute; &#193; å small a, ring &aring; &#229;
 capital a, circumflex accent &Acirc; &#194; æ small ae &aelig; &#230;
à capital a, tilde &Atilde; &#195; ç small c, cedilla &ccedil; &#231;
Ä capital a, umlaut mark &Auml; &#196; è small e, grave accent &egrave; &#232;
Å capital a, ring &Aring; &#197; é small e, acute accent &eacute; &#233;
Æ capital ae &AElig; &#198; ê small e, circumflex accent &ecirc; &#234;
Ç capital c, cedilla &Ccedil; &#199; ë small e, umlaut mark &euml; &#235;
È capital e, grave accent &Egrave; &#200; ì small i, grave accent &igrave; &#236;
É capital e, acute accent &Eacute; &#201; í small i, acute accent &iacute; &#237;
Ê capital e, circumflex accent &Ecirc; &#202; î small i, circumflex accent &icirc; &#238;
Ë capital e, umlaut mark &Euml; &#203; ï small i, umlaut mark &iuml; &#239;
Ì capital i, grave accent &Igrave; &#204; ð small eth, Icelandic &eth; &#240;
Í capital i, acute accent &Iacute; &#205; ñ small n, tilde &ntilde; &#241;
Î capital i, circumflex accent &Icirc; &#206; ò small o, grave accent &ograve; &#242;
Ï capital i, umlaut mark &Iuml; &#207; ó small o, acute accent &oacute; &#243;
Ð capital eth, Icelandic &ETH; &#208; ô small o, circumflex accent &ocirc; &#244;
Ñ capital n, tilde &Ntilde; &#209; õ small o, tilde &otilde; &#245;
Ò capital o, grave accent &Ograve; &#210; ö small o, umlaut mark &ouml; &#246;
Ó capital o, acute accent &Oacute; &#211; ø small o, slash &oslash; &#248;
Ô capital o, circumflex accent &Ocirc; &#212; ù small u, grave accent &ugrave; &#249;
Õ capital o, tilde &Otilde; &#213; ú small u, acute accent &uacute; &#250;
Ö capital o, umlaut mark &Ouml; &#214; û small u, circumflex accent &ucirc; &#251;
Ø capital o, slash &Oslash; &#216; ü small u, umlaut mark &uuml; &#252;
Ù capital u, grave accent &Ugrave; &#217; ý small y, acute accent &yacute; &#253;
Ú capital u, acute accent &Uacute; &#218; þ small thorn, Icelandic &thorn; &#254;
Û capital u, circumflex accent &Ucirc; &#219; ÿ small y, umlaut mark &yuml; &#255;
Ü capital u, umlaut mark &Uuml; &#220;

Ý capital y, acute accent &Yacute; &#221; Other Entities Supported by HTML Browsers
Þ capital THORN, Icelandic &THORN; &#222;
Result Description Entity Name Number Code
ß small sharp s, German &szlig; &#223;
Πcapital ligature OE &OElig; &#338;
à small a, grave accent &agrave; &#224;
œ small ligature oe &oelig; &#339;
á small a, acute accent &aacute; &#225;

â small a, circumflex accent &acirc; &#226; Š capital S with caron &Scaron; &#352;
š small S with caron &scaron; &#353;

Ÿ capital Y with diaeres &Yuml; &#376;

ˆ modifier letter circumflex accent &circ; &#710;

˜ small tilde &tilde; &#732;


HTML
en space &ensp; &#8194;
Boiler plate:
em space &emsp; &#8195; <!DOCTYPE html>
<html>
thin space &thinsp; &#8201;
<head>
zero width non-joiner &zwnj; &#8204; <title>My First Page</title>
</head>
zero width joiner &zwj; &#8205; <body>
<p>hello world</p>
left-to-right mark &lrm; &#8206;
</body>
right-to-left mark &rlm; &#8207; </html>

– en dash &ndash; &#8211; Heading:


<h1>Main Heading</h1>
— em dash &mdash; &#8212;
<h2>Sub Heading</h2>
‘ left single quotation mark &lsquo; &#8216; <h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
’ right single quotation mark &rsquo; &#8217; <h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
‚ single low-9 quotation mark &sbquo; &#8218;

“ left double quotation mark &ldquo; &#8220; Lists: ordered list (ol) unordered list (ul)
<ol>
” right double quotation mark &rdquo; &#8221; <li>Apple</li>
<li>Mango</li>
„ double low-9 quotation mark &bdquo; &#8222;
<li>Banana</li>
† dagger &dagger; &#8224; </ol>

‡ double dagger &Dagger; &#8225; <ul>


<li>Apple</li>
… horizontal ellipsis &hellip; &#8230;
<li>Mango</li>
‰ per mille &permil; &#8240; <li>Banana</li>
</ul>
‹ single left-pointing angle quotation &lsaquo; &#8249;
Attributes:
› single right-pointing angle quotation &rsaquo; &#8250;
lang Attribute : <html lang="en">
€ euro &euro; &#8364; id Attribute : <p id="intro">Hello</p>
class Attribute : <p class="text">Hello</p>
Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/[Link] title Attribute : <p title="This is a paragraph">Hello</p>
style Attribute : <p style="color:red;">Hello</p>

Comment : <!-- This is an HTML Comment -->


Anchor : <a href="[Link]
Image : <img src="/[Link]" alt="Random Image">
HTMl tags :
Bold : <b>Bold Text</b> </aside>
Italic : <i>Italic Text</i>
Underline : <u>Underline Text</u> Tables :
Horizontal line : <hr> <table border="1">
Line break : <br> <caption>Student Data</caption>
BIg test : <big>Big Text</big> <thead>
Small test : <small>Small Text</small> <tr>
Subscript : H<sub>2</sub>O down <th>Name</th>
Superscript : a<sup>2</sup> up <th>Roll No</th>
</tr>
Div : group up another HTML elements ( block ) </thead>
<div> <tbody>
<h2>About Me</h2> <tr>
<p>I am learning HTML.</p> <td>Sahil</td>
</div> <td>101</td>
</tr>
Span : group up another HTML elements ( inline) <tr>
<span> <td>Rahul</td>
<h2>About Me</h2> <td>102</td>
<p>I am learning HTML.</p> </tr>
</span> </tbody>
<tfoot>
Semantic markup : <tr>
<header> <td colspan="2">Total Students = 2</td>
Website Header </tr>
</header> </tfoot>
<main> </table>
Main Content
</main> Colspan / rowspan :
<footer> <tr>
Copyright 2026 <th colspan/rowspan="2">Student Details</th>
</footer> </tr>
<tr>
Semantic tags : <td>Name</td>
<nav> <td>Sahil</td>
Navigation </tr>
</nav> </table>
<section>
Section Content Form :
</section> <form action="/[Link]" >
<article> <input type="text" placeholder="Enter Name" id=”text”
Article Content name=”text”>
</article> <label for=”text”>Name </label>
<aside>
Advertisement
checkbox : <input type="checkbox" value="class X" name="class"
id=”class">
Radio : <input type="radio" name="class " value="class x" id=”class”>
<button type=submit/button/reset> name </button>

Select :
<label for="cars">Choose a car:</label>

<select name="cars" id="cars">


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Range : <input type="range" min="0" max="100" value="50">


Textarea :

<textarea name="message" rows="4" cols="50">

</textarea>

You might also like