dhtml cascading style sheets - showriblog.files.wordpress.com · xml: basics of xml, dtd, xml...

NBKRIST IV B.Tech I SEM CSE Web Technologies Prepared BY: BSR

UNIT – II

DHTML: Cascading style sheets, Document Object model and collections, Event Model.

XML: basics of XML, DTD, XML Schema, XML vocabularies. Web Servers: IIS, Apache, & WAMP

Servers.

DHTML

Cascading Style Sheets

Style Sheets: Style sheets are the best approach for creating attractive web pages by getting the

web designer more control over the presentation style. Style sheets simplify the work of the web

designer. Development of large websites, where fonts and color information were added to every

single page, became a long and expensive process. So the developers needed some extra feathers

should be supported by the browsers in the form of style sheets.

Syntax: The CSS syntax is made up of three parts:

1. A selector

2. A property

3. A value

Syntax:

Selector

{

property: value

}

Example:

Body

{

Color: black

}

H1 { color:blue; font-size:12px}

The property and value separated by a colon, and surrounded by curly braces.

Note: If the value is multiple words, put quotes around the value.

Example:

P

{

font-family: ―sans

serif‖

}


Example:

P

{

Text-align: center;

Color: black;

Font-family: arial

}

Note: If you want to specify more than one property , you must separate each property with a

semicolon.

Grouping: we can group selectors. Separate each selector with a comma. In the example below

we have grouped all the header elements. All header elements will be displayed in green text color.

Example:

h1, h2, h3, h4, h5, h6

{

Color: green

}

The class selector: With the class selector we can define different styles for the same type of

HTML element. Say that we would like to have two types of paragraphs in your document: one

right-aligned paragraph, and one center-aligned paragraph.

Example: p.right { text-align: right }

p.Center { text-align : center }

We have to use the class attribute in your HTML document:

<p class=―right‖> This paragraph will be right-aligned.</p>

<p class=―center‖> This paragraph will be center-aligned. </p>

Types of style sheets:

1. External style sheet

2. Internal style sheet or Embedded style sheet

3. Inline style sheet.

1. External style sheet: An external style sheet is ideal when the style is applied to many pages.

With an external style sheet, we can change the look of an entire web site by changing one file.

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>

An external style sheet can be written in any text editor. The file should not contain any HTML

tags. Your style sheet should be saved with a a.css extension.

Example:

hr { color: sienna }

P { margin-left : 20px }

Body { background-image : url(―images/back40.jpg‖) }

2. Internal style sheet or Embedded style sheet:

An internal style sheet should be used when a single document has a unique style. We can define

internal style sheet in the head section of an HTML page, by using <style> tag.

Example:

<head>

<style type=―text/css‖>

Hr { color : sienna }

P { margin-left :20px }

Body { background-image:url(images/back40.jpg‖ ) }

</style>

</head>

3. Inline style sheet: The STYLE attribute is used to configure style information specific to

single element within a web page.

Example:<p style=―color :sienna; margin-left:20px‖> This is a paragraph </p>

When all the types of style sheets are used in a file the highest preference is given to inline style

sheet, then internal style sheet and the last preference is given to external style sheet.

Example21:

External CSS File. To save this file as one.css

Body{background-color:lightblue;}

h2{text-align:center; color:blue; font-family:"verdana"}

p { font-family:"sans serif"; color:red;}

<html>

<head>

<link rel="stylesheet" type="text/css" href="one.css">

<style type="text/css">


h1 { color :sienna}

p { margin-left:20px}

