CONTENTS

HTML
1. Introduction ................................................................................................................................................. 4
What is HTML? ................................................................................................................................................ 4
What are the Uses of HTML? .......................................................................................................................... 4
Document Structure ........................................................................................................................................ 4
Getting Started ................................................................................................................................................ 5
Writing the HTML Document ........................................................................................................................... 5
HTML Tags ...................................................................................................................................................... 6
Some Attributes of the Body Tag ..................................................................................................................... 6

2. Formatting ................................................................................................................................................... 8
Heading Tags .................................................................................................................................................. 8
Paragraph Tag ............................................................................................................................................... 8
Line Break ..................................................................................................................................................... 8
Horizontal Rule Tag ........................................................................................................................................ 9
Font Style Tag ................................................................................................................................................ 9
Phrase Tags ................................................................................................................................................... 10
Preformatted Text Tag .................................................................................................................................... 10
Lists ................................................................................................................................................................ 11

3. Character Entities ................................................................................................................................... 13

4. Links ............................................................................................................................................................... 14
URL (Uniform Resource Locators) ................................................................................................................. 14
Linking ............................................................................................................................................................ 15

5. Images ........................................................................................................................................................... 16
Image Tag ...................................................................................................................................................... 16
Map Tag ......................................................................................................................................................... 17

1
6. Forms .......................................................................................................................................................... 20
Form Tag ....................................................................................................................................................... 20
Input Tag ...................................................................................................................................................... 20
Option Tag ................................................................................................................................................... 23
Select Tag ..................................................................................................................................................... 23
Optgroup Tag ................................................................................................................................................ 24
Label Tag ...................................................................................................................................................... 25
Textarea Tag ................................................................................................................................................. 25

7. Tables ........................................................................................................................................................... 28
Table Tag ...................................................................................................................................................... 28
TR Tag ......................................................................................................................................................... 29
TD Tag ......................................................................................................................................................... 30

8. Frames ........................................................................................................................................................ 31
Frame Tag .................................................................................................................................................... 31
NoFrames Tag ............................................................................................................................................ 33
IFrame Tag .................................................................................................................................................. 33

CSS - ( Cascading Style Sheet )

1. Introduction .............................................................................................................................................. 35
What is CSS? ............................................................................................................................................... 35
Benefits of Style Sheets ............................................................................................................................... 35
Rules for Writing Style Sheets ...................................................................................................................... 35
External Style Sheet ..................................................................................................................................... 36
Linking This File With an HTML Document .................................................................................................. 37
Internal Style Sheets .................................................................................................................................... 37
Inline Styles .................................................................................................................................................. 38
Link Tag ........................................................................................................................................................ 38
Style Tag ....................................................................................................................................................... 39
Div Tag .......................................................................................................................................................... 39
Span Tag ....................................................................................................................................................... 40

2
2. All CSS Properties.................................................................................................................................. 40
Background Properties .................................................................................................................................. 40
Border Properties ........................................................................................................................................... 42
Classification and Positioning Properties ....................................................................................................... 47
Dimension Properties ..................................................................................................................................... 49
Font Properties ............................................................................................................................................... 50
Generated Content Properties ........................................................................................................................ 52
List Properties ................................................................................................................................................. 53
Margin Properties ........................................................................................................................................... 54
Outline Properties ........................................................................................................................................... 55
Padding Properties ......................................................................................................................................... 56
Page Properties .............................................................................................................................................. 57
Table Properties .............................................................................................................................................. 58
Text Properties ................................................................................................................................................ 59
Other Properties ............................................................................................................................................. 62

Dreamweaver
1. Introduction ............................................................................................................................................... 66

2. Dreamweaver Interface ...................................................................................................................... 66

Insert Bar ....................................................................................................................................................... 66
Document Toolbar ......................................................................................................................................... 67
Document Window ........................................................................................................................................ 68
Panel Groups ................................................................................................................................................ 69
Status Bar ..................................................................................................................................................... 71
The Coding Toolbar ...................................................................................................................................... 72

3. Making Websites ................................................................................................................................... 74

Creating a Website ....................................................................................................................................... 74
Creating a Web Page ................................................................................................................................... 78
Inserting and Formatting Tables ................................................................................................................... 79
How to add Rollover Effect ........................................................................................................................... 79
Adding Characters ........................................................................................................................................ 80
Validating the Document ............................................................................................................................... 80
Using the W3C Validator ............................................................................................................................... 82
Check for browser compatibility ................................................................................................................... 82

3
 HTML
1. Introduction

What is HTML?

HTML is an acronym for Hypertext Markup Language.

HTML is the language of web pages. It is the basis of the World Wide Web. It helps one in
creating, and designing a web page. But to be honest this answer is not complete. To have a
better understanding; HTML can be broken down into the following components:

Hypertext
Hypertext is a word or phrase which acts as a link to another document or file. When that word is
typed, one can jump from one file to another. It is just like jumping from one page in a book to
another.

Markup Language
Markup Language enables the styling or designing of the text in the line. Applying some specific
codes to it can do the styling of the text or a line. It is done to make the text look attractive.
These codes are known as"Markups"and a collection of them is a"Markup Language".

What are the Uses of HTML?

The uses of HTML

• Developing "Web Pages"
• Attractively displaying Information on a web page
• Adding links in a web page through the Hypertext feature
• Arranging all the information sequentially with links

Document Structure

HTML documents are structured into various tags. Every document has four tags (Basic Tags).
These tags are:

HTML
<HTML> tag is put at the beginning and end of any document. Everything in the document
goes inside the <HTML> tag.

4
HEAD
The <HEAD> tag contains general information about the document. It lies just below the <HTML>
tag. It is like the cover page of a document containing general information about it.

TITLE
The title of a document is specified by the <TITLE> tag. It is placed between the <HEAD> tags.
Each document can have only one title.

BODY
The <BODY> tag contains the contents of the document. All the text, headers, tables, headings,
paragraph, etc go into this tag.

Getting Started

 A Simple Text Editor, Such as Notepad

 A Web Browser ( Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator or any
other Web Browser)

Writing the HTML Document

A basic HTML document is written with the four tags given above.
(Note: All HTML Documents require the minimum “tagging” in order to function in your Browser. )
An HTML file is saved with the extension ‘.html'; for example “mypage.html”.

HTM or HTML Extension?

When you save an HTML file, you can use either the “ .htm “ or the “ .html “ extension. We have used .htm in our
examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three
letter extensions.
With newer software we think it will be perfectly safe to use .html .

The minimum HTML document looks like this

<html>

<head>
<title>My First Web Page</title>
</head>
<body>
This is my first web page
</body>
</html>

5
HTML Tags

A detailed study of tags is necessary to further modify the HTML document.

As discussed above, tags are the elements that make up the HTML document. The following points
elaborate their use and grammar:
• Tags are used to denote the various elements in an HTML document.
• A tag consists of a left angle bracket (<), a tag name, and a right angle bracket (>).
• All tags are paired, meaning that a tag started has to end.
• The start tag looks like <BODY>. The end tag is preceded by a slash (/), e.g. </BODY>.
• Some tag elements may include an attribute, which is additional information included
inside the tag.
• These attributes can be anything like the alignment of images, font size of the text, etc.
• HTML is not case sensitive. This means that the tag <TITLE> is equivalent to <title>.

Some Attributes of the Body Tag

BGCOLOR
This attribute sets the background color of the web page. For example, to set the background
color of the web page to blue, one has to type <BODY BGCOLOR = “BLUE”>

BACKGROUND
This attribute sets the picture to be used as a background for the page. If the picture is stored in
the same directory as that of HTML document, then only the name of the picture has to be typed.
In the other case, the full path of the picture has to be typed. For e.g.

- For a picture in the same directory:

Case 1
<BODY BACKGROUND = “nature. jpg”>

- For a picture in another directory:

Case 2
<BODY BACKGROUND = “c:\images\nature.jpg”>

TEXT
This attribute sets the color of the text on the page. To set the color of the text to blue, the syntax
is:

Syntax: <BODY TEXT = “BLUE”>

TOPMARGIN
This attribute sets the size of the top and bottom margins. It accepts an integer value. To set the
top and bottom margins to 1, the syntax is:

Syntax: <BODY TOPMARGIN = 1>

6
LEFTMARGIN
This attribute sets the size of the left and right margins. It accepts an integer value. To set the left
and right margin to 1, the syntax is:

Syntax: <BODY LEFTMARGIN = 1>

COMMENTS
There can be notes left for viewing in an HTML document. These notes are not visible in the web
browser. To do this the Comment tag is used. The comment tag is a single tag, which means that
this tag does not end. The comment is started with an exclamation mark. Exclamation mark is put
after the opening bracket but not before the closing bracket.

For e.g. <!----Hello, This is a Comment---->

Example with a Background Color

<html>

<head>

<title> My Page </title>

</head>

<body bgcolor=“#CCFFCC” text =“blue” topmargin=”1” leftmargin=”1” >

<!----I am starting off with my web site---->

Hello, this is My First website.

</body>

</html>

7
 2. Formatting

Formatting is the structuring and styling of the document. Formatting allows the designer to
determine the appearance and create the style of the HTML document.

As discussed in the earlier chapter, formatting is done with the help of tags. These tags help in
making the HTML document readable and interesting. This chapter illustrates tags in detail.

Heading Tags
Headings are created in HTML by adding text between the <h1> tags; also known as the heading
tags. The heading tag is used to separate the paragraph of the text from the heading.

HTML has six levels of headings, numbered 1 through 6 in decreasing order. In other words; 1 is
the biggest heading, 6 is the smallest. For e.g. <h1>,<h2>,<h3>,<h4>,<h5> and <h6>.

Headings are displayed in larger and bolder fonts than normal body text. The most important
heading should be between the <h1> tags. This is illustrated with the help of an example:

Example: <h1> Welcome to this great site of jokes. </h1>

Align Attribute of the Heading Tag

The align attribute is used with the heading tag. This attribute is used to align the text in the
heading tag. It can have four values ranging from left, right, center, and justify.

Example: <h1 align=center> Welcome to the great site of jokes. </h1>

Paragraph Tag
The paragraph tag indicates the start of a new paragraph. It is defined by a <p>. When some text
is put within the <p> tags, it is displayed in a new paragraph. A single line above and below the
paragraph is automatically left blank.

Example:
<p> A new paragraph is started with the text written within these tags. </p>

Align Attribute of the Paragraph tag

The align attribute is used with the paragraph tag. This attribute is used to align the text in the
heading tag. It can have four values- left, right, center, justify.

Example:
<p align=center> A new paragraph is started with the text written within these tags. </p>

Line Break
A line can be ended after a certain word without starting a new paragraph. This can be done by a
<br> tag. It just inserts a single line break.

8
Example:
<p> A new paragraph is started with the text written within these tags. <br/> This text will come in the next
line. </p>

Horizontal Rule Tag

The horizontal rule tag inserts a horizontal line in between the text. It is written as <hr>. It
separates two lines of text with a horizontal line.

