Scribd
Upload
217 views

WD File

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text and other elements for display in a web browser. Some key points: 1. HTML is not a programming language, but a markup language that uses tags to define headings, paragraphs, links, images and other elements. 2. HTML documents are made up of nested HTML elements that describe the document structure. Elements have opening and closing tags. 3. Common HTML elements include headings, paragraphs, links, images and line breaks. Elements can have attributes that provide more information. 4. The browser reads HTML documents and displays the tags as web pages without showing the tags themselves. HTML allows creating

Uploaded by

Heena Kalia
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
217 views

WD File

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text and other elements for display in a web browser. Some key points: 1. HTML is not a programming language, but a markup language that uses tags to define headings, paragraphs, links, images and other elements. 2. HTML documents are made up of nested HTML elements that describe the document structure. Elements have opening and closing tags. 3. Common HTML elements include headings, paragraphs, links, images and line breaks. Elements can have attributes that provide more information. 4. The browser reads HTML documents and displays the tags as web pages without showing the tags themselves. HTML allows creating

Uploaded by

Heena Kalia
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 59

HTML

HTML is unique language. It is a simple and text based


language. It is used for creating web page. HTML document is
created in a simple Text Editor (as a note pad).

A website is a collection of web pages. Websites are unique


sources of online information. These can be available on
internet. Hypertext is the basic of all information available on
the website.

The expanded name of HTML is Hypertext Markup language.


It is a simple language. It is text based and is used for
creating web page; website is the combination of many web
documents.

Web page has many elements as page style, paragraph, list,


table and picture etc. Each section is written in the form of
tag. The tags indicate that the element viz. heading, list,
paragraph etc to which the section of web page relates.
Picture, sound and movie can be Included in addition to the
text in a web page.

TYPES OF TAGS:
Tags are a special type of instructions. They are used in HTML
documents .Tags provide Instruction to browser for specific
action. They instruct the web browser to start and close a
document. Tags are of two types described as follows:

1. Container Tag

2. Empty Tag

CONTAINER TAG:

Web Designing Page 1


It is used twice in a document. Text is written in between the
two tags & also called pair tag or companion Tag.

Example:

<Body>

---------

---------

</Body>

EMPTY TAG:
Empty tag is used once in a document. It is a single tag. It
does not have any companion tag. Closing of finishing tag is
never used in it.

Example:

<BR>

The <BR>in above example represents “Break”.

HTML TAGS:
1) Head Tag: It provides Header information. It always
occurs in pair.
2) Title Tag: Title starts with <TITLE >tag and ends with
</TITLE > tag.
3) Body Tag: It is a container tag .It is used to represent
the body of document.
4) Heading Tag: It is used to fix the heading. These are 6
levels of heading in all.

Web Designing Page 2


5) Paragraph Tag: Paragraph is the basic composition of
HTML, Paragraph is started with <P> tag and close with
</P> tag.
6) Line Break: The line break tag is used to start the next
from the new line. It does not leave a blank line space as
the paragraph tag does.

What is HTML?

HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language


• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

• HTML tags are keywords surrounded by angle brackets like <html>


• 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 Documents = Web Pages

• HTML documents describe web pages


• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages

Web Designing Page 3


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>MyFirstHeading</h1>

<p>MyFirstparagraph.</p>

</body>
</html>

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
• The text between <p> and </p> is displayed as a paragraph

HTML - Getting Started

What You Need

You don't need any tools to learn HTML at W3Schools.

• You don't need an HTML editor


• You don't need a web server
• You don't need a web site

Web Designing Page 4


Editing HTML

HTML can be written and edited using many different editors like
Dreamweaver and Visual Studio.

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.

Create Your Own Test Web

If you just want to learn HTML, skip the rest of this chapter.

If you want to create a test page on your own computer, just copy the 3 files
below to your desktop.

(Right click on each link, and select "save target as" or "save link as")

mainpage.htm

page1.htm

page2.htm

After you have copied the files, you can double-click on the file called
"mainpage.htm" and see your first web site in action.