body {background-image:url("D:\UCET ADS III CSE I Sem (13-14)\III B.Tech -

IISEM\WT\s.jpg")}

</style>

</head>

<body>

<h1 style="margin-right:50px;text-decoration:underline; font-family:times"> This is inline

CSS</h1>

<h2>This is a new header</h2><hr>

<p>See the effects of internal CSS here</p>

</body>

</html>

Document Object Model (DOM) Introduction

The Document Object Model (DOM) is a programming API for HTML and XML documents. It

defines the logical structure of documents and the way a document is accessed and manipulated.

What the Document Object Model is

The Document Object Model is a programming API for documents. The object model itself closely

resembles the structure of the documents it models. For instance, consider this table, taken from an

HTML document:

<TABLE>

<ROWS>

<TR>

<TD>Shady Grove</TD>

<TD>Aeolian</TD>

</TR>

<TR>

<TD>Over the River, Charlie</TD>

<TD>Dorian</TD>

</TR>

</ROWS>

</TABLE>


The Document Object Model represents this table like this:

Document Object model and collections

It consists of

1. Object referencing

2. Collections-all and children

3. Dynamic positioning

4. Using frame collection

1. Object referencing

An element can be referred by using its ID attribute. Each element in the web page is an object and

its attribute becomes properties, which can be manipulated by scripting.

Example:

<form id=‖f1‖ name=form1 method=‖get/post‖ action=www.gmail.com>

Here form is treated as object and ―f1’ is the id of the form object that is used for reference.

2. Collections-all and children

Collections are basically an array of objects on the web page. There are several collections in the

object model, like all, children, form, images etc.

All: The DHTML object model includes a special collection called ―all‖. It is the collection of all

the HTML elements in a document, in order which they appear.

<html>

<head>

<title>Object model</title>

<script type=‖text/javascript‖>

<!—

Var elements=‖ ‖;

Function start( )

{

http://www.gmail.com/


For(var loop=0; loop<document.all.length; ++loop)

Elements + = ―<br>‖ + document.all[loop].tagName’

pText.innerHTML+= elements;

alert(elements);

}

//-->

</script>

</head>

<body onload=‖start ( )‖>

<p id =‖pText‖> Elements on this web page:</p>

</body>

</html>

Children: It is similar to ―all‖ collection except for which a specific elements contains the

elements child element.

3. Dynamic Positioning

HTML elements on the web pages can be positioned dynamically by using script. To achieve this,

the CSS position property of the HTML element should to declared either absolute or relative and

then moving the element by manipulating any of the top, left, right and bottom CSS properties.

The ability for whole parts of a webpage-text and graphics-to move around the

screen, disappear and reappear at will.

Example:

<p>

<strong> This is the first sentence

<span style=‖position:absolute;‖>

<font color=‖red‖>Layer Text</font>

</span>

This is the second sentence

</strong>

</p>

4. Using the frame collection

Dividing a web page into number of independent regions is called frame. In each frame we can

open different HTML files; two or more files can be seen in the browser simultaneously. We can

make hyperlinks in between the html files existing on different frames. The main benefit of this

approach is navigation. The contents of one frame can be manipulated, or linked to the contents of

another.

Index.html

<html>

<head>

<title>Frames Collection</title>

</head>

<frameset rows="100, *">

<frame src="top.html" name="upper"/>

<frame src=" " name="lower"/>

</frameset>

</html>

Top.html

<html>

<head>

<title>The frames collections</title>

<script type="text/javascript">



</script>

</head>

<body onload="start( )">

<h1> Cross-frame scripting!</h1>

</body>

</html>


Difference between src and href

src is used to add that resource to the webpage. href is used to link to a particular resource from

that webpage.

Event Model

Events are actions that can be detected by java script. By using java script, we have the ability to

create dynamic web pages. Every element on a web page has certain events which can trigger a

java script. When the page loads, it is called an event. When the user clicks a button, that click too

is an event. Other examples include events like pressing any key, closing a window, resizing a

window, etc.

Common Events HTML

Here is a list of some common HTML events:

Event Description

OnChange An HTML element has been changed

OnClick The user clicks an HTML element

OnMouseOver The user moves the mouse over an HTML element

OnMouseOut The user moves the mouse away from an HTML element

OnMouseDown Occurs when the mouse button goes down

OnMouseMove Occurs when the mouse moves

OnKeyDown The user pushes a keyboard key

OnLoad The browser has finished loading the page

OnAbort This will occur when an action is aborted

OnMove Occurs when the mouse moves

OnReset Occurs when the user click on the Reset button

OnSubmit Occurs when the user click the submit button

OnUnload Occurs when a page is unloaded

OnKeyPress Occurs when a key is pressed and the key code is available

OnError Occurs when there is a java script error

Example of OnClick

<html>

<body>

<p>Click the button </p>

<button onclick="displayDate()">The time:</button>

<script>

function displayDate()

{


document.getElementById("demo").innerHTML = Date();

}

</script>

<p id="demo"></p>

</body>

</html>

Example of OnMouseOver

<html>

<head>

</title>mouse</title>

</head>

<body>

<center>

[<a href="/" onMouseOver="document.bgColor='blue' ">Blue</a>]

[<a href="/" onMouseOver="document.bgColor='Red' ">Red</a>]

</center>

</body>

</html

Example of OnError

<html>

<body>

<img src="image.gif" onerror="myFunction()">

<p>Image that does not exist, therefore the onerror event occurs.</p>

<script>

function myFunction()

{

alert('The image could not be loaded.');

}

</script>

</body>

</html>


XML: basics of XML

XML describes and focuses on the data while HTML only displays and focuses on how data looks.

HTML is all about displaying information but XML is all about describing information. The tags used

to mark up HTML documents and the structure of HTML documents are predefined. The author of

HTML documents can only use tags that are defined in the HTML standard.

XML stands for eXtensible Markup Language. XML is designed to transport

and store data. XML is important to know, and very easy to learn.

The World Wide Web consortium (W3C) begins their work on XML, It is

another Meta markup language. The first XML version 1.0, published in 1998. The difference

between XML and HTML is HTML is a markup language where as XML is a markup language

used to create new mark up languages. HTML limits you to use only fixed number of tags, where

as XML allows to create new tags. For example, you are developing website for a college, then you

have tags like <SNO>, <STUDENTNAME>, <DOB> etc. HTML, XML languages are derived

from Standard Generalized Markup Language (SGML).

2.1.1 Use of XML

Simplifies the data exchange procedure

Easy to organize the document

Tags or document elements are reusable

XML provides consistency in display of information

2.1.2 Applications of XML

Electronic Commerce (popularly known as E-Commerce)

Financial Funds Transfer

Multimedia Messages and Messaging exchange

Better environment for data transfer

Configuration of files, used in J2EE environment.

The XML document is language neutral. That means a Java program can generate an XML

document and this document can be parsed by Perl.

XML files are independent of an operating system.


2.1.3 Differences between XML and HTML

XML HTML

User defined tags Predefined tags

User has control on tags As predefined, no such control

XML separates content from presentation. HTML specifies presentation

XML allows any kind of tag names

like <UNAME>…</UNAME>

HTML defines set of legal tags

XML based on SGML HTML based on SGML

XML allows users to create new tags HTML doesn't allow users to create

new tags

Self describing data can be possible No possibility

You can generate new mark up

languages using XML

No such possibility

XML is case sensitive HTML is not case sensitive

Root element is user defined and only

one root element allowed.

Root element is <HTML>

2.1.4 XML Features

XML allows the user to define his own tags and his own document structure.

XML document is pure information wrapped in XML tags.

XML is a text based language, plain text files can be used to share data.

XML provides a software and hardware independent way of sharing data.

2.1.5 Simple XML Document

XML tags and attributes depend on the user. XML declaration always starts with xml key word.

<?xml version = ―1.0‖?> Here you can give version along with the xml key word. Version is

attribute and value 1.0 indicates that xml 1.0 version you are using. First declaration tag starts with

left angular bracket along with question mark (<?), ending with question mark followed by the

right angular bracket (?>).

Second statement is comment and then we start with actual xml program. First element <Student>

called as root element. A root element contains other sub elements. Here we used <name> as sub

element and it is also known container element, because it contains other sub elements

<firstname>, <lastname>. Sub element is also called as children.


Example

<? xml version = ―1.0‖ ?>

<!- - student first name and last name - - >

<student >

<name>

<firstname>Ramesh Babu</firstname>

<lastname>Sripathi</lastname>

</name>

<name>

<firstname>Suresh</firstname>

<lastname>Vanesh</lastname>

</name>

</student >

The filename extension used for xml program is .xml. The name of above program is one.xml.

<? xml version=”1.0” encoding =”utf-8”?>

utf stands for universal transformation format (UCS)(universal character set). The number 8 or 16

refers to the number of bits used to represent a character. There are either 8(one byte) or 16(two

bytes). Utf-8 is set by default.


2.1.6 Elements and Attributes:

In XML the basic entity is element, the elements are used for defining the tags. The elements

typically consist of opening and closing tag. Mostly only one element is used to define a single tag.

The syntax of writing any element for opening tag is <element name>

The syntax of writing any closing element for closing tag is </element name>

An empty tag can be defined by putting a / (forward slash) before closing bracket.

A space or a tab character is not allowed in the element name or in attribute name.

2.1.7 Namespace in XML

Sometime we need to create two different elements by the same name. The xml document allows

us to create different elements which are having the common name. This technique is known as

namespace. In some web documents it becomes necessary to have the same name for two different

elements. Here different elements mean the elements which are intended for different purposes.

Example

<File>

<text fname="photo1.jpg">

<describe> It is a jpg file </describe>

</text>

<text fname="photo2.bmp">

<describe> It is a bmp file </describe>

</text>

</File>


DOCUMENT TYPE DEFINITION (DTD)

The document type definition used to define the basic building block of any xml document. Using

DTD we can specify the various elements types, attributes and their relationship with one another.

Basically DTD is used to specify the set of rules for structuring data in any XML file.

What is a DTD?

A DTD is a Document Type Definition. A DTD defines the structure and the legal elements and

attributes of an XML document.

Why Use a DTD?

With a DTD, independent groups of people can agree on a standard DTD for interchanging data.

An application can use a DTD to verify that XML data is valid.

3.2.1 Types of DTD

1. Internal DTD

2. External DTD

3.2.1.1 Internal DTD

An Internal DTD Declaration

If the DTD is declared inside the XML file, it must be wrapped inside the <! DOCTYPE>

definition:

XML document with an internal DTD

<?xml version="1.0"?>

<!DOCTYPE note [

<!ELEMENT note (to, from, heading, body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

]>

<note>

<to>Hari</to>

<from>Ravi</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend</body>

</note>


The DTD above is interpreted like this:

!DOCTYPE note defines that the root element of this document is note

!ELEMENT note defines that the note element must contain four elements:

"to,from,heading,body"

!ELEMENT to defines the to element to be of type "#PCDATA"

!ELEMENT from defines the from element to be of type "#PCDATA"

!ELEMENT heading defines the heading element to be of type "#PCDATA"

!ELEMENT body defines the body element to be of type "#PCDATA"

3.2.1.2 External DTD

An External DTD Declaration

If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a reference to

the DTD file:

XML document with a reference to an external DTD


<!DOCTYPE note SYSTEM "note.dtd">

<note>

<to>Hari</to>

<from>Ravi</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

And here is the file "note.dtd", which contains the DTD:

<! ELEMENT note (to, from, heading, body)>

<! ELEMENT to (#PCDATA)>

<! ELEMENT from (#PCDATA)>

<! ELEMENT heading (#PCDATA)>

<! ELEMENT body (#PCDATA)>


DTD –XML Building blocks

The Building Blocks of XML Documents

Seen from a DTD point of view, all XML documents are made up by the following building

blocks:

1. Elements

2. Attributes

3. Entities

4. PCDATA

5. CDATA

1. Elements

Elements are the main building blocks of both XML and HTML documents. Examples of HTML

elements are "body" and "table". Examples of XML elements could be "note" and "message".

Elements can contain text, other elements, or be empty. Examples of empty HTML elements are

"hr", "br" and "img".

Examples:

2. Attributes

Attributes provide extra information about elements. Attributes are always placed inside the

opening tag of an element. Attributes always come in name/value pairs. The following "img"

element has additional information about a source file:

The name of the element is "img". The name of the attribute is "src". The value

of the attribute is "computer.gif". Since the element itself is empty it is closed by a " /".

3. Entities

Some characters have a special meaning in XML, like the less than sign (<) that defines the start of

an XML tag.

Most of you know the HTML entity: " ". This "no-breaking-space" entity is used

in HTML to insert an extra space in a document. Entities are expanded when a document is parsed

by an XML parser.


The following entities are predefined in XML:

Entity References Character

< <

> >

& &

" "

' '

Example:

DTD Example:

<! ENTITY writer ―duck‖>

<! ENTITY copyright ―wblog‖>

XML Example:

<author> &writer;&copyright; </author>

4. PCDATA

PCDATA means parsed character data. Think of character data as the text found between the start

tag and the end tag of an XML element.

PCDATA is text that WILL be parsed by a parser. The text will be examined by the

parser for entities and markup.

Tags inside the text will be treated as markup and entities will be expanded. However,

parsed character data should not contain any &, <, or > characters; these need to be represented by

the & < and > entities, respectively.

<! ELEMENT student (name)*>

Here * indicates zero or more occurrences. Other characters are

+ indicates 1, 2,…n

? Indicate 0 or 1

Default exactly once

5. CDATA

CDATA means character data. CDATA is text that will NOT be parsed by a parser. Tags inside

the text will NOT be treated as markup and entities will not be expanded.

In a DTD, elements are declared with an ELEMENT declaration.

a) Declaring Elements

In a DTD, XML elements are declared with the following syntax:


b) Empty Elements

Empty elements are declared with the category keyword EMPTY:

c) Elements with Parsed Character Data

Elements with only parsed character data are declared with #PCDATA inside parentheses:

d) Elements with any Contents

Elements declared with the category keyword ANY, can contain any combination of parsable data:

e) Elements with Children (sequences)

Elements with one or more children are declared with the name of the children elements inside

parentheses:


When children are declared in a sequence separated by commas, the children must appear in the

same sequence in the document. The full declaration of the "note" element is:

f) Declaring Only One Occurrence of an Element

The example above declares that the child element "message" must occur once, and only once

inside the "note" element.

g) Declaring Minimum One Occurrence of an Element