Example:
<p>This line lies above the horizontal rule. <hr/>This line lies below the horizontal rule.<p>

Font Style Tag

The font style tags add some richer effects to the text. They are used for formatting. Some of
these tags are bold, italics, etc.

Bold
The bold tag is written as <b>. The text written between these pair of tags is shown as bold in the
document.

Example: <p><b> This text will appear as bold </b></p>

Italics
The italics tag is written as <i>. The text written between these pair of tags is shown in italics in
the document.

Example: <p><i> This text will appear in italics </i></p>

Big
The big tag is written as <big>. The text written in these pair of tags appears bigger than the
normal text.
Example: <p><big> This text will appear big </big></p>

Small
The small tag is written as <small>. The text written in these pair of tags appears smaller than
the normal text.

Example: <p><small> This text will appear small </small></p>

These tags are implemented in the following example:

Example:

< html>
< head>
< title> My bag of jokes </ title>
</ head>
< body background = "myimage.jpg" text = “blue”>

9
<!----I am starting off with my web site---->
< h1 align= left> I want to make you laugh</ h1>

Hello, this is My Jokes website.< hr />

< p>Here you can read some rib-tickling jokes.< br />

< b>< i>These jokes are meant for people of all ages.
Some of them are very good, they will have you in splits. </ b></ i></ p>

< h2>Classic jokes.</ h2>

< p>< b>During their silver anniversary, a wife reminded her husband: “Do you remember that when you proposed to
me, I was so overwhelmed that I didn't talk for an hour?"< br /> The hubby replied: "Yes, honey, that was the happiest
hour of my life."</ b></ p>

</body>
</html>

Phrase Tags
The following tags are all phrase element tags. These tags help in providing a richer effect to the
web page.

Emphasized Tag
The emphasized tag is written as <em>. This is used to emphasize or stress on a text. The
emphasized text in the output is usually in italics.

Example: <em> This text is emphasized </em>

Code Tag
The code tag is written as <code>. It indicates that the text written is an example of a typed
code. It is usually in a fixed font.

Example: <code> This text is a computer code </code>

Strong Tag
The strong tag is written as <strong>. This tag helps to emphasize or highlight the text. The text
appears in bold.

Example: <strong> This text is Bold. </strong>

Preformatted Text Tag

The preformatted text tag is written as <pre>. This tag preserves the preformatted element of the
text, like spaces and line breaks. The text written within the <pre> tags will appear in the same
way in the web page as in the code.

Example: <pre> This is pre tag. </pre>

10
Lists

Lists are the next element of an HTML document. Lists are an often–used constituent in a web page.

A great way of laying out information is through lists. Lists are simple to read and easy to look at.
They make the web page look attractive and readable. The user can understand and retain more if
the information is presented to him in a list.

List index tag; the primary concept of list, is discussed below.

List Index Tag

The list index tag is written as <li>. It defines the start of a list item. The <li> tags are used in
both unordered and ordered lists.

Note: The example of list index tag is shown with the example of unordered and ordered lists.

Unordered Lists
An unordered list is defined by the tag <ul>. It is a list of items in which the items are preceded
by bullets or by markers.

Example:
<ul>
<li>Classic jokes </li>
<li>Math jokes </li>

<li>Food jokes</li>
</ul>

Ordered Lists
An ordered list is defined by <ol>. An ordered list is quite similar to unordered list. The only
difference is that numbers precedes the list items of ordered list. The first list item gets the
number “1” and so on.

Example:
<ol>
<li>Crazy jokes</li>
<li>Ethnic jokes</li>
<li>Golf jokes</li>
</ol>

Text Formatting Tags

Tag Description
<b> Defines bold text

<big> Defines big text

11
<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<s> Deprecated. Use <del> instead

<strike> Deprecated. Use <del> instead

<u> Deprecated. Use styles instead

Computer Output Tags

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

The following example illustrates how lists are used in the web page:

Example:
< html>
< head>
< title> My list of jokes </ title>
</ head>

< body background = "myimage.jpg" text = “blue”>

< h1>This is my list of jokes </ h1>

< ul>
< li>Classic jokes </ li>
< li>Math jokes </ li>
< li>Food jokes</ li>
</ ul>

< hr />
< ol>
< li>Crazy jokes</ li>
< li>Ethnic jokes</ li>
< li>Golf jokes</ li>
</ ol>
</body>
</html>

12
 3. Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we
want the browser to actually display these characters we must insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon
(;).
To display a less than sign in an HTML document we must write: &lt; or &#60;
The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all
browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Note: The entities are case sensitive.

Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add
spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" quotation mark &quot; &#34;

' apostrophe &apos; (does not work in IE) &#39;

Some Other Commonly Used Character Entities:

Result Description Entity Name Entity Number

¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;

13
 4. Links

The contents of this chapter relate to the concept of linking of HTML documents. It answers the
queries related to the definition of linking, the method of linking HTML documents, and how
images are put on the web page.

Before going on to links in detail, some preliminary concepts have to be understood. These
concepts will help one in linking HTML documents in a better manner.

URL
The acronym URL stands for Uniform Resource Locator. This is an address that specifies the
location of files on the Internet. In other words; the World Wide Web uses URLs to specify the
location of files on other servers. A URL includes the type of resource being accessed, the address
of the server, and the location of the file. The syntax is:

Example: http://host.domain/path/filename

Relative Pathnames

Documents can be linked to other directories by specifying the relative paths to the linked
document. For e.g. A link to a file mycode.html located in the subdirectory codes would be:

Example: <A href=”codes/mycodes.html”> Code of file 1 </A>

These are called relative links because the path to the linked file, relative to the location of the current file is specified.

Case 1
If the file to be accessed is stored on a lower level of directory than the current directory, then
that file can be accessed by simply typing the directory name/ filename in the href attribute.
Note: The use of the term ‘href’ is explained in detail in the following pages

In the following example, the file ‘work’ is a subdirectory of the current directory and the file
myfile.html is stored in ‘work’.

Example: <A href=”work/myfile.html”> file </A>

Case2
If the file to be accessed is stored on a higher level of directory than the current directory, that file
can be accessed by simply typing ../ before the name of the file. Each ../ tells the web browser to
go one level up relative to the current directory.

In the following example, the browser has to go two levels up to link the file to the document.

Example: <A href=”../../newfile.html”> Myfiles </A>

14
Absolute Path
Absolute path is used to link those documents that are not directly related to the current
document. Links to some other website should be absolute as they are not related to the current
directory. In this way even if the current directory is moved, it will not affect the links.

Example: <A href=http://www.ajsquare.com> Link to AJ Square </A>

Linking
The real power of HTML comes from the fact that different documents can be linked together. With
the help of this tool, a text or an image can be linked to any part of the document or section of a
document. A browser highlights the identified text or image with color or underlines to indicate
that it is a hyperlink.

Linking is done with the help of the following tags:

Anchor Tag
The <a> tags indicate the anchor tag. An anchor is a piece of text or some other object (like
image) to mark the beginning and/or end of a hypertext link. An anchor tag by itself doesn’t do
anything; it creates a link to another document by using the “href” attribute. The following are
some attributes of Anchor tag:

Href
Href stands for Hypertext Reference. The address of the file or the address of the website is given
in the ‘href’ tag. The address is the name of that document which the web page links to.

Example: <A href= "http://www.ajsquare.com/" > Mylink </A>

Target
Target is another attribute of anchor tag. It specifies where the target URL should open. It takes
up various values, which are:

_blank
The target file will open in a new window.

Example: <A href= "http://www.ajsquare.com/" target=”_blank”> Mylink </A>

15
 5. Images

The previous sections were confined to the design of web pages/HTML documents that contain
only textual content. This section elucidates the technique of inserting images in the web page,
making the web page more pleasing to the eye. It goes a step further in assisting the user to
personalize the HTML document.

HTML enables authors to display images in a document. Images make the web page look good.
When a picture compliments the text on the web page, it generates more enthusiasm in the user.

Image Tag
The image tag is written as <img>. This is used to display an image in an HTML document. The
image tag is a singular tag, which means it need not be closed as </img>. But, the latest version
of HTML does not support this. In the latest version, the image tag is to be closed by putting a (/)
backslash, e.g. <img/>.

The Image tag is similar to the anchor tag as discussed earlier, in the sense that the image tag
alone does not perform any function. It has to include various attributes so that the image can be
displayed on the page.

Example: <img attributes />

Attributes of <img> Tag

Src
Src is the source attribute. It indicates the location or the path of the picture to be displayed on
the web page.

Example: <img src=”c:\images\img1.jpg” />

Alt
lt is an attribute, which displays an alternative text if the picture is not displayed on the web
browser.

Example: <img src=”c:\images\img1.jpg alt=”this is my image” />

Width
The width attribute determines how wide the picture is to appear on the web page.

Example: <img src=”c:\images\img1.jpg alt=”this is my image” width=105 />

Height
The height attribute determines the height of the picture that has to appear on the web page.

Example: <img src=”c:\images\img1.jpg alt=”this is my image” height=100 />

16
Align
The align attribute sets the alignment or the position of the picture in relation to the text around
it.

Example: <img src=”c:\images\img1.jpg alt=”this is my image” align=left />

Border
The border attribute sets a border around the images. A border value greater than 0 puts a border
around the image.

Example: <img src=”c:\images\img1.jpg alt=”this is my image” align=left border=2/>

The following is an example of a web page with an image:

Example:

<html>
<head>

<title> My list of jokes </title>

</head>
<body background ="myimage.jpg" text = “blue”>

<h1>This is my list of jokes </h1>

<ul>
<li>Classic jokes </li>
<li>Math jokes </li>
<li>Food jokes</li>
</ul> <hr/>
<ol>
<li>Crazy jokes</li>
<li>Ethnic jokes</li>
<li>Food jokes</li>

</ul> <hr/>

<img src="image1.jpg" alt="my image" height=100 width=100 border=2/>

</body>
</html>

Map Tag
A map tag is used to map an image. In other words; this image, called the mapped image,
contains some regions that act as links to other documents. It is written as <map>. The user can
set these regions and these regions are quite similar to a hyperlink. This is because when they are
clicked on, they refer to some other document.

To create an image map, another tag called area tag is used which will be explained later.

17
Attribute of Map Tag

Name
The name attribute sets the name of the image map. It determines which map definition the
image uses.

Example: <map name=”map1”> </map>

Area Tag
The area tag defines a region in an image map. This tag includes various attributes as it cannot
function alone. It requires the href attribute to link to other documents.

Syntax: <area attributes></area>

Attributes of Area

Href
The href tag indicates the URL that the <area> tags links to. The syntax of this tag is similar to
the anchor tag.

Example: <area href=”image1.jpg” ></area>

Alt
The alt attribute in the <area> tags works just like it works in the <img> tags. It indicates the
alternative text that is to be displayed if the browser does not display the picture.

Example: <area href=”image1.jpg” alt=”my image” > </area>

Cords
The cords attribute is the coordinate attribute. This tag is used with the shape attribute (the shape
attribute has been described later).

