张奇 复旦大学 计算机科学技术学院 qz@fudan.edu.cn 2015年4月 多媒体技术基础 第6讲 HTML5 & CSS 多媒体技术基础 第5讲 HTML 张奇 复旦大学 计算机科学技术学院 qz@fudan.edu.cn 2015年4月
Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Elements and Attributes 4.3 Editing XHTML 4.4 Common Elements 4.5 W3C XHTML Validation Service 4.6 Headers 4.7 Linking 4.8 Images 4.9 Special Characters and More Line Breaks 4.10 Unordered Lists 4.11 Nested and Ordered Lists 4.12 Internet and World Wide Web Resources
Presentation of a document vs. structure 4.1 Introduction HTML HyperText Markup Language Not a procedural programming language like C, Fortran, Cobol or Pascal Markup language Identify elements of a page so that a browser can render that page on your computer screen Presentation of a document vs. structure
Forgetting to close tags is a syntax error 4.2 Markup Languages Markup language Used to format text and information HTML Marked up with elements, delineated by tags Tags: keywords contained in pairs of angle brackets HTML tags Not case sensitive Good practice to keep all the letters in one case Forgetting to close tags is a syntax error
HTML files or documents 4.3 Editing HTML HTML files or documents Written in source-code form using text editor Notepad: Start-Programs-Accessories HTML-Kit: http://www.chami.com/html-kit HTML files .htm or .html extensions Name your files to describe their functionality File name of your home page should be index.html Errors in HTML Usually not fatal
4.4 Common Elements Always include the <HTML>…</HTML> tags Comments placed inside <!--…--!> tags HTML documents HEAD section Info about the document Info in header not generally rendered in display window TITLE element names your Web page BODY section Page content Includes text, images, links, forms, etc. Elements include backgrounds, link colors and font faces P element forms a paragraph, blank line before and after
Main.html Program Output 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> Main.html Program Output The text between the title tags appears as the title of the web page. Elements between the body tags of the html document appear in the body of the web page
4.5 W3C XHTML Validation Service Fig. 4.2 Validating an XHTML document. (Courtesy of World Wide Web Consortium (W3C).)
4.5 W3C XHTML Validation Service Fig. 4.3 XHTML validation results. (Courtesy of World Wide Web Consortium (W3C).)
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.4: header.html --> 6 <!-- XHTML headers --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Headers</title> 11 </head> 12 13 <body> 14 15 <h1>Level 1 Header</h1> 16 <h2>Level 2 header</h2> 17 <h3>Level 3 header</h3> 18 <h4>Level 4 header</h4> 19 <h5>Level 5 header</h5> 20 <h6>Level 6 header</h6> 21 22 </body> 23 </html> Header.html Every XHTML document is required to have opening and closing html tags. The font size of the text between tags decreases as the header level increases.
Program Output Select a header based on the amount of emphasis you would like to give that text.
Text between strong tags will appear bold. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.5: links.html --> 6 <!-- Introduction to hyperlinks --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Links</title> 11 </head> 12 13 <body> 14 15 <h1>Here are my favorite sites</h1> 16 17 <p><strong>Click on a name to go to that page.</strong></p> 18 19 <p><a href = "http://www.deitel.com">Deitel</a></p> 20 21 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> 22 23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p> 24 25 <p><a href = "http://www.usatoday.com">USA Today</a></p> 26 27 </body> 28 </html> Links.html Text between strong tags will appear bold. Linking is accomplished in XHTML with the anchor (a) element. The text between the a tags is the anchor for the link. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. The anchor links to the page that’s value is given by the href attribute.
Program Output Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.6: contact.html --> 6 <!-- Adding email hyperlinks --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Contact Page 11 </title> 12 </head> 13 14 <body> 15 16 <p>My email address is 17 <a href = "mailto:deitel@deitel.com"> deitel@deitel.com 18 </a>. Click the address and your browser will open an 19 email message and address it to me.</p> 20 21 </body> 22 </html> Contact.html To create an email link include “mailto:” before the email address in the href attribute.
Program Output When a user clicks on an email link, an email message addressed to the value of the link will open up.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.7: picture.html --> 6 <!-- Adding images with XHTML --> 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 15 <p><img src = "xmlhtp.jpg" height = "238" width = "183" 16 alt = "XML How to Program book cover" /> 17 <img src = "jhtp.jpg" height = "238" width = "183" 18 alt = "Java How to Program book cover" /></p> 19 </body> 20 </html> Picture.html The value of the src attribute of the image element is the location of the image file. The height and width attributes of the image element give the height and width of the image. The value of the alt attribute gives a description of the image. This description is displayed if the image cannot be displayed.
Program Output The second image could not be displayed properly, so the value of its alt attribute is displayed instead.
A line break will render an empty line on a web page. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.8: nav.html --> 6 <!-- Using images as link anchors --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Navigation Bar 11 </title> 12 </head> 13 14 <body> 15 16 <p> 17 <a href = "links.html"> 18 <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /></a><br /> 20 21 <a href = "list.html"> 22 <img src = "buttons/list.jpg" width = "65" 23 height = "50" alt = "List Example Page" /></a><br /> 24 25 <a href = "contact.html"> 26 <img src = "buttons/contact.jpg" width = "65" 27 height = "50" alt = "Contact Page" /></a><br /> 28 29 <a href = "header.html"> 30 <img src = "buttons/header.jpg" width = "65" 31 height = "50" alt = "Header Page" /></a><br /> 32 33 <a href = "table.html"> 34 <img src = "buttons/table.jpg" width = "65" 35 height = "50" alt = "Table Page" /></a><br /> Nav.html Placing an image element between anchor tags, creates an image that is an anchor for a link. A line break will render an empty line on a web page.
Nav.html Program Output 36 37 <a href = "form.html"> 38 <img src = "buttons/form.jpg" width = "65" 39 height = "50" alt = "Feedback Form" /></a><br /> 40 </p> 41 42 </body> 43 </html> Nav.html Program Output Clicking on the image entitled “links” brings the user to the page on the right. Using an image as an anchor works exactly the same as using text.
The horizontal rule element renders a horizontal line on the web page. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.9: contact2.html --> 6 <!-- Inserting special characters --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Contact Page 11 </title> 12 </head> 13 14 <body> 15 16 <!-- Special characters are entered --> 17 <!-- using the form &code; --> 18 <p>My email address is 19 <a href = "mailto:deitel@deitel.com">deitel@deitel.com 20 </a>. Click on the address and your browser will 21 automatically open an email message and address it to my 22 address.</p> 23 24 <hr /> <!-- Inserts a horizontal rule --> 25 26 <p>All information on this site is <strong>©</strong> 27 Deitel <strong>&</strong> Associates, Inc. 2002.</p> 28 29 <!-- Text can be struck out with a set of --> 30 <!-- <del>...</del> tags, it can be set in subscript --> 31 <!-- with <sub>...</sub>, and it can be set into --> 32 <!-- superscript with <sup...</sup> --> 33 <p><del>You may download 3.14 x 10<sup>2</sup> 34 characters worth of information from this site.</del> 35 Only <sub>one</sub> download per hour is permitted.</p> Contact2.html The horizontal rule element renders a horizontal line on the web page. Special characters are denoted with an ampersand (&) and an abbreviation for that character. In this case, the special characters are ampersand and copyright.
Contact2.html Program Output 36 37 <p>Note: <strong>< ¼</strong> of the information 38 presented here is updated daily.</p> 39 40 </body> 41 </html> Contact2.html Program Output Text placed between del tags is struck out.. Text placed between the sub tags is subscripted. Text placed between the sup tags is superscripted.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.10: links2.html --> 6 <!-- Unordered list containing hyperlinks --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Links</title> 11 </head> 12 13 <body> 14 15 <h1>Here are my favorite sites</h1> 16 17 <p><strong>Click on a name to go to that page.</strong></p> 18 19 <ul> 20 <li><a href = "http://www.deitel.com">Deitel</a></li> 21 22 <li><a href = "http://www.prenhall.com">Prentice Hall 23 </a></li> 24 25 <li><a href = "http://www.yahoo.com">Yahoo!</a></li> 26 27 <li><a href = "http://www.usatoday.com">USA Today</a> 28 </li> 29 </ul> 30 </body> 31 </html> Links2.html The entries in an unordered list must be included between the <ul> and </ul> tags. An entry in the list must be placed between the <li> and </li> tags.
Program Output Each entry in the list is rendered on its own line with a bullet before it.
By inserting a list as an entry in another list, lists can be nested. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig. 4.11: list.html --> 6 <!-- Advanced Lists: nested and ordered --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Lists</title> 11 </head> 12 13 <body> 14 15 <h1>The Best Features of the Internet</h1> 16 17 <ul> 18 <li>You can meet new people from countries around 19 the world.</li> 20 <li>You have access to new media as it becomes public: 21 22 <!-- This starts a nested list, which uses a --> 23 <!-- modified bullet. The list ends when you --> 24 <!-- close the <ul> tag --> 25 <ul> 26 <li>New games</li> 27 <li>New applications 28 29 <!-- Another nested list --> 30 <ol type = "I"> 31 <li>For business</li> 32 <li>For pleasure</li> 33 </ol> <!-- Ends the double nested list --> 34 </li> 35 List.html By inserting a list as an entry in another list, lists can be nested. Entries for an ordered list must be placed between the <ol> and </ol> tags.
Text placed between the em tags will be italicized. 36 <li>Around the clock news</li> 37 <li>Search engines</li> 38 <li>Shopping</li> 39 <li>Programming 40 41 <ol type = "a"> 42 <li>XML</li> 43 <li>Java</li> 44 <li>XHTML</li> 45 <li>Scripts</li> 46 <li>New languages</li> 47 </ol> 48 49 </li> 50 51 </ul> <!-- Ends the first level nested list --> 52 </li> 53 54 <li>Links</li> 55 <li>Keeping in touch with old friends</li> 56 <li>It is the technology of the future!</li> 57 58 </ul> <!-- Ends the primary unordered list --> 59 60 <h1>My 3 Favorite <em>CEOs</em></h1> 61 62 <!-- ol elements without a type attribute --> 63 <!-- have a numeric sequence type (i.e., 1, 2, ...) --> 64 <ol> 65 <li>Harvey Deitel</li> 66 <li>Bill Gates</li> 67 <li>Michael Dell</li> 68 </ol> List.html The type attribute of the ordered list element allows you to select a sequence type to order the list. Text placed between the em tags will be italicized.
List.html Program Output 69 70 </body> 71 </html> List.html Program Output Nested lists are indented underneath the main list. Some sequence types available to order lists are roman numerals, letters and numbers.
Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate XHTML Tables and Formatting 5.4 Basic XHTML Forms 5.5 More Complex XHTML Forms 5.6 Internal Linking 5.7 Creating and Using Image Maps 5.8 <meta> Tags 5.9 frameset Element 5.10 Nested framesets 5.11 Internet and World Wide Web Resources
The border attribute gives the size in pixels of the table’s border. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.1: table1.html --> 6 <!-- Creating a basic table --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>A simple XHTML table</title> 11 </head> 12 13 <body> 14 15 <!-- The <table> tag opens a table --> 16 <table border = "1" width = "40%" 17 summary = "This table provides information about 18 the price of fruit"> 19 20 <!-- The <caption> tag summarizes the table's --> 21 <!-- contents (this helps the visually impaired) --> 22 <caption><strong>Price of Fruit</strong></caption> 23 24 <!-- The <thead> is the first section of a --> 25 <!-- table. It formats the table header --> 26 <!-- area. <th> inserts a heading cell. --> 27 <thead> 28 <tr> 29 <th>Fruit</th> 30 <th>Price</th> 31 </tr> 32 </thead> Table1.html The border attribute gives the size in pixels of the table’s border. The width attribute gives the width of the table. The summary attribute describes the table’s contents. Text placed in a table header is rendered bold and centered in the cell.
The body of the table is placed between the tbody tags. 33 34 <!-- All table content goes is enclosed within --> 35 <!-- <tbody>. <tr> inserts a table row. <td> --> 36 <!-- inserts a data cell. --> 37 <tbody> 38 <tr> 39 <td>Apple</td> 40 <td>$0.25</td> 41 </tr> 42 43 <tr> 44 <td>Orange</td> 45 <td>$0.50</td> 46 </tr> 47 48 <tr> 49 <td>Banana</td> 50 <td>$1.00</td> 51 </tr> 52 53 <tr> 54 <td>Pineapple</td> 55 <td>$2.00</td> 56 </tr> 57 </tbody> 58 59 <tfoot> 60 <tr> 61 <th>Total</th> 62 <th>$3.75</th> 63 </tr> 64 </tfoot> 65 66 </table> Table1.html The body of the table is placed between the tbody tags. Table rows are created using the tr element Data placed between td tags are placed in an individual cell. The table footer belongs at the bottom of the table. It formats text in a similar manner to a table header.
Table1.html Program Output 67 68 </body> 69 </html> Table1.html Program Output Table Caption Table header Start of table body End of table body Table footer
The align attribute is used to horizontally align data in a cell. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.2: table2.html --> 6 <!-- Intermediate table design --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Tables</title> 11 </head> 12 13 <body> 14 15 <h1>Table Example Page</h1> 16 17 <table border = "1"> 18 <caption>Here is a more complex sample table.</caption> 19 20 <!-- <colgroup> and <col> are used to --> 21 <!-- format entire columns at once. --> 22 <!-- span determines how many columns --> 23 <!-- the col tag affects. --> 24 <colgroup> 25 <col align = "right" span = "1" /> 26 </colgroup> 27 28 <thead> 29 Table2.html The span attribute indicates width of the data cell in number of columns. The align attribute is used to horizontally align data in a cell.
30 <!-- rowspans and colspans merge the specified --> 31 <!-- number of cells vertically or horizontally --> 32 <tr> 33 34 <!-- Merge two rows --> 35 <th rowspan = "2"> 36 <img src = "camel.gif" width = "205" 37 height = "167" alt = "Picture of a camel" /> 38 </th> 39 40 <!-- Merge four columns --> 41 <th colspan = "4" valign = "top"> 42 <h1>Camelid comparison</h1><br /> 43 <p>Approximate as of 8/99</p> 44 </th> 45 </tr> 46 47 <tr valign = "bottom"> 48 <th># of Humps</th> 49 <th>Indigenous region</th> 50 <th>Spits?</th> 51 <th>Produces Wool?</th> 52 </tr> 53 54 </thead> 55 56 <tbody> 57 58 <tr> 59 <th>Camels (bactrian)</th> 60 <td>2</td> 61 <td>Africa/Asia</td> 62 <td rowspan = "2">Llama</td> 63 <td rowspan = "2">Llama</td> 64 </tr> Table2.html The value of the colspan attribute gives the amount of columns taken up by the cell. The vertical alignment of data in a cell can be specified with the valign attribute. The value of the rowspan attribute gives the amount of rows taken up by the cell.
Table2.html Program Output 65 66 <tr> 67 <th>Llamas</th> 68 <td>1</td> 69 <td>Andes Mountains</td> 70 </tr> 71 72 </tbody> 73 74 </table> 75 76 </body> 77 </html> Table2.html Program Output Cell spanning the size of two rows. Cell spanning the size of four columns.
Each form must begin and end with form tags. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.3: form.html --> 6 <!-- Form Design Example 1 --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Forms</title> 11 </head> 12 13 <body> 14 15 <h1>Feedback Form</h1> 16 17 <p>Please fill out this form to help 18 us improve our site.</p> 19 20 <!-- This tag starts the form, gives the method of --> 21 <!-- sending information and the location of form --> 22 <!-- scripts. Hidden inputs contain --> 23 <!-- non-visual information --> 24 <form method = "post" action = "/cgi-bin/formmail"> 25 26 <p> 27 <input type = "hidden" name = "recipient" 28 value = "deitel@deitel.com" /> 29 <input type = "hidden" name = "subject" 30 value = "Feedback Form" /> 31 <input type = "hidden" name = "redirect" 32 value = "main.html" /> 33 </p> Form.html Each form must begin and end with form tags. The method attribute specifies how the form’s data is sent to the Web server. The post method appends form data to the browser request. The value of the action attribute specifies the URL of a script on the Web server. Input elements are used to send data to the script that processes the form. A hidden value for the type attribute sends data that is not entered by the user.
The value attribute displays a name on the buttons created. 34 35 <!-- <input type = "text"> inserts a text box --> 36 <p><label>Name: 37 <input name = "name" type = "text" size = "25" 38 maxlength = "30" /> 39 </label></p> 40 41 <p> 42 <!-- input types "submit" and "reset" insert --> 43 <!-- buttons for submitting and clearing the --> 44 <!-- form's contents --> 45 <input type = "submit" value = 46 "Submit Your Entries" /> 47 <input type = "reset" value = 48 "Clear Your Entries" /> 49 </p> 50 51 </form> 52 53 </body> 54 </html> The label element describes the data the user needs to enter in the text box. Form.html The size attribute gives the number of characters visible in the text box. The maxlength attribute gives the maximum number of characters the user can input. The value attribute displays a name on the buttons created.
Text box created using input element. Program Output Text box created using input element. Submit button created using input element. Reset button created using input element.
Form2.html 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.4: form2.html --> 6 <!-- Form Design Example 2 --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Forms</title> 11 </head> 12 13 <body> 14 15 <h1>Feedback Form</h1> 16 17 <p>Please fill out this form to help 18 us improve our site.</p> 19 20 <form method = "post" action = "/cgi-bin/formmail"> 21 22 <p> 23 <input type = "hidden" name = "recipient" 24 value = "deitel@deitel.com" /> 25 <input type = "hidden" name = "subject" 26 value = "Feedback Form" /> 27 <input type = "hidden" name = "redirect" 28 value = "main.html" /> 29 </p> 30 31 <p><label>Name: 32 <input name = "name" type = "text" size = "25" /> 33 </label></p> 34 Form2.html
35 <!-- <textarea> creates a multiline textbox --> 36 <p><label>Comments:<br /> 37 <textarea name = "comments" rows = "4" cols = "36"> 38 Enter your comments here. 39 </textarea> 40 </label></p> 41 42 <!-- <input type = "password"> inserts a --> 43 <!-- textbox whose display is masked with --> 44 <!-- asterisk characters --> 45 <p><label>E-mail Address: 46 <input name = "email" type = "password" 47 size = "25" /> 48 </label></p> 49 50 <p> 51 <strong>Things you liked:</strong><br /> 52 53 <label>Site design 54 <input name = "thingsliked" type = "checkbox" 55 value = "Design" /></label> 56 57 <label>Links 58 <input name = "thingsliked" type = "checkbox" 59 value = "Links" /></label> 60 61 <label>Ease of use 62 <input name = "thingsliked" type = "checkbox" 63 value = "Ease" /></label> 64 65 <label>Images 66 <input name = "thingsliked" type = "checkbox" 67 value = "Images" /></label> 68 The textarea element renders a text area when the page is displayed. The size of the text area can be specified with the rows and cols attribute. Form2.html Setting an input element’s type attribute to checkbox will create a checkbox. Checkboxes that belong to the same group must have same value in the name attribute.
Form2.html Program Output 69 <label>Source code 70 <input name = "thingsliked" type = "checkbox" 71 value = "Code" /></label> 72 </p> 73 74 <p> 75 <input type = "submit" value = "Submit Your Entries" /> 76 <input type = "reset" value = "Clear Your Entries" /> 77 </p> 78 79 </form> 80 81 </body> 82 </html> Form2.html Program Output Text area created with input element. Checkbox options created with input element.
Form3.html 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.5: form3.html --> 6 <!-- Form Design Example 3 --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Forms</title> 11 </head> 12 13 <body> 14 15 <h1>Feedback Form</h1> 16 17 <p>Please fill out this form to help 18 us improve our site.</p> 19 20 <form method = "post" action = "/cgi-bin/formmail"> 21 22 <p> 23 <input type = "hidden" name = "recipient" 24 value = "deitel@deitel.com" /> 25 <input type = "hidden" name = "subject" 26 value = "Feedback Form" /> 27 <input type = "hidden" name = "redirect" 28 value = "main.html" /> 29 </p> 30 31 <p><label>Name: 32 <input name = "name" type = "text" size = "25" /> 33 </label></p> 34 Form3.html
Form3.html 35 <p><label>Comments:<br /> 36 <textarea name = "comments" rows = "4" 37 cols = "36"></textarea> 38 </label></p> 39 40 <p><label>E-mail Address: 41 <input name = "email" type = "password" 42 size = "25" /></label></p> 43 44 <p> 45 <strong>Things you liked:</strong><br /> 46 47 <label>Site design 48 <input name = "things" type = "checkbox" 49 value = "Design" /></label> 50 51 <label>Links 52 <input name = "things" type = "checkbox" 53 value = "Links" /></label> 54 55 <label>Ease of use 56 <input name = "things" type = "checkbox" 57 value = "Ease" /></label> 58 59 <label>Images 60 <input name = "things" type = "checkbox" 61 value = "Images" /></label> 62 63 <label>Source code 64 <input name = "things" type = "checkbox" 65 value = "Code" /></label> 66 </p> 67 Form3.html
The checked attribute will mark this radio option by default. 68 <!-- <input type = "radio" /> creates a radio --> 69 <!-- button. The difference between radio buttons --> 70 <!-- and checkboxes is that only one radio button --> 71 <!-- in a group can be selected --> 72 <p> 73 <strong>How did you get to our site?:</strong><br /> 74 75 <label>Search engine 76 <input name = "how get to site" type = "radio" 77 value = "search engine" checked = "checked" /> 78 </label> 79 80 <label>Links from another site 81 <input name = "how get to site" type = "radio" 82 value = "link" /></label> 83 84 <label>Deitel.com Web site 85 <input name = "how get to site" type = "radio" 86 value = "deitel.com" /></label> 87 88 <label>Reference in a book 89 <input name = "how get to site" type = "radio" 90 value = "book" /></label> 91 92 <label>Other 93 <input name = "how get to site" type = "radio" 94 value = "other" /></label> 95 96 </p> 97 Form3.html The checked attribute will mark this radio option by default. An input element with type value equal to radio creates radio buttons.
The select element creates a drop down list. 99 <label>Rate our site: 100 101 <!-- The <select> tag presents a drop-down --> 102 <!-- list with choices indicated by the --> 103 <!-- <option> tags --> 104 <select name = "rating"> 105 <option selected = "selected">Amazing</option> 106 <option>10</option> 107 <option>9</option> 108 <option>8</option> 109 <option>7</option> 110 <option>6</option> 111 <option>5</option> 112 <option>4</option> 113 <option>3</option> 114 <option>2</option> 115 <option>1</option> 116 <option>Awful</option> 117 </select> 118 119 </label> 120 </p> 121 122 <p> 123 <input type = "submit" value = 124 "Submit Your Entries" /> 125 <input type = "reset" value = "Clear Your Entries" /> 126 </p> 127 128 </form> 129 130 </body> 131 </html> Form3.html The select element creates a drop down list. The selected attribute selects a default value for the drop down list. The option tag is used for each option in the drop down list.
Radio box list created with input element. Program Output Radio box list created with input element. Drop down box list created with input element.The Amazing option is selected as a default value.
Program Output
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.6: links.html --> 6 <!-- Internal Linking --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - List</title> 11 </head> 12 13 <body> 14 15 <!-- <a name = ".."></a> creates an internal hyperlink --> 16 <p><a name = "features"></a></p> 17 <h1>The Best Features of the Internet</h1> 18 19 <!-- An internal link's address is "#linkname" --> 20 <p><a href = "#ceos">Go to <em>Favorite CEOs</em></a></p> 21 22 <ul> 23 <li>You can meet people from countries 24 around the world.</li> 25 26 <li>You have access to new media as it becomes public: 27 <ul> 28 <li>New games</li> 29 <li>New applications 30 <ul> 31 <li>For Business</li> 32 <li>For Pleasure</li> 33 </ul> 34 </li> 35 Links.html To internally link, place a # sign in front of the name of the desired anchor element within the page.
36 <li>Around the clock news</li> 37 <li>Search Engines</li> 38 <li>Shopping</li> 39 <li>Programming 40 <ul> 41 <li>XHTML</li> 42 <li>Java</li> 43 <li>Dynamic HTML</li> 44 <li>Scripts</li> 45 <li>New languages</li> 46 </ul> 47 </li> 48 </ul> 49 </li> 50 51 <li>Links</li> 52 <li>Keeping in touch with old friends</li> 53 <li>It is the technology of the future!</li> 54 </ul> 55 56 <!-- Named anchor --> 57 <p><a name = "ceos"></a></p> 58 <h1>My 3 Favorite <em>CEOs</em></h1> 59 60 <p> 61 62 <!-- Internal hyperlink to features --> 63 <a href = "#features">Go to <em>Favorite Features</em> 64 </a></p> 65 Links.html An anchor named ceos will be created at this point on the page. This anchor does not link and will not be seen on the page. However, other anchors can refer to this anchor and link to it.
Links.html Program Output 66 <ol> 67 <li>Bill Gates</li> 68 <li>Steve Jobs</li> 69 <li>Michael Dell</li> 70 </ol> 71 72 </body> 73 </html> Links.html Program Output Clicking on this internal link will bring the user to the bottom of the page where My 3 Favorite CEOs is located.
The area element is used to create hotspots. 1 <?xml version = "1.0" ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.7: picture.html --> 6 <!-- Creating and Using Image Maps --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title> 11 Internet and WWW How to Program - Image Map 12 </title> 13 </head> 14 15 <body> 16 17 <p> 18 19 <!-- The <map> tag defines an image map --> 20 <map id = "picture"> 21 22 <!-- The "shape = rect" indicates a rectangular --> 23 <!-- area, with coordinates for the upper-left --> 24 <!-- and lower-right corners --> 25 <area href = "form.html" shape = "rect" 26 coords = "2,123,54,143" 27 alt = "Go to the feedback form" /> 28 <area href = "contact.html" shape = "rect" 29 coords = "126,122,198,143" 30 alt = "Go to the contact page" /> 31 <area href = "main.html" shape = "rect" 32 coords = "3,7,61,25" alt = "Go to the homepage" /> 33 <area href = "links.html" shape = "rect" 34 coords = "168,5,197,25" 35 alt = "Go to the links page" /> Picture.html The area element is used to create hotspots. The shape attribute defines a shape for the hotspot. The first two integers of the coordinate attribute define the (x,y) coordinate of the upper-left hand corner of the rectangle. The last two integers define the (x,y) coordinate of the lower-right hand corner of the rectangle.
36 37 <!-- Value poly creates a hotspot in the shape --> 38 <!-- of a polygon, defined by coords --> 39 <area shape = "poly" alt = "E-mail the Deitels" 40 coords = "162,25,154,39,158,54,169,51,183,39,161,26" 41 href = "mailto:deitel@deitel.com" /> 42 43 <!-- The "shape = circle" indicates a circular --> 44 <!-- area with center and radius listed --> 45 <area href = "mailto:deitel@deitel.com" 46 shape = "circle" coords = "100,36,33" 47 alt = "E-mail the Deitels" /> 48 </map> 49 50 <!-- <img src =... usemap = "#id"> indicates that the --> 51 <!-- indicated image map is used with this image --> 52 <img src = "deitel.gif" width = "200" height = "144" 53 alt = "Deitel logo" usemap = "#picture" /> 54 </p> 55 </body> 56 </html> Picture.html Assigning poly to the shape attribute creates a polygon with coordinates defined by the coords attribute. Assigning circle to the shape attribute creates a circle, with a center and radius specified by the coords attribute. The image map assigned to the usemap attribute will be used with the image. The # in front of the name of the image map indicates that an internal image map is being used.
Selecting the Feedback hotspot links to the page below. Program Output Selecting the Feedback hotspot links to the page below. Hotspots created using the area element.
The name attribute describes the type of meta element. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 5.8: main.html --> 6 <!-- <meta> tag --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Welcome</title> 11 12 <!-- <meta> tags give search engines information --> 13 <!-- they need to catalog your site --> 14 <meta name = "keywords" content = "Webpage, design, 15 XHTML, tutorial, personal, help, index, form, 16 contact, feedback, list, links, frame, deitel" /> 17 18 <meta name = "description" content = "This Web site will 19 help you learn the basics of XHTML and Webpage design 20 through the use of interactive examples and 21 instruction." /> 22 23 </head> 24 25 <body> 26 27 <h1>Welcome to Our Web Site!</h1> 28 29 <p>We have designed this site to teach about the wonders 30 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is 31 better equipped than <em>HTML</em> to represent complex 32 data on the Internet. <em>XHTML</em> takes advantage of 33 XML’s strict syntax to ensure well-formedness. Soon you 34 will know about many of the great new features of 35 <em>XHTML.</em></p> Main.html The meta element provides information to search engines about the document. The name attribute describes the type of meta element. The content attribute provides the information search engines use to catalog pages.
Main.html 36 37 <p>Have Fun With the Site!</p> 38 39 </body> 40 </html> Main.html
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4 5 <!-- Fig. 5.9: index.html --> 6 <!-- XHTML Frames I --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Main</title> 11 <meta name = "keywords" content = "Webpage, design, 12 XHTML, tutorial, personal, help, index, form, 13 contact, feedback, list, links, frame, deitel" /> 14 15 <meta name = "description" content = "This Web site will 16 help you learn the basics of XHTML and Web page design 17 through the use of interactive examples 18 and instruction." /> 19 20 </head> 21 22 <!-- The <frameset> tag sets the frame dimensions --> 23 <frameset cols = "110,*"> 24 25 <!-- Individual frame elements specify which pages --> 26 <!-- appear in a given frame --> 27 <frame name = “leftframe" src = "nav.html" /> 28 <frame name = "main" src = "main.html" /> 29 Index.html The frameset element informs the browser that the page contains frames. The cols attribute gives the width of each frame. The first vertical frame created is 110 pixels from the left of the browser. The second vertical frame fills the rest of the browser, as indicated by the * value. Nav.html is loaded into the left frame and main.html is loaded into the right frame. The frame element loads documents into the frameset. The src attribute indicates the document to be loaded.
Left frame (leftframe) 30 <noframes> 31 <p>This page uses frames, but your browser does not 32 support them.</p> 33 34 <p>Please, <a href = "nav.html">follow this link to 35 browse our site without frames</a>.</p> 36 </noframes> 37 38 </frameset> 39 </html> The noframes element provides an option for browsers that do not display frames. Index.html Left frame (leftframe) Right frame (main)
Program Output When Header Examples is selected, the document it links to is displayed in the right frame.
The document will open in the frame called main. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <!-- Fig. 5.10: nav.html --> 6 <!-- Using images as link anchors --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 10 <head> 11 <title>Internet and WWW How to Program - Navigation Bar 12 </title> 13 </head> 14 15 <body> 16 17 <p> 18 <a href = "links.html" target = "main"> 19 <img src = "buttons/links.jpg" width = "65" 20 height = "50" alt = "Links Page" /> 21 </a><br /> 22 23 <a href = "list.html" target = "main"> 24 <img src = "buttons/list.jpg" width = "65" 25 height = "50" alt = "List Example Page" /> 26 </a><br /> 27 28 <a href = "contact.html" target = "main"> 29 <img src = "buttons/contact.jpg" width = "65" 30 height = "50" alt = "Contact Page" /> 31 </a><br /> 32 Nav.html The target attribute specifies where the document linked by the anchor should display. The document will open in the frame called main.
33 <a href = "header.html" target = "main"> 34 <img src = "buttons/header.jpg" width = "65" 35 height = "50" alt = "Header Page" /> 36 </a><br /> 37 38 <a href = "table1.html" target = "main"> 39 <img src = "buttons/table.jpg" width = "65" 40 height = "50" alt = "Table Page" /> 41 </a><br /> 42 43 <a href = "form.html" target = "main"> 44 <img src = "buttons/form.jpg" width = "65" 45 height = "50" alt = "Feedback Form" /> 46 </a><br /> 47 </p> 48 49 </body> 50 </html> Nav.html Other values of target can be specified to load documents onto a new browser window, into the same frame that the anchor appears in and onto a full browser window, removing all frames.
The vertical frame on the right is divided into two horizontal frames. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4 5 <!-- Fig. 5.11: index2.html --> 6 <!-- XHTML Frames II --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Main</title> 11 12 <meta name = "keywords" content = "Webpage, design, 13 XHTML, tutorial, personal, help, index, form, 14 contact, feedback, list, links, frame, deitel" /> 15 16 <meta name = "description" content = "This Web site will 17 help you learn the basics of XHTML and Web page design 18 through the use of interactive examples 19 and instruction." /> 20 21 </head> 22 23 <frameset cols = "110,*"> 24 <frame name = "nav" src = "nav.html" /> 25 26 <!-- Nested framesets are used to change the --> 27 <!-- formatting and spacing of the frameset --> 28 <!-- as a whole --> 29 <frameset rows = "175,*"> 30 <frame name = "picture" src = "picture.html" /> 31 <frame name = "main" src = "main.html" /> 32 </frameset> 33 Index2.html The vertical frame on the right is divided into two horizontal frames. The rows attribute works in a similar manner to the cols attribute, except the rows attribute gives the height of each frame.
Index2.html Program Output 34 <noframes> 35 <p>This page uses frames, but your browser does not 36 support them.</p> 37 38 <p>Please, <a href = "nav.html">follow this link to 39 browse our site without frames</a>.</p> 40 </noframes> 41 42 </frameset> 43 </html> Index2.html Program Output The nested frame element splits the right vertical frame into two horizontal frames.