Use Your Test Web For Learning

We suggest you experiment with everything you learn at W3Schools by


editing your web files with a text editor (like Notepad).

Note: If your test web contains HTML markup tags you have not learned,
don't panic. You will learn all about it in the next chapters.

Web Designing Page 5


.HTM or .HTML File Extension?

When you save an HTML file, you can use either the .htm or the .html file
extension. There is no difference, it is entirely up to you.

1. HTML Basic - 4 Examples

Don't worry if the examples use tags you have not learned.

You will learn about them in the next chapters.

HTML Headings

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

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Web Designing Page 6


Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag.

Example

<a href="http://www.w3schools.com">This is a link</a>

Note: The link address is specified in the href attribute.

(You will learn about attributes in a later chapter of this tutorial).

HTML Images

HTML images are defined with the <img> tag.

Example

<img src="w3schools.jpg" width="104" height="142" />

Note: The name and the size of the image are provided as attributes.

HTML Elements

HTML documents are defined by HTML elements.

HTML Elements

Web Designing Page 7


An HTML element is everything from the start tag to the end tag:

Start tag * Element content End tag *


<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />

* The start tag is often called the opening tag. The end tag is often called the
closing tag.

HTML Element Syntax

• An HTML element starts with a start tag / opening tag


• An HTML element ends with an end tag / closing tag
• The element content is everything between the start and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• 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>

Web Designing Page 8


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

</html>

The example above contains 3 HTML elements.

HTML Example Explained

The <p> element:

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

The <p> element defines a paragraph in the HTML document.


The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.

The <body> element:

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

The <body> element defines the body of the HTML document.


The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).

The <html> element:

Web Designing Page 9


<html>

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

</html>

The <html> element defines the whole HTML document.


The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).

Don't Forget the End Tag

Some HTML elements might display correctly even if you forget the end tag:

<p>This is a paragraph
<p>This is a paragraph

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 if you forget the end tag .

Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line
break).

Web Designing Page 10


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

HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Many web
sites use uppercase HTML tags.

W3Schools use lowercase tags because the World Wide Web Consortium
(W3C) recommends lowercase in HTML 4, and demands lowercase tags in
XHTML.

HTML Attributes

Attributes provide additional information about HTML elements.

HTML Attributes

• HTML elements can have attributes


• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the
href attribute:

Example

Web Designing Page 11


<a href="http://www.w3schools.com">This is a link</a>

Always Quote Attribute Values

Attribute values should always be enclosed in quotes.

Double style quotes are the most common, but single style quotes are also
allowed.

HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.

However, the World Wide Web Consortium (W3C) recommends lowercase


attributes/attribute values in their HTML 4 recommendation.

Newer versions of (X)HTML will demand lowercase attributes.

HTML Headings

Headings are important in HTML documents.

HTML Headings

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

<h1> defines the most important heading. <h6> defines the least important
heading.
Web Designing Page 12
Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Note: Browsers automatically add some empty space (a margin) before and
after each heading.

Headings Are Important

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

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

Since users may skim your pages by its headings, it is important to use
headings to show 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 Lines

The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

Example

Web Designing Page 13


<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML Comments

Comments can be inserted into the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

Example

<!-- This is a comment -->

Note: There is an exclamation point after the opening bracket, but not before
the closing bracket.

HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

Web Designing Page 14


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 code of the page.

HTML Paragraphs

HTML documents are divided into paragraphs.

HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Note: Browsers automatically add an empty line before and after a paragraph.

Don't Forget the End Tag

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

Example

p>This is a paragraph
<p>This is another paragraph

<

Web Designing Page 15


The example above will work in most browsers, but don't rely on it.
Forgetting the end tag can produce unexpected results or errors.

Note: Future version of HTML will not allow you to skip end tags.

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new
paragraph:

Example

<p>This is<br />a para<br />graph with line breaks</p>

The <br /> element is an empty HTML element. It has no end tag.

<br> or <br />

In XHTML, XML, and future versions of HTML, HTML elements with no