It specifies the coordinates of the area that has to be clicked and indicates where the shape is
located in the image map. The Cords tag is necessary when the shape attribute is set to Rect,
Circle or Poly. It is not required if the shape is set to Default.

Example: <area href=”image1.jpg” alt=”my image” cords=”6,116,97,44” > </area>

Shape
The shape attributes indicate what shape the area is. The shape of the map must be set to the
following values:

18
Rect
Rectangular shape indicates that the area is a rectangle. The cords attribute consists of two pair of
x/y coordinates for a rectangle. The first pair sets the coordinates of the upper left corner of
rectangle. The second pair sets the coordinates of the lower right corner of the rectangle.

Example: <area href=”image1.jpg” alt=”my image” shape=rect cords=”6,116,97,44” > </area>

Circle
Circle shape indicates that the area is a circle. The first two numbers in the cords attribute
indicate the coordinates of the centre of the circle. The next number indicates the radius of the
circle.

Example: <area href=”image1.jpg” alt=”my image” shape=circle cords=”60,40, 44” > </area>

Poly
Poly shape indicates that the area is some type of polygon. For a polygon each pair of coordinate
in cords indicates the single corner of the polygon.

Example:
<area href=”image1.jpg” alt=”my image” shape=poly cords=”150,217, 190,257, 150,297, 110,257” > </area>

Default
Default indicates that the area isn’t really a shape but the href attribute applies to the whole area.
In this attribute coordinates are not given.

Example: <area href=”image1.jpg” alt=”my image” shape=default > </area>

19
 6. Forms

Opening an e-mail account on any site is preceded by filling up an e-form by the user. This form
asks the user’s personal details along with the desired username and password. This form consists
of various input boxes, buttons, labels and option buttons. This is followed by a display of the
rules and regulations, in other words; the dos and don’ts of using the e-mail account. An
acceptance of this by clicking on the ‘I Agree’ button fulfils all formalities of opening the e-mail
account.

There can be various kinds of forms besides an e-mail form in a web page. Forms make a web
page interactive. They are displayed by using various form elements like input boxes, buttons and
labels. HTML enables users to create forms with the help of these elements.

The following section involves in the creation and customization of forms:

Form Tag
Forms are the most popular way to make a web page interactive. The form tag creates a form to
be input by the user. It can contain text fields, check boxes, radio buttons and more. Like any
form on paper, a form on a web page allows the user to enter requested information and submit it
for processing. It passes the user data to a specified URL.

Syntax: <form attributes></form>

Attributes of Form Tag

Name
The name attribute takes up the value form name. It defines a unique name for the form. It is an
optional attribute.

Example: <form name=”registration”> </form>

Action
The action attribute takes up a URL as its value. It sends the data to the URL defined in action
when the submit button is pressed. It is an essential attribute.

Example: <form action=”http://www.ajsquare.com”> </form>

Input Tag
The <input> tag defines the start of an input field where the user can enter his data. The input
tag is closed by a backslash (/) at the completion of the tag.

Syntax: <input attributes />

20
Attributes of Input Tag

Type
This attribute indicates the type of the input element. The default value is “text.”
The various values of type attributes are:

Button
A button is an input type that will not function without applying some extra code along with it. As
button is used while scripting, the concept of buttons will be discussed in detail later.

Checkbox
The checkbox value creates a checkbox which can either be on or off.

Example: <input type=checkbox />

Hidden
The Hidden value indicates that the field is hidden. It gives the user the option of hiding the value
within it. Hidden is commonly used by programmers who do not want users to see the value
typed. The hidden value is still submitted with other information when the submit button is
clicked. It usually contains the page name and page number that the user is on.

Example: <input type=hidden />

Image
Image creates an image that is also a “submit” button. When the user clicks on the image, the
form is submitted. It also requires the “src” attribute like the image tag.

Example: <input type=image src=”..graphics/myimage.jpg” />

Password
Password indicates that the field is used for typing a password. Password works just like the text
type field, with the difference that whatever is typed is not displayed on the screen. Instead of
showing what has been typed, the browser displays a series of asterisks (*), bullets (.), or some
other symbol to indicate the typed but hidden values.

Example: <input type=password />

Radio
Radio is used to create a series of choices out of which only one can be selected. Selecting a radio
button option automatically deselects all other options. Several HTML radio buttons are created by
using the same name but different values.

Example:
<input type=radio name=”joke” value=”a”/> cricket jokes <br/>
<input type=radio name=”joke” value=”b”/> crazy jokes <br/>

21
Reset
The reset value resets the form to present it in its original form i.e. in the way before anything
was typed on it.

Example: <input type=reset />

Submit
The submit value creates the submit button which submits the form to the server. There can be
two submit buttons on a form. To do this, the submit button has to be given the same name but
different values.
Example: <input type=submit value=”send it” />

Text
Text creates the text entry field, which is the most popular type of data entry field. Text is the
default-input type. If the text field is required there is no need to specify the type.

Example: <input type=text />

Name
The name attribute assigns a name to the input field. It is required in most circumstances. The
name of the input field is used to send the information to the server.

Example: <input type=text name=”realname” />

Value
Value sets the value for the input field. This sets the default value for text and password fields,
the button text in submit and reset buttons, and the values of choices in radio buttons.

Example: <input type=submit value=”send this” />

The following example illustrates a form on a web page. This form will have all the tags and attributes that
have been discussed above:

Example:

<html>
<head>
<title> My list of jokes </title>
</head>
<body background ="myimage.jpg" text = “blue”>

<h1 align=center> My Registration Page </h1>

<form name="registration" action="http://www.ajsquare.com">

First name: <input type=text name="realname" /> <br/><br/>
Last name: <input type=text name="surname" /> <br/><br/>
Password: <input type=password name="pass"/> <br/><br/>
Re-Type Password: <input type=password name="repass"/> <br/><br/>

22
SEX<br/>
<input type=radio name="sex" value="M"/> Male<br/>
<input type=radio name="sex" value="F"/> Female<br/>

<h2 align=center> Additional Information </h2>

<input type=checkbox name="maillist"/> Put me on mail list. <br/><br/>

<input type=reset /><br/><br/>

<input type=submit value="Submit" />

</form>

</body>
</html>

Option Tag
The option tag is used with the <select> tag (which has been discussed later) to create select
lists. It indicates the start of a new option in the list. It is used with the value attribute, which
indicates what is sent to the server. The text that follows the option tag is the text that is
displayed in the browser.

Attribute of Option Tag

Value
It indicates the value that is sent to the server if that option is selected. The user does not see the
value encrypted in the value attribute on the browser.
Example:

<select name=”jokenumber”>

<option value=”001”> Cricket jokes </option>

<option value=”002”> Golf jokes </option>
<option value=”003”> Tennis jokes </option>

</select>

Select Tag
The select tag creates a list of options, one or more of which can be selected. This tag in its
simplest form has a <select> tag, one or more <option> tags and a </select> tag.
Example:

<select name=”jokenumber”>

23
 <option value=”001”> Cricket jokes </option>
<option value=”002”> Golf jokes </option>
<option value=”003”> Tennis jokes </option>

</select>

Attributes of Select Tag

Name
The Name attribute names the select field for use in the server. It works similarly as it works with
the input tag.
Example:
<select name=”jokenumber”>

</select>

Size
The size attribute indicates how many rows of the list should be displayed. It indicates the number
of items that are shown in the drop down list. The default size is one.
Example:

<select name=”jokenumber” size=4 >

</select>

Multiple
The Multiple attribute assigns more than one option from the list that can be selected. The size
attribute is particularly useful while creating multiple lists.
Example:

<select name=”jokenumber” multiple size=4>

</select>

Optgroup Tag
The optgroup tag defines an option group. Various choices can be grouped with the help of this
tag. When there is a long list of options, groups of related choices are easier to handle. These
groups are user friendly and time saving.

Attribute of Optgroup Tag

Label
The label attribute defines a label for the option field. A label is a name for that particular option
group.

24
Example:

<select name=”jokenumber”>

<optgroup label=”Game jokes”>

<option value=”001”> Cricket jokes </option>

<option value=”002”> Golf jokes </option>

</optgroup>

<optgroup label=”Other jokes”>

<option value=”111”> Classic jokes </option>

<option value=”112”> Short jokes </option>

</optgroup>

</select>

Label Tag
The label tag defines a label to a control. When the text within the label is clicked, it will toggle
the control.

Attribute of Label Tag

For
The for attribute defines the form element with which the label is associated. The text within the
for attribute in the label should be the same as the text in the id attribute of the control.
Example:

<label for=”moreinfo”> Do you want more information? </label>

<input type=checkbox name=”moreinfo” id=”moreinfo” />

Textarea Tag
The textarea tag indicates a form field wherein the user can enter large amounts of text. An
unlimited number of characters can be written in the text-area. The default font of the text area is
fixed pitch.

Attributes of Textarea Tag

Name
The name attribute sets the name of the form field. It works in a similar way as in the input field.

Example: <textarea name=”comments” > </textarea>

25
Cols and Rows
Cols indicate how many characters wide the textarea should be. Rows indicate how many rows
should be there in the textarea. This attribute sets just the visible area of the text.
Example:

<textarea name=”comments” cols=40 rows=6 > </textarea>

Wrap
The wrap attribute describes how the text wraps at the end of lines. This attribute is given with
some values, which can be:

Soft
Soft wraps long lines in the text area for easy editing. It does not send the carriage return to the
server.

Hard
Hard looks similar to soft, but it sends the carriage returns to the server.

Off
Off does not wrap at all. It just displays and sends the text exactly as typed.
Example:

<textarea name=”comments” wrap=soft> </textarea>

These attributes can be illustrated with the help of an example:

Example:

<html>
<head>
<title> My list of jokes </title>
</head>
<body background ="myimage.jpg" text = “blue”>

<h1 align=center> My Registration Page </h1>

<form name="registration" action="http://www.ajsquare.com">

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

Last name: <input type=text name="sirname" /> <br/>
Password: <input type=password name="pass"/> <br/>
Re-Type Password: <input type=password name="repass"/>

26
<h2 align=center>Additional Information </h2>

SEX<br/>

<select name="sex">
<option value="001"> Male </option>
<option value="002"> Female </option>
</select><br/>
SELECTION OF JOKES<br/>
<select name=”jokenumber”>
<optgroup label=”Game jokes”>
<option value=”001”> Cricket jokes </option>
<option value=”002”> Golf jokes </option>
</optgroup>

<optgroup label=”Other jokes”>

<option value=”111”> Classic jokes </option>
<option value=”112”> Short jokes </option>
</optgroup>
</select><br/>

<label for=”moreinfo”> Do you want more information on jokes? </label>

<input type=checkbox name=”moreinfo” id=”moreinfo” /><br/><br/>

Enter your comments:

<textarea name=”comments” cols=40 rows=3 wrap=soft>
</textarea><br/><br/>

<button type=reset> Reset </button><br/>

<button type=submit>Send This </button>

