1. Basics of HTML (Hyper Text
Markup Language)
ïŒ HTML is used to render Web pages
ïŒRendering may differ from a browser to another
ïŒIt has no computation power and should include
some Scripting language, like Java Script or
VBScript to produce User interactive Rendering
Pages
ïŒDespite several design tools, we should learn
some basics of HTML to be good web
developer.
Monday, October 13, 2014sohamsengupta@yahoo.com 1
2. Some basic tags of HTML
ïThe MIME type is text/html (details on MIME
later on)
ïApart from <html>, <head>, <title>, <body>, and
6 heading tags like <h1>âŠ<h6>, we have tags
like <form>, <b>, <u>, <i>, <a>, <ul>, <ol>,
<table>, <input>, <select> et al, to mention a
few.
ïNot all these tags require closing, but itâs a good
practice to close all tags when over.
ïMost of the tags have attributes, and itâs a
common malpractice to avoid double/single
quotes enclosing the attribute values.
Monday, October 13, 2014sohamsengupta@yahoo.com 2
3. Hey Man! Quotes Must!
ï¶ For Example, <input type=âtextâ
name=âfnameâ value=âAditya Narayanâ> is
Okay.
ï¶But, not the following one⊠<input
type=text name=fname value=Aditya
Narayan>
ï¶In the second case, for some browsers
shall truncate the part Narayan from the
field.
Monday, October 13, 2014sohamsengupta@yahoo.com 3
4. Form Tag and its Importance
ï The main power of Web is how easily and fast it
interacts with the server and processes the user
inputs, and what transfers data from the client to
the server is the <FORM> tag.
ïIt defines mainly 2 attributes, though not
mandatory but expected, are action and
method. By default method is GET (details later)
ïThe action contains the URL that the FORM is
submitted to and transfers the user-input data to.
ïForm may contain some <input> field as shown
in next slide, some <select> field, and a Submit
Button or a Button leading to the Submit event.
Monday, October 13, 2014sohamsengupta@yahoo.com 4
5. Inside a <FORM> tag <html><head><title>Welcome to JISCE</title></head><body>
<form action=http://myhost:myport/myURI><pre>
Enter name: <input type=âtextâ name=âmyNameâ>
Enter ID: <input type=âtextâ name=âmyIdâ>
<select name=âmySkillâ>
<option value=âJava SEâ>Java SE 1.4</option>
<option value=âJava EEâ>Java EE 1.4</option>
<option value=âJava MEâ>Java 2 ME </option></select>
Gender <input type=âradioâ name=âmySexâ value=âMaleâ>Male
<input type=âradioâ name=âmySexâ value=âFemaleâ>Female
Check if already registerd <input type=âcheckboxâ
name=âregStatusâ value=âregdâ>
<input type=âSubmitâ value=âDoneâ></pre>
</form>
</body>
</html>
View At the Code above rendered in IE 6
Monday, October 13, 2014sohamsengupta@yahoo.com 5
6. Inside the <INPUT> tag
ï<INPUT> tags donât need to be closed.
ïWith this, we can take any text data, password,
checkbox, radio button, Submit Button, Hidden
Form Field, Any Button, A File to Upload etc.
ïThe mandatory âtypeâ attribute determines what
the INPUT is going to render.
ï Example, <input type=âtextâ name=âfnameâ>
ïThe name attribute is must, too. It lets the server
fetch the data âfnameâ from the data entered
here
ïMore on these followsâŠ
Monday, October 13, 2014sohamsengupta@yahoo.com 6
7. More on <INPUT> tag
ïŒ<input type=âpasswordâ name=âpwdâ>
ïŒ<input type=âradioâ name=âsexâ value=âMaleâ>
Male
<input type=âradioâ name=âsexâ
value=âFemaleâ>Female
ïThe above 2 radios must have same name
else both can be selected at time thatâs not desired
ïŒThe value attribute must be present with radios
and You have to render, too; else the user shall
not see whatâs for what option. The 2 need not
be same.
Monday, October 13, 2014sohamsengupta@yahoo.com 7
8. <INPUT> tagâŠcontd.
ï <input type=âcheckboxâ name=âskillâ value=âJava
SEâ>Java SE
<input type=âcheckboxâ name=âskillâ value=âJava
EEâ>J2EE
<input type=âcheckboxâ name=âskillâ value=âJava
MEâ>J2ME
ï Check boxes with same name can be multi-checked at
a single time. They must have values and the rendered
text should be there to tell the user whatâs what option
and the value attribute may not be same as the text
rendered. The server shall accept the value attributeâs
values.
ï Here, the server shall consider the âJava EEâ but not the
rendered text J2EE.
Monday, October 13, 2014sohamsengupta@yahoo.com 8
9. <INPUT> tag⊠contd.
ï<input type=âhiddenâ name=âhdn1â
value=âloggedâ> This shall not be
rendered in the browser but are often
required for Session tracking (details later)
ï<input type=âsubmitâ value=âDoneâ>
ï<input type=âbuttonâ name=âbtn1â
value=âClickâ>
ï<input type=âfileâ name=âupldFileâ> shall
open a File type input on browsing.
Monday, October 13, 2014sohamsengupta@yahoo.com 9
10. <select> Tag as Drop-down list
ï<select name=âskillâ>
<option value=âJavaâ>Java</option>
<option value=âCPPâ>C++</option>
<option value=âC#â>C-Sharp</option>
</select>
ïŒIt should have a name, so to let the server
retrieve the data skill from the form, after itâs
submitted.
ïŒAlso, Server shall get the value âCPPâ, not âC-Sharpâ
Monday, October 13, 2014sohamsengupta@yahoo.com 10
11. Java Script for Client Side
Validation
ï¶Sometimes, you canât rest assured with the data
that the user inputs through the client browsers
as they have to pass several validation and
conform to certain constraints. Like, the user
may be required to fill up all the fields in the form
and then submit. Also, the user may input some
Alphabets where only numeric data is required.
All these things must be taken care of by the
server side program.
ï¶But, better if we could check them at the client
side, thus saving the time of a round-trip to the
server. Scripting languages like JavaScript used.
Monday, October 13, 2014sohamsengupta@yahoo.com 11
12. A Simple Form validation with Java
Script
<script language=âJavaScriptâ>
function chkForm(){
var msg=ââ;
if(document.forms[0].myName.value==ââ){
msg+=âName canât be blank!nâ;
}
if(document.forms[0].myCity.value==ââ){
msg+=âCity canât be blank!â;
}
if(msg==ââ) return true;
else{
alert(msg);
return false;
}
}
</script>
Monday, October 13, 2014sohamsengupta@yahoo.com 12
13. The HTML Code
<body>
<form action=âmyURLâ onsubmit=âreturn chkForm()â>
Enter Name: <input type=âtextâ name=âmyNameâ>
<br>Enter City: <input type=âtextâ name=âmyCityâ>
<input type=âsubmitâ value=âSubmitâ>
</form>
</body>
</html>
FormValidation.html
ïŒ onsubmit=âreturn chkForm()â Note the return
keyword, without which itâd not work!
Monday, October 13, 2014sohamsengupta@yahoo.com 13
14. Brief history of JavaScript
Netscape developed a scripting language called LiveScript
Supported both client side and server side scripting
Netscape Navigator 2
(support for java applets and LiveScript
renamed as JavaScript1.1)
Microsoft- JScript IE 3
1997 ECMA (European
Computer Manufacturers
Association)
Standardized ECMA script
Opera
supporting
JavaScript 1.1
W3C standardized DOM to access HTML and XML
JavaScript 1.2
Monday, October 13, 2014sohamsengupta@yahoo.com 14
15. Programs
executes on the
server and sends
the response
Response
HTML file
JAVA
SCRIPT
Request
Client Web Server
Script
executes
locally and
interacts with
the browser
Monday, October 13, 2014sohamsengupta@yahoo.com 15
Servlet files
JSP files
HTML files
16. Uses
âą To create more interactive pages- client side validations etc.
âą To generate html dynamically.
âą Event handling
âą To enhance browser capabilities by giving it a better look â
printing on status bar etc.
âą Interaction with embedded components like applets and active
x controls.
Language Features
âą Object based language:no object inheritance and subclassing. Object -based
because it depends on built-in objects to function.
âą Semicolon, as separator for multiple statements in the same line.
âą Syntax similar to c++ and java
âą Case sensitive
âą Loosely typed
âą Platform independent
âą Interpreted
Monday, October 13, 2014sohamsengupta@yahoo.com 16
17. External Script
<HTML>
<HEAD>
<BODY>
<SCRIPT LANGUAGE=âJavaScriptâ
SRC=âJSfile.jsâ>
</SCRIPT>
</BODY>
</HTML>
JSfile.js
document.write(âHelloâ)
Scripts inside body and head
Inside head only declarations should be done. No write
statements must appear inside head tag.
<HTML><HEAD><TITLE>Hello</TITLE>
<SCRIPT>
document.write(âHello java scriptâ)
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
Incorrect
Monday, October 13, 2014sohamsengupta@yahoo.com 17
18. Java Script Data Type and Scope
ï± Java Script is loosely typed and it
supports Data Types like String, Date,
Array etc. and totally objects.
ï± A variable defined with keyword var
inside a function is a local variable.
Otherwise it has scope global to the entire
HTML page.
ï± We, however, must not indulge in the
luxury of dealing with Language basics.
Monday, October 13, 2014sohamsengupta@yahoo.com 18
19. A Simple variable and function
example
<html><head></head>
<script>
age=90;
function fun(){
age=26;
alert("Age = "+age);
}
</script>
<input type="button" value="Show Age" onclick="fun()">
<input type="button" value="Show Age12" onclick="sd()">
<script>
function sd(){
alert("Age = "+age);
}
</script>
<body>
</body></html> See this execute
Monday, October 13, 2014sohamsengupta@yahoo.com 19
20. Continuation to The Code
ï± Here age has global scope. Now if we modify
the code as including
function fun(){
var age=26;
alert("Age = "+age);
} we shall get different output.
ï± If we omit the statement age=90; we get different
situation. But if we associate a var with age, itâd be same.
ï± After this example we not only got to learn about the scope of
variables, but we proved that declaring a variable with var
keyword doesnât always localize it.
Monday, October 13, 2014sohamsengupta@yahoo.com 20
21. Event handling with Java Script
ï¶ Thereâs nothing like consulting the
documentation of Java Script. We shall learn to
use Java Script with HTML with hands-on
practice.
ï¶Sometimes we shall need to embed Java Script
in HTML and position elements dynamically.
ï¶Some event-handlers: onclick, onkeyup,
onkeypress, onkeydown, ondblclick, onchange,
ï¶Following shall be some assignments weâd
discuss.
Monday, October 13, 2014sohamsengupta@yahoo.com 21
22. Assignments on Java Script Event
Handling-1
ïThereâll be a form having 2 text fields and
a checkbox. The 2nd text needs only
numbers. So, Typing sans numeric shall
not be allowed. Now, the checkbox if
checked, on clicking the submit button, the
browser will ask for confirmation whether
to submit or not. If both the fields are not
filled up, the form shall never be
submitted.
Monday, October 13, 2014sohamsengupta@yahoo.com 22
23. Assignments on Java Script Event
Handling-2,3
ï± There should be a Hyper link that links to a
page. As you make the mouse cursor go over
the link, itâd change font color and size. As you
mouse-out, it should be restored.
ï± There should be a form that takes 2 text fields,
name and Phone No. The Phone No. must be
numeric. Also, there should be a checkbox
asking for if there is an alternative phone
Number to be provided, which, when checked,
will display another text field taking only
numbers and un-checking will make it disappear.
Monday, October 13, 2014sohamsengupta@yahoo.com 23
24. Assignments on Java Script Event
Handling-4,5
ï There should be a text area, and you can type
up to 100 characters. As you keep on typing, a
text indicating how many characters more
remain, shall be displayed continuously.
ïThere should be 2 text fields taking two
numbers. A button should be there disabled until
both the text fields are filled up. However, if you
delete any of the numbers, the button should
become disabled again. Otherwise, clicking the
button, the sum should be displayed.
Monday, October 13, 2014sohamsengupta@yahoo.com 24
25. Frames and Java Script:
Assignment
ï There should be 2 frames on a page. The LHS
frame should contain link to a page say 2.html,
in various ways, to open in the same and parent
frames, in a new window, and in the same
window. The page 2.html, would have buttons to
close the window in various ways.
ïŒ You would need some knowledge on DHTML
and Cascading Style Sheets (css) to solve some
of the assignments. So, the next few slides
followâŠ
Monday, October 13, 2014sohamsengupta@yahoo.com 25
26. Three ways to include style
âą Embedded style
âą Inline style
âą Linked styles
Setting up style info- an example
Microsoft way
BODY { font: 12 pt Arial; color: navy; margin-left:
0.25in }
H1 { font: 18 pt Arial; color: red }
Monday, October 13, 2014sohamsengupta@yahoo.com 26
27. Embedded style : <Style> tag
<html><head>
<style type="text/css">
BODY { font: 12 pt Arial; color: navy; margin-left: 0.25in}
H1 { font: 18 pt Arial; color: red}
</style>
</head>
<body>
<h1>Dynamic Web Pages</h1>
The need of dynamic web pages; an overview of DHTML,
cascading style sheet, comparative studies of different
technologies of
dynamic page creation
</body></html>
Monday, October 13, 2014sohamsengupta@yahoo.com 27
29. Linked style
âą Linking to a style info in a separate file.
BODY { font: 12 pt Arial; color: navy; margin-left:
0.25in}
H1 { font: 18 pt Arial; color: red}
Monday, October 13, 2014sohamsengupta@yahoo.com 29
style.cs
s
<html><head>
<link rel=âstylesheetâ href=âstyle.cssâ>
</head>
<body><h1>Dynamic Web Pages</h1>
The need of dynamic web pages; an overview of
DHTML,cascading style sheet, comparative studies of
different technologies of dynamic page creation
</body></html>