The + sign in the example above declares that the child element "message" must occur one or more

times inside the "note" element.


h) Declaring Zero or More Occurrences of an Element

The * sign in the example above declares that the child element "message" can occur zero or more

times inside the "note" element.

i) Declaring Zero or One Occurrences of an Element

The ? sign in the example above declares that the child element "message" can occur zero or one

time inside the "note" element.

XML SCHEMAS

XML schema is an XML alternative to DTD. The XML schemas are used to represent the structure

of XML document. XML schema language is also referred to as XML schema definition. The

XML schema language is called as XML Schema Definition (XSD) language. XML schemas are

written in XML. XML schema support data types. XML schema supports namespaces.

3.3.1 Xml Schema Definition

The <schema> element is the root element of every XML schema. <schema> element may

contains some attributes.

<?xml version = "1.0"?>

<xs:schema>

--------------

<xs:schema>

XSD elements are two types.

1. Simple element

2. Complex element

Simple element is an XML element that can contain only text. It can’t contain any other elements

or attributes.


Syntax:

<xs:element name=‖aaa‖ type=‖bbb‖/>

Example:

XML Schema [StudentSchema.xsd]


<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="Student">

<xs:complexType>

<xs:sequence>

<xs:element name="name" type="xs:string"/>

<xs:element name="address" type="xs:string"/>

