1. COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2

2. XHTML  Extensible HyperText Markup Language –Used to code Web pages –Specifies  Content  Structure –Does not specify  Format

3. Vairants  Three versions –Strict: complete compliance with newest requirements –Transitional: allows some old features but not frames –Frameset: transitional plus frames

4. Strict XHTML  Major differences with HTML –XHTML elements must be properly nested –XHTML documents must be well- formed –Tag names must be in lowercase –All XHTML elements must be closed

5. XHTML Standard  Standard (recommendation) developed by –World Wide Web Consortium –http://www.w3c.org http://www.w3c.org –Currently version 1.1 –Version 2 under review –Vendors sometimes vary from standard

6. XHTML Format  XHTML –Plain text –Free form –Content  Text  Links –Tags  Specify structure  Bounded by  Bounded by

7. Simple Example  Simple web page  Control information, lines 1-3  Comments, lines 5-6 –Start with <!— –End   Structure tags  One line of text –examples\ch04\main.html examples\ch04\main.html

8. XHTML Tags  Specify content characteristics  Generally paired –Bound a region –Start with –Start with –End with –End with –If tag is self-contained, use –If tag is self-contained, use

9. W3C Validation Service  Validate structure of a document –http://validator.w3.org http://validator.w3.org –Can specify a  url to validate  Upload a file to validate

10. Basic Components  Headers  Links  Images  Special characters and line breaks  Unordered lists (bullets)  Ordered lists  Nested lists

11. Headers and Links  Six levels of headers, h1 – h 6 –examples\ch04\header.html examples\ch04\header.html  Links cause browser to load another url, a page or the like –examples\ch04\links.html examples\ch04\links.html –examples/ch04/contact.html examples/ch04/contact.html

12. Images  Load an image file –Can also resize the image –May specify text to display if image is not displayed  examples\ch04\picture.html examples\ch04\picture.html –May be combined with links so clicking image activates link  examples\ch04\nav.html examples\ch04\nav.html

13. Special Chareacters Line Breaks  Special characters (Entities) –Often used when character has special xhtml meaning or is not on keyboard –Coded &xx;  Examples: < > & –Line break forced by  End of header  Paragraph  Paragraph  Line break tag  Line break tag

14. Font Control  Additional tags control font and appearance to text –Bold –Bold  preferred to old  preferred to old –Strikethrough –Strikethrough –examples\ch04\contact2.html examples\ch04\contact2.html

15. Unordered Lists  Start list with  Start list with  End with  End with  Each list item bounded by – –  examples\ch04\links2.html examples\ch04\links2.html

16. Ordered Lists  “Numbered” items – – –Can specify type of numbering  A more advanced feature –examples\ch04\list.html examples\ch04\list.html

17. Intermediate Features  Tables  Forms –Fill in and submit  Internal linking  Image maps  Meta elements  Framesets

18. Tables  Contain rows and columns of cells –Cells for columns are nested in row –Table can also contain header and footer rows –examples\ch05\table1.html examples\ch05\table1.html  Rectangular group of cells can be treated as a single cell –examples\ch05\table2.html examples\ch05\table2.html

19. Forms  Fill in and submit –Submitted form processed by server –Requires “server-side” application program (later in course) –Specify display items and fields by name –Specify server application to process data –examples\ch05\form.html examples\ch05\form.html

20. More Form Features  Forms can contain –Text area –Checkbox –Reset button –Hidden fields –examples\ch05\form2.html examples\ch05\form2.html

21. More Form Features 2  More components –Radio buttons –Menus –examples\ch05\form3.html examples\ch05\form3.html

22. Internal Links and Maps  Internal links take you to a specific part of the page –examples\ch05\links.html examples\ch05\links.html  Maps allow you to link to different locations by clicking parts of an image –examples\ch05\picture.html examples\ch05\picture.html

23. meta Elements  Provide information about web page or direction to browser  Some designed for use by search engines, but this is often abused  Format  examples\ch05\main.html examples\ch05\main.html

24. Frame Sets  Allow content to be loaded from different files into different portions of a web page  CSS provides more powerful alternative  examples\ch05\index.html examples\ch05\index.html  examples\ch05\index2.html examples\ch05\index2.html