end tag (closing tag) are not allowed.

Even if <br> works in all browsers, writing <br /> instead is more future
proof.

HTML Text Formatting

This text is bold

This text is big

This text is italic

Web Designing Page 16


This is computer output

This is subscript and superscript

HTML Text Formatting

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

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

Web Designing Page 17


Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

HTML Style Example - Background Color

The background-color property defines the background color for an element:

<sub>
Defines subscripted text

Example

<html>

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

Web Designing Page 18


<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

The style attribute makes the "old" bgcolor attribute obsolete.

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and
size of the text in an element:

Example

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

The style attribute makes the old <font> tag obsolete.

HTML Style Example - Text Alignment

Web Designing Page 19


The text-align property specifies the horizontal alignment of text in an
element:

Example

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

The style attribute makes the old "align" attribute obsolete.

Deprecated Tags and Attributes

In HTML 4, several tags and attributes are deprecated. Deprecated means that
they will not be supported in future versions of HTML and XHTML.

These tags and attributes should be avoided:

Tags Description
<center> Deprecated. Defines centered content
<font> and <basefont> Deprecated. Defines HTML fonts
<s> and <strike> Deprecated. Defines strikethrough text
<u> Deprecated. Defines underlined text
Attributes Description
align Deprecated. Defines the alignment of text
bgcolor Deprecated. Defines the background color
color Deprecated. Defines the text color

Web Designing Page 20


For all of the above: Use styles instead!

HTML Links

Links are found in nearly all Web pages. Links allow users to click their way
from page to page.

HTML Hyperlinks (Links)

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.

When you move the cursor over a link in a Web page, the arrow will turn into
a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

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

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example

<a href="http://www.w3schools.com/">Visit W3Schools</a>


Web Designing Page 21
which will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage.

Tip: The "Link text" doesn't have to be text. You can link from an image or
any other HTML element.

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:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!


</a>

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Note:
The upcoming HTML5 standard suggest using the id attribute instead of the
name attribute for specifying the name of an anchor.
Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the
reader.

Web Designing Page 22


Example

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

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

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

HTML Images

Example

Norwegian Mountain Trip

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

In HTML, images are defined with the <img> tag.

Web Designing Page 23


The <img> tag is empty, which means that it contains attributes only, and has
no closing tag.

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

The URL points to the location where the image is stored. An image named
"boat.gif", located in the "images" directory on "www.w3schools.com" has
the URL: http://www.w3schools.com/images/boat.gif.

The browser displays the image where the <img> tag occurs in the document.
If you put an image tag between two paragraphs, the browser shows the first
paragraph, then the image, and then the second paragraph.

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="boat.gif" 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).

HTML Images - Set Height and Width of an Image

Web Designing Page 24


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="pulpit.jpg" 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 Tables

HTML Tables

Apples
44%
Bananas
23%
Oranges
13%
Other
10%

HTML Tables

Tables are defined with the <table> tag.

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> tag can contain text, links, images, lists, forms, other
tables, etc.

Web Designing Page 25


Table Example

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2


row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without
borders. Sometimes this can be useful, but most of the time, we want the
borders to show.

To display a table with borders, specify the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Web Designing Page 26


HTML Table Headers

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

All major browsers will display the text in the <th> element as bold and
centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in your browser:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header

Web Designing Page 27


<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

HTML Lists

The most common HTML lists are ordered and unordered lists:

HTML Lists

An ordered list:

1. The first list item


2. The second list item

The third list itemAn unordered list:

• List item
• List item

List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.

Web Designing Page 28


The list items are marked with bullets (typically small black circles).

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

How the HTML code above looks in a browser:

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

How the HTML code above looks in a browser:

1. Coffee
2. Milk

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag defines a definition list.

Web Designing Page 29


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>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee

- black hot drink

Milk

- white cold drink

HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list

HTML Forms and Input

HTML Forms

Web Designing Page 30


HTML forms are used to pass data to a server.

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

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

HTML Forms - The Input Element