</form>
</body>
</html>

27
 7. Tables

Information presented in a tabular form is always more popular than when they are displayed in
paragraph form. Tabular information is easy to understand, utilize and recollect. Tables contain
headings, rows and columns that simplify the otherwise cumbersome information and display the
data with greater clarity.

This chapter elucidates the concept of tables, their creation and customization. HTML tables
enable users to arrange data into tables; in the form of text, images, and forms etc. with the help
of rows and columns.

Several tags can be used to make tables in a web page. They are:

Table Tag
The <table> tag defines a table. Table headers, table rows, table cells and other tables can be
displayed inside the <table> tags.

Attributes of Table Tag

Border
The border attribute establishes the size of the border surrounding the table. The default value is
0. When a border is set without a value, the default value is 1.
Example: <table border=2> </table>

Cellpadding
The cellpadding attribute sets the amount of space between the cell walls and the contents. The
default value for cellpadding is 1.

Example: <table border=2 cellpadding=4> </table>

Cellspacing
The cellspacing attribute sets the amount of space between the cells of a table. If the borders are
visible cellspacing controls the width of internal borders.
Example: <table border=3 cellspacing=3> </table>

Width
The width attribute sets the width of the table. It can be expressed either as an absolute value in
pixels, or as a percentage of screen width.
Example: <table border=2 width=70%> </table>

Bgcolor
The Bgcolor attribute sets the background color of the entire table.
Example: <table border=1 bgcolor=yellow> </table>

28
Background
The background attribute sets the background image for the table.

Example: <table border=1 background=”myimage.gif”> </table>

Align
The align attribute sets the position of the table in relation to the page. It takes the value- left or right.

Example: <table border=2 align=left> </table>

Hspace and Vspace

Hspace and Vspace indicate the amount of horizontal and vertical space to be put between the able and
surrounding text. They must be used in conjunction with the <align> tag.

Example: <table align=left hspace=10 vspace=20> </table>

Bordercolor
The bordercolor attribute sets the color of all the borders of the table.

Example: <table border=5 bordercolor=red> </table>

TR Tag
The <tr> tag designates a table row. Each <tr> tag contains one or more <td> i.e. table data or <th> i.e.
table header elements.

Example:
<table border=2>
<tr> <td>cricket jokes</td> <td> tennis jokes</td> <td>golf jokes</td> </tr>
<tr> <td>classic jokes</td> <td>soft jokes</td> <td>political jokes</td> </tr>
</table>

Attributes of TR Tag

Halign
Halign sets the horizontal alignment of cells in the row. It takes up the values left, center and right.

Example: <tr halign=left> <td>common jokes</td> </tr>

Valign
Valign sets the vertical alignment of the row. It can be set to top, middle, bottom or baseline.

Example: <tr valign=top> <td>common jokes </td> </tr>

Bgcolor
Bgcolor sets the background color for the table row.

Example: <tr bgcolor=”#CCCC99”> <td> common jokes </td> </tr>

Bordercolor
Bordercolor works similarly as with the <table> tag. The basic difference is that it only sets the colors of the
inside borders.

29
Example: <tr bordercolor=red> <td> common jokes </td> </tr>

TD Tag
The <td> tag sets a single table cell in which data is shown. Td means table data.

Example:
<tr>
<td> weird jokes </td>
<td> classic jokes </td>
</tr>

Attributes of <td> Tag

Align
Align sets the horizontal alignment of text within the table cell. It takes up the values left, center, and right.

Example: <td align=left> classic jokes </td>

Valign
Valign is the vertical alignment of text within the table cell. It takes up the values- top, middle, center,
bottom, and baseline.

Example: <td valign=top> classic jokes </td>

Colspan and Rowspan

Table cells can span across more than one column or row. The attributes colspan and rowspan indicate how
many columns or rows a cell should take up. We can create a cell that is equivalent to two cells.

Example:
<tr border=2>
<td colspan=2> jokes </td>
<td> classic jokes </td> <td> cricket jokes</td>
</tr>

Nowrap
Nowrap indicates that the text should not wrap in the cell. Nowrap does not wrap the text, no matter how
long the sentence is.

Example: <tr> <td nowrap> The text written in this sentence will not be wrapped in any case. </td> </tr>

Bgcolor
Bgcolor sets the background color of a single cell in a table.

Example: <tr> <td bgcolor=”#FF6699”> Good jokes </td> </tr>

Bordercolor
Bordercolor works similarly as it works with the <table> tag. It sets the color of the entire border around a
cell.

Example: <tr border=2> <td bordercolor=red> Nature Jokes </td> </tr>

30
 8. Frames

The concepts of HTML Frames are the next step towards empowering the user to add style to the web page.
HTML enables the designer to divide the space in the web page into several rectangular areas. Each of these
rectangular areas is known as a frame and each frame represents a separate document. With the help of
these frames, a part of the page can be kept stationary while the other parts can be scrolled or replaced.

In other words, Html frames define the display into multiple regions, some of which can be stationary and act
as links to other pages; while others can be scrolled. The designer can arrange the data into several windows
or windows according to his urgency and relevance.

Frame Tag
The <frame> tag sets a single frame in the framed page. The frame tag always goes inside a <frameset>
tag. It has various attributes, including the SRC attribute that indicates the URL of the page that goes in the
frame.

In the following example two frames are being made in one web page. The frame tag should be properly
closed by putting a backslash (/) at the end of the tag.

Example:
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title”/>
<frame src=”body.html” name=”body”/>
</frameset>

Attributes of Frame Tag

Src
Src indicates the URL to be put into the frame.

Example:
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title”/>
<frame src=”body.html” name=”body”/>
</frameset>

Note: Frames are not supported by the <body> element. The frames should be contained only within the <html> tag.

Name
Name defines a unique name for the frames. It works like the name attribute in other tags.

Example:
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title”/>
<frame src=”body.html” name=”body”/>
</frameset>

31
Scrolling
Scrolling means that there should be a scrollbar on the right and/or on the bottom of the screen. It has three
values-yes, no and auto. Yes means there will be a scrollbar even when it is not needed. No means there will
not be a scrollbar even when it is needed. Auto is the default value that means there will be scroll bars as
and when needed.

Example:
<frameset rows=”20%,30%,*”>
<frame src= “title.html” name=”title” scrolling=yes/>
<frame src=”body.html” name=”body”/>

<frame src=”body.html” name=”body” scrolling=no/>

<frame src=”data.html” name=”data” scrolling=auto/>

</frameset>

Noresize
Noresize means that the user cannot make the frame bigger or smaller by sliding the borders. Normally the
user can resize the border with a mouse. Noresize disables this ability.

Example:
<frameset rows=”20%,30%,*”>
<frame src= “title.html” name=”title” scrolling=yes noresize/>

<frame src=”body.html” name=”body” scrolling=no/>

<frame src=”data.html” name=”data” scrolling=auto/>
</frameset>

Frameborder
Frameborder sets the border around the frames. It takes up two values- yes and no. Yes sets the border to
on and no sets the border to off. The default is yes.

Example:
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title” frameborder=yes />
<frame src=”body.html” name=”body” frameborder=no />
</frameset>

Bordercolor
Bordercolor sets the color of the borders around the frame.

Example:
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title” bordercolor=red/>
<frame src=”body.html” name=”body”/>
</frameset>

Marginwidth
Marginwidth sets the internal left and right margins of a frame.

Example:

32
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title” marginwidth=2 />
<frame src=”body.html” name=”body”/>
</frameset>

Marginheight
Marginheight sets the internal top and bottom margins of a frame.

Example:
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title”/>
<frame src=”body.html” name=”body” marginheight=30/>
</frameset>

NoFrames Tag
A large percentage of people on the web use browsers which cannot read frames. The
<noframes> tag holds the text that should be displayed for people who don’t have frames. It
should be the outermost frameset element.

Example:
<frameset rows=”20%,*”>
<frame src= “title.html” name=”title”/>
<frame src=”body.html” name=”body”/>
<noframes>
<p>this text is for those people who cannot view the frames.</p>
</noframes>
</frameset>

IFrame Tag
The <iframe> tag creates a web page, which has an inline frame that contains another document.
It creates a frame that sits in the middle of a regular non framed page. It works like the <img>
tag, the only difference being that instead of pitting a picture on the web page it puts up another
web page.

Example:
<iframe src=”hello.html”>
If you can see this then your browser does not understand iframes.
<frame src=”body.html” name=”body”/>
</iframe>

Attributes of IFrame Tag

Src
Src indicates the URL of the document which should go in the frame.

Example:
<iframe src=”hello.html”>

33
If you can see this then your browser does not understand iframes.

</iframe>

Height and Width

Height and Width attribute set the dimension of the inline frame.

Example:
<iframe src=”hello.html” width=450 height=100>

If you can see this then your browser does not understand iframes.

</iframe>

Name
Name indicates the name of the inline frame. It works in the same way as in the frame tag.

Example:
<iframe src=”tables.html” width=450 height=100 name=”tables”>
</iframe>

Frameborder
Frameborder indicates if the inline frame should have a border around it. The default value is 1, which sets a
border. When a border is not required then the value is set to 0.

Example:
<iframe src=”tables.html” width=450 height=100 name=”tables” frameborder=0>
</iframe>

Marginwidth
Marginwidth sets the internal left and right margins of the internal frame. It works similarly as it works in the
frame tag.

Example:
<iframe src=”tables.html” width=450 height=100 name=”tables” frameborder=0 marginwidth=2>
</iframe>

Marginheight
Marginheight sets the internal top and bottom margins of an inline frame. It works similarly as in the frame
tag.

Example:
<iframe src=”tables.html” width=450 height=100 name=”tables” frameborder=0 marginheight=2>
</iframe>

34
 CSS
This chapter introduces a new concept known as Style sheets.

What is CSS?

Style sheets are also known as CSS that stand for Cascading Style Sheets. Style sheets give
web developers more control over their design and content layout. They allow designers to create
a standard set of commands that control the style of all the subsequent pages.

HTML - The content gives the information to be presented

CSS - The style defines how the information is presented.

Benefits of Style Sheets

With the introduction of style sheets, standards are being set for the present and future of web
design. Style sheets assist designers to have control over their web site design and appearance
over different platforms and browsers.

The web sites designed in style sheets are faster to change and update.

Usually, in an HTML document; when the texture of all the web pages has to be changed, then
changes have to be made in all the pages. But when the designer is using style sheets, he just
has to make a change in the coding of the style sheet. This is the main benefit to designers and
companies as it speeds the time of development and updating. The coding is reduced, the pages
are more efficient and they require less bandwidth. Therefore communication is easier among
multiple developers because the work is standardized.

Rules for Writing Style Sheets

There is a set of rules that govern the making of a style sheet. These rules have to be followed
when style sheets are made. The rules are elaborated below:

Syntax: Selector { Property: Value }

1. The selector selects the element in which the author is working. The elements are common tags like
body, h1, pre, p, etc.

