0% found this document useful (0 votes)

37 views

BASIC WEB DESIGN COURSE

The document outlines a Basic Web Design Course focused on HTML and CSS, designed to be completed in two months. It covers fundamental concepts, including HTML structure, tags, attributes, and basic CSS styling techniques. The course aims to provide a foundational understanding of web design principles and practices.

Uploaded by

Manu Joda

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

37 views

BASIC WEB DESIGN COURSE

Uploaded by

Manu Joda

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 232

Basic Web Design Course

This is an introductory course of Web design that covers HTML and CSS designed to be taught in two
months.

HTML
Overview
Basic Tags
Elements
Attributes
Phrase Tags
Meta Tag
Comments
Images
Tables
Lists
Text Links
Image links
Email links
Frames
Iframes
Blocks
Background
Colors
Fonts
Forms
Embed Multimedia
Marquees
Header
Style
Layout
CSS
Introduction
Syntax
Inclusion
Measurement Units
Colors
Backgrounds
Fonts
Text
Images
Links
Tables
Borders
Margins
Lists
Padding
Cursors
Outlines
Dimensions
Scrollbars
Overview

HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages. HTML was created by Berners-Lee in
late 1991 but "HTML 2.0" was the first standard HTML specification which was
published in 1995. HTML 4.01 was a major version of HTML and it was
published in late 1999. Though HTML 4.01 version is widely used but currently
we are having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.

Basic HTML Document

In its simplest form, following is an example of an HTML document −

<!DOCTYPE html>
<html>

<head>
<title>This is document title</title>
</head>

<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>

</html>

Basic Tags

Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying
any heading, browser adds one line before and one line after that heading.

Example
<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

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

This will produce the following result −

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs.
Each paragraph of text should go in between an opening <p> and a closing
</p> tag as shown below in the example −

Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>

<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>

</html>

This will produce the following result −

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the
next line. This tag is an example of an empty element, where you do not
need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash.
If you omit this space, older browsers will have trouble rendering the line
break, while if you miss the forward slash character and just use <br> it is
not valid in XHTML.

Example
<!DOCTYPE html>
<html>

<head>
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>

This will produce the following result −

Centering Content
You can use <center> tag to put any content in the center of the page or
any table cell.

Example
<!DOCTYPE html>
<html>

<head>
<title>Centring Content Example</title>
</head>

<body>
<p>This text is not in the center.</p>

<center>
<p>This text is in the center.</p>
</center>
</body>

</html>

This will produce following result −

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document.
The <hr> tag creates a line from the current position in the document to the
right margin and breaks the line accordingly.

For example, you may want to give a line between two paragraphs as in the
given example below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Horizontal Line Example</title>
</head>

<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>

</html>

This will produce the following result −

Again <hr /> tag is an example of the empty element, where you do not
need opening and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward
slash. If you omit this space, older browsers will have trouble rendering the
horizontal line, while if you miss the forward slash character and just
use <hr> it is not valid in XHTML

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written
in the HTML document. In these cases, you can use the preformatted
tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will
preserve the formatting of the source document.

Example
<!DOCTYPE html>
<html>

<head>
<title>Preserve Formatting Example</title>
</head>

<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>

</html>

This will produce the following result −

Try using the same code without keeping it inside <pre>...</pre> tags

Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not
want a browser to split the "12, Angry" and "Men" across two lines −

An example of this technique appears in the movie "12 Angry Men."

In cases, where you do not want the client browser to break text, you should
use a nonbreaking space entity   instead of a normal space. For
example, when coding the "12 Angry Men" in a paragraph, you should use
something similar to the following code −

Example
<!DOCTYPE html>
<html>

<head>
<title>Nonbreaking Spaces Example</title>
</head>

<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>

</html>

HTML Elements

An HTML element is defined by a starting tag. If the element contains other

content, it ends with a closing tag, where the element name is preceded by
a forward slash as shown below with few tags −

Start Tag Content End Tag

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

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML

element. There are some HTML elements which don't need to be closed, such
as <img.../>, <hr /> and <br /> elements. These are known as void
elements.

HTML documents consists of a tree of these elements and they specify how
HTML documents should be built, and what kind of content should be placed
in what part of an HTML document.

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of
the same paragraph but <p>This is paragraph</p> is a paragraph
element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML
element −

Example
<!DOCTYPE html>
<html>

<head>
<title>Nested Elements Example</title>
</head>

<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>

This will display the following result –

This is italic heading

This is underlined paragraph

HTML Attributes

We have seen few HTML tags and their usage like heading tags <h1>,
<h2>, paragraph tag <p> and other tags. We used them so far in their
simplest form, but most of the HTML tags can also have attributes, which are
extra bits of information.

An attribute is used to define the characteristics of an HTML element and is

placed inside the element's opening tag. All attributes are made up of two
parts − a name and a value

 The name is the property you want to set. For example, the
paragraph <p> element in the example carries an attribute whose name
is align, which you can use to indicate the alignment of paragraph on the page.

 The value is what you want the value of the property to be set and always put
within quotations. The below example shows three possible values of align
attribute: left, center and right.

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.

Example
<!DOCTYPE html>
<html>

<head>
<title>Align Attribute Example</title>
</head>

<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>

</html>

This will display the following result −

Core Attributes
The four core attributes that can be used on the majority of HTML elements
(although not all) are −

 Id

 Title

 Class

 Style

The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element
within an HTML page. There are two primary reasons that you might want to
use an id attribute on an element −

 If an element carries an id attribute as a unique identifier, it is possible to identify

just that element and its content.

 If you have two elements of the same name within a Web page (or style sheet),
you can use the id attribute to distinguish between elements that have the same
name.

We will discuss style sheet in separate tutorial. For now, let's use the id
attribute to distinguish between two paragraph elements as shown below.

Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

The title Attribute

The title attribute gives a suggested title for the element. They syntax for
the title attribute is similar as explained for id attribute −

The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when cursor comes over the element
or while the element is loading.

Example

<!DOCTYPE html>
<html>

<head>
<title>The title Attribute Example</title>
</head>

<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>

</html>

This will produce the following result −

Now try to bring your cursor over "Titled Heading Tag Example" and you will
see that whatever title you used in your code is coming out as a tooltip of the
cursor.

The class Attribute

The class attribute is used to associate an element with a style sheet, and
specifies the class of element. You will learn more about the use of the class
attribute when you will learn Cascading Style Sheet (CSS). So for now you
can avoid it.
The value of the attribute may also be a space-separated list of class names.
For example −

class = "className1 className2 className3"

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules
within the element.

<!DOCTYPE html>
<html>

<head>
<title>The style Attribute</title>
</head>

</html>

This will produce the following result −

At this point of time, we are not learning CSS, so just let's proceed without
bothering much about CSS. Here, you need to understand what are HTML
attributes and how they can be used while formatting content.

Internationalization Attributes
There are three internationalization attributes, which are available for most
(although not all) XHTML elements.

 dir

 lang

 xml:lang
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in
which the text should flow. The dir attribute can take one of two values, as
you can see in the table that follows −

Value Meaning

Ltr Left to right (the default value)

Rtl Right to left (for languages such as Hebrew or Arabic that are read right
to left)

Example

<!DOCTYPE html>
<html dir = "rtl">

<head>
<title>Display Directions</title>
</head>

<body>
This is how IE 5 renders right-to-left directed text.
</body>

</html>

This will produce the following result −

When dir attribute is used within the <html> tag, it determines how text will
be presented within the entire document. When used within another tag, it
controls the text's direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a
document, but this attribute was kept in HTML only for backwards
compatibility with earlier versions of HTML. This attribute has been replaced
by the xml:lang attribute in new XHTML documents.

The values of the lang attribute are ISO-639 standard two-character

language codes. Check HTML Language Codes: ISO 639 for a complete
list of language codes.

Example

<!DOCTYPE html>
<html lang = "en">

<head>
<title>English Language Page</title>
</head>

<body>
This page is using English Language
</body>

</html>

The xml:lang Attribute

The xml:lang attribute is the XHTML replacement for the lang attribute. The
value of the xml:lang attribute should be an ISO-639 country code as
mentioned in previous section.

Generic Attributes
Here's a table of some other attributes that are readily usable with many of
the HTML tags.
Attribute Options Function

Align right, left, center Horizontally aligns tags

Valign top, middle, bottom Vertically aligns tags within an HTML

element.

bgcolor numeric, hexidecimal, Places a background color behind an

RGB values element

background URL Places a background image behind an

element

Id User Defined Names an element for use with

Cascading Style Sheets.

Class User Defined Classifies an element for use with

Cascading Style Sheets.

Width Numeric Value Specifies the width of tables, images, or

table cells.

Height Numeric Value Specifies the height of tables, images, or

table cells.

Title User Defined "Pop-up" title of the elements.

We will see related examples as we will proceed to study other HTML tags.
For a complete list of HTML Tags and related attributes please check reference
to HTML Tags List.

HTML Formatting
If you use a word processor, you must be familiar with the ability to make
text bold, italicized, or underlined; these are just three of the ten options
available to indicate how text can appear in HTML and XHTML.

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as
shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Bold Text Example</title>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>

</html>

This will produce the following result −

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as
shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>

</html>

This will produce the following result −

Underlined Text
Anything that appears within <u>...</u> element, is displayed with
underline as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Underlined Text Example</title>
</head>

<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>

</html>

This will produce the following result −

Strike Text
Anything that appears within <strike>...</strike> element is displayed
with strikethrough, which is a thin line through the text as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Strike Text Example</title>
</head>

<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>

</html>

This will produce the following result −

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most
of the fonts are known as variable-width fonts because different letters are
of different widths (for example, the letter 'm' is wider than the letter 'i'). In
a monospaced font, however, each letter has the same width.

Example
<!DOCTYPE html>
<html>

<head>
<title>Monospaced Font Example</title>
</head>

<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>

</html>
This will produce the following result −

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font
size used is the same size as the characters surrounding it but is displayed
half a character's height above the other characters.

Example
<!DOCTYPE html>
<html>

<head>
<title>Superscript Text Example</title>
</head>

<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>

This will produce the following result −

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font
size used is the same as the characters surrounding it, but is displayed half
a character's height beneath the other characters.

Example
<!DOCTYPE html>
<html>

<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>

This will produce the following result −

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as
inserted text.

Example
<!DOCTYPE html>
<html>

<head>
<title>Inserted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>

This will produce the following result −

Deleted Text
Anything that appears within <del>...</del> element, is displayed as
deleted text.

Example
<!DOCTYPE html>
<html>

<head>
<title>Deleted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>

This will produce the following result −

Larger Text
The content of the <big>...</big> element is displayed one font size larger
than the rest of the text surrounding it as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Larger Text Example</title>
</head>

<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>

This will produce the following result −

Smaller Text
The content of the <small>...</small> element is displayed one font size
smaller than the rest of the text surrounding it as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

</html>

This will produce the following result −

Grouping Content
The <div> and <span> elements allow you to group together several
elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a
<div< element to indicate that all of the elements within that <div> element
relate to the footnotes. You might then attach a style to this <div> element
so that they appear using a special set of style rules.

Example
<!DOCTYPE html>
<html>

<head>
<title>Div Tag Example</title>
</head>

<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>

<div id = "content" align = "left" bgcolor = "white">

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>

</html>

This will produce the following result −

The <span> element, on the other hand, can be used to group inline
elements only. So, if you have a part of a sentence or paragraph which you
want to group together, you could use the <span> element as follows.

Example
<!DOCTYPE html>
<html>

<head>
<title>Span Tag Example</title>
</head>

<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>

</html>

This will produce the following result −

These tags are commonly used with CSS to allow you to attach a style to a
section of a page.

HTML Phrase Tags

The phrase tags have been desicolgned for specific purposes, though they
are displayed in a similar way as other basic tags like <b>, <i>, <pre>,
and <tt>, you have seen in previous chapter. This chapter will take you
through all the important phrase tags, so let's start seeing them one by one.

Emphasized Text
Anything that appears within <em>...</em> element is displayed as
emphasized text.

Example
<!DOCTYPE html>
<html>

<head>
<title>Emphasized Text Example</title>
</head>

<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>

</html>

This will produce the following result −

Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as
marked with yellow ink.

Example
<!DOCTYPE html>
<html>

<head>
<title>Marked Text Example</title>
</head>

<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>

</html>

This will produce the following result −

Strong Text
Anything that appears within <strong>...</strong> element is displayed
as important text.

Example
<!DOCTYPE html>
<html>

<head>
<title>Strong Text Example</title>
</head>

<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>

</html>

This will produce the following result −

Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing
</abbr> tags. If present, the title attribute must contain this full description
and nothing else.

Example
<!DOCTYPE html>
<html>

<head>
<title>Text Abbreviation</title>
</head>

<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>

</html>

This will produce the following result −

Acronym Element
The <acronym> element allows you to indicate that the text between
<acronym> and </acronym> tags is an acronym.

At present, the major browsers do not change the appearance of the content
of the <acronym> element.

Example
<!DOCTYPE html>
<html>

<head>
<title>Acronym Example</title>
</head>

<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>

</html>

This will produce the following result −

Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is
used to override the current text direction.

Example
<!DOCTYPE html>
<html>

<head>
<title>Text Direction Example</title>
</head>

<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>

</html>

This will produce the following result −

Special Terms
The <dfn>...</dfn> element (or HTML Definition Element) allows you to
specify that you are introducing a special term. It's usage is similar to italic
words in the midst of a paragraph.

Typically, you would use the <dfn> element the first time you introduce a
key term. Most recent browsers render the content of a <dfn> element in an
italic font.

Example
<!DOCTYPE html>
<html>

<head>
<title>Special Terms Example</title>
</head>

<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>

</html>

This will produce the following result −

Quoting Text
When you want to quote a passage from another source, you should put it in
between <blockquote>...</blockquote> tags.

Text inside a <blockquote> element is usually indented from the left and
right edges of the surrounding text, and sometimes uses an italicized font.

Example
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>

<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>

<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on

from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML
2.0.</blockquote>
</body>

</html>

This will produce the following result −

Short Quotations
The <q>...</q> element is used when you want to add a double quote
within a sentence.

Example
<!DOCTYPE html>
<html>

<head>
<title>Double Quote Example</title>
</head>

<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>

</html>
This will produce the following result −

Text Citations
If you are quoting a text, you can indicate the source placing it between an
opening <cite> tag and closing </cite> tag

