Advanced Web @ Fred 2022

Chapter four

Server-side Programming

Similarly, web server response can be static or dynamic

Static: HTML document is retrieved from the file system and returned to the client
Dynamic: HTML document is generated by a program in response to an HTTP request
Java servlets are one technology for producing dynamic server responses
Servlet is a class instantiated by the server to produce a dynamic response
Servlet Overview

a) When server starts it instantiates servlets

b) Server receives HTTP request, determines need for dynamic response

c) Server selects the appropriate servlet to generate the response, creates request/response
objects, and passes them to a method on the servlet instance

d) Servlet adds information to response object via method calls

e) Server generates HTTP response based on information stored in response object

Servlets vs. Java Applications

a) Servlets do not have a main()

The main() is in the server

Entry point to servlet code is via call to a method (doGet() in the example)
Advanced Web @ Fred 2022

b) Servlet interaction with end user is indirect via request/response object APIs

c) Actual HTTP request/response processing is handled by the server. Primary servlet

output is typically HTML

Q2.write 20 points on client side scripting and server side scripting technologies or languages.

Client side scripting: is a class of computer programs on the web that are executed by the client-
side user browser instead of server side.

 Web authors write the scripts in languages such as java script and vbscript.
 They have different and changing content depending on the user input.
 Client side scripts also have instructions which the browser should follow in response to
certain user action.
 The user cannot see the server side source code unless the server publishes it separately.
 Client-server scripts have greater access to the information and functions available on the
server.
 The users’ web browser should how ever have an interpreter.
 They are mostly embedded within an html or xhtml.
 Client side script is not inherently unsafe although users are required to update their
browsers
 Actions script is a browser used to create animated interactive web applications for adobe
flash player.
Server side scripting

 It’s a technique which involves embedding scripts in html source code which then
handles the users’ request.
 This scripting is used to limit access to proprietary databases and other data sources.
 These scripts may assemble client characteristics for use in customization
 It also enables the web owner to reduce user access to the source code of server scripts.
 The server side provides more computing resources before sending a page to the client
computer for display via its web browser.
 Client side scripts are usually embedded with html or xhtml documents but may also
contain separate files.
 Java scripts are executed when a user requests a document they produce output
understandable by the web browser.
 Documents produced by server side scripts may produce client side scripts in them.
Advanced Web @ Fred 2022

 Techniques like activex may be used to control user access and used as sidestep
restriction.
 Some server script languages are ASP, CGI etc.

Q3.With the aid of examples describe the relationship between HTML,XML and SGML

The relationship between HTML, XML and SGML is a family bond that helps make websites
work and web design dynamic.

SGML- is the parent in this family. It provides a way to define markup languages and set the
standard for their form simply put it states what some languages can or cannot do.

HTML- is the child or application of SGML. It designs the page for an internet browser. Using it
you can embed images, create page sections, establish fonts and direct the flow of the page. It is
the markup language that creates the form and appearance of the web page.

XML- is the cousin to HTML and the nephew to SGML. Although it is a markup language and
therefore part of the family, it has different functions than HTML. It is a subset of SGML, this
gives it rights that an application such as HTML doesn’t .

O99Q.4.explain 10 factors to consider when choosing content of a website.

 Maintenance-the contents in the web should be able to accept import existing content
and should be able to manage all the content
 Website growth-it should be controlled in such a way that one is able to manage expired
content.
 Visible- the content if images should be clearly seen if text should be readable for the
user in question to get the message or the essence of the website.
 Adaptability- the content displayed on the website should be adaptable in that it can be
changed constantly according to the designers preference or due to the emergence of new
information.
 Reliable- the content of the website to be designed should be accurate and factual for the
sake of the user.
 Accessibility –the content of your website can either be open sourced such that anyone
can access the information in your website or it may require authorized access for
example through subscription thus the user can access the content.
 User friendly- the content to be displayed on the website should be simple enough for any
average user to be able to comprehend it avoiding the use of complicated terms is advised
 Intergration -this applies to existing systems thus should not habour complications.
 Communication-the web system should be able to accept benefits from the seniors
Advanced Web @ Fred 2022

 Distribution of content-the features should not be hidden in a way that web users will
strain to get certain informations.
 Turnover rate-the turnover rate should be high to ensure that the website itself is fast.
 Accuracy – contents in the website should be accurate this is to enable true passing and
receiving of information.
 Cost-the size and quality should be accessed to ensure that the server side does not suffer
a lot in terms of financial areas in the process of setting up the website.
 Business requirements-a website should meet business requirements required.
 Useability -a website should have a high rate of useability cause that is the essence of it.
Advanced Web @ Fred 2022

Chapter five

What is CSS?

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.

Styles are normally stored in Style Sheets. Styles were added to HTML 4.0 to solve a problem.
(Netscape vs MS Internet Explorer)

External Style Sheets can save you a lot of work. External Style Sheets are stored in CSS files.

Multiple style definitions will cascade into one. priority:

• Inline Style (inside HTML element)

• Internal Style Sheet (inside the <head> tag)

• External Style Sheet

• Browser default style

CSS Versions

The World Wide Web Consortium has published two main CSS recommendations of style sheets
CSS1 and CSS2.

CSS1 became a recommendation in 1996.

CSS2 became a recommendation in 1998.

Syntax

The CSS syntax is made up of three parts:

a selector, a property and a value:

selector {property: value}

body {bgcolor: black}

p {font-family: "sans serif"}

p {text-align:center ; color:red}

Internal style sheet, included within the head element.

In-line definition as attributes of elements within the body of a document.

External specification in a style sheet.

Advanced Web @ Fred 2022

Internal style sheet

<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>

In-line Style Sheet

