1. Introduction to XHTML September 13, 2005

2. Components of website development http://www.webstyleguide.com

3. Components of website development Content Structure Format and design Dynamics and interactivity –Forms –Client-side programming –Server-side programming –Databases

4. Content Purpose, goal and objectives of the site Audience Structure of content Format and design of content Interactivity and enhancement of content presentation

5. 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

6. Format and design Graphics and aesthetics –http://webclipart.about.comhttp://webclipart.about.com Functionality, usability, and accessibility

7. 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

8. 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

9. 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

10. 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

11. main.html (1 of 1) XML Prolog: http://xmlwriter.net/xml_guide/doctype_declaration.shtmlhttp://xmlwriter.net/xml_guide/doctype_declaration.shtml

12. 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 http://validator.w3.org/file-upload.html

13. 4.4 W3C XHTML Validation Service

15. XHTML Tags http://www.w3schools.com/tags/ref_byfunc.asp

16. 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

17. XHTML Basic Tags to –Hierarchical header levels –Paragraph –Line break –Horizontal rule

18. 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)

19. 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

20. 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

21. 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 http://www.snapfiles.com/freeware/webpublish/fwimagemap_r.html

22. Lists and –Unordered and ordered (numbered) lists –List item; that is, an individual item in a list

23. Frames –Defines a group of frames –cols, rows attributes define widths/heights of frames in either pixels or percentages of the screen –Defines a single frame within a group –Alternate XHTML to show for browsers that don’t support frames –Inline frame that doesn’t have to hug a border—full window within a window

24. 4.11 Web Resources http://www.webstyleguide.com http://webclipart.about.com http://www.snapfiles.com/freeware/webpublish/fwedi tors_r.html http://validator.w3.org/file-upload.html http://www.w3schools.com/tags/ref_byfunc.asp www.w3.org/TR/xhtml11 www.xhtml.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML www.w3.org/TR/2001/REC-xhtml11-20010531

25. Tables and Forms http://www.w3schools.com/tags/ref_byfunc.asp

26. 5.2 Basic XHTML Tables Organize data into rows and columns Attributes of –Border Specifies the table’s border thickness in pixels –Width Specifies the table’s width in pixels or % –Summary Describes the table’s contents Caption –Describes the table’s content and helps text-based browsers interpret table data Head section (header cell, defined with a thead element) –Contains header information such as column names –tr element (defines an individual table row) –th element (defines the columns in the head section) Foot section (defined with a tfoot element) Table body (defined with a tbody element) Data cells (defined with td element)

27. Elements of XHTML Tables Essential elements –Table rows –Data cells Attributes: –align: Aligns data horizontally –valign: Aligns data vertically Optional elements –Caption Describes the table’s content and helps text-based browsers interpret table data –Head section Contains header information such as column names –Table body –Foot section Footer for the entire table –Table headings Specially-formatted elements to designated row or column headers Can appear in any section, just like

28. Merging cells in tables Element colgroup –Groups and formats columns Element col –Attributes align: Determines the alignment of text in the column span: Determines how many columns the col element formats attributes rowspan and colspan –Specify the number of rows or columns occupied by a cell

29. 5.4 Basic XHTML Forms Element form –Attribute action Specifies the URL of a script that processes the form E-mailing form results to you is an option –Attribute method Specifies how the form’s data is sent to Web server method = “get” (default) –Appends form data directly to the end of the URL—visible to users method = “post” –Appends form data to the HTTP request—invisible to users –input Specifies data to provide to the script that processes the form

30. Form types : attributes for type –type=“text” (default) –type=“hidden” Variable for developer programming; hidden from users –type=“file” File upload dialogue –type=“password” Masks input of sensitive text Only masks from user—does not encrypt! –Multi-line text entry

31. Buttons for forms –type=“submit” Button that activates the action for the form –type=“reset” Resets all form fields to default values –type=“button” Generic, programmable button –type=“submit” and type=“reset” are the same as with those types

32. Multi-choice selections –type=“checkbox” Select one or more of multiple options –type=“radio” Choose only one of multiple options All radio buttons in a group must have the same name – tag can be used for clickable text –Drop-down listbox –Each is a distinct option value is programmatic value selected=“selected” is default value for the item

33. 5.11 Web Resources http://www.w3schools.com/tags/ref_byfunc.asp www.vbxml.com/xhtml/articles/xhtml_tables www.webreference.com/xml/reference/xhtml. html