HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
• <html>
<title> SCS ,DAVV ,Indore </title>
<h1> Welcome to SCS DAVV</h1>
<body>
The different course run at SCS are <br>
<b>M.Tech.(CS)<br>M.Sc.
(IT/CS)<br>MCA<br>MBA(CM) </b>
</body>
</html>
HTML tags Cont…
• </head>
• <body>
• <script type="text/Javascript">
• for(i=1;i<=10;i++)
• {
• p=i*n;
• document.write(n+"*"+i+"="+p+"<br>");
• }
• </script>
• </body>
• </html>
Function in JAVASCRIPT
• Built in functions-
Eval()- this function is used to convert a string
expression to a numeric value.
Eg. Var total=eval(“10*10+5”);
parseInt()- this function is used to convert a
string value to integer. It returns first integer
contained in a string or 0 if the string does
not begin with integer
Eg. Var N=parseInt(“123xyz”); N=123
Alert()- Which works similar to messagebox
function in vb.
User defined functions
• Functions are declared and created using
keyword function. A function can have
following ---
• A name of funciton
• A list of parameters that will accept
values passed to the function when called.
• A block of javascript code that defines the
function.
• Generally function are created within the
<head>….</head> tag. This ensures that
all functions will be parsed before they
are invoked or called.
• Eg.—
<html>
<head>
<title> Welcome to SCS, DAVV Indore </title>
<script type=“text/javascript”>
var name=“ “;
Function he()
{
name=prompt(“Enter Your Name”,”Name”);
Alert(“Hello “+name ” +” Welcome to my page!”);
} Function be()
{ alert(“Bye “); }
</script></head>
<body onLoad=“he();” onUnLoad=“be();” >
< img src=“p1.jpg”>
</body>
</html>
Forms used by a Web Site
• An html form provides data gathering
functionality to a web page. HTML forms
provides all GUI controls. The data
submitted can be processed at web server
by javascript .
• Java script allows the validation of data
entered into a form at the client side.
• HTML provides the <form> </form> tags
with which an html form an be created to
capture user input. All form object are
described betewee <form> </form>
Example
• <html>
• <title> Use of Form Tag </title>
• <head>
• <script type="text/JavaScript">
• function val(f1)
• {
• alert("Your name is "+document.forms[0].elements[0].value);
• alert("Your Class is "+document.forms[0].elements[1].value);
• }
• </script>
• </head>
• <body>
• <form name="f1">
• Stduent DATABASE <br><br>
• Enter your name:<input type=text name="t1" value=""><br>
• Enter your Class:<input type=text name="t1"
• value=""><br><br><br>
• <input type="button" name="b1" value="show"
• onClick="val(form)">
• </form>
• </body>
• </html>
The HTML form elements that can be
specified as attributes to <input> tag are :
Form Elements Description & Syntax
SELECTOR { DECLARATION }
CSS – Terminology…
Declaration has two parts:
HI {color : green }
property : Value
• In general:
• Element(s) {Property1:Value;
Property2:Value;}
Eg.: H1, B {color:olive; background:yellow; font-
•
family: arial, courier }
CSS-Adding styles to web
pages
Four ways
– Embed a style sheet within HTML
document
– Link to an external stylesheet from
the HTML document
– Add styles inline in the HTML
document
– Importing style sheets
CSS-Embed a style sheet
• All stylesheet information lies at the
top of the HTML code (in the head
portion)
• Eg:
<HTML>
<STYLE TYPE=“text/css”>
<!—H1 {color: green; font-family: impact}-- >
</STYLE>
<HEAD>
<BODY> . . .
CSS-Link to an external
style
An externally defined sheet
stylesheet is used as a style
template that can be applied to a number of pages
A text file (with ext .css) contains the stylesheet rules
to be applied to a page (or set of pages)
• Eg. A file named ‘mystyles.css’
H1 {color: green; font-family: impact}
B {color: red; font-family: courier}
This file is linked to the HTML document (<LINK>)
• In the web Page:
• <HTML>
• <LINK REL=stylesheet HREF=“mystyles.css”
TYPE=“text/css”>
• <HEAD>
• <BODY> . . .
CSS-Add styles inline
• Applying stylesheets rules to particular HTML
tags
• Eg:
<B STYLE=“color: purple; background:
yellow”>Adding Inline styles</B>
• The style applies to only that particular <B>
tag
CSS – Importing
Stylesheets
Style Sheets which are external to the HTML
document are imported (included) into the
<style> element within the <head> element
of the current document.
Similar to linking, but useful when you want to
override some style rules when you include it
in your own stylesheet.
<style type="text/css">
<!-- @import
url(http://www.cen.com//houseBasic.css);
ul ul { list-style-type: circle; } --> </style>
The imported sheets must appear before any
document-specific styles
CSS- Classes
Selectively apply a style to HTML elements
you can define different classes of style to
the same element, and apply the
appropriate class of style when required
HTML
<P CLASS="first">The first paragraph</P>
<P CLASS="second">The second paragraph</P>
<P CLASS="third">The third paragraph</P>
Stylesheet
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
DOM-Document Object
Model
The Document Object Model is a
platform- and language-neutral
interface that will allow programs
and scripts to dynamically access
and update the content, structure
and style of the document
The DOM details the characteristic
properties of each element of a Web
page, thereby detailing how we
might manipulate these components
and, in turn, manipulate the page
DOM…
Document Object Model is not a "part" of
Scripting languages. The DOM stands alone,
able to be interfaced with any programming
language designed to do so
The W3C DOM is the recommended
standard to be exposed by each browser
Microsoft Internet Explorer and Netscape do
not share the same DOM.
DOM…
Methods:
– A method typically executes an action which acts
upon the object by which it is owned
– Example: Alert
Events:
– Used to trap actions related to its owning object
– Typically, these actions are caused by the user
– Example: when the user clicks on a submit button
Using <span> tag
• Span tag play an important role in style sheets. In body of the
document, <span> … </span> tag is used to set boundaries of
the rule’s styling specification.
For eg.
<html>
<head> <style type=“text/css”>
P{font-size:12pt, text-align:justify}
.que {color:brown; font-style:italic}
.ans {color:red}
.big {font-size:25pt; color:red} </style> </head>
<body><body>
<p class=“que”>this <span class=“big” >style sheet </span>
class </p>
<p class=“ans”> style sheet class used in paragraph</p>
</body>