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 ofcontent (usually hypertext or hypermedia) that aredelivered to an e...
 Why                         Web designing –1. First impression counts     3 important element2. Professionalism        ...
 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.  ...
 An Webpage is best thought as a  set of VIRTUAL ELEMENTS  (paragraphs,titles,tables,list,ima  ges). HTML(Hyper type Mar...
 BASIC STRUCTURE               <!DOCTYPE html>               <html>               <body>               <h1> My first Head...
 1. Used to display any type of document on the host  computer. 2. A versatile language and can be used on any  platform...
~ Background~Bgcolor~size~font~color~Left margin~Top margin….etcThe above mentioned attributes are explained in the  next ...
10
<HTML>  <BODY>      THIS TEXT IS WRITTEN IN FONT SIZE 3.<FONT SIZE ="+2">     THIS TEXT IS WRITTEN IN FONT SIZE 5.</FONT><...
12
13
<HTML>   <HEAD>      <TITLE> COLOR  TESTING </TITLE>  </HEAD>  <BODY>    <FONT SIZE="5"  COLOR="RED">       THIS TEXT IS  ...
HTML defines six levels of heading.The heading element is written as:             <Hn>………………………</Hn>Where n - level of he...
<HTML>  <BODY>         <H1> HEADING ONE</H1>         <H2>HEADING TWO</H2>         <H3>HEADING   THREE</H3>                ...
 The PARAGRAPH Element <P> indicates a paragraph. The paragraph can be aligned by using the ALIGN  attribute. The ALIGN...
<HTML> <BODY>        <P> THIS IS FIRST  PARAGRAPH </P>        <P ALIGN="CENTER">  THIS IS SECOND PARAGRAPH                ...
1.  B (BOLD) Syntax: <B> ---------- </B>2. I (ITALIC) Syntax: <I> ----------- </I>3. SUB (Subscript)               Syntax:...
<HTML>  <BODY>       <H1  ALIGN="CENTER"><B> SOME  CHEMICAL        FORMULAS</B></H1> <BR> <B>CO<SUB>2</SUB></B>      <B>H<...
<HTML>   <BODY><H1 ALIGN="CENTER"><B>   <I>SOME MATHEMATICAL         FORMULAS</I></B></   H1> <BR> (A+B)   <SUP>2</SUP>=A<...
 eXtensible Markup Language Markup language for documents containing  structured information Defined by four specificat...
 Based on Standard Generalized Markup Language (SGML) Version 1.0 introduced by World Wide Web Consortium  (W3C) in 1998...
 An XML element is made up of a start tag, an end tag,    and data in between.   Example:      <director> Matthew Dunn <...
 An attribute is a name-value pair separated by an equal sign  (=). Example:    <City ZIP=“94608”> Emeryville </City> A...
 A basic XML document is an XML element that  can, but might not, include nested XML elements. Example:  <books>     <bo...
 Authoring guidelines:   All elements must have an end tag.   All elements must be cleanly nested (overlapping    eleme...
<BOOKS><book id=“123”  loc=“library”>                                        BOOKS                                        ...
 A data island is an XML document that exists within an HTML page. The <XML> element marks the beginning of the data isl...
 Example:  <XML ID=“XMLID”>     <customer>         <name> Mark Hanson </name>         <custID> 29085 </custID>     </cust...
 The first XML query languages    LOREL (Stanford)    XQL Several other query languages have been  developed (e.g. UNQ...
Developed at AT&T labsTo extract data from the input XML dataHas variables to which data is bound and templates which s...
Example 1                             Example 2 Retrieve all authors of books        XML-QL query asking for all  publis...
 Semi structured data is often encountered in data exchange and  integration At the sources the data may be structured (...
Example: Export the following data into XML and group  books by store Relational Database:  Store (sid, name, phone)  Boo...
 XML: <store> <name> … </name>         <phone> … </phone>         <book> <title>… </title>                 <authors> … </...
 Integration of data sharing Security
XML                           HTML XML fundamentally           HTML specifies  separates contents (data    presentation....
 BROWSER COMPATIBILITY NAMING CONVENSIONS QUALITY OF CONTENT GRAPHICS AND IMAGES
Web page concept  Basic
Upcoming SlideShare
Loading in...5
×

Web page concept Basic

841

Published on

College Seminar

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
841
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web page concept Basic

  1. 1. By Sukanya Sen Sharma and Shaishavi Kashikar MBICT College
  2. 2.  Introduction  1.Why Web Designing?  2.What And Why?  3.Web Standards  HTML  XML  Comparison
  3. 3. Web design is the practice of creating presentations ofcontent (usually hypertext or hypermedia) that aredelivered to an end-user through the WorldwideWeb,using a Web browser or other Web-enabledsoftware. The intent of web design is to create a website²acollection of electronic documents and applications thatreside on a Webserver/servers. The website may includetext, images, soundsand other content, and may beinteractive.
  4. 4.  Why  Web designing –1. First impression counts 3 important element2. Professionalism 1. Colour and tone of3. Competition website 2. Use of graphics 3. Quality of contents What is the use of web designing1. Marketing2. Advertisement
  5. 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. 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. 7.  BASIC STRUCTURE <!DOCTYPE html> <html> <body> <h1> My first Heading </h1> <p> My first paragraph </p> </body> </html>
  8. 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
  9. 9. ~ Background~Bgcolor~size~font~color~Left margin~Top margin….etcThe above mentioned attributes are explained in the next section. 9
  10. 10. 10
  11. 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
  12. 12. 12
  13. 13. 13
  14. 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. 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.
  16. 16. <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>
  17. 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. 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. 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. 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>
  21. 21. <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>
  22. 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. 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. 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. 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. 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. 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. 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. 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.
  30. 30.  Example: <XML ID=“XMLID”> <customer> <name> Mark Hanson </name> <custID> 29085 </custID> </customer> </XML>
  31. 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. 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. 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. 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. 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
  36. 36.  XML: <store> <name> … </name> <phone> … </phone> <book> <title>… </title> <authors> … </authors> <price> … </price> </book> <book>…</book> … </store>
  37. 37.  Integration of data sharing Security
  38. 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.
  39. 39.  BROWSER COMPATIBILITY NAMING CONVENSIONS QUALITY OF CONTENT GRAPHICS AND IMAGES
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×