1. By Sukanya Sen Sharma and
Shaishavi Kashikar
MBICT College
2. Introduction
1.Why Web Designing?
2.What And Why?
3.Web Standards
HTML
XML
Comparison
3. Web design is the practice of creating presentations of
content (usually hypertext or hypermedia) that are
delivered to an end-user through the Worldwide
Web,using a Web browser or other Web-enabled
software. The intent of web design is to create a website²a
collection of electronic documents and applications that
reside on a Webserver/servers. The website may include
text, images, soundsand other content, and may be
interactive.
4. Why Web designing –
1. First impression counts 3 important element
2. Professionalism 1. Colour and tone of
3. Competition
website
2. Use of graphics
3. Quality of contents
What is the use of web
designing
1. Marketing
2. Advertisement
5. W3C standard
What is the W3C?
What does it do??
What are the W3C
standard
1. HTML 4.0 standard
2. XML 1.0
3. XHTML 1.0,1.1
4. CSS
5. DOM
6. An Webpage is best thought as a
set of VIRTUAL ELEMENTS
(paragraphs,titles,tables,list,ima
ges).
HTML(Hyper type Markup
Language ) defines the structure
and layout of elements of a Web
page with a variety of TAGS.
Each tag may have a set of
attributes that modify the
appearance and layout of the
virtual elements contained by
the tag.
7. BASIC STRUCTURE
<!DOCTYPE html>
<html>
<body>
<h1> My first Heading </h1>
<p> My first paragraph </p>
</body>
</html>
8. 1. Used to display any type of document on the host
computer.
2. A versatile language and can be used on any
platform.
3. Used to make the text look attractive.
4. Can link one document with another.
8
11. <HTML>
<BODY>
THIS TEXT IS WRITTEN IN FONT SIZE 3.
<FONT SIZE ="+2">
THIS TEXT IS WRITTEN IN FONT SIZE 5.
</FONT>
<FONT SIZE = "7">
THIS TEXT IS WRITTEN IN FONT SIZE 7.
</FONT>
<FONT SIZE ="+12">
THIS TEXT IS ASLO WRITTEN IN FONT SIZE 7 'COZ ITS VALUE IS OUT OF THE
RANGE.
</FONT>
</BODY>
</HTML>
11
14. <HTML>
<HEAD>
<TITLE> COLOR
TESTING </TITLE>
</HEAD>
<BODY>
<FONT SIZE="5"
COLOR="RED">
THIS TEXT IS
WRITTEN IN FONT SIZE
5 AND IN RED COLOR.
</FONT>
</BODY>
</HTML>
15. HTML defines six levels of heading.
The heading element is written as:
<Hn>………………………</Hn>
Where n - level of heading and can take values from 1
to 6.
H1 -- most prominent heading ,while
H6 --least prominent heading.
Headings are usually displayed in bolder and larger
font than the normal text.
NOTE: (From the example next)- An extra line is
generally inserted above and below the heading.
17. The PARAGRAPH Element <P> indicates a paragraph.
The paragraph can be aligned by using the ALIGN
attribute.
The ALIGN = LEFT/CENTER/RIGHT attribute can be
added to the <H1> through to <H6> elements.
SYNTAX:
<P> ……………………………..</P>
<br>This element is used to insert a line break with extra
space in the beginning.
18. <HTML>
<BODY>
<P> THIS IS FIRST
PARAGRAPH </P>
<P ALIGN="CENTER">
THIS IS SECOND PARAGRAPH
WHICH IS
CENTER ALIGNED
</P>
<P ALIGN ="RIGHT">
THIS IS THIRD PARAGRAPH
WHICH IS
RIGHT
ALIGNED
</P>
</BODY>
</HTML>
19. 1. B (BOLD) Syntax: <B> ---------- </B>
2. I (ITALIC) Syntax: <I> ----------- </I>
3. SUB (Subscript)
Syntax: <SUB> ---------- </SUB>
4. SUP (Super script)
Syntax: <SUP> ---------- </SUP>
20. <HTML>
<BODY>
<H1
ALIGN="CENTER"><B> SOME
CHEMICAL
FORMULAS</B></H1>
<BR>
<B>CO<SUB>2</SUB></B>
<B>H<SUB>2</SUB>O<
BR></B>
H<SUB>2</SUB>SO<SU
B>4</SUB>
<BODY>
<HTML>
22. eXtensible Markup Language
Markup language for documents containing
structured information
Defined by four specifications:
XML, the Extensible Markup Language
XLL, the Extensible Linking Language
XSL, the Extensible Style Language
XUA, the XML User Agent
23. Based on Standard Generalized Markup Language (SGML)
Version 1.0 introduced by World Wide Web Consortium
(W3C) in 1998
Bridge for data exchange on
the Web
24. An XML element is made up of a start tag, an end tag,
and data in between.
Example:
<director> Matthew Dunn </director>
Example of another element with the same value:
<actor> Matthew Dunn </actor>
XML tags are case-sensitive:
<CITY> <City> <city>
XML can abbreviate empty elements, for example:
<married> </married> can be abbreviated to
<married/>
25. An attribute is a name-value pair separated by an equal sign
(=).
Example:
<City ZIP=“94608”> Emeryville </City>
Attributes are used to attach additional, secondary
information to an element.
26. A basic XML document is an XML element that
can, but might not, include nested XML elements.
Example:
<books>
<book isbn=“123”>
<title> Second Chance </title>
<author> Matthew Dunn </author>
</book>
</books>
27. Authoring guidelines:
All elements must have an end tag.
All elements must be cleanly nested (overlapping
elements are not allowed).
All attribute values must be enclosed in quotation
marks.
Each document must have a unique first element, the
root node.
28. <BOOKS>
<book id=“123”
loc=“library”> BOOKS
book
<author>Hull</author> article
loc=“library”
<title>California</title>
ref
<year> 1995 </year> 123 555
</book>
<article id=“555” ref=“123”> author year author title
<author>Su</author>
<title> Purdue</title> title
</article>
</BOOKS> Hull 1995 Su Purdue
California
29. A data island is an XML document that exists
within an HTML page.
The <XML> element marks the beginning of
the data island, and its ID attribute provides a
name that you can use to reference the data
island.
31. The first XML query languages
LOREL (Stanford)
XQL
Several other query languages have been
developed (e.g. UNQL, XPath)
XML-QL considered by W3C for standardization
Currently W3C is considering and working on a
new query language: XQuery
32. Developed at AT&T labs
To extract data from the input XML data
Has variables to which data is bound and
templates which show how the output XML
data is to be constructed
Uses the XML syntax
Based on a where/construct syntax
Where combines from and where parts of SQL
Construct corresponds to SQL’s select
33. Example 1 Example 2
Retrieve all authors of books XML-QL query asking for all
published by Morgan Kaufmann: bookstores that sell The Java
Programming Language for
under $25:
where <book>
where <store>
<publisher><name>
<name> $N </name>
Morgan Kaufmann
<book>
</name> </publisher> <title> The Java
Programming Language </title>
<title> $T </title>
<price> $P </price>
<author> $A </author>
</book>
</book> in “www.a.b.c/bib.xml”
</store> in
construct <result> $A </result> “www.store/bib.xml”
$P < 25
construct <result> $N </result>
34. Semi structured data is often encountered in data exchange and
integration
At the sources the data may be structured (e.g. from relational
databases)
A mediator is complex software component that
integrates and transforms data from one or several
sources using a declarative specification
Two main contexts:
Data conversion: converts data between two different models
e.g. by translating data from a relational database
into XML
Data integration: integrates data from different sources into a
common view
35. Example: Export the following data into XML and group
books by store
Relational Database:
Store (sid, name, phone)
Book (bid, title, authors)
StoreBook (sid , bid, price, stock)
price stock
name Store StoreBook Book authors
phone sid title bid
38. XML HTML
XML fundamentally HTML specifies
separates contents (data presentation.
and informati0n) from
presentation.
XML allows tags and
HTML explicitly defines
grammars to be used. a set of legal tags as well
as grammar.