<html>
<body>
<a href="lastpage.htm"
style="text-decoration:none">
THIS IS A LINK!
</a>
</body>
</html>

External Style Sheet

Myhtml.html
…
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
….
Mystyle.css
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

CSS, Why ?

By editing a single CSS file, you can make site-wide design changes in seconds.

CSS lets you output to multiple formats quickly. It lets you use logical names for page elements.
You can, for example, give a DIV the name "header", or a H1 the class "headline". It's self-
describing.

External CSS files are cached by browsers, improving load time. CSS eliminates the need for
messy code -- namely font tags, spacer GIFs and nested tables.
Advanced Web @ Fred 2022

CSS lets you do things normal HTML doesn't. Examples: better font control, absolute
positioning, nifty borders. Practical use of CSS encourages proper HTML structure, which will
improve accessibility and search engine placement. CSS's :hover PseudoClass cuts down on the
need to use JavaScript onmouseover calls.

If you want valid XHTML Strict you have to use it anyway.

What is XML?

XML stands for EXtensible Markup Language. It’s a markup language much like HTML.

It was designed to describe data. XML tags are not predefined. You must define your own
tags. XML uses a Document Type Definition (DTD) or an XML Schema to describe the data.

XML with a DTD or XML Schema is designed to be self-descriptive. It’s a W3C

Recommendation.

What is the main differences between XML and HTML

XML was designed to carry data. XML is not a replacement for HTML.

XML and HTML were designed with different goals:

XML was designed to describe data and to focus on what data is. HTML was designed to display
data and to focus on how data looks. HTML is about displaying information, while XML is
about describing information.

XML

Best description of XML is this: XML is a cross-platform, software and hardware independent
tool for transmitting information.

An example of an XML document

<?xml version="1.0" encoding="ISO-8859-1"?>

<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>
Advanced Web @ Fred 2022

</book>
…………….
</bookstore>

HTML-XML Example (1)

XML document : (file name: “xml_note.xml”)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<note>
<to>Tove</to>
<from>Jani</from>
<header>Reminder</header>
<body>Don't forget me this weekend!</body>
</note>

HTML-XML Example (2)

<html>
<head>
<script type="text/javascript“ for="window" event="onload">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("xml_note.xml")
nodes=xmlDoc.documentElement.childNodes
to.innerText= nodes.item(0).text
from.innerText= nodes.item(1).text
header.innerText=nodes.item(2).text
body.innerText= nodes.item(3).text
</script>
<title>HTML using XML data</title>
</head>

HTML-XML Example (3)

<body bgcolor="yellow">
<h1>W3Schools.com Internal Note</h1>
<b>To: </b>
<span id="to"> </span>
<br />
<b>From: </b>
<span id="from"></span>
<hr>
<b><span id="header"></span></b>
<hr>
Advanced Web @ Fred 2022

<span id="body"></span>
</body>
</html>
Advanced Web @ Fred 2022

Chapter six

Browser Scripting

Browser scripting languages allow dynamic behavior to be specified within HTML documents.

A scripting language is a lightweight programming language Browsers must support the used
scripting language. Browsers are disabled for scripting to prevent the risk of misuse.

What is JavaScript?

JavaScript was designed to add interactivity to HTML pages. It’s a scripting language.

A JavaScript consists of lines of executable computer code. It’s usually embedded directly into
HTML pages. It’s an interpreted language (means that scripts execute without preliminary
compilation). Everyone can use JavaScript without purchasing a license.

Are Java and JavaScript the Same?

NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming
language - in the same category as C and C++.

What can a JavaScript Do?

a) JavaScript gives HTML designers a programming tool.

b) JavaScript can put dynamic text into an HTML page.

c) JavaScript can react to event.

d) JavaScript can read and write HTML elements.

e) JavaScript can be used to validate data.

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

g) JavaScript can be used to create cookies.

How to Put a JavaScript Into an HTML Page

<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
Advanced Web @ Fred 2022

</script>
</body>
</html>

Where to Put the JavaScript

a) Head section
b) Body section
c) External scripts

JavaScript in the head section

<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with
the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>

Scripts in the body section

<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>

Using External JavaScript

<html>
<head>
<script src="xxx.js">
</script>
Advanced Web @ Fred 2022

</head>
<body>
</body>
</html>

What can a JavaScript Do?

<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
...............

<html>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{ document.write("The number is " + i)
document.write("<br />")
}
</script>
<p>Explanation:</p>
<p>This for loop starts with i=0.</p>
<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>

What is VBScript?

VBScript is a Microsoft scripting language.

A scripting language is a lightweight programming language.

VBScript is a light version of Microsoft's programming language Visual Basic.

Advanced Web @ Fred 2022

How Does it Work?

When a VBScript is inserted into a HTML document, the Internet browser will read the HTML
and interpret the VBScript.

The VBScript can be executed immediately, or at a later event.

How to Put VBScript Code in an HTML Document

<html>
<head>
</head>
<body>
<script type="text/vbscript"> document.write("Hello from VBScript!")
</script>
</body>
</html>

Where to Put the VBScript

<html>
<head>
<script type="text/vbscript">
some statements
</script>
</head>
<body>
<script type="text/vbscript">
some statements
</script>
</body>

VBScript (Example)
html>
<head>
<script type="text/vbscript">
function greeting()
i=hour(time)
if i < 10 then
document.write("Good morning!")
else
document.write("Have a nice day!")
end if
end function
</script>
</head>
Advanced Web @ Fred 2022

<body onload="greeting()">
</body>
</html>

……………..
<html>
<body>
<script type="text/vbscript">
for i = 0 to 5
document.write("The number is " & i & "<br />")
next
</script>
</body>
</html>

End of Chapter Six