Introduction to XHTML
September 13, 2005
Components of website development
http://www.webstyleguide.com
Components of website development
• Content • Structure • Format and design • Dynamics and interactivity – Forms – Client-side programming – Server-side programming – Databases
Content
• Purpose, goal and objectives of the site • Audience • Structure of content • Format and design of content • Interactivity and enhancement of content presentation
Structure
• HTML vs. XHTML – HTML: Anything goes – XHTML: Strict conformance to standards • Internal page structure – Page sections – Templates • Site structure – Folder hierarchy – Content vs. resources – Maintaining file links
Format and design
• Graphics and aesthetics – http://webclipart.about.com
• Functionality, usability, and accessibility
Web graphics
• Bitmap vs. vector graphics • GIF (Graphical Image Format) – 256 colours only with transparency – Smaller size, but noncompressible – Supports animation – Best for line images, diagrams, animated GIFs • JPEG (Joint Photographic Experts Group) – 24-bit (true colour), no transparency – Compressible, but with loss of quality – Best for photographs and fine, complex art • PNG (Portable Network Graphics) – 256 to 24-bit colours with advanced transparency – Advanced meta information – Smallest file sizes attainable – Best of GIF (except animation) plus best of JPEG
4.1 Introduction
• Extensible HyperText Markup Language – XHTML • A markup language • Separation of the presentation of a document from the structure of the document’s information • Based on HTML – Technology of the World Wide Web Consortium (W3C) • Flavours – XHTML 1.0 Transitional: Half way between HTML and Strict – XHTML 1.0 Frameset: Transitional plus frames – XHTML 1.0 Strict: No frames, no formatting—pure structure – XHTML 1.1: Modularized—Latest version
4.2 Editing XHTML
• XHTML documents – Source-code form – Text editor (e.g. Notepad) or HTML editor (e.g Dreamweaver) • http://www.snapfiles.com/freeware/webpublish/fweditors_r.html
• http://www.pspad.com
– .html
or .htm
file-name extension – Web server • Stores XHTML documents – Web browser • Requests XHTML documents
4.3 First XHTML Example
• XHTML comments – Start with • html element – head element • Head section – Title of the document – Style sheets and scripts – body element • Body section – Page’s content the browser displays • Tags – Start tag • attributes (provide additional information about an element) – name and value (separated by an equal sign) – End tag
1
2
3
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
4 5
6
7 8
9
10
Internet and WWW How to Program - Welcome
11
main.html
12 13
14
Welcome to XHTML!
(1 of 1)
15
16
XML Prolog: http://xmlwriter.net/xml_guide/doctype_declaration.shtml
4.4 W3C XHTML Validation Service
• Validation service ( validator.w3.org
– Checking a document’s syntax • URL that specifies the location of the file • Uploading a file to the site http://validator.w3.org/file-upload.html
)
4.4 W3C XHTML Validation Service
4.4 W3C XHTML Validation Service
XHTML Tags
http://www.w3schools.com/tags/ref_byfunc.asp
5.8
meta
Elements
• Specify information about a document • Define keywords for search engines: – • Define a description of your web page: – • Refresh page every 5 seconds: – – Examples from http://www.w3schools.com
XHTML Basic Tags
•
to – Hierarchical header levels •
– Paragraph •
– Line break •
– Horizontal rule •
Character formatting
• and – Bolded text—XHTML vs. HTML • and – Italicized text—XHTML vs. HTML • and – Superscripts and subscripts • Deprecated in XHTML: – and • HTML entities – < = < > = > & = & © = © – Space character = (non-breaking space)
The heart of HTML: Links!
• … – Anchor: Just a hyperlink • External links – Web pages • Same website, same folder—relative referencing – A sister page • Same website, different folder —relative referencing – A neighbouring page • Different website (or could be same website)—absolute referencing – A distant page – E-mail addresses • Mail me – FTP, other Internet resources • Download me! • Internal links – id attribute
The face of HTML: Images!
• ![]()
• src attribute – Specifies the location of the image file • alt attribute – Alternate text, if image cannot display • width and height – Scales image, and helps to render and load faster • Pixels (“picture elements”) – Most monitors display 72 ppi (pixels per inch) – Standard monitor resolution is 800 x 600 pixels
5.7 Creating and Using Image Maps
• Designate certain areas of an image (called hotspots) as links • Element map – Attributes id and name • Identifies the image map • Because of Firefox bug, use both id and name – Element area • Defines hotspot • Attribute shape and coords – Specify the hotspot’s shape and coordinates in pixels • Rectangular ( shape = “rect” ) • Polygon ( shape = “poly” ) • Circle ( shape = “circle” ) • For easy image maps, use a tool – GeoHTML: http://www.snapfiles.com/freeware/webpublish/fwimagemap_r.html
Lists
•
and – Unordered and ordered (numbered) lists • - – List item; that is, an individual item in a list
Frames
•