web tech class 3

8/8/2019 Web Tech Class 3

1/39

Mr. Debojit Boro

Assistant Professor,Tezpur University,Napaam,Tezpur-784028

Web Technology

Batches:

M.Tech. 2nd Semester

B.Tech 6th Semester

B.Tech. 8th Semester

MCA 4th Semester

B.Tech. Electronics 8th Semester

Class No. 3


2/39

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


3/39

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 betweenthe 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


4/39

Advantages

Modular software with well defined interfaces

Allows any of the three tier to be upgraded or replaced independently asper 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 tierdisplays information related to such services as browsingmerchandise, purchasing, and shopping cart contents. Itcommunicates with other tiers by outputting results to thebrowser/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 ownlayer, it controls an applications functionality by performing detailed

processing. Data tier

This tier consists of Database Servers. Here information is stored andretrieved. This tier keeps data neutral and independent fromapplication servers or business logic. Giving data its own tier alsoimproves scalability and performance.


5/39

Three tier Architecture


6/39

WEB ARCHITECTURE


7/39

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


8/39

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)


9/39

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


10/39

Markup Languages

Mark up means some kind of encoding

When we give a manuscript for typesetting ina press, the instructions to type setter, writtenon the margins, are markups

A Markup Language(ML) is a formalmechanism for encoding data for electronic

interpretation and presentation.Markup Languages : Procedural ML

Descriptive ML


11/39

Procedural Markup Languages

They are application dependent

Procedural markup languages are used inWord Processing software, like MSWORD, DTP software, likePageMaker

Characteristics

1. Documents marked up with procedural markup languagescontain clear instructions for the document-rendering program,so that it produces output of the original content in a particularformat and style

2. The formatting instructions are likely to be specific to theoutput medium, so the document containing the original contentinterspersed with markup is not portable across different outputmedia.


12/39

Exampleinstalling the latest release of a

piece of software, one might do this as follows:

To install this release, perform the following steps:

Download the file.

Unstuff the file.

Double-click on the installer icon.

In PML, the code ll be

Installing the software

To install this release, perform the followingsteps:


13/39

Descriptive Markup Languages

Descriptive Markup Languages use embeddedcodes (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 pagepresentation software

A web page encoded with DML is platformindependent, since it is simply an ASCII file.

Examples of DML are SGML: Standard Generalized Markup Language

HTML: HyperText Markup Language

XML: eXtensible Markup Language


14/39

DML Inheritance

SGML

HTML XML

WML CML MathML GML ebXML


15/39

Descriptive Markup of an e-

Book

Basics of Web Technology Debojit Boro

By the author

Introduction

.

.


16/39

Non-Linear Text

Basics of Web Debojit Boro


17/39

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


18/39

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, thereis an associated document type declaration to whose DTD thatinstance 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 documenttype declaration, the instance can be parsed with or withoutreference to it.


19/39

SGML DTD for e-BOOK

]>


20/39

HTML

Originally designed by TBL deriving traits from pre-existing concepts ofSGML and HyperText

HyperText is a non-linear text

TBL defined a fixed set of tags and attributes and specified thegrammar for encoding HTML pages using these tags and attributes.

Accordingly HTML parsers are developed for rendering the content fordisplay

HTML Tags are Basic :, , , , ,

Lists : , ,

Table: , ,

Form: , , Frame: ,


21/39

HEAD, BODY, HEADING

An HTML page has two sections

Contains meta data of the page

, , ,

Actual Data

Paragraph

Headings: , , , , ,


22/39

HTML Heading Example

HEADER PAGE

INTRODUCTION TO WEB TECHNOLOGY

By

Debojit Boro


23/39

HTML Basic Text Formatting

Write paragraph here

Left-aligned paragraph

Right-aligned paragraph

relatively bigger font size relatively smaller font size

subscript

superscript

bold

italic

logical division


24/39

HTML HYPERLINKS

Inter-Page Link

anchored text

Intra-Page Link

Source text

Target text


25/39

HTML LISTS

Un-ordered List

Item1

Item1

Ordered List

Item1
Item1

Definition List

Term

Item1

Item1

Term

Item1Item1


26/39

HTML TABLE

Header1 Header2

Data

Data

TableCaption

ATTRIBUTES

ROWSPAN = nrCOLSPAN = nc

ALIGN = left | right | center

VALIGN = top | bottom

BGCOLOR = color code

BACKGROUND = URL of image


27/39

8: HTML FRAME

Normally, single page is displayed in a single

window.

Frame enables multiple pages to bedisplayed in a single window

Frame partitions the window. Each partition

displays a page


28/39

HTML FRAME

webtechnology


29/39

HTML FORM

option1

option2


30/39

9: HTML HYPERMEDIA

Image

Background ImageBACKGROUND = URL


31/39

HTML Declaration The doctype declaration should be the very first thing in an HTML

document, before the tag. The doctype declaration is not an HTML tag; it is an instruction to

the web browser about what version of the markup language thepage is written in.

The doctype declaration refers to a Document Type Definition(DTD). The DTD specifies the rules for the markup language, sothat the browsers can render the content correctly

Eg.


32/39

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

Defines information about the document Defines the document title

Defines a base URL for all the links on a page

Defines a resource reference

Defines meta information


33/39

HTML Base

The tag specifies a default address or a default target for all links on

a page. The tag goes inside the head element. It comes with two attributes

Href and target

Href will be consisting all the URLs

Target attributes values are

_blank_parent_self_top

Eg.


34/39

HTML Link

The tag defines the relationship between a document and an

external resource. The tag is most used to link to style sheets.

Eg.


35/39

HTML Meta

The purpose of the meta element is toprovide meta-information about the

document.

Most often the meta element is used to

provide information that is relevant tobrowsers or search engines like describing

the content of your document.

Some search engines on the WWW will usethe name and content attributes of the meta

tag to index your pages.


36/39

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


37/39

Window Events

Only valid in body and frameset elements.

AttributeValue Description

onload script Script to be run when a

document loads

onunload script Script to be run when a

document unloadsKeyboard Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta,

param, script, style, and title elements.

Attribute

Value Description

onkeydown script What to do when key ispressed

onkeypress script What to do when key is

pressed and released

onkeyup script What to do when key is

released


38/39

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.

replaced by tag


39/39