2. The declaration tells the browser what to do with the selected element. It consists of two parts:
* The property, which identifies which attribute, like font type, color, size etc. come into play.
* The value, which determines how the attribute works, like the value for the font

3. A declaration starts with a ‘{ ‘ (starting bracket) and ends with a ‘}’ (closing bracket).

35
 4. A property is separated by a ‘:’(colon) and a declaration is ended by a ‘;’ (semicolon).

Example:

h1
{
Color: blue;
font-family: Arial, sand-serif;
}

External Style Sheet

An external style sheet is ideal when the style has to be applied to many web pages. Changing a
single file, with the help of external style sheet, can change the look of the entire web site. This is
because each page is linked to the style sheets using the <link> tag (which will be explained
later). The <link> tag is placed inside the head section. An external style sheet is saved with an
extension of .css. This file is used in the HTML document.

Example:

/* Body tag Styles */

body
{
Font-family: Arial, helvetica, sans-serif;
Color: black;
Background-color: white;
}

/* Paragraph tag Styles */

p
{
Font-family: arial, Helvetica, sans-serif
}

/* Pre tag Styles */

pre
{
Font-family: "courier new", courier, monospace;
}

/* Header tag Styles */

H2,H3,H4
{
color: #669999;
Font-weight: bold;
}

36
/* Anchor tag active Styles */
a: active
{
Color: #ff0000;
}

/* Anchor tag Visited Styles */

a: visited
{
Color: #999999;
}

/* Table tag Styles */

table
{
Border: 5px none #CCFF99;
Width: 250 px;
Background-color: #FFCCCC;
}

/* Unorder list & Order list Styles */

UL, OL
{
font-family: arial, helvetica, sans-serif;
}

Linking This File With an HTML Document

This external style sheet is linked with the HTML document with a <link> tag. This link tag is
placed inside the head tag.

Example:

<head>
<link rel=”stylesheet” href=”mystyle.css” type=”text/css”/>
</head>

Internal Style Sheets

Internal style sheets are to be used when a single document has a unique style. The internal
styles are defined in the head section with the <style> tag (the style tag is explained in the last
part of this section).

Example:
<head>

<style type=”text/css”>
body {background-color: red}
p {font-family : "courier new", courier}
</style>

</head>

37
Inline Styles
An inline style is used when a unique style is to be applied to a single occurrence of an element.
To use the inline tag the <style> tag is used in the relevant tag. The style tag can contain any
style sheet property. The following example shows how to change the color and left margin of a
paragraph.
Example:

<p style=”color: red; margin-left: 20px” >

This is my jokes site.
</p>

Note:
In an HTML element, if all three style sheets are used then the order of preference is as follows: Firstly, inline style sheet
will be used; secondly, internal style sheet; and lastly, external style sheet will be used. If style for an HTML tag has been
defined in all the style sheets, then only the style of inline style sheet will be used.

Some tags associated with style sheets:

Link Tag
The link tag defines the relationship between two linked documents. This tag lets a style sheet to
be linked to an HTML document.

Attributes of Link Tag

Href
In this attribute, the target URL of the resource has to be given. It means that the URL of the
document has to be given; which is to be linked with the HTML document.

Type
Type defines the content type of the link tag. It takes up the value text/css. These two values are
given together and separated by a slash (/). It means that either of these two values could be
used.

Example:
<head>
<link href=”mystyle.css” type=”text/css” />
</head>

Rel
Rel defines the relationship between the current document and the targeted document. In this the
value of rel should be given as stylesheet.

Example:
<head>
<link rel=”stylesheet” href=”mystyle.css” type=”text/css” />
</head>

38
Style Tag
The style tag defines a style in a document. The style tag is placed in the head section of an HTML
document for an internal style sheet. The style element is also used with the HTML tag and it is
placed inside that tag for inline style sheets.

For internal style sheets it is used as:

Example:
<head>

<style type=”text/css”>

body {background-color: red}

p {font-family : "courier new", courier}

</style>

</head>

For inline style sheets it is used as:

Example:
<p style=”color: red; margin-left: 20px” >

This is my jokes site.

</p>

Attributes of Style Tag

Type
Type defines the content type of the style tag. It takes up the value text/css. These two values are
given together and separated by a slash (/). It means that either of these two values could be
used.

Example:
<head>

<style type=”text/css”>

body {background-color: red}

p {font-family : "courier new", courier}

</style>

</head>

Div Tag
The div tag defines a division or section in a document. It makes a logical division in a document.
The function of the div tag does is that it leaves a white space before and after the div tag. In this
way logical divisions can be made.

39
Example:
<div style=”color:#FF0000;”>
<h3> This is a header in this div section </h3>
</div>

<div style=”color:#CCCC99;”>
<p> This is a paragraph in another div section </p>
</div>

Span Tag
The span tag groups inline elements and formats them with styles in a document.

For example, if some lines in a paragraph have to be formatted differently than the rest of the
lines, then, the span tag is used. Those lines whose format is to be changed are put between the
span tags and the span tags are contained in the paragraph tags. The span tag can be used
between any set of tags.

Example:
<p> This is the first line in a paragraph.

<span style=”color:#FFCC99;”> This is the second line in the paragraph. </span>

This is third line in the paragraph. </p>

All CSS Properties are listed below

Background Properties

Property Description Possible Values Examples

div { background-
Declares the attachment of attachment:fixed; }
a background image (to
fixed
background-attachment scroll with the page
scroll div { background-
content or be in a fixed
attachment:scroll; }
position).

