DATA WORLD Computer Training Professional Web Design Course

Introduction to Internet & WWW

Internet
World Wide computer network that allows communication and data transfer between people connected to Computers.

Network
Network is a group of interconnected computer that share resources and information.

What is the difference between the World Wide Web and the Internet?
The World Wide Web (The Web) is only a portion of what makes up the internet, but it is the fastest growing part of the
internet. The Web lets people, organizations and companies publish information for other people to see. This makes the Web
a very useful tool for finding information on just about any topic.
The Web is a large number of computer documents or "Web pages" that are stored on computers around the world and are
connected to one another using hyperlinks. These Web pages can be seen by anyone through their computer's "Web
Browser," which is the program you are using now.
A group of Web pages that follow the same theme and are connected together with hyperlinks is called a "Web site." Web
sites and Web pages are written in a coding language that makes it possible to add pictures, sound and interactivity to plain old
text, making people's reading experience more exciting.

Page – 1
DATA WORLD Computer Training Professional Web Design Course

What the Internet is used for most?

Sharing and exchanging information
Personal communication
E-commerce (selling things on a Web sites)
Web addresses
As described earlier the Web is a collection of documents (Web pages) stored on computers around the world. Just like every
house has a postal code, each Web page has an address describing where it can be found. On the Web these addresses are
called URLs. Each URL has several parts which can be demonstrated using the address:
http://www.un,org/aboutun/index.html

http://
This part of the address indicates that it is a Web page. www. This indicates that the Web page you are looking at is part of the
World Wide Web. Many Web sites do not use www but are still part of the Web. google.com This part of the address is the
domain name and indicates the unique address of a Web site. The domain name also often indicates what the site is about, for
example www.Flower.com is a Web site about flowers.
/Services/
The "/" symbol indicates you have moved into a specific directory in the Web sites. Directories are like the folders on your
computer and help to organize Web pages in a Web sites. index.htm A word with ".htm" or "html" following it indicates the
name of the specific page in the Web site you are looking at.
Web browsers
Web browsers are programs used to explore the Internet. There are many Web browser programs available including
Netscape Navigator, Internet Explorer and Opera.

Introduction to HTML

What is an HTML File?

 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor.

Page – 2
DATA WORLD Computer Training Professional Web Design Course

HTML Elements
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.

Page – 3
DATA WORLD Computer Training Professional Web Design Course

HTML Block Level Elements

1. HTML block level elements can appear in the body of an HTML page.
2. It can contain other block level as well as inline elements.
3. By default, block-level elements begin on new lines.
4. block level elements create larger structures (than inline elements).

List of Block Level Elements

p
h1, h2, h3, h4, h5, h6
ol, ul
pre
address
blockquote
dl
div
fieldset
form
hr
noscript
table ,etc

HTML Inline Elements

1. HTML inline level elements can appear in the body of an HTML page.
2. It can contain data and other inline elements.
3. By default, inline elements do not begin on new lines.
4. inline elements create shorter structures (than block level elements).

List Of Inline Elements

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea ,etc

HTML Tags

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Page – 4
DATA WORLD Computer Training Professional Web Design Course

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.

Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag forces a line
break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no end tag like </br>, since a closing tag doesn't make any sense.
<br> or <br />

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You
can use comments to explain your code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

HTML Attributes
Attributes provide additional information to an HTML element.

HTML Tag Attributes

HTML tags can have attributes. Attributes provide additional information to an HTML element.
Attributes always come in name/value pairs like this: name="value".
Attributes are always specified in the start tag of an HTML element.

Attributes Example 1:
<h1> defines the start of a heading.
<h1 align="center"> has additional information about the align.

Page – 5
DATA WORLD Computer Training Professional Web Design Course

Attributes Example 2:
<body> defines the body of an HTML document.
<body bgcolor="yellow"> has additional information about the background color.

Attributes Example 3:
<table> defines an HTML table. (You will learn more about HTML tables later)
<table border="1"> has additional information about the border around the table.

Always Quote Attribute Values

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are
also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:
name='John "ShotGun" Nelson'
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<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

Page – 6
DATA WORLD Computer Training Professional Web Design Course

<tt> Defines teletype text

<var> Defines a variable
<pre> Defines preformatted text

Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.
To display a less than sign (<) in HTML, we have to use a 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;

HTML Backgrounds
A good background can make a Web site look really great.

Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

Page – 7
DATA WORLD Computer Training Professional Web Design Course

Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal
number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background-color to black.

HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light sources.
The table below shows the result of combining Red, Green, and Blue light sources:.
Color Color HEX Color RGB
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Green #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Cyan #00FFFF rgb(0,255,255)
Silver #C0C0C0 rgb(192,192,192)
White #FFFFFF rgb(255,255,255)

W3C Standard Color Names

W3C has listed 16 color names that will validate with an HTML validator.
The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,
and yellow.

Background
The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the
image you want to use.
<body background="clouds.gif">
<body background="http://www.google.com/clouds.gif">

HTML Images
With HTML you can display images in a document.
The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the
URL of the image you want to display on your page. The syntax of defining an image:
<img src="url">

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat">

Page – 8
DATA WORLD Computer Training Professional Web Design Course

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will
then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a
page, to improve the display and usefulness of your document for people who have text-only browsers.
Syntax:
<img src=”url”>
Where src=”url” specifies the location of the graphic
Attributes:
 Align=”value” The align attribute allows you to tell the browser how you want the image
to be alignment options are available.
Bottom Align the image at the bottom of the current line position.
Middle Centers the image in the middle of the current line position
Top Align the image at the top of the current line position
Alt An alternate text message that non-image supporting browsers will display in the place
Height The heigh of the image in pixels or as a percentage of the actual object size
Width The width of the image in pixels or as a percentage of the actual object size
Border The thickness in pixels of the border to be placed around the image. A value of 0 mean

Inserting images, Relative paths

<body> <img src="chef.gif" width=130 height=101> </body>

SRC="chef.gif" means that the image is in the same folder as the

html document calling for it.
SRC="images/chef.gif" means that the image is one folder down
from the html document that called for it. This can go on down as
many layers as necessary.

SRC="../chef.gif" means that the image is in one folder up from

the html document that called for it.

SRC="../../chef.gif" means that the image is two folders up from

the html document that called for it.

SRC="../images/chef.gif" means that the image is one folder up

and then another folder down in the images directory.

SRC="../../../other/images/chef.gif" I'm not even going to try and

put this into words. I hope you

This example demonstrates how you can control the text formatting.
<html>
<body>
<b>This text is bold</b><br><strong>This text is strong</strong><br><big>This text is big</big><br>
<em>This text is emphasized</em><br><i>This text is italic</i><br><small>This text is small</small> <br>This text
contains_subscript<br>This text contains^superscript</body>
</html>

Page – 9
DATA WORLD Computer Training Professional Web Design Course

This example demonstrates how you can control the line breaks and spaces with the pre tag.
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

This example demonstrates how to write an address in an HTML document.

<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
</body>
</html>

This example demonstrates how to handle an abbreviation or an acronym.

<html>
<body>
<abbr title="United Nations">UN</abbr><br>
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or
abbreviation.</p>
</body>
</html>

This example demonstrates how to change the text direction.

<html>
<body>
<p> bi-directional override (bdo), the next line will be written from the right to the left (rtl):</p>
<bdo dir="rtl"> Here is some Heb.rew text </bdo>
</body>
</html>

Page – 10
DATA WORLD Computer Training Professional Web Design Course

This example demonstrates how to handle long and short quotations.

<html>
<body>
Here comes a long quotation:<blockquote>This is a long quotation. This is a long quotation. This is a long quotation. This
is a long quotation.</blockquote>
Here comes a short quotation:<q>This is a short quotation</q><p>With the block quote element, the browser inserts line
breaks and margins, but the q element does not.</p>
</body>
</html>