As you would expect in a print publication, the content of the <cite> element
is rendered in italicized text by default.

Example
<!DOCTYPE html>
<html>

<head>
<title>Citations Example</title>
</head>

<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>

</html>

This will produce the following result −

Computer Code
Any programming code to appear on a Web page should be placed
inside <code>...</code> tags. Usually the content of the <code> element
is presented in a monospaced font, just like the code in most programming
books.

Example
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>

<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>

</html>

This will produce the following result −

Keyboard Text
When you are talking about computers, if you want to tell a reader to enter
some text, you can use the <kbd>...</kbd> element to indicate what
should be typed in, as in this example.

Example
<!DOCTYPE html>
<html>

<head>
<title>Keyboard Text Example</title>
</head>

<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>

</html>

This will produce the following result −

Programming Variables
This element is usually used in conjunction with
the <pre> and <code> elements to indicate that the content of that
element is a variable.

Example
<!DOCTYPE html>
<html>

<head>
<title>Variable Text Example</title>
</head>

<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>

</html>

This will produce the following result −

Program Output
The <samp>...</samp> element indicates sample output from a program,
and script etc. Again, it is mainly used when documenting programming or
coding concepts.

Example
<!DOCTYPE html>
<html>

<head>
<title>Program Output Example</title>
</head>

<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>

</html>

This will produce the following result −

Address Text
The <address>...</address> element is used to contain any address.

Example
<!DOCTYPE html>
<html>

<head>
<title>Address Example</title>
</head>

<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>

</html>

This will produce the following result −

388A, Road No 22, Jubilee Hills – Hyderabad

Meta Tags

HTML lets you specify metadata - additional important information about a

document in a variety of ways. The META elements can be used to include
name/value pairs describing properties of the HTML document, such as
author, expiry date, a list of keywords, document author etc.
The <meta> tag is used to provide such additional information. This tag is
an empty element and so does not have a closing tag but it carries
information within its attributes.

You can include one or more meta tags in your document based on what
information you want to keep in your document but in general, meta tags do
not impact physical appearance of the document so from appearance point
of view, it does not matter if you include them or not.

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags inside the
header of the document which is represented
by <head> and </head> tags. A meta tag can have following attributes in
addition to core attributes −

Sr.No Attribute & Description

1 Name

Name for the property. Can be anything. Examples include, keywords,

description, author, revised, generator etc.

2
content

Specifies the property's value.

3
scheme

Specifies a scheme to interpret the property's value (as declared in the

content attribute).

4
http-equiv
Used for http response message headers. For example, http-equiv can be
used to refresh the page or to set a cookie. Values include content-type,
expires, refresh and set-cookie.

Specifying Keywords
You can use <meta> tag to specify important keywords related to the
document and later these keywords are used by the search engines while
indexing your webpage for searching purpose.

Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as
important keywords about the document.

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

This will produce the following result −

Document Description
You can use <meta> tag to give a short description about the document. This
again can be used by various search engines while indexing your webpage
for searching purpose.
Example
<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Document Revision Date

You can use <meta> tag to give information about when last time the
document was updated. This information can be used by various web
browsers while refreshing your webpage.

Example
<!DOCTYPE html>
<html>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Document Refreshing
A <meta> tag can be used to specify a duration after which your web page
will keep refreshing automatically.

Example
If you want your page keep refreshing after every 5 seconds then use the
following syntax.

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You
can also specify a duration if you want to redirect the page after a certain
number of seconds.
Example
Following is an example of redirecting current page to another page after 5
seconds. If you want to redirect page immediately then do not
specify content attribute.

<!DOCTYPE html>
<html>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Setting Cookies
Cookies are data, stored in small text files on your computer and it is
exchanged between web browser and web server to keep track of various
information based on your web application need.

You can use <meta> tag to store cookies on client side and later this
information can be used by the Web Server to track a site visitor.

Example
Following is an example of redirecting current page to another page after 5
seconds. If you want to redirect page immediately then do not
specify content attribute.
<!DOCTYPE html>
<html>

</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

If you do not include the expiration date and time, the cookie is considered a
session cookie and will be deleted when the user exits the browser.

Note − You can check PHP and Cookies tutorial for a complete detail on
Cookies.

Setting Author Name

You can set an author name in a web page using meta tag. See an example
below −

Example
<!DOCTYPE html>
<html>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Specify Character Set

You can use <meta> tag to specify character set used within the webpage.

Example
By default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding
to process Web pages. Following is an example to set UTF-8 encoding −

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>
To serve the static page with traditional Chinese characters, the webpage
must contain a <meta> tag to set Big5 encoding −

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Comments

Comment is a piece of code which is ignored by any web browser. It is a good

practice to add comments into your HTML code, especially in complex
documents, to indicate sections of a document, and any other notes to
anyone looking at the code. Comments help you and others understand your
code and increases code readability.

HTML comments are placed in between  tags. So, any content
placed with-in  tags will be treated as comment and will be
completely ignored by the browser.

Example
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head>

<body>
<p>Document content goes here.....</p>
</body>

</html>

This will produce the following result without displaying the content given as
a part of comments −

Valid vs Invalid Comments

Comments do not nest which means a comment cannot be put inside another
comment. Second the double-dash sequence "--" may not appear inside a
comment except as part of the closing --> tag. You must also make sure that
there are no spaces in the start-of comment string.

Example
Here, the given comment is a valid comment and will be wiped off by the
browser.

<!DOCTYPE html>
<html>

<head>
<title>Valid Comment Example</title>
</head>

<body>

<p>Document content goes here.....</p>
</body>
</html>

But, following line is not a valid comment and will be displayed by the
browser. This is because there is a space between the left angle bracket and
the exclamation mark.

<!DOCTYPE html>
<html>

<head>
<title>Invalid Comment Example</title>
</head>

<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>

</html>

This will produce the following result −

Multiline Comments
So far we have seen single line comments, but HTML supports multi-line
comments as well.

You can comment multiple lines by the special beginning tag  placed before the first line and end of the last line as shown in the
given example below.

Example
<!DOCTYPE html>
<html>

<head>
<title>Multiline Comments</title>
</head>

<p>Document content goes here.....</p>

</body>

</html>

This will produce the following result −

Conditional Comments
Conditional comments only work in Internet Explorer (IE) on Windows but
they are ignored by other browsers. They are supported from Explorer 5
onwards, and you can use them to give conditional instructions to different
versions of IE.

Example
<!DOCTYPE html>
<html>

<head>
<title>Conditional Comments</title>

</head>

<body>
<p>Document content goes here.....</p>
</body>

</html>

You will come across a situation where you will need to apply a different style
sheet based on different versions of Internet Explorer, in such situation
conditional comments will be helpful.

HTML-Images

Images are very important to beautify as well as to depict many complex

concepts in simple way on your web page. This tutorial will take you through
simple steps to use images in your web pages.

Insert Image
You can insert any image in your web page by using <img> tag. Following
is the simple syntax to use this tag.

<img src = "Image URL" ... attributes-list/>

The <img> tag is an empty tag, which means that, it can contain only list of
attributes and it has no closing tag.

Example
To try following example, let's keep our HTML file test.htm and image file
test.png in the same directory −

<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>

</html>

This will produce the following result −

You can use PNG, JPEG or GIF image file based on your comfort but make
sure you specify correct image file name in src attribute. Image name is
always case sensitive.

The alt attribute is a mandatory attribute which specifies an alternate text

for an image, if the image cannot be displayed.

Set Image Location

Usually we keep all the images in a separate directory. So let's keep HTML
file test.htm in our home directory and create a subdirectory images inside
the home directory where we will keep our image test.png.

Example
Assuming our image location is "image/test.png", try the following example
−

<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>

This will produce the following result −

Set Image Width/Height

You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the
image in terms of either pixels or percentage of its actual size.

Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Width and Height</title>
</head>

<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height =
"100"/>
</body>

</html>

This will produce the following result −

Set Image Border

By default, image will have a border around it, you can specify border
thickness in terms of pixels using border attribute. A thickness of 0 means,
no border around the picture.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>

<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>

</html>

This will produce the following result −

Set Image Alignment

By default, image will align at the left side of the page, but you can
use align attribute to set it in the center or right.

Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Alignment</title>
</head>

<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align =
"right"/>
</body>

</html>

Html-tables
The HTML tables allow web authors to arrange data like text, images, links,
other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is
used to create table rows and <td> tag is used to create data cells. The
elements under <td> are regular and left aligned by default

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

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

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>

This will produce the following result −

Here, the border is an attribute of <table> tag and it is used to put a border
across all the cells. If you do not need a border, then you can use border =
"0".

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace
<td> tag, which is used to represent actual data cell. Normally you will put
your top row as table heading as shown below, otherwise you can use <th>
element in any row. Headings, which are defined in <th> tag are centered
and bold by default.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use
to adjust the white space in your table cells. The cellspacing attribute defines
space between table cells, while cellpadding represents the distance between
cell borders and the content within a cell.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns
into a single column. Similar way you will use rowspan if you want to merge
two or more rows.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Tables Backgrounds
You can set table background using one of the following two ways −

 bgcolor attribute − You can set background color for whole table or just for one
cell.

 background attribute − You can set background image for whole table or just
for one cell.

You can also set border color also using bordercolor attribute.

Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do

not use these attributes.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Here is an example of using background attribute. Here we will use an

image available in /images directory.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

This will produce the following result. Here background image did not apply
to table's header.

Table Height and Width

You can set a table width and height using width and height attributes. You
can specify table width or height in terms of pixels or in terms of percentage
of available screen area.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Width/Height</title>
</head>

<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Table Caption
The caption tag will serve as a title or explanation for the table and it shows
up at the top of the table. This tag is deprecated in newer version of
HTML/XHTML.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Caption</title>
</head>

<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The
head and foot are rather similar to headers and footers in a word-processed
document that remain the same for every page, while the body is the main
content holder of the table.

The three elements for separating the head, body, and foot of a table are −

 <thead> − to create a separate table header.

 <tbody> − to indicate the main body of the table.

 <tfoot> − to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or
groups of data. But it is notable that <thead> and <tfoot> tags should appear
before <tbody>

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>

</table>
</body>

</html>

This will produce the following result −

Nested Tables
You can use one table inside another table. Not only tables you can use
almost all the tags inside table data tag <td>.

Example
Following is the example of using another table and other tags inside a table
cell.

<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>

</table>
</body>

</html>

This will produce the following result –

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

HTML List

HTML offers web authors three ways for specifying lists of information. All
lists must contain one or more list elements. Lists may contain −

 <ul> − An unordered list. This will list items using plain bullets.

 <ol> − An ordered list. This will use different schemes of numbers to list your
items.

 <dl> − A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list
is marked with a bullet.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like.
By default, it is a disc. Following are the possible options −

<ul type = "square">

Example
Following is an example where we used <ul type = "square">
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

Example
Following is an example where we used <ul type = "disc"> −

<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

Example
Following is an example where we used <ul type = "circle"> −

<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted,
then HTML ordered list will be used. This list is created by using <ol> tag.
The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you
like. By default, it is a number. Following are the possible options −

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example
Following is an example where we used <ol type = "1">
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

Example
Following is an example where we used <ol type = "I">

<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

Example
Following is an example where we used <ol type = "i">

<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

Example
Following is an example where we used <ol type = "A" >

<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

Example
Following is an example where we used <ol type = "a">

<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of
numbering you need. Following are the possible options −

<ol type = "1" start = "4"> - Numerals starts with 4.

<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

Example
Following is an example where we used <ol type = "i" start = "4" >

<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce the following result −

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where
entries are listed like in a dictionary or encyclopedia. The definition list is the
ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

 <dl> − Defines the start of the list

 <dt> − A term

 <dd> − Term definition

 </dl> − Defines the end of the list

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Definition List</title>
</head>

<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>

</html>
This will produce the following result −

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

HTML-Links

A webpage can contain various links that take you directly to other pages and
even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words,

phrases, and images. Thus you can create hyperlinks using text or images
available on a webpage.

Note − I recommend you to go through a short tutorial on Understanding

URL

Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and
anything between the opening <a> tag and the closing </a> tag becomes
part of the link and a user can click that part to reach to the linked document.
Following is the simple syntax to use <a> tag.

<a href = "Document URL" ... attributes-list>Link Text</a>

Example
Let's try following example which links http://www.tutorialspoint.com at your
page −

<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "http://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>

</html>

This will produce the following result, where you can click on the link
generated to reach to the home page of Tutorials Point (in this example).

The target Attribute

We have used target attribute in our previous example. This attribute is used
to specify the location where linked document is opened. Following are the
possible options −

Sr.No Option & Description

1 _blank

Opens the linked document in a new window or tab.

2
_self

Opens the linked document in the same frame.

3
_parent

Opens the linked document in the parent frame.

4
_top

Opens the linked document in the full body of the window.

5
targetframe

Opens the linked document in a named targetframe.

Example
Try following example to understand basic difference in few options given for
target attribute.

<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
<base href = "http://www.tutorialspoint.com/">
</head>

<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>

</html>

This will produce the following result, where you can click on different links
to understand the difference between various options given for target
attribute.

Use of Base Path

When you link HTML documents related to the same website, it is not required
to give a complete URL for every link. You can get rid of it if you
use <base> tag in your HTML document header. This tag is used to give a
base path for all the links. So your browser will concatenate given relative
path to this base path and will make a complete URL.

Example
Following example makes use of <base> tag to specify base URL and later
we can use relative path to all the links instead of giving complete URL for
every link.

<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
<base href = "http://www.tutorialspoint.com/">
</head>

<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>

</html>

This will produce the following result, where you can click on the link
generated HTML Tutorial to reach to the HTML tutorial.

Now given URL <a href = "/html/index.htm" is being considered as <ahref =

"http://www.tutorialspoint.com/html/index.htm"

Linking to a Page Section

You can create a link to a particular section of a given webpage by
using name attribute. This is a two-step process.

Note − The name attribute deprecated in HTML5. Do not use this attribute.
Use id and title attribute instead.
First create a link to the place where you want to reach with-in a webpage
and name it using <a...> tag as follows −

<h1>HTML Text Links <a name = "top"></a></h1>

Second step is to create a hyperlink to link the document and place where
you want to reach −

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go
to the Top to reach to the top of the HTML Text Link tutorial.

Go to the Top

Setting Link Colors

You can set colors of your links, active links and visited links
using link, alink and vlink attributes of <body> tag.

