0% found this document useful (0 votes)

14 views

HTML CSS JS NOTES by ASHOK PATE

Uploaded by

Shrushti Kumatkar

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

14 views

HTML CSS JS NOTES by ASHOK PATE

Uploaded by

Shrushti Kumatkar

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 107

freelance_Project available to buy contact on 8007592194

SR.NOProject NAME Technology

1 Online E-Learning Platform Hub React+Springboot+MySql

94
2 PG Mates / RoomSharing / Flat Mates React+Springboot+MySql

21
3 Tour and Travel management System React+Springboot+MySql

4 Election commition of India (online Voting System) React+Springboot+MySql

59
5 HomeRental Booking System React+Springboot+MySql

07
6 Event Management System React+Springboot+MySql

7 Hotel Management System React+Springboot+MySql

80
8 Agriculture web Project React+Springboot+MySql
9 AirLine Reservation System / Flight booking System React+Springboot+MySql

.in
10 E-commerce web Project React+Springboot+MySql

ys
11 Hospital Management System React+Springboot+MySql

ra
12 E-RTO Driving licence portal React+Springboot+MySql
13 Transpotation Services portal

ar
React+Springboot+MySql
14 Courier Services Portal / Courier Management System React+Springboot+MySql

ith
15 Online Food Delivery Portal React+Springboot+MySql

w
16 Muncipal Corporation Management React+Springboot+MySql
17 Gym Management System de React+Springboot+MySql
co
18 Bike/Car ental System Portal React+Springboot+MySql
19 CharityDonation web project React+Springboot+MySql
20 Movie Booking System React+Springboot+MySql
freelance_Project available to buy contact on 8007592194
21 Job Portal web project React+Springboot+MySql
22 LIC Insurance Portal React+Springboot+MySql
23 Employee Management System React+Springboot+MySql

94
24 Payroll Management System React+Springboot+MySql
25 RealEstate Property Project React+Springboot+MySql

21
26 Marriage Hall Booking Project React+Springboot+MySql
27 Online Student Management portal React+Springboot+MySql

59
28 Resturant management System React+Springboot+MySql
29 Solar Management Project React+Springboot+MySql

07
30 OneStepService LinkLabourContractor React+Springboot+MySql
31 Vehical Service Center Portal React+Springboot+MySql

80
32 E-wallet Banking Project React+Springboot+MySql
33 Blogg Application Project React+Springboot+MySql
34 Car Parking booking Project React+Springboot+MySql

.in
35 OLA Cab Booking Portal React+Springboot+MySql
36 Society management Portal React+Springboot+MySql

ys
37 E-College Portal React+Springboot+MySql
38 FoodWaste Management Donate System React+Springboot+MySql

ra
39 Sports Ground Booking React+Springboot+MySql

ar
40 BloodBank mangement System React+Springboot+MySql
41 Bus Tickit Booking Project React+Springboot+MySql

ith
42 Fruite Delivery Project React+Springboot+MySql
43 Woodworks Bed Shop React+Springboot+MySql

w
44 Online Dairy Product sell Project React+Springboot+MySql
45
46
Online E-Pharma medicine sell Project
FarmerMarketplace Web Project
de
React+Springboot+MySql
React+Springboot+MySql
co
47 Online Cloth Store Project React+Springboot+MySql
48 React+Springboot+MySql
49 React+Springboot+MySql
50 React+Springboot+MySql
https://www.youtube.com/@codewitharrays

94
https://www.instagram.com/codewitharrays/

21
59
07
https://t.me/codewitharrays Group Link: https://t.me/cceesept2023

80
.in
+91 8007592194 +91 9284926333

ys
ra
ar
ith
[email protected]

w
de
co
https://codewitharrays.in/project
HTML
------------------------------------------------------------------------------------------------------------

94
21
59
07
80
Hyper Text Markup Language .in
ys

(HTML)
ra
ar
ith
w
de
co

INDEX

Topics Page No

1. What is HTML and why is it used? 3

2. Basic HTML Page Structure 3

94
3. HTML Head Section
3.1. Meta 4

21
3.2. Doctype 5
3.3. Link 6

59
4. HTML Paragraph 7

07
5. HTML Hyperlinks 10

80
6. HTML Images 11

7. HTML Tables 15
7.1. Cellpadding
7.2. Cellspacing
.in 20
21
ys
8. Special Characters 22
ra

9. Ordered and Unordered Lists 23

10. HTML Forms 24

ith

11. HTML Input Fields

11.1. Textbox 24
11.2. Radio Button 25
de

11.3. Checkboxes 25
11.4. Password 26
co

11.5. Combo Box 27

11.6. Textarea 28

What is HTML?

HTML is a language for describing web pages.

94
● HTML stands for Hyper Text Markup Language

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

59
BASIC HTML Page Structure

07
<html>

80
<head>
<title>Page Title</title>
</head>
<body>
<p>
Page Content
.in
</p>
ys
</body>
</html>
ra

HTML Head
ar

The Head Element

ith

The head element contains general information, also called

meta-information, about a document. Meta means "information about".

You can say that meta-data means information about data, or

meta-information means information about information.
co

Information Inside the Head Element

The elements inside the head element should not be displayed by a

browser.

According to the HTML standard, only a few tags are legal inside the head
section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>.

Look at the following illegal construct:

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<head>
<p>This is some text</p>
</head>
In this case the browser has two options:

● Display the text because it is inside a paragraph element

● Hide the text because it is inside a head element

If you put an HTML element like <h1> or <p> inside a head element like
this, most browsers will display it, even if it is illegal.

94
Should browsers forgive you for errors like this? We don't think so.
Others do.

21
Head Tags
Tag Description

59
<head> Defines information about the document
<title> Defines the document title

07
s<link> Defines a resource reference
<meta> Defines meta information

80
Tag Description
<!DOCTYPE> Defines the document type. This tag goes before the <html> start tag.

HTML Meta .in

ys
The head element contains general information (meta-information) about a
document.
ra

HTML also includes a meta element that goes inside the head element. The
ar

purpose of the meta element is to provide meta-information about the

document.
ith

Most often the meta element is used to provide information that is

relevant to browsers or search engines like describing the content of

your document.
de

Keywords for Search Engines

Some search engines on the WWW will use the name and content attributes
of the meta tag to index your pages.

This meta element defines a description of your page:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML,

and XHTML" />
This meta element defines keywords for your page:

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript"
/>
The intention of the name and content attributes is to describe the
content of a page.

HTML <!DOCTYPE> Declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

94
<title>Title of the document</title>
</head>
<body>

21
The content of the document......
</body>

59
</html>

Definition and Usage

07
The doctype declaration should be the very first thing in an HTML document, before the <html>

80
tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what
version of the markup language the page is written in.

.in
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules
for the markup language, so that the browsers can render the content correctly.
ys
ra

Doctypes Available in the W3C Recommendations

HTML 4.01 Strict

ith

This DTD contains all HTML elements and attributes, but does not include presentational or
deprecated elements (like font). Framesets are not allowed.
w

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, including presentational and deprecated
elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does not include presentational or
deprecated elements (like font). Framesets are not allowed. The markup must also be written as
well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

94
This DTD contains all HTML elements and attributes, including presentational and deprecated
elements (like font). Framesets are not allowed. The markup must also be written as well-formed

21
XML.

59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

07
XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 .in

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide
ys
ruby support for East-Asian languages).
ra

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ar

HTML <link> tag

ith

The <link> tag defines the relationship between a document and an

external resource.
de

The <link> tag is most used to link to style sheets.

HTML <title> tag

Definition and Usage

The <title> tag defines the title of the document.

The title element is required in all HTML/XHTML documents.

The title element:

● defines a title in the browser toolbar

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
● provides a title for the page when it is added to favorites
● displays a title for the page in search-engine results

HTML Tags

HTML markup tags are usually called HTML tags

● HTML tags are keywords surrounded by angle brackets like

<html>
● HTML tags normally come in pairs like <b> and </b>
● The first tag in a pair is the start tag, the second tag

94
is the end tag
● Start and end tags are also called opening tags and closing

21
tags.

59
HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or

07
the .html extension.

80
HTML Headings

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

Example:
.in
ys
<h1>This is a heading</h1>
ra

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

HTML Paragraphs
ith

HTML paragraphs are defined with the <p> tag.

w
de

Example:
co

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

HTML Links

HTML links are defined with the <a> tag.

Example:

HTML Images

HTML images are defined with the <img> tag.

Example:

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

94
HTML Comments

21
Comments can be inserted in the HTML code to make it more
readable and understandable. Comments are ignored by the

59
browser and are not displayed.

Comments are written like this:

07
Example:-

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

HTML Tip - How to View HTML Source .in

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

To find out, click the VIEW option in your browser's

toolbar and select SOURCE or PAGE SOURCE. This will open a

window that shows you the HTML code of the page.
ith

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line)
de

without starting a new paragraph:

Example:-

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

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

tag.

<br> or <br />

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
In XHTML, XML, and future versions of HTML, HTML elements with no
end tag (closing tag) are not allowed.

Even if <br> works in all browsers, writing <br /> instead

is more future proof.

HTML Text Formatting

This text is bold

This text is big

94
This text is italic

21
This is computer output
This is subscript
and superscript

59
HTML Formatting Tags

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

80
These HTML tags are called formatting tags.

Text Formatting Tags .in

ys
Tag Description
<b> Defines bold text
ra

<big> Defines big text

<em> Defines emphasized text
ar

<i> Defines italic text

ith

<small> Defines small text

<strong> Defines strong text
w

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text
co

<del> Defines deleted text

<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead

HTML Links

Hyperlinks, Anchors, and Links

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
In web terms, a hyperlink is a reference (an address) to a
resource on the web.

Hyperlinks can point to any resource on the web: an HTML

page, an image, a sound file, a movie, etc.

An anchor is a term used to define a hyperlink destination

inside a document.

The HTML anchor element <a> is used to define both

94
hyperlinks and anchors.

21
We will use the term HTML link when the <a> element points
to a resource, and the term HTML anchor when the <a>

59
elements defines an address inside a document..

An HTML Link

07
Link syntax:

80
<a href="url">Link text</a>
The start tag contains attributes about the link.

The element content (Link text) defines the part to be

.in
ys
displayed.
ra

Note: The element content doesn't have to be text. You can

link from an image or any other HTML element.
ar

The href Attribute

ith

The href attribute defines the link "address".

w
de

This <a> element defines a link to Infinitech:

<a href="http://www.infinitech.in/">Visit Infinitech Web

Site!</a>
The target Attribute

The target attribute defines where the linked document will

be opened.

The code below will open the document in a new browser

window:

<a href="http://www.infinitech.in/"
target="_blank">Visit Infinitech Website!</a>

The name Attribute

When the name attribute is used, the <a> element defines a

named anchor inside a HTML document.

94
Named anchor are not displayed in any special way. They are
invisible to the reader.

21
Named anchor syntax:

59
<a name="label">Any content</a>
The link syntax to a named anchor:

07
<a href="#label">Any content</a>

80
The # in the href attribute defines a link to a named
anchor.

Example: .in
ys
A named anchor inside an HTML document:
ra

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

A link to the Useful Tips Section from the same document:
ar

<a href="#tips">
ith

Jump to the Useful Tips Section</a>

A link to the Useful Tips Section from another document:
w
de

<a href="http://www.infinitech.in/html_tutorial.htm#tips">
Jump to the Useful Tips Section</a>
co

HTML IMAGES :

Inserting Images:

<p>
An image:
<img src="constr4.gif"

<p>
A moving image:
<img src="hackanm.gif"
width="48" height="48">
</p>

<p>
Note that the syntax of inserting a moving image is no different from
that of a non-moving image.

94
</p>

21
</body>
</html>

59
Insert Images From Different Locations:

<html>

07
<body>

80
<p>An image from SMGSM:</p>
<img src="http://smgsm.com/images/logo.jpg">

</body>
</html> .in
The Image Tag and the Src Attribute
ys

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

ra
ar

The <img> tag is empty, which means that it contains

attributes only and it has no closing tag.
ith

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
de

your page.
co

The syntax of defining an image:

<img src="url" />

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

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
The browser puts the image where the image tag occurs in
the document. If you put an image tag between two
paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.

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:

94
<img src="boat.gif" alt="Big Boat" />

21
The "alt" attribute tells the reader what he or she is
missing on a page if the browser can't load images. The

59
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

07
usefulness of your document for people who have text-only
browsers.

80
Basic Notes - Useful Tips
If an HTML file contains ten images - eleven files are
.in
required to display the page right. Loading images take
ys
time, so my best advice is: Use images carefully.
ra

Background Images:
ar

<html>
ith

<body background="background.jpg">
<h3>Look: A background image!</h3>
<p>If the image is smaller than the page, the image will repeat
w

itself.</p>
</body>
de

</html>
co

Alignment of Image:

<p>
An image
<img src="hackanm.gif"
align="bottom" width="48" height="48">
in the text
</p>

<p>
An image
<img src ="hackanm.gif"
align="middle" width="48" height="48">
in the text
</p>

<p>
An image
<img src ="hackanm.gif"
align="top" width="48" height="48">

94
in the text
</p>

21
<p>Note that bottom alignment is the default alignment</p>

59
<p>
An image
<img src ="hackanm.gif"

07
width="48" height="48">
in the text

80
</p>

<p>
<img src ="hackanm.gif"
width="48" height="48">
An image before the text
.in
</p>
ys
<p>
ra

An image after the text

<img src ="hackanm.gif"
ar

width="48" height="48">
</p>
ith

</body>
</html>
w

Image Float , Size, Hyperlink of Image and ALT tag:

<html>
co

<body>

<p>
<img src ="hackanm.gif"
align ="left" width="48" height="48" alt=”An Image”>
A paragraph with an image. The align attribute of the image is set to
"left". The image will float to the left of this text.
</p>

<p>
<img src ="hackanm.gif"

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
align ="right" width="58" height="58" alt=”An Image”>
A paragraph with an image. The align attribute of the image is set to
"right". The image will float to the right of this text.
</p>

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

94
</body>
</html>

21
Note: You can make a picture larger or smaller changing the values in the
"height" and "width" attributes of the img tag.

59
ALT Tag: The "alt" attribute tells the reader what he or she is missing
on a page if the browser can't load images. It is a good practice to

07
include the "alt" attribute for each image on a page.

80
HTML TABLES

Table and Border:

Tables are defined with the <table> tag. A table is divided into rows
.in
(with the <tr> tag), and each row is divided into data cells (with the
ys
<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,
ra

forms, horizontal rules, tables, etc.

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

you want the borders to show.

To display a table with borders, you will have to use the

border attribute:
de

<html>
co

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

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

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

21
<table border="8">
<tr>
<td>100</td>

59
<td>200</td>
<td>300</td>
</tr>

07
<tr>
<td>400</td>

80
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
.in
</html>
ys

Headings in a Table
ra
ar

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

ith

<table border="1">
<tr>
w

<th>Heading</th>
<th>Another Heading</th>
de

</tr>
<tr>
co

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

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

94
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>

21
</tr>
<tr>

59
<td>row 2, cell 1</td>
<td></td>

07
</tr>
</table>

80
How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1
Note that the borders around the empty table cell are
.in
ys
missing (NB! Mozilla Firefox displays the border).
ra

To avoid this, add a non-breaking space ( ) to empty

data cells, to make the borders visible:
ar

<table border="1">
ith

<tr>
<td>row 1, cell 1</td>
w

<td>row 1, cell 2</td>

</tr>
<tr>
<td>row 2, cell 1</td>
co

<td> </td>
</tr>
</table>
How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1
Basic Notes - Useful Tips

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad
browser support. Expect this to change in future versions of XHTML.

Table with no border

Make border = “0”

Headings in a table

94
<h4>Table headers:</h4>

21
<table border="1">
<tr>
<th>Name</th>

59
</tr>
<tr>

07
<td>Bill Gates</td>
</tr>
</table>

80
</body>
</html>

Empty cells .in

ys
To avoid empty cells insert   in a cell
ra

Table with a caption

<html>
<body>
ith

<table border="6">
<caption>My Caption</caption>
w

<tr>
<td>100</td>
de

<td>200</td>
<td>300</td>
</tr>
co

Output:

Table cells that span more than one row/column

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

21
<td>Bill Gates</td>
<td>555 77 854</td>

59
<td>555 77 855</td>
</tr>
</table>

07
Output:

80
Name Telephone
Bill Gates 555 77 854 555 77 855

<table border="1">
<tr>
.in
ys
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
ra

<tr>
<th rowspan="2">Telephone:</th>
ar

<td>555 77 854</td>
</tr>
ith

<tr>
<td>555 77 855</td>
w

</tr>
</table>
de

First Name: Bill Gates

555 77 854
Telephone:
555 77 855

Tags inside a table

<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

94
</td>
</tr>

21
<tr>
<td>This cell contains a list
<ul>

59
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>

07
</ul>
</td>

80
<td>HELLO</td>
</tr>
</table>

Cell padding .in

ys
<table border="1">
<tr>
<td>First</td>
ra

<td>Row</td>
</tr>
ar

<tr>
<td>Second</td>
ith

<td>Row</td>
</tr>
w

</table>
de

<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
co

<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

Without cellpadding:
First Row
Second Row

With cellpadding:
First Row

Second Row

94
21
Cell spacing

59
<h4>Without cellspacing:</h4>
<table border="1">

07
<tr>
<td>First</td>
<td>Row</td>

80
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
.in
ys
<h4>With cellspacing:</h4>
ra

<table border="1"
cellspacing="10">
<tr>
ar

<td>First</td>
<td>Row</td>
ith

</tr>
<tr>
w

<td>Second</td>
<td>Row</td>
de

</tr>
</table>
co

Without cellspacing:
First Row
Second Row

With cellspacing:
First Row
Second Row

<h4>A background color:</h4>

<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>

94
<td>Row</td>
</tr>
</table>

21
<h4>A background image:</h4>
<table border="1"
background="bgdesert.jpg">

59
<tr>
<td>First</td>

07
<td>Row</td>
</tr>
<tr>

80
<td>Second</td>
<td>Row</td>
</tr>
</table>

A background color:
.in
ys
First Row
Second Row
ra
ar

Add a background color or a background image to a table

cell
ith

<table border="1">
w

<tr>
<td bgcolor="red">First</td>
de

<td>Row</td>
</tr>
<tr>
co

<td
background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>

Cell backgrounds:
First Row
Second Row
------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------

Special Characters
Code Symbol Description
™ ™ Trademark
& & Ampersand
® ® Registered trademark
© © Copyright

94
&dagger; † Dagger
» » Right pointing double angle

21
quotation mark
« « Left pointing double angle

59
quotation mark
 — Em-dash

07
° 30° Degree

80
¼ ¼ Quarter
½ ½ Half
¾
·
¾
·
Three quarters
Middle dot
.in
ys
¡ ¡ Inverted exclamation mark
ra

Ordered and Unordered List in HTML

Unordered Lists
ith

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

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:

● Coffee

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

94
marked with numbers.

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

59
<ol>
<li>Coffee</li>

07
<li>Milk</li>
</ol>

80
Here is how it looks in a browser:

1. Coffee
2. Milk .in
ys
Inside a list item you can put paragraphs, line breaks,
images, links, other lists, etc.
ra

HTML Code for Forms and Input Fields

Forms
ith
w

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter

information (like text fields, textarea fields, drop-down
co

menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

<form>
.
input elements
.
</form>

Input
The most used form tag is the <input> tag. The type of
input is specified with the type attribute. The most
commonly used input types are explained below.

Text Fields

Text fields are used when you want the user to type

94
letters, numbers, etc. in a form.

<form>

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

59
<br />
Last name:

07
<input type="text" name="lastname" />
</form>

80
How it looks in a browser:

First name: .in

ys
Last name:
ra

Note that the form itself is not visible. Also note that in
ar

most browsers, the width of the text field is 20 characters

by default.
ith

Radio Buttons
w
de

Radio Buttons are used when you want the user to select one
of a limited number of choices.
co

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
How it looks in a browser:

Male
Female

Note that only one option can be chosen.

Checkboxes

Checkboxes are used when you want the user to select one or

94
more options of a limited number of choices.

21
<form>
I have a bike:

59
<input type="checkbox" name="vehicle" value="Bike" />
<br />

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

80
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
How it looks in a browser:
.in
ys
ra

I have a bike:
ar

I have a car:
I have an airplane:
ith
w
de

The Form's Action Attribute and the

Submit Button
co

When the user clicks on the "Submit" button, the content of

the form is sent to the server. The form's action attribute
defines the name of the file to send the content to. The
file defined in the action attribute usually does something
with the received input.

<form name="input" action="html_form_submit.asp"

method="get">

------------------------------------------------------------------------------------------------------------
HTML
------------------------------------------------------------------------------------------------------------
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Input Type Password in HTML

Note that when you type characters in a password field, the

browser displays asterisks or bullets instead of the
characters.

94
Example:

21
<html>

<body>

59
<form action="">

07
Username:

80
<input type="text" name="user">

<br>

Password:
.in
ys
<input type="password" name="password">
ra

</form>
ar

</body>
ith

</html>
w

Output:
de
co

Simple Dropdown List in HTML

Example:

</select>

</form>

94
</body>

21
</html>

59
Output:

07
80
Note : If in option tag selected =”selected” is specified then specific
value will be selected by default.

Example: .in
ys
<option value="fiat" selected="selected">Fiat</option>
ra

Output:
ar
ith

Textarea in HTML
w

Example:
de

<textarea rows=”10” cols=”5”>

Welcome to our Website

</textarea>

Output:

94
21
59
07
80
.in
ys
ra
ar
ith
w
de
co

94
21
59
07
80
Cascading Style Sheet .in
ys

(CSS)
ra
ar
ith
w
de
co

INDEX

Topics Page No

1. What is CSS and why is it used? 3

2. CSS Syntax 4

94
3. CSS Grouping 5

21
4. CSS Selector 5

59
5. Comments 6

07
6. CSS Types 7

7. CSS Background 9

80
8. CSS Text 11

9. CSS Font .in 17

ys
10. CSS Units 21

11. CSS Tables 21

ra
ar

12. CSS Image Opacity 24

ith

13. CSS Invisible Tags 26

14. CSS Horizontal Menu 26

15. CSS Margin 28

16. CSS Border 29

17. CSS Padding 34

18. CSS Pseudo Classes 35

19. CSS Pseudo Elements 37

What is CSS?

● CSS stands for Cascading Style Sheets

94
● Styles define how to display HTML elements
● Styles are normally stored in Style Sheets

21
● Styles were added to HTML 4.0 to solve a problem
● External Style Sheets can save a lot of work

59
● External Style Sheets are stored in CSS files
● Multiple style definitions will cascade into one

07
Why Css?

80
The original HTML was never intended to contain tags for formatting a
document. HTML tags were intended to define the content of a document,
like:

<p>This is a paragraph.</p>
.in
ys
<h1>This is a heading</h1>
ra

When tags like <font> and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
ar

large web sites where fonts and color information had to be added to
every single Web page, became a long, expensive and unduly painful
ith

process.
w

To solve this problem, the World Wide Web Consortium (W3C) - responsible
for standardizing HTML - created CSS in addition to HTML 4.0.
de

With HTML 4.0, all formatting can be removed from the HTML document and
stored in a separate CSS file.
co

All browsers support CSS today.

CSS save a lot of work

Styles sheets define HOW HTML elements are to be displayed.

------------------------------------------------------------------------------------------------------------
CSS
------------------------------------------------------------------------------------------------------------
Styles are normally saved in external .css files. External style sheets
enable you to change the appearance and layout of all the pages in a Web
site, just by editing one single CSS document!

CSS types and priority

Style sheets allow style information to be specified in many ways.

Styles can be specified:

● inside an HTML element

94
● inside the head section of an HTML page
● in an external CSS file

21
Tip: Even multiple external style sheets can be referenced inside a
single HTML document.

59
Cascading order - What style will be used when there is more than one

07
style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a

80
new "virtual" style sheet by the following rules, where number four has
the highest priority:

1. Browser default .in

2. External style sheet
3. Internal style sheet (in the head section)
ys
4. Inline style (inside an HTML element)
ra

So, an inline style (inside an HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag,
ar

or in an external style sheet, or in a browser (a default value).

ith

If the link to the external style sheet is placed after the internal
style sheet in HTML <head>, the external style sheet will override the
internal style sheet!
w
de

CSS syntax
co

The CSS syntax is made up of three parts: a selector, a property and a

value:

selector {property: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:

body {color:black}

p {font-family:"sans serif"}
Note: If you want to specify more than one property, you must separate
each property with a semicolon. The example below shows how to define a
center aligned paragraph, with a red text color:

p {text-align:center;color:red}
To make the style definitions more readable, you can describe one
property on each line, like this:

94
p
{
text-align:center;

21
color:black;
font-family:arial
}

59
Grouping

07
You can group selectors. Separate each selector with a comma. In the
example below we have grouped all the header elements. All header

80
elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color:green
}
.in
The class Selector
ys

With the class selector you can define different styles for the same type
ra

of HTML element.
ar

Say that you would like to have two types of paragraphs in your document:
one right-aligned paragraph, and one center-aligned paragraph. Here is
ith

how you can do it with styles:

p.right {text-align:right}
p.center {text-align:center}
de

You have to use the class attribute in your HTML document:

<p class="right">This paragraph will be right-aligned.</p>

<p class="center">This paragraph will be center-aligned.</p>
Note: To apply more than one class per given element, the syntax is:

<p class="center bold">This is a paragraph.</p>

The paragraph above will be styled by the class "center" AND the class
"bold".

You can also omit the tag name in the selector to define a style that
will be used by all HTML elements that have a certain class. In the

.center {text-align:center}
In the code below both the h1 element and the p element have
class="center". This means that both elements will follow the rules in
the ".center" selector:

<h1 class="center">This heading will be center-aligned</h1>

<p class="center">This paragraph will also be center-aligned.</p>
Do NOT start a class name with a number! It will not work in

94
Mozilla/Firefox.

Add Styles to Elements with Particular Attributes

21
You can also apply styles to HTML elements with particular attributes.

59
The style rule below will match all input elements that have a type
attribute with a value of "text":

07
input[type="text"] {background-color:blue}

80
The id Selector

You can also define styles for HTML elements with the id selector. The id
selector is defined as #. .in
The style rule below will match the element that has an id attribute with
ys
a value of "green":
ra

#green {color:green}
The style rule below will match the p element that has an id with a value
ar

of "para1":
ith

p#para1
{
text-align:center;
w

color:red
de

}
Do NOT start an ID name with a number! It will not work in
Mozilla/Firefox.
co

CSS Comments

Comments are used to explain your code, and may help you when you edit
the source code at a later date. A comment will be ignored by browsers. A
CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
p
{
text-align:center;

CSS Types

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according

94
to it. There are three ways of inserting a style sheet:

21
External Style Sheet

An external style sheet is ideal when the style is applied to many pages.

59
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

07
the <link> tag. The <link> tag goes inside the head section:

<head>

80
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css,
and format the document according to it. .in
An external style sheet can be written in any text editor. The file
ys
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:
ra

hr {color:sienna}
ar

p {margin-left:20px}
body {background-image:url("images/back40.gif")}
ith

Do not leave spaces between the property value and the units!
"margin-left:20 px" (instead of "margin-left:20px") will only work in
IE6, but it will not work in Firefox or Opera.
w
de

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 by using the
<style> tag, like this:

<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>

Note: A browser normally ignores unknown tags. This means that an old
browser that does not support styles, will ignore the <style> tag, but
the content of the <style> tag will be displayed on the page. It is
possible to prevent an old browser from displaying the content by hiding
it in the HTML comment element:

94
<!--
hr {color:sienna}
p {margin-left:20px}

21
body {background-image:url("images/back40.gif")}
-->
</style>

59
</head>
Inline Styles

07
An inline style loses many of the advantages of style sheets by mixing
content with presentation. Use this method sparingly, such as when a

80
style is to be applied to a single occurrence of an element.

To use inline styles you use the style attribute in the relevant tag. The
.in
style attribute can contain any CSS property. The example shows how to
change the color and the left margin of a paragraph:
ys
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheets
ra

If some properties have been set for the same selector in different style
ar

sheets, the values will be inherited from the more specific style sheet.
ith

For example, an external style sheet has these properties for the h3
selector:
w

h3
de

{
color:red;
co

text-align:left;
font-size:8pt
}
And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20pt
}

color:red;
text-align:right;
font-size:20pt
The color is inherited from the external style sheet and the
text-alignment and the font-size is replaced by the internal style sheet.

CSS Background

94
1. Color as a background

21
body

59
{

07
background-color:yellow;

80
}

{
.in
ys
background-color:#00ff00;
ra

}
ar

p
ith

{
w

background-color:rgb(255,0,255);
de

}
co

</style>

Note: Default value is transparent.

2. Image as a background

3. How to repeat background Image?

Note: By default, a background-image is placed at the top-left corner of

an element, and repeated both vertically and horizontally.

Background Image Vertical Repeat

94
{
background-image:url('paper.gif');
background-repeat:repeat-x;

21
}
</style>

59
Background Image Horizontal Repeat

07
<style type="text/css">
body
{

80
background-image:url('paper.gif');
background-repeat:repeat-y;
}
</style> .in
Display a Background Image only one time
ys
<style type="text/css">
ra

body
{
background-image:url('paper.gif');
ar

background-repeat:no-repeat;
}
ith

</style>
w

4. Image as a background
de

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>

Note: For this to work in Firefox and Opera, the background-attachment

property must be set to "fixed". Background will not move scroll.

5. Background Image Position

Property Values

94
Value Description
top left If you only specify one keyword, the second value will be

21
top center "center". Default value is: 0% 0%
top right

59
center left
center center
center right

07
bottom left
bottom center
bottom right

80
x% y% The first value is the horizontal position and the second
value is the vertical. The top left corner is 0% 0%. The
right bottom corner is 100% 100%. If you only specify one

xpos ypos
value, the other value will be 50%. .in
The first value is the horizontal position and the second
value is the vertical. The top left corner is 0 0. Units
ys
can be pixels (0px 0px) or any other CSS units. If you
only specify one value, the other value will be 50%. You
ra

can mix % and positions

inherit Specifies that the setting of the background-position
ar

property should be inherited from the parent element

ith

Example:
w

body
{
background-image: url('smiley.gif');
co

background-repeat: no-repeat;
background-attachment:fixed;
background-position: 0% 20%;
background-position: 50px 100px;
}
</style>

CSS Text

The color property is used to set the color of the text. The color can be
set by:

● name - specify a color name, like "red"

● RGB - specify an RGB value, like "rgb(255,0,0)"
● Hex - specify a hex value, like "#ff0000"

The default color for a page is defined in the body selector.

94
Example

body {color:blue}

21
h1 {color:#00ff00}
h2 {color:rgb(255,0,0)}

59
2. Text Alignment

07
The text-align property is used to set the horizontal alignment of a
text.

80
Text can be centered, or aligned to the left or right, or justified.

When text-align is set to "justify", each line is stretched so that every

.in
line has equal width, and the left and right margins are straight (like
in magazines and newspapers).
ys
Example:
ra

<html>
ar

<head>
ith

h1 {text-align:center}
de

p.date {text-align:right}
co

p.main {text-align:justify}

</style>

</head>

<body>

<h1>CSS text-align Example</h1>

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

</body>

</html>

94
Note: Try to resize the browser window to see how justify works.

3. Text Decoration

21
The text-decoration property is used to set or remove decorations from

59
text.

07
The text-decoration property is mostly used to remove underlines from
links for design purposes:

80
Example:

h1 {text-decoration:overline}
.in
ys
h2 {text-decoration:line-through}
ra

h3 {text-decoration:underline}
ar

h4 {text-decoration:blink}
ith

</style>
w

Note: The "blink" value is not supported in IE, Chrome, or Safari.

4. Text Transformation
co

The text-transform property is used to specify uppercase and lowercase

letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or

capitalize the first letter of each word.

Example:

<body>
<p class="uppercase">This is some text in a paragraph</p>
<p class="lowercase">This is some text in a paragraph</p>
<p class="capitalize">This is some text in a paragraph</p>
</body>
</html>

94
5. Text Indentation

21
The text-indentation property is used to specify the indentation of the
first line of a text.

59
Example:

07
<html>

80
<head>
<style type="text/css">
p {text-indent:50px}
</style>
</head> .in
ys
<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.</p>
ra

</body>
</html>
ar

6. Specify the space between characters

ith

This property is used to specify the space between characters. Negative

value will decrease the space while positive value will increase the
space.
de

Example:
co

<html>

<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>

<body>
<h1>This is header 1</h1>

7. Specify the space between lines

This property is used to specify the space between lines. Negative value
will decrease the space while positive value will increase the space.

Example:

94
<html>
<head>
<style type="text/css">

21
p.small {line-height: 90%}
p.big {line-height: 20px}
</style>

59
</head>

07
<body>
<p>
This is a paragraph with a standard line-height.

80
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>

<p class="small">
This is a paragraph with a smaller line-height.
.in
ys
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
ra

</p>
ar

<p class="big">
This is a paragraph with a bigger line-height.
ith

This is a paragraph with a bigger line-height.

This is a paragraph with a bigger line-height.
w

This is a paragraph with a bigger line-height.

</p>
de

</body>
</html>
co

Note: line-height can be given in % and pixel. The default line height in
most browsers is about 110% to 120%.

8. Text direction of an element

This property is used to specify the direction of an element.

ltr: Text will start from left side.

Example:

<html>
<head>
<style type="text/css">
div.one
{
direction:rtl;
}
div.two

94
{
direction:ltr;

21
}
</style>
</head>

59
<body>
<div class="one">Some text. Right-to-left direction.</div>

07
<div class="two">Some text. Left-to-right direction.</div>
</body>

80
</html>

9. Increase the white space between words

.in
This property is used to specify the white space between words. Positive
value increases the space while negative value decreases the space.
ys
Example:
ra

<html>
<head>
ar

{
word-spacing:30px;
w

}
</style>
de

</head>
<body>
co

</body>
</html>

10. Text wrapping

White-space: wrap – text will wrap horizontal scroll will

not be visible.

Example:

94
p
{
white-space:nowrap;

21
}
</style>

59
</head>
<body>

07
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

80
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>
.in
ys
<style type="text/css">
p
ra

{
white-space:nowrap;
ar

}
</style>
ith

CSS Font
w

1. Font Family
de

The font family of a text is set with the font-family property.

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:

p{font-family:"Times New Roman",Georgia,Serif}

2. Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

● normal - The text is shown normally

● italic - The text is shown in italics

94
● oblique - The text is "leaning" (oblique is very similar to italic,
but less supported)

21
Example:

59
<html>

07
<head>

80
<style type="text/css">

p.normal {font-style:normal}

p.italic {font-style:italic}
.in
ys
p.oblique {font-style:oblique}
ra

</style>
ar

</head>
ith

<body>
w

<p class="normal">This is a paragraph, normal.</p>

<p class="italic">This is a paragraph, italic.</p>

<p class="oblique">This is a paragraph, oblique.</p>

</body>

</html>

3. Font Size

The font-size property sets the size of the text.

The font-size value can be an absolute, or relative size.

Absolute size:

● Sets the text to a specified size

● Does not allow a user to change the text size in all browsers (bad
for accessibility reasons)
● Absolute size is useful when the physical size of the output is
known

94
Relative size:

● Sets the size relative to surrounding elements

21
● Allows a user to change the text size in browsers

59
Note: If you do not specify a font size, the default size for normal
text, like paragraphs, is 16px (16px=1em).

07
Example:

80
<html>

<head>

h2 {font-size:30px}
ar

p {font-size:14px}
ith

</style>
w

</head>
de

<body>
co

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

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

</body>

</html>

To avoid the resizing problem with Internet Explorer, many developers use
em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers
is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula:

94
16=em
pixels/

Example:

21
h1 {font-size:2.5em} /* 40px/16=2.5em */

59
5. Font Weight

07
Sets the weight of a font.

Values: normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900

80
Example:

<html> .in
<head>
ys
<style type="text/css">
ra

p.normal {font-weight:normal}
ar

p.thick {font-weight:bold}
ith

p.thicker {font-weight:900}
w
de

</style>

</head>
co

<body>

<p class="normal">This is a paragraph.</p>

<p class="thick">This is a paragraph.</p>

<p class="thicker">This is a paragraph.</p>

</html>

6. Font Variant

Displays text in a small-caps font or a normal font.

Example:

<html>

94
<head>

21
<style type="text/css">

59
p.normal {font-variant:normal}

07
p.small {font-variant:small-caps}

80
</style>

</head>

<body> .in
ys
<p class="normal">This is a paragraph.</p>
ra

<p class="small">This is a paragraph.</p>

</body>
ith

</html>

CSS Units
w
de

Measurements
Unit Description
co

% 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. E.g., if an element
is displayed with a font of 12 pt, then '2em' is 24 pt.
The 'em' is a very useful unit in CSS, since it can
adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually
about half the font-size)

Colors
Unit Description
color_name A color name (e.g. red)
rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb A HEX number (e.g. #ff0000)
CSS Tables

94
1. Set the layout of a table

21
Example:

59
<html>

07
<head>

80
table.ex1 {table-layout:auto}

table.ex2 {table-layout:fixed} .in

ys
</style>

</head>
ra

<body>
ar
ith

<table class="ex1" border="1" width="100%">

<tr>
w
de

<td width="95%">10000000</td>
co

</tr>

</table>

<br />

<table class="ex2" border="1" width="100%">

</tr>

</table>

</body>

94
</html>

21
2. Collapse a table border

59
Sets whether the table borders are collapsed into a single border or
detached as in standard HTML

07
Example:

80
<html>

<head>

</style>
ar

</head>
ith

<body>
w

<table border="1">
de

<tr>
co

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

3. Empty cells in a table border

94
Sets whether or not to show empty cells in a table (only for the

21
"separated borders" model)

Example:

59
<html>

07
<head>

80
<style type="text/css">

table

{
.in
ys
border-collapse:separate;
ra

empty-cells:hide;
ar

}
ith

</style>
w

</head>
de

<body>
co

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

</tr>

</table>

</body>

94
</html>

21
CSS Image Opacity

59
Note: This is not yet a CSS standard. However, it works in all modern
browsers, and is a part of the W3C CSS 3 recommendation.

07
1. Transparent Image

80
<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox uses the property opacity:x for transparency, while IE uses

filter:alpha(opacity=x).
.in
ys
Tip: The CSS3 syntax for transparency is opacity:x.
ra

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value

makes the element more transparent.
ar
ith

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower

value makes the element more transparent.
w

2. Transparent Image – Mouseover effect

<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
co

onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

The syntax for this in Firefox is: this.style.opacity=1 and the syntax in
IE is: this.filters.alpha.opacity=100.

When the mouse pointer moves away from the image, we want the image to be
transparent again. This is done in the onmouseout attribute.

CSS Cursor

Example:

<html>

<body>

<p>Mouse over the words to change the cursor.</p>

<span style="cursor:auto">auto</span><br />

94
<span style="cursor:crosshair">crosshair</span><br />

21
<span style="cursor:default">default</span><br />

59
<span style="cursor:e-resize">e-resize</span><br />

07
<span style="cursor:help">help</span><br />

80
<span style="cursor:move">move</span><br />

<span style="cursor:n-resize">n-resize</span><br />

<span style="cursor:ne-resize">ne-resize</span><br /> .in

ys
<span style="cursor:nw-resize">nw-resize</span><br />
ra

<span style="cursor:pointer">pointer</span><br />

<span style="cursor:progress">progress</span><br />

ith

<span style="cursor:s-resize">s-resize</span><br />

<span style="cursor:se-resize">se-resize</span><br />

<span style="cursor:sw-resize">sw-resize</span><br />

<span style="cursor:text">text</span><br />

<span style="cursor:w-resize">w-resize</span><br />

<span style="cursor:wait">wait</span><br />

</body>

</html>

Notice that the invisible heading still takes up space. Marked(**)

statement will not be dispalyed

Example:

h1.visible {visibility:visible}

94
h1.hidden {visibility:hidden}

21
</style>

59
<body>

<h1 class="visible">This is a visible heading</h1>

07
**<h1 class="hidden">This is an invisible heading</h1>

80
</body>

CSS Horizontal Menu

.in
Example:
ys
<html>
ra

<head>
ar

ul
w

{
de

float:left;
co

width:100%;

padding:0;

margin:0;

list-style-type:none;

float:left;

width:6em;

text-decoration:none;

94
color:white;

21
background-color:#aaaaaa;

59
padding:0.2em 0.6em;

07
border-right:1px solid white;

80
}

a:hover {background-color:#ff3300}

li {display:inline} .in
ys
</style>
ra

</head>
ar

<body>
ith

<ul>

<li><a href="#">Link one</a></li>

w
de

<li><a href="#">Link two</a></li>

<li><a href="#">Link three</a></li>

<li><a href="#">Link four</a></li>

</ul>

</body>

</html>

CSS Margin

The margin clears an area around an element (outside the border). The
margin does not have a background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently

94
using separate properties. A shorthand margin property can also be used,
to change all margins at once.

21
1.Possible Values

59
Value Description
auto The browser sets the margin.

07
The result of this is dependant of the browser
length Defines a fixed margin (in pixels, pt, em, etc.)
% Defines a margin in % of the containing element

80
It is possible to use negative values, to overlap content.

In CSS, it is possible to specify different margins for different sides:

Example:
.in
ys
margin-top:100px;
margin-bottom:100px;
ra

margin-right:50px;
margin-left:50px;
ar

1.Margin Shorthand Property

ith

To shorten the code, it is possible to specify all the margin properties

in one property. This is called a shorthand property.
w

The shorthand property for all the margin properties is "margin":

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

● margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px

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

21
59
Note: Margin can be set in cm and %.

07
CSS Border

1. Border Style

80
The border-style property specifies what kind of border to display.

None of the other border properties will have any effect unless
border-style is set.
.in
ys
border-style Values
ra

none: Defines no border

dotted: Defines a dotted border

ith

dashed: Defines a dashed border

w
de

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as
co

the border-width value

groove: Defines a 3D grooved border. The effect depends on the

border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color

value

inset: Defines a 3D inset border. The effect depends on the border-color

value

outset: Defines a 3D outset border. The effect depends on the

border-color value

Example:

94
p.none {border-style:none}

21
p.dotted {border-style:dotted}

p.dashed {border-style:dashed}

59
p.solid {border-style:solid}

07
p.double {border-style:double}

80
p.groove {border-style:groove}

p.ridge {border-style:ridge}

p.inset {border-style:inset}
.in
ys
p.outset {border-style:outset}
ra

p.hidden {border-style:hidden}
ar

</style>
ith

2. Border width
w

The border-width property is used to set the width of the border.

The width is set in pixels, or by using one of the three pre-defined

values: thin, medium, or thick.
co

Note: The "border-width" property does not work if it is used alone. Use
the "border-style" property to set the borders first.

Example:

p.one
{
border-style:solid;
border-width:5px;

The border-color property is used to set the color of the border. The
color can be set by:

94
● name - specify a color name, like "red"
● RGB - specify a RGB value, like "rgb(255,0,0)"

21
● Hex - specify a hex value, like "#ff0000"

59
You can also set the border color to "transparent".

Note: The "border-color" property does not work if it is used alone. Use

07
the "border-style" property to set the borders first.

80
Example:

p.one
{
border-style:solid;
border-color:red;
.in
}
ys
p.two
{
ra

border-style:solid;
border-color:#98bf21;
ar

}
ith

3. Border Individual Side

In CSS it is possible to specify different borders for different sides:

Example:
co

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

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

● border-style:dotted solid double dashed;

● border-style:dotted solid double;

o top border is dotted
o right and left borders are solid
o bottom border is double

94
● border-style:dotted solid;
o top and bottom borders are dotted

21
o right and left borders are solid

● border-style:dotted;

59
o all four borders are dotted

07
The border-style property is used in the example above. However, it also
works with border-width and border-color.

80
hen using the border property, the orders of the values are:
Note: W

● border-width
●
●
border-style
border-color
.in
ys
It does not matter if one of the values above are missing (although,
border-style is required), as long as the rest are in the specified
ra

order.
ar

All CSS Border Properties

ith

The number in the "CSS" column indicates in which CSS version the
property is defined (CSS1 or CSS2).
w
de

Property Description Values CSS

border Sets all the border properties in border-width 1
one declaration border-style
co

border-color
border-bottom Sets all the bottom border border-bottom-wi 1
properties in one declaration dth
border-bottom-st
yle
border-bottom-co
lor
border-bottom-colo Sets the color of the bottom border-color 2
r border
border-bottom-styl Sets the style of the bottom border-style 2
e border

------------------------------------------------------------------------------------------------------------
CSS
------------------------------------------------------------------------------------------------------------
border-bottom-widt Sets the width of the bottom border-width 1
h border
border-color Sets the color of the four color_name 1
borders hex_number
rgb_number
transparent
inherit
border-left Sets all the left border border-left-widt 1
properties in one declaration h
border-left-styl
e
border-left-colo

94
r
border-left-color Sets the color of the left border border-color 2

21
border-left-style Sets the style of the left border border-style 2
border-left-width Sets the width of the left border border-width 1
border-right Sets all the right border border-right-wid 1

59
properties in one declaration th
border-right-sty

07
le
border-right-col
or

80
border-right-color Sets the color of the right border-color 2
border
border-right-style Sets the style of the right border-style 2
border
border-right-width Sets the width of the right
border
border-width
.in 1
ys
border-style Sets the style of the four none 1
borders hidden
ra

dotted
dashed
solid
ar

double
groove
ith

ridge
inset
w

outset
inherit
de

border-top Sets all the top border border-top-width 1

properties in one declaration border-top-style
co

border-top-color
border-top-color Sets the color of the top border border-color 2
border-top-style Sets the style of the top border border-style 2
border-top-width Sets the width of the top border border-width 1
border-width Sets the width of the four thin 1
borders medium
thick
length
inherit

CSS Padding

The padding clears an area around the content (inside the border) of an
element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently
using separate properties. A shorthand padding property can also be used,
to change all paddings at once.

Possible Values

94
Value Description

21
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element
Padding - Individual sides

59
In CSS, it is possible to specify different padding for different sides:

07
Example

80
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px; .in
Padding - Shorthand property
ys
To shorten the code, it is possible to specify all the padding properties
ra

in one property. This is called a shorthand property.

The shorthand property for all the padding properties is "padding":

ith

Example
w

padding:25px 50px;
de

The margin property can have from one to four values.

● padding:25px 50px 75px 100px;

o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

● padding:25px 50px 75px;

o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px

● padding:25px 50px;

● padding:25px;
o all four paddings are 25px

CSS Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

94
The syntax of pseudo-classes:

21
selector:pseudo-class {property:value}
CSS classes can also be used with pseudo-classes:

59
selector.class:pseudo-class {property:value}
Anchor Pseudo-classes

07
Links can be displayed in different ways in a CSS-supporting browser:

80
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
.in
Note: a:hover MUST come after a:link and a:visited in the CSS definition
in order to be effective!!
ys
Note: a:active MUST come after a:hover in the CSS definition in order to
be effective!!
ra
ar

Note: Pseudo-class names are not case-sensitive.

ith

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

w
de

a.red:visited {color:#FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed
in red.

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the

first child of another element.

Note: For :first-child to work in IE a <!DOCTYPE> must be declared.

In the following example, the selector matches any <p> element that is
the first child of any element:

Example

<html>
<head>
<style type="text/css">
p:first-child

94
{
color:blue
}

21
</style>
</head>

59
<body>
<p>I am a strong man.</p>

07
<p>I am a strong man.</p>
</body>
</html>

80
Match the first <i> element in all <p> elements

.in
In the following example, the selector matches the first <i> element in
all <p> elements:
ys
Example
ra

<html>
<head>
ar

{
font-weight:bold
w

}
</style>
de

</head>

<body>
co

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements

in <p> elements that are the first child of another element:

Example

<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>

94
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

21
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

59
CSS - The :lang Pseudo-class

07
The :lang pseudo-class allows you to define special rules for different
languages. In the example below, the :lang class defines the type of

80
quotation marks for q elements with a lang attribute with a value of
"no":

<html> .in
<head>
ys
<style type="text/css">
q:lang(no)
ra

{
quotes:"~" "~"
ar

}
</style>
ith

</head>

<body>
w

<p>Some text <q lang="no">A quote in a paragraph</q>

Some text.</p>
</body>
co

</html>

CSS Pseudo-elements
CSS pseudo-elements are used to add special effects to some selectors.
Syntax

The syntax of pseudo-elements:

selector:pseudo-element {property:value}

selector.class:pseudo-element {property:value}

The :first-line Pseudo-element

The "first-line" pseudo-element is used to add special styles to the

first line of the text in a selector:

p:first-line {color:#0000ff;font-variant:small-caps}

94
<p>Some text that ends up on two or more lines</p>

21
The output could be something like this:

Some text that ends

59
up on two or more lines
In the example above the browser displays the first line formatted

07
according to the "first-line" pseudo element. Where the browser breaks
the line depends on the size of the browser window.

80
Note: The "first-line" pseudo-element can only be used with block-level
elements.

.in
Note: The following properties apply to the "first-line" pseudo-element:;

● font properties
ys
● color properties
● background properties
ra

● word-spacing
● letter-spacing
ar

● text-decoration
● vertical-align
ith

● text-transform
● line-height
● clear
w
de

The :first-letter Pseudo-element

The "first-letter" pseudo-element is used to add special style to the

first letter of the text in a selector:

p:first-letter {color:#ff0000;font-size:xx-large}

<p>The first words of an article...</p>

The output could be something like this:

he first words of an article...

Note: The following properties apply to the "first-letter" pseudo-

element:

● font properties
● color properties
● background properties
● margin properties
● padding properties
●

94
border properties
● text-decoration
● vertical-align (only if "float" is "none")

21
● text-transform
● line-height
● float

59
● clear

07
Pseudo-elements and CSS Classes

80
Pseudo-elements can be combined with CSS classes:

p.article:first-letter {color:#ff0000}

<p class="article">A paragraph in an article</p>

The example above will make the first letter of all paragraphs with
.in
ys
class="article" red.
ra

Multiple Pseudo-elements
ar

Several pseudo-elements can be combined:

ith

p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}
w

<p>The first words of an article...</p>

The output could be something like this:

he first
words of an
article...
In the example above the first letter of the paragraph will be red with a
font size of 24pt. The rest of the first line would be blue while the
rest of the paragraph would be the default color.

CSS - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before

the content of an element.

The style below will play a sound before each occurrence of an <h1>
element:

h1:before
{
content:url(beep.wav)
}

94
CSS - The :after Pseudo-element

21
The ":after" pseudo-element can be used to insert some content after the

59
content of an element.

The style below will play a sound after each occurrence of an <h1>

07
element:

80
h1:after
{
content:url(beep.wav)
}
.in
ys
ra
ar
ith
w
de
co

94
21
59
07
80
JAVASCRIPT .in
ys
ra
ar
ith
w
de
co

INDEX

Topics Page No

1. What is Javascript? 4

2. What can a JavaScript do? 4

94
3. Where to Implement JavaScript 5

4. Comments in Javascript 7

21
5. Javascript Variables 8

59
6. Javascript Operators

07
6.1. Arithmetic 10
6.2. Assignment 10
6.3. Comparison 11

80
6.4. Logical 12
6.5. Conditional 12

7. Conditional Statement
7.1. If statement
.in 12
13
7.2. If ………Else statement 13
ys
7.3. If ………Else if Else statement 14
7.4. Switch Case statement 15
ra
ar

8. Pop Up Box
8.1. Alert Box 16
ith

8.2. Confirm Box 16

8.3. Prompt Box 17
w

9. Javascript Functions 18
de

10. Javascript Loops 19

10.1. For Loop 19

10.2. While Loop 20
10.3. do … while Loop 21
10.4. For … In Loop 22

11. Javascript Events

11.1. onLoad and onUnload 24
11.2. onFocus,onBlur,onClick and onChange 24
11.3. OnSubmit 24

12. Special Characters 25

13. Javascript Strings 27

14. Javascript Arrays 27

15. Javascript Timeout Functions 29

16. Javascript Validations 30

94
21
59
07
80
.in
ys
ra
ar
ith
w
de
co

What is JavaScript?

94
JavaScript was designed to add interactivity to HTML pages
● JavaScript is a scripting language
● A scripting language is a lightweight programming language

21
● JavaScript is usually embedded directly into HTML pages
● JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)

59
● Everyone can use JavaScript without purchasing a license

07
Are Java and JavaScript the same?

80
NO!

Java and JavaScript are two completely different languages in both

concept and design!
.in
Java (developed by Sun Microsystems) is a powerful and much more complex
ys
programming language - in the same category as C and C++.

JavaScript was created by Netscape to extend the functions a browser can

perform.
ar

What can a JavaScript do?

ith

● JavaScript gives HTML designers a programming tool - HTML authors

are normally not programmers, but JavaScript is a scripting
w

language with a very simple syntax! Almost anyone can put small
de

"snippets" of code into their HTML pages

● JavaScript can put dynamic text into an HTML page - A JavaScript
statement like this: document.write("<h1>" + name + "</h1>") can
co

write a variable text into an HTML page

● JavaScript can react to events - A JavaScript can be set to
execute when something happens, like when a page has finished
loading or when a user clicks on an HTML element
● JavaScript can read and write HTML elements - A JavaScript can
read and change the content of an HTML element
● JavaScript can be used to validate data - A JavaScript can be used
to validate form data before it is submitted to a server. This
saves the server from extra processing
● JavaScript can be used to detect the visitor's browser - A
JavaScript can be used to detect the visitor's browser, and -

------------------------------------------------------------------------------------------------------------
JAVASCRIPT
------------------------------------------------------------------------------------------------------------
depending on the browser - load another page specifically designed
for that browser
● JavaScript can be used to create cookies - A JavaScript can be
used to store and retrieve information on the visitor's computer

The HTML <script> tag is used to insert a JavaScript into an HTML page.

The example below shows how to use JavaSript to write text on a web page:

Example

94
<html>
<body>
<script type="text/javascript">

21
document.write("Hello World!");
</script>
</body>

59
</html>

07
Where To Implement JavaScript

80
JavaScripts in the body section will be executed WHILE the page loads.
JavaScripts in the head section will be executed when CALLED.

Where to Put the JavaScript .in

ys
JavaScripts in a page will be executed immediately while the page loads
into the browser. This is not always what we want. Sometimes we want to
ra

execute a script when a page loads, other times when a user triggers an
event.
ar

Scripts in <head>
ith

Scripts to be executed when they are called, or when an event is

triggered, go in the head section.

If you place a script in the head section, you will ensure that the
script is loaded before anyone uses it.
co

Example

<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

Scripts in <body>
Scripts to be executed when the page loads go in the body section.

If you place a script in the body section, it generates the content of a

page.

94
Example

21
<html>
<head>

59
</head>

<body>

07
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>

80
</body>

</html>

Scripts in <head> and <body>

.in
ys
You can place an unlimited number of scripts in your document, so you can
have scripts in both the body and the head section.
ra

<html>
ar

<head>
<script type="text/javascript">
ith

....
</script>
</head>
w

<body>
<script type="text/javascript">
de

....
</script>
</body>
co

Using an External JavaScript

If you want to run the same JavaScript on several pages, without having
to write the same script on every page, 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!

Example

94
21
Comments In Javascript

59
JavaScript comments can be used to make the code more readable.

07
Comments can be added to explain the JavaScript, or to make the code more
readable.

80
Single line comments start with //

The following example uses single line comments to explain the code:
.in
Example
ys
<script type="text/javascript">
ra

// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
ar

document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
ith

</script>
w
de

JavaScript Multi-Line Comments

Multi line comments start with /* and end with */.

The following example uses a multi line comment to explain the code:

Example

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

Using Comments to Prevent Execution

In the following example the comment is used to prevent the execution of a single code
line (can be suitable for debugging):

94
Example

21
//document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");

59
</script>

07
In the following example the comment is used to prevent the execution of
a code block (can be suitable for debugging):

80
Example

Using Comments at the End of a Line

ith

In the following example the comment is placed at the end of a code line:
w

Example
de

</script>

JavaScript Variables
Variables are "containers" for storing information.

Do you remember algebra from school?

Do you remember that a letter (like x) could be used to hold a value

(like 5), and that you could use the information above to calculate the
value of z to be 11?

These letters are called variables, and variables can be used to hold
values (x=5) or expressions (z=x+y).

JavaScript Variables

94
As with algebra, JavaScript variables are used to hold values or
expressions.

21
A variable can have a short name, like x, or a more descriptive name,
like carname.

59
Rules for JavaScript variable names:

07
● Variable names are case sensitive (y and Y are two different
variables)

80
● Variable names must begin with a letter or the underscore character

Note: Because JavaScript is case-sensitive, variable names

are case-sensitive. .in
Example
ys
A variable's value can change during the execution of a script. You can
ra

refer to a variable by its name to display or change its value.

Declaring (Creating) JavaScript Variables

ar
ith

Creating variables in JavaScript is most often referred to as "declaring"

variables.
w

You can declare JavaScript variables with the var statement:

var x;
var carname;
co

After the declaration shown above, the variables are empty (they have no
values yet).

However, you can also assign values to the variables when you declare
them:

var x=5;
var carname="Volvo";

Note: When you assign a text value to a variable, use quotes

around the value.

Assigning Values to Undeclared JavaScript Variables

If you assign values to variables that have not yet been declared, the
variables will automatically be declared.

94
These statements:

21
x=5;
carname="Volvo";

59
have the same effect as:

var x=5;

07
var carname="Volvo";

80
Redeclaring JavaScript Variables

If you redeclare a JavaScript variable, it will not lose its original

value. .in
var x=5;
ys
var x;
After the execution of the statements above, the variable x will still
ra

have the value of 5. The value of x is not reset (or cleared) when you
redeclare it.
ar

JavaScript Operators
ith

Arithmetic Operators
w

Arithmetic operators are used to perform arithmetic between variables

and/or values.

Given that y=5, the table below explains the arithmetic operators:
co

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

Assignment operators are used to assign values to JavaScript variables.

Given that x=10 and y=5, the table below explains the assignment
operators:

Operator Example Same As Result

= x=y x=5

94
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5

21
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2

59
%= x%=y x=x%y x=0
The + Operator Used on Strings

07
The + operator can also be used to add string variables or text values
together.

80
To add two or more string variables together, use the + operator.

txt1="What a very";
txt2="nice day";
.in
txt3=txt1+txt2;
ys
After the execution of the statements above, the variable txt3 contains
"What a verynice day".
ra

To add a space between the two strings, insert a space into one of the
ar

strings:
ith

txt1="What a very ";

txt2="nice day";
w

txt3=txt1+txt2;
or insert a space into the expression:
de

txt1="What a very";
co

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

The rule is: If you add a number and a string, the result will be a
string!

Example

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

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

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

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

94
21
JavaScript Comparison and Logical Operators
Comparison and Logical operators are used to test for true or false.

59
Comparison Operators

07
Comparison operators are used in logical statements to determine equality
or difference between variables or values.

80
Given that x=5, the table below explains the comparison operators:

Operator
==
Description
is equal to
.in
Example
x==8 is false
ys
=== is exactly equal to (value and type) x===5 is true
x==="5" is false
ra

!= is not equal x!=8 is true

> is greater than x>8 is false
ar

< is less than x<8 is true

>= is greater than or equal to x>=8 is false
ith

<= is less than or equal to x<=8 is true

How can it be used
w
de

Comparison operators can be used in conditional statements to compare values and take
action depending on the result:
co

if (age<18) document.write("Too young");

Logical Operators

Logical operators are used to 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

JavaScript also contains a conditional operator that assigns a value to a

variable based on some condition.

Syntax
variablename=(condition)?value1:value2

94
Example
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
If the variable visitor has the value of "PRES", then the

21
variable greeting will be assigned the value "Dear President " else it
will be assigned "Dear".

59
Conditional Statements

07
Conditional statements are used to perform different actions based on
different conditions.

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

.in
● if statement - use this statement to execute some code only if a specified
ys
condition is true
● if...else statement - use this statement to execute some code if the condition
ra

is true and another code if the condition is false

● if...else if....else statement - use this statement to select one of many
blocks of code to be executed
ar

● switch statement - use this statement to select one of many blocks of code to
be executed
ith

If Statement
w

Use the if statement to execute some code only if a specified condition

is true.
co

Syntax
if (condition)
{
code to be executed if condition is true
}
Note that if is written in lowercase letters. Using uppercase letters
(IF) will generate a JavaScript error!

Example

var d=new Date();

var time=d.getHours();

if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>

94
Notice that there is no ..else.. in this syntax. You tell

21
the browser to execute some code only if the specified
condition is true.

59
If...else Statement

07
Use the if....else statement to execute some code if a condition is true
and another code if the condition is not true.

80
Syntax
if (condition)
{
code to be executed if condition is true
}
.in
else
ys
{
code to be executed if condition is not true
ra

}
ar

Example
ith

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

Use the if....else if...else statement to select one of several blocks of

code to be executed.

Syntax
if (condition1)
{
code to be executed if condition1 is true
}

else if (condition2)
{
code to be executed if condition2 is true
}

94
else
{
code to be executed if condition1 and condition2 are not true

21
}

59
Example

07
var d = new Date()
var time = d.getHours()
if (time<10)

80
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
.in
ys
else
{
document.write("<b>Hello World!</b>");
ra

}
</script>
ar
ith

JavaScript Switch Statement

Conditional statements are used to perform different actions based on

different conditions.
de

Use the switch statement to select one of many blocks of code to be executed.
co

Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

------------------------------------------------------------------------------------------------------------
JAVASCRIPT
------------------------------------------------------------------------------------------------------------
This is how it works: First we have a single expression n (most often a
variable), that is evaluated once. The value of the expression is then
compared with the values for each case in the structure. If there is a
match, the block of code associated with that case is executed.
Usebreak to prevent the code from running into the next case
automatically.

Example

94
//Monday=1, Tuesday=2, etc.

var d=new Date();

21
theDay=d.getDay();
switch (theDay)
{

59
case 5:
document.write("Finally Friday");
break;

07
case 6:
document.write("Super Saturday");
break;

80
case 0:
document.write("Sleepy Sunday");
break;
default:

}
document.write("I'm looking forward to this weekend!"); .in
</script>
ys
ra

JavaScript Popup Boxes

JavaScript has three kind of popup boxes: Alert box, Confirm box, and
Prompt box.
ith

Alert Box
w

An alert box is often used if you want to make sure information comes
de

through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.
co

Syntax
alert("sometext");

Example

<html>
<head>
<script type="text/javascript">
function show_alert()

{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="show_alert()" value="Show alert box" />

</body>
</html>

94
Confirm Box

21
A confirm box is often used if you want the user to verify or accept

59
something.

When a confirm box pops up, the user will have to click either "OK" or

07
"Cancel" to proceed.

80
If the user clicks "OK", the box returns true. If the user clicks
"Cancel", the box returns false.

Syntax
confirm("sometext");
.in
ys
Prompt Box
ra

A prompt box is often used if you want the user to input a value before
entering a page.
ar
ith

When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
w

If the user clicks "OK" the box returns the input value. If the user
de

clicks "Cancel" the box returns null.

Syntax
co

prompt("sometext","defaultvalue");

Example

<html>
<head>
<script type="text/javascript">
function show_prompt()

{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_prompt()" value="Show prompt box" />

94
</body>
</html>

21
59
JavaScript Functions

07
A function will be executed by an event or by a call to the function.

80
To keep the browser from executing a script when the page loads, you can
put your script into a function.

A function contains code that will be executed by an event or by a call

to the function. .in
ys
You may call a function from anywhere within a page (or even from other
pages if the function is embedded in an external .js file).
ra

Functions can be defined both in the <head> and in the <body> section of
ar

a document. However, to assure that a function is read/loaded by the

browser before it is called, it could be wise to put functions in the
ith

<head> section.

How to Define a Function

w
de

Syntax
function functionname(var1,var2,...,varX)

{
co

some code
}
The parameters 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.

Note: Do not forget about the importance of capitals in JavaScript! The

word function must be written in lowercase letters, otherwise a

JavaScript Function Example

Example

<html>
<head>
<script type="text/javascript">
function displaymessage()
{

94
alert("Hello World!");
}
</script>

21
</head>

<body>

59
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>

07
</body>
</html>

80
If the line: alert("Hello world!!") in the example above had not been put
within a function, it would have been executed as soon as the line was
loaded. Now, the script is not executed before a user hits the input
button. The function displaymessage() will be executed if the input
button is clicked.
.in
ys
The return Statement
ra

The return statement is used to specify the value that is returned from
the function.
ar

So, functions that are going to return a value must use the return
ith

statement.
w

The example below returns the product of two numbers (a and b):
de

Example
co

<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>

document.write(product(4,3));
</script>

</body>
</html>

The Lifetime of JavaScript Variables

If you declare a variable within a function, the variable can only be

accessed within that function. When you exit the function, the variable
is destroyed. These variables are called local variables. You can have

94
local variables with the same name in different functions, because each
is recognized only by the function in which it is declared.

21
If you declare a variable outside a function, all the functions on your
page can access it. The lifetime of these variables starts when they are

59
declared, and ends when the page is closed.

07
JavaScript Loop
Loops execute a block of code a specified number of times, or while a

80
specified condition is true.

Often when you write code, you want the same block of code to run over
.in
and over again in a row. Instead of adding several almost equal lines in
a script we can use loops to perform a task like this.
ys
In JavaScript, there are two different kind of loops:
ra

● for - loops through a block of code a specified number of times

● while - loops through a block of code while a specified condition
ar

is true
ith

The for Loop

The for loop is used when you know in advance how many times the script
should run.
de

Syntax
co

for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

Example

The example below defines a loop that starts with i=0. The loop will
continue to run as long as iis less than, or equal to 5. i will increase
by 1 each time the loop runs.

Example

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);

94
document.write("<br />");
}
</script>

21
</body>
</html>

59
JavaScript While Loop

07
Loops execute a block of code a specified number of times, or while a
specified condition is true.

80
The while Loop

.in
The while loop loops through a block of code while a specified condition
is true.
ys
Syntax
ra

while (var<=endvalue)
{
code to be executed
ar

}
Note: The <= could be any comparing statement.
ith

Example
w

The example below defines a loop that starts with i=0. The loop will
de

continue to run as long as iis less than, or equal to 5. i will increase
by 1 each time the loop runs:
co

Example

<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;

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

The do...while Loop

The do...while loop is a variant of the while loop. This loop will

94
execute the block of code ONCE, and then it will repeat the loop as long
as the specified condition is true.

21
Syntax
do

59
{
code to be executed
}

07
while (var<=endvalue);

Example

80
The example below uses a do...while loop. The do...while loop will always
be executed at least once, even if the condition is false, because the
statements are executed before the condition is tested:
.in
Example
ys
<html>
ra

<body>
<script type="text/javascript">
var i=0;
ar

do
{
ith

document.write("The number is " + i);

document.write("<br />");
i++;
w

}
while (i<=5);
de

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

The break Statement

The break statement will break the loop and continue executing the code
that follows after the loop (if any).

Example

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}

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

21
The continue Statement

59
The continue statement will break the current loop and continue with the

07
next value.

80
Example

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
.in
ys
{
if (i==3)
{
ra

continue;
}
ar

document.write("The number is " + i);

document.write("<br />");
ith

}
</script>
</body>
w

</html>
de

JavaScript For...In Statement

The for...in statement loops through the elements of an array or through

the properties of an object.

Syntax
for (variable in object)

{
code to be executed
}

Note: The variable argument can be a named variable, an array element, or

a property of an object.

Example

Use the for...in statement to loop through an array:

Example

94
<html>
<body>

21
<script type="text/javascript">
var x;

59
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";

07
mycars[2] = "BMW";

for (x in mycars)

80
{
document.write(mycars[x] + "<br />");
}
</script>

</body>
.in
</html>
ys
ra

JavaScript Events
ar

Events are actions that can be detected by JavaScript.

ith

By using JavaScript, we have the ability to create dynamic web pages.

Events are actions that can be detected by JavaScript.
w

Every element on a web page has certain events which can trigger a
de

JavaScript. For example, we can use the onClick event of a button element
to indicate that a function will run when a user clicks on the button. We
co

define the events in the HTML tags.

Examples of events:

● A mouse click
● A web page or an image loading
● Mousing over a hot spot on the web page
● Selecting an input field in an HTML form
● Submitting an HTML form
● A keystroke

onLoad and onUnload

The onLoad and onUnload events are triggered when the user enters or
leaves the page.

The onLoad event is often used to check the visitor's browser type and
browser version, and load the proper version of the web page based on the
information.

94
Both the onLoad and onUnload events are also often used to deal with
cookies that should be set when a user enters or leaves a page. For

21
example, you could have a popup asking for the user's name upon his first
arrival to your page. The name is then stored in a cookie. Next time the

59
visitor arrives at your page, you could have another popup saying
something like: "Welcome John Doe!".

07
onFocus,onClick onBlur and onChange

80
The onFocus, onBlur and onChange events are often used in combination
with validation of form fields.

Below is an example of how to use the onChange event. The checkEmail()

.in
function will be called whenever the user changes the content of the
field:
ys
<input type="text" size="30" id="email" onchange="checkEmail()">
ra

onSubmit
ar

The onSubmit event is used to validate ALL form fields before submitting
it.
ith

Below is an example of how to use the onSubmit event. The checkForm()

function will be called when the user clicks the submit button in the
form. If the field values are not accepted, the submit should be
de

cancelled. The function checkForm() returns either true or false. If it

returns true the form will be submitted, otherwise the submit will be
co

cancelled:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver and onMouseOut

onMouseOver and onMouseOut are often used to create "animated" buttons.

Below is an example of an onMouseOver event. An alert box appears when an

onMouseOver event is detected:

JavaScript Special Characters

In JavaScript you can add special characters to a text string by using
the backslash sign.

The backslash (\) is used to insert apostrophes, new lines, quotes, and
other special characters into a text string.

94
Look at the following JavaScript code:

var txt="We are the so-called "Vikings" from the north.";

21
document.write(txt);
In JavaScript, a string is started and stopped with either single or

59
double quotes. This means that the string above will be chopped to: We
are the so-called

07
To solve this problem, you must place a backslash (\) before each double
quote in "Viking". This turns each double quote into a string literal:

80
var txt="We are the so-called \"Vikings\" from the north.";
document.write(txt);
.in
JavaScript will now output the proper text string: We are the so-called
"Vikings" from the north.
ys
Here is another example:
ra

document.write ("You \& I are singing!");

The example above will produce the following output:
ar
ith

You & I are singing!

The table below lists other special characters that can be added to a
text string with the backslash sign:
w
de

Code Outputs
\' single quote
co

\" double quote

\& ampersand
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed

The String object is used to manipulate a stored piece of text.

Examples of use:

The following example uses the length property of the String object to find the length
of a string:

94
var txt="Hello world!";
document.write(txt.length);

21
The code above will result in the following output:

59
12
The following example uses the toUpperCase() method of the String object to
convert a string to uppercase letters:

07
var txt="Hello world!";

80
document.write(txt.toUpperCase());
The code above will result in the following output:

HELLO WORLD! .in

ys
JavaScript Array Object
What is an Array?
ra

An array is a special variable, which can hold more than one value, at a time.
ar

If you have a list of items (a list of car names, for example), storing the cars in
ith

single variables could look like this:

$cars1="Saab";
de

$cars2="Volvo";
$cars3="BMW";
However, what if you want to loop through the cars and find a specific one? And
co

what if you had not 3 cars, but 300?

The best solution here is to use an array!

An array can hold all your variable values under a single name. And you can access
the values by referring to the array name.

Each element in the array has its own ID so that it can be easily accessed.

The following code creates an Array object called myCars:

var myCars=new Array();

There are two ways of adding values to an array (you can add as many values as
you need to define as many variables you require).

94
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";

21
myCars[2]="BMW";
You could also pass an integer argument to control the array's size:

59
var myCars=new Array(3);
myCars[0]="Saab";

07
myCars[1]="Volvo";
myCars[2]="BMW";

80
2:

var myCars=new Array("Saab","Volvo","BMW");

Note: If you specify numbers or true/false values inside the array then the type of
.in
variables will be numeric or Boolean instead of string.
ys
Access an Array
ra

You can refer to a particular element in an array by referring to the name of the
array and the index number. The index number starts at 0.
ar

The following code line:

ith

document.write(myCars[0]);
w

will result in the following output:

Saab
Modify Values in an Array
co

To modify a value in an existing array, just add a new value to the array with a
specified index number:

myCars[0]="Opel";
Now, the following code line:

document.write(myCars[0]);

Opel

JavaScript Timing Events

With JavaScript, it is possible to execute some code after a specified time-interval.

This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

94
● setTimeout() - executes a code some time in the future
● clearTimeout() - cancels the setTimeout()

21
Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM

59
Window object.

The setTimeout() Method

07
Syntax

80
,milliseconds);
var t=setTimeout("javascript statement"
The setTimeout() method returns a value - In the statement above, the value is stored in a variable called
t. If you want to cancel this setTimeout(), you can refer to it using the variable name.

.in
The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could
be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
ys
The second parameter indicates how many milliseconds from now you want to execute the first parameter.
ra

Note: There are 1000 milliseconds in one second.

Example
ith

When the button is clicked in the example below, an alert box will be displayed after 5 seconds.
w

Example
de

<html>
<head>
<script type="text/javascript">
co

function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>

</body>
</html>

Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below,
when the button is clicked, the input field will start to count (for ever), starting at 0:

Example

94
<html>
<head>
<script type="text/javascript">

21
var c=0
var t
function timedCount()

59
{
document.getElementById('txt').value=c;
c=c+1;

07
t=setTimeout("timedCount()",1000);
}
</script>

80
</head>

</html>
ra
ar

The clearTimeout() Method

ith

Syntax
clearTimeout(setTimeout_variable)
w

Example
de

The example below is the same as the "Infinite Loop" example above. The only difference is that we have
now added a "Stop Count!" button that stops the timer:
co

Example

<html>
<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
{
document.getElementById('txt').value=c;

c=c+1;
t=setTimeout("timedCount()",1000);
}

function stopCount()
{
clearTimeout(t);
}
</script>
</head>

94
<input type="button" value="Start count!" onClick="timedCount()" />
<input type="text" id="txt" />
<input type="button" value="Stop count!" onClick="stopCount()" />

21
</form>
</body>

59
</html>

07
JavaScript Form Validation

80
JavaScript can be used to validate data in HTML forms before sending off the content to a server.

Form data that typically are checked by a JavaScript could be:

●
●
has the user left required fields empty?
has the user entered a valid e-mail address?
.in
● has the user entered a valid date?
ys
● has the user entered text in a numeric field?
ra

To check a empty field

var field_val=document.getElementById(‘fieldid’).value;
ith

if(field_val==””)
{
w

alert(“The Field is Empty”);

}
else
co

{
alert(“The Field is not Empty”);
}

------------------------------------------------------------------------------------------------------------
freelance_Project available to buy contact on 8007592194
SR.NOProject NAME Technology
1 Online E-Learning Platform Hub React+Springboot+MySql

94
2 PG Mates / RoomSharing / Flat Mates React+Springboot+MySql

21
3 Tour and Travel management System React+Springboot+MySql

4 Election commition of India (online Voting System) React+Springboot+MySql

59
5 HomeRental Booking System React+Springboot+MySql

07
6 Event Management System React+Springboot+MySql

7 Hotel Management System React+Springboot+MySql

80
8 Agriculture web Project React+Springboot+MySql
9 AirLine Reservation System / Flight booking System React+Springboot+MySql

.in
10 E-commerce web Project React+Springboot+MySql

ys
11 Hospital Management System React+Springboot+MySql

ra
12 E-RTO Driving licence portal React+Springboot+MySql
13 Transpotation Services portal

ar
React+Springboot+MySql
14 Courier Services Portal / Courier Management System React+Springboot+MySql

ith
15 Online Food Delivery Portal React+Springboot+MySql

94
24 Payroll Management System React+Springboot+MySql
25 RealEstate Property Project React+Springboot+MySql

21
26 Marriage Hall Booking Project React+Springboot+MySql
27 Online Student Management portal React+Springboot+MySql

59
28 Resturant management System React+Springboot+MySql
29 Solar Management Project React+Springboot+MySql

07
30 OneStepService LinkLabourContractor React+Springboot+MySql
31 Vehical Service Center Portal React+Springboot+MySql

80
32 E-wallet Banking Project React+Springboot+MySql
33 Blogg Application Project React+Springboot+MySql
34 Car Parking booking Project React+Springboot+MySql

.in
35 OLA Cab Booking Portal React+Springboot+MySql
36 Society management Portal React+Springboot+MySql

ys
37 E-College Portal React+Springboot+MySql
38 FoodWaste Management Donate System React+Springboot+MySql

ra
39 Sports Ground Booking React+Springboot+MySql

ar
40 BloodBank mangement System React+Springboot+MySql
41 Bus Tickit Booking Project React+Springboot+MySql

ith
42 Fruite Delivery Project React+Springboot+MySql
43 Woodworks Bed Shop React+Springboot+MySql

94
https://www.instagram.com/codewitharrays/

21
59
07
https://t.me/codewitharrays Group Link: https://t.me/cceesept2023

80
.in
+91 8007592194 +91 9284926333

ys
ra
ar
ith
[email protected]

w
de
co
https://codewitharrays.in/project

Unpack - Enigma 4.XX - 5.XX
No ratings yet
Unpack - Enigma 4.XX - 5.XX
38 pages
Builtin Object Token - GTS Root R1
No ratings yet
Builtin Object Token - GTS Root R1
12 pages
HTML Notes by HEERA
No ratings yet
HTML Notes by HEERA
111 pages
Chapter 2 HTML
No ratings yet
Chapter 2 HTML
170 pages
Chapter 2 HTML (2)
No ratings yet
Chapter 2 HTML (2)
170 pages
BIT3105 INTERNET PROGRAMMING Notes Final
No ratings yet
BIT3105 INTERNET PROGRAMMING Notes Final
161 pages
a1.3.0.0 INTRODUCTION TO WEBSITE DESIGNING
No ratings yet
a1.3.0.0 INTRODUCTION TO WEBSITE DESIGNING
25 pages
2text
No ratings yet
2text
5 pages
2 O-Level-Project-Html-Programe
No ratings yet
2 O-Level-Project-Html-Programe
35 pages
Project on HTML Savita Yadav
No ratings yet
Project on HTML Savita Yadav
40 pages
Ilovepdf Merged
No ratings yet
Ilovepdf Merged
304 pages
Structure of HTML Document
No ratings yet
Structure of HTML Document
9 pages
Complete HTML Handwritten Notes Oyj9ih
No ratings yet
Complete HTML Handwritten Notes Oyj9ih
57 pages
HTML
No ratings yet
HTML
57 pages
HTML Tutorial
No ratings yet
HTML Tutorial
49 pages
HTML&CSS Bells
No ratings yet
HTML&CSS Bells
230 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
Unit -3 HTML Introduction
No ratings yet
Unit -3 HTML Introduction
27 pages
HTML_Unique_Topics_Slides
No ratings yet
HTML_Unique_Topics_Slides
71 pages
HTML & Css Mcit
No ratings yet
HTML & Css Mcit
161 pages
UNIT 2.1
No ratings yet
UNIT 2.1
131 pages
HTML Material
100% (2)
HTML Material
17 pages
Web Programming HTML
No ratings yet
Web Programming HTML
48 pages
HTML Hyper Text Markup Language
No ratings yet
HTML Hyper Text Markup Language
30 pages
HTML Basics: This Work Is Licensed Under A
No ratings yet
HTML Basics: This Work Is Licensed Under A
83 pages
HTML2
No ratings yet
HTML2
154 pages
Head Element HTML
No ratings yet
Head Element HTML
8 pages
HTML
No ratings yet
HTML
55 pages
Ecommerce Technologies File
No ratings yet
Ecommerce Technologies File
48 pages
WST Notes-HTML
No ratings yet
WST Notes-HTML
11 pages
Training Course
No ratings yet
Training Course
51 pages
HTML Training by Thiru
No ratings yet
HTML Training by Thiru
122 pages
HTML
No ratings yet
HTML
45 pages
HTML Notes by Heera
No ratings yet
HTML Notes by Heera
135 pages
HTML Intro
No ratings yet
HTML Intro
29 pages
Web Design
No ratings yet
Web Design
103 pages
HTML Layouts, Fonts, Styles , Head and Meta
No ratings yet
HTML Layouts, Fonts, Styles , Head and Meta
19 pages
Module1 HTML Doc
No ratings yet
Module1 HTML Doc
192 pages
Introducing HTML
No ratings yet
Introducing HTML
431 pages
Website Development
No ratings yet
Website Development
193 pages
Intro - To - HTML PDF
No ratings yet
Intro - To - HTML PDF
48 pages
7521ebb5aedd240dea29ec421a864757
No ratings yet
7521ebb5aedd240dea29ec421a864757
33 pages
HTML
No ratings yet
HTML
28 pages
The Main Parts of Our Element Are:: FCM Private Iti
No ratings yet
The Main Parts of Our Element Are:: FCM Private Iti
2 pages
HTML Notes Unit 2
No ratings yet
HTML Notes Unit 2
33 pages
Chapter 1 Introduction to Web Technology
No ratings yet
Chapter 1 Introduction to Web Technology
134 pages
IT 123 (Week 01)
No ratings yet
IT 123 (Week 01)
12 pages
HTML
No ratings yet
HTML
68 pages
Class - 10 HTML-1
No ratings yet
Class - 10 HTML-1
62 pages
WEB Manual
No ratings yet
WEB Manual
34 pages
INTRO TO WEB PROGRAMMING
No ratings yet
INTRO TO WEB PROGRAMMING
60 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
HTML
No ratings yet
HTML
52 pages
Web Programming (2)
No ratings yet
Web Programming (2)
178 pages
Wad Lab Programs
No ratings yet
Wad Lab Programs
28 pages
HTML Introduction
No ratings yet
HTML Introduction
5 pages
Lab Manual No 02
No ratings yet
Lab Manual No 02
29 pages
Web Technologies Basics: Imran Khan
No ratings yet
Web Technologies Basics: Imran Khan
82 pages
Wit Unit2
No ratings yet
Wit Unit2
9 pages
Unit 2-Web Technologies - HTML
No ratings yet
Unit 2-Web Technologies - HTML
45 pages
Website Design
No ratings yet
Website Design
70 pages
Implementing Linkerd Service Mesh
From Everand
Implementing Linkerd Service Mesh
Kimiko Lee
No ratings yet
01.01.1 The Modern Flexbox, Grid, Sass & Animations Developer Course Resources
No ratings yet
01.01.1 The Modern Flexbox, Grid, Sass & Animations Developer Course Resources
3 pages
ROHIT JINDAL FINAL WORK - Rohit Jindal
No ratings yet
ROHIT JINDAL FINAL WORK - Rohit Jindal
42 pages
Chapte 2 HTML 2021 V-F
No ratings yet
Chapte 2 HTML 2021 V-F
179 pages
Jadwal Shalat Berjamaah Siswa
No ratings yet
Jadwal Shalat Berjamaah Siswa
13 pages
erased_log_by_sos
No ratings yet
erased_log_by_sos
28 pages
Infile Statement
No ratings yet
Infile Statement
22 pages
(Gandhi) (Malayalam Drama) (PDFDrive)
No ratings yet
(Gandhi) (Malayalam Drama) (PDFDrive)
235 pages
Write HTML Code To Get The Following Output
No ratings yet
Write HTML Code To Get The Following Output
9 pages
%PDF-1.4 1 0 Obj /count 70 /kids
No ratings yet
%PDF-1.4 1 0 Obj /count 70 /kids
1,812 pages
fsaveddfeed
No ratings yet
fsaveddfeed
206 pages
HTML Interview Question
No ratings yet
HTML Interview Question
2 pages
A Summer Training Project Report - PDF
No ratings yet
A Summer Training Project Report - PDF
25 pages
E10 Powerpoints
No ratings yet
E10 Powerpoints
28 pages
DHTML Tutorial
No ratings yet
DHTML Tutorial
4 pages
Login HTML
No ratings yet
Login HTML
2 pages
Log
No ratings yet
Log
13 pages
JX10 MKS70 Collection-B
No ratings yet
JX10 MKS70 Collection-B
6 pages
ISO 8678:1988. Current. 15 Jun 1988 ... Standard Preview. A Limited Section of This Standard Has Been Made Available To Preview As A PDF Download.
No ratings yet
ISO 8678:1988. Current. 15 Jun 1988 ... Standard Preview. A Limited Section of This Standard Has Been Made Available To Preview As A PDF Download.
2 pages
Third Party Docs
No ratings yet
Third Party Docs
8 pages
Topic 7 HTML Images PDF
No ratings yet
Topic 7 HTML Images PDF
17 pages
Prometheus. Atlas Musculos
No ratings yet
Prometheus. Atlas Musculos
70 pages
Emmet CheatSheet
100% (1)
Emmet CheatSheet
24 pages
Writing Papers With Markdown - Ieee PDF
No ratings yet
Writing Papers With Markdown - Ieee PDF
6 pages
DX Diag
No ratings yet
DX Diag
26 pages
What Is Semantic HTML
No ratings yet
What Is Semantic HTML
11 pages
Flanders Et Al. - XSLT - Transforming Our XML Data (2016)
No ratings yet
Flanders Et Al. - XSLT - Transforming Our XML Data (2016)
27 pages
Structure of Wav Audio Files
No ratings yet
Structure of Wav Audio Files
3 pages
Search: Explore by Content Type
0% (2)
Search: Explore by Content Type
10 pages