This example demonstrates how to mark a text that is deleted or inserted to a document.
<html>
<body>
<p> a dozen is <del>twenty</del> <ins>twelve</ins> pieces </p>
</body>
</html>

HTML Lists
HTML supports ordered, unordered and definition lists.
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:
Coffee
Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Here is how it looks in a browser:
1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition
starts with the <dd> tag.

Page – 11
DATA WORLD Computer Training Professional Web Design Course

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

HTML Links
HTML uses a hyperlink to link to another document on the Web.
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the
words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to Google:
<a href="http://www.google.com/">Visit Google!</a>

The Target Attribute

With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
<a href="http://www. google.com/"target="_blank">Visit Google!</a>
This example demonstrates how to create links in an HTML document.
<html>
<body>
<p> <a href="lastpage.htm">This text</a> is a link to a page on this Web site. </p>
<p> <a href="http://www.microsoft.com/"> This text</a> is a link to a page on the World Wide Web. </p>
</body>
</html>

This example demonstrates how to use an image as a link.

<html>
<body>
<p> You can also use an image as a link: <a href="lastpage.htm"><img border="0" src="buttonnext.gif" width="65"
height="38">
</a> </p>
</body>
</html>

Page – 12
DATA WORLD Computer Training Professional Web Design Course

This example demonstrates how to link to another page by opening a new window, so that the visitor does not have to
leave your Web site.
<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p> If you set the target attribute of a link to "_blank",the link will open in a new window. </p>
</body>
</html>

This example demonstrates how to use a link to jump to another part of a document.
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a> </h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p>
</body>
</html>

This example demonstrates a more complicated mailto link.

<html>
<body>
<p>This is a mail link: <a href="mailto:[email protected]?subject=Hello%20again">Send Mail</a> </p>
<p> <b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your
text properly. </p>
</body>
</html>

Simple links, Email links, Image links, More on linking

<body>
Go to <a href="http://www.yahoo.com/">Yahoo!</a><br>
Send me <a href="mailto:[email protected]?subject=Hello">Mail!</A><br>
Go to <a href="http://home.netscape.com/"><img src="chef.gif"width=130 height=101></a><br>
<a href="readme.doc">Download Read Me</a> </body>

Page – 13
DATA WORLD Computer Training Professional Web Design Course

More on images, Image filesizes, Thumbnails, Attribute <ATL>

<center>
<a href="myhome.html">
<img src="myhome.gif" width="66" height="23" border="0" alt="Home">
</a>
<a href="mailto:[email protected]">
<img src="myemail.gif" width="66" height="23" border="0" alt="Email">
</a>
<a href="mylinks.html">
<img SRC="mylinks.gif" width="66" height="23" border="0" alt="Links">
</a>
</center>
Summary
Paragraph Aligning, Bold, Italic and Underlining
<p Align="center"><b><big>Welcome to my home page</big></b></p>
<p Align="left">&nbsp;&nbsp;&nbsp;My name is ----.&nbsp; &nbsp;I’m part (III) student.&nbsp;
&nbsp;
I learn to <i> <b>HTML</b> </i> language.&nbsp;&nbsp;I'm <u> <b> Manufacturing Project </b> </u>
member.</p>
Font size, Font face, Font Color
<p Align="center"><font size="4"><b>Welcome to my home page</b></font></p>
<p Align="left">&nbsp;&nbsp;&nbsp;
My name is ------ .&nbsp; &nbsp; I’m part (X) student. &nbsp; &nbsp;
I learn to<font face="Courier New"><b><i>HTML</i></b></font>language.
I'm <b><u><font color="#000080">Manufacturing Project</font></u></b>member.
</p>

Heading, Style, Bullet and Numbering

<h1>Manufacturing Project</h1>
<p style="color:blue; font-family:'Courier New'; font-size:12pt;
font-weight:bold; font-variant:Small-Caps; text-decoration:underline"> Manufacturing Project </p>
<p>
<ul> <li> Purchase <li> Sale </ul>
<ol> <li> Purchase <li> Sale </ol>
</p>

HTML Frames
With frames, you can display more than one Web page in the same browser window.

Page – 14
DATA WORLD Computer Training Professional Web Design Course

Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is
called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page

The Frameset Tag

The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser
window. The second column is set to 75% of the width of the browser window.
<frameset cols="25%,75%">
<frame src="mypage1.html">
<frame src="mypage2.html">
</frameset>
This example demonstrates how to make a vertical frameset with three different documents.
<html>
<frameset cols="25%,50%,25%">
<frame src="mypage1.html">
<frame src="mypage2.html">
<frame src="mypage3.html">
</frameset>
</html>

This example demonstrates how to make a horizontal frameset with three different documents.
<html>
<frameset rows="25%,50%,25%">
<frame src="mypage1.html">
<frame src="mypage2.html">
<frame src="mypage3.html">
</frameset>
</html>

This example demonstrates how to make a frameset with three documents, and how to mix them in rows and
columns.
<html>
<frameset rows="50%,50%">
<frame src="mypage1.html">
<frameset cols="25%,75%">
<frame src="mypage2.html">
<frame src="mypage3.html">
</frameset>
</frameset>
Page – 15
DATA WORLD Computer Training Professional Web Design Course

</html>

This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders
between the frames and notice that you can not move the borders.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="mypage1.html">
<frameset cols="25%,75%">
<frame noresize="noresize" src="mypage2.html">
<frame noresize="noresize" src="mypage3.html">
</frameset>
</frameset>
</html>

HTML Tables
Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into
data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can
contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Page – 16
DATA WORLD Computer Training Professional Web Design Course

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but
most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2

Page – 17
DATA WORLD Computer Training Professional Web Design Course

row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1

This example demonstrates how to create tables in an HTML document.

<html>
<body>
<p>Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr> <td>100</td> </tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr> <td>100</td> <td>200</td> <td>300</td> </tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr> <td>100</td> <td>200</td> <td>300</td> </tr>
<tr> <td>400</td> <td>500</td> <td>600</td> </tr>
</table>
</body>
</html>

This example demonstrates a table with a caption.

<html>
<body>
<h4>This table has a caption , and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr> <td>100</td> <td>200</td> <td>300</td> </tr>
<tr> <td>400</td> <td>500</td> <td>600</td> </tr>
Page – 18
DATA WORLD Computer Training Professional Web Design Course

</table>
</body>
</html>

This example demonstrates how to define table cells that span more than one row or one column.
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">

<tr> <th>Name</th> <th colspan="2">Telephone</th> </tr>

<tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr>
</table>

This example demonstrates how to use cellpadding to create more white space between the cell content and its
borders.
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
</body>
</html>

This example demonstrates how to add background color or background to a table.

<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="red">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
<h4>A background image:</h4>
<table border="1" background="bgdesert.jpg">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
</body>
</html>
<tr> <td>555 77 855</td> </tr>
</table>

Page – 19
DATA WORLD Computer Training Professional Web Design Course

</body>
</html>

This example demonstrates how to add a background to one or more table cells.
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr> <td bgcolor="red">First</td> <td>Row</td> </tr>
<tr> <td background="bgdesert.jpg">Second</td> <td>Row</td> </tr>
</table>
</body>
</html>

This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking"
table
<html>
<body>
<table width="400" border="1">
<tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right"> February </th>
</tr>
<tr> <td align="left">Clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr>
<tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr>
<tr> <td align="left">Food</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr>
<tr> <th align="left">Sum</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr>
</table>
</body>
</html>