Example
Save the following in test.htm and open it in any web browser to see
how link, alink and vlink attributes work.

<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
<base href = "http://www.tutorialspoint.com/">
</head>

<body alink = "#54A250" link = "#040404" vlink = "#F40633">

<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>

</html>
This will produce the following result. Just check color of the link before
clicking on it, next check its color when you activate it and when the link has
been visited.

Download Links
You can create text link to make your PDF, or DOC or ZIP files downloadable.
This is very simple; you just need to give complete URL of the downloadable
file as follows −

<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<a href = "http://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>

</html>

This will produce following link and will be used to download a file.

Download PDF File

Image Links

We have seen how to create hypertext link using text and we also learnt how
to use images in our webpages. Now, we will learn how to use images to
create hyperlinks.

Example
It's simple to use an image as hyperlink. We just need to use an image inside
hyperlink at the place of text as shown below −

<!DOCTYPE html>
<html>

<head>
<title>Image Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "http://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>

</html>

HTML Email Tag

HTML <a> tag provides you option to specify an email address to send an
email. While using <a> tag as an email tag, you will use mailto: email
address along with href attribute. Following is the syntax of
using mailto instead of using http.

<a href = "mailto: [email protected]">Send Email</a>

This code will generate the following link which you can use to send email.

Send Email

Now, if a user clicks this link, it launches one Email Client (like Lotus Notes,
Outlook Express etc. ) installed on your user's computer. There is another
risk to use this option to send email because if user do not have email client
installed on their computer then it would not be possible to send email.

Default Settings
You can specify a default email subject and email body along with your email
address. Following is the example to use default subject and body.

<a href = "mailto:[email protected]?subject = Feedback&body = Message">

Send Feedback
</a>

This code will generate the following link which you can use to send email.

Send Feedback

Another option to facilitate people to send you emails. One option could be to use
HTML forms to collect user data and then use PHP or CGI script to send an email.

HTML Frames

HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document. A collection of
frames in the browser window is known as a frameset. The window is divided
into frames in a similar way the tables are organized: into rows and columns.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to
use frames in your webpages −

 Some smaller devices cannot cope with frames often because their screen is not
big enough to be divided up.

 Sometimes your page will be displayed differently on different computers due to

different screen resolution.

 The browser's back button might not work as the user hopes.

 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the frame.

Note − The <frame> tag deprecated in HTML5. Do not use this element.
Example
Following is the example to create three horizontal frames −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>

This will produce the following result −

Example
Let's put the above example as follows, here we replaced rows attribute by
cols and changed their width. This will create all the three frames vertically
−

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

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

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

This will produce the following result −

The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag −

Sr.No Attribute & Description

1 cols

Specifies how many columns are contained in the frameset and the size of
each column. You can specify the width of each column in one of the four
ways −

Absolute values in pixels. For example, to create three vertical frames,

use cols = "100, 500, 100".

A percentage of the browser window. For example, to create three vertical

frames, use cols = "10%, 80%, 10%".
Using a wildcard symbol. For example, to create three vertical frames,
use cols = "10%, *, 10%". In this case wildcard takes remainder of the
window.

As relative widths of the browser window. For example, to create three

vertical frames, use cols = "3*, 2*, 1*". This is an alternative to
percentages. You can use relative widths of the browser window. Here the
window is divided into sixths: the first column takes up half of the window,
the second takes one third, and the third takes one sixth.

2
rows

This attribute works just like the cols attribute and takes the same values,
but it is used to specify the rows in the frameset. For example, to create
two horizontal frames, use rows = "10%, 90%". You can specify the height
of each row in the same way as explained above for columns.

3
border

This attribute specifies the width of the border of each frame in pixels. For
example, border = "5". A value of zero means no border.

4
frameborder

This attribute specifies whether a three-dimensional border should be

displayed between frames. This attribute takes value either 1 (yes) or 0
(no). For example frameborder = "0" specifies no border.

5
framespacing

This attribute specifies the amount of space between frames in a frameset.

This can take any integer value. For example framespacing = "10" means
there should be 10 pixels spacing between each frames.

The <frame> Tag Attributes

Following are the important attributes of <frame> tag −

Sr.No Attribute & Description

1 src

This attribute is used to give the file name that should be loaded in the
frame. Its value can be any URL. For example, src =
"/html/top_frame.htm" will load an HTML file available in html directory.

2
name

This attribute allows you to give a name to a frame. It is used to indicate

which frame a document should be loaded into. This is especially important
when you want to create links in one frame that load pages into an another
frame, in which case the second frame needs a name to identify itself as
the target of the link.

3
frameborder

This attribute specifies whether or not the borders of that frame are shown;
it overrides the value given in the frameborder attribute on the
<frameset> tag if one is given, and this can take values either 1 (yes) or
0 (no).

4
marginwidth

This attribute allows you to specify the width of the space between the left
and right of the frame's borders and the frame's content. The value is given
in pixels. For example marginwidth = "10".

5
marginheight
This attribute allows you to specify the height of the space between the
top and bottom of the frame's borders and its contents. The value is given
in pixels. For example marginheight = "10".

6
noresize

By default, you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from being able
to resize the frame. For example noresize = "noresize".

7
scrolling

This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either "yes", "no" or "auto". For example scrolling
= "no" means it should not have scroll bars.

8
longdesc

This attribute allows you to provide a link to another page containing a

long description of the contents of the frame. For example longdesc =
"framedescription.htm"

Browser Support for Frames

If a user is using any old browser or any browser, which does not support
frames then <noframes> element should be displayed to the user.

So you must place a <body> element inside the <noframes> element

because the <frameset> element is supposed to replace the <body>
element, but if a browser does not understand <frameset> element then it
should understand what is inside the <body> element which is contained in
a <noframes> element.

You can put some nice message for your user having old browsers. For
example, Sorry!! your browser does not support frames. as shown in the
above example.
Frame's name and target attributes
One of the most popular uses of frames is to place navigation bars in one
frame and then load main pages into a separate frame.

Let's see following example where a test.htm file has following code −

<!DOCTYPE html>
<html>

<head>
<title>HTML Target Frames</title>
</head>

<frameset cols = "200, *">

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

Here, we have created two columns to fill with two frames. The first frame is
200 pixels wide and will contain the navigation menu bar implemented
by menu.htm file. The second column fills in remaining space and will
contain the main part of the page and it is implemented by main.htm file.
For all the three links available in menu bar, we have mentioned target frame
as main_page, so whenever you click any of the links in menu bar, available
link will open in main page.

Following is the content of menu.htm file

<!DOCTYPE html>
<html>

<body bgcolor = "#4a7d49">

<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />

<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>

</body>

</html>

Following is the content of main.htm file −

<!DOCTYPE html>
<html>

<body bgcolor = "#b5dcb3">

<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>

When we load test.htm file, it produces following result −

Now you can try to click links available in the left panel and see the result.
The targetattribute can also take one of the following values −

Sr.No Option & Description

1 _self

Loads the page into the current frame.

2
_blank

Loads a page into a new browser window. Opening a new window.

3
_parent

Loads the page into the parent window, which in the case of a single
frameset is the main browser window.

4
_top

Loads the page into the browser window, replacing any current frames.

5
targetframe

Loads the page into a named targetframe.

HTML-Iframe

You can define an inline frame with HTML tag <iframe>. The <iframe> tag
is not somehow related to <frameset> tag, instead, it can appear anywhere
in your document. The <iframe> tag defines a rectangular region within the
document in which the browser can display a separate document, including
scrollbars and borders.

The src attribute is used to specify the URL of the document that occupies
the inline frame.

Example
Following is the example to show how to use the <iframe> −
<!DOCTYPE html>
<html>

<head>
<title>HTML Iframes</title>
</head>

<body>
<p>Document content goes here...</p>

<iframe src = "/html/menu.htm" width = "555" height = "200">

Sorry your browser does not support inline frames.
</iframe>

<p>Document content also go here...</p>

</body>

</html>

This will produce the following result −

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class,
frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style,
and title behave exactly like the corresponding attributes for the <frame>
tag.

Sr.No Attribute & Description

1 src
This attribute is used to give the file name that should be loaded in the
frame. Its value can be any URL. For example, src =
"/html/top_frame.htm" will load an HTML file available in html directory.

2
name

This attribute allows you to give a name to a frame. It is used to indicate

3
frameborder

4
marginwidth

This attribute allows you to specify the width of the space between the left
and right of the frame's borders and the frame's content. The value is given
in pixels. For example marginwidth = "10".

5
marginheight

This attribute allows you to specify the height of the space between the
top and bottom of the frame's borders and its contents. The value is given
in pixels. For example marginheight = "10".

6
noresize
By default, you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from being able
to resize the frame. For example noresize = "noresize".

7
scrolling

This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either "yes", "no" or "auto". For example scrolling
= "no" means it should not have scroll bars.

8
longdesc

This attribute allows you to provide a link to another page containing a

long description of the contents of the frame. For example longdesc =
"framedescription.htm"

Html –Block

All the HTML elements can be categorized into two categories (a) Block Level
Elements (b)Inline Elements.

Block Elements
Block elements appear on the screen as if they have a line break before and
after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements
are all block level elements. They all start on their own new line, and anything
that follows them appears on its own new line.

Inline Elements
Inline elements, on the other hand, can appear within sentences and do not
have to appear on a new line of their own. The <b>, <i>, <u>, <em>,
<strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>,
<cite>, <dfn>, <kbd>, and <var> elements are all inline elements.
Grouping HTML Elements
There are two important tags which we use very frequently to group various
other HTML tags (i) <div> tag and (ii) <span> tag

The <div> tag

This is the very important block level tag which plays a big role in grouping
various other HTML tags and applying CSS on group of elements. Even now
<div> tag can be used to create webpage layout where we define different
parts (Left, Right, Top etc.) of the page using <div> tag. This tag does not
provide any visual change on the block but this has more meaning when it is
used with CSS.

Example
Following is a simple example of <div> tag. We will learn Cascading Style
Sheet (CSS) in a separate chapter but we used it here to show the usage of
<div> tag −

<!DOCTYPE html>
<html>

<body>

<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>

<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>

<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>

</html>

This will produce the following result −

The <span> tag

The HTML <span> is an inline element and it can be used to group inline-
elements in an HTML document. This tag also does not provide any visual
change on the block but has more meaning when it is used with CSS.

The difference between the <span> tag and the <div> tag is that the <span>
tag is used with inline elements whereas the <div> tag is used with block-
level elements.

Example
Following is a simple example of <span> tag. We will learn Cascading Style
Sheet (CSS) in a separate chapter but we used it here to show the usage of
<span> tag −
<!DOCTYPE html>
<html>

<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>

</html>

This will produce the following result −

This is red and this is green

HTML-Background

By default, your webpage background is white in color. You may not like it,
but no worries. HTML provides you following two good ways to decorate your
webpage background.

 HTML Background with Colors

 HTML Background with Images

Now let's see both the approaches one by one using appropriate examples.

Html Background with Colors

The bgcolor attribute is used to control the background of an HTML element,
specifically page body and table backgrounds.

Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute.

Following is the syntax to use bgcolor attribute with any HTML tag.
<tagname bgcolor = "color_value"...>

This color_value can be given in any of the following formats −

Example
Here are the examples to set background of an HTML tag −

<!DOCTYPE html>
<html>

<head>
<title>HTML Background Colors</title>
</head>

<body>

<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>

<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>

<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Html Background with Images

The background attribute can also be used to control the background of an
HTML element, specifically page body and table backgrounds. You can specify
an image to set background of your HTML page or table.

Note − The background attribute deprecated in HTML5. Do not use this attribute.

Following is the syntax to use background attribute with any HTML tag.

Note − The background attribute is deprecated and it is recommended to use Style

Sheet for background setting.

<tagname background = "Image URL"...>

The most frequently used image formats are JPEG, GIF and PNG images.

Example
Here are the examples to set background images of a table.

<!DOCTYPE html>
<html>

<head>
<title>HTML Background Images</title>
</head>

<body>

<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>

</html>

HTML-Colors

Colors are very important to give a good look and feel to your website. You
can specify colors on page level using <body> tag or you can set colors for
individual tags using bgcolor attribute.

The <body> tag has following attributes which can be used to set different
colors −

 bgcolor − sets a color for the background of the page.

 text − sets a color for the body text.

 alink − sets a color for active links or selected links.

 link − sets a color for linked text.

 vlink − sets a color for visited links − that is, for linked text that you have already
clicked on.
HTML Color Coding Methods
There are following three different methods to set colors in your web page −

 Color names − You can specify color names directly like green, blue or red.

 Hex codes − A six-digit code representing the amount of red, green, and blue
that makes up the color.

 Color decimal or percentage values − This value is specified using the rgb( )
property.

Now we will see these coloring schemes one by one.

HTML Colors - Color Names

You can specify direct a color name to set text or background color. W3C has
listed 16 basic color names that will validate with an HTML validator but there
are over 200 different color names supported by major browsers.

Note − Check a complete list of HTML Color Name.

W3C Standard 16 Colors

Here is the list of W3C Standard 16 Colors names and it is recommended to
use them.

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

Example
Here are the examples to set background of an HTML tag by color name −
<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "blue" bgcolor = "green">

<p>Use different color names for for body and table and see the result.</p>

<table bgcolor = "black">

<tr>
<td>
<font color = "white">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>

</html>

HTML Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR)
represent a red value, the next two are a green value(GG), and the last are
the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Paintshop Pro or MS Paint.

Each hexadecimal code will be preceded by a pound or hash sign #. Following

is a list of few colors using hexadecimal notation.

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

Example
Here are the examples to set background of an HTML tag by color code in
hexadecimal −

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Hex</title>
</head>

<body text = "#0000FF" bgcolor = "#00FF00">

<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>

</html>

HTML Colors - RGB Values

This color value is specified using the rgb( ) property. This property takes
three values, one each for red, green, and blue. The value can be an integer
between 0 and 255 or a percentage.

Note − All the browsers does not support rgb() property of color so it is recommended
not to use it.

Following is a list to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)
rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

Example
Here are the examples to set background of an HTML tag by color code using
rgb() values −

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by RGB code</title>
</head>

<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">

<p>Use different color code for for body and table and see the result.</p>

<table bgcolor = "rgb(0,0,0)">

<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>

</html>
Browser Safe Colors
Here is the list of 216 colors which are supposed to be safest and computer
independent colors. These colors very from hexa code 000000 to FFFFFF and
they will be supported by all the computers having 256 color palette