<xs:element name="std" type="xs:string"/>

<xs:element name="marks" type="xs:string"/>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

The xs is qualifier used to identify the schema elements and types. The document element of

schema is xs:schema. The xs:schema is root element. It takes the attribute xmlns:xs which has the

value http://www.w3.org/2001/XMLSchema. This declaration indicates that document should

follow the rules of XML Schema. Then comes xs:element which is used to define the xml element.

In above case the element Student is of complex type who have four child elements: name, address,

std and marks. All these elements are of simple type string.

XML Document [examp.xml]


<Student xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="StudentSchema.xsd">

<name>Vandana</name>

<address>VZM</address>

<std> First </std>

<marks> 80 percent </marks>

</Student>

http://www.w3.org/2001/XMLSchema


3.3.2 XML Data Types

Various data types are

String, Date, Numeric, Boolean

xs:string It containing group of characters, lines, tabs or white spaces.

xs:date Used to represent date. The format of this date is yyyy-mm-dd

xs:time use to represent time. The format of this time is hh:mm:ss

xs:decimal use to represent float values.

xs:integer use to represent integer values.

xs:boolean used to resent Boolean values either true or false.

3.3.3 Presenting XML

3.3.3.1 XSL

XSL is a language capable of transforming as well as formatting given XML document. XSL