HTML Forms
Form Controls
A Form is made up of fields or control, as well as the markup form and control its presentation. Form controls include text
fields, password fields, multiple-line text fields. Pop-up menus. Scrolled lists, radio buttons, check boxes and button, hidden
from controls are also possible. The most common element used to specify a form control the <input> element. However,
<select>, in conjuction with the <option> element and the <textarea> elements is also common forms.
Text Controls
Text controls are form fileds, generally one line long, that take input like a person’s name. There field specified with the
<input> element, but it is possible to specify a multiple-line text field using the <textarea> element.
Syntax:
<input type=”text” name=”cusname” size=”30” maxlength=”25” value=”Mg Mg”>
<textarea rows=”5” cols=”60” name=”comment”> Text ….. </textarea>
Password Fields
The password style of form control is the same as the simple text entry field, except that the input to the field is not revealed.
In many cases, the browser may render each character as an asterisk or do not avoid people seeing the password being
entered.
Syntax:
<input type=”password” name=”pin” size=”20” maxlength=”16”>

Page – 20
DATA WORLD Computer Training Professional Web Design Course

Pull Down Menu

A pull down menu lets the user select one choice out of many possible choices, To create a pulldown menu, use the <select>
element. The element must include both a start and end tags. It should only contain zero or more occurrences of the
<option> element. The <option> elements specify the actual choice on the menu and generally dop not use a close tag.
Syntax:
<select name=”month”>
<option value=1>Jan</option> <option value=2>Feb</option><option value=12>Dec </option> </select>
Radio Buttons
Radio Button use a similar notation to check boxes, but only one option may be chosen among many.
Example:
<input type=”radio” name=”color” value=”green”>Green
<input type=”radio” name=”color” value=”red” checked=”checked”>Red
<input type=”radio” name=”color” value=”blue”>Blue
Reset and Submit Buttons
The<input> element has two values, Reset and Submit for the type. Common buttons that are useful for just about any form.
Setting the type for the <input> element to RESET creates a button that allows the user to clear or set to define all the form
controls at once, Setting Type attribute for <input> to SUMMIT creates button that toggers the browser to send the contents
of the form to the address specified in the ACTION attribute of the <FORM element.The buttons themselves take two basic
attributes: Value and Name
Example:
<input type=”submit” value=”save” name=”submitbutton”>
<input type=”reset” value=”clear” name=”resetbutton”>
Hidden Text
<input type=”hidden” name=”Cname” value=”forms”>
Image Type
<input type=”image” src=”save.gif” name=”sale” alt=”This is save button”>
Labels
<label disabled=”disabled”> Customer Name.<input type=”text” name=”CName” maxlength=”25”>
</label>
Media Link Element: <MARQUEE>
Internet Explorer, as well as WebTV, support the <marquee> element .The element requites a closing </marquee> tag.
Syntax:
< marquee > Marquee text….</ marquee >
<html>
<head><title>Marquee Test</title></head>
<body>
<div style="background-color: #FF3300">
<marquee>
Welcome To Data World Computer Training
</marquee>
</div>
</body>
</html>

Adding a favicon icon in HTML

A favicon icon is a thumbnail image that is placed along a webpage title in a browser tab. This favicon icon should be in
a .png, .gif or .ico formats. It is recommended to have either a 16 x 16 pixel image or a 32 x 32 pixel image for a favicon
icon.Remember, a favicon icon is also used by the browsers to show their history and bookmarks.

Page – 21
DATA WORLD Computer Training Professional Web Design Course

To add a favicon icon to a webpage in HTML you must use the <link> element,
<head>
<title>BricksofWeb - Train of codes</title>
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
If you are using XHTML doctype then you must end the code with a /, as below
<head>
<title>BricksofWeb - Train of codes</title>
<link rel="icon" type="image/ico" href="favicon.ico" />
</head>
Let us briefly look what are rel, type and href attributes in a <link> element.
A rel attribute tells the <link> element, that a favicon icon is gonna be added to a webpage by the value icon.
The type attribute denotes the media type which is gonna be added here. If the media type is .png, .gif or .ico you must use,
image/png, image/gif and image/ico values respectively to the type attribute.
And at last the href attribute tells the address(URL) of the image stored in a web server.

Meta Element
< meta name="Title" content="Page Title Here">
< meta name ="keywords" content ="webdesign,tutorials,learning,computer">
< meta name ="copyright" content ="Copyright 2013">
< meta name ="description" content ="Web Design Specialist,Matthew Osbrne is 14yr Developer">

Layout With Table Element

<html>
<body bgcolor="green">
<center>
<table width="1100px" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;"><h1>Main Title of Web Page</h1></td>
</tr>

Page – 22
DATA WORLD Computer Training Professional Web Design Course

<tr bgcolor="#FFFF00">
<td colspan="2">
<center>
<a href="home.htm">Home</a> |<a href="products.htm">Products</a> |<a href="services.htm"> Services </a> |<a
href="about.htm">About Us</a> |<a href="about.htm">About Us</a> |<a href="contact.htm"> Contact </a> </td>
</center>
</tr>
<tr valign="top" align="center">
<td style="background-color:#FFD700;width:50px;">
<br /> <a href="home.htm">Home</a> <br /> <a href="products.htm">Products</a> <br /> <a href= "services.htm">
Services</a> <br /> <a href="about.htm">About Us</a><br /><a href="contact.htm"> Contact </a> <br /> </td>
<td style="background-color:#eeeeee;height:500px;width:600px;text-align:top;">Content goes here </td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500; text-align:center;">Copyright © mmdataprovider.com</td>
</tr>
</table>
</center>
</body>
</html>

Layout With Div Element

<html>
<body bgcolor="green">
<center>
<div style="width:1100px">
<div style="background-color:#FFA500; width:1100px; height:50px">Main Title of Web Page</div>
<div style="height:20px; background-color: #CCFFCC">
<a href="home.htm">Home</a> |<a href="products.htm">Products</a> |<a href="services.htm">Services </a> |<a
href="about.htm">About Us</a> |<a href="contact.htm">Contact</a> </div>
<div style="background-color:#CCFFFF;height:600px;width:100px;float: left">
<br /> <a href="home.htm"> Home</a><br /> <a href="products.htm">Products</a><br />
<a href="services.htm">Services</a><br /> <a href="about.htm">About Us</a><br />
<a href="contact.htm">Contact</a><br /></div>
<div id="content" style="background-color:#EEEEEE;height:600px;width:1000px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright ©mmdataprovider.com </div>
</div>
</center>
</body>
</html>

Page – 23
DATA WORLD Computer Training Professional Web Design Course

What is CSS?
∙ CSS stands for Cascading Style Sheets
∙ Styles define how to display HTML elements
∙ Styles were added to HTML to solve a problem
∙ External Style Sheets can save a lot of work
∙ External Style Sheets are stored in CSS files

What is a Style Sheet?

A Style sheet is template that controls the following of HTML tags on your Web pages.
A Style sheet is a series of style rules that can be linked to elements in a html document.

CSS Syntax
The CSS syntax is made up of three parts: a selector, a property and a value.
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each
property can take a value. The property and value are separated by a colon and surrounded by curly braces.
Example:

p {font-family: "arial"}

selector property value

Note: If you wish to specify more than one property, you should separate each property with a semi-colon.

Grouping
You can group selectors. Separate each selector with a comma.
Example: p, input {font-size:12pt}
CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p{
color:red;text-align:center;
}

CSS Comments
A CSS comment begins with /* and ends with */" like this:

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
#para{
text-align:center;
color:red;
}
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used
Page – 24
DATA WORLD Computer Training Professional Web Design Course