HTML-Fonts

Fonts play a very important role in making a website more user friendly and
increasing content readability. Font face and color depends entirely on the
computer and browser that is being used to view your page but you can use
HTML <font> tag to add style, size, and color to the text on your website.
You can use a <basefont> tag to set all of your text to the same size, face,
and color.

The font tag is having three attributes called size, color, and face to
customize your fonts. To change any of the font attributes at any time within
your webpage, simply use the <font> tag. The text that follows will remain
changed until you close with the </font> tag. You can change one or all of
the font attributes within one <font> tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in
a future version of HTML. So they should not be used rather, it's suggested to use CSS
styles to manipulate your fonts. But still for learning purpose, this chapter will explain
font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted
values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example
<!DOCTYPE html>
<html>

<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>

</html>

This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the
preset font size should be. You can specify it like <font size =
"+n"> or <font size = "−n">

Example
<!DOCTYPE html>
<html>

<head>
<title>Relative Font Size</title>
</head>

</html>

This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing
the page doesn't have the font installed, they will not be able to see it. Instead
user will see the default font face applicable to the user's computer.

Example
<!DOCTYPE html>
<html>

<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>

</html>

This will produce the following result −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on
their computer. So, it is possible to specify two or more font face alternatives
by listing the font face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

When your page is loaded, their browser will display the first font face
available. If none of the given fonts are installed, then it will display the
default font face Times New Roman.

Note − Check a complete list of HTML Standard Fonts.

Setting Font Color

You can set any font color you like using color attribute. You can specify the
color that you want by either the color name or hexadecimal code for that
color.

Note − You can check a complete list of HTML Color Name with Codes.

Example
<!DOCTYPE html>
<html>

<head>
<title>Setting Font Color</title>
</head>

</html>

This will produce the following result −

The <basefont> Element

The <basefont> element is supposed to set a default font size, color, and
typeface for any parts of the document that are not otherwise contained
within a <font> tag. You can use the <font> elements to override the
<basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will
support relative font setting by giving size a value of +1 for a size larger or
−2 for two sizes smaller.

Example
<!DOCTYPE html>
<html>

<head>
<title>Setting Basefont Color</title>
</head>

<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>

<p><font size = "+2" color = "darkgray">

This is darkgray text with two sizes larger
</font>
</p>

<p><font face = "courier" size = "-1" color = "#000000">

It is a courier font, a size smaller and black in color.
</font>
</p>
</body>

</html>

This will produce the following result –

This is the page's default font.

Example of the <basefont> Element

This is darkgray text with two sizes larger
It is a courier font, a size smaller and black in color.

HTML Forms are required, when you want to collect some data from the site
visitor. For example, during user registration you would like to collect
information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end
application will perform required processing on the passed data based on
defined business logic inside the application.

There are various form elements available like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following
syntax −

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.
</form>

Form Attributes
Apart from common attributes, following is a list of the most frequently used
form attributes −

Sr.No Attribute & Description

1 action

Backend script ready to process your passed data.

2
method
Method to be used to upload data. The most frequently used are GET and
POST methods.

3
target

Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.

4
enctype

You can use the enctype attribute to specify how the browser encodes the
data before it sends it to the server. Possible values are −

application/x-www-form-urlencoded − This is the standard method

most forms use in simple scenarios.

mutlipart/form-data − This is used when you want to upload binary data

in the form of files like image, word file etc.

Note − You can refer to Perl & CGI for a detail on how form data upload
works.

HTML Form Controls

There are different types of form controls that you can use to collect data
using HTML form −

 Text Input Controls

 Checkboxes Controls

 Radio Box Controls

 Select Box Controls

 File Select boxes

 Hidden Controls

 Clickable Buttons

 Submit and Reset Button

Text Input Controls
There are three types of text input used on forms −

 Single-line text input controls − This control is used for items that require only
one line of user input, such as search boxes or names. They are created using
HTML <input> tag.

 Password input controls − This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl <input>
tag.

 Multi-line text input controls − This is used when the user is required to give
details that may be longer than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as
search boxes or names. They are created using HTML <input> tag.

Example
Here is a basic example of a single-line text input used to take first name and
last name −

<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <input> tag for creating text field.

Sr.No Attribute & Description

1 type

Indicates the type of input control and for text input control it will be set
to text.

2
name

Used to give a name to the control which is sent to the server to be

recognized and get the value.

3
value

This can be used to provide an initial value inside the control.

4
size

Allows to specify the width of the text-input control in terms of characters.

5
maxlength

Allows to specify the maximum number of characters a user can enter into
the text box.
Password input controls
This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTML <input>tag but type
attribute is set to password.

Example
Here is a basic example of a single-line password input used to take user
password −

<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <input> tag for creating password field.

Sr.No Attribute & Description

1 type

Indicates the type of input control and for password input control it will be
set to password.

2
name

Used to give a name to the control which is sent to the server to be

recognized and get the value.

3
value

This can be used to provide an initial value inside the control.

4
size

Allows to specify the width of the text-input control in terms of characters.

5
maxlength

Allows to specify the maximum number of characters a user can enter into
the text box.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than
a single sentence. Multi-line input controls are created using HTML
<textarea> tag.

Example
Here is a basic example of a multi-line text input used to take item description
−

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <textarea> tag.

Sr.No Attribute & Description

1 name

Used to give a name to the control which is sent to the server to be

recognized and get the value.

2
rows

Indicates the number of rows of text area box.

3
cols
Indicates the number of columns of text area box

Checkbox Control
Checkboxes are used when more than one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set
to checkbox..

Example
Here is an example HTML code for a form with two checkboxes −

<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for <checkbox> tag.

Sr.No Attribute & Description

1 type

Indicates the type of input control and for checkbox input control it will be
set to checkbox..

2
name

Used to give a name to the control which is sent to the server to be

recognized and get the value.

3
value

The value that will be used if the checkbox is selected.

4
checked

Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used when out of many options, just one option is required
to be selected. They are also created using HTML <input> tag but type
attribute is set to radio.

Example
Here is example HTML code for a form with two radio buttons −

<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of attributes for radio button.

Sr.No Attribute & Description

1 type

Indicates the type of input control and for checkbox input control it will be
set to radio.

2
name

Used to give a name to the control which is sent to the server to be

recognized and get the value.

3
value

The value that will be used if the radio box is selected.

4
checked

Set to checked if you want to select it by default.

Select Box Control

A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select
one or more options.

Example
Here is example HTML code for a form with one drop down box

<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>

This will produce the following result −

Attributes
Following is the list of important attributes of <select> tag −

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

2
size

This can be used to present a scrolling list box.

3
multiple

If set to "multiple" then allows a user to select multiple items from the
menu.

Following is the list of important attributes of <option> tag −

Sr.No Attribute & Description

1 value

The value that will be used if an option in the select box box is selected.

2
selected

Specifies that this option should be the initially selected value when the
page loads.

3
label

An alternative way of labeling options

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to
use a file upload box, also known as a file select box. This is also created
using the <input> element but type attribute is set to file.
Example
Here is example HTML code for a form with one file upload box −

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

</html>

This will produce the following result −

Attributes
Following is the list of important attributes of file upload box −

Sr.No Attribute & Description

1 name

Used to give a name to the control which is sent to the server to be

recognized and get the value.

2
accept

Specifies the types of files that the server accepts.

Button Controls
There are various ways in HTML to create clickable buttons. You can also
create a clickable button using <input>tag by setting its type attribute
to button. The type attribute can take the following values −

Sr.No Type & Description

1 submit

This creates a button that automatically submits a form.

2
reset

This creates a button that automatically resets form controls to their initial
values.

3
button

This creates a button that is used to trigger a client-side script when the
user clicks that button.

4
image

This creates a clickable button but we can use an image as background of

the button.

Example
Here is example HTML code for a form with three types of buttons −

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

</html>

This will produce the following result −

Hidden Form Controls

Hidden form controls are used to hide data inside the page which later on can
be pushed to the server. This control hides inside the code and does not
appear on the actual page. For example, following hidden form is being used
to keep current page number. When a user will click next page then the value
of hidden control will be sent to the web server and there it will decide which
page will be displayed next based on the passed current page.

Example
Here is example HTML code to show the usage of hidden control −

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

</html>

HTML Embed Multimedia

Sometimes you need to add music or video into your web page. The easiest
way to add video or sound to your web site is to include the special HTML tag
called <embed>. This tag causes the browser itself to include controls for
the multimedia automatically provided browser supports <embed> tag and
given media type.

You can also include a <noembed> tag for the browsers which don't
recognize the <embed> tag. You could, for example, use <embed> to display
a movie of your choice, and <noembed> to display a single JPG image if
browser does not support <embed> tag.

Example
Here is a simple example to play an embedded midi file −

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

</html>

This will produce the following result −

You can put any media file in src attribute. You can try it yourself by giving
various types of files.

The <embed> Tag Attributes

Following is the list of important attributes which can be used with <embed>
tag.

Note −The align and autostart attributes deprecated in HTML5. Do not use these
attributes.

Sr.No Attribute & Description

1 align

Determines how to align the object. It can be set to either center, left or
right.

2
autostart

This boolean attribute indicates if the media should start automatically.

You can set it either true or false.

3
loop

Specifies if the sound should be played continuously (set loop to true), a

certain number of times (a positive value) or not at all (false)

4
playcount
Specifies the number of times to play the sound. This is alternate option
for loop if you are usiong IE.

5
hidden

Specifies if the multimedia object should be shown on the page. A false

value means no and true values means yes.

6
width

Width of the object in pixels

7
height

Height of the object in pixels

8
name

A name used to reference the object.

9
src

URL of the object to be embedded.

10
volume

Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

Supported Video Types

You can use various media types like Flash movies (.swf), AVI's (.avi), and
MOV's (.mov) file types inside embed tag.

 .swf files − are the file types created by Macromedia's Flash program.

 .wmv files − are Microsoft's Window's Media Video file types.

 .mov files − are Apple's Quick Time Movie format.

 .mpeg files − are movie files created by the Moving Pictures Expert Group.

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

</html>

This will produce the following result −

Background Audio
You can use HTML <bgsound> tag to play a soundtrack in the background
of your webpage. This tag is supported by Internet Explorer only and most of
the other browsers ignore this tag. It downloads and plays an audio file when
the host document is first downloaded by the user and displayed. The
background sound file also will replay whenever the user refreshes the
browser.

Note − The bgsound tag is deprecated and it is supposed to be removed in

a future version of HTML. So they should not be used rather, it's suggested
to use HTML5 tag audio for adding sound. But still for learning purpose, this
chapter will explain bgsound tag in detail.

This tag is having only two attributes loop and src. Both these attributes have
same meaning as explained above.
Here is a simple example to play a small midi file −

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

</html>

This will produce the blank screen. This tag does not display any component
and remains hidden.

Internet Explorer can also handle only three different sound format files −
wav, the native format for PCs; au, the native format for most Unix
workstations; and MIDI, a universal music-encoding scheme.

HTML Object tag

HTML 4 introduces the <object> element, which offers an all-purpose
solution to generic object inclusion. The <object> element allows HTML
authors to specify everything required by an object for its presentation by a
user agent.

Here are a few examples −

Example - 1
You can embed an HTML document in an HTML document itself as follows −

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">

alt : <a href = "data/test.htm">test.htm</a>
</object>

Here alt attribute will come into picture if browser does not
support object tag.

Example - 2
You can embed a PDF document in an HTML document as follows −

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">

alt : <a href = "data/test.pdf">test.htm</a>
</object>

Example - 3
You can specify some parameters related to the document with
the <param> tag. Here is an example to embed a wav file −

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">

Example - 4
You can add a flash document as follows −

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"

codebase = "someplace/swflash.cab" width = "200" height = "300">

<param name = "movie" value = "flash/penguin.swf" />

Example - 5
You can add a java applet into HTML document as follows −

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"

width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>

The classid attribute identifies which version of Java Plug-in to use. You can
use the optional codebase attribute to specify if and how to download the
JRE.

HTML Marquee Tag

An HTML marquee is a scrolling piece of text displayed either horizontally
across or vertically down your webpage depending on the settings. This is
created by using HTML <marquees> tag.

Note − The <marquee> tag deprecated in HTML5. Do not use this element, instead you
can use JavaScript and CSS to create such effects.

Syntax
A simple syntax to use HTML <marquee> tag is as follows −

<marquee attribute_name = "attribute_value"....more attributes>

One or more lines or text message or image
</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with
<marquee> tag.

Sr.No Attribute & Description

1 width

This specifies the width of the marquee. This can be a value like 10 or 20%
etc.

2
height

This specifies the height of the marquee. This can be a value like 10 or
20% etc.

3
direction

This specifies the direction in which marquee should scroll. This can be a
value like up, down, left or right.

4
behavior
This specifies the type of scrolling of the marquee. This can have a value
like scroll, slide and alternate.

5
scrolldelay

This specifies how long to delay between each jump. This will have a value
like 10 etc.

6
scrollamount

This specifies the speed of marquee text. This can have a value like 10 etc.

7
loop

This specifies how many times to loop. The default value is INFINITE, which
means that the marquee loops endlessly.

8
bgcolor

This specifies background color in terms of color name or color hex value.

9
hspace

This specifies horizontal space around the marquee. This can be a value
like 10 or 20% etc.

10
vspace

This specifies vertical space around the marquee. This can be a value like
10 or 20% etc.

Below are few examples to demonstrate the usage of marquee tag.

Examples - 1
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
</body>

</html>

Examples - 2
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>

</html>

Examples - 3
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>

</html>

HTML-Header

We have learnt that a typical HTML document will have following structure −

Document declaration tag

<html>

<head>
Document header related tags
</head>

<body>
Document body related tags
</body>

</html>

This chapter will give a little more detail about header part which is
represented by HTML <head> tag. The <head> tag is a container of various
important tags like <title>, <meta>, <link>, <base>, <style>, <script>,
and <noscript> tags.

The HTML <title> Tag

The HTML <title> tag is used for specifying the title of the HTML document.
Following is an example to give a title to an HTML document −

<!DOCTYPE html>
<html>

<head>
<title>HTML Title Tag Example</title>
</head>

<body>
<p>Hello, World!</p>
</body>

</html>

This will produce the following result −

The HTML <meta> Tag

The HTML <meta> tag is used to provide metadata about the HTML document
which includes information about page expiry, page author, list of keywords,
page description etc.

