Class No.

Web Technology
Batches:

M.Tech. 2nd Semester

B.Tech 6th Semester

B.Tech. 8th Semester

MCA 4th Semester

B.Tech. Electronics 8th Semester

Mr. Debojit Boro

Assistant Professor,Tezpur University,Napaam,Tezpur-784028
Topics for today

 Multi Tier Software Architecture

 Web Architecture and Web Content

 Mark Up Languages

 SGML

 HTML
Mr. Debojit Boro
Assistant Professor,Tezpur University,Napaam,Tezpur-784028
Multi-Tier Architecture
A client server architecture in which the presentation, the
application processing and data management are logically
separate process

E.g. application using middleware to service data request between

the user and the database

user interface, functional process logic ("business rules"),

computer data storage and data access are developed and
maintained as independent modules, most often on
separate platforms

Note* - We ‘ll restrict here the multi-tier to 3 tier only

Advantages
 Modular software with well defined interfaces
 Allows any of the three tier to be upgraded or replaced independently as
per the requirements or the technology change

The 3 tier architecture has following three tiers:-

 Presentation tier
 This is the topmost level of the application. The presentation tier
displays information related to such services as browsing
merchandise, purchasing, and shopping cart contents. It
communicates with other tiers by outputting results to the
browser/client tier and all other tiers in the network.
 Application tier (Business Logic/Logic Tier/Data Access Tier/Middle Tier)
 The logic tier is pulled out from the presentation tier and, as its own
layer, it controls an application’s functionality by performing detailed
processing.
 Data tier
 This tier consists of Database Servers. Here information is stored and
retrieved. This tier keeps data neutral and independent from
application servers or business logic. Giving data its own tier also
improves scalability and performance.
Three tier Architecture
WEB ARCHITECTURE
Web Clients, Servers, Authoring
Tools
 Browsers:
 Internet Explorer
 Netscape Navigator
 Mozilla
 Servers
 Apache
 Internet Information Server
 Personal Web Server
 Web Authoring Tools
 Any ASCII editor: edit, vim etc.
 Netscape Composer
 MSWORD
 FrontPage
Web programming
 Client Side
 JavaScript, Visual Basic
 Java Applet (in Java)
 Server Side
 Server Side Includes (SSI)
 Common Gateway Interface (CGI)
 May be written in C, perl etc.
 Java Servlet (in Java)
 HyperText Preprocessor (PHP)
 Active Server Page (ASP)
 Java Server Page (JSP)
Web Content

 Now the issue is how to encode web content for

presentation and for processing
 Programming languages are used to encode logic of
processing data
 Markup languages are used for encoding data for
presentation and processing
Markup Languages
 Mark up means some kind of encoding
 When we give a manuscript for typesetting in a
press, the instructions to type setter, written on the
margins, are markups
 A Markup Language(ML) is a formal mechanism
for encoding data for electronic interpretation and
presentation.
Markup Languages :
 Procedural ML
 Descriptive ML
Procedural Markup Languages
 They are application dependent
 Procedural markup languages are used in
Word Processing software, like MSWORD, DTP software, like
PageMaker

Characteristics
 1. Documents marked up with procedural markup languages
contain clear instructions for the document-rendering program,
so that it produces output of the original content in a particular
format and style
 2. The formatting instructions are likely to be specific to the
output medium, so the document containing the original content
interspersed with markup is not portable across different output
media.
Example
installing the latest release of a
piece of software, one might do this as follows:

To install this release, perform the following steps: <BR>

<OL>
<LI> Download the file.
<LI> Unstuff the file.
<LI> Double-click on the installer icon.
</OL>

In PML, the code ‘ll be

<PROCEDURE ID="install">
<TITLE>Installing the software</TITLE>
<DESCRIPTION>To install this release, perform the following
steps:</DESCRIPTION> <LINK TYPE="steps"      
<TARGET ID="download"/>     
<TARGET ID="unstuff"/>     
<TARGET ID="execute"/> </LINK>
</PROCEDURE>
Descriptive Markup Languages

 Descriptive Markup Languages use embedded codes (tags)

to encode document elements.
 Descriptive markups are both machine as well as human
readable
 content of a web page is encoded using descriptive tags and
leaves the presentation up to the page presentation software
 A web page encoded with DML is platform independent,
since it is simply an ASCII file.
 Examples of DML are
 SGML: Standard Generalized Markup Language
 HTML: HyperText Markup Language
 XML: eXtensible Markup Language
DML Inheritance

SGML

HTML XML