on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
.center {
text-align:center;
}
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
p.center {
text-align:center;
}
Do NOT start a class name with a number! This is only supported in Internet Explorer.
Class Selector
With the class selector you can define different styles for the same type of HTML element.
Example:
.text {color:'green'; font-size:'10pt'; font-face:'courier new'}
.button { color:blue; width:100px}
Input.text {color:'green'; font-size:'10pt'; font-face:'courier new'}
Input.button { color:blue; width:100px}

Type Of Style Sheet

∙ Inline Style
∙ Embedded Style Sheet ( Internal Style Sheets )
∙ External Style Sheet
Inline Style
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section
of an HTML page, by using the <style> tag, like this:
<html>
<head>
<title> CSS PAGE </title>
<style type="text/css">
.headlines, .sublines, .infotext {font-face: arial; font-weight: bold;}
.headlines {font-size:14pt; color:blue;}
.sublines { font-size:12pt; color:green;}
.infotext {font-size:10pt;}
table {border-right:1px #999999 solid; border-top:#999999 1px solid;
border-left:#999999 1px solid; border-bottom:#999999 1px solid;
background-color:#dfece3}
hr {color:blue; width:100%}
Input.text {font-size:10pt; font-face:courier new;}
Input.button{color:blue; width:100px;}
</style>
</head>
<body>
Page – 25
DATA WORLD Computer Training Professional Web Design Course

<span class="headlines"> Welcome </span><br><br>

<div class="sublines">
This is an example page using CSS. <br>
You can change formatting of HTML document with CSS.
</div><br>
<table>
<tr>
<td class="sublines">As you can see: <br>The styles even work on tables.</td>
</tr>
</table>
<br><hr>
<div class="infotext">Data World Computer Training..</div><hr>
<input name=txtid type=textbox class=text value="Web Design">
<input name=butoK type=button class=button value=" Ok">
</body>
</html>
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look
of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes
inside the head section:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be
saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is:
margin-left:20px.

CSS Background Properties

CSS background properties are used to define the background effects of an element.
Property Description Values
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
background-image Sets an image as the background url(URL)
none
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
background-attachment Sets whether a background image is fixed or scrolls scroll
with the rest of the page fixed
background-position Sets the starting position of a background image top left
top center
top right
Page – 26
DATA WORLD Computer Training Professional Web Design Course

center left
center center
center right
bottom left
bottom center
bottom right
x% y%
x pos y pos
Background A shorthand property for setting all background background-color
properties in one declaration background-image
background-repeat
background-attachment
background-position

Background Color
The background-color property specifies the background color of an element.The background color of a page is defined in the
body selector:
body {background-color:#b0c4de;}
h1, p, and div elements have different background colors.

Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
body {background-image:url('paper.gif');}

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.Some images should be repeated
only horizontally or vertically, or they will look strange, like this:
body{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Background Image - Attachment

How to specify a fixed background-image:
body{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

Background Image - Set position and no-repeat

Showing the image only once is specified by the background-repeat property:
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
Page – 27
DATA WORLD Computer Training Professional Web Design Course

background-position:right top;
}

Background - Shorthand property

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

CSS Background Properties Examples:

<html>
<head>
<style type="text/css">
body{
background-color:#d0e4fe;
}
h1{
color:orange;
text-align:center;
}
p{
font-family:Times New Roman;
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>

<html>
<head>
<style type="text/css">
body{
background-color: #6495ed;
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

For Shorten Code

Page – 28
DATA WORLD Computer Training Professional Web Design Course

body{
background:#6495ed url('img_tree.png') no-repeat right top;
}
</style>
</head>
<body>
<p>Background no-repeat, set postion example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
……copy & pase for many paragraphs……..
</body>
</html>

CSS Text & Font Properties

Text & font properties in CSS. Text and font properties in the Cascading Style Sheets serve to set the appearance of
individual characters in a word or line of text.
CSS Text Properties

Property Description Values

Color Sets the color of a text color
letter-spacing Increase or decrease the space between characters normal
length
line-height Sets the distance between lines normal
number
length
%
text-align Aligns the text in an element left
right
center
justify

Page – 29
DATA WORLD Computer Training Professional Web Design Course

text-decoration Adds decoration to text none

underline
overline
line-through
blink
text-indent Indents the first line of text in an element length
%
text-transform Controls the letters in an element none
capitalize
uppercase
lowercase
white-space Sets how white space inside an element is handled normal
pre
nowrap
word-spacing Increase or decrease the space between words normal
length
CSS Text Properties Examples
<html><!--Color -- >
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in body .</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

Try it to complete test..

<style type="text/css">><!—letter-spacing -- >
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>

<style type="text/css">><!—line-height -- >

p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
<html>><!—text-align -- >
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Page – 30
DATA WORLD Computer Training Professional Web Design Course

</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my
mind ever since. 'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body>
</html>

<html><!—text-decoration -- >
<head>
<style type="text/css">
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.google.com">google.com</a></p>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>

<html><!—text-indentation -- >
<head>
<style type="text/css">
p {text-indent:100px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages
that you've had.'</p>
</body>
</html>
<html><!—text-transform -- >
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}

Page – 31
DATA WORLD Computer Training Professional Web Design Course

p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

Try White-space & Word-spacing Properties

CSS Font Properties

Property Description Values

font-family A prioritized list of font family names and/ family-name
or generic family names for an element generic-family

font-size Sets the size of a font xx-small,x-small,small,

medium,
large,
x-large,xx-large,smaller,larger
length,%
font-size-adjust Specifies an aspect value for an element that none
will preserve the x-height of the first-choice number
font
font-stretch Condenses or expands the current font-family Normal,wider,narrower
ultra-condensed,extra-condensed,
condensed
semi-condensed,
semi-expanded,
expanded,
extra-expanded,ultra-expanded
font-style Sets the style of the font normal
italic
oblique
font-variant Displays text in a small-caps font or a normal
normal font small-caps
font-weight Sets the weight of a font normal
bold
bolder
lighter
100 to 900
Font A shorthand property for setting all of font-style
the properties for a font in one declaration font-variant
font-weight
font-size/line-height
font-family
Page – 32
DATA WORLD Computer Training Professional Web Design Course

caption
icon
menu
message-box
small-caption
status-bar

CSS Font Properties Examples

Generic Family - a group of font families with a similar look (like "Serif" or "Monospace")
Font Family - a specific font family (like "Times New Roman" or "Arial")
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first
font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no
other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family:"Times New
Roman".
More than one font family is specified in a comma-separated list:like this
p{font-family:"Times New Roman", Times, serif;} <!—font-family -- >
<style type="text/css"><!—font-size -- >
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
<!—Try larger,smaller,…..-->
</style>
<style type="text/css">font-size-adjust (not support for all browser)-->
div{
font-size-adjust: 0.58;
}
</style>
The font-stretch property allows you to make text wider or narrower.
Value Description
wider Makes the text wider
narrower Makes the text narrower
ultra-condensed Makes the text as narrow as it gets
extra-condensed Makes the text narrower than condensed, but not as narrow as ultra-condensed
condensed Makes the text narrower than semi-condensed, but not as narrow as extra-condensed
semi-condensed Makes the text narrower than normal, but not as narrow as condensed
normal Default value. No font stretching
semi-expanded Makes the text wider than normal, but not as wide as expanded
expanded Makes the text wider than semi-expanded, but not as wide as extra-expanded
extra-expanded Makes the text wider than expanded, but not as wide as ultra-expanded
ultra-expanded Makes the text as wide as it gets
inherit Inherits the font stretching from parent elements

Try Font-Style! Try Font-Variant! Try Font-Weight!

Page – 33
DATA WORLD Computer Training Professional Web Design Course

CSS Padding Properties

The CSS padding properties define the space between the element border and the element content. Negative values are not
allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand
padding property is also created to control multiple sides at once.

Property Description Values

padding-top Sets the top padding of an element length

%
padding-right Sets the right padding of an element length
%
padding-bottom Sets the bottom padding of an element length
%
padding-left Sets the left padding of an element length
%
padding A shorthand property for setting all of the padding-top
padding properties in one declaration padding-right
padding-bottom
padding-left

CSS Border Properties

The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create
borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to
any element.
Property Description Values
border-top A shorthand property for setting all of the properties border-top-width
for the top border in one declaration border-style
border-color
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border thin, medium, thick, length
border-left A shorthand property for setting all of the properties border-left-width
for the left border in one declaration border-style
border-color
border-left-color Sets the color of the left border border-color
border-left-style Sets the style of the left border border-style
border-left-width Sets the width of the left border thin, medium, thick, length
border-bottom A shorthand property for setting all of the properties border-bottom-width
for the bottom border in one declaration border-style
border-color
border-bottom-color Sets the color of the bottom border border-color
border-bottom-style Sets the style of the bottom border border-style
border-bottom-width Sets the width of the bottom border thin
medium
thick
length

Page – 34
DATA WORLD Computer Training Professional Web Design Course

border-color Sets the color of the four borders, can have from one color
to four colors
border-right A shorthand property for setting all of the properties border-right-width
for the right border in one declaration border-style
border-color
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style
border-right-width Sets the width of the right border thin
medium
thick
length
border-style Sets the style of the four borders, can have from one None,hidden,dotted,
to four styles dashed,solid,double,
groove,ridge,inset
outset
border-width A shorthand property for setting the width of the thin, medium, thick, length
four borders in one declaration, can have from one to
four values
Border A shorthand property for setting all of the properties border-width
for the four borders in one declaration border-style
border-color

CSS Margin Propeties

The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The
top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can
also be used to change all of the margins at once.

Property Description Values

margin-top Sets the top margin of an element auto

length
%
margin-right Sets the right margin of an element auto
length
%
margin-bottom Sets the bottom margin of an element auto
length
%
margin-left Sets the left margin of an element auto
length
%
margin A shorthand property for setting the margin properties in margin-top
one declaration margin-right
margin-bottom
margin-left

Page – 35
DATA WORLD Computer Training Professional Web Design Course

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and
the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.The image below
illustrates the box model:

Margin - Clears an area around the border. The margin does not have a background color, it is completely
transparent
Border - A border that goes around the padding and content. The border is affected by the background color of the
box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear.
To calculate the full size of an element, you must also add the padding, borders and margins.
The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin.

Measurement Values
Unit Description
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font.
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)

Page – 36
DATA WORLD Computer Training Professional Web Design Course

px pixels (a dot on the computer screen)

Shorthand property sets all the padding,border and margin properties in one declaration. This property can have from one to
four values.
padding:10px 5px 15px 20px;
o top padding is 10px
o right padding is 5px
o bottom padding is 15px
o left padding is 20px
padding:10px 5px 15px;
o top padding is 10px
o right and left padding are 5px
o bottom padding is 15px
padding:10px 5px;
o top and bottom padding are 10px
o right and left padding are 5px
padding:10px;
o all four paddings are 10px

The border-style property can have from one to four values.

border-style:dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
border-style:dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double

border-style:dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
border-style:dotted;
o all four borders are dotted
border:5px solid red;

The margin property can have from one to four values.

margin:25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
margin:25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
margin:25px 50px;
o top and bottom margins are 25px
Page – 37
DATA WORLD Computer Training Professional Web Design Course

o right and left margins are 50px

margin:25px;
o all four margins are 25px

CSS Positioning Properties

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows
you to set the shape of an element, place an element behind another, and to specify what should happen when an element's
content is too big to fit in a specified area.
Property Description Values
position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed
bottom Sets how far the bottom edge of an element is above/below the auto
bottom edge of the parent element %
length
Clip Sets the shape of an element. The element is clipped into this shape
shape, and displayed auto
Left Sets how far the left edge of an element is to the right/left of the auto
left edge of the parent element %
length
overflow Sets what happens if the content of an element overflow its area visible
hidden
scroll
auto
Right Sets how far the right edge of an element is to the left/right of the auto
right edge of the parent element %
length
Top Sets how far the top edge of an element is above/below the top edge auto
of the parent element %
length
vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Sets the stack order of an element auto
number

Page – 38
DATA WORLD Computer Training Professional Web Design Course

CSS Positioning Properties Examples

Static positioning
Static positioning is the default setting of elements. As already mentioned this means that the block-level elements will
appear top down in the order that we wrote the code in the html page.
The code below with static (=default) positioning of three Div’s
1 <div>Div A</div>
2 <div>Div B</div>
3 <div>Div C</div>
would show on a screen as:

Relative positioning
Relative positioning is setting the position of the element relative to its own position. If we change the position of Div B to a
relative position like this:
1 #B {
2 position: relative;
3 left: 150px; top: 120px;}
This would result in a rendering on screen like this:

Div B has changed position 150px to the right and 120px downwards relative to its original position.
The use of relative positioning becomes more important when combined with absolute positioning.

Absolute positioning
Absolute positioning means setting the position of an element relative to its container or parent element. In the case of our
Div’s A, B and C the container is the body. So let’s see what the position of Div B becomes if we change our code to:
1 #B {
2 position: absolute;
3 left: 150px; top: 120px;}
We see below that Div B is now positioned 150px to the right of the left body edge and 120px downwards from the top
body edge.

Page – 39
DATA WORLD Computer Training Professional Web Design Course

Fixed positioning
Fixed positioning differs from the other three. With fixed positioning the element is positioned relative to the browser
window. We have now added div D with a fixed position:
1 #D {
2 position: fixed;
3 bottom: 0px;}

Bottom Property
img
{
position:absolute;
bottom:5px;
}

Left or Right or Top Property

img
{
position:absolute;
left:5px;
(OR)
Right:5px;
(OR)
Top:5px;
}

Clip Property
div#myBox
{
position:absolute;
background-color:yellow;
width:100px;
clip:rect(10px,50px,50px,10px);
}

OverFlow Property
The overflow property specifies what to do if the content of an element exceeds the size of the element's box.
<html>
<head>
<style>

Page – 40
DATA WORLD Computer Training Professional Web Design Course

div.scroll{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden {
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value
is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value
is visible.</div>
</body>
</html>

Try Vertical-Align Property

Value Description
baseline Align the baseline of the element with the baseline of the parent element. This is default
sub Aligns the element as it was subscript
super Aligns the element as it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font (Use Image)
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font (Use Image)
length Raises or lower an element by the specified length. Negative values are allowed

% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed

ZIndex Property
The zIndex property sets or returns the stack order of a positioned element.
<html>
<head>
<style>
img{
position:absolute;
left:0px;
Page – 41
DATA WORLD Computer Training Professional Web Design Course

top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

CSS float Property

The CSS float property is used to float elements to a specific side.
Example:
<style type="text/css">
.columnLayout {
float: left;
background: #BFFFFF;
border: #00D2D2 1px solid;
padding: 12px;
width: 120px;
height: 240px;
margin: 5px;
}
</style>
<div class="columnLayout">div content ...</div>
<div class="columnLayout">div content ...</div>
<div class="columnLayout">div content ...</div>

Example:
<style type="text/css">
#div1 {
float: left;
background: #BFFFFF;
border: #00D2D2 1px solid;
padding: 12px;
width: 120px;
height: 60px;
}
#div2 {
float: right;
background: #FFD9F8;
border: #F0F 1px solid;
padding: 12px;
width: 120px;
height: 60px;
}

Page – 42
DATA WORLD Computer Training Professional Web Design Course

</style>
<div id="div1">div content ...</div>
<div id="div2">div content ...</div>

CSS Clear Property

The CSS clear property is used to clear space for an element that has preceding elements that are using the float property.
Example:
<style type="text/css">
#div1 {
float: left;
background: #F0F;
width: 240px;
height: 100px;
}
#div2 {
clear: left;
background: #0FF;
width: 260px;
height: 120px;
}
</style>
<div id="div1">div content ...</div>
<div id="div2">div content ...</div>
Possible Values:
left
Element will clear the left space of a preceding floating element.
right
Element will clear the right space of a preceding floating element.
both
Element will clear the space on both sides of a preceding floating element.
none
Element will not clear the space of a preceding floating element.