Following are few of the important usages of <meta> tag inside an HTML
document −

<!DOCTYPE html>
<html>

<head>
<title>HTML Meta Tag Example</title>

<meta name = "robots" content = "noindex, nofollow">

</head>

<body>
<p>Hello, World!</p>
</body>

</html>

This will produce the following result −

The HTML <base> Tag

The HTML <base> tag is used for specifying the base URL for all relative URLs
in a page, which means all the other URLs will be concatenated into base URL
while locating for the given item.

For example, all the given pages and images will be searched after prefixing
the given URLs with base URL http://www.tutorialspoint.com/ directory −

<!DOCTYPE html>
<html>

<head>
<title>HTML Base Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
</head>

<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>

</html>

This will produce the following result −

But if you change base URL to something else, for example, if base URL is
http://www.tutorialspoint.com/home then image and other given links will
become like http://www.tutorialspoint.com/home/images/logo.png and
http://www.tutorialspoint.com/home/html/index.htm

The HTML <link> Tag

The HTML <link> tag is used to specify relationships between the current
document and external resource. Following is an example to link an external
style sheet file available in css sub-directory within web root −

<!DOCTYPE html>
<html>

<head>
<title>HTML link Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>

<body>
<p>Hello, World!</p>
</body>

</html>
This will produce the following result −

The HTML <style> Tag

The HTML <style> tag is used to specify style sheet for the current HTML
document. Following is an example to define few style sheet rules inside
<style> tag −

<!DOCTYPE html>
<html>

<head>
<title>HTML style Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />

<style type = "text/css">

.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>

<body>
<p class = "myclass">Hello, World!</p>
</body>

</html>

This will produce the following result −

Note – You will learn more about CSS in the second part of this course.

The HTML <script> Tag

The HTML <script> tag is used to include either external script file or to define
internal script for the HTML document. Following is an example where we are
using JavaScript to define a simple JavaScript function −

<!DOCTYPE html>
<html>

<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />

<script type = "text/JavaScript">

function Hello() {
alert("Hello, World");
}
</script>
</head>

</html>

Deprecated Tags and Attributes

Deprecated Tags
The following elements are not available in HTML5 anymore and their function
is better handled by CSS −

Tags (Elements) Description

<acronym> Defines an acronym

<applet> Defines an applet

<basefont> Defines an base font for the page.

<big> Defines big text

<center> Defines centered text

<dir> Defines a directory list

<font> Defines text font, size, and color

<frame> Defines a frame

<frameset> Defines a set of frames

<isindex> Defines a single-line input field

<noframes> Defines a noframe section

<s> Defines strikethrough text

<strike> Defines strikethrough text

<tt> Defines teletype text

<u> Defines underlined text

Deprecated Attributes
HTML5 has none of the presentational attributes that were in HTML4 as their
functions are better handled by CSS. Some attributes from HTML4 are no
longer allowed in HTML5 at all and they have been removed completely.

Following is the table having removed attributed and their corresponding

impacted tags (elements) ie. elements from which those attributes have been
removed permanently −

Removed Attributes From the Elements

rev link, a

charset link and a

shape a

coords a

longdesc img and iframe.

target link

nohref area

profile head

version html

name img

scheme meta
archive object

classid object

codebase object

codetype object

declare object

standby object

valuetype param

type param

axis td and t

abbr td and t

scope td

align caption, iframe, img, input, object, legend, table, hr, div,
h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot,
th, thead and tr.

alink body

link body
vlink body

text body

background body

bgcolor table, tr, td, th and body.

border table and object.

cellpadding table

cellspacing table

char col, colgroup, tbody, td, tfoot, th, thead and tr.

charoff col, colgroup, tbody, td, tfoot, th, thead and tr.

clear br

compact dl, menu, ol and ul.

frame table

compact dl, menu, ol and ul.

frame table

frameborder iframe
hspace img and object.

vspace img and object.

marginheight iframe

marginwidth iframe

noshade hr

nowrap td and th

rules table

scrolling iframe

size hr

type li, ol and ul.

valign col, colgroup, tbody, td, tfoot, th, thead and tr

width hr, table, td, th, col, colgroup and pre

CSS-Cascading Style Sheets

Introduction

Cascading Style Sheets, fondly referred to as CSS, is a simple design

language intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used,
layout designs,variations in display for different devices and screen sizes as
well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with
the markup languages HTML or XHTML.

Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.

 Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.

 Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.

 Superior styles to HTML − CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.

 Multiple Device Compatibility − Style sheets allow content to be optimized for

more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.

 Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.

 Offline Browsing − CSS can store web applications locally with the help of an
offline catche.Using of this, we can view offline websites.The cache also ensures
faster loading and better overall performance of the website.
 Platform Independence − The Script offer consistent platform independence
and can support latest browsers as well.

Who Creates and Maintains CSS?

CSS was invited by Håkon Wium Lie on October 10, 1994 and maintained
through a group of people within the W3C called the CSS Working Group. The
CSS Working Group creates documents called specifications. When a
specification has been discussed and officially ratified by W3C members, it
becomes a recommendation.

These ratified specifications are called recommendations because the W3C

has no control over the actual implementation of the language. Independent
companies and organizations create that software.

NOTE − The World Wide Web Consortium, or W3C is a group that makes
recommendations about how the Internet works and how it should evolve.

CSS Versions
Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a
recommendation in December 1996. This version describes the CSS language
as well as a simple visual formatting model for all the HTML tags.

CSS2 was became a W3C recommendation in May 1998 and builds on CSS1.
This version adds support for media-specific style sheets e.g. printers and
aural devices, downloadable fonts, element positioning and tables.

CSS3 was became a W3C recommendation in June 1999 and builds on older
versions CSS. it has divided into documentations is called as Modules and
here each module having new extension features defined in CSS2

Example
First let's consider an example of HTML document which makes use of <font>
tag and associated attributes to specify text color and font size −

Note − The font tag deprecated and it is supposed to be removed in a future version of
HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate
your fonts. But still for learning purpose, this chapter will work with an example using
the font tag.

<!DOCTYPE html>
<html>

<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>

</html>

We can re-write above example with the help of Style Sheet as follows −

<!DOCTYPE html>
<html>

<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>

</html>

This will produce the following result −

You can use CSS in three ways in your HTML document −

 External Style Sheet − Define style sheet rules in a separate .css file and then
include that file in your HTML document using HTML <link> tag.

 Internal Style Sheet − Define style sheet rules in header section of the HTML
document using <style> tag.

 Inline Style Sheet − Define style sheet rules directly along-with the HTML
elements using style attribute.

Let's see all the three cases one by one with the help of suitable examples.

External Style Sheet

If you need to use your style sheet to various pages, then its always
recommended to define a common style sheet in a separate file. A cascading
style sheet file will have extension as .css and it will be included in HTML files
using <link> tag.

Example
Consider we define a style sheet file style.css which has following rules −

.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}

Here we defined three CSS rules which will be applicable to three different
classes defined for the HTML tags. I suggest you should not bother about how
these rules are being defined because you will learn them while studying CSS.
Now let's make use of the above external CSS file in our following HTML
document −

<!DOCTYPE html>
<html>

<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>

<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>

</html>

This will produce the following result −

Internal Style Sheet

If you want to apply Style Sheet rules to a single document only, then you
can include those rules in header section of the HTML document using
<style> tag.

Rules defined in internal style sheet overrides the rules defined in an external
CSS file.

Example
Let's re-write above example once again, but here we will write style sheet
rules in the same HTML document using <style> tag −

<!DOCTYPE html>
<html>

<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>

<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>

</html>

This will produce the following result −

Inline Style Sheet

You can apply style sheet rules directly to any HTML element
using style attribute of the relevant tag. This should be done only when you
are interested to make a particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an
external CSS file as well as the rules defined in <style> element.
Example
Let's re-write above example once again, but here we will write style sheet
rules along with the HTML elements using style attribute of those elements.

<!DOCTYPE html>
<html>

<head>
<title>HTML Inline CSS</title>
</head>

<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>

</html>

This is red

This is thick
This is green

This is thick and green

Syntax

CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is made
of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could
be any tag like <h1> or <table> etc.
 Property - A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.

 Value - Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector { property: value }

Example: You can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid
#C00 is the value of that property.

You can define selectors in various simple ways based on your comfort. Let
me put these selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to
give a color to all level 1 headings:

h1 {
color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite
simply matches the name of any element type −

* {
color: #000000;
}

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it
lies inside a particular element. As given in the following example, style rule
will apply to <em> element only when it lies inside <ul> tag.

ul em {
color: #000000;
}

The Class Selectors

You can define style rules based on the class attribute of the elements. All
the elements having that class will be formatted according to the defined rule.

.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute
set to black in our document. You can make it a bit more particular. For
example:

h1.black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with class
attribute set to black.
You can apply more than one class selectors to given element. Consider the
following example:

<p class="center bold">

This para will be styled by the classes center and bold.
</p>

The ID Selectors
You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.

#black {
color: #000000;
}

This rule renders the content in black for every element with id attribute set
to black in our document. You can make it a bit more particular. For example
−

h1#black {
color: #000000;
}

This rule renders the content in black for only <h1> elements
with id attribute set to black.

The true power of id selectors is when they are used as the foundation for
descendant selectors, For example:

#black h2 {
color: #000000;
}

In this example all level 2 headings will be displayed in black color when those
headings will lie with in tags having id attribute set to black.

The Child Selectors

You have seen the descendant selectors. There is one more type of selector,
which is very similar to descendants but have different functionality. Consider
the following example −

body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are direct child of
<body> element. Other paragraphs put inside other elements like <div> or
<td> would not have any effect of this rule.

The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The
style rule below will match all the input elements having a type attribute with
a value of text −

input[type = "text"]{
color: #000000;
}

The advantage to this method is that the <input type = "submit" /> element
is unaffected, and the color applied only to the desired text fields.

There are following rules applied to attribute selector.

 p[lang] - Selects all paragraph elements with a lang attribute.

 p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value
of exactly "fr".

 p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains

the word "fr".

 p[lang|="en"] - Selects all paragraph elements whose lang attribute contains

values that are exactly "en", or begin with "en-".

Multiple Style Rules

You may need to define multiple style rules for a single element. You can
define these rules to combine multiple properties and corresponding values
into a single block as defined in the following example −

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Here all the property and value pairs are separated by a semi colon (;). You
can keep them in a single line or multiple lines. For better readability we keep
them into separate lines.

For a while, don't bother about the properties mentioned in the above block.
These properties will be explained in the coming chapters and you can find
complete detail about properties in CSS References.

Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors
with a comma, as given in the following example −

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

This define style rule will be applicable to h1, h2 and h3 element as well. The
order of the list is irrelevant. All the elements in the selector will have the
corresponding declarations applied to them.
You can combine the various id selectors together as shown below −

#content, #footer, #supplement {

position: absolute;
left: 510px;
width: 200px;
}

Measurement Units

Before we start actual exercise, we would like to give a brief idea about the
CSS Measurement Units.

CSS supports a number of measurements including absolute units such as

inches, centimeters, points, and so on, as well as relative measures such as
percentages and em units. You need these values while specifying various
measurements in your Style rules e.g border = "1px solid red".

We have listed out all the CSS Measurement Units along with proper
Examples −

Unit Description Example

% Defines a measurement as a percentage relative to p {font-size:

another value, typically an enclosing element. 16pt; line-
height: 125%;}

cm Defines a measurement in centimeters. div {margin-

bottom: 2cm;}

em A relative measurement for the height of a font in em p {letter-

spaces. Because an em unit is equivalent to the size of a spacing: 7em;}
given font, if you assign a font to 12pt, each "em" unit
would be 12pt; thus, 2em would be 24pt.
ex This value defines a measurement relative to a font's x- p {font-size:
height. The x-height is determined by the height of the 24pt; line-
font's lowercase letter x. height: 3ex;}

in Defines a measurement in inches. p {word-

spacing: .15in;}

mm Defines a measurement in millimeters. p {word-

spacing:
15mm;}

pc Defines a measurement in picas. A pica is equivalent to p {font-size:

12 points; thus, there are 6 picas per inch. 20pc;}

pt Defines a measurement in points. A point is defined as body {font-size:

1/72nd of an inch. 18pt;}

px Defines a measurement in screen pixels. p {padding:

25px;}

vh 1% of viewport height. h2 { font-size:

3.0vh; }

vw 1% of viewport width h1 { font-size:

5.9vw; }

vmin 1vw or 1vh, whichever is smaller p { font-size:

2vmin;}

CSS color

CSS uses color values to specify a color. Typically, these are used to set a
color either for the foreground of an element (i.e., its text) or else for the
background of the element. They can also be used to affect the color of
borders and other decorative effects.
You can specify your color values in various formats. Following table lists all
the possible formats −

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}

These formats are explained in more detail in the following sections −

CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR)
represent a red value, the next two are a green value(GG), and the last are
the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.

Each hexadecimal code will be preceded by a pound or hash sign '#'.

Following are the examples to use Hexadecimal notation.

Color Color HEX

#000000

#FF0000
#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

To Become more comfortable - Do Online Practice

CSS Colors - Short Hex Codes

This is a shorter form of the six-digit notation. In this format, each digit is
replicated to arrive at an equivalent six-digit value. For example: #6A7
becomes #66AA77.

A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.

Each hexadecimal code will be preceded by a pound or hash sign '#'.

Following are the examples to use Hexadecimal notation.

Color Color HEX

#000

#F00
#0F0

#0FF

#FF0

#0FF

#F0F

#FFF

CSS Colors - RGB Values

This color value is specified using the rgb( ) property. This property takes
three values, one each for red, green, and blue. The value can be an integer
between 0 and 255 or a percentage.

NOTE: All the browsers does not support rgb() property of color so it is
recommended not to use it.

Following is the example to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)
rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

Backgrounds

This chapter teaches you how to set backgrounds of various HTML elements.
You can set the following background properties of an element −

 The background-color property is used to set the background color of an

element.

 The background-image property is used to set the background image of an

element.

 The background-repeat property is used to control the repetition of an image in

the background.

 The background-position property is used to control the position of an image in

the background.

 The background-attachment property is used to control the scrolling of an

image in the background.

 The background property is used as a shorthand to specify a number of other

background properties.

Set the Background Color

Following is the example which demonstrates how to set the background color
for an element.

<html>
<head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.</p>
</body>
</head>
<html>

It will produce the following result −

Set the Background Image

