web page concept final ppt
TRANSCRIPT
![Page 1: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/1.jpg)
By Sukanya Sen Sharma and Shaishavi Kashikar
MBICT College
Web page Concept, DesigningLanguages – Final Seminar
![Page 2: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/2.jpg)
Introduction1.Why Web Designing?2.What And Why?3.Web Standards
HTML XMLComparison
INDEX
![Page 3: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/3.jpg)
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????
![Page 4: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/4.jpg)
What and Why????Why
1. First impression
counts2. Professionalism3. Competition
What is the use of web designing
1. Marketing2. Advertisement
Web designing – 3 important element
1. Colour and tone of website
2. Use of graphics3. Quality of contents
![Page 5: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/5.jpg)
Web StandardW3C standardWhat is the W3C?What does it do??What are the W3C
standard1. HTML 4.0
standard2. XML 1.03. XHTML 1.0,1.14. CSS5. DOM
![Page 6: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/6.jpg)
Web design - HTML An Webpage is best thought as a
set of VIRTUAL ELEMENTS (paragraphs,titles,tables,list,images).
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.
![Page 7: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/7.jpg)
BASIC STRUCTURE <!DOCTYPE html>
<html> <body>
<h1> My first Heading </h1>
<p> My first paragraph </p>
</body> </html>
Structure of HTML Document
![Page 8: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/8.jpg)
Importance of HTML1. 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
![Page 9: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/9.jpg)
ATTRIBUTES OF BODY ELEMENT~ Background~Bgcolor~size~font~color~Left margin~Top margin….etcThe above mentioned attributes are
explained in the next section.
9
![Page 10: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/10.jpg)
10
• <BODY BGCOLOR ="SILVER"> <H1> MY FIRST HTML CODE </H1>
![Page 11: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/11.jpg)
FONT SIZE EXAMPLE<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
![Page 12: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/12.jpg)
12
![Page 13: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/13.jpg)
13
<FONT SIZE="5" COLOR="RED"> THIS TEXT IS WRITTEN IN FONT SIZE 5 AND IN RED COLOR.
![Page 14: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/14.jpg)
COLOR TESTING
<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>
![Page 15: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/15.jpg)
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.
HEADING Element
![Page 16: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/16.jpg)
HTML CODE
<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>
![Page 17: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/17.jpg)
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.
PARAGRAPH Element
![Page 18: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/18.jpg)
HTML CODE<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>
![Page 19: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/19.jpg)
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>
STYLE TAGS
![Page 20: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/20.jpg)
HTML code for BOLD & SUBSCRIPT
<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<SUB>4</SUB><BODY>
<HTML>
![Page 21: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/21.jpg)
HTML code for ITALIC & SUP<HTML>
<BODY>
<H1 ALIGN="CENTER"><B> <I>SOME MATHEMATICAL
FORMULAS</I></B></H1> <BR>
(A+B) <SUP>2</SUP>=A<SUP>2</SUP> + B<SUP>2</SUP> + 2AB<BR>
(A-B) <SUP>2</SUP>=A<SUP>2</SUP> + B<SUP>2</SUP> - 2AB
</BODY>
</HTML>
![Page 22: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/22.jpg)
eXtensible Markup LanguageMarkup language for documents
containing structured informationDefined by four specifications:
XML, the Extensible Markup Language XLL, the Extensible Linking Language XSL, the Extensible Style Language XUA, the XML User Agent
What is XML?
![Page 23: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/23.jpg)
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
XML….
![Page 24: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/24.jpg)
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/>
Authoring XML Elements
![Page 25: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/25.jpg)
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.
Authoring XML Elements (cont’d)
![Page 26: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/26.jpg)
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 XML Documents
![Page 27: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/27.jpg)
Authoring XML Documents (cont’d)
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.
![Page 28: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/28.jpg)
XML Data Model: Example
<BOOKS><book id=“123”
loc=“library”> <author>Hull</author> <title>California</title> <year> 1995 </year></book><article id=“555”
ref=“123”> <author>Su</author> <title> Purdue</title></article></BOOKS> Hull Purdue
BOOKS
123 555
California
Su
titleauthor
title
author
articlebook
year
1995
ref
loc=“library”
![Page 29: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/29.jpg)
Authoring XML Data Islands
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.
![Page 30: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/30.jpg)
Authoring XML Data Islands (cont’d)
Example: <XML ID=“XMLID”> <customer> <name> Mark Hanson </name> <custID> 29085 </custID> </customer> </XML>
![Page 31: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/31.jpg)
XML Query LanguagesThe 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
![Page 32: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/32.jpg)
A Query Language for XML: XML-QL
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
![Page 33: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/33.jpg)
XML-QL Query Example 1 Retrieve all authors of books
published by Morgan Kaufmann:
where <book> <publisher><name> Morgan Kaufmann </name>
</publisher> <title> $T </title> <author> $A
</author> </book> in “www.a.b.c/bib.xml”construct <result> $A </result>
Example 2 XML-QL query asking for all
bookstores that sell The Java Programming Language for under $25:
where <store> <name> $N </name> <book> <title> The Java
Programming Language </title>
<price> $P </price> </book></store> in
“www.store/bib.xml” $P < 25
construct <result> $N </result>
![Page 34: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/34.jpg)
Semi structured Data and MediatorsSemi structured data is often encountered in data exchange
and integrationAt 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
![Page 35: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/35.jpg)
Converting Relational Database to XMLExample: Export the following data into XML and
group books by storeRelational Database:
Store (sid, name, phone)Book (bid, title, authors)StoreBook (sid , bid, price, stock)
Store BookStoreBook
phone
authors
bidtitlesid
name
price stock
![Page 36: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/36.jpg)
Converting Relational Database to XML (Cont’d)
XML:<store> <name> … </name>
<phone> … </phone> <book> <title>… </title>
<authors> … </authors> <price> … </price>
</book> <book>…</book> …
</store>
![Page 37: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/37.jpg)
Challenges facing XMLIntegration of data sharing
Security
![Page 38: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/38.jpg)
XMLXML fundamentally
separates contents (data and informati0n) from presentation.
XML allows tags and grammars to be used.
HTML specifies presentation.
HTML explicitly defines a set of legal tags as well as grammar.
Web Designing – XML Vs. HTML
HTML
![Page 39: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/39.jpg)
BROWSER COMPATIBILITY
NAMING CONVENSIONS
QUALITY OF CONTENT
GRAPHICS AND IMAGES
Web designing - ISSUES
![Page 40: Web page concept final ppt](https://reader034.vdocuments.site/reader034/viewer/2022052505/55584220d8b42acb078b50ed/html5/thumbnails/40.jpg)