CSS Display Property

The CSS display property is used to alter the default display behavior of elements.
Example;
<style type="text/css">
.myDivs {
display: inline;
background: #BFFFFF;
border: #00D2D2 1px solid;
padding: 12px; }
</style>
<div class="myDivs">div content ...</div>
<div class="myDivs">div ...</div>
<div class="myDivs">div co ...</div>
Possible Values: block •• inline •• none..

Page – 43
DATA WORLD Computer Training Professional Web Design Course

CSS List Style Type Property

The CSS list-style-type property is used to specify the default marker display of list elements.
Example:
<style type="text/css">
#list1 { list-style-type: decimal-leading-zero; }
#list2 { list-style-type: upper-roman; }
#list3 { list-style-type: circle; }
#list4 { list-style-type: square; }
#list5 { list-style-type: none; }
</style>
<ol>
<li>list item</li>
<li>list item</li>
</ol>
<ol id="list1">
<li>list item</li>
<li>list item</li>
</ol>
<ol id="list2">
<li>list item</li>
<li>list item</li>
</ol>
<ol id="list3">
<li>list item</li>
<li>list item</li>
</ol>
<ol id="list4">
<li>list item</li>
<li>list item</li>
</ol>
<ol id="list5">
<li>list item</li>
<li>list item</li>
</ol>

