Introduction to Website Development

Transcript Introduction to 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 
• 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
<?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

6

7
8
9
10
11
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
12
13
14
15
<body>
main.html
(1 of 1)
<p>Welcome to XHTML!</p>
</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
• 
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/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
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

Introduction to Website Development

Transcript Introduction to Website Development

Directory