The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type attribute. An
input element can be of type text field, checkbox, password, radio button,
submit button, and more.

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:

<form>
First name: <input type="text" name="firstname" /><br />

Web Designing Page 31


Last name: <input type="text" name="lastname" />
</form>

How the HTML code above looks in a browser:

First name:
Last name:

Note: The form itself is not visible. Also note that the default width of a text
field is 20 characters.

Password Field

<input type="password" /> defines a password field:

<form>
Password: <input type="password" name="pwd" />
</form>

How the HTML code above looks in a browser:

Password:

Note: The characters in a password field are masked (shown as asterisks or


circles).

Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select
ONLY ONE one of a limited number of choices:

<form>
<input type="radio" name="sex" value="male" /> Male<br />

Web Designing Page 32


<input type="radio" name="sex" value="female" /> Female
</form>

How the HTML code above looks in a browser:

Male
Female

Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select


ONE or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

How the HTML code above looks in a browser:

I have a bike
I have a car

Submit Button

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the
page specified in the form's action attribute. The file defined in the action
attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get">


Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Web Designing Page 33


How the HTML code above looks in a browser:

Submit
Username:

If you type some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called
"html_form_action.asp". The page will show you the received input.

HTML Form Tags

Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button

HTML Frames

HTML Frames

With frames, you can display more than one HTML document in the same
browser window. Each HTML document is called a frame, and each frame is
independent of the others.

Web Designing Page 34


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).
• The web developer must keep track of more HTML documents

The HTML frameset Element

The frameset element holds one or more frame elements. Each frame element
can hold a separate document.

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:

<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>

Web Designing Page 35


Note: The frameset column size can also be set in pixels (cols="200,500"),
and one of the columns can be set to use the remaining space, with an asterisk
(cols="25%,*").

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.

Note: Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the
<frameset></frameset> tags! However, if you add a <noframes> tag
containing some text 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.

HTML Frame Tags

Tag Description
<frameset> Defines a set of frames
<frame /> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames

Html hadings

<html>

<body>

<h1>This is heading 1</h1>


Web Designing Page 36
<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>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>
Web Designing Page 37
</body>

</html>

<html>

<body>

<a href="http://www.w3schools.com">

This is a link</a>

</body>

</html>

<html>

<body>

<img src="w3schools.jpg" width="104" height="142" />

</body>

</html>

Web Designing Page 38


<html>

<body>

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

</p>

<p>

Web Designing Page 39


The number of lines in a paragraph depends on the size of your browser
window. If you resize the browser window, the number of lines in this
paragraph will change.

</p>

</body>

</html>

<html>

<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><big>This text is big</big></p>

<p><em>This text is emphasized</em></p>

<p><i>This text is italic</i></p>

<p><small>This text is small</small></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html>

This text is bold

Web Designing Page 40


This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is subscript and superscript

<html>

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

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">

This text is in Verdana and red</p>

<p style="font-family:times;color:green">

This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>

</html>

Web Designing Page 41


Look! Styles and colors

This text is in Verdana and red

This text is in Times and green

This text is 30 pixels high

<html>

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

<h2 style="background-color:red">This is a heading</h2>

<p style="background-color:green">This is a paragraph.</p>

</body>

</html>

This is a heading

This is a paragraph.

<html>

<body>

<h1 style="font-family:verdana">A heading</h1>

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

</body>

</html>

A heading

A paragraph.
Web Designing Page 42
<html>

<body>

<p>

<a href="default.asp">HTML Tutorial</a> This is a link to a page on


this website.

</p>

<p>

<a href="http://www.google.com/">Google</a> This is a link to a website


on the World Wide Web.

</p>

</body>

</html>

HTML Tutorial This is a link to a page on this website.

Google This is a link to a website on the World Wide Web.

<html>

<body>

<p>Create a link of an image:

<a href="default.asp">

Web Designing Page 43


<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a></p>

<p>No border around the image, but still a link:

<a href="default.asp">

<img border="0" src="smiley.gif" alt="HTML tutorial" width="32"


height="32" />