We can set the background image by calling local stored images as shown
below

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</head>
<html>

It will produce the following result −

Repeat the Background Image

The following example demonstrates how to repeat the background image if
an image is small. You can use no-repeat value for background-
repeat property if you don't want to repeat an image, in this case image will
display only once.

By default background-repeat property will have repeat value.

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>

It will produce the following result −

The following example which demonstrates how to repeat the background

image vertically.

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</>
</body>
</html>

It will produce the following result −

The following example demonstrates how to repeat the background image

horizontally.

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</>
</body>
</html>

It will produce the following result −

Set the Background Image Position

The following example demonstrates how to set the background image
position 100 pixels away from the left side.

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</>
</body>
</html>

It will produce the following result −

The following example demonstrates how to set the background image

position 100 pixels away from the left side and 200 pixels down from the top.

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</>
</body>
</html>

It will produce the following result −

Set the Background Attachment

Background attachment determines whether a background image is fixed or
scrolls with the rest of the page.

The following example demonstrates how to set the fixed background image.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>

It will produce the following result −

The following example demonstrates how to set the scrolling background

image.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>

It will produce the following result −

Shorthand Property
You can use the background property to set all the background properties at
once. For example −

<p style="background:url(/https/www.scribd.com/images/pattern1.gif) repeat fixed;">

This parapgraph has fixed repeated background image.
</p>

Fonts

This chapter teaches you how to set fonts of a content, available in an HTML
element. You can set following font properties of an element −

 The font-family property is used to change the face of a font.

 The font-style property is used to make a font italic or oblique.

 The font-variant property is used to create a small-caps effect.

 The font-weight property is used to increase or decrease how bold or light a font
appears.

 The font-size property is used to increase or decrease the size of a font.

 The font property is used as shorthand to specify a number of other font

properties.

Set the Font Family

Following is the example, which demonstrates how to set the font family of
an element. Possible value could be any font family name.

<html>
<head>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system.
</p>
</body>
</html>

It will produce the following result −

Set the Font Style
Following is the example, which demonstrates how to set the font style of an
element. Possible values are normal, italic and oblique.

<html>
<head>
</head>
<body>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>

It will produce the following result −

Set the Font Variant

The following example demonstrates how to set the font variant of an
element. Possible values are normal and small-caps.

<html>
<head>
</head>
<body>
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>

It will produce the following result −

Set the Font Weight

The following example demonstrates how to set the font weight of an
element. The font-weight property provides the functionality to specify how
bold a font is. Possible values could be normal, bold, bolder, lighter, 100,
200, 300, 400, 500, 600, 700, 800, 900.

<html>
<head>
</head>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
</body>
</html>

It will produce the following result −

Set the Font Size

The following example demonstrates how to set the font size of an element.
The font-size property is used to control the size of fonts. Possible values
could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller,
larger, size in pixels or in %.

<html>
<head>
</head>
<body>
<p style="font-size:20px;">This font size is 20 pixels</p>
<p style="font-size:small;">This font size is small</p>
<p style="font-size:large;">This font size is large</p>
</body>
</html>

It will produce the following result −

Set the Font Size Adjust

The following example demonstrates how to set the font size adjust of an
element. This property enables you to adjust the x-height to make fonts more
legible. Possible value could be any number.

<html>
<head>
</head>
<body>
<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>

It will produce the following result −

Set the Font Stretch

The following example demonstrates how to set the font stretch of an
element. This property relies on the user's computer to have an expanded or
condensed version of the font being used.

Possible values could be normal, wider, narrower, ultra-condensed, extra-

condensed, condensed, semi-condensed, semi-expanded, expanded, extra-
expanded, ultra-expanded.

<html>
<head>
</head>
<body>
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer doesn't have
a
condensed or expanded version of the font being used.
</p>
</body>
</html>

It will produce the following result −

Shorthand Property
You can use the font property to set all the font properties at once. For
example −

<html>
<head>
</head>
<body>
<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>

Text Formatting

This chapter teaches you how to manipulate text using CSS properties. You
can set following text properties of an element −

 The color property is used to set the color of a text.

 The direction property is used to set the text direction.

 The letter-spacing property is used to add or subtract space between the letters
that make up a word.

 The word-spacing property is used to add or subtract space between the words
of a sentence.

 The text-indent property is used to indent the text of a paragraph.

 The text-align property is used to align the text of a document.

 The text-decoration property is used to underline, overline, and strikethrough
text.

 The text-transform property is used to capitalize text or convert text to

uppercase or lowercase letters.

 The white-space property is used to control the flow and formatting of text.

 The text-shadow property is used to set the text shadow around a text.

Set the Text Color

The following example demonstrates how to set the text color. Possible value
could be any color name in any valid format.

<html>
<head>
</head>
<body>
<p style="color:red;">
This text will be written in red.
</p>
</body>
</html>

It will produce the following result –

This text will be written in red.

Set the Text Direction

The following example demonstrates how to set the direction of a text.
Possible values are ltr or rtl.

<html>
<head>
</head>
<body>
<p style="direction:rtl;">
This text will be renedered from right to left
</p>
</body>
</html>

It will produce the following result –

This text will be renedered from right to left

Set the Space between Characters

The following example demonstrates how to set the space between
characters. Possible values are normal or a number specifying space..

<html>
<head>
</head>
<body>
<p style="letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>

It will produce the following result –

This text is having space between letters

Set the Space between Words

The following example demonstrates how to set the space between words.
Possible values are normal or a number specifying space.

<html>
<head>
</head>
<body>
<p style="word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>

It will produce the following result –

This text is having space between letters.

Set the Text Indent

The following example demonstrates how to indent the first line of a
paragraph. Possible values are % or a number specifying indent space.

<html>
<head>
</head>
<body>
<p style="text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>

It will produce the following result –

This text will have first line indented by 1cm and this line will remain at its actual
position this is done by CSS text-indent property.

Set the Text Alignment

The following example demonstrates how to align a text. Possible values
are left, right, center, justify.

<html>
<head>
</head>
<body>
<p style="text-align:right;">
This will be right aligned.
</p>

<p style="text-align:center;">
This will be center aligned.
</p>

<p style="text-align:left;">
This will be left aligned.
</p>

</body>
</html>

It will produce the following result –

This will be right aligned.

This will be center aligned.

This will be left aligned.

Decorating the Text

The following example demonstrates how to decorate a text. Possible values
are none, underline, overline, line-through, blink.

<html>
<head>
</head>
<body>
<p style="text-decoration:underline;">
This will be underlined
</p>

<p style="text-decoration:line-through;">
This will be striked through.
</p>

<p style="text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>

It will produce the following result;

This will be underlined

This will be striked through.

This will have a over line.

This text will have blinking effect

Set the Text Cases

The following example demonstrates how to set the cases for a text. Possible
values are none, capitalize, uppercase, lowercase.

<html>
<head>
</head>
<body>
<p style="text-transform:capitalize;">
This will be capitalized
</p>

<p style="text-transform:uppercase;">
This will be in uppercase
</p>

<p style="text-transform:lowercase;">
This will be in lowercase
</p>
</body>

</html>

It will produce the following result:

This Will Be Capitalized

THIS WILL BE IN UPPERCASE

this will be in lowercase

Set the White Space between Text

The following example demonstrates how white space inside an element is
handled. Possible values are normal, pre, nowrap.

<html>
<head>
</head>
<body>
<p style="white-space:pre;">
This text has a line break and the white-space pre setting tells the browser to
honor
it just like the HTML pre tag.</p>
</body>
</html>

It will produce the following result –

This text has a line break and the white-space pre setting tells the browser to honor
it just like the HTML pre tag.

Set the Text Shadow

The following example demonstrates how to set the shadow around a text.
This may not be supported by all the browsers.

<html>
<head>
</head>
<body>
<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property, this text will have a
blue shadow.
</p>
</body>
</html>

It will produce the following result −

If your browser supports the CSS text-shadow property, this text will have a blue
shadow.

Working with Images

Images play an important role in any webpage. Though it is not

recommended to include a lot of images, but it is still important to use good
images wherever required.
CSS plays a good role to control image display. You can set the following
image properties using CSS.

 The border property is used to set the width of an image border.

 The height property is used to set the height of an image.

 The width property is used to set the width of an image.

 The -moz-opacity property is used to set the opacity of an image.

The Image Border Property

The border property of an image is used to set the width of an image border.
This property can have a value in length or in %.

A width of zero pixels means no border.

Here is the example −

The Image Height Property

The height property of an image is used to set the height of an image. This
property can have a value in length or in %. While giving value in %, it applies
it in respect of the box in which an image is available.

Here is an example −

The Image Width Property

The width property of an image is used to set the width of an image. This
property can have a value in length or in %. While giving value in %, it applies
it in respect of the box in which an image is available.

Here is an example −

The -moz-opacity Property

The -moz-opacity property of an image is used to set the opacity of an image.
This property is used to create a transparent image in Mozilla. IE
uses filter:alpha(opacity=x) to create transparent images.

In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value

makes the element more transparent (The same things goes for the CSS3-
valid syntax opacity:x).
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value
makes the element more transparent.

Here is an example −

LINKs

This chapter teaches you how to set different properties of a hyper link using
CSS. You can set following properties of a hyper link

 The :link signifies unvisited hyperlinks.

 The :visited signifies visited hyperlinks.

 The :hover signifies an element that currently has the user's mouse pointer
hovering over it.

 The :active signifies an element on which the user is currently clicking.

Usually, all these properties are kept in the header part of the HTML
document.

Remember a:hover MUST come after a:link and a:visited in the CSS definition
in order to be effective. Also, a:active MUST come after a:hover in the CSS
definition as follows −

Set the Color of Links

The following example demonstrates how to set the link color. Possible values
could be any color name in any valid format.

<html>
<head>
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Link</a>
</body>
</html>

It will produce the following black link:

Set the Color of Visited Links

The following example demonstrates how to set the color of visited links.
Possible values could be any color name in any valid format.

<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href=""> link</a>
</body>
</html>
It will produce the following link. Once you will click this link, it will change
its color to green.

Change the Color of Links when Mouse is Over

The following example demonstrates how to change the color of links when
we bring a mouse pointer over that link. Possible values could be any color
name in any valid format.

<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Link</a>
</body>
</html>

It will produce the following link. Now, you bring your mouse over this link
and you will see that it changes its color to yellow.

Change the Color of Active Links

The following example demonstrates how to change the color of active links.
Possible values could be any color name in any valid format.

<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Link</a>
</body>
</html>

It will produce the following link. It will change its color to pink when the user
clicks it.

Tables

This tutorial will teach you how to set different properties of an HTML table
using CSS. You can set following properties of a table −

 The border-collapse specifies whether the browser should control the

appearance of the adjacent borders that touch each other or whether each cell
should maintain its style.

 The border-spacing specifies the width that should appear between table cells.

 The caption-side captions are presented in the <caption> element. By default,

these are rendered above the table in the document. You use the caption-
side property to control the placement of the table caption.

 The empty-cells specifies whether the border should be shown if a cell is empty.

 The table-layout allows browsers to speed up layout of a table by using the first
width properties it comes across for the rest of a column rather than having to
load the whole table before rendering it.

Now, we will see how to use these properties with examples.

The border-collapse Property:

This property can have two values collapse and separate. The following
example uses both the values:

</head>
<body>

<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />

<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>

</body>
</html>
It will produce the following result –

Collapse Border Example

Cell A Collapse Example

Cell B Collapse Example

Separate Border Example

Cell A Separate Example

Cell B Separate Example

The border-spacing Property

The border-spacing property specifies the distance that separates adjacent
cells'. borders. It can take either one or two values; these should be units of
length.

If you provide one value, it will applies to both vertical and horizontal borders.
Or you can specify two values, in which case, the first refers to the horizontal
spacing and the second to the vertical spacing −

NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.

Now let's modify the previous example and see the effect −

</head>
<body>

<table class="one" border="1">

<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />

<table class="two" border="1">

<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

</body>
</html>

It will produce the following result −

The caption-side Property
The caption-side property allows you to specify where the content of a
<caption> element should be placed in relationship to the table. The table
that follows lists the possible values.

This property can have one of the four values top, bottom, left or right. The
following example uses each value.

NOTE: These properties may not work with your IE Browser.

</head>
<body>

<table style="width:400px; border:1px solid black;">

<caption class="top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">

<caption class="bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">

<caption class="left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">

<caption class="right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>

</body>
</html>

It will produce the following result −

The empty-cells Property

The empty-cells property indicates whether a cell without any content should
have a border displayed.

This property can have one of the three values - show, hide or inherit.
Here is the empty-cells property used to hide borders of empty cells in the
<table> element.

</head>
<body>

<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>

<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>

<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>

</body>
</html>

It will produce the following result –

Title one Title two

Row Title value value

Row Title value

The table-layout Property

The table-layout property is supposed to help you control how a browser
should render or lay out a table.

This property can have one of the three values: fixed, auto or inherit.

The following example shows the difference between these properties.

NOTE − This property is not supported by many browsers so do not rely on

this property.

</head>
<body>

<table class="auto" border="1" width="100%">

<table class="fixed" border="1" width="100%">

</body>
</html>

It will produce the following result –

0000000000000000 10000000 100

100000000000 10000000 100

Borders

The border properties allow you to specify how the border of the box
representing an element should look. There are three properties of a border
you can change:

 The border-color specifies the color of a border.

 The border-style specifies whether a border should be solid, dashed line, double
line, or one of the other possible values.

 The border-width specifies the width of a border.

Now, we will see how to use these properties with examples.

The border-color Property

The border-color property allows you to change the color of the border
surrounding an element. You can individually change the color of the bottom,
left, top and right sides of an element's border using the properties −

 border-bottom-color changes the color of bottom border.

 border-top-color changes the color of top border.

 border-left-color changes the color of left border.

 border-right-color changes the color of right border.

The following example shows the effect of all these properties −

</head>
<body>

<p class="example1">
This example is showing all borders in different colors.
</p>

<p class="example2">
This example is showing all borders in green color only.
</p>

</body>
</html>

It will produce the following result –

This example is showing all borders in different colors.

This example is showing all borders in green color only.

The border-style Property

The border-style property allows you to select one of the following styles of
border −

 none: No border. (Equivalent of border-width:0;)

 solid: Border is a single solid line.

 dotted: Border is a series of dots.

 dashed: Border is a series of short lines.

 double: Border is two solid lines.

 groove: Border looks as though it is carved into the page.

 ridge: Border looks the opposite of groove.

 inset: Border makes the box look like it is embedded in the page.

 outset: Border makes the box look like it is coming out of the canvas.

 hidden: Same as none, except in terms of border-conflict resolution for table

