1. Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for Design XHTML

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 What is HTML?  Hypertext Markup Language  Made up of tags, elements, and attributes  Scripting language that instructs a Web browser how to display a Web page  No parsing necessary from computer  Runs within another application, not stand-alone  Latest version: HTML 4.01  Now being replaced with XHTML

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Problems with HTML  Non-standard  Leads to “browser wars”  Different Web browsers may apply tags in different ways  Different Web browsers may not support tags in the same way  Content and presentation mixed together  Results in sloppy code

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 What is XHTML?  eXtensible Hypertext Markup Language  XML-based extension of HTML  Developed by World Wide Web Consortium (W3C)  Purpose:  Clean up sloppy, non-standard HTML  Provide ways to extend HTML and add new features  Separate content from presentation

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Using Notepad Menu bar Document area Title bar File menu

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Saving an HTML File from Notepad  By default, files from Notepad are saved with a.txt extension  If you try to save as filename.htm, then the real name will be filename.htm.txt  You can avoid this by either:  Making sure that the Save As Type entry is set as All Files instead of *.txt or  Saving with the name in quotes, like this: "filename.htm"

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Using Browser Browser window Dialog box for opening Web page

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Tags and Elements  Tags  Tell browser what to do with information  Define the structure of a Web page  Identify beginning and end of elements  Document tags specify each section  Optional in HTML, mandatory in XHTML  Elements  Types of object that can contain text or other objects  Nested elements – elements contained in other elements

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Type of Document Tags  – specify begin and end of XHTML document  – specify begin and end of header information, including title and meta data  – specify begin and end of title that appears in browser’s title bar  – specify begin and end of displayed content of XHTML page

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 XHTML Validation  Process of syntax checking a Web page  Confirm that a document adheres to Document Type Definitions (DFD) defined by W3C  DFD types:  Strict  Transitional  Frameset

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 XHTML Code in Notepad and Browser Results Body goes in content area of browser Title goes in Title bar of browser

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Versions of XHTML  Strict (XHTML 2.0)  Must follow complete XML coding rules  Must separate content from presentation  Presentation via Cascading Style Sheets (CSS)  Transitional (XHTML 1.0, 1.1)  Reformulation of HTML 4.01  Presentation and content tags exist  Frameset  Enable window-in-a-window effect

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 White Space in XHTML Documents  White space – empty area in a page  Important for making page easier to read  Enter/Return key does not provide this in XHTML documents  Can use paragraph tags:

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Effects of Tags tag inserts white space and separates lines of text Without tag, Enter/Return has no effect on browser display

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Closing Container Tags  XHTML rules require all tags have closers  Opening tag has tag code:  e.g.  Closing tag has forward slash in front of code  e.g.  Content placed between open and close tags  CONTENT  Browsers are forgiving, but XHTML rules are strict

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Attributes  Most tags can have attributes  Attribute is:  Information in the opening tag  Specification for what the tag is supposed to do  Attribute syntax:  attributename = “value”  Attribute – value pair

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 The align Attribute  Specifies how text within the paragraph should be aligned  Options include: left, center, right, justify  Example:  CONTENT

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Deprecation  Some HTML tags or attributes are deprecated  Deprecated tags/attributes are old (obsolete) versions  Replaced by newer, improved XHTML tags/attributes  Most browsers support deprecated tags  The align attribute is deprecated  Modern alignment is handled through style sheets

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Effects of align attribute Effect of

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 The Line Break Tag  An empty tag (contains no content)  Close symbol placed at the end of open tag  instead of  No white space placed between lines  unlike  Line break is deprecated  XHTML provides tag

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Effects of Tag tag was placed here

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Creating Headings  Concepts  Six levels of heading tags  Heading alignment  XHTML 2.0’s structured headings Hands-on Exercise  Add headings to a Web page

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Headings Tags  Boldfaced and large font text  Six levels of headings:  through  is largest  is smallest

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Structured Headings  XHTML 2.0 provides structured headings  tags placed within elements  No numbering of tags  nesting determines size of content

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Effects of Headings Tags Dr. Know-It-All Recommendations Upcoming Books

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Blockquote Tag   Indents contained text  Indentation from left and right margins  Nest blockquote tags to increase indentation

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Effects of Blockquote Tag tag causes this indentation Nested causes more indentation

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Citations in Blockquote  Use of cite attribute  Specify source URL  URL = Uniform Resource Locator

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Justify  Align attribute can be used for tag  One align option is “justify”   Justify value stretches text to fill entire margin space