CSS List-Style-Image Property

Example:
<style type="text/css">
.myList {
list-style-image: url(images/smallGradCap.png);
}
</style>
<ul class="myList">
<li>My list item</li>
<li>Another list item</li>
<li>Final list item</li>
</ul>

Page – 44
DATA WORLD Computer Training Professional Web Design Course

The example above does not display equally in all browsers. IE and Opera will display the image-marker a
little bit higher than Firefox, Chrome, and Safari.
Crossbrowser Solution
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image: url(images/smallGradCap.png);
background-repeat:no-repeat;
background-position:0px5px;
padding-left:14px;
}

CSS Border-Collapse Property

The CSS border-collapse property is used to separate or collapse borders on HTML tables or inline table elements.
Example:
<style type="text/css">
#table1 {
border: purple 3px solid;
border-collapse: collapse;
}
#table2 {
border: green 3px solid;
border-collapse: separated;
}
#table1 td { border: purple 1px dashed; padding:12px; }
#table2 td { border: green 1px dashed; padding:12px; }
</style>
<table id="table1">
<tr>
<td>Cell data</td>
<td>Cell data</td>
</tr>
<tr>
<td>Cell data</td>
<td>Cell data</td>
</tr>
</table>
<hr />
<table id="table2">
<tr>
<td>Cell data</td>
<td>Cell data</td>
</tr>

Page – 45
DATA WORLD Computer Training Professional Web Design Course

<tr>
<td>Cell data</td>
<td>Cell data</td>
</tr>
</table>

CSS Cursor Property

The CSS cursor property is used to change the cursor style when it is over selected elements.
Example;
<style type="text/css">
#div1 { cursor: move; }
#div2 { cursor: help; }
#div3 { cursor: pointer; }
#div1, #div2, #div3 {
background: #9CF8F8;
padding: 12px;
margin: 12px;
}
</style>
<div id="div1">div content ...</div>
<div id="div2">div content ...</div>
<div id="div3">div content ...</div>

How To Write Selector In CSS

Type Selector

Group Selector

CSS descendant Combinator

Example:
<style type="text/css">
div p span {
color:#F00;
}
</style>

Page – 46
DATA WORLD Computer Training Professional Web Design Course

<div>
<h3>Some Stuff</h3>
<p>Stuff inside my paragraph...<span>red text</span></p>
</div>

Class Selector
- All Elements Class Selection
- Element Type Class Selection

ID Selector

First-Line Pseudo-Element Selector

first-line pseudo-element selector is used to target the first line within elements.
Example:
<style type="text/css">
p:first-line {
color:#F00;
}
ul:first-line {
color:#F00;
}
</style>
<p>My paragraph content...<br /> keeps going...<br />and going...</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
This can also be written as a grouped rule to produce the same style for both elements.
<style type="text/css">
p:first-line, ul:first-line {
color:#F00;
}
</style>
<p>My paragraph content...<br /> keeps going...<br />and going...</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

First-Letter Pseudo-Element Selector

first-letter pseudo-element selector is used to target and style the first letter within elements.
Example:
<style type="text/css">
p:first-letter {
font-family: "Times New Roman", Times, serif;
font-size: 24px;

Page – 47
DATA WORLD Computer Training Professional Web Design Course

color: #09C;
}
</style>
<p>Once upon a time on a website...</p>
<p>Later that same afternoon a great big...</p>

Active , Hover , Link , Visited Selectors

Example:
<html>
<head>
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#0000FF;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#1E90FF;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>

Example:
<html>
<head>
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}

Page – 48
DATA WORLD Computer Training Professional Web Design Course

a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>

Universal Selector
Example:
* {color:#F00;}
Example:
#div2 * {
color:#F0F;
font-weight:bold;
}

Child Combinator
Example:
<style type="text/css">
div > .p1 {
border-bottom: #09F 1px dashed;
}
</style>
<div>
<h3>Some Content</h3>
<p class="p1">Content inside my paragraph...</p>
<p class="p1">Content inside my paragraph...</p>
</div>
<div>
<h3>More Content</h3>
<p class="p1">Content inside my paragraph...</p>
<p>Content inside my paragraph...</p>
</div>

Adjacent Sibling Combinator

Example:
<style type="text/css">
h3 + p {
font-family:"Comic Sans MS", cursive;

Page – 49
DATA WORLD Computer Training Professional Web Design Course

text-decoration:underline;
}
</style>
<h3>Some Stuff</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<h3>More Stuff</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>

( After , Before , Content ) Pseudo-Element Selector

Example:After & Content
<style type="text/css">
h3:after {
content: " is love";
}
</style>
<h3>Joy</h3>
<h3>Fun</h3>
<h3>Respect</h3>

Example:Before & Content

<style type="text/css">
p:before {
content: "String ... ";
}
</style>
<p>paragraph content</p>
<p>paragraph content</p>
<p>paragraph content</p>
<p>paragraph content</p>

Example:Before , After & Content

<style type="text/css">
.myClass:before {
content: url(smallGradCap.png) " My ";
}
.myClass:after {
content: "'s " attr(title) " section";
}
</style>
<h3 class="myClass" title="cool">content</h3>
<h3 class="myClass" title="sweet">content</h3>
<h3 class="myClass" title="lucious">content</h3>

Page – 50
DATA WORLD Computer Training Professional Web Design Course

First-Child Selector
first-chil structural pseudo-class selector is used to target and style the first child of its parent element.
Example:
<style type="text/css">
div:first-child {
color:#F0F;
font-weight:bold;
}
</style>
<div>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>
<div>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>

Example:
<style type="text/css">
div p:first-child {
color:#F0F;
font-weight:bold;
}
</style>
<div>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>
<div>
<p>Paragraph content...</p>
<p>Paragraph content...</p>
</div>

