1 / 20

Chapter 5: XHTML, Part 2

Chapter 5: XHTML, Part 2. CIS 275—Web Application Development for Business I. 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 <tr> tag defines table _______

rhonda-cook
Télécharger la présentation

Chapter 5: XHTML, Part 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 <tr> tag defines table _______ • The <td> tag defines table _____ cells (or just “cells”) • The <caption> tag describes the table’s content. • The <thead>, <tbody>, and <tfoot> tags define the three major sections of a table. • Examples of commonly used attributes • <table border=“1” width=“100%” summary=“This …”> • <tr align=“left” valign=“top”> • <td align=“center” rowspan=“2”> layout <table> rows data

  3. Example <html> <body> <table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> 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. Simple Example and Tips

  4. <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>An XHTML Table</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <th align="left">Sum</th> <th align="right">$271.10</th> <th align="right">$94.65</th> </tr> </table> </body> </html> Example of Valid XHTML

  5. Spanning Columns <html> <body> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html>

  6. Spanning Rows <html> <body> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>

  7. Forms input • Forms are used to capture ______ from users • A form is defined by the <form> tag • Attributes of the <form> tag • name (each form should have a name) • Example: <form id=“student_info” name=“input”> • action (what will happen when the form is __________) • Example: <form id=“student_info” name=“student_info” action=“mailto:richardjohnson@smsu.edu”> • method (data exchange method, either “get” or “______”) <form id="input" name=“input” action="html_form_action.asp" method=“post"> • The end of the form is designated with ________ submitted post </form>

  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: • <input> for text, radio buttons, checkboxes, and push buttons • The _______ attribute is used to specify each kind of element • <select> for drop-down _______ • <option> tags are used with <select> to specify each item • <textarea> for a scrollable text area • The _______ attribute is used for each element to identify the field. • Check the examples for more details. field type list name

  9. <html> <body> <form action=“mailto:someone@w3schools.com" method="post" enctype="text/plain"> <p> Name: <input type="text" name="name" value="yourname" size="20“ /> <br /> Male: <input type="radio" name="Sex" value="Male" /> <br /> Female: <input type="radio" name="Sex" value="Female“ /> <br /> Mail:<input type="text" name="mail" value="yourmail" size="20“ /> Comment:<input type="text" name="comment" value="yourcomment" size="40“ /> <br /><br /> <input type="submit"value="Send“ /> <input type="reset" value="Reset“ /> </form> </p> </body> </html> Sample Form

  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 server side client side

  11. Defining an Image Map • The syntax for an image map is: <map id=“_____________”> <area shape = “________” coords =“_____________” href =“_____” alt=“…” > <area shape = “________” coords =“_____________” href =“_____” alt=“…” > <area shape = “________” coords =“_____________” href =“_____” alt=“…” > </map > • The shape property can have the values __________, __________, and _________. • The coords property has values, measured in _______, depending on the shape. mapid shape coordinates URL RECT CIRCLE POLY pixels

  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. <img src=“____________” usemap=“#____________” alt=“…”> x_left, y_upper, x_right, y_lower x_center, y_center, radius x1, y1, x2, y2, x3, y3, . . . usemap <img> filename mapid

  13. Meta • The <meta> tag is used to provide specific information about a document. Some _______ engines uses <meta> to index web page contents. • This meta element is required for character encoding: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> (required for HTML 4.01 validation) • This meta element gives a description of your page: <meta name=“___________" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> • This meta element defines keywords for your page: <meta name=“__________" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> search description keywords

  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 <frameset> tag defines the _______ of frames in a window (rows or _________). • <frameset cols="25%,75%"> … </frameset> • Values for rows or cols can be percentages, pixels, or ___. • The <frame> tag defines which web page will occupy the frame. Below, two columns, two web pages. <frameset cols="25%, *">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset> window frame layout columns *

  15. More on Frames • A ________ frame exists when a new <frameset> tag substitutes for an existing <frame> tag (see example). • A <frameset> tag can have _________ such as noresize=“true” and noscroll. • <frameset rows=“20%, *” noresize=“true” noscroll> • A <frame> tag can have a name attribute, such as name=“main”. • <frame src="frame_b.htm” name=“main” > • A hyperlink can specify the destination _______. • <a href ="link.htm#C10" target =“main">Look at Chapter 10!</a> nested attributes frame

  16. Sample Frames Page <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Frames Page</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <frameset rows="25%, *"> <frame src="contents.htm" /> <frame src="resume.htm" name="main" /> </frameset> </html>

  17. Head • The head element should contain only information _______ the document. • The tags that are legal inside the head section are <base>, <link>, <meta>, _______, <style>, and <script>. • Examples • <base target="_blank"> (all ________ will use this target) • <link rel="stylesheet" type="text/css" href="mystyle.css"> (links this page to mystyle.css) • <title>Richard Johnson’s Web Site</title> (appears in ______ bar of browser window) • Others explained later about <title> hyperlinks title

  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 • <a href="news:alt.html">HTML Newsgroup</a> • <a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a> http domain www 80 server document

  19. Scripts • The purpose of adding scripts to web page is to make them more dynamic and ___________. • Example: In the <body> section, add the following: <script type="text/javascript"> <!-- document.write("Hello World!") // --> </script> <noscript>Your browser doesn’t support JavaScript! </noscript> • 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. 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

More Related