Internet & Web Technology

handclockSecurity

Nov 5, 2013 (3 years and 9 months ago)

95 views

Internet & Web Technology
May 21,2010
1 Internet
The Internet is a worldwide system of computer networks - a
network of networks in which users at any one computer can
get information fromany other computer.It was conceived by
the Advanced Research Projects Agency (ARPA) of the U.S.
government in 1969 and was rst known as the ARPANET.
Today,the Internet is a public,cooperative,and self-
sustaining facility accessible to hundreds of millions of people
worldwide.Physically,the Internet uses a portion of the total
resources of the currently existing public telecommunication
networks.Internet uses a set of protocols called TCP/IP (for
Transmission Control Protocol/Internet Protocol).
Electronic mail is the most widely used application on the
Net.The most widely used part of the Internet is the World
Wide Web (often abbreviated\WWW").Its outstanding fea-
ture is hypertext,a method of instant cross-referencing.In
most Web sites,certain words or phrases appear in text of a
dierent color than the rest;often this text is also underlined.
When you select one of these words or phrases,you will be
transferred to the site or page that is relevant to this word or
phrase.Sometimes there are buttons,images,or portions of
images that are\clickable."
Using the Web,you have access to millions of pages of infor-
mation.Web browsing is done with a Web browser,the most
popular of which are Microsoft Internet Explorer,Netscape
Navigator,Opera,Firefox,Safari,Google Chrome etc.
Uses of Internet
Networking,E-Mail,Library,Shopping,Travel,Blogging,
Hobbies,Current Events,E-Books,Research.
1.1 Working with e-mail
 Creating E-mail ID
 Login and Logout
 Compose e-mail
 Forwarding e-mail
 Creating lters
 creating and deleting e-mail folders
 Spams
1.2 Important tems
http
The Hypertext Transfer Protocol (HTTP) is an Applica-
tion Layer protocol for distributed,collaborative,hyper-
media information systems.HTTP is a request/response
standard typical of client-server computing.In HTTP,
web browsers typically act as clients,while an applica-
tion running on the computer hosting the web site acts
as a server.
FTP
File Transfer Protocol (FTP) is a standard network
protocol used to exchange and manipulate les over a
TCP/IP-based network,such as the Internet.FTP is
built on a client-server architecture and utilizes sepa-
rate control and data connections between the client and
server applications.FTP be used with user-based pass-
word authentication or with anonymous user access.
A client makes a connection to the server using TCP
port 21.This connection,called the control connection,
remains open for the duration of the session,with a sec-
ond connection on port 20 opened as required to transfer
le data.Commands are sent by the client over the con-
trol connection in ASCII and terminated by a carriage
return and line feed.
FTP can be run in active mode or passive mode,which
control how the second connection is opened.In active
mode the client sends the server the IP address port num-
ber that the client will use for the data connection,and
the server opens the connection.Passive mode was de-
vised for use where the client is behind a rewall and
unable to accept incoming TCP connections.The server
sends the client an IP address and port number and the
client opens the connection to the server.
Telnet
Telnet (teletype network) is a network protocol used on
the Internet or local area networks to provide a bidi-
rectional interactive communications facility.Typically,
telnet provides access to a command-line interface on a
remote host via a virtual terminal connection which con-
sists of an 8-bit byte oriented data connection over the
Transmission Control Protocol (TCP).
Telnet is a client-server protocol,based on a reliable
connection-oriented transport.Typically this protocol is
used to establish a connection to Transmission Control
Protocol (TCP) port number 23,where a Telnet server
application (telnetd) is listening.Telnet,however,pre-
dates TCP/IP and was originally run over Network Con-
trol Program (NCP) protocols.
Telnet,by default does not encrypt any data sent over
the connection (including passwords),and so it is often
practical to eavesdrop on the communications and use
the password later for malicious purposes;anybody who
has access to a router,switch,hub or gateway located
on the network between the two hosts where Telnet is
being used can intercept the packets passing by and ob-
tain login and password information (and whatever else
is typed) with any of several common utilities like tcp-
dump and Wireshark.
1
SSH
Secure Shell or SSH is a network protocol that allows
data to be exchanged using a secure channel between two
networked devices.Used primarily on GNU/Linux and
Unix based systems to access shell accounts,SSH was de-
signed as a replacement for Telnet and other insecure re-
mote shells,which send information,notably passwords,
in plaintext,rendering them susceptible to packet analy-
sis.The encryption used by SSH provides condentiality
and integrity of data over an insecure network,such as
the Internet.
Usenet
Usenet is a world-wide distributed discussion system.It
consists of a set of\newsgroups"with names that are
classied hierarchically by subject.\Articles"or\mes-
sages"are\posted"to these newsgroups by people on
computers with the appropriate software.These articles
are then broadcast to other interconnected computer sys-
tems via a wide variety of networks.Some newsgroups
are\moderated";in these newsgroups,the articles are
rst sent to a moderator for approval before appearing
in the newsgroup.Usenet is available on a wide variety
of computer systems and networks,but the bulk of mod-
ern Usenet trac is transported over either the Internet
or UUCP (Unix-to-Unix Copy).
News group
A newsgroup is a discussion about a particular subject
consisting of notes written to a central Internet site and
redistributed through Usenet,a worldwide network of
news discussion groups.Usenet uses the Network News
Transfer Protocol (NNTP).
Newsgroups are organized into subject hierarchies,with
the rst few letters of the newsgroup name indicating the
major subject category and sub-categories represented
by a subtopic name.Many subjects have multiple levels
of subtopics.Some major subject categories are:news,
rec (recreation),soc (society),sci (science),comp (com-
puters),and so forth (there are many more).Users can
post to existing newsgroups,respond to previous posts,
and create new newsgroups.
Newcomers to newsgroups are requested to learn basic
Usenet netiquette and to get familiar with a newsgroup
before posting to it.A frequently-asked questions is pro-
vided.The rules can be found when you start to enter the
Usenet through your browser or an online service.You
can subscribe to the postings on a particular newsgroup.
Some newsgroups are moderated by a designated person
who decides which postings to allow or to remove.Most
newsgroups are unmoderated.
Browsers
A browser is an application program that provides a way
to look at and interact with all the information on the
World Wide Web.The word\browser"seems to have
originated prior to the Web as a generic term for user in-
terfaces that let you browse (navigate through and read)
text les online.
Technically,a Web browser is a client program that uses
HTTP (Hypertext Transfer Protocol) to make requests
of Web servers throughout the Internet on behalf of the
browser user.Most browsers support e-mail and the File
Transfer Protocol (FTP) but a Web browser is not re-
quired for those Internet protocols and more specialized
client programs are more popular.
The rst Web browser,called WorldWideWeb,was cre-
ated in 1990.That browser's name was changed to Nexus
to avoid confusion with the developing information space
known as the World Wide Web.The rst Web browser
with a graphical user interface was Mosaic,which ap-
peared in 1993.Many of the user interface features in
Mosaic went into Netscape Navigator.Microsoft followed
with its Internet Explorer (IE).
Examples:Maxthon,Avant Browser,Deepnet Explorer,
Gogo Explorer,K-Meleon,Flock,Acoo Browser,Crazy
Browser,SeaMonkey,Netscape Navigator,Firefox,Sa-
fari,Lynx,Opera,Gooogle chrome,Netscape Navigator,
Internet Explorer,Google chrime,Links,etc.
Search Engins
A program that searches documents for specied key-
words and returns a list of the documents where the
keywords were found.Although search engine is really
a general class of programs,the term is often used to
specically describe systems like Google,Alta Vista and
Excite that enable users to search for documents on the
World Wide Web and USENET newsgroups.
Typically,a search engine works by sending out a spi-
der to fetch as many documents as possible.Another
program,called an indexer,then reads these documents
and creates an index based on the words contained in
each document.Each search engine uses a proprietary
algorithm to create its indices such that,ideally,only
meaningful results are returned for each query.
Examples:google,yahoo,bing,ask,thend,chacha,live-
lasma,digpile,zulla,planetsearch,goshme,mbot,like,
thend,aol,infoseek,veronica,
www
A technical denition of the World Wide Web is:all the
resources and users on the Internet that are using the
Hypertext Transfer Protocol (HTTP).
The credit if invention of WWW goes to Tim Berners-
Lee.He denes www as below
The World Wide Web is the universe of
network-accessible information,an embodi-
ment of human knowledge.
Popular locations
google,bteup,gpkanpur,hotmail,yahoo,infoseek,
veronica,gigapedia,nptl.iitm.ac.in,onlinesbi.
2 HTML
HTML stands for Hyper Text Markup Language is the
predominant markup language for web pages.It provides a
means to create structured documents by denoting structural
semantics for text such as headings,paragraphs,lists etc as
well as for links,quotes,and other items.It allows images and
objects to be embedded and can be used to create interactive
forms.It is written in the form of HTML elements consisting
of"tags"surrounded by angle brackets within the web page
content.It can include or can load scripts in languages such as
JavaScript which aect the behavior of HTML processors like
2
Web browsers;and Cascading Style Sheets (CSS) to dene the
appearance and layout of text and other material.
 Hyper text
Hypertext is text displayed on a computer or other elec-
tronic device with references (hyperlinks) to other text
that the reader can immediately access,usually by a
mouse click or keypress sequence.Apart from running
text,hypertext may contain tables,images and other pre-
sentational devices.Hypertext is the underlying concept
dening the structure of the World Wide Web,making it
an easy-to-use and exible format to share information
over the Internet.
 How to write and execute
Use notepad to create html document.The extension of
a html document is\.html".The html document is in-
terpreted by web browser.Under windows environment,
when you double click on a le with.html extansion in-
ternet explorer is automatically ge started.
 Compilar or interpretar
HTML documents are interpreted by the web browser.
HTML documents are case insensitive,that is tag
<HTML> and <html> are equivalent.
2.1 HTML document Structure
<html>
<head>
<title>Write document name here</title>
</head>
<body>
Write contents here...
</body>
</html>
Attributes to body can be like
leftmargin=\0"
topmargin=\0"
marginwidth=\0"
marginheight=\2"
bgcolor=\gray"
2.2 Document components
2.3 Headings
<h1>Largest Heading</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>Smallest Heading</h6>
<font size="2"face="Times">
Text of times font
</font>
Font types can be Verdana or Times or...
2.4 Paragraph
<p> This is a paragraph</p>
2.5 Line break
<br> (line break)
2.6 Horizontal rule
<hr> (horizontal rule)
2.7 Un-ordered List
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
2.8 Orderd List
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
2.9 Denition List
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
2.10 Styles
<b>This is bold</b>
<i>This is italic</i>
<em>This is emphasized</em>
<strong>This is strong</strong>
<code>This is like code</code>
2.11 Links
<a href="http://www.gpkanpur.com/">
Go to college website</a>
<a href="http://www..com/">
<img src="URL"alt="Click on image"></a>
<a href="mailto:gplcse@gmail.com">
Send e-mail to department</a>
2.12 Marquee
<MARQUEE WIDTH=100% BEHAVIOR=alternate
BGColor=#98AFC7 scrolldelay=100>
LAST DATE is now MAR 7,2010
</MARQUEE>
3
2.13 Blank Space
&nbsp;produces blank spaces
My home is &nbsp;&nbsp;&nbsp;&nbsp;away
2.14 Colored Text
Color can be specied by in the form of RGB value as
#
R
tt
G
tt
B
tt.The value in t can be any thing out of
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Another way to use color is by specifying in RGB intensoty
values,the syntax is rgb(R,G,B).
Some examples are Black:#000000,Red:#FF0000,
Green:#00FF00,Blue:#0000FF,Yellow:#FFFF00
<HTML>
<HEAD>
<TITLE>document</TITLE>
<BODY>
<h1 style="color:#FF0000">
Some text
</h1>
</BODY>
</HTML>
Other settings for style are
color:#FF0000;
background-color:#FFFF00;
text-align:center etc.
2.15 Advance topics
2.16 Inserting Images
<img src="myImage.jpg"> </img>
<img src="myImage.jpg"
alt="show this if no image"
width="200"
height="150"> </img>
2.17 Drawing Tables
<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Table can also have following attributes
align=\center"
width=\1024px"or 80%
BORDER=\0"
CELLSPACING=\0"
CELLPADDING=\0"
style=\background-color:#FFF8C6;"
Some TD attributes can be colspan=3,bg-
color=\#FEE6B4"valign=\top"
2.18 Creating Frames
===================
File:main.html
===================
<HTML>
<HEAD>
<TITLE>Main frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME src="menu.html"name="menu">
<FRAMESET rows="100,200">
<FRAME name="d1">
<FRAME src="rb.html"name="d2">
</FRAMESET>
</FRAMESET>
</HTML>
===================
File:menu.html
===================
<HTML>
<HEAD>
<TITLE>menu list</TITLE>
</HEAD>
<BODY>
<ol>
<li>
<a target="d1"href="info1.html">
Click to see Apple </a>
<li>
<a target="d1"href="info2.html">
Click to see Mango </a>
</ol>
</BODY>
</HTML>
===================
File:rb.html
===================
<HTML>
<HEAD>
<TITLE> I am at bottom</TITLE>
</HEAD>
<BODY>
Some bottom text
</BODY>
</HTML>
===================
File:info1.html
===================
<HTML>
<HEAD>
<TITLE>informaton 01</TITLE>
</HEAD>
<BODY>
APPLE
</BODY>
4
</HTML>
===================
File:info2.html
===================
<HTML>
<HEAD>
<TITLE>informaton 02</TITLE>
</HEAD>
<BODY>
MANGO
</BODY>
</HTML>
2.19 Creating Forms
A form is an area that can contains form elements.Form
elements are elements that allow the user to enter informa-
tion (input box,drop-down menus,radio buttons,checkboxes,
etc.) in a form.See the example below.
<form>
First name:<input type="text"
name="firstname"value="John"> <br>
Last name:<input type="text"name="lastname"> <br>
Password:<input type="password"name="passw">
<br>
<input type="radio"name="sex"value="M"> Male
<input type="radio"name="sex"value="F"> Female
<br> I have a bike:
<input type="checkbox"name="vehicle"value="Bike">
<br> I have a car:
<input type="checkbox"name="vehicle"value="Car">
<br> I have an airplane:
<input type="checkbox"name="vehicle"value="Plane">
<br>College Degree:
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
</select>
<br>Musical Taste:
<select multiple name="music"size="4">
<option value="emo"selected>Emo</option>
<option value="metal/rock">Metal/Rock</option>
<option value="hiphop">Hip Hop</option>
<option value="ska">Ska</option>
<option value="jazz">Jazz</option>
<option value="country">Country</option>
<option value="classical">Classical</option>
<option value="alternative">Alternative</option>
<option value="oldies">Oldies</option>
<option value="techno">Techno</option>
</select>
<br>
<input type="hidden"
name="MAX_FILE_SIZE"value="100">
<input name="file"type="file">
<br>
<textarea rows="5"cols="20"wrap="physical"
name="comments">
Enter Comments Here
</textarea>
<br>
<input type="submit"value="Send">
<form>
2.20 Marquee
It creates a scrolling display.Some of the attributes
of marquee are WIDTH(how wide the marquee is),
HEIGHT(how tall the marquee is),DIRECTION(which
direction the marquee should scroll),BEHAVIOR(what
type of scrolling),SCROLLDELAY(how long to delay be-
tween each jump),SCROLLAMOUNT(how far to jump),
LOOP(how many times to loop),BGCOLOR(background
color),HSPACE(horizontal space around the marquee),VS-
PACE(vertical space around the marquee).Syntax is as be-
low.
<MARQUEE WIDTH="20%">
Hi There!
</MARQUEE>
<marquee
behavior="slide"direction="left"
scrollamount="10">
Your slide-in text goes here
</marquee>
2.21 Passing values across the form
GET sends the data as part of the URL.See the example
below.
===============
File:a.html
===============
<html>
<head> </head>
<body>
<form name="theform"
action="showname.html"method="get">
<input type="text"name="name"><br>
<input type="submit"value="Show">
</form
</body>
</html>
===============
File:showname.html
===============
<html>
<head>
<script type="text/javascript">
5
function getValue(varname)
{
//First,we load the URL into a variable
var url = window.location.href;
//Next,split the url by the?
var qparts = url.split("?");
//Check that there is a querystring,
//return""if not
if (qparts.length == 0)
{
return"";
}
//Then find the querystring,
//everything after the?
var query = qparts[1];
//Split the query string into
//variables (separates by &s)
var vars = query.split("&");
//Initialize the value with""as default
var value ="";
//Iterate through vars,
//checking each one for varname
for (i=0;i<vars.length;i++)
{
//Split the variable by =
//,which splits name and value
var parts = vars[i].split("=");
//Check if the correct variable
if (parts[0] == varname)
{
//Load value into variable
value = parts[1];
//End the loop
break;
}
}
//Convert escape code
value = unescape(value);
//Convert"+"s to""s
value.replace(/\+/g,"");
//Return the value
return value;
}
</script>
</head>
<body>
<h1>Hello,
<script type="text/javascript">
var name = getValue("name");
document.write(name);
</script>
</h1>
</body>
</html>
POST is the preferred method for sending lengthy form data.
When a form is submitted POST the user does not see the
form data that was sent.
3 JavaScript
JavaScript is the scripting language of the Web.JavaScript
was designed to add interactivity to HTML pages.It is a
lightweight programming language usually embedded directly
into HTML pages.It is an interpreted language.Java and
JavaScript are two completely dierent languages in both con-
cept and design.
JavaScript is case sensitive.In JavaScript + Operator can
be used on strings.
<html>
<body>
<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>
</body>
</html>
JavaScript can also be written in header for event trigering.
<html>
<head>
<script type="text/javascript">
function message()
{
alert("called with the onload event");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("written by JavaScript");
</script>
</body>
</html>
3.1 Comments
It follows C style in comment writing
//Single line comment
Some code goes here
/*
this is
a
multiline comment
*/
6
3.2 Using script written in a le
<script type="text/javascript"
src="xxx.js"></script>
3.3 Conditional statements
if (age<18) document.write("Too young");
variablename=(condition)?value1:value2;
----------------------------------------
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
else
{
document.write("Good day!");
}
----------------------------------
//Monday=1,Tuesday=2,etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("other day!");
}
3.4 Alart Box
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button"onclick="show_alert()"
value="Show alert box"/>
</body>
</html>
3.5 Conrm Box
A conrm box is often used if you want the user to verify or
accept something.
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button"onclick="show_confirm()"
value="Show confirm box"/>
</body>
</html>
3.6 Prompt Box
A prompt box is often used if you want the user to input a
value before entering a page.
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("enter name","Kamlesh");
if (name!=null && name!="")
{
document.write("Hello"+
name +"!How are you today?");
}
}
</script>
</head>
<body>
<input type="button"onclick="show_prompt()"
value="Show prompt box"/>
</body>
</html>
3.7 Functions
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
7
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
3.8 Loop
----------------------------
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is"+ i);
document.write("<br/>");
}
----------------------------
while (i<=5)
{
document.write("The number is"+ i);
document.write("<br/>");
i++;
}
----------------------------
do
{
document.write("The number is"+ i);
document.write("<br/>");
i++;
}
while (i<=5);
----------------------------
var x;
var mycars = new Array();
mycars[0] ="Saab";
mycars[1] ="Volvo";
mycars[2] ="BMW";
for (x in mycars)
{
document.write(mycars[x] +"<br/>");
}
-------------------------------
break,and continue are used in same way as in C or Java.
3.9 Events
By using JavaScript,we have the ability to create dynamic
web pages.Events are actions that can be detected by
JavaScript.
Every element on a web page has certain events which can
trigger a JavaScript.For example,we can use the onClick
event of a button element to indicate that a function will run
when a user clicks on the button.We dene the events in the
HTML tags.
3.9.1 onLoad and onUnload
The onLoad and onUnload events are triggered when the user
enters or leaves the page.
3.9.2 onFocus,onBlur and onChange
The onFocus,onBlur and onChange events are often used in
combination with validation of form elds.
<input type="text"size="30"id="email"
onchange="checkEmail()">
3.9.3 onSubmit
The onSubmit event is used to validate ALL formelds before
submitting it.
<form method="post"action="xxx.htm"
onsubmit="return checkForm()">
3.9.4 onMouseOver and onMouseOut
onMouseOver and onMouseOut are often used to create"an-
imated"buttons.
<a href="http://www.abcd.com"onmouseover=
"alert('An onMouseOver event');
return false"> Click Me </a>
3.10 See Examples
var str="Hello world!";
document.write(str.length);
document.write(str.toUpperCase());
3.11 Date
The Date object is used to work with dates and times.Date
objects are created with the Date() constructor.There are
four ways of instantiating a date
new Date()//current date and time
new Date(milliseconds)
//milliseconds since 1970/01/01
new Date(dateString)
new Date(year,month,day,hours,
minutes,seconds,milliseconds)
-------------------------------------
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
3.12 Array
An array can be dened in three ways.
8
var myCars=new Array();//regular array
myCars[0]="Saab";//(add an optional
myCars[1]="Volvo";//integer argument to
myCars[2]="BMW";//control array's size)
var myCars=new Array("Saab","Volvo","BMW");
//condensed array
var myCars=["Saab","Volvo","BMW"];
//literal array
3.13 Random number
The following example uses the random() method of the Math
object to return a random number between 0 and 1:
document.write(Math.random());
4 CSS
Cascading Style Sheets (CSS) is a style sheet language used
to describe the presentation semantics (that is,the look and
formatting) of a document written in a markup language.
<html>
<head>
<style type="text/css">
h1 {text-align:center;color:red;
background-color:green;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May,2010</p>
<p class="main">A computer is a programmable
machine that receives input,stores and
manipulates data,and provides output in
a useful format.
Although mechanical examples of computers have
existed through much of recorded human history,
the first electronic computers were developed
in the mid-20th century (19401945).These
were the size of a large room,consuming as
much power as several hundred modern
personal computers (PCs).</p>
<p><b>Note:</b> PC means personal computers</p>
</body>
</html>
4.1 Properties and their values
color:red;black;sienna;
text-align:center;
font-family:arial;"Trebuchet MS",Arial,Helvetica,sans-
serif;
margin-left:20px;
background-image:url(\images/back40.gif");
In the same way following can also be dened accord-
ingly.background-color,,background-attachment (Sets
whether a background image is xed or scrolls with the
rest of the page)
background-position:right top;
background-color:(Sets the background color of an ele-
ment) color-rgb;color-hex;color-name;transparent;in-
herit;
background-position:(Sets the starting position of a back-
ground image)left top;left center;left bottom;right top;
right center;right bottom;center top;center center;cen-
ter bottom;x% y%;xpos ypos;
background-repeat:(Sets if/how a background image will
be repeated) repeat;repeat-x;repeat-y;no-repeat;
text-align:center;right;justify;
text-decoration:none;overline;line-through;underline;
blink;
text-transform:uppercase;lowercase;capitalize;
text-indent:50px;
font-family:\Times New Roman";\Times";\serif";
font-style:normal;italic;oblique;
font-size:40px;
list-style-type:circle;square;upper-roman;lower-alpha;
list-style-image:url('sqpurple.gif');
border:1px solid black;
visibility:hidden;none;
4.1.1 External Style Sheet
An external style sheet is ideal when the style is applied to
many pages.With an external style sheet,you can change
the look of an entire Web site by changing one le.Each
page must link to the style sheet using the <link> tag.The
<link> tag goes inside the head section:
<head>
<link rel="stylesheet"type="text/css"
href="mystyle.css"/>
</head>
4.1.2 Internal Style Sheet
An internal style sheet should be used when a single document
has a unique style.You dene internal styles in the head
section of an HTML page,by using the <style> tag
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
9
4.1.3 Example 01:Menu
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-size:8pt;
color:#FFFFFF;
background-color:#98bf21;
width:100px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="home">Home</a></li>
<li><a href="news">News</a></li>
<li><a href="contact">Contact</a></li>
<li><a href="about">About</a></li>
</ul>
</body>
</html>
4.1.4 Try these
body
{
font-size:75%;
font-family:verdana,arial,'sans serif';
background-color:#FFFFF0;
color:#000080;
margin:10px;
}
h1
{
color:orange;
text-align:center;
font-size:200%;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
ul {list-style:circle;}
ol {list-style:upper-roman;}
th {background-color:#D3D3D3;}
td {background-color:#FFFAF0;}
a:link {color:#8A2BE2;text-decoration:none;}
a:hover {color:red;
font-weight:bold;
text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:underline;}
.center {text-align:center;}
p.center {text-align:center;}
table
{
width:100%;
}
th
{
height:50px;
}
td
{
text-align:right;
height:50px;
vertical-align:bottom;
padding:15px;
}
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
5 ASP
ASP is a server side scripting language.ASP stands for Ac-
tive Server Pages,it is a Microsoft Technology.ASP is a
program that runs inside IIS (Internet Information Services)
which comes as a free component with Windows.You have
to rst instal IIS to run an ASP code.Let's see the rst
example.
<html>
<body>
<%
response.write("My first ASP script!")
%>
</body>
</html>
Install and test IIS on Windows XP as below.
1.On the Start menu,click Settings and select Control
Panel,then double-click Add or Remove Programs.
2.Click Add/Remove Windows Components,then Click In-
ternet Information Services (IIS),Click Details.
10
3.Select the check box for World Wide Web Service,and
click OK,In Windows Component selection,click Next
to install IIS
4.Look for a new folder called Inetpub on your hard drive,
Open the Inetpub folder,and nd a folder named www-
root
5.Create a new folder,like\MyWeb",under wwwroot.
Write some ASP code and save the le as\test1.asp"
in the new folder
6.Make sure your Web server is running,then open your
browser and type\http://localhost/MyWeb/test1.asp",
to view your rst web page
========================
<html>
<head>
<%
sub vbproc(num1,num2)
response.write(num1*num2)
end sub
%>
</head>
<body>
<p>Result:<%call vbproc(3,4)%></p>
</body>
</html>
========================
<%@ language="javascript"%>
<html>
<head>
<%
function jsproc(num1,num2)
{
Response.Write(num1*num2)
}
%>
</head>
<body>
<p>Result:<%jsproc(3,4)%></p>
</body>
</html>
======================
5.1 ASP Forms and User Input
====================
File:a.html
===================
<form method="get"action="simpleform.asp">
First Name:<input type="text"name="fname"/>
<br/>
Last Name:<input type="text"name="lname"/>
<br/><br/>
<input type="submit"value="Submit"/>
</form>
====================
File:impleform.asp
====================
<body>
Welcome
<%
response.write(request.querystring("fname"))
response.write(""&request.querystring("lname"))
%>
</body>
=====================
5.2 Control Statements
<%
dim i
dim j
j=Application.Contents.Count
For i=1 to j
Response.Write(Application.Contents(i)
&"<br/>")
Next
%>
=================
Date and Time
=================
<html>
<body>
Today's date is:<%response.write(date())%>.
<br/>
The server's local time is:
<%response.write(time())%>.
</body>
</html>
=======================
<html>
<body>
<%
response.write
(FormatDateTime(date(),vbgeneraldate))
response.write("<br/>")
response.write
(FormatDateTime(date(),vblongdate))
response.write("<br/>")
response.write
(FormatDateTime(date(),vbshortdate))
response.write("<br/>")
response.write
(FormatDateTime(now(),vblongtime))
response.write("<br/>")
response.write(FormatDateTime(now(),vbshorttime))
%>
<p>
Syntax for FormatDateTime:
FormatDateTime(date,namedformat).
</p>
</body>
</html>
11
====================================
Time based greeting
===================
<html>
<body>
<%
dim h
h=hour(now())
response.write("<p>"& now())
response.write("</p>")
If h<12 then
response.write("Good Morning!")
else
response.write("Good day!")
end if
%>
</body>
</html>
====================================
Reverse a string
================
<html>
<body>
<%
sometext ="Hello Everyone!"
response.write(strReverse(sometext))
%>
</body>
</html>
=============================
Interaction using get method
=================
<html>
<body>
<form action="demo_reqquery.asp"method="get">
Your name:
<input type="text"name="fname"size="20"/>
<input type="submit"value="Submit"/>
</form>
<%
dim fname
fname=Request.QueryString("fname")
If fname<>""Then
Response.Write("Hello"& fname &"!<br/>")
Response.Write("How are you today?")
End If
%>
</body>
</html>
6 XML
XML (Extensible Markup Language) is a set of rules for en-
coding documents electronically.XML was designed to trans-
port and store data,with focus on what data is.HTML was
designed to display data,with focus on how data looks.XML
is a structured set of rules for how one might dene any kind
of data to be shared on the Web.
<?xml version="1.0"encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The document structure of an XML document is as below.
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
=========================
For example see following XML document
===============
<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K.Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T.Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
6.1 Using CSS to display XML
========================
Consider following XML file
==============
<?xml version="1.0"
encoding="UTF-8"standalone="yes"?>
<?xml-stylesheet type="text/css"
href="tutorials.css"?>
<tutorials>
<tutorial>
<name>XML Tutorial</name>
<url>http://www.quackit.com/xml/tutorial</url>
</tutorial>
<tutorial>
<name>HTML Tutorial</name>
<url>http://www.quackit.com/html/tutorial</url>
</tutorial>
</tutorials>
12
==============================
File:tutorials.css
================
tutorials
{
margin:10px;
background-color:#ccff00;
font-family:verdana,helvetica,sans-serif;
}
name
{
display:block;
font-weight:bold;
}
url
{
display:block;
color:#636363;
font-size:small;
font-style:italic;
}
7 XHTML
As the World Wide Web Consortium (W3C) describes it,
XHTML (Extensible Hypertext Markup Language) is\a re-
formulation of HTML 4.0 as an application of the Exten-
sible Markup Language (XML)."It's called an extensible
markup language because anyone can invent a particular set
of markup for a particular purpose and as long as every-
one uses it (the writer and an application program at the
receiver's end),it can be adapted and used for many pur-
poses - including,as it happens,describing the appearance
of a Web page.That being the case,it seemed desirable to
reframe HTML in terms of XML.The result is XHTML,a
particular application of XML for expressing Web pages.
It's advantages are\extensibility and portability."
Extensibility means that as new ideas for Web communi-
cation and presentation emerge,they can be implemented
without having to wait for the next major version of HTML
and browser support.
If extensibility is likely to lead to more complicated pages
and larger programs,the portability advantage means that
Web pages can now be made simpler than they were before so
that small devices can handle them.This is important for mo-
bile devices and possibly household devices that contain mi-
croprocessors with embedded programming and smaller mem-
ories.
8 MySQL
MySQL is a relational database management system
(RDBMS) that runs as a server providing multi-user access
to a number of databases.
13