1. Chapter 5: XHTML, Part 2 CIS 275—Web Application Development for Business I

2. 2 Tables Tables in HTML documents are used for Defining page ________ Displaying data Tags associated with tables The ________ tag identifies the existence of a table The tag defines table _______ The tag defines table _____ cells (or just “cells”) The tag describes the table’s content. The,, and tags define the three major sections of a table. Examples of commonly used attributes layout rows data

3. 3 Simple Example and Tips Example row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Table Tips First, write the HTML code for a standard r x c table Begin to modify that code to create the desired effects, such as alignment, spanning, nested tables, etc.

4. 4 Example of Valid XHTML An XHTML Table Money spent on.... January February Clothes $241.10 $50.20 Make-Up $30.00 $44.45 Sum $271.10 $94.65

5. 5 Spanning Columns Name Telephone Bill Gates 555 77 854 555 77 855

6. 6 Spanning Rows First Name: Bill Gates Telephone: 555 77 854 555 77 855

7. 7 Forms Forms are used to capture ______ from users A form is defined by the tag Attributes of the tag name (each form should have a name) Example: action (what will happen when the form is __________) Example: method (data exchange method, either “get” or “______”)data exchange method The end of the form is designated with ________ input submitted post

8. 8 Form Elements A form element is an object (i.e., a ______) within a form used to collect a single piece of information. Tags used for form elements: for text, radio buttons, checkboxes, and push buttons The _______ attribute is used to specify each kind of element for drop-down _______ tags are used with to specify each item for a scrollable text area The _______ attribute is used for each element to identify the field. Check the examples for more details.examples field type list name

9. 9 Sample Form Name: <input type="text" name="name" value="yourname" size="20“ /> Male: Female: Mail:<input type="text" name="mail" value="yourmail" size="20“ /> Comment:<input type="text" name="comment" value="yourcomment" size="40“ />

10. 10 Introduction to Image Maps A ___________ is an area of an image that acts as a link. An image ______ is a list of coordinates that define hotspots. A _______-_____ image map is processed by the server (Web site host computer). A _______-_____ image map is downloaded to and processed by the client computer. hotspot map serverside clientside

11. 11 Defining an Image Map The syntax for an image map is: The shape property can have the values __________, __________, and _________. The coords property has values, measured in _______, depending on the shape. mapid shapecoordinatesURL RECTCIRCLEPOLY pixels

12. 12 3.3 Image Map Coordinates The coordinate syntax for a rectangle is: coords =“______________________________________” The coordinate syntax for a circle is: coords =“______________________________________” The coordinate syntax for a polygon is: coords =“______________________________________” For a graphic to use an image map requires the __________ property in the ______ tag. x_left, y_upper, x_right, y_lower x_center, y_center, radius x1, y1, x2, y2, x3, y3,... usemap filenamemapid

13. 13 Meta The tag is used to provide specific information about a document. Some _______ engines uses to index web page contents. This meta element is required for character encoding:character encoding (required for HTML 4.01 validation) This meta element gives a description of your page: This meta element defines keywords for your page: search description keywords

14. 14 Frames The purpose of frames is to display more than one web page in a single browser _________. Each HTML document is called a _______. The tag defines the _______ of frames in a window (rows or _________). … Values for rows or cols can be percentages, pixels, or ___. The tag defines which web page will occupy the frame. Below, two columns, two web pages. window frame layout columns *

15. 15 More on Frames A ________ frame exists when a new tag substitutes for an existing tag (see example). example A tag can have _________ such as noresize=“true” and noscroll. A tag can have a name attribute, such as name=“main”. A hyperlink can specify the destination _______. Look at Chapter 10! nested attributes frame

16. 16 Sample Frames Page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Frames Page

17. 17 Head The head element should contain only information _______ the document. The tags that are legal inside the head section are,,, _______,, and. Examples (all ________ will use this target) (links this page to mystyle.css) Richard Johnson’s Web Site (appears in ______ bar of browser window) Others explained later about hyperlinks title

18. 18 URL’s Following is the general format of a URL: scheme://host.domain:port/path/filename The scheme is the type of Internet service, such as _____ Examples of _______ are w3schools.com or ibm.com The host is the domain host—by default it is ______ The port is the port number of the host—default is ____ The path is the sub directory on the ________ The filename is the name of the _________. If omitted, it is what is set up on the server (such as default.htm). Examples HTML Newsgroup Download WinZip http domain www 80 server document

19. 19 Scripts The purpose of adding scripts to web page is to make them more dynamic and ___________. Example: In the section, add the following: <!-- document.write("Hello World!") // --> Your browser doesn’t support JavaScript! Notes on the code above: A browser that supports scripting will ignore the __________. The _____ denotes a JavaScript comment A browser that doesn’t support scripting reads <!-- as a __________. interactive <!-- // comment

20. 20 Servers To make your web pages available to the world: Use an ISP (Internet Service _________) to host your site. Install PWS (_________ Web Server, included with Windows XP Profession (not Home Edition). Use Windows 2000 Server built-in IIS (Internet ___________ Services). Use Windows Server 2003 with IIS 6.0. Provider Personal Information