View
214
Download
0
Category
Preview:
Citation preview
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
8/8/2019 Web Tech Class 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
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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.
8/8/2019 Web Tech Class 3
5/39
Three tier Architecture
8/8/2019 Web Tech Class 3
6/39
WEB ARCHITECTURE
8/8/2019 Web Tech Class 3
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/8/2019 Web Tech Class 3
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)
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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.
8/8/2019 Web Tech Class 3
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:
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
14/39
DML Inheritance
SGML
HTML XML
WML CML MathML GML ebXML
8/8/2019 Web Tech Class 3
15/39
Descriptive Markup of an e-
Book
Basics of Web Technology Debojit Boro
By the author
Introduction
.
.
8/8/2019 Web Tech Class 3
16/39
Non-Linear Text
Basics of Web Debojit Boro
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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.
8/8/2019 Web Tech Class 3
19/39
SGML DTD for e-BOOK
]>
8/8/2019 Web Tech Class 3
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: ,
8/8/2019 Web Tech Class 3
21/39
HEAD, BODY, HEADING
An HTML page has two sections
Contains meta data of the page
, , ,
Actual Data
Paragraph
Headings: , , , , ,
8/8/2019 Web Tech Class 3
22/39
HTML Heading Example
HEADER PAGE
INTRODUCTION TO WEB TECHNOLOGY
By
Debojit Boro
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
24/39
HTML HYPERLINKS
Inter-Page Link
anchored text
Intra-Page Link
Source text
Target text
8/8/2019 Web Tech Class 3
25/39
HTML LISTS
Un-ordered List
Item1
Item1
Ordered List
Item1
Definition List
Term
Item1
Item1
Term
Item1Item1
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
28/39
HTML FRAME
webtechnology
8/8/2019 Web Tech Class 3
29/39
HTML FORM
option1
option2
8/8/2019 Web Tech Class 3
30/39
9: HTML HYPERMEDIA
Image
Background ImageBACKGROUND = URL
8/8/2019 Web Tech Class 3
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.
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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.
8/8/2019 Web Tech Class 3
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.
8/8/2019 Web Tech Class 3
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.
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
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
8/8/2019 Web Tech Class 3
39/39
Recommended