Scribd
Upload
62 views

WT HTML

The document provides an introduction to HTML (Hypertext Markup Language). It discusses the history and components of HTML, including important tags such as <html>, <head>, <body>, and other tags for formatting text and paragraphs. It also covers HTML attributes, document structure, comments, and other basic elements for creating web pages with HTML.

Uploaded by

mouni satti
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

WT HTML

The document provides an introduction to HTML (Hypertext Markup Language). It discusses the history and components of HTML, including important tags such as <html>, <head>, <body>, and other tags for formatting text and paragraphs. It also covers HTML attributes, document structure, comments, and other basic elements for creating web pages with HTML.

Uploaded by

mouni satti
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 84

Web Technologies

UNIT-I

HTML tags, Lists, Tables, Images, forms, Frames. Cascading style sheets.
Introduction to Java script. Objects in Java Script. Dynamic HTML with Java Script
⮚ Introduction to HTML

● HTML is a language for describing static web pages.


● HTML stands for Hyper Text Markup Language
● HTML is a subset of SGML (Standard General Markup Language).
● It is used to define the layout and attribute of a World Wide Web document as well as to
create links between web pages.
● HTML is not a programming language, it is a markup language
● A markup language is a set of markup tags
● The purpose of the tags is to describe page content.

Hypertext: Hypertext is simply a piece of text that works as a link.


Markup language: It is language of writing layout information within the web
documents.

⮚ History of HTML
● HTML was originally developed by Tim Berners-Lee while at CERN, and popularized
by the Mosaic browser developed at NCSA.
● HTML standards are created by group of interested organizations and individuals called
W3C (World Wide Web Consortium). There have now been three official HTML
standards:
● HTML 2.0 was released in 1994 and remains the baseline for backwards compatibility
and should be supported by all browsers.
● HTML 3.2 was released in 1996 with many useful additions
● HTML 4.0 was released in 1997 and slightly amended in 1999
● Now, The current version is HTML 5.0 was released in 2012 .later HTML 5.1 was
released in 2015
● Advantages of HTML:
1. It is widely used.
2. Easy to learn and use.
3. It is error-free language
4. Every browser supports HTML language.
5. It is by default in every windows so you don't need to purchase extra software.

Page 1
Web Technologies

● Disadvantages of HTML:
1. It can create only static and plain pages so if we need dynamic pages then HTML
is not useful.
2. Need to write lot of code for making simple webpage.
3. Security features are not good in HTML.

● Web Documents:

o HTML documents are web documents


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

⮚ HTML Tags
● HTML markup tags are usually called HTML tags
● HTML tags are keywords (tag names) surrounded by angular brackets like <html>
● HTML tags normally come in pairs like <b> and </b>
● The first tag in a pair is the start tag, the second tag is the end tag
● The end tag is written like the start tag, with a forward slash before the tag name
● Start and end tags are also called opening tags and closing tags
● HTML language is not case sensitive; hence user can write the code in either upper case
or lower case. No difference between <HTML>, <html> and <hTmL>
● Every HTML document begins with <HTML>, terminates with an </HTML>
● HTML documents should be saved with the extension .html or .htm.

Syntax of a tag:
< tag name [parameter=value]>

● HTML Attributes:

o HTML elements can have attributes


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

Example:

Page 2
Web Technologies

HTML links are defined with the <a> tag. The link address is specified in the href
attribute:
< a href="http://www.w3schools.com">This is a link</a>

● HTML Document Structure:

<!DOCTYPE……..>
<html>

<head>
<title> Title of the page </title>
</head>
<body>
// Content of the web page

</body>
</html>
Example:

<html>
<head>
<title>First web page</title>
</head>
<body bgcolor="pink">
<center>
<font size=30><p>Welcome to my Home Page </p></font>
</center>
</body>
</html>

The DOCTYPE:
o It specifies the document type.
o The document type is specified by the Document Type Definition ( DTD ).

Page 3
Web Technologies

The <html> element


o The <html> element defines the whole HTML document.
o The element has a start tag <html> and an end tag </html>.
The <head> section:
o In this section we can specify the title of the web page by <title> element.
The <body> element:
o The <body> element defines the body of the HTML document.
o The element has a start tag <body> and an end tag </body>.

● HTML Comments:
o Comments can be inserted into the HTML code to make it more readable and
understandable.
o Comments are ignored by the browser and are not displayed.
o HTML comment begins with “<!--“ and ends with “-->”.
o There should not be a space between angular bracket and exclamation mark. Each
comment can contain as many lines of text as you like. If comment is having
more lines, then each line must start and end with -- and must not contain --
within its body.
<! -- this is a single line comment line - ->
<! -- this is a multiline comment --
-- spawned over --
-- three line -->

● HTML Character -Formatting Elements:


We can use character formatting tags to format a text block that is as small
as a single character or as large as an entire document. Some of the most frequently
used Character-formatting tags are :
1. Boldface tag
o This tag is used for implement bold effect on the text
<b> ……. </b>
2. Italic tag
o This implements italic effects on the text.
<i>…….</i>
3. Underline tag
o This is used to specify that the selected text be displayed with underline.

Page 4
Web Technologies

<u>. . . </u>
4. Big tag
o This is to specify that the selected text be displayed as bigger font size as
compared to the font for the rest of the text.
<big>. . .</big>
5. Small tag
o This is to specify that the selected text be displayed as smaller font size as
compared to the font for the rest of the text.
<small>. . .</small>
6. strong tag
o This tag is used to always emphasized the text
<strong>. . . </strong>
7. sub and sup tag
o These tags are used for subscript and superscript effects on the text.
<sub>. . .</sub>
<sup>. . .</sup>

● HTML Block-formatting tags:


We can use following tags to format blocks of text within HTML document.
Some of the most frequently used Block-formatting tags are :

1. Body tag (<body>)


o Body tag contains some attributes such as bgcolor, background etc.
o bgcolor is used for setting the background color of a webpage which takes
background color name or hexadecimal number such as #000000 to #FFFFFF
o background attribute used for setting mage as a background for webpage and it
will take the path of the image which you can place as the background image in
the browser.
Syntax:
<body bgcolor=”name/#rrggbb” background=”image name”> . . . </body>
Example:
<body bgcolor=”#F2F3F4” background= “c:\vijay\image.jpg”>...</boby>

2. Paragraph tag (<p>)


o HTML documents are divided into paragraphs.
o Paragraphs are defined with the <p> tag.
o Most text is part of a paragraph of information. Each paragraph is aligned to the
left, right or center of the page by using an attribute called as align.

Page 5
Web Technologies

Syntax:
<p [align=”left” | “right” | “center”] > . . . </p>
Example:
<p align=“right”>This is a paragraph</p>
<p>This is another paragraph</p>

3. Heading tag(<Hn>)
o HTML is having six levels of heading that are commonly used.
o The largest heading tag is <h1>.
o The different levels of heading tags are <h1> ,<h2>, <h3>, <h4>, <h5> <h6>.
o Each heading tag has an attribute called as align which can be set to left, center,
or right. By default all headings align left.
Syntax:
<h1 [align=”left” | “right” | “center”]> . . . </h1>
<h2 [align=”left” | “right” | “center”]> . . . </h2> ……….
<h6 [align=”left” | “right” | “center”]> . . . </h6>

Example:

<html>
<head>
<title> Headings</title>
</head>
<body bgcolor="pink">
<h1 align="left">This is a 1st heading</h1>
<h2 align="right">This is a 2nd heading</h2>
<h3>This is a 3rd heading</h3>
<h4>This is a 4th heading</h4>
<h5 align="center">This is a 5th heading</h5>
<h6>This is a 6th heading</h6>
</body>
</html>

Page 6
Web Technologies

4. <hr> tag
o This tag places a horizontal line across the screen.
o These lines are used to break up the page.
o This tag does not require an end tag.
o This tag also contains attributes which determines how the rule will be displayed.
o It can be aligned but by default is centered on the screen.
o The size attribute specifies the thickness of the rule in pixels.
o noshade draws the rule as a single thick line rather than giving it‟s default 3D
appearance.
Syntax:
<hr align=”left” | “right” | “center” size=”n” [noshade]/>.
Example:
<html>
<head>
<title> Horizontal lines</title>
</head>
<body bgcolor="pink">
<p>This is a paragraph</p>
<hr align="right" size="10"/>
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>

Page 7
Web Technologies

5. base font
o This specify the minimum text size for the entire webpage but not the headings.
<basefont size=”n”>
6. tt tag
o This tag is used to give typewriting effect on the text
<tt>. . .</tt>
7. Line break tag
o This tag is used to the break the line and start from the next line.
o It is an empty tag.
<br/>
8. Pre-formatted text tag
o It Considers spaces, new lines etc. and as it is prints the information.
<PRE>. . .</PRE>
9. MARQUEE Tag:
o This is to create scrolling effect for the selected text in an HTML Page.
o When using this tag, the selected text is highlighted and scrolls from right to left
and vice versa.
Syntax:
<marquee> . . .</marquee>
10. font tag
o This sets font type, size, color and relative values for a particular text.
o Absolute font sizes are can be set from 1 to 7.
o Relative font sizes are set by using +/- 1 to 7.
o The color of the text is set by color attribute. This takes hex value which
represents the amounts of red, green and blue in a chosen color.

Page 8
Web Technologies

Syntax:
< font face=”font name ” size=”[+|-]n” color=”#rrggbb”>
● face: The style of the letter can be specified like arial, times new roman etc…
● size: The size can be specified .
● color: The color of the text to be displayed is specified through the color
attribute.
11. color tag:

o We can set the color to the text as well as to the background also.
o To set color to background the syntax is:
<body bgcolor=”color”>
Example:
<html>
<body bgcolor="yellow">
<font face=”arial” size=40 color=”green” >Welcome to Home
page</font>
</body>
</html>

12.Hyperlinks
o The real power and flexibility of HTML is in Hyperlinks.
o Hyperlinks are created with anchor tag(<a>)
o We can use hyperlink to
1. create links with HTML pages
2. link different HTML pages
3. access services at other Internet sites
Anchor tag:
o The anchor tag is created by <a> . . .</a> tags.
o The tag has three sections: the address of the referenced document, a piece of text
displayed as link, and the closing tag.
Syntax:
<a href=”address”> Text </a>
o href means Hypertext references that can be used for giving the path of a file
which you want to link.

Page 9
Web Technologies

o The “Text” between the <a> . . . </a> tags acted as a hyperlink. This text is
called “hypertext”. When we click on this text, the linked page or file will be
displayed.
o We can also replace this text with image. In that case, the image will act as a
hyperlink.

first.html
<html>
<head> <title> Navigation </title> </head>
<body>
<a href=”second.html”>Next Page</a>
</body>
</html>
⮚ LISTS
● List is a collection of items.
● Types of lists are
▪ Ordered lists
▪ Unordered lists
▪ Nested lists
▪ Directory lists
▪ Definition lists
● Ordered Lists
o Ordered lists are also called as Numbered lists or Sequenced lists.
o In Ordered list, the list of items has an order that is signified by numbers, hence
called as a numbered list.
o An ordered list should start with <OL> element, which is immediately followed by
a <LI> and end of ordered list is specified by </OL> element.
o Different ordered list types like numeral list; alphabet list etc can be specified with
TYPE tag.

Page
10
Web Technologies

o Optional parameter with <OL> tag is START attribute, which indicates the starting
number or alphabet.
Syntax:
<OL [type={“1” or “I”or “A” or “a” or “i”}] START=n>
<LI>item1
<LI>item2
:
:
<LI>item n
</OL>

Different Ordered list types


Type=”1” (default) e.g.1,2,3,4…..
Type=”A” Capital letters e.g.A,B,C…
Type=”a” Small letters e.g. a,b,c……
Type=”I” Large roman letters e.g. I, II, III,…
Example :

<html>
<head>
<title> Ordered Lists </title>
</head>
<body>
<h4>Microsoft packages</h4>
<ol type="1">
<li>Wordpad
<li>Powerpoint
<li>MS-Excel
</ol>
<h4>Lists</h4>
<ol type="A" start=25>
<li>Ordered list
<li>Unordered list
<li>Nested list
</ol>
<h4>Scripting languages</h4>
<ol type="I" start=4>

Page
11
Web Technologies

<li>Java Script
<li>JScript
</ol>
<h4>Database applications</h4>
<ol type="i" start=5>
<li>SQl
<li>MySql
<li>Oracle
</ol>
</body>
</html>

● Unordered List
o Unordered lists are also called as UnNumbered lists .
o The unordered list items are used to present a list of items, which are typically
separated by white space/ or marked by bullets.
o An unordered list should start with <UL> element, which is immediately followed
by a <LI> and end of ordered list is specified by </UL> element.

Page
12
Web Technologies

o TYPE attribute can also be added to <UL> tag that it indicates that the displayed
bullet along with the list of items circle, square or disk.
o By default it is disc.
o Syntax:
<UL [type={square or disc or circle}] >
<LI>item1
<LI>item2
:
:
<LI>item n
</UL>

Example :

<html>
<head>
<title> UnOrdered Lists </title>
</head>
<body>
<h4>Microsoft packages</h4>
<ul>
<li>Wordpad
<li>Powerpoint
<li>MS-Excel
</ul>
<h4>Lists</h4>
<ul type="square">
<li>Ordered list
<li>Unordered list
<li>Nested list
</ul>
<h4>Scripting languages</h4>
<ul type="circle”>
<li>Java Script

Page
13
Web Technologies

<li>JScript
</ul>
<h4>Database applications</h4>
<ul type="disc" >
<li>SQl
<li>MySql
<li>Oracle
</ul>
</body>
</html>

● Nested List:
o Both ordered list and unordered list are used.
Example:
<html>
<head>
<title> Nested Lists </title>

Page
14
Web Technologies

</head>
<body>
<h4>Cources Offered</h4>
<ol type="A">
<li>CSE
<ul type="square">
<li>Compiler Design
<li>Computer Networks
<li>Operating systems
</ul>
<li value=5>IT
<ul>
<li>WebTechnologis
<li>Software Engineering
<li>Operating systems
</ul>
<li>ECE
<ul>
<li>Compiler Design
<li>Computer Networks
<li>Operating systems
</ul
</ol>
</body>
</html>

● Directory List
o A Directory list element is used to present a list of items containing up to 20
characters each.
o A directory list must start with <DIR> element, which s immediately followed by
<LI> element.
<html>
<head>
<title>Definition List</title>
</head>
<body>
<DIR>

Page
15
Web Technologies

<li>123456789
<li>123456789
</DIR>
</body>
</html>
● Definition List
o A definition list is a list of Definition terms.
o To create definition list it must start with <DL> and immediately followed by
<DT> tag
<html>
<head>
<title>Definition List</title>
</head>
<body>
<DL>
<DT>HTML</DT>
<DD> HTML is a scripting language which is used to create web pages</DD>
<DT>JAVA </DT>
<DD>Java is an Object-Oriented Programming Language </DD>
</DL>
</body>
</html>

⮚ TABLES

Page
16
Web Technologies

● Tables are defined with the <table> tag.


● A table is divided into rows with the <tr> tag
● Each row is divided into data cells with the <td> tag.
● td stands for "table data," and holds the content of a data cell.
● A <td> tag can contain text, links, images, lists, forms, other tables, etc.
● Header information in a table are defined with the <th> tag.
● All major browsers display the text in the <th> element as bold and centered
● We can use various elements to specify the details of a table. Many table elements also
take attributes, which allows you to further specify the look of the table.
o TABLE , Table row ,Table data , Table Heading
● The TABLE Element
o The TABLE element is the container element for table and uses the
<TABLE>...</TABLE> tags to enclose all the other table tags.
o If the <TABLE> tag is omitted or not closed, the browser ignores all the other tags
that you specify for the table.
o Everything that we write between these two tags will be within a table.
o The attributes of the table will control in formatting of the table.
The <TABLE> tag has the following attributes:
1. align: used to specify the alignment of a table in a HTML page.
2.border: used to specify the thickness of the table border in pixels.
3.bgcolor: used to specify the background color for the table.
4. frame: used to specify the which side of the outer border is visible in the browser. We
must specify the border attribute before you specify the FRAME attribute.

Page
17
Web Technologies

5. rules: used to specify the borders between cells. You must specify the border
attribute before you specify the FRAME attribute.

6.cellspacing: used to specify the spacing between cells in pixels.


7.cellpadding: used to specify the spacing between cell content and cell wall in pixels. .
8.height: used to specify the height of table in pixels or %.
9.width: used to specify the width of table in pixels or %.

Syntax:
<TABLE align=”left | right | center”
border=”n”
bgcolor=”#rrggbb”
cellspacing=”n”
cellpadding=”n”
frame=”value”
rules=”value”
height=”n | %”
width=”n | %”>
</TABLE>

● The Table row element

Page
18
Web Technologies

o Table row element is used to create rows in a table.


o The Table row element uses the <TR> tag to create a row.
o The <TR> tag has the following attributes:
▪ align: used to specify the horizontal alignment of the contents for cells of a row.
▪ valign: used to specify the vertical alignment of the cell content for all cells of
the row.
▪ bgcolor: used to specify the background color of the row.

Syntax:
<TR align=”left | right | center”
valign=”top | bottom |middle”
bgcolor=”#rrggbb” > ….. </TR>

● The Table data element

The <TD> tag has the following attributes:


▪ colspan: used to specify the number of columns the cell can span.
▪ rowspan: used to specify the number of rows the cell can span
▪ align: used to specify the horizontal alignment of the data within a cell.
▪ valign: used to specify the vertical alignment of data within the cell.
▪ bgcolor: used to specify the background color of the cell.

Syntax:
<TD align=”left | right | center”
valign=”top | bottom |middle”
bgcolor=”#rrggbb”
colspan=”n”
rowspan=”n”> ….. </TD>

Example:
<body bgcolor="pink">
<center>
<table border="2" width=300 height=300>

Page
19
Web Technologies

<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> </center> </body>

Example for <caption> tag:

<html>
<body bgcolor="pink">
<center>
<table border="1" width=300 height=300>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>

Page
20
Web Technologies

<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</center>
</body>
</html>

Cell padding:

Cell padding is the white space between content and its borders.

Example:

<html>
<body bgcolor="pink">
<center>

<h4>Without cellpadding:</h4>

<table border="1" height=200 width=200>


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

<h4>With cellpadding:</h4>

<table border="1" cellpadding="10" height=200 width=200>

Page
21
Web Technologies

<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</center>
</body>
</html>

Cell Spacing:

Cell spacing is the space between the cells.

Example:

<html>
<body bgcolor="pink">
<center>
<h4>Without cellspacing:</h4>

<table border="1" height=100 width=100>


<tr>

Page
22
Web Technologies

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

<h4>With cellspacing="0":</h4>

<table border="1" cellspacing="0" height=100 width=100>


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

<h4>With cellspacing="10":</h4>

<table border="1" cellspacing="10" height=100 width=100>


<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</center> </body></html>

Page
23
Web Technologies

<html>
<head>
<title> table page</title>
</head>
<body>
<table align="left" cellpadding="2" cellspacing="2" border="3" bgcolor="pink">
<tr>
<th colspan="4"> Sample Table</th>
</tr>
<tr>
<th>HEAD1</th>
<td rowspan="3">CELL2</td>
<th>HEAD3</th>
<th>HEAD4</th>
<tr>
<td>CELL1</td> <td> CELL3</td> <td> CELL4</td>
</tr>
<tr>
<td>CELL5</td>
<td colspan="2" align="center"> CELL6</td>
</tr>
</table> </body> </html>

Page
24
Web Technologies

⮚ IMAGES
● Images are second aspect of pleasant Web experience.
● We can add images to an HTML page to either improve its appearance or present
important information.
● To add images to an HTML page, we can use several image formats. These formats
include „gif‟, „jpg‟ and „png‟.
● Images can be added in two different ways:
1. By using „background‟ attribute of <body> tag
2. By using <img> tag
● The <BODY> Tag: background attribute
o We can use the background attribute of the <BODY> tag to add image as a
background in an HTML page.
Syntax:
<body background = “URL”>. . .</body>
● The Image tag
o We can use image tag in an HTML page to add images along with text.
o An image added using the image tag occupies space within the HTML page.
o To add image to HTML page, use <img> tag.
Syntax:
<img src=”URL” height=”n” width=”n” align = “left” | “right” | “top”|”middle”
alt = ” string ” border=n >
Attributes:
a) src :
o The important parameter is SRC, because it specifies the location of the
source file
o If the file is included in the current directory, no need to specify the path
otherwise given the entire path.
o We can also use uniform resource locator(URL).

Page
25
Web Technologies

b) align : used to specify the vertical alignment of an image


c) height : used to specify the vertical area that an image will occupy in HTML page
d) Width : used to specify the horizontal area that an image will occupy in HTML page
e) alt : used to specify the text when browser unable to display the image or image not
available.
f) border: Specifies the border width along the image.
● Advantages
o Images Plays an important role in web documents.
o The total look of a web page is improved by using images.
o Another advantage of using images is images can be used as hyperlinks.
Example:
<a><img src=”waterfall.jpg” border=2 alt=”welcome” height=100 width=100 ><a/>
Sample Program:
<html>
<head>
<title>Images</title>
</head>
<body bgcolor="green">
<center>
<img src="Sunset.jpg" border=2 alt="welcome" height=300 width=300>
</center> </body>
</html>

Example:
<html>
<head>
<title>Images</title>
</head>

Page
26
Web Technologies

<body bgcolor="yellow" background="Water lilies.jpg">


<center>
<font color="red">
<p>Images as a Background</p>
</font>
<img src="Sunset.jpg" border=5 alt="welcome" height=300 width=300>
</center>
</body>
</html>

⮚ FORMS

● HTML provides several user interactive elements such as label, text fields, buttons,
radio button, check box, combo box, list box, text area and password fields.
● The <form> tag is used to create forms.
● The important attributes of <form> tag are METHOD and ACTION.
● Method:
o This parameter specifies how the data entered in form is sent to the destination,
which may be a server.
o There are two method of sending information. 1.POST
2. GET
POST METHOD GET METHOD
Sends the information along with the body
Sends the data along with web page
of html page. address that is appended to URL.
Data is not visible while sending Data is visible in site address
Provides security No security
Can sent any number of characters Limited number of characters
Special characters also possible Only standard characters.
● Action:
o This parameter indicates path to this script.
o When the user submits the form, where it should go is given in Action parameter
● Labels
o HTML is not provides any separate tag for label.

Page
27
Web Technologies

o The text which is preceded by the interfacing element is taken as a label.


● Text field
o Text is typically required to place one line string.
o Text fields can be created by using <input>tag.
o Syntax: <input type=”text” size=n name=”text name”>
Example:
<body bgcolor="pink">
<center>
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
</center>
</body>

Output:
First name:
Last name:
● Button
There are three types of buttons
o Button
Syntax: <input type=button value=”click me”>
o Submit
Syntax: <input type=submit value=”submit”>
o Reset
Syntax: <input type=reset value=”clear”>
Example:

<body bgcolor="pink">
<center>
<form name="input" action="tablespace.html" method="get">
Username: <input type="text" name="user" /></br></br>

Page
28
Web Technologies

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


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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


</form> </center>
</body>

● Radio buttons

o To display set of option to user, where he can select one among them, radio buttons
are used.
Syntax: <input type=”radio” name=”text name” value=”text” checked>
o All the name attributes of group of radio buttons must be same and all the value
attributes are different.
o Value indicates the value that is stored while selecting particular button, which
returns to name of group.
o Checked parameter indicates the initial selection that we give as default.
Example:
<body bgcolor="pink">
<center>
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
</center>
</body>

Page
29
Web Technologies

● Checkboxes
o These are similar to radio buttons as we can select more than one option among the
options.
Syntax: <input type=”checkbox” name=”text name” value=”text” checked>
Example:
<body bgcolor="pink">
<center>
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a
bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
</center>
</body>
Output:
I have a bike
I have a car
● Combo box
o Combo box displays one at a time and by clicking on combo arrow displays other
options available.

Syntax: <select>
<option>
<option>
</select>
● Textarea
o Textarea is typically required to place multi line string.
Syntax: <textarea name=”text name” cols=n rows=n> </teaxtarea>
Example:
<body bgcolor="pink">
<center>
<form>
Enter adress: <textarea rows=10 cols=5></textarea>
</form>
</center> </body>
● Password field

Page
30
Web Technologies

o When user typed the information in a text field it is displayed as it is.


o If we want to display it in encoded form, use the password field.
o Syntax: <input type=”password” name=”pwd” size=n >
Example:

<body bgcolor="pink">
<center>
<form>
Password: <input type="password" name="pwd" />
</form>
</center> </body>

Output:
Password:
Sample Program:
<html>
<head>
<title>Creation of Forms</title>
</head>
<body bgcolor="pink">
<center>
<u><h2> Registration page</h2></u>
<form name="form1" action="tablespace.html" method="post">
<table border=0>
<tr>
<td> First Name </td>
<td><input type="text" size=10 name="fstname"></td>
</tr>
<tr>
<td>Last Name </td>
<td><input type="text" size=10 name="lstname"></td>
</tr>
<tr>
<td> Gender</td>
<td> <input type="radio" name="sex" value="M" checked> Male
<input type="radio" name="sex" value="F" > Female </td>
</tr>
<tr>

Page
31
Web Technologies

<td> Address</td>
<td><textarea name="address" cols=15 rows=5></textarea></td>
</tr>
<tr>
<td> Interested Games</td>
<td> <input type="checkbox" name="ch1" value="text" checked>Cricket
<input type="checkbox" name="ch2" value="text">Volleyball
<input type="checkbox" name="ch3" value="text" >Chess </td>
</tr>
</table></br>
<input type="submit" value="submit">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // For
Space..
<input type="reset" value="reset">
</form>
</center>
</body>
</html>

FRAMES:

● Frames are not supported in HTML5.


● A frame provides a facility to display one page at a time.
● Collection of these frames into a set provides a facility to display more than one page at
a time on browser and is referred as a frameset.
● A Frameset is a collection of frames.

Page
32
Web Technologies

● A web page containing frame elements is called a framed page.


● A framed page begins with <frameset> & ends with </frameset> tag.
● Each individual frame is identified through <frame> tag.

Example1: Vertical Frames:

first.html:

<html>
<body bgcolor="pink">
<font size=5> <p>This is first frame</p> </font>
</body>
</html>
second.html:
<html>
<body bgcolor="pink">
<font size=5> <p>This is second frame</p> </font>
</body>
</html>
frame.html:
<frameset cols="45%,55%">
<frame name="fr1" src="first.html" noresize scrolling="yes">
<frame name="fr1" src="second.html" noresize>
</frameset>

Example2: Horizontal Frames:


first.html:
<html>
<body bgcolor="pink">
<font size=5><p>This is first frame</p></font>
</body></html>

Page
33
Web Technologies

second.html:
<html>
<body bgcolor="pink">
<font size=5><p>This is second frame</p></font></body>
</html>
third.html:

<html>
<body bgcolor="pink">
<font size=5><p>This is third frame</p></font>
</body>
</html>
frame.html:
<frameset rows="25%,45%,*">
<frame name="fr1" src="first.html" noresize>
<frame name="fr1" src="second.html" noresize>
<frame name="fr1" src="third.html" noresize>
</frameset>

Nested Frames:

first.html:
<html>
<body bgcolor="pink">
<font size=5><p>This is first frame</p></font>
</body>
</html>
second.html:
<html>
<body bgcolor="pink">
<font size=5><p>This is second frame</p></font>

Page
34
Web Technologies

</body></html>
third.html:
<html>
<body bgcolor="pink">
<font size=5><p>This is third frame</p></font></body>
</html>
link.html:
<html>
<body bgcolor="cyan">
<font size=5 color="green">
<a href="first.html" target="first">first frame</a></br>
<a href="second.html" target="second">second frame</a></br>
<a href="third.html" target="third">third frame</a>
</font>
</body></html>
frame.html:
<frameset cols="30%,*">
<frame name="fr1" src="link.html" noresize>
<frameset rows="25%,45%,*">
<frame name="first" noresize>
<frame name="second" noresize>
<frame name="third" noresize>
</frameset>
</frameset>

⮚ LINKS & NAVIGATION


● Links are found in nearly all Web pages.
● Links allow users to click their way from page to page
● A hyperlink (or link) is a word, group of words, or image that we can click on to jump
to a new document or a new section within the current document.
● Hyperlink in web pages allows that page to link logically with other page.

Page
35
Web Technologies

● When we move the cursor over a link in a Web page, the arrow will turn into a little
hand.
● Links are specified in HTML using the <a> tag.
❖ The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute


2. To create a bookmark inside a document, by using the name attribute

Syntax:
<a href="url">Link text</a>
Example:
<a href="http://www.w3schools.com/">Visit W3Schools</a>
Example:
<html>
<head>
<title> Links </title>
<head>
<body bgcolor="cyan">
<font color="green">
<u><center> Links & Navigation </center> </u>
</font>
<a href="images.html">Click Here </a>
</body>
</html>

● Images can also used as links


Syntax:
<a href="url"><img src=”filename/path” /></a>
⮚ HTML Links - The target attribute
● The target attribute specifies where to open the linked document.

Page
36
Web Technologies

value meaning
_self Loads page in current window
_blank Loads the page into a new separate browser window
_parent Loads the page into the frame that is superior to the
frame the residing link
_top Cancels all the frames and loads in full browser window
Syntax:
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Example:
<html>
<head>
<title> Links </title>
<head>
<body bgcolor="cyan">
<font color="green">
<u><center> Links & Navigation </center> </u>
</font>
<font size=20><a href="images.html" target="_blank">Click Here </a></font>
</body>
</html>

● Advantages of Links:

Page
37
Web Technologies

o Hyperlink in web pages allows that page to link logically with other page.
o Use of links enhances the readability of web document.
o The navigation within the page can be possible through the links.

⮚ CASCADING STYLE SHEETS

● CSS stands for Cascading Style Sheets


● Styles define how to display HTML elements
● Styles were added to HTML 4.0 to solve a problem
● External Style Sheets can save a lot of work
● External Style Sheets are stored in CSS files
● CSS Comments

o Comments are used to explain code, and may help you when you edit the source
code at a later date.
o Comments are ignored by browsers.
o A CSS comment begins with "/*", and ends with "*/".
● Advantages of CSS:

o CSS is a markup language used in web document for presentation purpose.


o The primary intension of css is to separate out the web content from the web
presentation. This helps in managing large scale complex sites.
o If a small change needs to be done in the style of web document, then css makes it
more convenient.
o If CSS is used, effectively then global sheet can be applied to a web document.
This helps in maintaining consistency throughout the web page.
o CSS allows you to separate of structure from presentation that simplifies the
maintaining the web page.
● Types of CSS
There are three ways of inserting a style sheet:

Page
38
Web Technologies

1) External style sheet


2) Internal style sheet
3) Inline styles

● Inline Sheets
o inline sheets can be used to format only one tag at a time
o The inline cascading style sheet is a kind of style sheet which the styles can be
applied to html tags only.
o Using inline sheets, we can apply uniform style on tags for the whole document.
o Disadvantage: Inline sheet is not much suitable for web page designing because
the actual contents of web page are mixed with the presentation.

Syntax:

<Tag style="property : value " >

Example:

<html>
<head>
<title>Inline sheets</title>
</head>
<body >
<center>
<h3 style="color:blue">Inline Cascading Styles</h3>
<p style="font-family: arial; color: red; font-size: 30px " > welcome to mlwec</p>
</center>
</body> </html>

● Internal Sheets/Document level sheets


o Advantage of Internal style sheet comparing with inline sheets, at a time several
tags can be formatted with internal sheets, where as in inline sheets only one tag
at a time can be formatted.

Page
39
Web Technologies

o Disadvantage : when we want to apply style to more than one document at a time
then internal sheet of no use.

Example:

<html>
<head>
<title>Inline sheets</title>
<style type="text/css">
h1
{
color:green;
}
h2
{
font-family:arial;
font-size:20px;
color:red;
left:30px;
}
</style>
</head>
<body >
<center>
<h1>Internal style sheets</h1>
<h2>This is aligned to 30px left</h2>
</center>
</body>
</html>

● External sheets
o When we want to apply style to more than one document at a time then external
sheets are used.

Page
40
Web Technologies

o Total style elements are defined in a separate document and this document is added
to required web page.
o By using this, we can use this style sheets in different web pages. So we can
achieve reusability by using external sheets.
o The document where all the style formats are placed , should have extension .css
o This page can be called in the web page by using LINK tag.

Syntax:

<link rel=”stylesheet” type=”text/css’’ href=”sample.css”>

● rel: Specifies relationship between documents.


● type: indicates which type we are including.
● href: indicates style sheet document address.

External.html:

<html>
<head>
<title>Inline sheets</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<center>
<h1>Internal style sheets</h1>
<h2>This is aligned to 30px left</h2>
<p>This is about the document level cascading style sheets</p>
</center>
</body>
</html>

Style.css:
<style type="text/css">
h1
{
color:red;
}
h2

Page
41
Web Technologies

{
font-family:arial;
font-size:20px;
color:red;
left:30px;
}
p
{
color:blue;
font-family:"times new roman";
font-size:40pt;
}
body
{
background-color:pink;
}
</style>

● Selectors
● Selectors are used to apply special effects.
● Types of selectors are:
o Simple selector
o Class selector
o Id Selector
o Universal selector
Simple selector :
The simple selector form is a single element to which the property and value is
applied.
Example:
<html>
<head>

Page
42
Web Technologies

<title>Simle selectors</title>
<style type="text/css">
h1
{
color:red;
}
h2
{
font-family:arial;
font-size:20px;
color:green;
left:80px;
}
body
{
background-color:pink;
}
</style>
</head>
<body>
<h1>This text is in red color</h1>
<h2> This text is in green color and in 20-x size</h2>
</body>
</html>

Class selector :
Using class selector we can apply different styles to same element.
Example:

<html>
<head>
<title>Class selectors</title>

Page
43
Web Technologies

<style type="text/css">
h2.red
{
color:red;
}
h2.green
{
font-family:arial;
font-size:20px;
color:green;
left:80px;
}
body
{
background-color:pink;
}
</style>
</head>
<body>
<h2 class="red">This text is in red color</h1>
<h2 class="green"> This text is in green color</h2>
</body>
</html>

Generic Selectors:
The class can be defined in the generalized form. So that the particular class
can be applied to any tag.
Example:

<html>
<head>
<title>Generic selectors</title>

Page
44
Web Technologies

<style type="text/css">
.green
{
font-family:arial;
font-size:20px;
color:green;
left:80px;
}
body
{
background-color:pink;
}
</style>
</head>
<body>
<h2 class="green"> This text is in green color</h2>
<p class="green">The class can be defined in the generalized form.
So that the particular class can be applied to any tag.</p>
</body>
</html>

Universal selector :
● This selector can be applied to all the elements in the document.
● This selector is denoted by * symbol.
Example:

<html>
<head>
<title>Universal selectors</title>
<style type="text/css">

Page
45
Web Technologies

{
font-family:arial;
font-size:20px;
color:green;
left:80px;
}
body
{
background-color:pink;
}
</style>
</head>
<body>
<h2> This text is in green color</h2>
<p>The class can be defined in the generalized form.
So that the particular class can be applied to any tag.</p>
</body> </html>

Id Selector:
o The id selector is used to specify a style for a single, unique element.
o The id selector uses the id attribute of the HTML element, and is defined with a
"#".
o Do not start an ID name with a number
Syntax:
#para1
{
text-align:center;
color:red;
}
Example:
<html>
<head>

Page
46
Web Technologies

<style type="text/css">
#para1
{
text-align:center;
color:red;
}
body
{
background-color:pink;
}
p
{
font-size:30px;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

CSS for Links:

● Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).
● Special for links are that they can be styled differently depending on what state
they are in.
● The four links states are:

1. a:link - a normal, unvisited link


2. a:visited - a link the user has visited

Page
47
Web Technologies

3. a:hover - a link when the user mouses over it


4. a:active - a link the moment it is clicked

● When setting the style for several link states, there are some order rules:

● a:hover MUST come after a:link and a:visited


● a:active MUST come after a:hover

Example:

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

Example:

<html>
<head>
<style type="text/css">
a:link {color:red;} /* unvisited link */
a:visited {color:yellow;} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:blue;} /* selected link */
</style>
</head>
<body>
<p><b><a href="variant.html" target="_blank">This is a link</a></b></p>
</body>
</html>

CSS for Lists:

● Set different list item markers for ordered list


● Set different list item markers for unordered lists
● Set an image as the list item marker

List Style Properties:

Page
48
Web Technologies

Property Description

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style-positionSpecifies if the list-item markers should appear inside or outside the


content flow

list-style-type Specifies the type of list-item marker

⮚ CSS for Ordered List:

Property value Sample preview


decimal 1,2,3,4…
upper-alpha A,B,C,D……
lower-alpha A,b,c,d……
upper-roman I,II,II,IV…….
lower-roman I,ii,iii,iv,v…………

⮚ CSS for Unordered List:

● For unordered list, we can use property values as circle,square,disk,none

Example:

<html>
<head>
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}

Page
49
Web Technologies

ul.image {list-style-image:url('Winter.jpg');}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body bgcolor="pink">
<center>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="image">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</center>
</body>
</html>

Page
50
Web Technologies

CSS for Tables:

⮚ Table Width & Height:


● Width and height of a table is defined by the width and height properties.
table
{
width:100%;
}
th
{
height:50px;
}
⮚ Table Text Alignment:
● The text in a table is aligned with the text-align and vertical-align properties.
● The text-align property sets the horizontal alignment, like left, right, or center:
td
{
text-align: right;
}
● The vertical-align property sets the vertical alignment, like top, bottom, or
middle:

Page
51
Web Technologies

td
{
vertical-align: bottom;
}
⮚ Table Padding:
● To control the space between the border and content in a table, use the
padding property on td and th elements:
td
{
padding:15px;
}
⮚ Table Color:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
Example:

<html>
<head>
<style type="text/css">
table,th,td
{
border:1px dashed black;
}
th
{
background-color:green;
color:white;
}
td
{

Page
52
Web Technologies

background-color:pink;
text-align: right;
padding:5px;
color:blue;
}
body
{
background-color:tan;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Nalini</td>
<td>Durga</td>
</tr>
<tr>
<td>Hema</td>
<td>Latha</td>
</tr>
</table>
</body>
</html>

⮚ Margins:
o margin-top:100px;
o margin-bottom:100px;m
o margin-right:50px;
o margin-left:50px;

Page
53
Web Technologies

⮚ Padding:

● padding-top:25px;
● padding-bottom:25px;
● padding-right:50px;
● padding-left:50px;

CSS for Backgrounds:

● CSS background properties are used to define the background effects of an


element.
● CSS properties used for background effects:

Property Description

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with the


rest of the page

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

⮚ background-color:
● The background-color property specifies the background color of an element.
Syntax:
body {background-color:#b0c4de;}
Example:

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

Page
54
Web Technologies

{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! </p>
</body>
</html>

⮚ INTRODUCTION TO JAVA SCRIPT


● Script means small piece of code.
● JavaScript is an object based scripting language.
● It is designed to enhance web pages that are constructed with HTML documents.
● Using Java script we can easily create interactive web pages
● Netscape navigator developed the JavaScript.
● Microsoft version of JavaScript is Jscript.
● JavaScript is the most popular scripting language on the internet, and works in all major
browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
● JavaScript was designed to add interactivity to HTML pages
● JavaScript is usually embedded directly into HTML pages.
● JavaScript is an interpreted language (means that scripts execute without preliminary
compilation)
● Everyone can use JavaScript without purchasing a license.
● Scripting languages are two kinds one is client-side other one is servers-side scripting.
● In general client-side scripting is used for verifying simple validation at client side.
● VBScript, java script and J script are examples for client-side scripting.
● Server-side scripting is used for database verifications.
● ASP,JSP, serveets etc. are examples of server-side scripting.
● Web pages are two types
1. Static web page
2. Dynamic webpage
❖ Static web page where there is no specific interaction with the client
❖ Dynamic web page which is having interactions with client and as well as
validations can be added.
● Simple HTML script is called static web page, if we add script to HTML page it is
called dynamic page.

Page
55
Web Technologies

▪ Java script code is written between <script>-----</script>tags


▪ All java script statements end with a semicolon
▪ Java script ignores white space
▪ Java script is case sensitive language
▪ Script program can save as either. Js or. html
● Similarities between Java Script & Java
o Both have same kind of operators.
o Java script uses similar control structures of java.
o Both are used as languages for use on internet.
o Up to concept of method and object, both are same.
● Differences between Java Script & Java
o Java is object –oriented programming language where as java script is object-
based programming language.
o Java is full –featured programming language but java script is not.
o Java source code is first compiled and the client interprets the code. Java
script code is not compiled, only interpreted.
o Inheritance, polymorphism, threads are not available in JavaScript.
● Advantages of Java script
o JavaScript gives HTML designers a programming tool - HTML authors are
normally not programmers, but JavaScript is a scripting language with a very
simple syntax! Almost anyone can put small "snippets" of code into their HTML
pages.
o Javascript can be used as an alternative to java applets.Applets need to be
downloaded even though they are embedded in Html, jS need not to be
downloaded.
o Javascript can get embedded in XHtml.
o JavaScript can react to events - A JavaScript can be effectively used for
interaction with users.Javascript supports all the form elements such as button,text
etc..Simple applications such as Calculators,Calenderscan be developed using
javascript.
o JavaScript can manipulate HTML elements - Using Document Object Model
(DOM), JavaScript can read and change the content of an HTML element.Hence
static web page becomes dynamic.
o JavaScript can be used to validate data - A JavaScript can be used to validate
form input before submitting it to the server.

Page
56
Web Technologies

o JavaScript can be used to detect the visitor's browser - A JavaScript can be


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

● How To Develop Java Script:


1. The HTML <script> tag is used to insert a JavaScript into an HTML document.
The script can be inserted either in <head> section or <body> section or in both.
Syntax: <script type=”text/javascript”>
……………..
</script>

2. Identifiers
o Identifiers are the names given to variables. These variables hold the data value.
o Identifiers must start with either letter or underscore or dollar sign.
o There is no limit on the length of identifiers,
o The letters of Identifiers are case sensitive.
o Programmer defined variable names must not have upper case letters.

3. Reserved Words:
Reserved words are special words associated with some meaning.

break continue delete for if else do while case switch


try catch throw default var return new this function finally

4. Comments:

o Comments will not be executed by JavaScript. Comments can be added to explain


the JavaScript, or to make the code more readable
⮚ The // Single line comment
⮚ The /* */ multi line comment.

● Using an Internal JavaScript:

Page
57
Web Technologies

Java script can be placed in head or body section.


Sample program:
<html>
<head>
<title>Internal javascripts</title>
</head>
<body>
<p>Java Scripts</p>
< script type=”text/javascript” >
document.write(“Welcome to JavaScript Language”);
</script>
< /body>
</html>
● Using an External JavaScript:
o JavaScript can also be placed in external files.
o External JavaScript files often contain code to be used on several different web
pages.
o External JavaScript files have the file extension .js
o External script cannot contain the <script></script> tags!
o To use an external script, point to the .js file in the "src" attribute of the <script>
tag.
● Advantages of External javascript:
o Script can be hidden from the browser.
o The layout and presentation of the web document can be separated out from the
user interaction through the java script.
● Dis advantages of External JavaScript:
o If small piece of JS code has to be embedded In XHTML, then making a separate
file is meaningless.
o If JS is embedded in several places then it is complicated to make separate file.

Sample program:

External.html
<html>
<head>
<title>External javascripts</title>
</head>

Page
58
Web Technologies

<body>
<p>Java Scripts</p>
< script type=”text/javascript” src=”myscript.js”> </script>
< /body>
</html

myscript.js

document.write(“Welcome to JavaScript Language”);

● Variables
o Variables are "containers" for storing information.
o JavaScript variables are used to hold values or expressions
o A variable can have a short name, like x, or a more descriptive name, like carname.

Rules for JavaScript variable names:

o Variable names are case sensitive (y and Y are two different variables)
o Variable names must begin with a letter, the $ character, or the underscore
character.
o Try to use descriptive names for variables. This makes the code easier to
understand.
Note: Because JavaScript is case-sensitive, variable names are case-sensitive.
o Java script defines two types of entities primitives and objects.
o The primitives are for storing the values where as objects are for storing the
reference to actual value.
Primitive types: The following are the primitive types in java script.
1. Number
2. String
3. Boolean
4. Undefined
5. Null

Numeric:

▪ These are called as numbers. Because they can store the number values.
▪ These numbers include integer, floating and double values.

Page
59
Web Technologies

▪ Ex: 10, 5.789

String:

▪ String literals are sequence of characters.


▪ When assigning a text value to a variable, put quotes around the value.
▪ When assigning a numeric value to a variable, do not put quotes around the
value, if you put quotes around a numeric value, it will be treated as text.
Boolean:
▪ The Boolean values are true and false.
▪ These values can be compared with the variables or can be used in
assignment statement.
Undefined:
▪ If a variable is explicitly defined and not assigned to any value to it then it
is an undefined.
▪ If we try to display the undefined value then on the browser, the word
‘undefined’ will be displayed.
Null:
▪ The null values can be assigned by using the reserved word null .
▪ The null means no value.
▪ If we try to access the null value then a runtime error will occurs.
● Declaring (Creating ) JavaScript Variables:

o Creating a variable in JavaScript is most often referred to as "declaring" a variable.


o JavaScript variables can be declared with the var keyword.
o The value of this variable can be anything. it can be a string or a number…
o Ex: var x; var empname;
● Assigning values to the variables:

Page
60
Web Technologies

To assign a value to the variable, use the equal (=) sign.


Var x; x=20;
Var str; str=”welcome”;

<html>
<head>
<title>Variable declaration</title>
</head>
<body>
<h2>Variable declaration</h2>
<script type="text/javascript">
var a=10,b=15,c;
c=a+b;
document.write("After addition ,the result is:");
document.write(c);
</script>
</body>
</html>

● Scope of the variables:


1. Local variables:
▪ A variable declared within a JavaScript function becomes LOCAL and can
only be accessed within that function. (The variable has local scope).Also
called as function scope.
▪ A variable with function scope is called as local variable.
▪ We can have local variables with the same name in different functions,
because local variables are only recognized by the function in which they are
declared.
▪ Local variables are deleted as soon as the function is completed.
2. Global variables:
▪ Variables declared outside a function, become GLOBAL, and all scripts and
functions on the web page can access it. Also called as script level scope.

Page
61
Web Technologies

▪ The variable with script scope is called as global variable.


▪ Global variables are deleted when you close the page.
3. Auto declaration:
▪ If a variable is used without the var declaration statement, it will be
automatically declared with global scope, become a global variable.
4. Collision:
▪ If a variable is defined in a function has the same name as a variable defined
outside the function, then the variable outside the function cannot be
accessible within this function.
● Operators
o Arithmetic operators
o Assignment operators
o Comparison operators
o Logical operators
o String operators
Arithmetic operators:

Operator Description Example(y=5) Result of x


+ Addition y+2 7
- Subtraction y-2 3
* Multiplication y*2 10
/ Division y/2 2.5
% Modulus (division remainder) y%2 1
++ Increment(increases the variable y++ 6
by 1)
-- Decrement(decreases the variable y-- 4
by 1)

Page
62
Web Technologies

Assignment operators:
● 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

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

%= x%=y x=x%y x=0

Comparison operators:
Comparison operators are used in logical statements to determine equality
or difference between variables or values.
Given that x=5, the table below explains the comparison operators:

Page
63
Web Technologies

Operator Description Comparing Returns

== is equal to x==8 false

x==5 true

=== is exactly equal to (value and x==="5" false

type) x===5 true

!= is not equal x!=8 true

!== is not equal (neither value or x!=="5" true

type) x!==5 false

> is greater than x>8 false

< is less than x<8 true

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

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

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


&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true
String operators:

Page
64
Web Technologies

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

EX: <html>
<head>
<title>String Operators</title>
</head>
<body>
<h2>String Operators</h2>
<script type="text/javascript">
var str1="Welcome";
var str2="MLWEC";
document.write ("<h3>"+str1+"To"+str2+"</h3>");
</script>
</body>
</html>
Conditional Operator:
JavaScript also contains a conditional operator that assigns a value to a
variable based on some condition.
Syntax:
Variable name=(condition)?value1:value2 

● Java script functions


o A function is a block of code that executes only when we tell it to execute.
o It can be when an event occurs, like when a user clicks a button, or from a call
within your script, or from a call within another function.
o Separate functions can be created for each task.
o Functions can be placed both in the <head> and in the <body> section of a
document, just make sure that the function exists, when the call is made.
How to Define a Function:
● Define name for it.
● Indicate any values that might be required as arguments.

Page
65
Web Technologies

● Add Statements
Syntax:
Function functionname()
{
some code
}
Example:
<html>
<head>
<script type="text/javascript">
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
● Calling a Function with Arguments:

o When calling a function, we can pass along some values to it; these values are
called arguments or parameters.
o These arguments can be used inside the function.
o We can send as many arguments separated by commas (,).

Syntax: myFunction(argument1,argument2)
function myFunction(var1,var2)
{
some code
}
Example:
<html>

Page
66
Web Technologies

<body>

<p>Click the button to call a function with arguments</p>

<button onclick="myFunction('Nalini','Asst.prof')">Click me</button>

<script type="text/javascript">
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script> </body> </html>

● Returning value from the Function:

o Function that result a value must use the return statement.


o This statement specifies the value that will be returned to where the function was
called.
o When using the return statement, the function will stop executing, and return the
specified value.
o Ex:
function myFunction()
{
var x=5;
return x;
}
● Control Structures

o Control structure is essential part of any programming language which is required


to control the logic of the program.

Page
67
Web Technologies

o Conditional statements are used to perform different actions based on different


conditions.
o In Java Script, we have the following control structures:

▪ if statement - use this statement to execute some code only if a specified


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

❖ if-Statement:

Use the if statement to execute some code only if a specified condition is true.
Syntax:
if (condition)
 {
  code to be executed if condition is true
  }

Example:

<html>
<head> <title>if statement</title> </head>
<body>
<h2>if statement</h2>
<script type="text/javascript">
date=new Date();
time=date.getHours();
if(time<12)
document.write("<h3>"+"Gudmorning"+"</h3>");
</script>
</body>
</html>

❖ if-else Statement:

Page
68
Web Technologies

Use the if....else statement to execute some code if a condition is true and
another code if the condition is not true.
Syntax:
if (condition)
  {
  code to be executed if condition is true
  }
else
  {
  code to be executed if condition is not true
  }
Example:
<html>
<head>
<title>if statement</title>
</head>
<body>
<h2>if statement</h2>
<script type="text/javascript">
date=new Date();
time=date.getHours();
if (time<20)
{
document.write("<h3>"+"Gudmorning"+"</h3>");
}
else
{
document. write("<h3>"+"Gudevening"+"</h3>");
}
</body>
</html>

❖ if-else Statement

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

Syntax:

Page
69
Web Technologies

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

❖ switch Statement:

● The switch statement is used to perform different action based on different


conditions.
● The the switch statement to select one of many blocks of code to be executed.
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
}

Example:

<html> <body>

<p>Click the button to display what day it is today.</p>


<button onclick="myFunction()">Try it</button>

Page
70
Web Technologies

<p id="demo"></p>
<script type="text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 0: x="Today it's Sunday"; break;
case 1: x="Today it's Monday"; break;
case 2: x="Today it's Tuesday"; break;
case 3: x="Today it's Wednesday"; break;
case 4: x="Today it's Thursday"; break;
case 5: x="Today it's Friday"; break;
case 6: x="Today it's Saturday"; break;
}
document.getElementById("demo").innerHTML=x;
}
</script> </body> </html>
Looping:

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


o while - loops through a block of code while a specified condition is true
o A do while –loop runs once before the condition is checked. If the condition
is true, it will continue to run until the condition is true.

⮚ OBJECTS IN JAVA SCRIPT


Methods are the actions that can be performed on objects.
There are several objects in java script programming language.
Object name Purpose of the object
document To get complete control on document along with the displaying
contents.
window To get dialog control and provision for accepting data from user
Math Used for mathematical functions & standard constants in

Page
71
Web Technologies

mathematics
String String manipulation can be done & generate HTML
markup methods
Date For date manipulations ,mainly to get current date and time
Number To get number constants
Boolean Wrapper class for Boolean type

● Document object

To display some information on the screen.

Syntax: document. Write (‘’any message’’);


Document. Writeln (‘’any message’’);

o In this document is object name and write () or writeln () are methods.


o The difference between these two methods is carriage form feed character that is
new line character automatically added into the document. Write ln(),but it is not
included in document.
Write ().
● Window object
Window object there are 3 types of popup boxes.
1. Alert box
2. Confirm box
3. Prompt box
1. Alert box is used error message to user
Syntax: window. alert (‘’string message’’);

2. Conform box
window.confirm(“you want to save?”)

Page
72
Web Technologies

3. Prompt box for accepting data syntax

Variable=window.prompt(“string message”,”default values”);

Example 1:
Write a java script addition of two numbers.
<html>
<head>
<title>addition</title>
</head>
<body>
<script language="javascript">
var s1,s2,a,b,c;
s1=window.prompt("enter the a value","0");
s2=window.prompt("enter the b value","0");
a=parseInt(s1);
b=parseInt(s2);
c=a+b;
document.write("<h2>result="+c+"</h2>");
</script>
</body>
</html>

● Math object

Page
73
Web Technologies

o Methods in Math object are used for manipulation of numbers and to perform any
common mathematical calculations.
o It contains many rounding methods like floor value, ceil value, round value and
many trigonometric functions like sin, cos and tan functions and other functions
like max, min etc…
Methods in Math Object:
Method Name Purpose Usage
Math.abs(x) Returns the absolute value Math.abs(-30)=30
Math.abs(40)=40
Math.abs(0)=0
Math.ceil(x) Gives nearest integer ,which is not
Math.ceil(5.8)=6
less than x. Math.ceil(5.0001)=6
Math.ceil(-5.8)=-5
Math.floor(x) Gives nearest integer ,which is not
Math.floor(5.8)=5
greater than x. Math.floor(5.0001)=5
Math.floor(-5.8)=-6
Math.round(x) Rounds x closer to nearest integer
Math.round(5.8)=6
Math.round(5.001)=5
Math.max(x,y) Gives maximum value from x,yMath.max(3,5)=5
Math.min(x,y) Gives minimum value from x,yMath.min(3,5)=3
Math.log(x) Gives logarithm or base of x Math.log(2)
Math.exp(x) Gives exponential of a given Math.exp(3)
number
Math.pow(x,y) Gives value of x power y Math.pow(2,3)=8
Math.sin(x) Returns the sin value of x. Math.sin(0)=0
Math.cos(x) Returns the cosine value of x. Math.cos(0)=1
Math.tan(x) Returns the tangent value of x. Math.tan(45)=1
Math.sqrt(x) Gives square root of x Math.sqrt(4)=2
Math.random(x) Generates a random number Math.random()

Page
74
Web Technologies

