Tự học HTML và CSS trong 1 giờ - part 34 potx

ptg TABLE 10.3 Continued Attribute Applied to Element Use <col> Used to set alignment of all cells in a column. Possible values are left, center, and right. <colgroup> Used to set alignment of all cells in a column group. Possible values are left, center, and right. <table> Deprecated in HTML 4.01. Possible values are left, center, and right. align=“center” isn’t sup- ported in HTML 3.2 and older browsers. Determines the alignment of the table and indicates that text following the table will be wrapped alongside it. <caption> Deprecated in HTML 4.01. Indicates which side of the table the caption will be placed. The possible values for most browsers are top and bot- tom. HTML 4.01 browsers also sup- port left and right. In Internet Explorer, the possible values are left, right, and center, and they indicate the horizontal alignment of the caption. bgcolor All (HTML 3.2, deprecated in HTML 4.01.) Changes the background color of that table element. Cell col- ors override row colors, which over- ride table colors. The value can be a hexadecimal color number or a color name. border <table> Indicates whether the table will be drawn with a border. The default is no border. If border has a value, it’s the width of the shaded border around the table. bordercolor <table> (Internet Explorer extension.) Can be used with any of the table elements to change the color of the border around that elements. The value can be a hexadecimal color number or a color name. 306 LESSON 10: Building Tables Download from www.wowebook.com ptg TABLE 10.3 Continued Attribute Applied to Element Use bordercolorlight <table> (Internet Explorer extension.) Same as bordercolor, except it affects only the light component of a 3D- look border. bordercolordark <table> (Internet Explorer extension.) Same as bordercolor, except it affects only the dark component of a 3D- look border. cellspacing <table> Defines the amount of space between the cells in the table. cellpadding <table> Defines the amount of space between the edges of the cell and its contents. char Specifies a character to be used as an axis to align the contents of a cell (for example, a decimal point in numeric values). Can be applied to colgroup, col, tbody, thead, tfoot, tr, td, and th elements. charoff Specifies the amount of offset to be applied to the first occurrence of the alignment character specified by the char attribute. Applies to the same elements previously listed in char. frame <table> Defines which sides of the frame that surrounds a table are visible. Possible values are void, above, below, hsides, lhs, rhs, vsides, box, and border. height <th> or <td> Deprecated in HTML 4.01. Indicates the height of the cell in pixel or per- centage values. nowrap <th> or <td> Deprecated in HTML 4.01. Prevents the browser from wrapping the con- tents of the cell. rules <table> Defines which rules (division lines) appear between cells in a table. Possible values are none, groups, rows, cols, and all. width <table> Indicates the width of the table, in exact pixel values or as a percent- age of page width (for example, 50%). Summary 307 10 Download from www.wowebook.com ptg TABLE 10.3 Continued Attribute Applied to Element Use span <colgroup> Defines the number of columns in a column group. Must be an integer greater than 0. <col> Defines the number of columns that a cell spans. Must be an integer greater than 0. width <colgroup> Defines the width of all cells in a column group. <col> Defines the width of all cells in one column. colspan <th> or <td> Indicates the number of cells to the right of this one that this cell will span. rowspan <th> or <td> Indicates the number of cells below this one that this cell will span. valign <tr> Indicates the vertical alignment of the cells within that row (overriding the defaults). Possible values are top, middle, and bottom. <th> or <td> Overrides both the row’s vertical alignment and the default cell align- ment. Possible values are top, mid- dle, bottom, and baseline. <thead>, <tfoot>, <tbody> Defines vertical alignment of cells in the table head, table foot, or table body. <colgroup> Defines the vertical alignment of all cells in a column group. <col> Defines the vertical alignment of all cells in a single column. width <th> or <td> Deprecated in HTML 4.01. Indicates width of the cell in exact pixel val- ues or as a percentage of table width (for example, 50%). 308 LESSON 10: Building Tables Download from www.wowebook.com ptg Workshop This lesson covered one of the more complex subjects in HTML: tables. Before you move on to the next lesson, you should work through the following questions and exer- cises to make sure that you’ve got a good grasp of how tables work. Q&A Q Tables are a real hassle to lay out, especially when you get into row and col- umn spans. That last example was awful. A You’re right. Tables are a tremendous pain to lay out by hand like this. However, if you’re using writing editors and tools to generate HTML code, having the table defined like this makes more sense because you can just write out each row in turn programmatically. Q Can you nest tables, putting a table inside a single table cell? A Sure! As I mentioned earlier, you can put any HTML code you want inside a table cell, and that includes other tables. Q Is there a way to specify a beveled border like the default table borders using CSS? A CSS actually provides three different beveled border styles: inset, outset, and ridge. You should experiment with them and use the one that looks the best to you. Quiz 1. What are the basic parts of a table, and which tags identify them? 2. Which attribute is the most common attribute of the table tag, and what does it do? 3. What attributes define the amount of space between the edges of the cells and their content, and the amount of space between cells? 4. Which attributes are used to create cells that span more than one column or row? 5. Which elements are used to define the head, body, and foot of a table? Workshop 309 10 Download from www.wowebook.com ptg Quiz Answers 1. The basic parts of a table (the <table> tag) are the border (defined with the border attribute), caption (defined with the <caption> tag), header cells (<th>), data cells ( <td>), and table rows (<tr>). 2. The border attribute is the most common attribute for the table tag. It specifies whether border lines are displayed around the table and how wide the borders should be. 3. cellpadding defines the amount of space between the edges of the cell and their contents. cellspacing defines the amount of space between the cells. 4. The rowspan attribute creates a cell that spans multiple rows. The colspan attribute creates a cell that spans multiple columns. 5. <thead>, <tbody>, and <tfoot> define the head, body, and foot of a table. Exercises 1. Here’s a brainteaser for you: Create a simple nested table (a table within a table) that contains three rows and four columns. Inside the cell that appears at the sec- ond column in the second row, create a second table that contains two rows and two columns. 2. One tricky aspect of working with the HTML for tables is accounting for cells with no data. Create a table that includes empty cells and verify that when you’ve done so, all the rows and columns line up as you originally anticipated. 310 LESSON 10: Building Tables Download from www.wowebook.com ptg LESSON 11 Designing Forms Up to this point, you’ve learned almost everything you need to know to create functional, attractive, and somewhat interactive web pages. If you think about it, however, the pages you’ve created thus far have a one-way information flow. This lesson is about creating HTML forms to collect information from people visiting your website. Forms enable you to gather just about any kind of information for immediate processing by a server- side script or for later analysis using other applications This lesson covers the following topics, which enable you to create any type of form possible with HTML: n Discovering how HTML forms interact with server-side scripts to provide interactivity n Creating simple forms to get the hang of it n Learning all the types of form controls you can use to create radio buttons, check boxes, and more n Using more advanced form controls to amaze your friends and co-workers n Planning forms so that your data matches any server-side scripts you use Download from www.wowebook.com ptg ▼ Understanding Form and Function Right off the bat, you need to understand a few things about forms. First, a form is part of a web page that you create using HTML elements. Each form contains a form element that contains special controls, such as buttons, text fields, check boxes, Submit buttons, and menus. These controls make up the user interface for the form (that is, the pieces of the form users see on the web page). When people fill out forms, they’re interacting with these elements. In addition, you can use many other HTML elements within forms to create labels, provide additional information, add structure, and so on. These elements aren’t part of the form itself, but they can enhance your form’s look and improve its usability. When someone fills out an HTML form, he enters information or makes choices using the form controls. When the user submits the form, the browser collects all the data from the form and sends it to the URL specified as the form’s action. It’s up to the program residing at that URL to process the form input and create a response for the user. It’s important that you understand the implications of this final step. The data is what you want, after all! This is the reason you’ve chosen to create a form in the first place. When a user clicks the Submit button, the process ceases to be one of pure HTML and becomes reliant on applications that reside on the web server. In other words, for your form to work, you must already have a program on the server that will store or manipu- late the data in some manner. In some cases, forms aren’t necessarily submitted to programs. Using JavaScript, you can take action based on form input. For example, you can open a new window when a user clicks a form button. You can also submit forms via email, which is okay for testing but isn’t reliable enough for real applications. Task: Exercise 11.1: Creating a Simple Form That Accepts a Name and a Password Okay, let’s get right to it and create a simple form that illustrates the concepts just pre- sented. It’s a web page that prompts the user to enter a name and a password to continue. Start by opening your favorite HTML editor and creating a web page template. Enter the standard HTML header information, include the body element, and then close the body and html elements to form a template from which to work. If you already have a tem- plate similar to this, just load it into your HTML editor: <!DOCTYPE html>= <html> 312 LESSON 10: Designing Forms , Download from www.wowebook.com ptg <head> <title>Page Title</title> </head> <body> </body> </html> Next, add your title so that people will understand the purpose of the web page: <title>Please Log In</title> Within the body of the web page, add a form element. I’ve added both the opening and closing tags, with an empty line between them, so that I don’t forget to close the form when I’m finished: <form action=“/form-processing-script” method=“post”> </form> Before continuing, you need to know more about the form element and the attributes you see within the opening tag. Obviously, form begins the element and indicates that you’re creating an HTML form. The action attribute specifies the URL to the server-side script (including the filename) that will process the form when it’s submitted. It’s important that the script with the name you’ve entered is present on your web server at the location the URL specifies. In this example, I use the full URL for the script, but you can just as easily use a relative URL if it makes more sense. Understanding Form and Function 313 11 Before going live with forms, contact your web hosting provider and ask whether you can use the hosting provider’s scripts or add your own. You must also determine the URL that points to the directory on the server that contains the scripts. Some hosting providers rigidly control scripts for security purposes and won’t allow you to create or add scripts to the server. If that’s the case, and you really need to implement forms on your web pages, consider searching for a new hosting provider. The next attribute is method, which can accept one of two possible values: post or get. These values define how form data is submitted to your web server. The post method includes the form data in the body of the form and sends it to the web server. The get method appends the data to the URL specified in the action attribute and most often is CAUTION , , Download from www.wowebook.com ptg used in searches. I chose the post method here because I don’t want to send the user’s password back in plain sight as part of the URL. Now add some form controls and infor- mation to make it easy for a visitor to understand how to fill out the form. Within the form element, begin by adding a helpful description of the data to be entered by the user, and then add a text form control. This prompts the user to enter her name in a text-entry field. Don’t worry about positioning just yet because you’ll put all the form controls into a table later: <form action=“/form-processing-script” method= post> <label for=”username”>Username</label> <input type=“text” name=“username” /> </form> Next, add another bit of helpful text and a password control: <form action=“/form-processing-script” method=“post”> <label for=”username”>Username</label> <input type=“text” name=“username” /> <label for=”password”>Password</label> <input type=“password” name=“password” /> </form> Notice that both these form controls are created using the input element. The type attribute defines which type of control will be created. In this case, you have a text con- trol and a password control. Each type of control has a distinct appearance, accepts a dif- ferent type of user input, and is suitable for different purposes. Each control is also assigned a name that distinguishes it and its data from the other form controls. The labels for the form fields are specified using the <label> tag. Each label is attached to the form field it is associated with through the for attribute, which should match the name or id attribute of the form tag with which it is associated. The <label> element doesn’t provide any formatting by default, but you can make it appear however you want using CSS. Finally, add a Submit button so that the user can send the information she entered into the form. Here’s the form so far: Input ▼ <form action=”/form-processing-script “ method=”post”> <div> <label for=”username”>Username</label> <input type=”text” name=”username” /> </div> 314 LESSON 10: Designing Forms , , Download from www.wowebook.com ptg <div> <label for=”password”>Password</label> <input type=”password” name=”password” /> </div> <div> <input type=”submit” class=”submit” value=”Log In” /> </div> </form> The Submit button is another type of input field. The value attribute is used as the label for the Submit button. If you leave it out, the default label will be displayed by the browser. Understanding Form and Function 315 11 , , When you’re naming form controls and labeling buttons, strive for clarity and meaning. If a form is frustrating or hard to figure out, visitors will leave your site for greener pastures! Figure 11.1 contains a screenshot of the form with all the form elements in place. TIP Output . FIGURE 11.1 The form with all the input elements in place. At this point, you’ve created the form and it’s ready to rumble. However, if you load it into your web browser, you’ll see that it doesn’t look all that appealing. I can vastly improve the appearance using Cascading Style Sheets (CSS). Here’s the code for the full page, including the style sheet: <!DOCTYPE html> <html> <head> <title>Login Form</title> <style type=”text/css”> div { Download from www.wowebook.com . it. <caption> Deprecated in HTML 4. 01. Indicates which side of the table the caption will be placed. The possible values for most browsers are top and bot- tom. HTML 4. 01 browsers also sup- port left and. Deprecated in HTML 4. 01. Indicates the height of the cell in pixel or per- centage values. nowrap <th> or <td> Deprecated in HTML 4. 01. Prevents the browser from wrapping the con- tents. from which to work. If you already have a tem- plate similar to this, just load it into your HTML editor: <!DOCTYPE html& gt;= < ;html& gt; 312 LESSON 10 : Designing Forms , Download from www.wowebook.com ptg <head> <title>Page