Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download CIS 397—Web Design - Missouri State University
Document related concepts
Transcript
Chapter 5: XHTML, Part 2 CIS 275—Web Application Development for Business I Tables Tables in HTML documents are used for Tags associated with tables layout Defining page ________ Displaying data <table> tag identifies the existence of a table The ________ rows The <tr> tag defines table _______ data cells (or just “cells”) The <td> tag defines table _____ 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”> 2 Simple Example and Tips Example <html> <body> <table> <tr> <td>row <td>row </tr> <tr> <td>row <td>row </tr> </table> </body> </html> Table Tips 1, cell 1</td> 1, cell 2</td> 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. 2, cell 1</td> 2, cell 2</td> 3 Example of Valid XHTML <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/x html11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>An XHTML Table</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-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> 4 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> 5 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> 6 Forms input from users Forms are used to capture ______ 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”> submitted action (what will happen when the form is __________) Example: <form id=“student_info” name=“student_info” action=“mailto:[email protected]”> post method (data exchange method, either “get” or “______”) <form id="input" name=“input” action="html_form_action.asp" method=“post"> </form> The end of the form is designated with ________ 7 Form Elements A form element is an object (i.e., a ______) field 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 list <select> for drop-down _______ type attribute is used to specify each kind of element The _______ <option> tags are used with <select> to specify each item <textarea> for a scrollable text area name attribute is used for each element to The _______ identify the field. Check the examples for more details. 8 Sample Form <html> <body> <form action=“mailto:someone@w3scho ols.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> 9 Introduction to Image Maps hotspot is an area of an image that acts as A ___________ a link. map is a list of coordinates that An image ______ define hotspots. A _______-_____ server side image map is processed by the server (Web site host computer). client side image map is downloaded to A _______-_____ and processed by the client computer. 10 Defining an Image Map The syntax for an image map is: mapid <map id=“_____________”> shape coords =“_____________” coordinates href =“_____” URL <area shape = “________” alt=“…” > <area shape = “________” coords =“_____________” href =“_____” alt=“…” > <area shape = “________” coords =“_____________” href =“_____” alt=“…” > </map > The shape property can have the values RECT CIRCLE and _________. POLY __________, __________, The coords property has values, measured in _______, pixels depending on the shape. 11 3.3 Image Map Coordinates The coordinate syntax for a rectangle is: The coordinate syntax for a circle is: x_left, y_upper, x_right, y_lower coords =“______________________________________” x_center, y_center, radius coords =“______________________________________” The coordinate syntax for a polygon is: x1, y1, x2, y2, x3, y3, . . . coords =“______________________________________” For a graphic to use an image map requires the usemap property in the ______ <img> tag. __________ filename mapid <img src=“____________” usemap=“#____________” alt=“…”> 12 Meta The <meta> tag is used to provide specific search 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: description content="Free Web tutorials <meta name=“___________" on HTML, CSS, XML, and XHTML"> This meta element defines keywords for your page: keywords content="HTML, DHTML, CSS, <meta name=“__________" XML, XHTML, JavaScript, VBScript"> 13 Frames The purpose of frames is to display more than one window web page in a single browser _________. frame Each HTML document is called a _______. layout of frames The <frameset> tag defines the _______ columns 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> 14 More on Frames A ________ nested frame exists when a new <frameset> tag substitutes for an existing <frame> tag (see example). A <frameset> tag can have _________ attributes such as noresize=“true” and noscroll. A <frame> tag can have a name attribute, such as name=“main”. <frameset rows=“20%, *” noresize=“true” noscroll> <frame src="frame_b.htm” name=“main” > frame A hyperlink can specify the destination _______. <a href ="link.htm#C10" target =“main">Look at Chapter 15 10!</a> 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=ISO8859-1" /> </head> <frameset rows="25%, *"> <frame src="contents.htm" /> <frame src="resume.htm" name="main" /> </frameset> </html> 16 Head The head element should contain only information about the document. _______ The tags that are legal inside the head section are <title> <style>, and <base>, <link>, <meta>, _______, <script>. Examples hyperlinks will use this target) <base target="_blank"> (all ________ <link rel="stylesheet" type="text/css" href="mystyle.css"> (links this page to mystyle.css) <title>Richard Johnson’s Web Site</title> (appears in ______ title bar of browser window) Others explained later 17 URL’s Following is the general format of a URL: scheme://host.domain:port/path/filename http The scheme is the type of Internet service, such as _____ Examples of _______ domain are w3schools.com or ibm.com www The host is the domain host—by default it is ______ 80 The port is the port number of the host—default is ____ server The path is the sub directory on the ________ document If omitted, it The filename is the name of the _________. 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> 18 Scripts The purpose of adding scripts to web page is to interactive 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 __________. // denotes a JavaScript comment The _____ comment A browser that doesn’t support scripting reads <!-- as a __________. 19 Servers To make your web pages available to the world: Provider Use an ISP (Internet Service _________) to host your site. Personal Web Server, included with Install PWS (_________ Windows XP Profession (not Home Edition). Use Windows 2000 Server built-in IIS (Internet Information Services). ___________ Use Windows Server 2003 with IIS 6.0. 20