elements.

You can individually change the style of the bottom, left, top, and right
borders of an element using the following properties −

 border-bottom-style changes the style of bottom border.

 border-top-style changes the style of top border.

 border-left-style changes the style of left border.

 border-right-style changes the style of right border.

The following example shows all these border styles −

<html>
<head>
</head>
<body>.
<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>

<p style="border-width:4px; border-style:solid;">

This is a solid border.
</p>

<p style="border-width:4px; border-style:dashed;">

This is a dahsed border.
</p>

<p style="border-width:4px; border-style:double;">

This is a double border.
</p>

<p style="border-width:4px; border-style:groove;">

This is a groove border.
</p>

<p style="border-width:4px; border-style:ridge">

This is aridge border.
</p>

<p style="border-width:4px; border-style:inset;">

This is a inset border.
</p>

<p style="border-width:4px; border-style:outset;">

This is a outset border.
</p>
<p style="border-width:4px; border-style:hidden;">
This is a hidden border.
</p>

<p style="border-width:4px;border-top-style:solid;
border-bottom-style:dashed; border-left-style:groove; border-right-
style:double;">
This is a a border with four different styles.
</p>
</body>

</html>

It will produce the following result –

his is a solid border.

This is a dahsed border.

This is a double border.

This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

This is a a border with four different styles.

The border-width Property −

The border-width property allows you to set the width of an element borders.
The value of this property could be either a length in px, pt or cm or it should
be set to thin, medium or thick.

You can individually change the width of the bottom, top, left, and right
borders of an element using the following properties −

 border-bottom-width changes the width of bottom border.

 border-top-width changes the width of top border.

 border-left-width changes the width of left border.

 border-right-width changes the width of right border.

The following example shows all these border width −

<html>
<head>
</head>
<body>
<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>

<p style="border-width:4pt; border-style:solid;">

This is a solid border whose width is 4pt.
</p>

<p style="border-width:thin; border-style:solid;">

This is a solid border whose width is thin.
</p>

<p style="border-width:medium; border-style:solid;">

This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>

<p style="border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>

It will produce the following result –

This is a solid border whose width is 4px.

This is a solid border whose width is 4pt.

This is a solid border whose width is thin.

This is a solid border whose width is medium;

This is a solid border whose width is thick.

This is a a border with four different width.

Border Properties Using Shorthand

The border property allows you to specify color, style, and width of lines in
one property −

The following example shows how to use all the three properties into a single
property. This is the most frequently used property to set border around any
element.
<html>
<head>
</head>
<body>
<p style="border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>

Margins

The margin property defines the space around an HTML element. It is

possible to use negative values to overlap content.

The values of the margin property are not inherited by the child elements.
Remember that the adjacent vertical margins (top and bottom margins) will
collapse into each other so that the distance between the blocks is not the
sum of the margins, but only the greater of the two margins or the same size
as one margin if both are equal.

We have the following properties to set an element margin.

 The margin specifies a shorthand property for setting the margin properties in
one declaration.

 The margin-bottom specifies the bottom margin of an element.

 The margin-top specifies the top margin of an element.

 The margin-left specifies the left margin of an element.

 The margin-right specifies the right margin of an element.

Now, we will see how to use these properties with examples.

The Margin Property

The margin property allows you set all of the properties for the four margins
in one declaration. Here is the syntax to set margin around a paragraph −

Here is an example −

<body>
<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>

<p style="margin:10px 2%; border:1px solid black;">

top and bottom margin will be 10px, left and right margin will be 2% of the
total width of the document.
</p>

<p style="margin: 10px 2% -10px; border:1px solid black;">

top margin will be 10px, left and right margin will be 2% of the total width of
the document, bottom margin will be -10px
</p>

<p style="margin: 10px 2% -10px auto; border:1px solid black;">

top margin will be 10px, right margin will be 2% of the total width of the
document, bottom margin will be -10px, left margin will be set by the browser
</p>
</body>

</html>

It will produce the following result –

all four margins will be 15px

top and bottom margin will be 10px, left and right margin will be 2% of the total
width of the document.
top margin will be 10px, left and right margin will be 2% of the total width of the
document, bottom margin will be -10px
top margin will be 10px, right margin will be 2% of the total width of the document,
bottom margin will be -10px, left margin will be set by the browser

The margin-bottom Property

The margin-bottom property allows you set bottom margin of an element. It
can have a value in length, % or auto.

Here is an example −

<html>
<head>
</head>
<body>
<p style="margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin.
</p>

<p style="margin-bottom: 5%; border:1px solid black;">

This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>

It will produce the following result –

is is a paragraph with a specified bottom margin

This is another paragraph with a specified bottom margin in percent

The margin-top Property
The margin-top property allows you set top margin of an element. It can have
a value in length, % or auto.

Here is an example −

<html>
<head>
</head>
<body>
<p style="margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>

<p style="margin-top: 5%; border:1px solid black;">

This is another paragraph with a specified top margin in percent
</p>
</body>
</html>

It will produce the following result:

This is a paragraph with a specified top margin

This is another paragraph with a specified top margin in percent

The margin-left Property

The margin-left property allows you set left margin of an element. It can have
a value in length, % or auto.

Here is an example:

<html>
<head>
</head>
<body>
<p style="margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>

<p style="margin-left: 5%; border:1px solid black;">

This is another paragraph with a specified top margin in percent
</p>
</body>
</html>

It will produce the following result –

is is a paragraph with a specified left margin

This is another paragraph with a specified top margin in perc

The margin-right Property

The margin-right property allows you set right margin of an element. It can
have a value in length, % or auto.

Here is an example −

<html>
<head>
</head>
<body>
<p style="margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>

<p style="margin-right: 5%; border:1px solid black;">

This is another paragraph with a specified right margin in percent
</p>
</body>
</html>

It will produce the following result −

This is a paragraph with a specified right margin

This is another paragraph with a specified right margin in percent

Lists

Lists are very helpful in conveying a set of either numbered or bullet points.
This chapter teaches you how to control list type, position, style, etc., using
CSS.

We have the following five CSS properties, which can be used to control lists:

 The list-style-type allows you to control the shape or appearance of the marker.

 The list-style-position specifies whether a long point that wraps to a second line
should align with the first line or start underneath the start of the marker.

 The list-style-image specifies an image for the marker rather than a bullet point
or number.

 The list-style serves as shorthand for the preceding properties.

 The marker-offset specifies the distance between a marker and the text in the
list.

Now, we will see how to use these properties with examples.

The list-style-type Property

The list-style-type property allows you to control the shape or style of bullet
point (also known as a marker) in the case of unordered lists and the style of
numbering characters in ordered lists.

Here are the values which can be used for an unordered list −
Value Description

None NA

disc (default) A filled-in circle

Circle An empty circle

Square A filled-in square

Here are the values, which can be used for an ordered list −

Value Description Example

decimal Number 1,2,3,4,5

decimal-leading- 0 before the number 01, 02, 03,

zero 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D,

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV,

lower-greek The marker is lower-greek alpha, beta,

gamma
lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D,

hebrew The marker is traditional Hebrew numbering

armenian The marker is traditional Armenian numbering

georgian The marker is traditional Georgian numbering

cjk-ideographic The marker is plain ideographic numbers

hiragana The marker is hiragana a, i, u, e, o,

ka, ki

katakana The marker is katakana A, I, U, E,

O, KA, KI

hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni,

ho, he, to

katakana-iroha The marker is katakana-iroha I, RO, HA,

NI, HO, HE,
TO

Here is an example −

<body>
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

</html>

It will produce the following result –

o Maths
o Social Science
o Physics

 Maths
 Social Science
 Physics

1. Maths
2. Social Science

The list-style-position Property

The list-style-position property indicates whether the marker should appear
inside or outside of the box containing the bullet points. It can have one the
two values −

Value Description

None NA

Inside If the text goes onto a second line, the text will wrap underneath the
marker. It will also appear indented to where the text would have started
if the list had a value of outside.

outside If the text goes onto a second line, the text will be aligned with the start
of the first line (to the right of the bullet).

Here is an example −

<body>
<ul style="list-style-type:circle; list-style-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style="list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style-type:decimal;list-style-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

</html>

It will produce the following result –

o Maths
o Social Science
o Physics

 Maths
 Social Science
 Physics

1. Maths
2. Social Science
3. Physics

a. Maths
b. Social Science

The list-style-image Property

The list-style-image allows you to specify an image so that you can use your
own bullet style. The syntax is similar to the background-image property with
the letters url starting the value of the property followed by the URL in
brackets. If it does not find the given image then default bullets are used.

Here is an example −

<body>
<ul>
<li style="list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol>
<li style="list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

</html>
It will produce the following result –

 Maths
 Social Science
 Physics

1. Maths
2. Social Science
3. Physics

The list-style Property

The list-style allows you to specify all the list properties into a single
expression. These properties can appear in any order.

Here is an example −

<body>
<ul style="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style: outside upper-alpha;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result –

 Maths
 Social Science
 Physics

A. Maths
B. Social Science
C. Physics

The marker-offset Property

The marker-offset property allows you to specify the distance between the
marker and the text relating to that marker. Its value should be a length as
shown in the following example −

Unfortunately, this property is not supported in IE 6 or Netscape 7.

Here is an example −

<body>
<ul style="list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style="list-style: outside upper-alpha; marker-offset:2cm;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

</html>

It will produce the following result –

 Maths
 Social Science
 Physics

A. Maths
B. Social Science
C. Physics

Padding

The padding property allows you to specify how much space should appear
between the content of an element and its border −

The value of this attribute should be either a length, a percentage, or the

word inherit. If the value is inherit, it will have the same padding as its parent
element. If a percentage is used, the percentage is of the containing box.

The following CSS properties can be used to control lists. You can also set
different values for the padding on each side of the box using the following
properties −

 The padding-bottom specifies the bottom padding of an element.

 The padding-top specifies the top padding of an element.

 The padding-left specifies the left padding of an element.

 The padding-right specifies the right padding of an element.

 The padding serves as shorthand for the preceding properties.

Now, we will see how to use these properties with examples.

The padding-bottom Property
The padding-bottom property sets the bottom padding (space) of an
element. This can take a value in terms of length of %.

Here is an example −

<body>
<p style="padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>

<p style="padding-bottom: 5%; border:1px solid black;">

This is another paragraph with a specified bottom padding in percent
</p>
</body>

</html>

It will produce the following result:

This is a paragraph with a specified bottom padding

This is another paragraph with a specified bottom padding in percent

The padding-top Property

The padding-top property sets the top padding (space) of an element. This
can take a value in terms of length of %.
Here is an example −

<body>
<p style="padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>

<p style="padding-top: 5%; border:1px solid black;">

This is another paragraph with a specified top padding in percent
</p>
</body>

</html>

It will produce the following result –

This is a paragraph with a specified top padding

This is another paragraph with a specified top padding in percent

The padding-left Property

The padding-left property sets the left padding (space) of an element. This
can take a value in terms of length of %.

Here is an example −

<body>
<p style="padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>

<p style="padding-left: 15%; border:1px solid black;">

This is another paragraph with a specified left padding in percent
</p>
</body>

</html>

It will produce the following result –

This is a paragraph with a specified left padding

This is another paragraph with a specified left padding in percent

The padding-right Property

The padding-right property sets the right padding (space) of an element. This
can take a value in terms of length of %.

Here is an example −

<body>
<p style="padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style="padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>

</html>

It will produce the following result −

The Padding Property

The padding property sets the left, right, top and bottom padding (space) of
an element. This can take a value in terms of length of %.

Here is an example −

<body>
<p style="padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>

<p style="padding:10px 2%; border:1px solid black;">

top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>

<p style="padding: 10px 2% 10px; border:1px solid black;">

top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style="padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>

</html>

It will produce the following result −

all four padding will be 15px

top and bottom padding will be 10px, left and right padding will be 2% of the total
width of the document.

top padding will be 10px, left and right padding will be 2% of the total width of the
document, bottom padding will be 10px

top padding will be 10px, right padding will be 2% of the total width of the document,
bottom padding and top padding will be

Cursors

The cursor property of CSS allows you to specify the type of cursor that
should be displayed to the user.

One good usage of this property is in using images for submit buttons on
forms. By default, when a cursor hovers over a link, the cursor changes from
a pointer to a hand. However, it does not change form for a submit button
on a form. Therefore, whenever someone hovers over an image that is a
submit button, it provides a visual clue that the image is clickable.

The following table shows the possible values for the cursor property −
Value Description

auto Shape of the cursor depends on the context area it is over. For
example, an 'I' over text, a 'hand' over a link, and so on.

crosshair A crosshair or plus sign

default An arrow

pointer A pointing hand (in IE 4 this value is hand).

move The 'I' bar

e-resize The cursor indicates that an edge of a box is to be moved right

(east).

ne-resize The cursor indicates that an edge of a box is to be moved up and

right (north/east).

nw-resize The cursor indicates that an edge of a box is to be moved up and

left (north/west).

n-resize The cursor indicates that an edge of a box is to be moved up

(north).

se-resize The cursor indicates that an edge of a box is to be moved down

and right (south/east).

sw-resize The cursor indicates that an edge of a box is to be moved down

and left (south/west).

s-resize The cursor indicates that an edge of a box is to be moved down

(south).
w-resize The cursor indicates that an edge of a box is to be moved left
(west).

text The I bar.

wait An hour glass.

help A question mark or balloon, ideal for use over help buttons.

<url> The source of a cursor image file.

NOTE: You should try to use only these values to add helpful information for
users, and in places, they would expect to see that cursor. For example, using
the crosshair when someone hovers over a link can confuse visitors.

Here is an example −

<body>
<p>Move the mouse over the words to see the cursor change:</p>

<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
</body>

</html>

Outlines

Outlines are very similar to borders, but there are few major differences as
well −

 An outline does not take up space.

 Outlines do not have to be rectangular.

 Outline is always the same on all sides; you cannot specify different values for
different sides of an element.

NOTE − The outline properties are not supported by IE 6 or Netscape 7.

You can set the following outline properties using CSS.

 The outline-width property is used to set the width of the outline.

 The outline-style property is used to set the line style for the outline.

 The outline-color property is used to set the color of the outline.

 The outline property is used to set all the above three properties in a single