means eXtensible Stylesheet Language

3.3.3.2 Working of XSL

1. Start with a raw XML document (create a xml file)

2. Create an XSL style sheet (create a xsl file)

3. Link the XSL style sheet to the XML document


4. Use XSLT the browser to transform your XML into XHTML

Example

First create .xml file [demo.xml]

<?xml-stylesheet type="text/xsl" href="demo1.xsl" ?>

<menu>

<dvd>

<name>Ramesh Babu</name>

<Actor>Chiru</Actor>

<Place>Landon</Place>

<amount>$100</amount>

</dvd>

<dvd>

<name>Srinu Babu</name>

<Actor>Pavan</Actor>

<Place>America</Place>

<amount>$200</amount>

</dvd>

</menu>

Next create .xsl file [demo1.xsl]


<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<table border="1">

<tr>

<th>Name</th>

<th>Actor</th>

</tr>

<xsl:for-each select="menu/dvd">

<tr>

<td><xsl:value-of select="name"/>

</td>


<td><xsl:value-of select="Actor"/>

</td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

3.3.3.3 XML with CSS

Example: [sampcss.xml]


<?xml-stylesheet type="text/css" href="student.css" ?>

<Class>

<Student>

<rno>121</rno>

<name>Sridhar</name>

<branch>CSE</branch>

<marks>60</marks>

</Student>

<Student>

<rno>131</rno>

<name>Siva Rajani</name>

<branch>IT</branch>

<marks>70</marks>

</Student>


<Student>

<rno>141</rno>

<name>Shurith</name>

<branch>ECE</branch>

<marks>80</marks>

</Student>

<Student>

<rno>151</rno>

<name>Ramesh</name>

<branch>EEE</branch>

<marks>90</marks>

</Student>

<Student>

<rno>161</rno>

<name>Vandana</name>

<branch>ME</branch>

<marks>40</marks>

</Student>

<Student>

<rno>171</rno>

<name>Babu</name>

<branch>MCA</branch>

<marks>50</marks>

</Student>

</Class>

CSS file [student.css]

Class

{

font-family:Times New Roman;

Color:red;

font-size=16pt;

}

Student

{


display:block;

font-family:arial;

color:blue;

font-size:14pt;

}

rno

{

font-family:arial;

color:green;

font-size:12pt;

}

name

{

font-family:arial;

color:magenta;

}

branch,marks

{

font-family:arial;

color:black;

font-size:10pt;

margin-left:20pt;

}


XML vocabularies

XML allows authors to create their own tags to describe data precisely. People and organizations

in various fields of study have created many different kinds of XML for structuring data. Some of

these markup languages are: MathML (Mathematical Markup Language), Scalable Vector

Graphics (SVG), Wireless Markup Language (WML), Extensible Business Reporting

Language (XBRL), Extensible User Interface Language (XUL) and Product Data Markup

Language (PDML). Two other examples of XML vocabularies are W3C XML Schema and the

Extensible Stylesheet Language (XSL).

15.7.1 MathML™

Until recently, computers typically required specialized software packages such as TeX and LaTeX

for displaying complex mathematical expressions. This section introduces MathML, which the

W3C developed for describing mathematical notations and expressions. The Firefox and Opera

browsers can render MathML. There are also plug-ins or extensions available that enable you to

render MathML in other browsers.

MathML markup describes mathematical expressions for display.MathML is

divided into two types of markup—content markup and presentation markup. Content markup

provides tags that embody mathematical concepts. Content MathML allows programmers to write

mathematical notation specific to different areas of mathematics. For instance, the multiplication

symbol has one meaning in set theory and another in linear algebra. Content MathML distinguishes