WML CML MathML GML ebXML

Descriptive Markup of an e-
Book
<BOOK>
<PROFILE>
<TITLE>Basics of Web Technology </TITLE>
<AUTHOR> Debojit Boro </AUTHOR>
<COPYRIGHT>By the author<COPYRIGHT>
</PROFILE>
<BODY>
<CHAPTER ID=1>
<TITLE> Introduction</TITLE>
<SECTION>
<CHAPTER ID=2>
.
.</BODY>
</BOOK>
Non-Linear Text

<BOOK>

<PROFILE> <BODY>

<TITLE> <AUTHOR> <COPYRIGHT>

Basics of Web Debojit Boro

SGML
 Standard Generalized Markup Language
 Mother ML of all other DMLs
 HTML, XML etc. are derivatives of SGML
 ISO standard for defining new DMLs
 The grammar of SGML is formally specified as
DTD
 DTD: Document Type Definition
 DTD is a way of specifying Context Free
Grammars in Computer Science
SGML validity
SGML defines two kinds of validity

 A type-valid SGML document is defined by the standard as

An SGML document in which, for each document instance, there
is an associated document type declaration to whose DTD that
instance conforms.

 A tag-valid SGML document is defined by the standard as

An SGML document, all of whose document instances are fully-

tagged. There need not be a document type declaration
associated with any of the instances. Note: If there is a document
type declaration, the instance can be parsed with or without
reference to it.
SGML DTD for e-BOOK
 <! DOCTYPE BOOK [
<! ENTITY %chunks “para | list | figure”>
<! NOTATION gif SYSTEM “xv”>
<! ELEMENT book - - (profile, body)>
<! ELEMENT profile - - (title, author, copyright?)>
<! ELEMENT (title, author, copyright) - - (#PCDATA)>
<! ELEMENT body - - (chapter*)
<! ELEMENT chapter - - (title, section*)>
<! ELEMENT section - - (title, (%chunks;)*)>
<! ELEMENT para - - (#PCDATA)>
<! ELEMENT list - - (item*)>
<! ELEMENT item - o (para*)
<! ATTLIST (chapter, section, para) id ID #IMPLIED>
]>
 HTML
 Originally designed by TBL deriving traits from pre-existing concepts of
SGML and HyperText
 HyperText is a non-linear text
 TBL defined a fixed set of tags and attributes and specified the
grammar for encoding HTML pages using these tags and attributes.
 Accordingly HTML parsers are developed for rendering the content for
display
 HTML Tags are
 Basic :<HTML>, <HEAD>, <BODY>, <IMG> , <A>, <P>
 Lists : <OL> , <UL>, <LI>
 Table: <TABLE>, <TR>, <TD>
 Form: <FORM>, <INPUT>, <SELECT>
 Frame: <FRAMESET>, <FRAME>
HEAD, BODY, HEADING
 An HTML page has two sections
 <HEAD>
 Contains meta data of the page
 <TITLE>, <META>, <BASE>,<LINK>
 <BODY>
 Actual Data
 <P> Paragraph
 Headings: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>
HTML Heading Example

<HTML>
<HEAD>
<TITLE>HEADER PAGE</TITLE>
</HEAD>
<BODY BGCOLOR="#80AA95">
<CENTER>
<H1> INTRODUCTION TO WEB TECHNOLOGY</H1>
<H3>By</H3>
<H2>Debojit Boro</H2>
</CENTER>
</BODY>
</HTML>
 HTML Basic Text Formatting
<p> Write paragraph here </p>
<p align = “left”> Left-aligned paragraph </p>
<p align = “right”> Right-aligned paragraph </p>
<big> relatively bigger font size</big>
<small> relatively smaller font size </small>
_subscript
^superscript
<b> bold </b>
<i> italic </i>
<div> logical division </div>
HTML HYPERLINKS

 Inter-Page Link
 <A HREF = “URL”>anchored text </A>
 Intra-Page Link
 <A HREF = “#section”>Source text </A>
 <A NAME = “section”>Target text </A>
<BASE
URL =
TARGET =
>
HTML LISTS
Un-ordered List
<UL>
Definition List
<LI>Item1</LI>
<DL>
<LI>Item1</LI> <DT>Term</DT>
</UL> <DD>Item1</DD>
Ordered List <DD>Item1</DD>
<OL> <DT>Term</DT>
<LI>Item1</LI> <DD>Item1</DD>
<LI>Item1</LI> <DD>Item1</DD>
</OL> </DL>
HTML TABLE

<TABLE> ATTRIBUTES
<TR>
ROWSPAN = nr
<TH> Header1</TH> COLSPAN = nc
<TH> Header2</TH> ALIGN = left | right | center
</TR> VALIGN = top | bottom
<TR> BGCOLOR = color code
<TD> Data</TD> BACKGROUND = URL of image
<TD> Data </TD>
</TR>
<CAPTION> Table Caption
</CAPTION>
</TABLE>
8: HTML FRAME
 Normally, single page is displayed in a single
window.
 Frame enables multiple pages to be
displayed in a single window
 Frame partitions the window. Each partition
displays a page
HTML FRAME

<html>
<head>
<title>webtechnology</title>
</head>
<frameset rows="25%,*" border="0">
<frame src="webtech_head.html" name="head">
<frameset cols="20%,*" >
<frame src="webtech_index.html" name="index">
<frame src="webtech_main.html" name="main">
</frameset>
</frameset>
</html>
HTML FORM

<FORM ACTION = “” METHOD = “GET | POST”>

<INPUT TYPE = “text” NAME = “varName”
SIZE = “noc” MAXLENGTH = “noc”>
<INPUT TYPE = “checkbox” NAME = “varName”
VALUE = “varValue” CHECKED = “checked”>
<INPUT TYPE = “radio” NAME = “varName”
VALUE = “varValue” CHECKED = “checked”>
<INPUT TYPE = “reset” VALUE = “button label” >
<INPUT TYPE = “submit” VALUE = “button label” >
<TEXTAREA NAME= “varName” ROWS=“nor” COL = “noc”>
<SELECT NAME = “varName” SIZE = “nodoptions”>
<OPTION> option1</OPTION>
<OPTION> option2</OPTION>
</SELECT>
</FORM>
9: HTML HYPERMEDIA
 Image
<IMG SRC = “URL” WIDTH = “ “ HEIGHT = “ “>
 Background Image
BACKGROUND = “URL”
 HTML <!DOCTYPE> Declaration
 The doctype declaration should be the very first thing in an
HTML document, before the <html> tag.
 The doctype declaration is not an HTML tag; it is an instruction to
the web browser about what version of the markup language the
page is written in.
 The doctype declaration refers to a Document Type Definition
(DTD). The DTD specifies the rules for the markup language, so
that the browsers can render the content correctly

 Eg. <!DOCTYPE html PUBLIC "-//DTD XHTML 1.0

Transitional//EN""http://www.tezu.ernet.in/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
HTML Head
 The head element contains general information, also called meta-
information, about a document. Meta means "information about".
 The elements inside the head element should not be displayed by a
browser. 
 Different Head elements

<head> Defines information about the document

<title> Defines the document title
<base>Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information
HTML Base <base>
 The <base> tag specifies a default address or a default target for all links on
a page.
 The <base> tag goes inside the head element.
 It comes with two attributes
 Href and target

Href will be consisting all the URL’s

Target attributes values are

_blank
_parent
_self
_top

Eg.
<base href="www.tezu.ernet.in"/>
<base target= "_parent"/>
HTML Link <link>
 The <link> tag defines the relationship between a document and an
external resource.
 The <link> tag is most used to link to style sheets.

 Eg.

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
HTML Meta <meta>
 The purpose of the meta element is to
provide meta-information about the
document.
 Most often the meta element is used to
provide information that is relevant to
browsers or search engines like describing
the content of your document.
 Some search engines on the WWW will use
the name and content attributes of the meta
tag to index your pages.
HTML 4.0 Event Attributes

 HTML 4.0 is the ability to let HTML

events trigger actions in the
browser, like starting a JavaScript
when a user clicks on an HTML
element

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html,
iframe, meta, param, script, style, title elements.

onmouseover script What to do when mouse pointer moves over an element

Window Events
Only valid in body and frameset elements.

Value Description
Attribute
onload script Script to be run when a
document loads
onunload script Script to be run when a
document unloads
Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta,
param, script, style, and title elements.

Value Description
Attribute
onkeydown script  What to do when key is
pressed
onkeypress script  What to do when key is
pressed and released
onkeyup script  What to do when key is
released
HTML Grammar
 HTML has fixed set of tags and attributes defined
by 3 SGML DTDs ( for HTML 4.0)
 The Strict DTD: defines those elements that are
not depreciated in HTML 4.0
 The Transactional DTD includes the depreciated
elements with many older elements still in use
 The Frameset DTD: Identical to Trans DTD.
<body> replaced by <frameset> tag