Attribute Selector
Example:
<style type="text/css">
p[title] { color:#F0F; font-weight:bold; }
div[lang] { color:#090; font-weight:bold; }
</style>
<p title="My Title">content...</p>
<p id="p1">content...</p>
<div lang="en">content...</div>

Nesting Selectors
Example:
<html>
<head>

Page – 51
DATA WORLD Computer Training Professional Web Design Course

<style type="text/css">
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>
<body>
<p>This is a blue, center-aligned paragraph.</p>
<div class="marked">
<p>This p element should not be blue.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>

Navigation Bar
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;

Page – 52
DATA WORLD Computer Training Professional Web Design Course

text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Image Glary
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;

Page – 53
DATA WORLD Computer Training Professional Web Design Course

}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

Pure CSS Drop Down Menu

Example:
<html>
<head>
<title>Pure CSS Drop Down Menu 1</title>
<style type="text/css">
#myMenu {
height:20px;
border:#999 1px dashed;
width: 500px;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
}
#myMenu div {
float:left;
margin-right: 20px;
}

Page – 54
DATA WORLD Computer Training Professional Web Design Course

#myMenu div ul {
display: none;
position: absolute;
list-style-type:none;
background-color: #999;
border: #666;
top: 85px;
padding: 0px;
}
#myMenu div:hover ul {
display: block;
font-size:12px;
}
#myMenu div ul li a {
display: block;
width: 120px;
background: #F0F0F0;
margin: 1px;
padding: 4px;
text-decoration: none;
color:#000;
}
#myMenu div ul li a:hover {
background: #FFEFB7;
color:#960;
}
</style>
</head>
<body>
<h1>My Web Document</h1>
<div id="myMenu">
<div>
<a href="#">Home</a>
</div>
<div>
<a href="#">Services</a>
<ul>
<li><a href="#">Face Punching</a></li>
<li><a href="#">Teeth Kicking</a></li>
<li><a href="#">Butt Munching</a></li>
</ul>
</div>
<div>
<a href="#">Locations</a>
<ul>
<li><a href="#">New York</a></li>
<li><a href="#">Chicago</a></li>
</ul>

Page – 55
DATA WORLD Computer Training Professional Web Design Course

</div>
</div>
<p>And here my document content continues down the page ...</p>
</body>
</html>

Example:
<html>
<head>
<title>CSS Drop-Down Menu</title>
<style>
.nav,.sub {
font-family:Arial, Helvetica, sans-serif;
list-style:none;
margin:0;
padding:0;
}
.nav li {
background:#32CD32;
height:30px;
line-height:30px;
text-align:center;
width:150px;
}
.nav li a {
display:block;
text-decoration:none;
color:#FFFFFF;
}
.nav li a:hover {
background:#2E8B57;
}
.nav > li {
border-right:1px solid #FFFFFF;
float:left;
}
.sub {
display:none;
}
.nav > li:hover .sub {
display:block;
}
.sub li {
border-top:1px solid #FFFFFF;
}
</style>
</head>
<body>

Page – 56
DATA WORLD Computer Training Professional Web Design Course

<div id="mainmenu">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Services</a>
<ul class="sub">
<li><a href="#">Training</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Soft Development</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul class="sub">
<li><a href="#">CMS Software</a></li>
<li><a href="#">SMS Software</a></li>
<li><a href="#">RMS Software</a></li>
<li><a href="#">IAS Software</a></li>
<li><a href="#">HSMS Software</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Introduction to JavaScript

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and
much more.
JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer,
Mozilla , Firefox, Netscape, and Opera.
What is JavaScript?
JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
A JavaScript consists of lines of executable computer code
A JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
Everyone can use JavaScript without purchasing a license

JavaScript How To ...

The HTML <script> tag is used to insert a JavaScript into an HTML page.
How to Put a JavaScript Into an HTML Page
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
Page – 57
DATA WORLD Computer Training Professional Web Design Course

</script>
</body>
</html>

The code above will produce this output on an HTML page:

Hello World!
The word document.write is a standard JavaScript command for writing output to a page.
HTML Comments to Handle Simple Browsers
<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>
JavaScript Where To Put JavaScript
JavaScripts in the body section will be executed WHILE the page loads.
JavaScripts in the head section will be executed when CALLED.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>

<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
Using an External JavaScript
Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every
page.
To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script> tag!
To use the external script, point to the .js file in the "src" attribute of the <script> tag:

Page – 58
DATA WORLD Computer Training Professional Web Design Course

<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
JavaScript Statements
JavaScript is a sequence of statements to be executed by the browser.
JavaScript Statements
A JavaScript statements is a command to the browser. The purpose of the command is to tell the browser what to do.
Note: Using semicolons makes it possible to write multiple statements on one line.

How to Define a Function

The syntax for creating a function is:
function functionname(var1,var2,...,varX)
{
some code
}
var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of the function.
Note: A function with no parameters must include the parentheses () after the function name:

function functionname()
{
some code
}
Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in lowercase letters,
otherwise a JavaScript error occurs! Also note that you must call a function with the exact same capitals as in the function
name.
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>

<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
Page – 59
DATA WORLD Computer Training Professional Web Design Course

document.write("Oops! The original text disappeared!");

}
</script>
</body>
</html>

JavaScript Comments
Comments can be added to explain the JavaScript, or to make it more readable.
Single line comments start with //.
JavaScript Multi-Line Comments
Multi line comments start with /* and end with */.
JavaScript Variables
Variables are "containers" for storing information: x=5; length=66.10;
NOTE: Because JavaScript is case-sensitive, variable names are case-sensitive.
Declaring (Creating) JavaScript Variables
Creating variables in JavaScript is most often referred to as "declaring" variables.
You can declare JavaScript variables with the var statement:
var x;
var carname;
After the declaration shown above, the variables has no values, but you can assign values to the variables while you declare
them:
var x=5;
var carname="Volvo";
Note: When you assign a text value to a variable, you use quotes around the value.
<html>
<body>
<p>Click the button to create a variable, and display the result.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>
</body>
</html>

JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables:
y=x-5;
z=y+5;
JavaScript Operators
The operator = is used to assign values.
The operator + is used to add values.

Page – 60
DATA WORLD Computer Training Professional Web Design Course

The assignment operator = is used to assign values to JavaScript variables.

The arithmetic operator + is used to add values together.
y=5;
z=2;
x=y+z;
The value of x, after the execution of the statements above is 7.

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:
Operator Description Example Result
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4

<html>
<body>
<p>Given that y=5, calculate x=y+2, and display the result.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
var y=5;
var x=y+2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</body>
</html>

JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript variables. Given that x=10 and y=5,
Operator Example Same As Result
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
Page – 61
DATA WORLD Computer Training Professional Web Design Course

The + Operator Used on Strings

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
After the execution of the statements above, the variable txt3 contains:
"What a very nice day"

Adding Strings and Numbers

Look at these examples:
x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);
JavaScript Comparison and Logical Operators
Comparison and Logical operators are used to test for true or false.

Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x=5, the table below explains the comparison operators:
Operator Description Example
== is equal to x==8 is false
=== is exactly equal to (value and type) x==5istrue
x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true
How Can it be Used
Comparison operators can be used in conditional statements to compare values and take action depending on the result:
if (age<18) document.write("Too young");
Logical Operators
Logical operators are used in determine the logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators:
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false

Page – 62
DATA WORLD Computer Training Professional Web Design Course

! not !(x==y) is true

Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax
variablename=(condition)?value1:value2

<html>
<body>
<p>Click the button to check the age.</p>
Age:<input id="age" value="18" />
<p>Old enough to vote?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
var age,voteable;
age=document.getElementById("age").value;
voteable=(age<18)?"Too young":"Old enough";
document.getElementById("demo").innerHTML=voteable;
}
</script>
</body>
</html>