between different uses of the same symbol. Programmers can take contentMathML markup,

discern mathematical context and evaluate the marked-up mathematical operations. Presentation

MathML is directed toward formatting and displaying mathematical notation. We focus on

Presentation MathML in the MathML examples.

Simple Equation in MathML

Figure : uses MathML to mark up a simple expression. For this example, we show the expression

rendered in Firefox.


Algebraic Equation in MathML

Let’s consider using MathML to mark up an algebraic equation containing exponents and

arithmetic operators (Fig. 15.15). For this example, we again show the expression rendered in

Firefox.


15.7.2 Other Markup Languages

Literally hundreds of markup languages derive from XML. Every day developers find new uses for

XML. Figure 15.18 summarizes a few of these markup languages. The website www.service-

architecture.com/xml/articles/index.html provides a nice list of common XML vocabularies and

descriptions.


Web Servers: IIS, Apache, & WAMP Servers.

INTRODUCTION TO WEBSERVERS

Programs are two types

1. Client Side Programs

2. Server Side Programs

Client side programs are applets or some script programs

Server side programs are servlets or jsp and database

The client and the server must follow the steps communication according to HTTP (Hyper Text

Transport Protocol)

1. The client must establish a connection with the server

2. The client must send a request to a server

3. The server must process the request

4. The server must send a response to the client

For many WEB applications server side processing is necessary. i.e., whenever a WEB Browser

sends the data to a WEB Server the WEB Server forwards the same to a program on the server

which is referred as ServerSide Program. The ServerSide Program receives the data from the WEB

Server, process the data and returns the output back to the WEB Server which will be given to the

WEB Browser. The WEB Browser receives the data and presents the data on the document. These

ServerSide Programs can be written in any language such as C, C++, UNIX Shell programming,

perl, Servlets etc., and the current technologies the ServerSide Programs are designed using

ASP,JSP etc.,

5.1.1 Web Servers

The Examples of web browsers are Internet Explorer, Mozilla Firefox and Netscape Navigator,

Camino etc. Several popular Web servers and application servers include the Sun Java System


Application Server, Microsoft’s Internet Information Service(IIS), the Apache HTTP Server,

BEA’s Web Logic application server , the World Wide Web Consortium’s Jigsaw Web server,

Google GWS (Google Web Server) or Microsoft’s Personal Web Server (PWS), Apache web

server which is an open source project. This web server can be freely downloaded from the net.

The following are the famous WEB servers:

IIS (Internet Information Server)

PWS (Personal WEB Server)

Apache

Tomcat

Java Web Server

J2EE

Weblogic

Websphere

JRun

JBoss.

INSTALLATION OF JDK

For running any JAVA program what we require is JDK is provided by Sun Inc. And it can be

downloaded from the web site http://www.java.sun.com/j2se and you can download the JDK on

your machine. After downloading J2SE files on your machine you can install jdk using following

steps-

Step 1: Double click on file downloaded option.

And you will get the license agreement window as shown below.

Step 2: Click Accept Then step screen will appear as follows


Step 3: Then Click Next to proceed Then After installing the JDK further the java runtime

environment (JRE) will get downloaded. Hence the following screen appears as follows:

Step 4: Then Click Next button Java Runtime Environment loaded in local drive. When the

installation will be completed following screen will appear showing the installation success


Step 5: Then set the environment variables after installing the tomcat server installation.

SETTING UP THE APACHE TOMAT SERVER

Tomcat is a fully functional implementation of servlets and Java Server Pages (JSP). It includes a

Web Server, so it can be used as a standalone test container for servlets and JSPs. Tomcat can also

be specified as the a handler for JSP and servlet requests received by popular Web servers such as

the Apache Software Foundations Apache HTTP server or Microsoft’s Internet Information

Services (IIS). Tomcat is also integrated into the Java 2 Enterprise Edition reference

implementation from Sun Microsystems. Following are the steps below to install Tomcat:

1. Download apache-tomcat-5.5.16.zip or Jakarta-tomcat-5.0.25.zip (or the version appropriate for

your system) to your hard disk.

2. Use a file extractor tool (such as winzip) to extract the content of apachetomcat-

5.5.16.zip or Jakarta-tomcat-5.0.25.zip to the c:\ drive. This will create a directory named Tomcat

5.5 or Jakarta-tomcat-5.0.25.

Step 1:


Step 2:


Step 3:

Step 4:


Step 5:

Step 6:


Step 7:

Step 8:


For Tomcat to work correctly, you must define environment variables JAVA_HOME and

CATALINA_HOME should point to directory containing your java installation (ours is

C:\Program Files\Java\jdk1.5.0), and CATALINA_HOME should point to the directory that

contain Tomcat (ours is C:\Program Files\Apache Software Foundation\Tomcat 5.5). To define

these variables on windows,

1. Right click on the My Computer icon on your desktop and select Properties from the menu.

The System Properties dialog appears.

