Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSWB 110 Tutorial1 Part A

  • Login to see the comments

  • Be the first to like this

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 /><br />search.htm<br />image.jpg<br />
  11. 11. 8<br />How is the home page loaded?<br />
  12. 12. 9<br /><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 />