Conditional Statements
Very often when you write code, you want to perform different actions for different decisions. You can use conditional
statements in your code to do this.In JavaScript we have the following conditional statements:

if statement - use this statement if you want to execute some code only if a specified condition is true
if...else statement - use this statement if you want to execute some code if the condition is true and another code if
the condition is false
if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed
switch statement - use this statement if you want to select one of many blocks of code to be executed

If Statement
Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!
<script type="text/javascript">
//Write a "Good morning" greeting if //the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>

Page – 63
DATA WORLD Computer Training Professional Web Design Course

<script type="text/javascript">
//Write "Lunch-time!" if the time is 11
var d=new Date();
var time=d.getHours();
if (time==11)
{
document.write("<b>Lunch-time!</b>");
}
</script>

If...else Statement
<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>

If...else if...else Statement

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>

Page – 64
DATA WORLD Computer Training Professional Web Design Course

JavaScript Switch Statement

<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
JavaScript Popup Boxes
Alert Box
Syntax:
alert("sometext");

Confirm Box
Syntax:
confirm("sometext");

Prompt Box
Syntax:
prompt("sometext","defaultvalue");

The return Statement

The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
Example
The function below should return the product of two numbers (a and b):
function prod(a,b)
{
x=a*b;
return x;
}
When you call the function above, you must pass along two parameters:

Page – 65
DATA WORLD Computer Training Professional Web Design Course

product=prod(2,3);
The returned value from the prod() function is 6, and it will be stored in the variable called product.
<html>
<body>
<p>This example calls a function which perfoms a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>

Example:Popup Boxes and Function

<html>
<head>
<script type="text/javascript">
function myFunctionAlert()
{
alert("I am an alert box!");
}
function myFunctionComfirm()
{
var r=confirm("Press a button");var x;
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
document.getElementById("demo").innerHTML=x;
}
function myFunctionPrompt()
{
var name=prompt("Please enter your name","Harry Potter");var x;
if (name!=null && name!="")
{
x="Hello " + name + "! How are you today?";
}
document.getElementById("demo").innerHTML=x;
</script>
</head>

Page – 66
DATA WORLD Computer Training Professional Web Design Course

<body>
<p id="demo"></p>
<input type="button" onclick="myFunctionAlert()" value="Show alert box" />
<input type="button" onclick="myFunctionComfirm()" value="Show comfirm box" />
<input type="button" onclick="myFunctionPrompt()" value="Show prompt box" />
</body>
</html>

The for Loop

The for loop is used when you know in advance how many times the script should run.
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

The while loop

The while loop is used when you want the loop to execute and continue executing while the specified condition is true.
while (var<=endvalue)
{
code to be executed
}
Note: The <= could be any comparing statement.

The do...while Loop

The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will
repeat the loop as long as the specified condition is true. This loop will always be executed at least once, even if the
condition is false, because the code is executed before the condition is tested.
do
{
code to be executed
}
while (var<=endvalue);

<html>
<body>
<p>Click the button to loop through a block of as long as <em>i</em> is less than 5.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="",i=0;
do
{
x=x + "The number is " + i + "<br />";
i++;
}

Page – 67
DATA WORLD Computer Training Professional Web Design Course

while (i<5)
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin()
{
document.getElementById("ex1").style.margin="100px";
}
function changePadding()
{
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br />
<button type="button" onclick="changeMargin()">Change margin of the div element</button>
<br />
<br />
<div id="ex2">This is some text.</div>
<br />
<button type="button" onclick="changePadding()">Change padding of the div element</button>
</body>
</html>

Examples:
<script>
function A()
{document.bgColor="Maroon";}
function B()
{document.fgColor="Teal";}
function C()
{document.title="hello";}
</script>
-----------------------------------------------------------------------
Page – 68
DATA WORLD Computer Training Professional Web Design Course

<script>
var d=new Date();
var myday=d.getDay();
var mymonth=d.getMonth();
switch(myday)
{
case 0:document.write("today is sunday<br>");break;
case 1:document.write("today is monday<br>");break;
case 2:document.write("today is tuesday<br>");break;
case 3:document.write("today is wedanday<br>");break;
case 4:document.write("today is thurday<br>");break;
case 5:document.write("today is friday<br>");break;
case 6:document.write("today is sataday<br>");break;
}
switch(mymonth)
{
case 0:document.write("month is january<br>");break;
case 1:document.write("month is february<br>");break;
case 2:document.write("month is march<br>");break;
case 3:document.write("month is april<br>");break;
case 4:document.write("month is may<br>");break;

case 5:document.write("month is june<br>");break;

case 7:document.write("month is augest<br>");break;
case 8:document.write("month is setember<br>");break;
case 10:document.write("month is outober<br>");break;
case 11:document.write("month is decenber<br>");break;
}
document.write("Date is "+d.getDate()+"<br>");
document.write("Day is "+d.getDay()+"<br>");
document.write("month is "+d.getMonth()+"<br>");
document.write("year is "+d.getYear()+"<br>");
document.write("hour is "+d.getHours()+"<br>");
document.write("minutes is "+d.getMinutes()+"<br>");
document.write("second is "+d.getSeconds()+"<br>");
</script>
<script>
function a(r)
{document.bgColor=r;}
</script>
</head>
<body><h1 >multiple backgtound</h1>
<table border=0 width=150 cellspacing= 5 align=center height=100>
<tr>
<td bgcolor=teal onClick="a('teal')"></td>
<td bgcolor=pink onClick="a('pink')"></td>
<td bgcolor=Navy onClick="a('navy')"></td></tr>
<tr><td bgcolor=Aqua onClick="a('aqua')"></td>

Page – 69
DATA WORLD Computer Training Professional Web Design Course

<td bgcolor=lime onClick="a( 'lime')"></td>

<td bgcolor=Olive onClick="a('olive')"></td></tr>
</table>
-----------------------------------------------------------------------------------------
<html>
<head>
<script>
function A()
{open("color.html","mywin","width=200,heght=300");
}
</script>
</head>
<body onLoad="A()">
<h1>text at the status bar</h1>
</body>
</html>
------------------------------------------------------------------------------------------
<html>
<head>
<script>
function A()
{document.pic.src=document.f1.choice.options[document.f1.choice.selectedIndex].value;}
</script>
</head>
<body>
<img src=images/cake.gif name=pic>
<form name=f1>
<select name=choice onChange="A()">
<option value="images/cake.gif ">Cake</option>
<option value="images/fries.gif">fries</option>
<option value="images/pie.gif">pie</option>
<option value="images/pizza.gif">pizza</option>
</select>

</form>
</body>
</html>
------------------------------------------------------------------------------------------
<html>
<head>
<script>
var str="This is a String";
document.write(str.length+"<br>");
document.write(str.bold()+"<br>");
document.write(str.italics()+"<br>");
document.write(str.sup()+"<br>");
document.write(str.sub()+"<br>");
document.write(str.toUpperCase()+"<br>");

Page – 70
DATA WORLD Computer Training Professional Web Design Course

document.write(str.toLowerCase()+"<br>");
document.write(str.fontcolor("red")+"<br>");
document.write(str.fontcolor("green").fontsize("16")+"<br>");
document.write(str.charAt(15).toUpperCase().fontcolor("blue")+"<>");
document.write(str.substr(0,4).toUpperCase()+"<br>");
</script>
</head>
<body>
<h1 align= center>String Object Testing</h1>
</body>
</html>
--------------------------------------------------------------------------------------
<html>
<head>
<script>
function A()
{
document.pic.src="images/dog2.jpg";
}
function B()
{document.pic.src="images/dog1.jpg";}
</script>
<body>
<img src=images\dog1.jpg onMouseOver="A()" onMouseOut="B()" name=pic>
</body>
</html>

Page – 71