Web page concept Basic

By Sukanya Sen Sharma and
Shaishavi Kashikar
MBICT College

 Introduction
 1.Why Web Designing?
 2.What And Why?
 3.Web Standards

 HTML
 XML
 Comparison

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.

 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

 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

 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.

 BASIC STRUCTURE
<!DOCTYPE html>

<html>
<body>

<h1> My first Heading </h1>

<p> My first paragraph </p>

</body>
</html>

 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

~ Background
~Bgcolor
~size
~font
~color
~Left margin
~Top margin….etc
The above mentioned attributes are explained in the
next section.

9

<HTML>
<BODY>
THIS TEXT IS WRITTEN IN FONT SIZE 3.
<FONT SIZE ="+2">
</FONT>
<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

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

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.

<HTML>
<BODY>
<H1> HEADING ONE</H1>
<H2>HEADING TWO</H2>
<H3>HEADING
THREE</H3>
<H4>HEADING 4
</H4>
<H5> HEADING FIVE</H5>
<H6>HEADING
SIX</H6>
</BODY>
</HTML>

 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.

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

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>

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

<HTML>
<BODY>
<H1 ALIGN="CENTER"><B>
<I>SOME MATHEMATICAL
FORMULAS</I></B></
H1> <BR>
(A+B)
<SUP>2</SUP>=A<SUP>2</SU
P> + B<SUP>2</SUP> +
2AB<BR>
(A-B)
<SUP>2</SUP>=A<SUP>2</SU
P> + B<SUP>2</SUP> - 2AB
</BODY>
</HTML>

 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

 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

 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/>

 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.

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

 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.

<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

 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.

 Example:
<XML ID=“XMLID”>
<customer>
<name> Mark Hanson </name>
<custID> 29085 </custID>
</customer>
</XML>

 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

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

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>

 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

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

 XML:
<store> <name> … </name>
<phone> … </phone>
<book> <title>… </title>
<authors> … </authors>
<price> … </price>
</book>
<book>…</book>
…
</store>

 Integration of data sharing

 Security

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.

 BROWSER COMPATIBILITY

 NAMING CONVENSIONS

 QUALITY OF CONTENT

 GRAPHICS AND IMAGES

Web page concept Basic

More Related Content

What's hot

Similar to Web page concept Basic

Web page concept Basic