Introduction to XHTML September 13, 2005

Components of website development

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

main.html (1 of 1) XML Prolog:

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

4.4 W3C XHTML Validation Service

XHTML Tags

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

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 – 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:

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

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

4.11 Web Resources tors_r.html hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML

Tables and Forms

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)

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

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

5.4 Basic XHTML Forms Element form –Attribute action Specifies the URL of a script that processes the form ing 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

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

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

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

5.11 Web Resources html