2. Select the Advanced tab at the top of the System Properties dialog. Click the Environment

Variables button to display the Environment Variables dialog.


3. Click the New button under the User variables box. This will cause the Edit User Variable

dialog to appear.

4. Enter JAVA_HOME for variable name and C:\Program Files\Java\jdk1.5.0_05 for Variable

value. Click the OK button to complete the setting of the JAVA_HOME variable. This will

return to the Environment Variable dialog.

5. Click the New button under the User Variable box. This will cause the Edit User variable

dialog to appear.


6. Enter CATALINA_HOME for variable name and C:\Program Files\Apache Software

Foundation\Tomcat 5.5 for Variable value. Click the OK button to complete the setting of

the CATALINA_HOME variable. This will return to the Environment Variables dialog.

7. Click the OK buttons to close the Environment Variables and System Properties dialogs.

After setting the environment variables, you can start the Tomcat Server. In this directory are

the file tomcat5 service runner copies into desktop. Run the tomcat5 service runner.

To verify that Tomcat is executing and can respond to requests, open your Web browser and enter

the URL http://localhost:8080/. This should display the Tomcat documentation home page.


The localhost indicates to the web browser that is should request the home page from the Tomcat

Server on the local computer.

Testing Apache

To make sure everything installed correctly we will now test Apache to ensure it is working

properly.

1. Open up any web browser and then enter the following into the web address:

http://localhost/


SETTING UP THE WAMP SERVER

While much of the web relies on a Linux, Apache, MySQL, PHP stack, or LAMP, to power

applications and dynamic websites, not everyone codes in a Linux environment.

Those who prefer Windows can still replicate how their code will work by using WAMP to

replicate a live web environment right on their own computer with the only difference being

substituting the Linux operating system in the stack for Windows.

Obtain a copy of WAMP Before you do anything you need to download WAMP from

http://www.wampserver.com/en/download.php. You will have the option to choose wither a 32 or

64-bit environment depending upon your computer’s configuration. In addition to Apache, PHP

and MySQL this download includes phpMyAdmin and SQLBuddy to better help you manage your

databases through web based GUI rather than having to use a terminal interface.

Install the software Once you have downloaded and uncompressed your WAMP executable you will need to go ahead

and launch it to start the installation process.

When you click next you will be asked to accept the license agreement. Since it is a GPL license

you are free to do just about anything with it so you can go ahead and accept.

The next step requires you to select the folder where you would like to install your

WAMP server. The default will be c:\wamp however you can change this to install the server into

any directory or partition you choose.

http://www.wampserver.com/en/download.php

http://www.developerdrive.com/wp-content/uploads/2011/07/Installing-WAMP-11-e1315266634373.png


Chose where to install the software

After you choose your directory you will have the option to setup icons. Once you decide on this

click Next and then confirm the installation settings again by clicking Install. Once the installation

runs its course you will be asked to choose your default browser. Internet Explorer is the default

choice but you can navigate your way to any other browser of your choosing.

The next decision you will have to make is to set the PHP mail parameters. Many people

leave this set to the defaults when setting up a testing server on their local computer. If you wish to

configure it to connect to your SMTP server you may do so here but unless you plan on testing

email capabilities the default entries can be left and all you need to do is click Next.

Setting the SMTP server (optional)

Congratulations, WAMP is now installed on your local computer.

http://www.developerdrive.com/wp-content/uploads/2011/07/WAMP-Installation-2-e1315266756936.png

http://www.developerdrive.com/wp-content/uploads/2011/07/Installing-WAMP-3-e1315268470597.png


Testing the installation

Now that everything has been installed let’s test everything out. Using one of the icons you

created, or Start –> All Programs –> WampServer –> start WampServer, you can launch the

management console. Once opened, it will appear in the lower right hand corner of your screen.

The WAMP management console

If WAMP is not started go ahead and click Start All Services. If you are not sure whether or not

WAMP is running, look for the small green W icon in your toolbar. If it is red, WAMP services are

stopped, green means everything is running while orange means some services are running.

Now we want to test to see if everything was installed correctly. In the WAMP management

console, click on Localhost. If you see the following screen pop up in your browser then

everything is working!

http://www.developerdrive.com/wp-content/uploads/2011/07/WAMP-Management-5.png


WAMP services are running

SETTING UP THE IIS SERVER

First, download Windows server from the URL - https://msdn.microsoft.com/en-

us/windowsserver2012r2.aspx and try it for 120 days.

Once installed, the following steps need to be carried out for installing IIS.

https://msdn.microsoft.com/en-us/windowsserver2012r2.aspx

https://msdn.microsoft.com/en-us/windowsserver2012r2.aspx

http://www.developerdrive.com/wp-content/uploads/2011/07/WAMP-local-host-6-e1315353010953.png

https://www.guru99.com/images/asp-net/061516_1014_Deployingaw2.png


Step 1) On Windows Server 2012, the default dashboard is shown as below.