between 0 & 1
Example:
<html>
<head>
<title>math functions</title>
</head>
<body>
<center>
<script type="text/javascript">
document.writeln(Math.abs(40));
document.writeln(Math.ceil(40.8));
document.writeln(Math.floor(40.8));
document.writeln(Math.round(40.0004));
document.writeln(Math.max(3,4));
document.writeln(Math.min(78,40));
document.writeln(Math.sqrt(400));
document.writeln(Math.log(4));
document.writeln(Math.exp(4));
</script>
</center>
</body>
</html>
● String Object:
o The web content is to be displayed on the web page in string form.
o Java script provides many string functions to process these string objects.
o A string is a collection of objects;these may include any kind of special characters,
digits, normal characters.
o The String object is used to manipulate a stored piece of text.
o String manipulation can be done & generate HTML markup methods
Methods of String Object:
Function name Description
Anystring.toLowerCase() To convert to lowercase
toUpperCase To convert to upper case

Page
75
Web Technologies

charAt(pos) Returns a character at a given position


substr(m,n) Extract n characters from m-th position
split(delim) Splits the character accrording to delimeter
concat(str) Concatenates two strings
substring(m,n) Extract characters from m to n but not including
n-th character
S1.big() To display in big text
blink() To display in blink text
bold() To display in bold text
italics() To display in italics text
Small() To display in small text
Strike() To display in strike text
Example:
<html>
<head>
<title>String functions</title>
</head>
<body>
<center>
<script type="text/javascript">
var s1=”hai”, s2=”hello”;
document.writeln(“First string is:”+s1);
document.writeln(“Second string is:”+s2);
document.writeln(“length of fst stringis:”+s1.length());
document.writeln(s1.toUpperCase());
document.writeln(s2.toLowerCase());
document.writeln(“cocatnatingstrings:”+s1.concat(s2));
</script>
</center> </body> </html>
● Date Object:

Page
76
Web Technologies

o The Date object is used to work with dates and times.


o Date objects are created with the Date() constructor.

Get Methods:

Method Meaning
getDate() Returns 1 to 31,day of month
getDay() Returns 0 to 6 ,Sunday to Saturday
getMonth() Returns 0 to 11
getFullYear() Returns four digit year number
getHours() Returns 0 to 23
getMinutes() Returns 0 to 59
getSeconds() Returns 0 to 59
getTime() Returns number of millisec from jan 1970

Set Methods:

Method Meaning
setDate(v) To Set Date, day, month, full year
setDay(v)
setMonth(v)
setFullYear(y,m,d)
setHours() To Set
setMinutes() hours,minutes,seconds,milliseconds,time
setSeconds()
setTime()
setMilliseconds()

To Get today’s Time:

<html>
<body>
<script type="text/javascript">
var d=new Date();
document.write(d);
</script>
</body> </html>

Page
77
Web Technologies

To Display a clock on webpage :

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div> </body>
</html>
● Boolean Object:

o The Boolean object is used to convert a non-Boolean value to a Boolean value


(true or false).

Sample Program:

<html>

Page
78
Web Technologies

<body>
<script type="text/javascript">
var d=new Boolean(false);
document.write(“<b>”+”The Boolean value is:”);
document.write(temp.toString());
</script>
</body>
</html>

Number Object:

Property Meaning
MAX_VALUE Largest possible number get displayed
MIN_VALUE Smallest possible number
NaN When not a number,NaN displyed

● Events

o Events are actions that can be detected by JavaScript.


o Every element on a web page has certain events which can trigger a 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.
Advantages of Events:
o We can create user interactive forms.
o Validate forms when the elements lost their focus
o We can handle errors
o Process the forms with help of submit button
o Scripts can respond to user interactions
o Change the page accordingly……dynamically
o It makes web pages more interactively and user-friendly.

Examples of events:

o Clicking a button (or any other HTML element)


o A page is finished loading
o An image is finished loading

Page
79
Web Technologies

o Moving the mouse-cursor over an element


o Entering an input field
o Submitting a form
o A keystroke

Events Attribute Meaning Associated Tags


blur onblur Losing focus <button> , <input>,
<textarea>,<a>
change onchange On occurrence of <input> ,
change <textarea>,<select>
click onclick When user clicks mouse <input> .<a>
button
dbclick ondbclick When user double clicks <input> .<a>,
mouse button <button>

focus onfocus When user acquires the <a>, <input> ,


input focus <textarea>,<select>
keyup onkeyup When user releases the Form elements
key from keyboard
keydown on keydown When user presses key Form elements
down
keypress Onkeypress When user presses key Form elements
mousedown onmousedown When user clicks left Form elements
mouse button
mouseup onmouseup When user releases left Form elements
mouse button
mousemove onmousemove When user moves mouse Form elements
mouseout onmouseout User moves mouse away Form elements
from some element
mouseover onmouseover User moves mouse away over
Form elements

Page
80
Web Technologies

some element
load onload After getting document <body>
loaded
reset onreset When reset button clicked <form>
submit onsubmit Submit button clicked <form>
select onselect On selection <input>, <textarea>
unload onunload User exits the document <body>

Example:

<html>
<head>
<title>onload events</title>
<script type="text/javascript">
function sample()
{
alert("welcome");
}
</script>
</head>
<body onload="sample()">
</body>
</html>
Write a program to login form

<html>
<head>
<script language="javascript">
function fun()
{
var s1="nalini";
var s2="durga";
var s3,s4;
s3=document.f1.t1.value;
s4=document.f1.t2.value;

Page
81
Web Technologies

if((s1==s3)&&(s2==s4))
window.alert("user name and password correct");
else if(!(s1==s3)&&(s2==s4))
window.alert("user name wrong");
else
if((s1==s3)&&!(s2==s4))
window.alert("password wrong");
else
if(!(s1==s3)&&!(s2==s4))
window.alert("both user name and password wrong");
}
</script>
</head>
<body>
<center>
<form name="f1" onsubmit="fun()">
<table border="1">
<tr><td>user name:<td><input type="text" name="t1" size=20></tr>
<tr><td>password:<td><input type="password" name="t2" size=20></tr>
<tr><td colspan=2 align="center"><input type="submit" value="submit"></tr>
</table>
</form>
</center>
</body>
</html>

Write a program to display a form with three text fields, two for accepting
numbers and third one for displaying result. Form should contain four buttons
with labels ADD,SUBTRACT,MULTIPLY and DIVIDE .Perform the respective
arithmetic operations and display the result in the third text box

<html>
<head>
<title>arithmetic operations</title>
<script language ="javascript">
function cal(op)
{
var a,b,c=0;

Page
82
Web Technologies

a=parseInt(document.form1.first.value);
b=parseInt(document.form1.second.value);
switch(op)
{
case '+':c=a+b;break;
case '-':c=a-b;break;
case '*':c=a*b;break;
case '/':c=a/b;break;
}
document.form1.result.value=c;
}
</script>
</head>
<body bgcolor=tan>
<form name="form1">
<h1>Simple Arithmetic Operations</h1>
<TABLE border='2'>
<TR>
<TH> Enter first number
<TD><input type="text" name="first" size=15>
</TR>
<TR>
<TH>Enter second number
<TD><input type="text" name="second" size=15>
</TR>
<TR>
<TH>result
<TD><input type="text" name="result" size=15>
</TR>
</TABLE>
<p>
<INPUT TYPE =BUTTON VALUE="ADDITION" ONCLICK=cal("+")>
<INPUT TYPE =BUTTON VALUE="SUBTRACTION" ONCLICK=cal("-")>
<INPUT TYPE =BUTTON VALUE="MULTIPLICATION" ONCLICK=cal("*")>
<INPUT TYPE =BUTTON VALUE="DIVIDE" ONCLICK=cal("/")>
</body>
</html>

Write a program to display the factorial of a given number

Page
83
Web Technologies

<html>
<head>
<title>recursion for factorial</title>
<script language="javascript">
var a=window.prompt("enter number for factorial:","0");
var num=parseInt(a);
document.writeln("factorial of "+num+ "is" +factorial(num));
function factorial(num)
{
if(num<=1)
return 1;
else
return num*factorial(num-1);
}
</script>
</head>
</html>
⮚ DYNAMIC HTML WITH JAVA SCRIPT

HTML DHTML
HTML is used to create static web pages. DHTML is used to create dynamic web
pages.
HTML is consists of simple html tags. DHTML is made up of HTML
tags+cascading style sheets+javascript.
Creation of html web pages is simplest but Creation of DHTML is complex but more
less interactive. interactive.

Page
84

You might also like