Upload
richtom
View
222
Download
0
Embed Size (px)
Citation preview
7/30/2019 HTML and some scripting
1/42
HTML Example
Hypertext Markup Language (HTML) Example
Hypertext Markup Language
Hypertext Markup Language (HTML) allows users to:
format and display text
display images
and so much more
Go to top of page
Begins the HTML document
HTML docs contain botha head and body section
Sets browsers background colour
to blue and font colour to white
Creates a bulleted list of items
Inserts an image
Creates a hyperlink back to the top of the page
7/30/2019 HTML and some scripting
2/42
HTML-Hyper text markup language
Language used to create web pages
Web page is a text file that contains instructions inthe form of html codes
Container tags- html instruction/commands that
require a start tag and end tag Start tag is < > and end tag is
Attributes for additional information Section tags- , ,
7/30/2019 HTML and some scripting
3/42
Empty tag- do not require a end tag
eg:
- break tag.
Eg: pgm
example program
hello
Save the content with the extension htmlEg: ProgramName.html
Run using a web browser like internet explorer or
Netscape
7/30/2019 HTML and some scripting
4/42
Text formatting tags
- bold font
- italic font
-underline
- subscript
- superscript
Eg:
hello
hello
hello
7/30/2019 HTML and some scripting
5/42
Eg:
this is a sample text for font
this is normal text
Eg:
H2O
x2+y2
7/30/2019 HTML and some scripting
6/42
The img tag lets u place a graphics image on a
web page
The img tag uses a src attribute with a relativepathname
Eg:
this first para above the picture
this second para below the picture
7/30/2019 HTML and some scripting
7/42
tag let u assign one or more formatting attributesto a group of html tags
Eg:
this first para above the picture
7/30/2019 HTML and some scripting
8/42
Document type definition(DTD)
Identifies the version of the HTML used.
Given at the top of the html document before the
tag
!doctype is the tag which doesnt need a closing tag
Html is the version of html
Publicwhether accessible by public
Version namecomplete name of the specific version ofhtml
urlindicates where on the world wide web a publicdefinition of the html code resides.
Eg:
7/30/2019 HTML and some scripting
9/42
Comment a line
Eg:
hi
Heading level tags
7/30/2019 HTML and some scripting
10/42
Alignment
- to center the graphics image and
text
Eg:
text centered
text
7/30/2019 HTML and some scripting
11/42
Adding a link
Eg:
for information click hereTo connect to yahoo
click here
Horizontal rule
- to create horizontal rule thats separates the text
Eg:
contact us
help
7/30/2019 HTML and some scripting
12/42
Eg:
contact us
help
Blockquote tagsfor indenting the text ie for increasing the margins
Eg:
this regular text
this text is blockquoted
7/30/2019 HTML and some scripting
13/42
LISTING
1. Ordered list
2. Unordered list
Ordered list
course u wish to join
MBA
MCA
7/30/2019 HTML and some scripting
14/42
Type is an attribute of which indicates which
type of listing is needed
default
Start is another attribute
7/30/2019 HTML and some scripting
15/42
UnOrdered list
shopping list
bread
butter
jam
Type attribute can be disc, square, circlewhere default is dot
eg:
7/30/2019 HTML and some scripting
16/42
Nested list
shopping list
bread
butter
sweets
jam
strawberrys
7/30/2019 HTML and some scripting
17/42
Page frame
Contains separate URL for each frame
Applicable when u want to display more than
one page in a single application window
Frames simply arrange multiple web pages
within a single document window
There will be either body tag or frameset tag
Frameset tag to create frames in a web page
Col attribute of frameset tells the web browser to
draw 2 frames and to make the respective pixel
width frames.
7/30/2019 HTML and some scripting
18/42
Src attribute of frameset will tell the name of the
web page to be displayed within the frame when the
browser is initially loaded. Eg:
framed document
7/30/2019 HTML and some scripting
19/42
About Us
7/30/2019 HTML and some scripting
20/42
Creating table
- to treat the text between these tags astable
- to treat as row
- to treat as column
example:1
1
2
K.S Chitra
Sonu Nigam
7/30/2019 HTML and some scripting
21/42
Eg:2
headings in a row
SI No:
Singers
K.S Chitra
Sonu Nigam
E 3
7/30/2019 HTML and some scripting
22/42
Eg:3
headings in a column
Alex
mark1
mark2
kishore
mark1
mark2
7/30/2019 HTML and some scripting
23/42
To set color
Bordercolorsets the bordercolor for the table
Eg:
Eg:
Eg:
C ll i ib i h bl k b
7/30/2019 HTML and some scripting
24/42
Cellspacing attributeto increase the blank space between
cells in table.
Eg:
Cellpadding attributeto increase the blank space between
the sides of the cell and the content in the cell
Eg:
Table dimension
eg: eg:
C ll di i
7/30/2019 HTML and some scripting
25/42
Cell dimension
sonu nigam
sonu nigam
Cell alignment
sonunigam
E l
7/30/2019 HTML and some scripting
26/42
Example
Example
7/30/2019 HTML and some scripting
27/42
Example
for yahoo click here
for msn click here
for rediff click here
7/30/2019 HTML and some scripting
28/42
Tag Description
Defines a form for user input
Defines an input field
Defines a text-area (a multi-line text input control)
Defines a label to a control
Defines a fieldset
Defines a caption for a fieldset
Defines a selectable list (a drop-down box)
Defines an option group
Defines an option in the drop-down box
Defines a push button
Form Tags
The form element creates a form for user input. A form can
contain textfields, checkboxes, radio-buttons and more. Forms are
used to pass user-data to a specified URL.
7/30/2019 HTML and some scripting
29/42
Name:
Password:Address:
Sex: male
female
may we give ur email id to others:
7/30/2019 HTML and some scripting
30/42
may we give ur email id to others:
yes
no
MBA
MBA
Example:1
7/30/2019 HTML and some scripting
31/42
Example:1
creating forms
Function checklogin()
{
.stmts..;
}
User name
7/30/2019 HTML and some scripting
32/42
--------------------------------------------------------------------------
Function checklogin()
{
document.form1.text1.value=hello;
alert ( thanks for stopping by! ) ;
}Syntax: document.formname.control
document.formname.control.property
document.formname.control.method(arguments)
Event handlers
7/30/2019 HTML and some scripting
33/42
Event handlers
Syntax:
Eventhandler= functionname()Onblur, onclick, onerror, onfocus, onkeydown,
onkeypress, onkeyup, ondragdrop, ondoubleclick,
onchange,onmousedown, , onreset,onsubmit,
onload, onunload etc etc..
Function mycompute()
7/30/2019 HTML and some scripting
34/42
Function mycompute()
{
A=document.frm1.txt1.valueB=document.frm1.txt2.value
C=document.frm1.txt3.value
D=eval((A*B)/C);Alert (the value is:+D);
}
Document.frm1.txt1.value=A
Function mycompute()
7/30/2019 HTML and some scripting
35/42
Function mycompute()
{
var A
A=document.frm1.txt1.value
Alert (variable A is displayed:+A);
}
Function nal(num)
{
if(num= = 0)
alert(hai)
7/30/2019 HTML and some scripting
36/42
alert( hai )
if(num= = 1)
alert(hello)
if(num= = 2)
alert(goodafternoon)
}
Var A=document f1 t1 value
7/30/2019 HTML and some scripting
37/42
Var A=document.f1.t1.value
Function naloo()
{var wind
document.writeln(going to open a new window)
wind=window.open(x1.html,[400]);
}
7/30/2019 HTML and some scripting
38/42
Function budget()
Var budget
budget=20
If (budget>20)
{
Document.writeln(expensive)
}
Else
{Document.writeln(inexpensive)
}
Switch(grade)
7/30/2019 HTML and some scripting
39/42
Switch(grade)
{
case first:
stmts
break;
case distinction:
stmts
break;
case second:
stmts
break;
}
For loop syntax
7/30/2019 HTML and some scripting
40/42
For.. loop syntax
for (intialization; test; increment)
{code
}
Eg:For (var a=1;a
7/30/2019 HTML and some scripting
41/42
While(condition)
{
Code}
Eg:Var abc=0
While( abc
7/30/2019 HTML and some scripting
42/42
Do
{
Code}while (condition)
Eg;Do{
Document.writeln(goodevening)
}while (condition=red)