Embed Size (px)
DESCRIPTION
a
Citation preview
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 1/47
Definition and Usage
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: mages are not technicall! inserted into an HTML page" images are lin#ed to HTML pages. The<img> tag creates a holding space for the referenced image.
Tip: To lin# an image to another document" simpl! nest the <img> tag inside <a> tags.
Differences $etween HTML and %HTML
n HTML the <img> tag has no end tag.
n %HTML the <img> tag must be properl! closed.
&equired 'ttributes
DTD indicates in which HTML (.)*+%HTML *.) DTD the attribute is allowed. ,-,trict" T-Transitional"and -rameset.
Attribute Value Description DTD
alt text ,pecifies an alternate te/t for an image ,T
src URL ,pecifies the U&L of an image ,T
0ptional 'ttributes
Attribute Value Description DTD
align topbottommiddleleftright
Deprecated. Use st!les instead.,pecifies the alignment of an image according tosurrounding elements
T
border pixels Deprecated. Use st!les instead.,pecifies the width of the border around an image
T
height pixels%
,pecifies the height of an image ,T
hspace pixels Deprecated. Use st!les instead.,pecifies the whitespace on left and right side of an
image
T
ismap ismap ,pecifies an image as a ser1er2side image2map ,T
longdesc URL ,pecifies the U&L to a document that contains a longdescription of an image
,T
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 2/47
usemap #mapname ,pecifies an image as a client2side image2map ,T
1space pixels Deprecated. Use st!les instead.,pecifies the whitespace on top and bottom of an image
T
width pixels%
,pecifies the width of an image ,T
,tandard 'ttributes
The <img> tag supports the following standard attributes:
Attribute Value Description DTD
class classname ,pecifies a classname for an element ,T
dir rtlltr
,pecifies the te/t direction for the content in anelement
,T
id id ,pecifies a unique id for an element ,Tlang language_code ,pecifies a language code for the content in an element ,T
st!le style_definition ,pecifies an inline st!le for an element ,T
title text ,pecifies e/tra information about an element ,T
/ml:lang language_code ,pecifies a language code for the content in anelement" in %HTML documents
,T
More information about ,tandard 'ttributes.
31ent 'ttributesThe <img> tag supports the following e1ent attributes:
Attribute Value Description DTD
onabort script ,cript to be run when loading of an image is interrupted ,T
onclic# script ,cript to be run on a mouse clic# ,T
ondblclic# script ,cript to be run on a mouse double2clic# ,T
onmousedown script ,cript to be run when mouse button is pressed ,T
onmousemo1e script ,cript to be run when mouse pointer mo1es ,T
onmouseout script ,cript to be run when mouse pointer mo1es out of anelement ,T
onmouseo1er script ,cript to be run when mouse pointer mo1es o1er anelement
,T
onmouseup script ,cript to be run when mouse button is released ,T
on#e!down script ,cript to be run when a #e! is pressed ,T
on#e!press script ,cript to be run when a #e! is pressed and released ,T
on#e!up script ,cript to be run when a #e! is released ,T
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 3/47
HTML Tags Chart
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 4/47
To use an! of the following HTML tags" simpl! select the HTML code !ou4d li#e and cop! andpaste it into !our web page.
Tag Name Code Example Browser View
<522commen
t
<!--This can be 1iewed in the T" part
of a document--#6othing will show 7Tip8
<a 2 anc$or<a $re%&9http:++www.domain.com+9>isit 0ur ,ite<'a#
isit 0ur ,ite 7Tip8
<b> bold <b#3/ample<'b# Example
<big>big(text)
<big#3/ample<'big# 3/ample 7Tip8
<bod!>
bod* o%T"
document
<bod*#The content of
!our T" page<'bod*#
;ontents of !our web
page 7Tip8
<br>line
brea+
The contents of !our page<br#The
contents of !our page
The contents of !ourweb page
The contents of !ourweb page
<center> center<center#This will center !ourcontents<'center#
This will center !ourcontents
<dd>de%initiondescripti
on
<dl>
<dt>Definition Term<+dt><dd#De%inition o% t$e term<'dd#<dt>Definition Term<+dt>
<dd#De%inition o% t$e term<'dd#<+dl>
Definition Term
De%inition o%t$e term
Definition Term
De%inition o%t$e term
<dl>de%inition list
<dl#<dt>Definition Term<+dt>
<dd>Definition of the term<+dd><dt>Definition Term<+dt>
<dd>Definition of the term<+dd><'dl#
Definition TermDefinition of
the termDefinition Term
Definition ofthe term
<dt>de%inition term
<dl>
<dt#De%inition Term<'dt#<dd>Definition of the term<+dd><dt#De%inition Term<'dt#
<dd>Definition of the term<+dd><+dl>
De%inition Term
Definition ofthe term
De%inition Term
Definition ofthe term
<em>emp$asi
s
This is an <em#3/ample<'em# of
using the emphasis tag
This is an Example ofusing the emphasis
tag
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 5/47
<embed>
embedob,ect
<embed src-9!ourfile.mid9width-9*))9 height-9=)9
align-9center9>7Tip8
<embed
>
embed
ob,ect
<embed src-9!ourfile.mid9autostart-9true9 hidden-9false9
loop-9false9><noembed><bgsound src-9!ourfile.mid9
loop-9*9><+noembed>
Music will beginpla!ing when !ourpage is loaded and will
onl! pla! one time. 'control panel will be
displa!ed to enable!our 1isitors to stop
the music.
<font> %ont<%ont face-9Times 6ew
&oman9>3/ample<'%ont#Example (Tip)
<font> %ont<%ont face-9Times 6ew &oman9
sie-9(9>3/ample<'%ont#Example 7Tip8
<font> %ont
<%ont face-9Times 6ew &oman9
sie-9?@9color-9Aff))))9>3/ample<'%ont#
Example 7Tip8
<form> %orm
<%orm action-9mailto:!ouB!ourdomain.com9>
6ame: <input name-96ame9 1alue-99sie-9*)9><br>
3mail: <input name-93mail9 1alue-99sie-9*)9><br>
<center><input
t!pe-9submit9><+center>
<'%orm#
6ame: 7Tip
8 3mail:
<h*><hC>
<h@><h(>
<h><h=>
$eading
$eading
.$eading
/$eading
0$eading
1$eading
2
<$#Heading * 3/ample<'$#<$.#Heading C 3/ample<'$.#
<$/#Heading @ 3/ample<'$/#<$0#Heading ( 3/ample<'$0#
<$1#Heading 3/ample<'$1#<$2#Heading = 3/ample<'$2#
<head>
$eading
o% T"
document
<$ead#;ontains elements describing
the document<'$ead#6othing will show
<hr> $ori3ont
al rule
<$r '#
;ontents of !our webpage 7Tip8
Submit
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 6/47
;ontents of !our webpage
<hr>
$ori3ont
al rule <$r width-9)9 sie-9@9 +>
;ontents of !our webpage
;ontents of !our web
page
<hr>$ori3ont
al rule<$r width-9)9 sie-9@9 noshade +>
;ontents of !our webpage
;ontents of !our webpage
<hr>
7nternet
3/plorer8
$ori3ont
al rule
<$r width-9E9 color-9Aff))))9
sie-9(9 +>
;ontents of !our webpage
;ontents of !our webpage
<hr>7nternet
3/plorer8
$ori3ont
al rule
<$r width-9C9 color-9A==FFff 9
sie-9=9 +>
;ontents of !our webpage
;ontents of !our web
page
<html>
$*pertext
mar+uplanguag
e
<$tml#<head>
<meta><title>Title of !our web page<+title>
<+head>
<bod!>T" web page contents<+bod!><'$tml#
;ontents of !our web
page
<i> italic <i#3/ample<'i# Example
<img> image
<img src-93arth.gif9 width-9(*9
height-9(*9 border-9)9 alt-9te/tdescribing the image9 +> 7Tip8
<input>input
%ield
3/ample *:
<form method-post action-9+cgi2bin+e/ample.cgi9>
<input t!pe-9te/t9 sie-9*)9ma/length-9@)9>
<input t!pe-9,ubmit9 1alue-9,ubmit9><+form>
3/ample *: 7Tip8
<input>7nternet
3/plorer8
input%ield
3/ample C:
<form method-post action-9+cgi2
bin+e/ample.cgi9>
3/ample C: 7Tip8
Submit
Submit
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 7/47
<input t!pe-9te/t9 st!le-9color: AffffffGfont2famil!: erdanaG font2weight: boldG
font2sie: *Cp/G bac#ground2color:
AECa(dCG9 sie-9*)9 ma/length-9@)9><input t!pe-9,ubmit9 1alue-9,ubmit9>
<+form>
<input>input%ield
3/ample @:
<form method-post action-9+cgi2bin+e/ample.cgi9>
<table border-9)9 cellspacing-9)9cellpadding-9C9><tr><td
bgcolor-9A(=@ff9><input t!pe-9te/t9sie-9*)9 ma/length-9@)9><+td><td
bgcolor-9A(=@ff9 1align-9Middle9><input t!pe-9image9 name-9submit9
src-9!ourimage.gif9><+td><+tr><+table>
<+form>
3/ample @: 7Tip8
<input>input%ield
3/ample (:
<form method-post action-9+cgi2
bin+e/ample.cgi9>3nter Iour ;omments:<br>
<te/tarea wrap-91irtual9name-9;omments9 rows-@ cols-C)
ma/length-*))><+te/tarea><br><input t!pe-9,ubmit9 1alue-9,ubmit9>
<input t!pe-9&eset9 1alue-9;lear9><+form>
3/ample (: 7Tip8
<input>input
%ield
3/ample :
<form method-post action-9+cgi2bin+e/ample.cgi9>
<center>,elect an option:
<select><option >option *<+option>
<option selected>option C<+option>
<option>option @<+option><option>option (<+option>
<option>option <+option>
<option>option =<+option><+select><br>
<input t!pe-9,ubmit91alue-9,ubmit9><+center>
<+form>
3/ample : Tip8
,elect anoption:
<input> input
%ield
3/ample =:
<form method-post action-9+cgi2
3/ample =: 7Tip8
,elect an option:
Submit Clear
option 2
Submit
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 8/47
bin+e/ample.cgi9>,elect an option:<br>
<input t!pe-9radio9 name-9option9>
0ption *<input t!pe-9radio9 name-9option9
chec#ed> 0ption C
<input t!pe-9radio9 name-9option9>0ption @
<br><br>
,elect an option:<br><input t!pe-9chec#bo/9
name-9selection9> ,election *<input t!pe-9chec#bo/9
name-9selection9 chec#ed> ,election C<input t!pe-9chec#bo/9
name-9selection9> ,election @<input t!pe-9,ubmit9 1alue-9,ubmit9>
<+form>
0ption *
0ption C
0ption @
,elect an option:
,election *
,election C
,election @
<li> list item
3/ample *:
<menu><li t!pe-9disc9>List item *<'li#
<li t!pe-9circle9>List item C<'li#<li t!pe-9square9>List item @<'li#
<+M36U>
3/ample C:
<ol t!pe-9i9><li#List item *<'li#
<li#List item C<'li#<li#List item @<'li#
<li#List item (<'li#<+ol>
3/ample *: 7Tip8
• "ist item
o "ist item .
"ist item /
3/ample C:
i. "ist item
ii. "ist item .
iii. "ist item /
i1. "ist item 0
<lin#> lin+
<head>
<lin# rel-9st!lesheet9 t!pe-9te/t+css9href-9st!le.css9 +>
<+head>
<marque
e>7nternet
3/plorer8
scrolling
text
<mar4uee bgcolor-9Acccccc9 loop-92*9scrollamount-9C9
width-9*))9>3/ample
Marquee<'mar4uee#
7Tip8
Submit
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 9/47
<menu> menu
<menu#
<li t!pe-9disc9>List item *<+li><li t!pe-9circle9>List item C<+li>
<li t!pe-9square9>List item @<+li>
<'menu#
• List item *
o List item C
List item @
<meta> meta
<meta name-9Description9
content-9Description of !our site9><meta name-9#e!words9
content-9#e!words describing !oursite9>
6othing will show 7Tip8
<meta> meta
<meta HTTJ23KU-9&efresh9
;06T36T-9(GU&L-http:++www.!ourdomain.com+9>
6othing will show 7Tip8
<meta> meta<meta http2equi1-9Jragma9
content-9no2cache9>6othing will show 7Tip8
<meta> meta<meta name-9rating9
content-9eneral9>6othing will show 7Tip8
<meta> meta <meta name-9robots9 content-9all9> 6othing will show 7Tip8
<meta> meta<meta name-9robots9content-9noinde/"follow9>
6othing will show 7Tip8
<ol> orderedlist
Numbered
<ol#<li>List item *<+li>
<li>List item C<+li><li>List item @<+li>
<li>List item (<+li><'ol#
Numbered 5pecial 5tart
<ol start&616#
<li>List item *<+li><li>List item C<+li>
<li>List item @<+li><li>List item (<+li>
<'ol#
"owercase "etters
<ol t*pe&6a6#
<li>List item *<+li><li>List item C<+li>
<li>List item @<+li><li>List item (<+li>
<'ol#
Numbered
*. List item *
C. List item C
@. List item @
(. List item (
Numbered 5pecial
5tart
. List item *
=. List item C
E. List item @
. List item (
"owercase "etters
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 10/47
Capital "etters
<ol t*pe&6A6#
<li>List item *<+li><li>List item C<+li><li>List item @<+li>
<li>List item (<+li><'ol#
Capital "etters 5pecial 5tart
<ol t*pe&6A6 start&6/6#<li>List item *<+li>
<li>List item C<+li><li>List item @<+li>
<li>List item (<+li>
<'ol#
"owercase 7oman Numerals
<ol t*pe&6i6#<li>List item *<+li>
<li>List item C<+li><li>List item @<+li>
<li>List item (<+li><'ol#
Capital 7oman Numerals
<ol t*pe&686#<li>List item *<+li>
<li>List item C<+li><li>List item @<+li>
<li>List item (<+li><'ol#
Capital 7oman Numerals 5pecial5tart
<ol t*pe&686 start&696#
<li>List item *<+li><li>List item C<+li>
<li>List item @<+li><li>List item (<+li>
<'ol#
a. List item *
b. List item C
c. List item @
d. List item (
Capital "etters
'. List item *
$. List item C
;. List item @
D. List item (
Capital "etters
5pecial 5tart
;. List item *
D. List item C
3. List item @
. List item (
"owercase 7omanNumerals
i. List item *
ii. List item C
iii. List item @
i1. List item (
Capital 7oman
Numerals
. List item *
. List item C
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 11/47
. List item @
. List item (
Capital 7omanNumerals 5pecial
5tart
. List item *
. List item C
%. List item @
%. List item (
<option>listboxoption
<form method-post action-9+cgi2
bin+e/ample.cgi9><center>
,elect an option:
<select><option#option *<'option#
<option selected#option C<'option#<option#option @<'option#
<option#option (<'option#
<option#option <'option#<option#option =<'option#
<+select><br>
<+center><+form>
,elect an option: 7Tip8
<p> paragra
p$
This is an e/ample displa!ing the use of
the paragraph tag. <p> This will create aline brea# and a space between lines.
'ttributes:
3/ample *:<br>
<br><p align&6le%t6#
This is an e/ample<br>
displa!ing the use<br>of the paragraph tag.<br>
<br>3/ample C:<br>
<br>
<p align&6rig$t6#This is an e/ample<br>
displa!ing the use<br>of the paragraph tag.<br>
This is an e/ample
displa!ing the use ofthe paragraph tag.
This will create a line
brea# and a spacebetween lines.
'ttributes:
3/ample *:
This is an e/ampledispla!ing the use
of the paragraph tag.
3/ample C:
option 2
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 12/47
<br>
3/ample @:<br><br>
<p align&6center6#This is an e/ample<br>
displa!ing the use<br>of the paragraph tag.
This is an e/ample
displa!ing the useof the paragraph tag.
3/ample @:
This is an e/ampledispla!ing the use
of the paragraph tag.
<small>small(text)
<small#3/ample<'small# 3/ample 7Tip8
<stri#e>deleted
text<stri+e#3/ample<'stri+e# 3/ample
<strong> strongemp$asis
<strong#3/ample<'strong# Example
<table> table
3/ample *:
<table border&9(9 cellpadding-9C9
cellspacing-9C9 width-9*))9><tr>
<td>;olumn *<+td>
<td>;olumn C<+td><+tr>
<'table#
3/ample C: 7nternet 3/plorer8
<table border&9C9bordercolor-9A@@==FF9 cellpadding-9C9
cellspacing-9C9 width-9*))9><tr>
<td>;olumn *<+td><td>;olumn C<+td>
<+tr><'table#
3/ample @:
<table cellpadding&9C9
cellspacing-9C9 width-9*))9><tr>
<td bgcolor-9Acccccc9>;olumn *<+td><td bgcolor-9Acccccc9>;olumn C<+td>
<+tr><tr>
<td>&ow C<+td>
3/ample *: 7Tip8
;olumn * ;olumn C
3/ample C: 7Tip8
;olumn * ;olumn C
3/ample @: 7Tip8
;olumn * ;olumn C
&ow C &ow C
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 13/47
<td>&ow C<+td><+tr>
<'table#
<td>tabledata
<table border-9C9 cellpadding-9C9
cellspacing-9C9 width-9*))9>
<tr><td#Column <'td#<td#Column .<'td#
<+tr><+table>
Column Column .
<th>table
$eader
<di1 align-9center9><table>
<tr><t$#Column <'t$#
<t$#Column .<'t$#<t$#Column /<'t$#
<+tr>
<tr><td>&ow C<+td>
<td>&ow C<+td><td>&ow C<+td>
<+tr>
<tr><td>&ow @<+td>
<td>&ow @<+td><td>&ow @<+td>
<+tr><tr>
<td>&ow (<+td><td>&ow (<+td>
<td>&ow (<+td><+tr>
<+table><+di1>
Colum
n 1
Colum
n 2
Colum
n 3
&ow C &ow C &ow C
&ow @ &ow @ &ow @
&ow ( &ow ( &ow (
<title>docume
nt title
<title#Title of !our T"
page<'title#
Title of !our web pagewill be 1iewable in the
title bar.7Tip8
<tr>tablerow
<table border-9C9 cellpadding-9C9
cellspacing-9C9 width-9*))9><tr#
<td>;olumn *<+td><td>;olumn C<+td>
<'tr#<+table>
Column Column .
<tt> telet*pe <tt#3/ample<'tt# Example
<u>underlin
e<u>3/ample<+u> 3/ample
<ul> unorder
ed list
3/ample *:<br>
<br>
3/ample *:
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 14/47
<ul#<li>List item *<+li>
<li>List item C<+li>
<'ul#<br>3/ample C:<br>
<ul t*pe&6disc6#<li>List item *<+li>
<li>List item C<+li><ul t*pe&6circle6#
<li>List item @<+li><li>List item (<+li>
<'ul#<'ul#
• List item *
• List item C
3/ample C:
• List item *
• List item C
o List item
@
o List item
(
• <!--...-->
• <!doctype>
• <a>
• <abbr >
• <acronym>
• <address>
• <applet>
• <area>
• < b>
• < base>
• < basefont>
• <frame>
• <frameset>
• <h1>
• <h2>
• <h3>
• <h>
• <h>
• <h">
• <head>
• <hr >
• <html>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 15/47
• < bdo>
• < bi#>
• < bloc$%&ote>
• < body>
• < br >
• < b&tton>
• <caption>
• <center >
• <cite>
• <code>
• <col>
• <col#ro&p>
• <dd>
• <del>
• <dfn>
• <dir >
• <di'>
• <dl>
• <dt>
• <em>
• <i>
• <iframe>
• <im#>
• <inp&t>
• <ins>
• <isindex>
• <$bd>
• <label>
• <le#end>
• <li>
• <lin$ >
• <map>
• <men&>
• <meta>
• <noframes>
• <noscript>
• <obect>
• <ol>
• <opt#ro&p>
• <option>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 16/47
• <fieldset>
• <font>
• <form>
EB58TE DEVE";ENT "8=E C>C"E
8? eb 5ite lanning
• s the first phase
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 17/47
• n1ol1es identif!ing the goals or purpose of the website 7what is the purpose"
who will use it age" gender" demographic bac#ground" and le1el of computer literac!8
88? eb 5ite Anal*sis
Define the appropriate web site content and functionalit!
dentif! the tas#s that users need to perform
;onsider the process required to support web site features. 3/.confirmation
888? eb 5ite Design and De@elopment
• Defining how to organie web page content
• ,electing the appropriate web structure
• Determining how to use multimedia
• 'ddressing accessibilit! issues
• Designing pages for an international audience
D3&36T TIJ3, 0 ,T&U;TU&3,
*. Linear eb ,ite N connects pages in a straight line" appropriate if the
information on the web pages should be read in a specific order.C. Hierarchical eb ,ite N connects pages in a tree2li#e structure" wor#s
well in site with a main inde/ or table of contents page that lin#s to all
other web pages.@. ebbed eb ,ite N has no set of organiation" wor#s best on web sites
with information that does not need to be read in a specific order andwith man! na1igation options users can select.
(. $road eb ,ite N is one in which the home page is the main inde/ pageand all other web pages are lin#ed indi1iduall! to the home page.
. Deep eb ,ite N is one that has le1els of pages" requiring the user toclic# man! times to reach a particular web page.
8V? eb 5ite Testing
• ,hould be comprehensi1e and include a re1iew of web page content"
functionalit! and usabilit!
V? eb 5ite 8mplementation
• n1ol1es the actual publishing of the web pages to a web ser1er
B;D> ATT78BTE5
*. <bac#ground> 2 can be an image file.
C. <bgcolor> 2 color name 7or he/adecimal8" defines the bac#ground color of !our page@. <font> 2 formats the te/t of !our web page
'ttribute: <sie> 2 the range is from * to EG @ is the default sie <color> 2 color name7or he/adecimal8
<face> 2 font name Ge/. <font face - O'rialP>ood Morning<+font>
(. <lin#> 2 defines the color of the h!perlin#. <alin#> 2 defines the color of the acti1e lin#
=. <1lin#> 2 defines the color of the 1isited lin#
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 18/47
Additional Text =ormatting Tags
*. <center> 2 used to center te/tC. <marquee> 2 runs onl! in 3
E 'ttributes of Marqueea. direction N left" right" down" up
b. beha1ior N scroll" slide" alternatec. bgcolor N color name 7or he/adecimal8d. width N n
e. height N n
f. scrollamount N in millisecondsg. scrolldela! N in milliseconds
7 tag used to separate different areas of a web pageG li#e <br> it does not ha1e a
closing tag.
'ttributes of H&a? color N color name 7or he/adecimal8
b? width N n 7pi/el width8 or n 7certain of the screen width8
c. sie N n 7thic#ness in pi/el8d. noshade N used to turn off the line shadinge. align N left+center+right
EB AE 8AE5
• used in man! wa!s to enhance the loo# of a web page and ma#e it more interesting
and colorful.
• used to add bac#ground color" help organie a eb Jage" help clarif! a point being
made in the te/t" or ser1e as lin#s to other wed pages.
mages t!pes N compressed file formats that supports multiple colors and e/tensions:
• graphics interchange format7.gif8
• Qoint photographic e/perts group7.Qpeg8
• portable networ# graphics7.png8
8mage Tag
<img> 2 used to displa! an image file in !our web page.
'ttributes for mage Taga. src N RfilenameS
b. align N left" center" rightc. width N pi/els
d. height N pi/else. H,J';3 N pi/elsG specifies the horiontal distance of the te/t beside the image
f. ,J';3 N pi/elG specifies the 1ertical distance of te/t abo1e or below the image.g. 'lt N Rte/tSG specifies the alternati1e te/t to be displa!ed if the image was not
loaded. 3/. <img src - RfilenameS> te/t
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 19/47
Anc$ored "in+s<a>..<+a> 2 indicates an anchor for a piece of te/t or image that ser1es as an origin of the
h!perlin#.
<a href - RurlS> lin#ing te/t and+or image <+a>G the url can be another document"program" an image" audio or 1ideo file.
'ttributes of 'nchored Taga. href Nlin# destination 7path8G specifies the h!perlin# reference or file to be accessed
in the form of a filename
b. name N Rboo#mar#SG gi1en name to the lin# destination mar#eG it is used to identif!a boo#mar# within an html file.
c. target N Rframe labelSG indicates the name of a specific frame into which !ou load thelin#ed document.
,pecial Targets: Rblan#S N lin# is loaded into a new blan# window
RselfS N lin# is loaded into the current browser window RtopS N lin# is loaded into the frame where lin# was desired
RparentS N lin# is loaded in the immediate frameset parent
C7EAT8N TAB"E5 8N A EB58TE
Tables
• allows !ou to organie information on a ebpage using HTML tags.
• are useful when !ou want to arrange te/t and images into rows and columns in order
to ma#e the information straightforward and clear to the ebpage 1isitor.
• used to create web pages with C newspaper2t!pe column of te/t or structured lists of
information.
•
used to position te/t and images.• used to create a border or frame around an image.
Table Elements
&ow N is a horiontal line of information.
;olumn N is a 1ertical line of information.
;ell N is the intersection of a row and a column.
. T*pes o% Cell
a. heading cell N displa!s te/t as bold and center2aligned.b. data cell N displa!s normal te/t that is left2aligned.
Table borders N is the line that encloses the perimeter of the table.
Table eader N is the same as a heading cell.
Table Caption is a descripti1e te/t located abo1e or below the table that further
describes the purpose of the table.
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 20/47
&ule 'ttribute N allows a web de1eloper to select which internal borders to show.
rules - RnoneS creates a table with no internal rule
rules - RcolsS creates a table with 1ertical rules between each column in the tablerules - RrowsS creates a table with horiontal rules between each row in the table
Table Tags
<table> <+table> - start and end of the table
<tr> <+tr> 2 indicates the start and end of a table row.
<th> <+th> 2 indicates the start and end of a table heading.
<td> <+td> 2 indicates the start and end of a data cell in a table.
Table Tag Attributes and =unctions
TA ATT78BTE
=NCT8;N
<table> <+table> align
bgcolorborder
cellspacingcellpadding
cols
width
controls table alignment 7left" center" right8
sets bac#ground color for tabledefines width of table border in pi/els
defines space between cells in pi/elsdefines space within cells in pi/els
defines number of columns.
sets table width relati1e to window width
<tr> <+tr> align
bgcolor
1align
horiontall! align row 7left" center" right8
sets bac#ground color for row
1erticall! aligns row 7top" middle" bottom8<th> <+th><td> <+td>
alignbgcolor
colspanrowspan
1align
horiontall! aligns cell 7left" center" right8sets bac#ground color for cell
sets number of columns spanned b! a cellsets number of rows spanned b! a cell
1erticall! aligns cell 7top" middle" bottom8
To create a borderless table
3/. <table border -S)S cols - RCS width -SF)S>
• ' benefit of using a percentage to set the table width is that it automaticall! changes
the width of the table if the window is resied in the browser.
To create table caption
3/. <caption align - RbottomS><em> List of ,tudents <+em> <+caption>
58N =7AE5 8N A EB 58TE
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 21/47
=rame N is a rectangular area of a eb Jage2 basicall!" a window N in which a eb Jage
can be displa!ed.
rames can be used for the following:
• To allow a eb site 1isitor to 1iew more than one eb Jage at a time
• To create a na1igation menu" as a replacement for such obQects as menu lists andmenu bars
• To displa! headers" na1igation menus" or other information that needs to remain on
the screen as other parts of the eb page change.
rame Tags
<frameset> 2 defines the structure of the frames within a window
<+frameset>
<frame> 2 defines a gi1en frameGG required for each frame. 6o end tag
<noframe> 2 defines alternate content that appears if the browser does not support frames<+noframe> 2 supported b! multiple t!pes and 1ersions of browsers+
rame Tag 'ttributes
Tag 'ttribute unction
<frameset> cols indicates the number of columnsrows ndicates the number of rows
<frame> frameborder turns frame border on or off
bordercolor changes the border color
marginwidth adQusts the margin on the left and right ofthe frame
marginheight adQusts the margin abo1e and below a
document within a framenoresie loc#s the border of the frame to prohibit
resiing
name defines the name of the frame that is usedas a target
scrolling indicates whether a scrollbar is present
src indicates the web page or other file to bedispla!ed in the frame
Defining rows and columns
The cols and rows attribute of the <frameset> tag set the number of columns and
rows of the displa! area.
3/. two rows<frameset rows - R@)" E)S>
<frame src - Rmenu.htmlS><frame src - Rmainpage.htmlS name-SmainwindowS>
<+frameset>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 22/47
3/. two columns<frameset cols - R@)" E)S>
<frame src - Rmenu.htmlS><frame src - Rmainpage.htmlS name-SmainwindowS>
<+frameset>
Defining rame 'ttributesn the <frame> tag" the %rameborder attribute defines the border that separates
frames.
$! default" a border is gra!.
3/.
<frameset rows - R@)" E)S><frame src - Rheader.htmlS scrolling-SnoS frameborder-SnoS
<frameset cols - RC" ES><frame src -Smenu.htmlS scrolling-SnoS frameborder-SnoS>
<frame src -Smainpage.htmlS name-Smain windowS frameborder-SnoS><+frameset>
<+frameset>
The bordercolor can change the border to an! color.
C7EAT8N EB AE =;7
hen a form is included on a eb Jage" the eb Jage can be used to gatherinformation from eb site 1isitors for a number of purposes.
3/amples of forms commonl! used on eb sites include:
• ' feedbac# form to gather 1isitorPs comments on the eb ,ite
• ' guestboo# users to sign in as 1isitorPs to the site
• ' registration form for 1isitors to create an account" including a user name and
password
• ' sur1e! form to gather information on an! number of topics
• ' search form for users to initiate a search for a word" a phrase" or other information
• 'n order form to select products and enter shipping and pa!ment information
6ote: whate1er the purpose of the form" it should pro1ide clear instructions to the users and
allow users to fi/ an! mista#es before submitting the form.
Three main components of the eb Jage orm:*. nput controls
C. ' <form> tag" which contains the information necessar! to process the form.@. ' ,ubmit button" which sends the data to be processed.
8nput Control N is an! t!pe of input mechanism on a form.
;lassification of input control:
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 23/47
• Data input control N either radio button" chec# bo/ 7chec#bo/8" a ,ubmit button
7submit8" a &eset button 7reset8" or a selection menu 7select8
• Te/t input N is either
' text box 7te/t8" in which the 1isitor ma! enter small amounts of te/t
' textarea box 7te/tarea8" in which the 1isitor ma! enter larger amounts of
data or
' password text box 7password8" in which the 1isitor ma! enter a password
=orm 8nput Controls
;06T&0L U6;T06 &3M'&,
te/t • ;reates a single2
line field for a relati1el!small amount of te/t
• ndicates both the
sie of the field and thetotal ma/imum length
password • dentical to te/t
bo/es and for single2linedata entr!
• 3choes7or mas#s8
bac# the entered te/ts asasteris#s or bullets
te/tarea • ;reates a multiple2
line field for a relati1el!large amount of te/t
• ndicates the
number of rows andcolumns for the area
select • ;reates a drop2
down list or menu of
choices from which a1isitor can select an
option or options
• ndicates the width
of the list in number of
rows
chec#bo/ • ;reates a list item • More than * item in
the list can be chosen
radio • ;reates a list item • ndicates onl! one
item in the list can bechosen
submit • ,ubmits a form forprocessing
• Tells the browser tosend the data on the
form to the ser1er
reset • &esets the form • &eturns all input
controls to the datadefault status
Text control attributes:
*. sie N determines the number of characters that displa! on the formC. ma/length N specifies the ma/imum length of the input field.
6ote: the ma/imum length of the field ma! e/ceed the sie of the field that displa!s on the
form.
6ame: Jassword:
7adio Control
*********
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 24/47
're !ou currentl! enrolledV Ies 6o
hat subQect7s8 do !ou ta#eV Differential 3quation
D$M, ,'D
Histor!
5elect Control
n what month do !ou ta#e a tripV
hich countr! to !ou prefer to 1isitV
Textarea control
Two primar! attributes of te/tarea control
*. rows N specifies the number of rows in the te/tarea fieldC. cols N specifies the number of columns in the te/tarea field
%ieldset control helps to group related form elements together. This ma#es the form
easier to read and complete.
Login nformation
6ame: Jassword:
3nrolled ,ubQects
're !ou currentl! enrolledV Ies 6o
hat subQect7s8 do !ou ta#eV Differential 3quation
D$M, ,'D
Histor!
7eset Control and 5ubmit Control
une
*********
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 25/47
Note: The t!pe of information a form is intended to gather dictates what controld are used
in the form. or e/ample" to limit the number of choices a user can select" use radiobuttons" chec#bo/es" or selection menu. or less structured input or input that 1aries fromuser to user" such as username" password" or comments" use a te/t or te/tarea field.
&egardless of the specific t!pe " each input control has one or two attributes:
*. 6ame N the name attribute identifies the specific information that is being sent when
the form is submitted for processing.C. alue N all controls e/cept te/tarea also ha1e a @alue attributes. The 1alue attribute
is the t!pe of data that is contained in the named input control. or the te/tarea
field" no attribute is possible because of the 1ariabilit! of the input.
T" TA5 5ED T; C7EATE =;75
TA =NCT8;N 7EA75
<fieldset> <+fieldset> roups related controls on
a form
0ptionall! used for
readabilit!
<form> <+form> ;reates a form that allows
user input
&equired when creating a
form
<input> Defines the controls used
in the form" using a1ariet! of t!pe attribute
1alues
&equired for input controls
<legend><+legend> Defines the te/t that
displa!s in the groupingborders
0ptionall! used when
using <fieldset> tags
<select> <+select> ;reates a menu of choicesfrom which a 1isitor
selects
&equired for selectionchoices
<option> <+option> ,pecifies a choice in a
<select> tag
&equired" one per choice
<te/tarea><+te/tarea> ;reates a multiple2line
te/t input area
&equired for longer te/t
inputs that appear onse1eral lines
ATT78BTE5 ;= T" TA5 5ED T; C7EATE =;75
TA ATT78BTE =NCT8;N
<form> <+form action U&L for action completedb! the ser1er
method HTTJ method 7post8
target Location at which the
resource will displa!
,ubmit &eset
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 26/47
<input> t!pe T!pe of input control 7te/t"password" chec#bo/"
radio" submit" reset" file"hidden" image" button8
name 6ame of the control
1alue alue submitted if a
control is selected7required for radio and
chec#bo/ controls8
chec#ed ,ets a radio button to a
chec#ed state 7onl! onecan be chec#ed8
disabled Disables a control
readonl! Used for te/t passwords
sie 6umber of characters that
displa! on the form
ma/length Ma/imum number of characters that can be
enteredsrc U&L to the location of an
image stored on the ser1er
alt 'lternate te/t for image
control
tabinde/ ,ets tabbing order among
control elements
<legend> <+legend> align ndicates how a legend
should be aligned
<select><+select> name 6ame of the element
sie 6umber of options 1isiblewhen eb page is first
opened
multiple 'llows for multiple
selections in select list
disabled Disables a control
tabinde/ ,ets the tabbing orderamong control elements
<option> <+option> selected ,pecifies whether anoption is selected
disabled Disables a control
1alue alue submitted if a
control is selected
<te/tarea><+te/tarea> name 6ame of the control
rows idth in number of rows
cols Height in number of columns
disabled Disables a control
readonl! Used for te/t passwords
tabinde/ ,ets the tabbing order
among control elements
Creating a =orm and 8denti%*ing t$e =orm roperties
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 27/47
The action attribute of the <form> tag specifies the action that is ta#en when the form is submitted.
• nformation entered in forms can be sent b! e2mail to an email address or can be used to
update a database.
The met$od attribute of the <form> tag specifies the manner in which the data entered in the formis sent to the ser1er to be processed.
Two primar! wa!s are used in HTML:a. get method N sends the name21alue pairs to the end of the U&L indicated in the action
attribute.
b. post method N sends a separate data file with the name21alue pairs to the U&L 7or emailaddress8 indicated in the action attribute.
Adding Text Boxes
* <html>C <head>
@ <title>,ample Te/t$o/es <+title>( <+head>= <bod!>E <hC> ,tudent nformation <+hC> <form>F*) Lastname : <input name - 9lname9 t!pe-9te/t9 sie-9C9>** <br +> irstname: <input name - 9fname9 t!pe-9te/t9 sie-9C9>*C <br +> ,tudent 6umber: <input name - 9studno9 t!pe-9te/t9 sie-9C9>*@
*( <+form>**= <+bod!>
*E* <+html>
Adding C$ec+ Boxesnsert the following script on line *@
*@ <p> ,elect the subQects that !ou would li#e to enroll:*( <br+>* <input name - 9pict!pe9 t!pe-9chec#bo/9 1alue-subQ*9>,!stem 'nal!sis *=and Design*E <input name - 9pict!pe9 t!pe-9chec#bo/9 1alue-9subQC9>Database *Management ,!stems*F <input name - 9pict!pe9 t!pe-9chec#bo/9 1alue-9subQ@9>nformation C)&esourceManagementC*<+p>
Adding a 5election enunsert the following script in line C@
C@ <br +>,emester:C( <select name-9sem9>C <option>irst<+option>C= <option>,econd<+option>CE <option>,ummer<+option>
C <+select>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 28/47
Adding 7adio Buttonsnsert the following script in line @)
@) <br +>@* <br +> Do !ou ha1e scholarshipV@C <input name - 9scholarship9 t!pe-9radio9 1alue-9!es9>Ies
@@ <input name - 9scholarship9 t!pe-9radio9 1alue-9no9>6o
Adding a Textareansert the following script in line @
@ <p> hat other electi1e subQects !ou would li#e to enrollV@= <br +> <te/tarea name-9electi1e9 rows-9=9 cols-9)9><+te/tarea>@E <+p>
Adding 5ubmit and 7eset Button
<p> <input t!pe-9submit9 1alue-9,ubmit9><input t!pe-9reset9 1alue-9&eset9>
<+p>
<p> <input t!pe-9submit9 1alue-9,ubmit9><input t!pe-9reset9 1alue-9&eset9>
<+p>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 29/47
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 30/47
C7EAT8N 5T>"E 5EET5
5t*le is a rule that defines the appearance of an element on eb page.
5t*le 5$eet N is a series of rules that defines the st!le for a eb page" or an entire eb
,ite.
2 allows !ou to change the st!le for a single element on a eb Jage" such asparagraph" or to change the st!le of elements on all of the pages in a ebsite.
Cascading 5t*le 5$eets(C55) N allows a eb de1eloper to write code statements that
control the st!le of elements on a eb page.
2 it is not HTML. t is a separate language used to enhance the displa!capabilities of HTML.
2 @; defines the specifications for ;,,.
/ t*pes o% 5t*le 5$eets
*. inline N add a st!le to an indi1idual HTML tag 7eg. Heading" paragraph8
3/. <p st!le-Sfont2st!le: italicG font2sie: ptS>
C. embedded N add the st!le sheet within the <head> tags of the HTML document todefine the st!le for an entire eb page.
2 need <st!le> tags to start and end the st!le sheet.
3/.
<st!le t!pe-Ste/t+cssS><5W
a Xte/t2indent:ptY
a Xte/t2decoration:none
font2famil!:erdanaG font2sie:*(ptG
color:na1!Y
a: ho1er Xbac#groundG na1!G color: whiteY
22 >
<+st!le>
@. e/ternal 7or lin#ed8 N create a te/t file within the file e/tension" .css and !ou then
add a lin# to this e/ternal st!le sheet into a eb page in the web site.
2 does not need <st!le> tags to start and end the st!le sheet.
2 or each web page to which !ou want to appl! the st!les in an e/ternal st!lesheet" a <lin#> tag should be inserted within the <head> tags of the eb
Jage
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 31/47
3/. of lin#
<lin# rel-Sst!lesheetS t!pe-Ste/t+cssS href-Sst!les*.cssS>
The propert!21alue statement rel-Sst!lesheetS defines the relationship of the lin#eddocument 7that is" that it is a st!lesheet8.
The propert!21alue statement t!pe-Ste/t+cssS indicates the content and language used inthe lin#ed document.
The propert!21alue statement href-Sst!les*.cssS indicates the name and location of thelin#ed st!le" st!le*.css.
3/.
a Xte/t2decoration:noneG
color:blue
p Xfont2famil!G erdana" aramondG
font2sieG **ptY
table Xfont2famil!G erdana" aramondG
font2sie: **ptY
th Xcolor:whiteG bac#ground2color:blueG
font2sie:**pt: te/t2align:leftY
5t*le 5$eet recedence
'n e/ternal st!le sheet is used to define st!les for multiple pages in a eb site.
'n embedded st!le sheet is used to change the st!le of one eb page" but o1errides orta#es precedence o1er an! st!les defined in an e/ternal st!le sheet.
'n inline st!le sheets is used to control the st!le within an indi1idual HTML tag and ta#esprecedence o1er an! st!les within an indi1idual HTML tag and ta#es precedence o1er the
st!les defined in both embedded and e/ternal st!le sheets.
T!pe L33L '6D J&3;3D36;3
nline To change the st!le within an indi1idual
HTML tag01errides embedded and e/ternal st!le
sheets
3mbedded To change the st!le of one eb Jage
01errides e/ternal st!le sheets
3/ternal To change the st!le of multiple pages in a
eb site
5t*le 5tatement =ormat
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 32/47
' 5t*le statement is made up of a selector and a declaration that defines the st!le for one
or more properties.
3/. inline statement
<h* st!le - Rfont2famil!: aramondG font2color: na1!S>
5elector N the part of the st!le statement that identifies the page elements.
Declaration N the part of the st!le statement that identifies how the elements shoulddispla!
ropert* N one t!pe of st!le that is applied to the selected element.
3/. of Jroperties:*. color
C. te/t2indent@. border2width
(. font2st!le
Value N specifies the displa! parameters for the specific propert!.
h* Xfont2famil!: aramondG font2sie:@C ptY
roperties and Values
Jropert! 6ame 0ptions that can be controlled
bac#ground • color
• image
• position
border • color
• st!le• width
font • famil!
• sie
• st!le
• 1ariant
• weight
list • image
• position
• t!pe
margin • length
•
percentageTe/t • alignment
• decoration
• indention
• spacing
• white space
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 33/47
or+ing wit$ classes in st*le s$eets
'n! element that belong to the class are mar#ed b! adding the tag:
class - RclassnameS
where classname is the identifier or name of the class.
3/.
<st!le t!pe-Ste/t+cssS><5W
p.beginning Xcolor:redG
font2sie:C)ptY
p.middle Xcolor:greenG font2weight:boldG
font2st!le:obliqueG
font2sie:*=ptY
p.end Xcolor:na1!G
font2weight:bolderG font21ariant:small2capsG
font2st!le:normalG font2sie:*CptY
22 >
<+st!le>
Then !ou can use it in the <bod!>.
<p class-beginning> or
<p class-middle> or
<p class-end>
5etting a st*le %or all lin+s
Iou can set the te/t2decoration propert! to the following
• blin# N cause the te/t to blin# on and off • line2through N places a line through the middle of the te/t
• o1erline N places a line abo1e the te/t
• underline N places a line below the te/t
Iou can specif! two te/t2decoration 1alue b! separating the choices with a space.
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 34/47
8NT7;DCT8;N T; a@a5cript
;b,ect - in Qa1ascript" it is a person or a thing.
built-in ob,ect N is a Qa1ascript obQect that neither depends on nor belong to another
obQect" usch as the document or window.
$uilt2in Za1ascript 0bQects
;BECT DE5C78T8;N
Date 'ccesses the s!stem time and date
Document &epresents the content of a browserPswindow
orm &epresents forms created with the<form> tag
mage &epresents images created with the<img> tag
Location ,witches to a new eb Jage
Math Jerforms ;alculation6a1igator 0btains information about the current
eb browser
indow and rame &epresents a browser window or e1er!frame within a browser windowG e1er!
frame is a window and uses the sameproperties and methods as the window
obQect.
6umber ,upports special constants
,creen i1es Jlatform2specific information aboutthe userPs screen
$oolean ;on1erts obQects to $oolean alues
'rra! &eturns an ordered set of 1alues
,tring &epresents a set of characters
Histor! eeps trac# of eb Jages 1isited
unction 'ccesses information about specificfunctions
roperties - are attributes of obQects and describe an obQectPs characteristics.
6ote: 'n obQect and its propert! is are written b! separating the obQect from its propert!
with a period 7.8. f a specific 1alue is assigned to a propert!" an equal sign 7-8 is includedafter the propert! " followed b! the 1alue enclosed in quotation mar#s.
3/. car.color - RredS 7 car is the obQect" color is the propert!" red is the 1alue8
0bQect and Jropert!eneral orm obQect.propert!
;omment: the obQect is stated first" then a period"
the the descripti1e propert!. ' 1alue canbe assigned to the propert! or the
propert! can return a 1alue
3/amples: Document.bg;olor-SlightblueS $rowser-na1igator.app6ame
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 35/47
et$ods - are actions that an obQect can perform. 3/ample: the methods associated withthe car obQect might be dri1e" turn and stop. 'n obQect and one of the methods are written
as
car.dri1e78
,ome methods require an argumentF which is a a 1alue gi1en to the method.
Argument N is the message used in a method that is passed to the obQect. 3/ample: gi1en
a car obQect the turn78 method" a statement could be written as
car.turn7RleftS8
where the argument RleftS is additional information describing which wa! the car should
turn.
3/ample C:
document.write7Rthis is an e/ampleS8
the document is the obQect" write78 is the method" and Rthis is an e/ampleS is what is to bewritten to the document.
0bQect and Method
eneral orm: obQectname.method7parameters8
;omment here obQectname is the obQect" method
is the action" and parameters are
optional items or instructions the methodshould use. ' period separates the obQect
name from the propert! or method
name.3/amples: document.write7R,ome te/tS8
window.alert7RThis is a messageS81ar toDa!Date-Date.to,tring78
ser-de%ined %unctions N is a Qa1ascript code written to perform certain tas#s repeatedl!.
lobal %unctions N are reall! methods that belong to the global obQect and also are calledtop2le1el methods.
E@ent N is the result of an action" such as a mouse clic# or a document loading.
E@ent andler N is a wa! to associate that action with a function.
a@ascript Variables store 1alues that can change depending on the results of an
e/pression or data entered b! a user from a form.2 case sensiti1e
6aming ;on1entions for Za1ascript ariables
&ule alid 6ame 3/amples n1alid 6ame 3/amples
6ame must begin with a Months FMonths
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 36/47
letter or underscore
&est of name must be
letters" numerals" orundrscore
Last6ame Last2name
6ame ma! not use spaces
or punctuation
[ip;ode ip.code or ip code
6ame ma! not containZa1ascript obQects"
properties and reser1edwords
/6ow Date
lobal ariables N means that the 1ariable 1alue is a1ailable for use an!where inside the
eb Jage. To define a 1ariable as global" it must be declared in the <script> section beforean! of the user2defined functions.
Local ariables N means that the 1ariablePs 1alue is a1ailable onl! in the function in which it
is defined.
Data T!pe N t!pe of data the! store" such as te/t" numbers. Za1ascript data t!pes arenumeric" string" date or $oolean.
e!word or reser1ed word N is a word with special meaning.
6ote: Za1ascript 1ariables are loosel* t*ped" which means the! do not ha1e to be assigned a specific data t!pe.Za1ascript indicates the data t!pe b! declaring the 1ariable with an initial 1alue because this technique and featuresallows 1ariables to be fle/ible and store an! data t!pe.
'ssigning alues to ariables
eneral orm: 1ar 1ariable6ame-1alue
;ommentS where 1ar is an optional #e!word to
designate a 1ariableG 1ariable6ame is a1alid 1ariable nameG and 1alue is the
string numeric" date or $oolean 1aluebeing assigned to the 1ariable
3/amples: 1ar 6ic#6ame-S,haneS 1ar line;nt-*
1ar ;ontinue-false
;reating ' 6ew 0bQect nstance
eneral orm: 1ar 1ariable6ame-new $uiltin0bQect
;omment: here 1ariable6ame is the name of thenew obQect instanceG new is the required
#e!wordG and $uiltinobQect is the nameof the obQect from which new obQect
instance is to be created.3/amples 1ar s!sDate-new Date78
1ar s!sDate-new Date7R0ctober "C))FS8
1ar quote-new ,tring7R6o man is anisland.S8
Sample1.html
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 37/47
<html>
<head>
<title>ample*a'ascript <+title>
<+head>
<body b#color,s$ybl&e>
<script lan#&a#e,a'ascript>alert(This is my first a'ascript)
<+script>
<+body>
<+body>
<+html>
Sample2.html
<html>
<head><title> ample*a'ascript2 <+title>
<+head>
<body><inp&t type,b&tton 'al&e,b&tton1 onclic$,alert(mab&hay)><br><br>
<inp&t type,b&tton 'al&e,b&tton2 onclic$,a'ascript/alert(hello)>
<br><br>
<a href,0 onclic$,alert($am&sta)>#reetin#s<+a><br><br><a href,a'ascript/alert(are yo& s&re)>alert<+a>
<+body>
<+html>
Sample3.html
<html><head>
<title> ample*a'ascript3<+title>
<script lan#&a#e,a'ascript>
f&nction hello()
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 38/47
alert($am&sta)
<+script>
<+head>
<body><inp&t type,b&tton 'al&e,#reetin#s onclic$,hello()>
<+body>
<+html>
Sample4.html
<html>
<head>
<title> ample*a'ascript<+title>
<+head><body>
<script lan#&a#e,a'ascript>doc&ment.4rite(<html><head><title>ample*a'ascript<+title><+head>)
doc&ment.4rite(<body b#color,055126 topmar#in,5>)
doc&ment.4rite(<center><im# src,7aterlilies2.p#><br><br>)doc&ment.4rite(<font si8e,92 color,033::;;>7aterlilies<+font><+center>)
doc&ment.4rite(<+body><+html>)
alert(ea&tif&l flo4ers)
<+script><+body>
<+html>
Sample5.html
<html>
<head>
<title> e'enthandler / onload= onfoc&s= onbl&r= ons&bmit= onreset=
on$eydo4n= onmo&seo'er= onmo&seo&t<+title><+head>
<body onload,alert(f yo& open a doc&ment onload!) on&nload,alert(f yo& close thedoc&ment= it is on&nload!)>
<form ons&bmit,alert(&bmit ;orm) onreset,alert(nitiali8es the inp&t form)>
<inp&t type,b&tton 'al&e,?o&se@'er
onmo&seo'er,alert(mo&seo'er)>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 39/47
<inp&t type,b&tton 'al&e,?o&se o&t
onmo&seo&t,alert(mo&seo&t)><p>
TechAep&blic/ <inp&t type,text si8e,5 'al&e,:lic$ the textbox
onfoc&s,alert(The inp&t in the box is clic$ed= onfoc&s)
onbl&r,alert(the inp&t in foc&s lea'es= onbl&r)><p>
Bass4ord /<inp&t type,text si8e,5 'al&e,Bress the arro4do4n $ey
on$eydo4n,alert(Co& can press $eydo4n) ><p>Entry ox/ <inp&t type,text si8e,5 'al&e,The inp&t in the box has been clic$ed
on;oc&s,this.'al&e,
onl&r,this.'al&e,Dide 'al&e of the textbox> <p>
<inp&t type,b&tton 'al&e,:onfirm onclic$,alert(The b&tton has been clic$ed)>
<inp&t type,s&bmit 'al&e,s&bmit>
<inp&t type,reset 'al&e,reset>
<+form>
<+body><+html>
Sample6.html
<html>
<head><title> ample*a'ascript" <+title>
<script>i,155
f&nction test1()
'ar i,15
doc&ment.4rite(i)
f&nction test2()
doc&ment.4rite(<br> 9 i)
<+script>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 40/47
<+head>
<body>
<script lan#&a#e,a'ascript>
test1()
test2()
<+script>
<+body>
<+html>
Sample7.html
<html>
<head><title> eclare an Frray Gariable and find o&t the len#th of the array <+title>
<script lan#&a#e,a'ascript><!--
+H
tra'el , ne4 Frray()
tra'elI5J , ;rancetra'elI1J , F&stralia
tra'elI2J , Ffrica
tra'elI3J , :&baH+
tra'el , ne4 Frray(;rance=F&stralia=Ffrica=:&ba)
n,tra'el.len#thdoc&ment.4rite(<h3 ali#n,center> The ;inal estination K 9 tra'elIn-1J 9 K<+h3>)L
++-->
<+script>
<+head><body>
<center><im# src,c&ba.p#><+center>
<+body>
<+html>
Sample8.html
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 41/47
<html>
<head><title> operators <+title>
<+head>
<script lan#&a#e,a'ascript>
'ar a,=b,3
doc&ment.4rite( <h>------ Frithmetic @perators ------<+h>)doc&ment.4rite( I1J 93,= a9b =<br> )
doc&ment.4rite( I2J -3,= a-b =<br> )
doc&ment.4rite( I3J H3,= aHb =<br> )
doc&ment.4rite( IJ +3,= a+b =<br> )doc&ment.4rite( IJ M3,= aMb =<p> )
doc&ment.4rite( <h>------ Aelational ------<+h>)
doc&ment.4rite(I1J >,3 / = a>,b= <br>)doc&ment.4rite(I2J < 3 / = a<b= <br>)
doc&ment.4rite(I3J ,, 3 / = 3,,= <br>)doc&ment.4rite(IJ a > F / =a>F=<br>)
doc&ment.4rite(IJ FA > &st / =FAK >K yello4 d&st=<p>)
doc&ment.4rite( <h>------ The conditional operator ------<+h>)
'ar year,2553
today,(year,,2552) 2552 years. / 2552 it is not.
doc&ment.4rite(I1J year / =today=<br>)
today,(year,,2553) 2553 came. / 255 it is not.
doc&ment.4rite(I2J year / =today=<br>)
doc&ment.4rite( <h>------ No#ical @perators ------<+h>)
doc&ment.4rite(I1J (3>)OO(P<13) / =(3>)OO(P<13)=<br>)
doc&ment.4rite(I2J (3>)QQ(P<13) / =(3>)QQ(P<13)=<br>)doc&ment.4rite(I3J !!(3>) / =!(3>)=<br>)
doc&ment.4rite(IJ (3>)R(P<13) / = (3>)R(P<13)=<br>)
doc&ment.4rite( <h>------ incrementin# or decrementin# operator ------<+h>)doc&ment.4rite(a / = a = b / =b= <p>)
doc&ment.4rite(I1J 99i / =(99a)=<br>)
doc&ment.4rite(I2J i99 / =(b99)=<br>)doc&ment.4rite(a / = a = b / =b= <p>)
doc&ment.4rite(I3J a-- / =(a--)=<br>)
doc&ment.4rite(IJ --b / =(--b)=<br>)
doc&ment.4rite(a / = a = b / =b= <p>)
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 42/47
doc&ment.4rite( <h>------ Fssi#nment @perators ------<+h>)
'ar a,155=b,15doc&ment.4rite(a / = a = b / =b= <p>)
doc&ment.4rite(I1J a9,b / =a9,b=<br>)
doc&ment.4rite(I2J a-,b / =a-,b=<br>)doc&ment.4rite(I3J aH,b / =aH,b=<br>)
doc&ment.4rite(IJ a+,b / =a+,b=<br>)
doc&ment.4rite(IJ aM,b / =aM,b=<br>)
<+script>
<body>
<+body>
<+html>
Sample9.html
<html><head>
<title> Srades <+title>
<script lan#&a#e,*a'acript>f&nction #radeamp()
txtTotal,form1.total.'al&e
if(txtTotal>,5)
res<,Excellent
else if(txtTotal>,65)res<,Sood
else if(txtTotal>,P5)
res<,F'era#eelse if(txtTotal>,"5)
res<,Boor
else if(txtTotal,,)
res<,Gal&e Ueededelse
res<,end
form1.txtAes<.'al&e,res<
<+script>
<+head>
<body>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 43/47
<center>
<form name,form1>Total core / <inp&t type,text si8e,3 name,total> OnbspLOnbspL
<inp&t type,b&tton class,b&tton 'al&e,Aate onclic$,#radeamp()>OnbspLOnbspL
Aes< / <inp&t type,text si8e,15 name,txtAes<><+form>
<+center>
<+body>
<+html>
Sample10.html
<html><head>
<title> ?onths <+title><+head>
<body>
<center>
<script lan#&a#e,a'ascript>
month,prompt(Blease enter a n&mber from 1-12!=)L
s4itch(month)
case 1 /case 3 /
case /
case P /case 6 /
case 15 /
case 12 / doc&ment.4rite(month= has 31 days.)Lbrea$L
case /case " /
case /
case 11 / doc&ment.4rite(month= has 35 days.)Lbrea$Lcase 2 / doc&ment.4rite(month= has 26 days.)Lbrea$L
defa< / doc&ment.4rite(There is no e%&i'alent month for that n&mber. Than$s
any4ay..)L<+script>
<+center>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 44/47
<+body>
<+html>
Sample11.html
<html>
<head><title>&m Total
<+title>
<script lan#&a#e,a'ascript>
doc&ment.4rite(<h3>The initial 'al&e of s&m is 5 <+h3>)
'ar s&m,5
for(a,1La<11La99)
s&m,s&m9a
doc&ment.4rite(a 9 &nion 4ith c&rrent 'al&e of s&m is / 9 s&m 9 <A> )
<+script>
<+head>
<body>
<+body>
<+html>
Sample12.html
<html><head>
<title>?<iplication Table &sin# Uested for statement <+title>
<+head>
<body>
<script lan#&a#e,a'ascript>
doc&ment.4rite(<h3 ali#n,left>?<iplication Table!<+h3>)L
for(i,1Li<,Li99)
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 45/47
for(,2L<,L99)
doc&ment.4rite( 9 x 9 i 9 , 9 (iH) 9 / )L
doc&ment.4rite(<br>)L
<+script>
<+body><+html>
Sample13.html
<html>
<head><title> The obect properties <+title><+head>
<body>
<script lan#&a#e,a'ascript1.2>
doc&ment.f#:olor,4hite
doc&ment.b#:olor,oran#edoc&ment.lin$:olor,bl&e
doc&ment.'lin$:olor,yello4
doc&ment.alin$:olor,pin$
doc&ment.4rite(<h3>doc&ment title /9doc&ment.title9<br><br>)doc&ment.4rite(;ore:olor /9doc&ment.f#:olor9<br><br>)
doc&ment.4rite(ac$#ro&nd /9doc&ment.b#:olor9<br><br>)
doc&ment.4rite(lin$ color /9doc&ment.lin$:olor9<br><br>)doc&ment.4rite(Uei#hbor Nast Vpdated 255"-5 /9doc&ment.last?odified9<br><br>)
doc&ment.4rite(VAN address /9doc&ment.VAN9<br><+h3>)
<+script>
<+body>
<+html>
Sample14.html
<html>
<head><title>Nin$ obect and anchor obect properties<+title>
<script lan#&a#e,a'ascript>
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 46/47
f&nction hanbitnfo() ++Danbit ?edia Nin$s information
alert(Kn ;&ll Bath / 9doc&ment.lin$sI15J.href 9KnKn Brotocol / 9hanbit.protocol
9KnKn Dost / 9hanbit.hostname
9KnKn Ao&te / 9doc&ment.lin$sI15J.pathname 9KnKn Bort / 9 doc&ment.lin$sI15J.port)
<+script><+head><body><a name,top><h1 ali#n,center>Nin$ obect and anchor obect<+h1><+a>
<table 4idth,"55 ali#n,center>
<tr 'ali#n,top>
<td><a href,0site1>Fpril 1= 255"<+a><br>
<a href,0site2>cinema information<+a><br>
<a href,0site3>:ool ite<+a><br>
<+td><td>
<a name,site1>Fpril 1= 255" site<+a><br><a href,http/++444.yahoo.com> yahoo <+a><br>
<a href,http/++444.na'er.com> na'er <+a><p>
<+td><td>
<a name,site2>:inema information ite<+a>
<&l>
<li> <a href,http/++444.holly4ood.com+>Dolly4ood <+a>
<li><a href,http/++444.cine21.co.$r+> ?r.21 <+a> <li> <a href,http/++444.escreen.co.$r+>creen<+a>
<li> <a href,http/++444.cineline.co.$r+>Nine<+a>
<li> <a href,http/++films.hitel.net>Ft film<+a><+&l>
<+td>
<td><a name,site3>:ool ite<+a><br>
<a href,http/++444.hanbitboo$.co.$r+boo$+ne4+ne4boo$.html
name,hanbit>Danbit media<+a>
<+td><+tr>
<+table>
<br><br><br><hr>
<script lan#&a#e,a'ascript>
doc&ment.4rite(lin$ / 9 doc&ment.lin$s.len#th 9 <br>)doc&ment.4rite(anchor / 9 doc&ment.anchors.len#th 9 <br>)
for(i,5L i<doc&ment.lin$s.len#thL i99)
7/17/2019 ofad115LEC
http://slidepdf.com/reader/full/ofad115lec 47/47
doc&ment.4rite(i 9 / 9 doc&ment.lin$sIiJ 9 <br>)
<+script><inp&t type,b&tton 'al&e,Danbit ?edia Nin$s information onclic$,hanbitnfo()>
<hr><a href,0top>Top<+a>
<+body>
<+html>
