xhtml1-1 extensible hypertext markup language (xhtml) xingquan (hill) zhu [email protected]
TRANSCRIPT
XHTML 1-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
XHTML 1-3
XHTML Standard
Standard (recommendation) developed by World Wide Web Consortium
http://www.w3c.org Currently version 1.1 Version 2 under review Vendors sometimes vary from standard
XHTML 1-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)
XHTML 1-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.
XHTML 1-6
An XHTML example file <?xml version = "1.0" encoding = "utf-8"?> <!-- greet.html A trivial document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Our first XHTML document </title> </head> <body> <p> Greetings from your Webmaster! </p> </body> </html>
Xml declaration element
SGML DOCTYPE command
Root element
XHTML 1-7
W3C Validation Service
Validate structure of a document
http://validator.w3.org
Can specify a • url to validate• Upload a file to validate
XHTML 1-8
XHTML Format
XHTML Plain text Free form Content
• Text• Links
Tags (Elements)• Specify structure• Bounded by <…>• Often enclose attribute values
XHTML 1-9
XHTML Elements (Tags)
Specify content characteristics Generally paired
Bound a region Start with <xx>: open tag End with </xx>: closing tag If tag is self-contained, use <xx />
XHTML 1-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
XHTML 1-11
XHTML comments
Enhance the readability of your XHTML files
<!– xxxxx --> Browsers simply ignore all the enclosed
content.
XHTML 1-12
Tips in writhing XHTML documents
Comments Nested elements
In case of wrong elements or attribute values…
XHTML 1-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 <html>• Elements in pairs & properly nested
XHTML 1-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
XHTML 1-15
XHTML: <head>
No attribute goes with <head> Nested tags
<title> <meta>
• Name, content• http-equiv="REFRESH“, Content=“delay;
address” (redirect your webpage to “address”) CSS definition Script
XHTML 1-16
XHTML: <body>
Attributes bgcolor background text link alink vlink
XHTML 1-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.)
<a> element: cause browser to load another object, a page or a link Href
• Link• #ID• Link to an email “mailto:”• Directory
Target• “_blank”
Title• Why?
XHTML 1-18
Text: Format, Font, & Color
Format Elements <p> <pre> <blockquote> <del> <strike> <sub> <sup> <strong> <b> <em> <i> <u> <div>
<font> element size: 1-7 color: red, #234567, rgb(23,45,67); face: Arial, Times
Other font related elements <big> <small>
How to control word space, line space? CSS
XHTML 1-19
Other text related tags
<hr > horizontal line Align, size, width How can we control the color?
• CSS
<blink> (IE does not support) <marquee>
XHTML 1-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 <p>• Line break tag <br>
XHTML 1-21
Images
Typical web images Jpeg Gif
<img> Element Src (required) Alt (required) width, height, border align title vspace, hspace
Using image as a link
XHTML 1-22
Image Maps Design Certain areas of an image (hotspots) as
links <map id=“picture”> <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” />
</map> <img src=“fau.jpg” alt=“fau campus”
usemap=“#picture” /> Example
XHTML 1-23
Lists Ordered list
<ol>• <li>• “Start” attribute
Unordered list <ul>
• <li>
Definition list <dl>
• <dt>: definition term• <dd>: definition description
XHTML 1-24
List: Cont.
List-style-type: Disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha, upper-alpha, none.
<ol style="list-style-type: circle"> <li style=“list-style-type: upper-roman”>
Nested lists:
XHTML 1-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 <html>• Elements in pairs & properly nested
XHTML 1-26
Q1.
Will XHTML replace HML?
XHTML 1-27
Q2.
The DOCTYPE declaration has no closing tag ?
XHTML 1-28
Ques3. Is this a correct XHTML doc.?
<ul> <li>Coffee</li> <li>Tea </li> <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li></ul>
XHTML 1-29
Homework
1. (Due Sept. 8) 2. (Due Sept. 15)