The first step is to click on the 'Add roles and features' on the dashboard.

This allows one to install additional features on a server.

Step 2) On the next screen, you need to click the Next button to proceed.



Step 3) In the next step, we need to perform two substeps

1. The first is to choose the Role-based or feature installation. This will allow us to perform

the IIS Installation.

2. Click the 'Next' button to proceed.



Step 4) In the next screen, you will see the name of the server on which the installation is taking

place. Click the Next button to proceed.



Step 5) In the next step, we need to perform two substeps

1. Choose the Web server option. This will ensure that IIS gets installed.

2. Click the 'Next' button to proceed.



Step 6) In the subsequent screen, click the next button to proceed.



Step 7) In the final screen, click the Install button to begin the installation.



Once IIS has been installed, you can launch it, by going to search in Windows 2012.

1. Enter the string 'inetmgr' which is the command for IIS.

2. Then Internet Information Services Manager will come up. Click on this.

After you click on the above link, IIS will open, and you will be presented with the below screen.




In IIS, you will have an initial site set up called Default Web Site.

If you open up your browser and go to the URL http://localhost. You will see the below output.

This URL mainly goes to the Default Web site shown in the previous screen. This is the default

page which indicates that the IIS Server is up and running.




How to Deploy Website in IIS via File copy

After developing a web application, the next important step is to deploy the web application. The

web application needs to be deployed so that it can be accessed by other users. The deployment is

done to an IIS Web server.

There are various ways to deploy a web application. Let's look at the first method which is the File

copy.

We use the web application created in the earlier sections. Let's follow the below-mentioned steps

to achieve this.

Step 1) Let's first ensure we have our web application 'DemoApplication' open in Visual Studio.

Step 2) Open the 'Demo.aspx' file and enter the string "Guru 99 ASP.Net."




<!DOCTYPE html>

<html xmlns="http://www.w3.ore/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server‖>

<div>

Guru 99 ASP.Net

</div>

</form>

</body>

</html>

Now just run the application in Visual Studio to make sure it works.

Output:-

The text 'Guru 99 ASP.Net' is displayed. You should get the above output in the browser.

Step 3) Now it's time to publish the solution.

1. Right-click the 'DemoApplication' in the Solution Explorer

2. Choose the 'Publish' Option from the context menu.



It will open another screen (see step below).

Step 4) In the next step, choose the 'New Profile' to create a new Publish profile. The publish

profile will have the settings for publishing the web application via File copy.

Step 5) In the next screen we have to provide the details of the profile.

1. Give a name for the profile such as FileCopy

2. Click the OK button to create the profile




Step 6) In this step, we specifically mention that we are going to Publish website via File copy.

1. Choose the Publish method as File System.

2. Enter the target location as C:\inetpub\wwwroot – This is the standard file location for the

Default Web site in IIS.

3. Click 'Next' button to proceed.



Step 7) In the next screen, click the Next button to proceed.



Step 8) Click the 'Publish' button in the final screen



When all of the above steps are executed, you will get the following output in Visual Studio

Output:-




From the output, you will see that the Publish succeeded.

Now just open the browser and go to the URL – http://localhost/Demo.aspx

You can see from the output that now when you browse to http://localhost/Demo.aspx , the page

appears. It also displays the text 'Guru 99 ASP.Net'.

How to Publish ASP.NET Website

Another method to deploy the web application is via publishing a website. The key difference in

this method is that

You have more control over the deployment.

You can specify to which Web site you want to deploy your application to.

For example, suppose if you had two websites WebSiteA and WebSiteB. If you use the

Web publish method, you can publish your application to any website. Also, you don't need

to know the physical path of the Web site.

In the FileCopy method, you have to know the physical path of the website.

Let's use the same Demo Application and see how we can publish using the "website publish

method."

Step 1) In this step,

1. Right-click the 'DemoApplication' in the Solution Explorer

2. Choose the Publish Option from the context menu.



Step 2) On the next screen, select the 'New Profile' option to create a new Publish profile. The

publish profile will have the settings for publishing the web application via Web Deploy.

Step 3) In the next screen we have to provide the details of the profile.

1. Give a name for the profile such as 'WebPublish'

2. Click the 'OK' button to create the profile




Step 4) In the next screen, you need to give all the details for the publish process

1. Choose the Publish method as Web Deploy

2. Select the server as Localhost

3. Enter the site name as Default Website – Remember that this is the name of the website in

IIS

4. Enter the destination URL as http://localhost

5. Finally, click the Next button to proceed



Step 5) Click the 'Next' button on the following screen to continue



Step 6) Finally, click the Publish button to publish the Website



When all of the above steps are executed, you will get the following output in Visual Studio.

Output:-




From the output, you will see that the Publish succeeded.

Now just open the browser and go to the URL – http://localhost/Demo.aspx

You can see from the output that now when you browse to http://localhost/Demo.aspx , the page

appears. It also displays the text Guru 99 ASP.Net.
