1<br />CSWB 110 HTML / XHTML<br />Tutorial 1.1 and 1.2 up to lists<br />
2<br />History of the Internet<br /> <br /><ul><li>1969 Advanced Research Projects Agency Network (ARPANET) Begins
1989-90 the World Wide Web (WWW) Begins
1993 Mosaic is Released
1994 Netscape is Released
1995 Internet Explorer is Released</li></li></ul><li>3<br />Development of the Word Wide Web<br />Timothy Berners-Leeat th...
4<br />HyperTextDocuments<br />An entire collection of linked documents is referred to as a Web site.  <br />The hypertext...
5<br />Web Servers and Web Browsers<br />A Webpage is stored on a Web server <br />The browser or clientdisplays the Web p...
6<br />Search.htm<br />
7<br />www.palomar.edu/search.htm<br />search.htm<br />image.jpg<br />
8<br />How is the home page loaded?<br />
9<br />www.palomar.edu<br />searches for <br />default file<br />
10<br />Which page to load as Home Page??<br /><ul><li>index.html
index.htm
home.html
home.htm
default.htm
default.asp, default.aspx, index.asp, index.aspx</li></li></ul><li>11<br />HTML: Language of the Web Page<br />A Web page ...
Goal of XHTML<br />Portability<br />Accessibility<br />Standardization<br />12<br />
How was this accomplished<br />Separation of content from presentation by using Cascading Style Sheets (CSS)<br />CSS repl...
14<br />Tools for Creating HTML Documents<br />HTML Editor – Coffeecup<br />Text editor – notepad<br />Visual creator – Dr...
The HTML Language<br />Elements ( or tags)<br />Attributes<br />Values (of the attributes)<br />15<br />
Characterisitcs of HTML5<br />Open platform<br />Adapts to any device<br />Native support for more powerful applications<b...
   The HTML language consists of <br />“tags” or “elements”<br />Tags can be two-sided:<br /><body>     </body><br /> Encl...
HTML Tags and Attributes<br />18<br />
The HTML Document<br />Consists of two parts:<br />Head section<br />Where information for the browser goes<br />Body sect...
Upcoming SlideShare
Loading in...5
×

CSWB 110 Tutorial1 Part A

644
-1

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

CSWB 110 Tutorial1 Part A

  1. 1. 1<br />CSWB 110 HTML / XHTML<br />Tutorial 1.1 and 1.2 up to lists<br />
  2. 2. 2<br />History of the Internet<br /> <br /><ul><li>1969 Advanced Research Projects Agency Network (ARPANET) Begins
  3. 3. 1989-90 the World Wide Web (WWW) Begins
  4. 4. 1993 Mosaic is Released
  5. 5. 1994 Netscape is Released
  6. 6. 1995 Internet Explorer is Released</li></li></ul><li>3<br />Development of the Word Wide Web<br />Timothy Berners-Leeat the CERN nuclear research facility near Geneva, Switzerland, in 1989.<br />He developed a system of interconnected hypertextdocuments that allowed their users to easily navigate from one topic to another<br />HTML- language of the Web<br />HTTP – protocol to send and receive Web pages<br />
  7. 7. 4<br />HyperTextDocuments<br />An entire collection of linked documents is referred to as a Web site. <br />The hypertext documents within a Web site are known as Webpages.<br />A Web page can contain text, graphics, audio, video.<br />These are separate files that also reside with the html file<br />
  8. 8. 5<br />Web Servers and Web Browsers<br />A Webpage is stored on a Web server <br />The browser or clientdisplays the Web page <br />The Web page is written in the HTMLlanguage<br />They communicate with the HTTPprotocol<br />
  9. 9. 6<br />Search.htm<br />
  10. 10. 7<br />www.palomar.edu/search.htm<br />search.htm<br />image.jpg<br />
  11. 11. 8<br />How is the home page loaded?<br />
  12. 12. 9<br />www.palomar.edu<br />searches for <br />default file<br />
  13. 13. 10<br />Which page to load as Home Page??<br /><ul><li>index.html
  14. 14. index.htm
  15. 15. home.html
  16. 16. home.htm
  17. 17. default.htm
  18. 18. default.asp, default.aspx, index.asp, index.aspx</li></li></ul><li>11<br />HTML: Language of the Web Page<br />A Web page is a text file written in a language called Hypertext Markup Language - describes a document’s structure and content.<br />HTML is not a programming language or a formatting language.<br />XHTML – the latest official version of HTML<br />HTML5– the next version of HTML<br />
  19. 19. Goal of XHTML<br />Portability<br />Accessibility<br />Standardization<br />12<br />
  20. 20. How was this accomplished<br />Separation of content from presentation by using Cascading Style Sheets (CSS)<br />CSS replaces many HTML attributes<br />13<br />
  21. 21. 14<br />Tools for Creating HTML Documents<br />HTML Editor – Coffeecup<br />Text editor – notepad<br />Visual creator – Dreamweaver, SharePoint Designer<br />Converter – MSWord<br />
  22. 22. The HTML Language<br />Elements ( or tags)<br />Attributes<br />Values (of the attributes)<br />15<br />
  23. 23. Characterisitcs of HTML5<br />Open platform<br />Adapts to any device<br />Native support for more powerful applications<br />16<br />
  24. 24. The HTML language consists of <br />“tags” or “elements”<br />Tags can be two-sided:<br /><body> </body><br /> Enclose something – either content or more tags<br />Tags can be one-sided:<br /><br> or <br/><br /> No content, they are considered “empty” tags<br />17<br />XHTML syntax<br />
  25. 25. HTML Tags and Attributes<br />18<br />
  26. 26. The HTML Document<br />Consists of two parts:<br />Head section<br />Where information for the browser goes<br />Body section<br />Where the content for the web pages goes<br />19<br />
  27. 27. Basic HTML Tags or Elements<br /><html><br /> <head><br /> <title> </title><br /> </head><br /> <body><br /> </body><br /></html><br />
  28. 28. Paragraph Tag – centering – Block Level Element<br /><p style=“text-align: center”> </p><br />values are left, right, center, justify<br /> Attribute CSS property CSS value<br />21<br />
  29. 29. Break Tag<br /><ul><li>Line break
  30. 30. One sided tag
  31. 31. Self-terminating</li></ul><br> <br/><br />22<br />
  32. 32. Bold / Italic – Inline Elements<br /><b>this is bold</b><br /><i>this is italic</i><br />Comments: <!-- --><br />23<br />
  33. 33. Heading tags - bold, block-level element<br /><h1> </h1><br /><h2> </h2><br /><h3> </h3><br /><h4> </h4><br /><h5> </h5><br /><h6> </h6><br /><h1 style=“text-align: center”> </h1><br />values are left, right, center, justify<br />24<br />
  34. 34. Deprecated - “align” attribute<br /><h1 align=“center”> </h1><br />Replaced with CSS:<br /><h1 style=“text-align: center”> </h1><br />25<br />deprecated<br />
  35. 35. Now start learning to write HTML <br />by using the elements <br />we have just covered!<br />26<br />
  1. A particular slide catching your eye?

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

×