Introduction to XHTML September 13, 2005. Components of website development .
33
Introduction to XHTML September 13, 2005
-
Upload
patrick-parker -
Category
Documents
-
view
217 -
download
0
Transcript of Introduction to XHTML September 13, 2005. Components of website development .
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 <!-- and end 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)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.1: main.html -->
6 <!-- Our first Web page -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Welcome</title>
11 </head>
12
13 <body>
14 <p>Welcome to XHTML!</p>
15 </body>
16 </html>
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:
– <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />
• Define a description of your web page:– <meta name="description" content="Free Web tutorials on
HTML, CSS, XML, and XHTML" />
• Refresh page every 5 seconds:– <meta http-equiv="refresh" content="5" />
– Examples from http://www.w3schools.com
XHTML Basic Tags
• <h1> to <h6>– Hierarchical header levels
• <p>– Paragraph
• <br />– Line break
• <hr />– Horizontal rule
• <!-- XHTML comment -->
Character formatting
• <strong> and <b>– Bolded text—XHTML vs. HTML
• <em> and <i>– Italicized text—XHTML vs. HTML
• <sup> and <sub>– Superscripts and subscripts
• Deprecated in XHTML:– <font> and <u>
• HTML entities– < = < > = > & = & © = ©– Space character = (non-breaking space)
The heart of HTML: Links!• <a> … </a>
– Anchor: Just a hyperlink
• External links– Web pages
• Same website, same folder—relative referencing– <a href="webpage.html">A sister page</a>
• Same website, different folder —relative referencing– <a href="../folder/webpage.html">A neighbouring page</a>
• Different website (or could be same website)—absolute referencing– <a href="http://www.domain.com/webpage.html">A distant page</a>
– E-mail addresses• <a href="mailto:[email protected]">Mail me</a>
– FTP, other Internet resources• <a href="ftp://ftp.domain.com/hotfiles.zip">Download me!</a>
• Internal links– id attribute
The face of HTML: Images!
• <img />• 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
• <ul> and <ol>– Unordered and ordered (numbered) lists
• <li>– List item; that is, an individual item in a list
Frames
• <frameset>– Defines a group of frames– cols, rows attributes define widths/heights of frames in
either pixels or percentages of the screen• <frame>
– Defines a single frame within a group• <noframes>
– Alternate XHTML to show for browsers that don’t support frames
• <iframe>– Inline frame that doesn’t have to hug a border—full
window within a window
4.11 Web Resources
• http://www.webstyleguide.com• http://webclipart.about.com• http://www.snapfiles.com/freeware/webpublish/
fweditors_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
Tables and Forms
http://www.w3schools.com/tags/ref_byfunc.asp
5.2 Basic XHTML Tables • Organize data into rows and columns• Attributes of <table>
– 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 <tr>– Data cells <td>
• Attributes:– align: Aligns data horizontally– valign: Aligns data vertically
• Optional elements– Caption <caption>
• Describes the table’s content and helps text-based browsers interpret table data
– Head section <thead>• Contains header information such as column names
– Table body <tbody>– Foot section <tfoot>
• Footer for the entire table– Table headings <th>
• Specially-formatted <td> elements to designated row or column headers• Can appear in any section, just like <td>
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
• <td> 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• 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
Form <input> types
• <input>: 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!
• <textarea>– Multi-line text entry
Buttons for forms
• <button>– type=“submit”
• Button that activates the action for the form
– type=“reset”• Resets all form fields to default values
– type=“button”• Generic, programmable button
• <input>– type=“submit” and type=“reset” are the same as
<button> with those types
Multi-choice selections
• <input>– 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
– <label> tag can be used for clickable text• <select>
– Drop-down listbox– Each <option> is a distinct option
• value is programmatic value• selected=“selected” is default value for the <select> item
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