</a></p>

</body>

</html>

Create a link of an image:

No border around the image, but still a link:

<html>

<body>

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

Web Designing Page 44


<h4>One column:</h4>

<table border="1">

<tr>

<td>100</td>

</tr>

</table>

<h4>One row and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

Web Designing Page 45


<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

Each table starts with a table tag. Each table row starts with a tr tag. Each
table data starts with a td tag.

One column:
100

One row and three columns:


100 200 300

Two rows and three columns:


100 200 300

400 500 600

Web Designing Page 46


<html>

<body>

<h4>With a normal border:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With a thick border:</h4>

<table border="8">

<tr>

<td>First</td>

<td>Row</td>

</tr>

Web Designing Page 47


<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With a very thick border:</h4>

<table border="15">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

Web Designing Page 48


With a normal border:
First Row

Second Row

With a thick border:


First Row

Second Row

With a very thick border:


First Row

Second Row

Web Designing Page 49


<html>

<body>

<h4>Table headers:</h4>

<table border="1">

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table border="1">

<tr>

Web Designing Page 50


<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

Table headers:
Name Telephone Telephone

Bill Gates 555 77 854 555 77 855

Vertical headers:
First Name: Bill Gates

Telephone: 555 77 854

Web Designing Page 51


Telephone: 555 77 855

<html>

<body>

<form action="">

First name: <input type="text" name="firstname" /><br />

Last name: <input type="text" name="lastname" />

</form>

<p><b>Note:</b> The form itself is not visible. Also note that the default
width of a text field is 20 characters.</p>

</body>

</html>

First name:
Last name:

Note: The form itself is not visible. Also note that the default width of a text
field is 20 characters.

<html>

<body>

Web Designing Page 52


<form action="">

Username: <input type="text" name="user" /><br />

Password: <input type="password" name="password" />

</form>

<p><b>Note:</b> The characters in a password field are masked (shown


as asterisks or circles).</p>

</body>

</html>

Username:
Password:

Note: The characters in a password field are masked (shown as asterisks or


circles).

<html>

<body>

<form action="">

<input type="checkbox" name="vehicle" value="Bike" /> I have a


bike<br />

<input type="checkbox" name="vehicle" value="Car" /> I have a car

</form>
Web Designing Page 53
</body>

</html>

I have a bike
I have a car

<html>

<body>

<form action="">

<input type="radio" name="sex" value="male" /> Male<br />

<input type="radio" name="sex" value="female" /> Female

</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes


checked, and all other radio-buttons with equal name become
unchecked.</p>

</body>

</html>

Male
Female

Note: When a user clicks on a radio-button, it becomes checked, and all other
radio-buttons with equal name become unchecked.
Web Designing Page 54
<html>

<body>

<form action="">

<fieldset>

<legend>Personal information:</legend>

Name: <input type="text" size="30" /><br />

E-mail: <input type="text" size="30" /><br />

Date of birth: <input type="text" size="10" />

</fieldset>

</form>

</body>

</html>

Personal information: Name:


E-mail:
Date of birth:

<html>

<body>

Web Designing Page 55


<h3>Send e-mail to someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post"


enctype="text/plain">

Name:<br />

<input type="text" name="name" value="your name" /><br />

E-mail:<br />

<input type="text" name="mail" value="your email" /><br />

Comment:<br />

<input type="text" name="comment" value="your comment" size="50"


/>

<br /><br />

<input type="submit" value="Send">

<input type="reset" value="Reset">

</form>

</body>

</html>

Send e-mail to someone@example.com:


Name:

E-mail:

Web Designing Page 56


Comment:

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</html>

Frame C
<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

Web Designing Page 57


</frameset>

</html>

<html>

<body>

<iframe src="demo_iframe.htm"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

Some older browsers don't support iframes.

If they don't, the iframe will not be visible.

<html>

<frameset cols="180,*">

<frame src="content.htm" />

Web Designing Page 58


<frame src="link.htm" name="showframe" />

</frameset>

</html>

Web Designing Page 59

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy