HTML & JAVA Script

HTML is a language for describing web pages:HTML stands for Hyper Text Markup Language.
HTML is not a programming language, it is a
markup language.
A markup language is a set of markup tags.
HTML uses markup tags to describe web pages.
HTML documents contain HTML tags and plain text.
HTML documents are also called web pages.
HTML Documents = Web Pages

In 1980, physicist Tim BernersLee, who was a contractor at CERN.
In 1989, Berners-Lee wrote a memo
proposing an Internet-based
hypertext system. Berners-Lee
specified HTML and wrote the
browser and server software in the
last part of 1990. In that
year, Berners-Lee and CERN data
systems engineer Robert Cailliau
collaborated on a joint request for
funding, but the project was not
formally adopted by CERN.

First specifications:The first publicly available description of HTML was a document called "HTML
Tags", first mentioned on the Internet by Berners-Lee in late 1991. It describes 20
elements comprising the initial, relatively simple design of HTML.

Berners-Lee considered HTML to be an application of SGML. It was formally
defined as such by the Internet Engineering Task Force (IETF) with the mid-1993
publication of the first proposal for an HTML specification: "Hypertext Markup
Language (HTML)" Internet-Draft by Berners-Lee and Dan Connolly, which included
an SGML Document Type Definition to define the grammar.

7

Brief HTML Background:HTML has not been around for many years. November 1990
marks the day of the first web page and back then there were little to
no HTML standards to be followed. A group called the World Wide Web
Consortium(W3C) was then formed and have since set the standards
that are widely accepted.

Preparation for HTML:Creating an HTML document is easy. To begin coding HTML you
need only two things: a simple-text editor and the dedication ! Notepad
is the most basic of simple-text editors and you will probably code a fair
amount of HTML with it.

Tag :- Used to specify ("mark-up") regions of HTML
documents for the web browser to interpret. Tags
look like this: <tag>

Element :- A complete tag, having an opening
<tag> and a closing </tag>.

Attribute :- Used to modify the value of the HTML
element. Elements will often have multiple
attributes.

HTML markup tags are usually called HTML tags:HTML tags are keywords surrounded by angle
brackets like <html>.
HTML tags normally come in pairs like <b> and </b>.
The first tag in a pair is the start tag, the second tag
is the end tag.
Start and end tags are also called opening tags and
closing tags.
Although some tags, known as empty elements, are
unpaired like <br>.

Element examples:Header of the HTML document:<head>...</head>. Usually
the title should be included in the head, for example:
<html>
<head>
<title>The title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

A Hyperlink (or link) is a word, group of words, or
image that you can click on to jump to a new document or a
new section within the current document.
Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:To create a link to another document, by using
the href attribute.
To create a bookmark inside a document, by
using the name attribute.

Cascading Style Sheets (CSS) is a
style sheet language used to describe the
presentation semantics (the look and
formatting) of a document written in a
markup language.
Its most common application is to
style web pages written in HTML.

HTML forms are used to pass data to a server.
The <form> tag is used to create an HTML form
Text Fields:<input type="text" /> defines a one-line input field that a user
can enter text into.
Password Field:<input type="password" /> defines a password field.
Radio Buttons:<input type="radio" /> defines a radio button. Radio buttons let
a user select ONLY ONE of a limited number of choices.
Checkboxes :<input type="checkbox" /> defines a checkbox. Checkboxes let
a user select ONE or MORE options of a limited number of choices.
Submit Button :<input type="submit" /> defines a submit button.

EXAMPLE :<html>
<head>
<p>
<font size="9" face="Times new Roman" color="red">
<h1>NIIT</h1>
</font>
</p>
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br/><br/>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br/><br/>
<input type="checkbox" name="course" value=“DIFA" /> DIFA student<br />
<input type="checkbox" name="course" value="GNIIT" /> GNIIT student
<form name="input" action="html_form_action.asp" method="get"><br/>
<br/>
Username: <input type="text" name="user" /><br/>
Password: <input type="password" name="pwd" />
<input type="submit" value="Submit" />
</form>
<p>If Want to go NIIT Home page then
<a href="http://www.niitstudent.com">click here</a>
</head>
</html>

An HTML Application (HTA; file extension “.hta") is a Microsoft
Windows application that uses HTML and Dynamic HTML in a browser
to provide the application's graphical interface. A regular HTML file is
confined to the security model of the web browser, communicating
only to web servers and manipulating only webpage objects and site
cookies. An HTA runs as a fully
trusted application and therefore
has more privileges, like
creation/editing/removal of files and
Windows Registry entries. Because
they operate outside the browser's
security model, HTAs cannot be
executed via HTTP, but must be
downloaded (just like an EXE file) and
executed from local file system.

“Now we are moving on

JAVA Script.”

19

Introduction

Of

Java
Script

21

JavaScript is a prototype-based scripting language that is dynamic, weakly
typed. It is a multi-paradigm language, supporting object-oriented, imperative, and
functional programming styles. JavaScript is an Object Based Programming
language. An Object Based Programming language allows you to define your own
objects and make your own variable types.

JavaScript = ECMAScript
JavaScript is an implementation of the ECMAScript language standard.
JavaScript was formalized in the ECMAScript language standard and is primarily used
in the form of client-side JavaScript, implemented as part of a Web browser in order
to provide enhanced user interfaces and dynamic websites. JavaScript's use in
applications outside Web pages — for example in PDF documents, site-specific
browsers, and desktop widgets — is also significant.

22

JavaScript is a scripting language.
A scripting language is a lightweight programming language.
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).
JavaScript is used in billions of Web pages to add functionality,
validate forms, communicate with the server, and much more.
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.

23



JavaScript gives HTML designers a programming tool.



JavaScript can react to events .



JavaScript can read and write HTML elements.



JavaScript can be used to validate data.



JavaScript can be used to detect the visitor's browser .



JavaScript can be used to create cookies

24

NO!
Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming
language - in the same category as C and C++. It is true that both have a C-like syntax, the C
language being their most immediate common ancestor language. They are both objectoriented and are widely used in client-side Web applications. JavaScript also has many
functional features based on the Scheme language.
However, the similarities end there: Java has static typing.



 Java is more strongly typed.



 Java is loaded from compiled
bytecode.
 Java's objects are class-based.




JavaScript's typing is dynamic (meaning a variable
can hold an object of any type and cannot be
restricted).
JavaScript is weakly typed.
JavaScript is loaded as human-readable source
code.
JavaScript's are prototype-based.

25

JavaScript was originally developed by Brendan Eich of Netscape under the
name Mocha, which was later renamed to Live Script, and finally to JavaScript mainly
because it was more influenced by the Java programming language.
JavaScript very quickly gained widespread success as a client-side scripting
language for web pages.
In November 1996, Netscape announced that it had submitted JavaScript to
Ecma International for consideration as an industry standard, and subsequent work
resulted in the standardized version named ECMAScript.
JavaScript has become one of the most popular programming languages on
the web. Initially, however, many professional programmers denigrated the language
because its target audience was web authors and other such "amateurs", among
other reasons.

26

Brendan Eich was a major part of
the JavaScript development for
the Netscape Browser, and the
chief architect for the Mozilla.org
Project. He has been Chief
Technology Officer (CTO) for
Mozilla since 2005. He currently
servers on the board of directors
for the Mozilla Foundation.

27

The HTML <script> tag is used to insert a JavaScript into an
HTML page that means to insert a JavaScript into an HTML
page, use the <script> tag.
Inside the <script> tag use the type attribute to define the
scripting language.
The <script> and </script> tells where the JavaScript starts
and ends. JavaScript’s can be put in the <body> and in the <head>
sections of an HTML page.
Unlike HTML, JavaScript is case sensitive – therefore we
watch capitalization closely when we write JavaScript
statements, create or call variables, objects and functions.

28

Example of JAVA Script :<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>

29

JavaScript Statements:JavaScript is a sequence of statements to be executed by the browser.
A JavaScript statement is a command to a browser. The purpose of the command is to tell the
browser what to do.

JavaScript Code:JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will write a heading and two paragraphs to a web page:
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
Note: Using semicolons makes it possible to write multiple statements on one line.

30

JavaScript Blocks:JavaScript statements can be grouped together in blocks. Blocks start with a left curly
bracket “{“, and end with a right curly bracket “}”. The purpose of a block is to make the
sequence of statements execute together.
This example will write a heading and two paragraphs to a web page:
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>
This example is just demonstrates the use of a block. Normally a block is used to group
statements together in a function or in a condition (where a group of statements should be
executed if a condition is met).

31

Some Browsers do Not Support JavaScript:Browsers that do not support JavaScript, will display JavaScript as page
content. To prevent them from doing this, and as a part of the JavaScript
standard, the HTML comment tag should be used to "hide" the JavaScript.
Just add an HTML comment tag 
(end of comment) after the last JavaScript statement, like this:
<!-document.getElementById("demo").innerHTML=Date();
//-->
</script>

The two forward slashes at the end of comment line (//) is the JavaScript comment
symbol. This prevents JavaScript from executing the --> tag. Comments can be added to
explain the JavaScript, or to make the code more readable.
Single line comments start with //. Multi line comments start with /* and end with */.
32

JavaScript Variables:Variables are "containers" for storing information. As with algebra, JavaScript
variables are used to hold values or expressions. A variable can have a short name, like
x, or a more descriptive name, like carname. We can use variable with use “var”.
Rules for JavaScript variable names:
Variable names are case sensitive (y and Y are two different variables).
Variable names must begin with a letter, the $ character, or the underscore
character.
Example:var x;
var carname;
OR
var x=5;
var carname="Volvo";
Note: When we assign a text value to a variable, use quotes around the value.
Note: If we redeclare a JavaScript variable, it will not lose its value.
33

JavaScript Operators:“= “is used to assign values.”+”is used to add values.
y=5;
z=2;
x=y+z;

JavaScript Arithmetic Operators:Arithmetic operators are used to perform arithmetic between variables and/or
values.

34

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

The + Operator Used on Strings:The + operator can also be used to add string variables or text values together.
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
x="5"+"5";
document.write(x);
35

JavaScript Comparison and Logical Operators:Comparison and Logical operators are used to test for true or false.
Comparison Operators:Comparison operators are used in logical statements to determine equality
or difference between variables or values.

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

Logical Operators:Logical operators are used to determine the logic between variables or values.

Conditional Operator:- JavaScript also contains a conditional operator that assigns a
value to a variable based on some condition.
Syntax
variablename=(condition)?value1:value2
Conditional Statements:- are used to perform different actions based on different
conditions.
if statement
if...else statement
if...else if....else statement
switch statement
37

JavaScript Events:Events are actions that can be detected by JavaScript. By using JavaScript, we
have the ability to create dynamic web pages. Events are actions that can be detected
by JavaScript.
Example:<html>
<head>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>

38

JavaScript Popup Boxes
JavaScript has three kind of popup 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.
Syntax
alert("sometext");
Confirm Box:- A confirm box is often used if you want the user to verify or accept
something.
Syntax
confirm("sometext");
Prompt Box:- A prompt box is often used if you want the user to input a value before
entering a page.
Syntax
prompt("sometext","defaultvalue");
39

HTML & JAVA Script

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML & JAVA Script (20)

Recently uploaded (20)

HTML & JAVA Script