XHTML1-1 Extensible HyperText Markup Language (XHTML) Xingquan (Hill) Zhu
XHTML1-2 XHTML What is a Markup Language? Why Extensible HTML? XHTML vs HTML XHTML Rules Basic XHTML Components Headers Links Special Characters & Line Break Images Lists Tables Forms Framesets
XHTML1-3 XHTML Standard Standard (recommendation) developed by World Wide Web Consortium Currently version 1.1 Version 2 under review Vendors sometimes vary from standard
XHTML1-4 What is a Markup Language A language that has codes for indicating layout and styling (such as boldface, italics, paragraphs, placement of graphics, etc.) within a text file Best known markup language – HTML What is the HyperText? –A database system (1960) –Objects can be creatively “linked” to each other Simple HTML example Other markup languages Tex (Latex) (example) SGML (Standard General ML) XML (Extensible Markup Language)
XHTML1-5 Why Extensible HTML? HTML is the ancestor of XHTML HTML 1.0, 2.0, 3.0, 3.2, 4.0, 4.01 XHTML 1.0 is the reformulation of HTML 4.01 (2000) HTML vs XHTML HTML: lax syntax rules, much easier to write Huge number of HTML resources available Why? Lack consistency Hard to check HTML documents’ syntactic correctness.
XHTML1-6 An XHTML example file <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Our first XHTML document Greetings from your Webmaster! Xml declaration element SGML DOCTYPE command Root element
XHTML1-7 W3C Validation Service Validate structure of a document Can specify a url to validate Upload a file to validate
XHTML1-8 XHTML Format XHTML Plain text Free form Content Text Links Tags (Elements) Specify structure Bounded by Often enclose attribute values
XHTML1-9 XHTML Elements (Tags) Specify content characteristics Generally paired Bound a region Start with : open tag End with : closing tag If tag is self-contained, use
XHTML1-10 XHTML Attributes Specify alternative meanings of a tag Where Between tag name and its right-pointed bracket In specified keyword form Attribute Name = “Attribute value” Attribute values must be delimited by double quotes
XHTML1-11 XHTML comments Enhance the readability of your XHTML files Browsers simply ignore all the enclosed content.
XHTML1-12 Tips in writhing XHTML documents Comments Nested elements In case of wrong elements or attribute values…
XHTML1-13 XHTML Rules Required elements in an XHTML file? doctype, html, head, title, and body Major differences with HTML Tag names must be in lowercase XHTML is an application of XML, which is case sensitive All XHTML elements must be closed Elements in pairs Self-contained elements XHTML elements must be properly nested A nested element’s end tag must appear before the enclosing element’s end tag. XHTML documents must be well-formed Nested in Elements in pairs & properly nested
XHTML1-14 XHTML What is a Markup Language? Why Extensible HTML? XHTML vs HTML XHTML Rules Basic XHTML Components Headers Links Text Special Characters & Line Break Images Lists Tables Forms Framesets
XHTML1-15 XHTML: No attribute goes with Nested tags Name, content http-equiv="REFRESH“, Content=“delay; address” (redirect your webpage to “address”) CSS definition Script
XHTML1-16 XHTML: Attributes bgcolor background text link alink vlink
XHTML1-17 Headers and Links Six levels of headers, h1 – h 6 Id Align (left, right, center, justify) Can we change each header? (font, color, etc.) element: cause browser to load another object, a page or a link Href Link #ID Link to an “mailto:” Directory Target “_blank” Title Why?
XHTML1-18 Text: Format, Font, & Color Format Elements element size: 1-7 color: red, #234567, rgb(23,45,67); face: Arial, Times Other font related elements How to control word space, line space? CSS
XHTML1-19 Other text related tags horizontal line Align, size, width How can we control the color? CSS (IE does not support)
XHTML1-20 Special Characters & Line Breaks Special characters (Entities) Often used when character has special xhtml meaning or is not on keyboard Coded &xx; Examples: < > & &fracl4; ° © Line break forced by End of header Paragraph Line break tag
XHTML1-21 Images Typical web images Jpeg Gif Element Src (required) Alt (required) width, height, border align title vspace, hspace Using image as a link
XHTML1-22 Image Maps Design Certain areas of an image (hotspots) as links <area href=“1.html” shape=“rect” coords=“1,1, 200,100” alt=“fau” title=“florida atlantic university” /> <area href=“2.html” shape=“poly” coords=“1,1, xxx, xxx, 200,100” alt=“fau CS&E” title=“Computer Science & Eng.” /> <area href=“3.html” shape=“circle” coords=“100,100,20” alt=“fau ME” title=“Mechanical Engineering” /> ExampleExample
XHTML1-23 Lists Ordered list “Start” attribute Unordered list Definition list : definition term : definition description
XHTML1-24 List: Cont. List-style-type: Disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. Nested lists:
XHTML1-25 XHTML Rules Required elements in an XHTML file? doctype, html, head, title, and body Major differences with HTML Tag names must be in lowercase XHTML is an application of XML, which is case sensitive All XHTML elements must be closed Elements in pairs Self-contained elements XHTML elements must be properly nested A nested element’s end tag must appear before the enclosing element’s end tag. XHTML documents must be well-formed Nested in Elements in pairs & properly nested
XHTML1-26 Q1. Will XHTML replace HML?
XHTML1-27 Q2. The DOCTYPE declaration has no closing tag ?
XHTML1-28 Ques3. Is this a correct XHTML doc.? Coffee Tea Black tea Green tea Milk
XHTML1-29 Homework 1. (Due Sept. 8) 2. (Due Sept. 15)