div { background-
Valid color names, RGB color:green; }
Declares the background
background-color values, hexidecimal
color.
notation. div { color:#00FF00; }

40
 div { background-
image:url(images/img.jpg);
}
Declares the background
background-image URL values.
image of an element.
body { background-
image:url(img.jpg); }

Lengths or percentages for

the x and y positions, or
one of the predefined
values:
div { background-
top left position:10px 50px; }
top center
Declares the position of a
background-position top right
background image. div { background-
center left
position:bottom right; }
center center
center right
bottom left
bottom center
bottom right

div { background-
repeat repeat:repeat-x; }
Declares how and/or if a
repeat-x
background-repeat background image
repeat-y div { background-
repeats.
no-repeat repeat:no-repeat; }

Separate values by a
space in the following
order (those that are not div { background:green
defined will use inherited url(image.jpg) no-repeat
Used as a shorthand or default initial values): fixed center center; }
property to set all the
background
background properties at background-color div
once. background-image { background:url(image.jpg
background-repeat ) fixed; }
background-attachment
background-position

41
Border Properties

Property Description Possible Values Examples

div { border-top-
Valid color names, RGB color:green; }
Declares the color of the values, hexidecimal
border-top-color
top border. notation, or the predefined div { border-top-
value transparent. color:#00FF00; }

none
hidden
dotted div { border-top-style:solid;
dashed }
Declares the style of the solid
border-top-style
top border. double div { border-top-style:inset;
groove }
ridge
inset
outset
Lengths or the following
div { border-top-
predefined values:
width:2px; }
Declares the width of the
border-top-width thin
top border. div { border-top-
medium
width:thin; }
thick

Separate values by a
space in the following
order (those that are not div { border-top:2px solid
Used as a shorthand defined will use inherited green; }
property to set all the or default initial values):
border-top
border-top properties at div { border-top:thick
once. border-top-width double #00FF00; }
border-top-style
border-top-color

div { border-right-
Valid color names, RGB color:green; }
Declares the color of the values, hexidecimal
border-right-color
right border. notation, or the predefined div { border-right-
value transparent. color:#00FF00; }

border-right-style Declares the style of the none div { border-right-

right border. hidden style:solid; }
dotted
dashed div { border-right-
solid

42
 double
groove style:inset; }
ridge
inset
outset
Lengths or the following
div { border-right-
predefined values:
width:2px; }
Declares the width of the
border-right-width thin
right border. div { border-right-
medium
width:thin; }
thick

Separate values by a
space in the following
order (those that are not div { border-right:2px solid
Used as a shorthand defined will use inherited green; }
property to set all the or default initial values):
border-right
border-right properties at div { border-right:thick
once. border-right-width double #00FF00; }
border-right-style
border-right-color

div { border-bottom-
Valid color names, RGB color:green; }
Declares the color of the values, hexidecimal
border-bottom-color
bottom border. notation, or the predefined div { border-bottom-
value transparent. color:#00FF00; }

none
hidden
dotted div { border-bottom-
dashed style:solid; }
Declares the style of the solid
border-bottom-style
bottom border. double div { border-bottom-
groove style:inset; }
ridge
inset
outset
Lengths or the following
div { border-bottom-
predefined values:
width:2px; }
Declares the width of the
border-bottom-width thin
bottom border. div { border-bottom-
medium
width:thin; }
thick

Used as a shorthand Separate values by a

div { border-bottom:2px
border-bottom property to set all the space in the following
solid green; }
border-bottom properties order (those that are not

43
 defined will use inherited
or default initial values):
div { border-bottom:thick
at once. border-bottom-width double #00FF00; }
border-bottom-style
border-bottom-color

div { border-left-
Valid color names, RGB color:green; }
Declares the color of the values, hexidecimal
border-left-color
left border. notation, or the predefined div { border-left-
value transparent. color:#00FF00; }

none
hidden
dotted div { border-left-
dashed style:solid; }
Declares the style of the solid
border-left-style
left border. double div { border-left-style:inset;
groove }
ridge
inset
outset
Lengths or the following
div { border-left-
predefined values:
width:2px; }
Declares the width of the
border-left-width thin
left border. div { border-left-
medium
width:thin; }
thick

Separate values by a
space in the following
order (those that are not div { border-left:2px solid
Used as a shorthand defined will use inherited green; }
property to set all the or default initial values):
border-left
border-left properties at div { border-left:thick
once. border-left-width double #00FF00; }
border-left-style
border-left-color

border-color Declares the border color Valid color names, RGB div { border-color:green
of all four borders at once. values, hexidecimal red blue olive; }
notation, or the predefined
value transparent. div { border-color:green; }

Separate the color for div { border-color:green

each border by a space, red; }
declaring the colors for the

44
 borders in the following
order:

border-top-color
border-right-color
border-bottom-color
border-left-color

Undeclared values work

as further shorthand
notation. If only one color
value is declared, all four
borders will use that color. div { border-color:green
If two colors are declared, red blue; }
the top and bottom
borders will use the first
color while the right and
left borders will use the
second color. If three
colors are declared, the
top border will use the first
color, the right and left
borders will use the
second color, and the
bottom border will use the
third color.

border-style Declares the border style none div { border-style:solid

of all four borders at once. hidden dotted dashed double; }
dotted
dashed div { border-style:solid; }
solid
double
div { border-style:solid
groove
dotted; }
ridge
inset
outset div { border-style:solid
dotted dashed; }
Undeclared values work
as further shorthand
notation. If only one style
value is declared, all four
borders will use that style.
If two styles are declared,
the top and bottom
borders will use the first
style while the right and
left borders will use the
second style. If three
styles are declared, the
top border will use the first

45
 style, the right and left
borders will use the
second style, and the
bottom border will use the
third style.

Lengths or the following

predefined values:

thin
medium
thick

Undeclared values work div { border-width:1px 3px

as further shorthand 5px 2px; }
notation. If only one width
value is declared, all four div { border-width:thin; }
borders will use that width.
Declares the width of all If two widths are declared,
border-width div { border-width:2px 4px;
four borders at once. the top and bottom }
borders will use the first
width while the right and
left borders will use the div { border-width:2px 4px
second width. If three 5px; }
widths are declared, the
top border will use the first
width, the right and left
borders will use the
second width, and the
bottom border will use the
third width.

Separate values by a
space in the following
order (those that are not div { border:1px double
Used as a shorthand to defined will use inherited green; }
declare the border or default initial values):
border properties when all four
div { border:thin solid
borders will have the same
border-width #00FF00; }
appearance.
border-style
border-color

46
Classification and Positioning Properties

Property Description Possible Values Examples

Declares the side(s) of an left div { clear:right; }

element where no right
clear
previous floating elements both div { clear:both; }
are allowed to be adjacent. none

URL values, and the

following prefefined
values:

auto
crosshair
default div { cursor:crosshair; }
pointer
move div
e-resize { cusrsor:url(image.csr); }
Declares the type of cursor
cursor ne-resize
to be displayed.
nw-resize div
n-resize { cusrsor:url(image.csr),
se-resize pointer; }
sw-resize
s-resize
w-resize
text
wait
help

none
inline
block
list-item
run-in
compact div { display:none; }
marker
table div { display:inline; }
Declares if/how the
display inline-table
element displays.
table-row-group
table-header-group div { display:marker; }
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
float Declares whether a box left div { float:left; }
should float to the left or right
right of other content, or none div { float:right; }
whether it should not be

47
 floated at all.
div { visibility:visible; }
Declares the visibility of visible
visibility boxes generated by an hidden
div { visibility:hidden; }
element. collapse

Declares the distance that

the top content edge of the
element is offset below the div { top:15px; }
top edge of its containing Lengths, percentages, and
top
block. The position the predefined value auto. div { top:2%; }
property of the element
must also be set to a value
other than static.
Declares the distance that
the right content edge of
the element is offset to the div { right:15px; }
left of the right edge of its
Lengths, percentages, and
right containing block. The
the predefined value auto. div { right:2%; }
position property of the
element must also be set
to a value other than
static.
Declares the distance that
the bottom content edge of
the element is offset above div { bottom:15px; }
the bottom edge of its
Lengths, percentages, and
bottom containing block. The
the predefined value auto. div { bottom:2%; }
position property of the
element must also be set
to a value other than
static.
Declares the distance that
the left content edge of the
element is offset to the div { left:15px; }
right of the left edge of its
Lengths, percentages, and
left containing block. The
the predefined value auto. div { left:2%; }
position property of the
element must also be set
to a value other than
static.

static div { position:absolute; }

Declares the type of relative
position
positioning of an element. absolute div { position:relative; }
fixed

clip Declares the shape of a Shapes, or the predefined div { clip:auto; }

clipped region when the value auto.
value of the overflow div { clip:rect(2px, 4px,
property is set to a value In CSS 2, the only valid

48
 shape is a rectangle, using
the following format to
specify the offset lengths
other than visible. from each side of the box: 7px, 5px); }

rect(top, right, bottom, left)

visible div { overflow:hidden; }

Declares how content that
hidden
overflow overflows the element's
scroll div { overflow:scroll; }
box is handled.
auto

Lengths, percentages, and

the following predefined
values:

baseline span { vertical-

Declares the vertical sub align:middle; }
vertical-align alignment of an inline-level super
element or a table cell. top td { vertical-align:top; }
text-top
middle
bottom
text-bottom

div { z-index:2; }
Declares the stack order of Integer values and the
z-index
the element. predefined value auto. div { z-index:auto; }

Dimension Properties

Property Description Possible Values Examples

div { height:200px; }
Declares the height of the Lengths, percentages, and
height
element. the predefined value auto. div { height:50%; }

div { max-height:200px; }
Declares the maximum Lengths, percentages, and
max-height
height of the element. the predefined value auto. div { max-height:50%; }

49
 div { min-height:200px; }
Declares the minimum Lengths, percentages, and
min-height
height of the element. the predefined value auto. div { min-height:50%; }

div { width:500px; }
Declares the width of the Lengths, percentages, and
width
element. the predefined value auto. div { width:75%; }

div { max-width:500px; }
Declares the maximum Lengths, percentages, and
max-width
width of the element. the predefined value auto. div { max-width:75%; }

div { min-width:500px; }
Declares the minimum Lengths, percentages, and
min-width
width of the element. the predefined value auto. div { min-width:75%; }

Font Properties

Property Description Possible Values Examples

Valid font family names or
generic family names, i.e.
Arial, Verdana, sans-serif,
"Times New Roman",
Times, serif, etc.
div { font-family:Arial; }
Declares the name of the
font to be used. Previously Font family names can be
font-family div { font-family:Arial,
set in HTML via the face separated by a comma in
Helvetica, sans-serif; }
attribute in a <font> tag. the same declaration to
allow additional and/or
generic family names to be
used if the prefereed font
is unable to be displayed.

50
 Lengths (number and unit
type— i.e. 1em, 12pt,
10px, 80%) or one of the
following predefined
values:
div { font-size:70%; }
Declares the size of the xx-small
font. Previously set in x-small div { font-size:0.85em; }
font-size
HTML via the size attribute small
in a <font> tag. medium div { font-size:medium; }
large
x-large
xx-large
smaller
larger

Limited browser
support: Was part of
CSS 2, but not in CSS div { font-size-
2.1. This property may adjust:0.54; }
return in CSS 3.
font-size-adjust Numeric value
div { font-size-
Declares the aspect value adjust:0.46; }
(font size divided by x-
height).

normal
Limited browser wider
support: Was part of narrower div { font-
CSS 2, but not in CSS ultra-condensed stretch:narrower; }
2.1. This property may extra-condensed
font-stretch return in CSS 3. condensed
div { font-stretch:ultra-
semi-condensed
expanded; }
Declares the stretch of the semi-expanded
font face. expanded
extra-expanded
ultra-expanded
div { font-style:italic; }
normal
font-style Declares the font style. italic
div { font-style:oblique; }
oblique

div { font-variant:normal; }
normal
font-variant Declares the font variant. div { font-variant:small-
small-caps
caps; }

font-weight Declares the font weight normal div { font-weight:bolder; }

(lightness or boldness) bold

51
 bolder
lighter
100
200
300 div { font-weight:200; }
400
500
600
700
800
900
Separate values by a
space in the following
order (those that are not
defined will use inherited
div { font:italic small-caps
Used as a shorthand or default initial values):
bold 1em 1.2em Arial }
property to declare all of
font the font properties at once font-style
div { font:bold 0.8em
(except font-size-adjust font-variant
Verdana }
and font-stretch). font-weight
font-size
line-height
font-family

Generated Content Properties

Property Description Possible Values Examples

String values, URL values,
and predefined value
formats:

counter(name)
counter(name, list-style- div:before { content:"some
Generates content in the type) text"; }
document in conjunction counters(name, string)
content
with the :before and :after counters(name, string, list- div:after
pseudo-elements. style-type) { content:url(page2.html); }
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote

52
 Declares the counter
Integers and the
counter-increment increment for each More Information
predefined value none.
instance of a selector.
Declares the value the
Integers and the
counter-reset counter is set to on each More Information
predefined value none.
instance of a selector.
Declares the type of
quotation marks to use for String values and the
quotes More Information
quotations and embedded predefined value none.
quotations.

List Properties

Property Description Possible Values Examples

disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha ol { list-style-type:upper-
upper-alpha roman; }
Declares the type of list lower-greek
list-style-type
marker used. lower-latin
ul { list-style-type:square; }
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
ol { list-style-
position:inside; }
Declares the position of inside
list-style-position
the list marker. outside ul { list-style-
position:outside; }

53
 Declares an image to be ul { list-style-
list-style-image URL values.
used as the list marker. image:url(image.jpg); }
Separate values by a
space in the following
order (those that are not ul { list-style:disc inside
defined will use inherited url(image.gif); }
Shorthand property to or default initial values):
list-style declare three list
ol { list-style:upper-roman
properties at once.
list-style-type outside; }
list-style-position
list-style-image

Declares the marker offset

for elements with a value Lengths and the li:before { display:marker;
marker-offset
of marker set for the predefined value auto. marker-offset:5px; }
display property.

Margin Properties

Property Description Possible Values Examples

div { margin-top:5px; }
Declares the top margin Lengths, percentages, and
margin-top
for the element. the predefined value auto. div { margin-top:15%; }

div { margin-right:5px; }
Declares the right margin Lengths, percentages, and
margin-right
for the element. the predefined value auto. div { margin-right:15%; }

div { margin-bottom:5px; }
Declares the bottom Lengths, percentages, and
margin-bottom
margin for the element. the predefined value auto. div { margin-bottom:15%; }

div { margin-left:5px; }
Declares the left margin Lengths, percentages, and
margin-left
for the element. the predefined value auto. div { margin-left:15%; }

54
 Separate values by a
space in the following
order (those that are not
defined will use inherited
or default initial values):

margin-top
margin-right
margin-bottom
margin-left
div { margin:5px 12px 4px
Undeclared values work 7px; }
as further shorthand
Shorthand property used notation. If only one length div { margin:5px; }
margin to declare all the margin value is declared, all four
properties at once. margins will use that div { margin:5px 10px; }
length. If two lengths are
declared, the top and
bottom margins will use div { margin:5px 7px 4px; }
the first length while the
right and left margins will
use the second length. If
three lengths are declared,
the top margin will use the
first length, the right and
left margins will use the
second length, and the
bottom margin will use the
third length.

Outline Properties

Property Description Possible Values Examples

div { outline-color:green; }
Valid color names, RGB
outline-color Declares the outline color. values, hexidecimal div { outline-
notation. color:#00FF00; }

none
dotted
dashed div { outline-style:solid; }
solid
Declares the style of the
outline-style double
outline. div { outline-style:inset; }
groove
ridge
inset
outset

55
 Lengths or the following
predefined values:
div { outline-width:2px; }
Declares the width of the
outline-width thin
outline. div { outline-width:thin; }
medium
thick

Used as a shorthand Separate values by a

property to set all the space in the following
background properties at order (those that are not div { outline:green solid
once. defined will use inherited 2px; }
or default initial values):
outline
div { outline:#00FF00
outline-color double thick; }
outline-style
outline-width

Padding Properties

Property Description Possible Values Examples

div { padding-top:5px; }
Declares the top padding Lengths, percentages, and
padding-top
for the element. the predefined value auto. div { padding-top:15%; }

div { padding-right:5px; }
Declares the right padding Lengths, percentages, and
padding-right
for the element. the predefined value auto. div { padding-right:15%; }

div { padding-bottom:5px; }
Declares the bottom Lengths, percentages, and
padding-bottom div { padding-
padding for the element. the predefined value auto.
bottom:15%; }

div { padding-left:5px; }
Declares the left padding Lengths, percentages, and
padding-left
for the element. the predefined value auto. div { padding-left:15%; }

56
 Separate values by a
space in the following
order (those that are not
defined will use inherited
or default initial values):

padding-top
padding-right
padding-bottom
padding-left div { padding:5px 12px 4px
7px; }
Undeclared values work
as further shorthand div { padding:5px; }
Shorthand property used notation. If only one length
padding to declare all the margin value is declared, all four div { padding:5px 10px; }
properties at once. sides will use that length. If
two lengths are declared,
the top and bottom sides div { padding:5px 7px
will use the first length 4px; }
while the right and left
sides will use the second
length. If three lengths are
declared, the top side will
use the first length, the
right and left sides will use
the second length, and the
bottom side will use the
third length.

Page Properties

Property Description Possible Values Examples

Declares the type of marks
crop
marks to display outside the page @page { marks:crop; }
cross
box.
Declares the minimum
number of lines of a
orphans Integers @page { orphans:2; }
paragraph that must be left
at the bottom of a page.
Declares the type of page
page where an element should Indentifiers More Information
be displayed.

57
 auto
always
page-break-after Declares a page break. avoid More Information
left
right
auto
always
page-break-before Declares a page break. avoid More Information
left
right
auto
page-break-inside Declares a page break. More Information
avoid
Lengths, and the following
predefined values:
Declares the size and
size auto More Information
orientation of a page box.
landscape
potrait

Declares the minimum

number of lines of a
widows Integers @page { widows:2; }
paragraph that must be left
at the top of a page.

Table Properties

Property Description Possible Values Examples

table { border-
collapse:collapse; }
Declares the way borders collapse
border-collapse
are displayed. separate table { border-
collapse:separate; }

Lengths for the horizontal

and vertical spacing,
separated by a space.
table { border-spacing:5px;
Declares the distance If one length is value is }
separating borders (if declared, that length is
border-spacing used for both the
border-collapse is table { border-spacing:5px
separate). horizontal and vertical 10px; }
spacing. If two lengths are
declared, the first one is
used for horizontal spacing
and the second one is
used for vertical spacing.

58
 caption { caption-
top side:top; }
Declares where the table
bottom
caption-side caption is displayed in
left caption { caption-side:right;
relation to the table.
right }

Declares the way empty table { empty-cells:show; }

cells are displayed (if show
empty-cells
border-collapse is hide table { empty-cells:hide; }
separate).

table { table-layout:auto; }
Declares the type of table auto
table-layout
layout. fixed table { table-layout:fixed; }

Text Properties

Property Description Possible Values Examples

Valid color names, RGB
values, hexidecimal
notation.

The predefined color

names are:

aqua
black
div { color:green; }
blue
fuchsia
Declares the color of the gray div { color:rgb(0,255,0); }
color
text. green
lime div { color:#00FF00; }
maroon
navy
olive
purple
red
silver
teal
white
yellow

59
 ltr
rtl div { direction:ltr; }
Declares the reading
direction
direction of the text. ltr = left-to-right div { direction:rtl; }
rtl = right-to-left

div { line-height:normal; }
Numbers, percentages,
Declares the distance lengths, and the div { line-height:2em; }
line-height
between lines. predefined value of
normal. div { line-height:125%; }

div { letter-spacing:normal;
}
A length (in addition to the
Declares the amount of
default space) or the div { letter-spacing:5px; }
letter-spacing space between text
predefined value of
characters.
normal.
div { letter-spacing:-1px; }

left
right
center
justify div { text-align:center; }

Declares the horizontal If used on a set of table div { text-align:right; }

text-align
alignment of inline content. cells, this property can be
given a string value to td { text-align:"."; }
which the text of each row
of the column will be
aligned.

div { text-
none decoration:none; }
underline
Declares the text
text-decoration overline
decoration. div { text-
line-through
decoration:underline; }
blink

div { text-indent:12px; }
Declares the indentation of
text-indent Lengths and percentages.
the first line of text. div { text-indent:2%; }

text-shadow Declares shadow effects A list containg a color div { text-shadow:green

on the text. followed by numeric 2px 2px 7px; }
values (separated by
spaces) that specify: div { text-shadow:olive

60
 The color for the shadow
effect
Horizontal distance to the
right of the text -3px -4px 5px; }
Vertical distance below the
text
Blur radius

div { text-
none transform:uppercase; }
Declares the capitalization
capitalize
text-transform effects on the letters in the
uppercase div { text-
text.
lowercase transform:lowercase; }

div { unicode-bidi:embed; }
Declares values relating to
normal
bidirectional text. May be
unicode-bidi embed div { unicode-bidi:bidi-
used in conjunction with
bidi-override override; }
the the direction property.

div { white-space:pre; }
normal
Declares how white space
white-space pre
is handled in an element. div { white-space:nowrap; }
nowrap

div { word-
A length (in addition to the spacing:normal; }
Declares the space default space) or the
word-spacing
between words in the text. predefined value of div { word-
normal. spacing:1.5em; }

61
Other Properties

Property Description Possible Values Examples

Angle values in degrees
(deg), or one of the
following predefined
values:

left-side
far-left
left div { azimuth:90deg; }
Declares the angle that
center-left
azimuth sound travels to the
center div { azimuth:behind; }
listener.
center-right
right
far-right
right-side
behind
leftwards
rightwards

div { cue-
after:url(sound.wav); }
Declares an audio cue to URL values and the
cue-after
play after an element. predefined value none.
div { cue-after:none; }

div { cue-
before:url(sound.wav); }
Declares an audio cue to URL values and the
cue-before
play before an element. predefined value none.
div { cue-before:none; }

URL values and the

predefined value none.
Separate the values by a
space in the following
order: div { cue:url(sound.wav)
url(sound2.wav); }
Shorthand proerty to set cue-before
cue
both cue values at once. cue-after div { cue:url(sound.wav); }

If only one cue value is

declared, it is used for
both before and after.

elevation Declares the elevation of a Angle values in degrees div { elevation:30deg; }

sound. (deg), or one of the
following predefined

62
 values:

below
level div { elevation:higher; }
above
higher
lower

div { pause-after:100ms; }
Declares the amount of
Time in milliseconds (ms)
pause-after time to pause after an
or percentages. div { pause-after:20%; }
element.

div { pause-
Declares the amount of before:100ms; }
Time in milliseconds (ms)
pause-before time to pause before an
or percentages.
element. div { pause-before:20%; }

Separate the values by a

space in the following
order:
div { pause:200ms
pause-before 100ms; }
Shorthand proerty to set pause-after
pause
both pause values at once.
div { pause:100ms; }
If only one pause value is
declared, it is used for
both before and after.

Frequencies in hertz (Hz)

or the following predefined
values:
div { pitch:120Hz; }
Declares the average x-low
pitch
speaking pitch of a voice. low div { pitch:high; }
medium
high
x-high

Number values between 0 div { pitch-range:50; }

and 100 (lower values
Declares a change in the
pitch-range indicate a flat voice while
pitch range of a voice. div { pitch-range:99; }
higher values indicate an
animated voice).
play-during Declares a background URL value, followed by div { play-
sound to be played while one or more of the during:url(music.wav); }
the current element is following keywords,
spoken. separated by spaces:

63
 mix
repeat
div { play-
during:url(music.wav)
Alternatley, one of the repeat; }
following keywords:
div { play-during:none; }
auto
none

Numeric values between 0 div { richness:50; }

and 100 (lower values
Declares the richness of
richness have less richness and
the voice in spoken text. div { richness:0; }
higher values have more
richness).
div { speak:none; }
normal
Declares if/how text is
speak none
spoken. div { speak:spell-out; }
spell-out

th { speak-header:once; }
Declares how often table once
speak-header th { speak-
header cells are spoken. always
header:always; }

div { speak-
numeral:digits; }
Declares how numerals digits
speak-numeral
are spoken. continuous div { speak-
numeral:continuous; }

div { speak-
punctuation:code; }
Declares how punctuation code
speak-punctuation
is spoken. none div { speak-
punctuation:none; }

speech-rate Declares the speech rate A number indicating the div { speech-rate:50; }
of spoken text. number of words per
minute, or one of the div { speech-
following predefined rate:medium; }
values:

x-slow
slow
medium
fast
x-fast

64
 faster
slower

Numeric values between 0 div { stress:50; }

and 100 (lower values
Declares the stress of the
stress have less stress and
voice on spoken text. div { stress:0; }
higher values have more
stress).
Declares the voice family Generic or specific voice
voice-family More Information
of spoken text. family names.
Numbers between 0 and
100, percentages, or one
of the following predefined
values:
div { volume:50; }
Declares the median silent
volume
volume. x-soft div { volume:silent; }
soft
medium
loud
x-loud

65
 Dreamweaver
1. Introduction

Adobe Dreamweaver is an easy to use web development application that covers up the gap
between a developer and a designer. Dreamweaver is a powerful web development tool that helps
you create attractive, dynamic, powerful websites. It includes advanced features to develop
complex data-driven web applications. Dreamweaver’s user friendly interface and extensive library
not only enables even the amateur web designers to create professional websites easily, but helps
one to structure the websites in such a way that they are easy to maintain after being built.

2. Dreamweaver Interface

Dreamweaver has a very easy and user friendly interface that lets the user develop and manage simple as
well as complex websites. The interface features in Dreamweaver allows the user to quickly create web pages
in the WYSIWYG mode. The various elements and assets can be dragged directly into the document from an
easy to use panel. Developers can work directly with the page's code, making use of the various tools
Dreamweaver provides for ensuring correct syntax. Dreamweaver comes with the support to directly import
images created using Fireworks and other graphics applications.

In Windows, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all
windows and panels are integrated into a single larger application window.

The toolbars contain the common commands. Many of these commands are also available in the
Dreamweaver menus. Additional commands are available in the panel groups found on the right side of the
Dreamweaver window; you can expand and collapse these groups as necessary. The Property inspector lets
you examine and edit the most common properties for the currently selected page element, such as text or
an inserted object. We will go through the brief introduction of each of these features.

Insert Bar
You can use the insert bar to create and insert objects such as tables, layers and images. It includes images,
hyperlinks, tables, forms, and multimedia objects. When the mouse is rolled over a button, its tooltip comes
up with the name of the command button. These command buttons are organized into categories. These
categories can be switched on the left side of the bar. In addition to this the categories also appear when the
current document contains server code such as ASP or Coldfusion documents.

66
The various categories that these command buttons are grouped into are

Common - The default category, which contains commands for adding hyperlinks, tables, images,
and multimedia objects.

Layout - It is used for designing the layout of the page, with the help of commands for tables,
layers, and framesets.

Forms - Contains commands for adding form elements to your page.

Text - Contains commands for applying various formatting to the text on your page, as well as for
inserting special characters.

HTML - Lets you select various HTML tags to insert into your page.

Application - Contains commands for adding database elements to your page.

Flash Elements - Lets you insert a Flash movie into your page.

Favorites - Lets you customize your own toolbar by grouping your favorite commands.

To show or hide the Insert toolbar, open the View menu and select Toolbars, and then Insert.

Document Toolbar
The Document Toolbar can be used to toggle between different view modes i.e., Code, Design and
Split View mode. In addition, there are some common commands related to viewing the document
and transferring it between the local and remote sites. There are commands for naming,
previewing, and publishing the current document:

67
Show Code View - displays only the Code view in the Document window.

Show Code and Design Views - displays Code view in part of the Document window and Design
view in another part. When you select this combined view, the option Design View on Top
becomes available in the View Options menu. Use this option to specify which view appears at the
top of your Document window. Code view is updated automatically when you make changes in
Design view. However, after making changes in Code view, you must manually update the
document in Design view by clicking in Design view or pressing F5.

Show Design View - displays only the Design view in the Document window.

Document Title - Lets you specify a title for the page, which appears in the title bar of the
browser's viewer.

No Browser/Check Errors - Provides a menu of options for checking browser compatibility with
the page.

Validate Markup - lets you validate the current document or a selected tag.

File Management - Provides a menu of file management options for the page, including a
command to upload the page to your web server.

Preview/Debug in Browser - Lets you preview the page in the browser you select.

Refresh Design View - Refreshes the appearance of the page in Design view after you've made
changes to it in Code view.

View Options - Lets you specify various settings for the current view.

Visual Aids - lets you use different visual aids to design your pages.

If you don't see the Document toolbar, open the View menu and select Toolbars, and then
Document to show it.

Document Window
The Document window shows the current document in either of the view modes among Design
View, Code View and Split View. The Design View mode is used for visual page layout, visual
editing and rapid application development. In the Design View mode the document is available as
a fully editable visual representation similar to the final output that you would be seeing in the
browser.

68
Code view provides the user with hard-core coding environment for writing and editing HTML and
Javascript code as well as the backend server language code like PHP, coldfusion, ASP etc.

The Split view mode lets the user view both code and design view in the same window.

The title bar displays the title of the page and the file’s path and name. An astrisk is displayed
after the name if any changes have not been saved.

When a Document window is maximized, tabs appear at the top of the Document window area
showing the filenames of all open documents. To switch to a document, click its tab.

Panel Groups
The Dreamweaver Panel Groups are displayed vertically on the right side of the Dreamweaver
window. Panel groups are collection of related panels and commands you will use to design your
pages andbuild and publish your web site.

A Panel group can be collapsed or expanded and docked or undocked along with the other panel
groups. A panel appears as a tab in the panel group when selected.

The commands available in the panel groups are far more extensive than the ones you'll find on
the Insert bar, which contains the most common Dreamweaver commands.

Each panel includes an Options menu in the upper right corner, which contains additional options
for that panel.

69
Code Panel Group

You can use the Code panel group to work with the code in the document like HTML, JavaScript,
and ASP. You can save code snippets using the Snippets panel, which can be reused later. The
Reference panel contains HTML reference library.

Files Panel Group

70
Files and Assets Panels are part of the Files Panel Group. The File panel is used for managing the
website files like downloading and uploading files to and from the web server. This panel can also
be used for defining new websites and to switch among various sites.

Status Bar

The status bar contains addition information about the document. The status bar is located at the
bottom of the document window.

Tag Selector

The tag selector displays the hierarchy of tags surrounding the selection. You can Click any tag in
the hierarchy to select that tag and all its contents. Clicking on the <body> selects the entire
body of the document. Right-click (Windows) or Control-click (Macintosh), select a class or ID
from among the items in the context menu to set the class or id attributes for a tag in the tag
selector.

Hand Tools

The Hand tool is used to drag the document in the document window. Clicking on the Select tool
disables the Hand tool.

Zoom Tool and Set Magnification pop-up Menu

The zoom tool and the Set Magnification pop-up menu let you set a magnification level for your
document. It can be used for checking the pixel accuracy of graphics, to select small items more
easily, design pages with small text, design large pages, and so on.

71
Window Size pop-up Menu

Window size pop-up menu lets you resize the Document window to predetermined or custom
dimensions. This menu is only visible in the Design view mode. The status bar displays the
Document window’s current dimensions (in pixels). In order to design a page that looks its best at
a specific size, you can adjust the Document window to any of the predetermined sizes, edit those
predetermined sizes, or create new sizes.

Document Size and Estimated Download Time

This shows the estimated document size and estimated download time for the page, including all
dependent files such as images and other media files. The size is calculated based on the entire
contents of the page, including all linked objects, such as images and plug-ins. The download time
is estimated based on the connection speed entered in the Status Bar preferences.

In addition to the user interface entities shown in the default UI view, there are more toolbars like
the Coding Toolbar, The Style Rendering toolbar and tools like Reports in dreamweaver.

The Coding Toolbar

The Coding toolbar has buttons are used to perform many standard coding operations, like
highlighting invalid code, collapsing and expanding code selections, editing comments, indenting
code, inserting recently used code snippets etc.

The Coding toolbar is visible only in Code view and appears vertically on the left side of the
Document window.

72
73
 2. Making Websites

Making Website

Creating a Website
The term Web site is a fairly generic one. In general way when you talk about a "web site", you
mean a collection of related, interconnected web pages.

1. The Dreamweaver Files and Assets panels make it easy for you to manage your site files.
Choose Site, then Manage Sites from the drop down menu. This brings up the Manage
Sites dialog box, as shown in given figure. Click new.

74
 2. You are given the choice between setting up a new site or an FTP connection. For our
purpose, just select site. The site definition Wizard appears, as shown in given Figure.
There are two tabs in this dialog box. Select the Advanced tab and enter your own
specifications and make sure the Local info category is selected.

3. Set the Site name as Home and to set the local root folder, click on the browse button to
the right of the Local root folder field. Click the Create New Folder button and call this
folder Home too. Select this folder and click select.

4. To set the default image folder,click on the Browse button and navigate to the the c:\Home
folder you just created. Click the Create new folder button and call the new folder
images.Select that folder and click select.

75
 5. Set the HTTP Address field to http://<your server>/Home. Here your server is the web
address of the web server you are using to test the web site. Enable Cache option checked.
Don't click ok.

6. Chek the Remote info category on the left. From the drop down list called Access. Change
its value from none to local/Networks. To set the Remote Folder field, Use the browse
button to navigate to the folder. Create New folder button to add a folder called Home and
select that folder. Make sure the Refresh remote file list automatically, Maintain
synchronization information and Automatcally upload files to server on save option is
checked. Don't click ok.

76
 7. Click the Testing Server category. Set the Server Model to None. From the Access drop–
down list's value, change None to Local/Network. This time, the Testing server folder and
URL prefix values should automatically be filled as shown in given figure. Make sure that
the Refresh remote file list automaticlly is selected and then click ok. This creates the site
in Dreamweaver. Select Done on the Manage Sites dialog box.

77
 8. Select the Site panel from Files panel group or press F8 to see the site you just created as shown in
given figure below.

Creating a Web Page

Now you have defined a Web site. In fact, Dreamweaver has created a local version and a remote version.
Now create your Web page.
Select File --> New to bring up the New Document dialog box. To create a simple HTML page, Select basic
page in the general tab and then select HTML. Click creates to create the page.

78
Inserting and Formatting Tables
Tables let you precisely control the position of elements in your web pages. To design a page using
a table, you insert the table first, adjusting it as necessary to define the layout of the page. Then
you insert text, images, and other elements into the individual table cells. On the Insert bar, click
the Table button. The Insert Table dialog opens.

Enter the specifications you want in the table and Use the Header section to specify the location of
the header contents in your table. If you think the table looks a little too cramped, you can adjust
its size by clicking on any inner cell-border and drag it to the position you want. You can also
enlarge the whole table by selecting <table> in the tag selector.

How to add Rollover Effect

From the menu bar, Select Insert --> Image Objects --> Rollover Image. This brings up the insert
Rollover Image Dialog box. Enter the values into the fields in this dialog box. Use the Browse buttons
provided to enter the values of the original Image, Rollover Image and when clicked fields.

79
Adding Characters
1. Place the cursor where you want to insert the special character.
2. Open the Insert menu and select HTML, and then Special Characters.
3. From the Special Characters submenu, select Other.
In the Insert Other Character dialog, click the character you want to insert and then click OK

Web Standards in Dreamweaver - Validating the Document

After creating any layout, particularly if you are going to create multiple pages based on the same
layout, it is a good idea to validate it before continuing. Dreamweaver has its own validator to
make this easy. Before using the validator, make sure you checked XHTML 1.0 Transitional to
validate against in Edit -> Preferences -> Validator. To run the validator, open the Results panel
and click the small green arrow shown in Figure.

80
You can also validate your document by selecting File -> Check Page -> Validate Markup (for
HTML) or File -> Check Page -> Validate as XML (for XHTML).

You can choose to validate the current document, the entire site, or just selected files in the site.
The validator preferences can also be set here. The document should validate as XHTML 1.0
Transitional without needing to be edited by hand.
HTML has many different versions, all of which Dreamweaver can validate, but the default settings
may not accomodate the required HTML version. So, we simply need to amend the validator's
settings.

To edit the validator settings, right click in the results panel, and select "Settings"

A new dialog window will open, with a whole range of document standards listed. Don't worry
about what all of these are, just scroll the list for now, unchecking every option that is checked.
When this is done, find "XHTML 1.0 Transitional" and check the box beside it.

Now, back at your page, hit SHIFT + F6 again to re-validate the page.

81
Using the W3C Validator
Although the internal validator is a useful tool when working on your documents within Dreamweaver,
validating at the W3C makes a good final check. The URL for the W3C HTML validator is
http://validator.w3.org.

The W3C tool allows you to validate by entering the URL of the page that requires validation or by uploading
the document. The easiest way to validate your pages is to FTP them to your web site and then enter the
URL into the appropriate box at the validator. If you are using the Dreamweaver validator as you work on
your site, you will probably only need to check with the W3C validator as part of your final testing to ensure
that all documents, including those that contain dynamic data, are valid.

Check for browser compatibility

The Browser Compatibility Check (BCC) feature helps you locate combinations of HTML and CSS that can
trigger browser rendering bugs. This feature also tests the code in your documents for any CSS properties or
values that are unsupported by your target browsers.

 In the Results panel (Window > Results), select the Browser Compatibility Check tab.
 Click the green arrow in the upper-left corner of the Results panel and select Settings.
 Select the checkbox next to each browser you want to check against.
 For each selected browser, select a minimum version to check against from the corresponding pop-up
menu.
For example, to see if CSS rendering bugs might appear in Internet Explorer 5.0 and later and Netscape Navigator 7.0
and later, select the checkboxes next to those browser names, and select 5.0 from the Internet Explorer pop-up menu and
7.0 from the Netscape pop-up menu.

82