statement.

The outline-width Property

The outline-width property specifies the width of the outline to be added to
the box. Its value should be a length or one of the values thin, medium, or
thick, just like the border-width attribute.

A width of zero pixels means no outline.

Here is an example −

<body>
<p style="outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />

<p style="outline-width:thick; outline-style:solid;">

This text is having thick outline.
</p>
<br />

<p style="outline-width:5px; outline-style:solid;">

This text is having 5x outline.
</p>
</body>

</html>

The outline-style Property

The outline-style property specifies the style for the line (solid, dotted, or
dashed) that goes around an element. It can take one of the following values
−
 none: No border. (Equivalent of outline-width:0;)

 solid: Outline is a single solid line.

 dotted: Outline is a series of dots.

 dashed: Outline is a series of short lines.

 double: Outline is two solid lines.

 groove: Outline looks as though it is carved into the page.

 ridge: Outline looks the opposite of groove.

 inset: Outline makes the box look like it is embedded in the page.

 outset: Outline makes the box look like it is coming out of the canvas.

 hidden: Same as none.

Here is an example −

<body>
<p style="outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />

<p style="outline-width:thick; outline-style:dashed;">

This text is having thick dashed outline.
</p>
<br />

<p style="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>
</body>

</html>

The outline-color Property

The outline-color property allows you to specify the color of the outline. Its
value should either be a color name, a hex color, or an RGB value, as with
the color and border-color properties.

Here is an example −

<body>
<p style="outline-width:thin; outline-style:solid;outline-color:red">
This text is having thin solid red outline.
</p>
<br />

<p style="outline-width:thick; outline-style:dashed;outline-color:#009900">

This text is having thick dashed green outline.
</p>
<br />

<p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
</body>

</html>
The outline Property
The outline property is a shorthand property that allows you to specify values
for any of the three properties discussed previously in any order but in a
single statement.

Here is an example −

<body>
<p style="outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />

<p style="outline:thick dashed #009900;">

This text is having thick dashed green outline.
</p>
<br />

<p style="outline:5px dotted rgb(13,33,232);">

This text is having 5x dotted blue outline.
</p>
</body>

</html>

Dimension

You have seen the border that surrounds every box ie. element, the padding
that can appear inside each box and the margin that can go around them. In
this tutorial we will learn how we can change the dimensions of boxes.
We have the following properties that allow you to control the dimensions of
a box.

 The height property is used to set the height of a box.

 The width property is used to set the width of a box.

 The line-height property is used to set the height of a line of text.

 The max-height property is used to set a maximum height that a box can be.

 The min-height property is used to set the minimum height that a box can be.

 The max-width property is used to set the maximum width that a box can be.

 The min-width property is used to set the minimum width that a box can be.

The Height and Width Properties

The height and width properties allow you to set the height and width for
boxes. They can take values of a length, a percentage, or the keyword auto.

Here is an example −

<html>
<head>
</head>
<body>
<p style="width:400px; height:100px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>

The line-height Property

The line-height property allows you to increase the space between lines of
text. The value of the line-height property can be a number, a length, or a
percentage.
Here is an example −

<html>
<head>
</head>
<body>
<p style="width:400px; height:100px; border:1px solid red; padding:5px;
margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is
30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is
30pixels.
</p>
</body>
</html>

The max-height Property

The max-height property allows you to specify maximum height of a box. The
value of the max-height property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −

<html>
<head>
</head>
<body>
<p style="width:400px; max-height:10px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt="logo" src="/css/images/logo.png" width="195" height="84" />
</body>
</html>

The min-height Property

The min-height property allows you to specify minimum height of a box. The
value of the min-height property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −

<html>
<head>
</head>
<body>
<p style="width:400px; min-height:200px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt="logo" src="/css/images/logo.png" width="95" height="84" />
</body>
</html>

The max-width Property

The max-width property allows you to specify maximum width of a box. The
value of the max-width property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −
<html>
<head>
</head>
<body>
<p style="max-width:100px; height:200px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt="logo" src="/css/images/logo.png" width="95" height="84" />
</body>
</html>

The min-width Property

The min-width property allows you to specify minimum width of a box. The
value of the min-width property can be a number, a length, or a percentage.

NOTE − This property does not work in either Netscape 7 or IE 6.

Here is an example −

<html>
<head>
</head>
<body>
<p style="min-width:400px; height:100px; border:1px solid red; padding:5px;
margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
<img alt="logo" src="/css/images/css.gif" width="95" height="84" />
</body>
</html>

Scroll Bars
There may be a case when an element's content might be larger than the
amount of space allocated to it. For example, given width and height
properties do not allow enough room to accommodate the content of the
element.

CSS provides a property called overflow which tells the browser what to do if
the box's contents is larger than the box itself. This property can take one of
the following values −

Value Description

visible Allows the content to overflow the borders of its containing element.

hidden The content of the nested element is simply cut off at the border of the
containing element and no scrollbars is visible.

scroll The size of the containing element does not change, but the scrollbars are
added to allow the user to scroll to see the content.

auto The purpose is the same as scroll, but the scrollbar will be shown only if
the content does overflow.

Here is an example −

<body>

<p>Example of scroll value:</p>

<div class="scroll">
I am going to keep lot of content here just to show you how scrollbars works if
there is an overflow in an
element box. This provides your horizontal as well as vertical scrollbars.
</div>
<br />

<p>Example of auto value:</p>

<div class="auto">
I am going to keep lot of content here just to show you how scrollbars works if
there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>

</body>
</html>

HTML Solo Learn
No ratings yet
HTML Solo Learn
54 pages
What Is HTML?
No ratings yet
What Is HTML?
36 pages
Ultra HTML Reference
From Everand
Ultra HTML Reference
Mike Abelar
2/5 (1)
HTML
No ratings yet
HTML
259 pages
Class: XII Subject: Computer: Features of HTML
No ratings yet
Class: XII Subject: Computer: Features of HTML
40 pages
HTML 1
No ratings yet
HTML 1
28 pages
Fundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked Together
No ratings yet
Fundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked Together
31 pages
Line Break Tag
No ratings yet
Line Break Tag
23 pages
Web-Lecture-1
No ratings yet
Web-Lecture-1
20 pages
Lecture 0
No ratings yet
Lecture 0
59 pages
HTML - Quick Guide
No ratings yet
HTML - Quick Guide
141 pages
Eswi HTML Unit 4_2 Notes
No ratings yet
Eswi HTML Unit 4_2 Notes
49 pages
BASIC_HTML_TAGS
No ratings yet
BASIC_HTML_TAGS
72 pages
HTML
No ratings yet
HTML
21 pages
HTML Short Notes
No ratings yet
HTML Short Notes
17 pages
HTML Tutorial
No ratings yet
HTML Tutorial
474 pages
Chapter 1 (Introduction To HTML)
No ratings yet
Chapter 1 (Introduction To HTML)
112 pages
Basic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked
No ratings yet
Basic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked
41 pages
Unit-1 Exposure To HTML
No ratings yet
Unit-1 Exposure To HTML
51 pages
HTML Notes
No ratings yet
HTML Notes
54 pages
APC_II_UNIT_2
No ratings yet
APC_II_UNIT_2
69 pages
WT All Unit Notes zccurate
No ratings yet
WT All Unit Notes zccurate
214 pages
HTML Tutorial
No ratings yet
HTML Tutorial
41 pages
CBT_HTML_Ver 9.0
No ratings yet
CBT_HTML_Ver 9.0
131 pages
HTML - Overview
No ratings yet
HTML - Overview
24 pages
html_tutorial_removed
No ratings yet
html_tutorial_removed
40 pages
HTML Class 2
No ratings yet
HTML Class 2
4 pages
UNIT 1
No ratings yet
UNIT 1
38 pages
HTML Practice
No ratings yet
HTML Practice
35 pages
HTML NOTES PRINT
No ratings yet
HTML NOTES PRINT
41 pages
HTML
No ratings yet
HTML
58 pages
Build Simple Websites Using Commercial Programs
100% (1)
Build Simple Websites Using Commercial Programs
51 pages
HTML - Basic Tags
No ratings yet
HTML - Basic Tags
5 pages
HTML N HTML 5 Tutorial
100% (1)
HTML N HTML 5 Tutorial
143 pages
HTML Notes
No ratings yet
HTML Notes
39 pages
HTML Tutorial(Vizzy)
No ratings yet
HTML Tutorial(Vizzy)
112 pages
BASICS of HTML 11-17
No ratings yet
BASICS of HTML 11-17
17 pages
Note for HTML
No ratings yet
Note for HTML
22 pages
HTML Content
No ratings yet
HTML Content
40 pages
Web Design Technologiesmodule-1 - Parta
No ratings yet
Web Design Technologiesmodule-1 - Parta
66 pages
1c HTML Overview-1
No ratings yet
1c HTML Overview-1
8 pages
1-HTML-Tags-OBL
No ratings yet
1-HTML-Tags-OBL
10 pages
Lab-8-HTML Basics
No ratings yet
Lab-8-HTML Basics
14 pages
Web Design Ppt
No ratings yet
Web Design Ppt
288 pages
HTML Tutorial
No ratings yet
HTML Tutorial
47 pages
Tutorial Pemrograman Web
No ratings yet
Tutorial Pemrograman Web
77 pages
UNIT 2 Notes (1)
No ratings yet
UNIT 2 Notes (1)
48 pages
HTML Css Java Tutorial
0% (1)
HTML Css Java Tutorial
80 pages
Editors: Write HTML Using Notepad or Textedit
No ratings yet
Editors: Write HTML Using Notepad or Textedit
53 pages
HTML5 COURSE
No ratings yet
HTML5 COURSE
51 pages
HTML N HTML 5 Tutorial
No ratings yet
HTML N HTML 5 Tutorial
143 pages
IWT UNIT - 2 HTML RGPV
No ratings yet
IWT UNIT - 2 HTML RGPV
66 pages
HTML
No ratings yet
HTML
27 pages
Chapter 2
No ratings yet
Chapter 2
93 pages
HTML Tutorial
No ratings yet
HTML Tutorial
55 pages
Class 8 Computer worksheet of Introduction to HTML
No ratings yet
Class 8 Computer worksheet of Introduction to HTML
8 pages
HTML Codes N Tags
100% (1)
HTML Codes N Tags
183 pages
HTML
No ratings yet
HTML
14 pages
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
No ratings yet
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
80 pages
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet
SunStar Paywall User Guide
No ratings yet
SunStar Paywall User Guide
9 pages
EBA EIOPA Taxonomy Architecture v2
No ratings yet
EBA EIOPA Taxonomy Architecture v2
49 pages
Joel Abraham Automation Testing 2.5yrs CTS Chennai
No ratings yet
Joel Abraham Automation Testing 2.5yrs CTS Chennai
3 pages
Proprietary and Open Source Software: Edward Mwalimu
No ratings yet
Proprietary and Open Source Software: Edward Mwalimu
35 pages
List of FTP Commands For The Microsoft Command-Line FTP Client
No ratings yet
List of FTP Commands For The Microsoft Command-Line FTP Client
11 pages
Internal Certificate Generation
No ratings yet
Internal Certificate Generation
4 pages
CSC Notes
No ratings yet
CSC Notes
32 pages
PHP BCA ALLUNITS Question
No ratings yet
PHP BCA ALLUNITS Question
6 pages
Swe 102 Lab
No ratings yet
Swe 102 Lab
7 pages
Lab Exercises
No ratings yet
Lab Exercises
9 pages
TD SGT NX I Flight Sim Manual
No ratings yet
TD SGT NX I Flight Sim Manual
33 pages
IT SKILLS REVISION MARATHON CLASS - PPTX - 20231223 - 134919 - 0000
No ratings yet
IT SKILLS REVISION MARATHON CLASS - PPTX - 20231223 - 134919 - 0000
55 pages
Vendor: Cisco Exam Code: 350-901 Exam Name: Developing Applications Using Cisco Core
100% (1)
Vendor: Cisco Exam Code: 350-901 Exam Name: Developing Applications Using Cisco Core
109 pages
Code Sight Documents
No ratings yet
Code Sight Documents
105 pages
Linux Questionbank
No ratings yet
Linux Questionbank
4 pages
Resume Yash+Saini
No ratings yet
Resume Yash+Saini
1 page
SURPAC Google Earth Linear and Graphic Functions: (Pty) LTD
No ratings yet
SURPAC Google Earth Linear and Graphic Functions: (Pty) LTD
26 pages
Gamebuilder: Samuel Tokheim, Philip Foeckler and Karthik Reddy Vadde
No ratings yet
Gamebuilder: Samuel Tokheim, Philip Foeckler and Karthik Reddy Vadde
37 pages
REPORT-Facial - Description - Based - Suspect - Detect - Plagiarism - Report (29-11-23)
No ratings yet
REPORT-Facial - Description - Based - Suspect - Detect - Plagiarism - Report (29-11-23)
17 pages
Nghia Pham
No ratings yet
Nghia Pham
1 page
Printer Resident Fonts Using SAP Adobe Forms SAP
No ratings yet
Printer Resident Fonts Using SAP Adobe Forms SAP
6 pages
Dynamic HTML (DHTML) Dynamic HTML (DHTML) : Web Programming Web Programming
No ratings yet
Dynamic HTML (DHTML) Dynamic HTML (DHTML) : Web Programming Web Programming
13 pages
IBM SPSS v24 Installation and Registration (Mac)
No ratings yet
IBM SPSS v24 Installation and Registration (Mac)
7 pages
MIME_Multipurpose_Internet_Mail_Extensions
No ratings yet
MIME_Multipurpose_Internet_Mail_Extensions
5 pages
Standard Work Wizard Tutorial: Viewing/printing eVSM Tutorial
No ratings yet
Standard Work Wizard Tutorial: Viewing/printing eVSM Tutorial
17 pages
Chapter Two
No ratings yet
Chapter Two
50 pages
Creating An A0 Sized Poster in Portrait Orientation, in Microsoft Powerpoint
No ratings yet
Creating An A0 Sized Poster in Portrait Orientation, in Microsoft Powerpoint
5 pages
3-firebase-hosting
No ratings yet
3-firebase-hosting
5 pages
Roku
No ratings yet
Roku
6 pages
Unit-2 HTML: Basics of HTML,
No ratings yet
Unit-2 HTML: Basics of HTML,
12 pages