You are on page 1of 16

M.Tech (SE) Java / Web Technologies - by G.

Sreenivasulu

Handout - 1

UNIT - I
INTRODUCTION:
HTML stands for Hyper Text Markup Language.HTML is a language for describing web
pages.HTML is a language for describing web pages.HTML instructions divide the text of a
document into blocks called elements.
An element in HTML represents some kind of structure or semantics and generally consists of a
start tag, content, and an end tag.
The following is a paragraph element:
<p>

This is the content of the paragraph element. </p>

Tags are used to mark up the start and end of an HTML element. A start tag consists of an opening
angle bracket (<) followed by the element name, zero or more space separated attribute/value pairs,
and a closing angle bracket (>).
Example:- A start tag with no attributes: <p>
End tags consist of an opening angle bracket followed by a forward slash, the element name, and a
closing angle bracket </p>
An attribute defines a property for an element, consists of an attribute/value pair, and appears within
the elements start tag. An elements start tag may contain any number of space separated attribute/
value pairs.
A markup language is a set of markup tags. HTML uses markup tags to describe web pages
Structure of an HTML page
A HTML page has two sections (Elements) HEAD , BODY. The head is used for text and tags that
do not show directly on the page. The body is used for text and tags that are shown directly on the
page .
TITLE, META are the Elements that appear within HEAD element.
The title of a webpage appears in your browsers title bar when you view the page.
The META element used in the HEAD section is an empty element, i.e. the META element consists
only of an opening tag. The most important use for this element is to give the search engines some
basic information about your HTML document such as the most important keywords that appear
inside the document and a short description of the documents content.
<meta name="keywords" content="keyword1, keyword2, ...">
MIME types:
The World Wide Web actually uses MIME types (Multipurpose Internet Mail Extension) to define
the type of a particular piece of information being sent from a Web server to a browser. A browser
in turn determines, from the MIME type, how the data should be treated.

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

HTML Headings are defined with the <H1> to <H6> tags.<H1> defines the largest heading. <H6>
defines the smallest heading.
<H1>This is h1</H1>
<H2>This is h2</H2>
<H3>This is h3</H3>
<H4>This is h4</H4>
<H5>This is h5</H5>
<H6>this is h6</H6>
Lists: HTML supports ordered, unordered and definition Lists
Unordered Lists
To create bulleted lists (Unordered Lists) we use a <ul> and a </ul> tag at the beginning and the
end of the list. List items are added using <li> and </li> tags
Example 1: ( Type the following code in Note pad editor , save as ex1.html and open in a browser)
<html>
<body>
<h4>Branches Available:</h4>
<ul type="disc">
<li>CSEe</li>
<li>ECE</li>
<li>EEE </li>
</ul>
</body>
</html>
Note : <ul type="circle"> , <ul type="square"> are used to get Circle and Square symbols.
Ordered Lists (or) Numbered Lists
To create we use a Ordered Lists (or) Numbered Lists <ol> and a </ol> tag
Example 2:
<html>
<body>
<h4>Branches Available:</h4>
<ol>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ol>
</body>
</html>
Note: <ol type="A"> ,<ol type="a"> , <ol type="I"> , <ol type="i"> are used to create List with
Capital Letters , Small Letters, Capital Roman Numbers, Small Roman Numbers as Numbers for
the Lists.

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

Definition Lists is not a list of single items. It is a list of items (terms), with a description of each
item (term). A definition list starts with a <dl> tag (definition list). Each term starts with a <dt> tag
(definition term). Each description starts with a <dd> tag (definition description)
Example:
<html>
<body>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><p>Style sheets are used to provide presentational suggestions.</p>
<p>Documents structured using XML or HTML are able to make use of them.</p></dd>
<dt>Content Management</dt>
<dd>The process of collecting, managing and publishing content to various media.</dd>
</dl>
</body>
</html>
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the
content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules,
tables, etc.
Example
<html>
<body>
<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>
</body>
</html>
Example
<html>
<body>
<table border="1" >
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
</body>
</html>

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

HTML Images
To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format
To embed the image into your web page, use the <img /> tag,
<img src="image1.gif" width="100" height="100" alt="Image 1 " />
src -- Required attribute. This is the path to the image. It can be either an absolute path, or a
relative path width --- This specifies the width to display the image. height -- This specifies
the height to display the image. alt Alternate text. This specifies text to be used in case the
browser/user agent can't render the image.
Frames: With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of the others.
The frameset (frameset1.html):
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<frame src ="left.html" />
<frame src ="right.html" />
</frameset>
</html>
The left frame (left.html):
<html>
<body style="background-color:green">
<p>This is the left frame </p>
</body>
</html>
The right frame (right.html):
<html>
<body style="background-color:yellow">
<p>This is the right frame </p>
</body>
</html>
Forms
A form is an area that can contain form elements. Form elements are elements that allow the user to
enter information . A form is defined using the <form></form> tags.
The Input Tag
This is the most commonly used tag within HTML forms . It allows you to specify various types of
user input fields such as text, radio buttons, checkboxes etc.

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

Text
Text fields are used for when you want the user to type text or numbers into the form.
<input type="text" >
Example :
<html>
<body>
<form action="MAILTO:g.sreenivasulu2@gmail.com" method="post" enctype="text/plain">
Name: <input type="text" name="name" size="20"> <br>
e-mail <input type="text" name="mail" size="20"> <br>
Comments: <input type="text" name="comment" size="40"> <br> <br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Radio Button
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of
choices.
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
<form>
Username: <input type="text" name="user"> <br>
Password: <input type="password" name="password">
</form>

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

<select>
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option selected="yes">Conneticut -- CN</option>
</select>
<select size="3">
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>
<select multiple="yes" size="3">
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>
CSS( Cascading Style Sheets )
CSS is the acronym for: Cascading Style Sheets. CSS is an extension to basic HTML that allows
you to style your web pages.
A typical CSS statement will SELECTOR { PROPERTY: VALUE }
element you wish to manipulate and "VALUE" represents the value of

Property" is the CSS


the specified property.

Example
p {color: white; }
body {background-color: black; }
Cascading Style Sheets are three Types : external, internal, and
inline.
External Style Sheet An external style sheet is ideal when the
style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section.
-------- style.css ----------h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Red;
font-weight: bold;
}
#footer {
background-color: Gray;

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

<link rel="stylesheet" href="style.css" type="text/css">


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 with the <style> tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Inline Styles
An inline style should be used when a unique style is to be applied to a single occurrence of an
element.
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
Class
Class is specified by including a period (.) before the selector name. The syntax for declaring a
Class selector is as follows:
.navbar {
color:#0000FF;
}
<p class="navbar">This is a sample using a Class selector.</p>
ID
ID is specified by including a number sign (#) before the selector name. The syntax for declaring an
ID selector is as follows:
#footer {
color:#FF00FF;
}
To apply this style to the HTML, using the following code:
<p id="footer">This is a sample using an ID selector.</p>
The difference between ID and class is that an ID selector can be called only once in a document,
while a class selector can be called multiple times in a document. The second difference is that ID
can be called by Javascript's getElementByID function.
There is no hard rule on when to use ID and when to use Class. My suggestion is to use class as
much as possible for maximum flexibility, with the only exception being when you want to use
Javascript's getElementByID function, in which case you need use ID.
Class and ID names are both case sensitive. For example, .classone and .ClassOne are two different
Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

classes.
DIV The div element is the generic block element. You can use div to apply styles to large sections
of HTML, such as multiple paragraphs.
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
SPAN The span element is the generic inline element. Used over a span.
<p> My friend has <span Style = "color:lightskyblue;font-weight:bol" >light blue</span> eyes
CSS Properties are divided into the below given logical groups
CSS Font Properties
The CSS font properties control all aspects of your text graphical representation.

font
font-family

font-size

font-style

font-weight

font-variant
CSS Text Properties
The CSS text properties control the spacing, alignment, decoration, and other miscellaneous aspects
of the text.
letter-spacing
word-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
CSS Box Properties
The CSS box properties are used to define the spacing in and around HTML elements, their
borders, and other positioning aspects. Border, Margin, and Padding all have four properties each:
top, right, bottom, and left.

Margin

Padding

Border

Border-width

Border-color

Border-style

Width

Height

Float

Clear
CSS Color Properties
Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

The CSS color property defines what color the text inside the specified HTML element will have
h4 { color: red; } , h5 { color: #9000A1; } , h6 { color: rgb(0, 220, 98); }
CSS Background Properties
The CSS background properties control things like if the background is a single color or maybe an
image
Background
Background Color
Background Image
Background Repeat
Background Attachment
Background Position
CSS Classification Properties
We think of the classification properties as having the list element and all the leftover elements that
would not fit into any other category.
Display
Whitespace
List Style
List Style Type
List Style Image
List Style Position

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

JAVASCRIPT
JavaScript is a new scripting language which is being developed by Netscape.JavaScript is a
compact, object-based scripting language for Web pages
JavaScript and Java
Although the names are almost the same, JavaScript isn't the same as Java. These are two different
techniques for Internet programming. Java is a real programming language, and you can create real
programs with it.JavaScript is a scripting language. You could even say that JavaScript is rather an
extension to HTML than a separate computer language. It's so tightly integrated with HTML that
you could call it "JavaScript markup language." JavaScript coders don't care too much about real
programming, they just make different nice effects by inserting small JavaScript code fragments
into their Web pages.
JavaScript can be inserted into a HTML file by using <SCRIPT> tag or can be created as a sepetate
.js file and can be inserted into the HTML
myscript.js
function popup() {
alert("Hello World")
}
Example : Using external JavaScript File
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="myscript.js">
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Click Me!">
</body>
</html>
Example :
<html>
<body>
<script type="text/JavaScript">
<!-document.write("Hello World!")
//-->
</script>
</body>
</html>
Note: The <!-- and --> tag as Old browsers will not understand the <SCRIPT> tags.

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

Dialog boxes
JavaScript has three kind of popup (dialog) boxes Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
<html>
<body>
<script type="text/javascript">
alert("Welcome to my world!!!");
</script>
</body>
</html>
Confirm Box
A confirm box is often used if you want the user to verify or accept something.When a confirm box
pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the
box returns true. If the user clicks "Cancel", the box returns false.
Example
<html>
<head>
<script type="text/javascript">
function show_confirm() {
var r=confirm("Press a button");
if (r==true)
{ document.write("You pressed OK!");
}
else
{ document.write("You pressed Cancel!");
}}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.When a
prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an
input value.If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the
box returns null.
Example
<html>
<head>
<script type="text/javascript">
Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

function disp()
{
var name=prompt("Please enter your name","Sreenivas");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp()" value="Show prompt box" />
</body>
</html>
Looping and Branching:
for loops allow a set of statements to be repeated or looped through a specified number of times
for loop example:
for (i=1; i<=10; i++) {
document.writeln("i=" + i);
}
while loop allow a set of statements to be repeated or looped through
until a certain condition is met.
while loop example:
i = 1;
while (i<=5) {
document.write("\t"+i);
i = i + 1;
}
switch statement
Switch statements are used to select which statements are to be executed depending on a variable's
value matching a label.
ch=window.prompt('Enter any number from 1 to 3');
switch (ch) {
case '1': alert('Number entered is 1'); break;
case '2': alert('Number entered is 2'); break;
case '3': alert('Number entered is 3'); break;
default: alert('Number entered is not between 1 to 3 ');
}

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

JavaScript Functions
A function contains code that will be executed by an event or by a call to the function.
Syntax
function functionname(var1,var2,...,varX)
{
some code
}
Example
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
Example
This is a very simple script. It opens up an alert message box which displays whatever is typed in
the text box.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function MsgBox (textstring) {
alert (textstring) }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="text1" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Show Me"
onClick="MsgBox(form.text1.value)">
</FORM>
</BODY>
</HTML>

Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

Example: To Change Background Color of the page on button Click.


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changecolor(code) {
document.bgColor=code
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<input type="button" name="Button1" value="RED" onclick="changecolor('red')">
<input type="button" name="Button2" value="GREEN" onclick="changecolor('green')">
<input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')">
<input type="button" name="Button4" value="WHITE" onclick="changecolor('white')">
</form>
</BODY>
</HTML>
<HTML>
<HEAD>
<SCRIPT>
function getSelect(s) {
return s.options[s.selectedIndex].value
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="list" SIZE=1 OnChange="location=getSelect(this)">
<OPTION value="#"> Choose a search engine
<OPTION value="http://www.jbiet.edu.in"> JBIET
<OPTION value="http://www.jbrec.edu.in"> JBREC
<OPTION value="http://www.bhaskarmedicalcollege.edu.in/"> BMC
</SELECT>
<FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<script language="javascript">
function validate(value) {
if (value<0)
alert("Please input a value that \n"+
" is greater or equal to 0");
}
</script>
Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu

Handout - 1

</HEAD>
<BODY>
Try inputting a value less than zero
<FORM>
<INPUT TYPE="text" onBlur="validate(this.value)">
</FORM>
</BODY>
</HTML>
<html>
<head>
<script language="javascript">
function showElement()
{
var txt=document.getElementById("txt");
alert(txt.value);
var t=document.getElementsByName("txt");
alert(t.value);
}
</script>
</head>
<body>
<input type="text" name="txt" id="txt"><br><br>
<input type="button" value="Enter Text and Click Me" onclick="showElement()">
</body>
</html>
JAVASCRIPT OBJECTS
Genwral Ojects of JavaScript are Array, Date, Function,Math, String etc. Also we have
Window ,History, Navigator , Document , Form Objects.
Date Object Methods:
var now = new Date();
document.writeln(now.getFullYear());
document.writeln(now.getMonth());
document.writeln(now.getDate());
document.writeln(now.getDay());
document.writeln(now.getTime());
document.writeln(now.getHours());
document.writeln(now.getMinutes());
document.writeln(now.getSeconds());
document.writeln(now.getTimezoneOffset());
document.writeln(now.toGMTString());
document.writeln(now.toLocaleString());
String Object:
var str="Hello world!";
document.write(str.toUpperCase());
Department of Information Technology , JBIET

M.Tech (SE) Java / Web Technologies - by G.Sreenivasulu


document.write(str.toLowerCase());
document.write(str.substr(2,3));
document.write(str.charAt(1));
document.write(str.length);
document.write(str.replace("world", "hyderabad"));
var str1="Hello ";
var str2="world!";
document.write(str1.concat(str2));
Math Object
document.writeln(Math.abs(7.25));
document.writeln(Math.ceil(0.60));
document.writeln(Math.floor(0.60));
document.writeln(Math.round(0.49);
document.writeln(Math.cos(0));
document.writeln(Math.max(5,7));
document.writeln(Math.min(5,7));
document.writeln(Math.pow(2,3));
document.writeln(Math.random())); //returns a random number between 0 and 1.
document.writeln(Math.sin(Math.PI/2));
document.writeln(Math.sqrt(9));
Document Object
document.writeln(document.title);
document.writeln(document.URL);
document.writeln(document.domain);
document.writeln(document.anchors.length); // will give no of anchor elemets
document.bgColor = "#FF00FF';
document.writeln(document.forms.length);
document.writeln(document.images.length);

Department of Information Technology , JBIET

Handout - 1

You might also like