HTML in 10 Steps or Less- P7

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:20

0
78
lượt xem
11
download

HTML in 10 Steps or Less- P7

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

HTML in 10 Steps or Less- P7:Welcome to HTML in 10 Simple Steps or Less. Our mission in writing this book is to provide a quick and accessible way for you to learn Hypertext Markup Language — the lingua franca of the World Wide Web. We hope this book provides a resource that beginning and intermediate HTML coders can use to improve their Web development skills. It is also our hope that it fills multiple roles as both a teaching tool and a reference once you expand your skills.

Chủ đề:
Lưu

Nội dung Text: HTML in 10 Steps or Less- P7

  1. 96 Part 6 Task 43 Defining Tables A table is a structured element that consists of rows and columns of cells. You can place any kind of content you like in these cells: text, images, and even other tables. If you can define it in HTML, you can place it inside a table cell. There are three sets of container tags required to build any table. The and tags define where the table begins and ends, the and tags define where each row begins and ends, and the and tags define the individual cells within each row. There are no tags specifically defining columns; they result when multiple rows of cells are stacked on top of each other. 1. Within the body section of your document, enter an opening tag. 2. Move to the next line by hitting the Enter (or Return) key, indent your cursor and enter an opening tag to define the start of the first row. 3. Hit Enter again to move to the next line, indent your cursor again, and enter an opening tag to indicate the start of a new cell. 4. Follow the opening tag with the specific content you want placed in this cell. 5. Complete the cell by entering a closing tag. 6. Repeat Steps 3 through 5 for each cell you want to add to the row. When your row is finished, move to the next line and enter a closing tag vertically aligned beneath the opening tag to aid readability. 1 2 3 7. Repeat Steps 2 through 6 to add subsequent rows to the table. 8. After completing the desired number of rows, move to the next line and finish the table with a closing tag, vertically aligned with the opening tag. Listing 43-1 shows the code required to produce a table with three rows and three columns. Figure 43-1 shows the results displayed in a browser. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  2. Building Tables 97 Tables Task 43 1 tips 2 • To make all text in a given cell bold and center-aligned, 3 use tags instead of tags. TH stands for table 4 header. 5 6 • In this example, each cell is defined on its own line. Some authors prefer to define all cells in a given row on the same line to 7 mimic better how the table 8 appears in the browser. It’s 9 up to you; it doesn’t matter how much white space you add in HTML to aid code readability. Listing 43-1: Code for a borderless table with three rows and three columns cross-references Figure 43-1: The rather minimal table displayed in a browser • Each row must contain the same number of cells to render properly in a browser. You can merge cells, however, using the colspan and rowspan attributes discussed in Task 45. • The border attribute is needed to help distinguish the cells of a table. To learn how to use this attribute, see Task 44. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  3. 98 Part 6 Task 44 Working with Table Borders I n Task 43, you created a simple table that organizes content into rows and columns. To make the individual cells more distinct, define borders for your table. Table borders are influenced by the following four attributes: border, cellpadding, cellspacing, and bordercolor. notes 1. To render a visible border around the table perimeter and interior cells, add the border attribute to the tag and set it equal to • If you don’t define a cellspacing attribute a numeric value, such as: at all, the browser defaults to a setting of 2. • If you define no cellpadding, the Figure 44-1 shows the simple table from Task 43 with this border browser defaults to a attribute defined. setting of 1. Figure 44-1: A table with a border one pixel thick 2. To control the thickness of internal borders between cells, define a cellspacing attribute and set it equal to a numeric value, such as: Figure 44-2 shows the result of adding this attribute value. Figure 44-2: The same table in Figure 44-1 with cellspacing increased to 10 pixels Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  4. Building Tables 99 3. To control the amount of empty space between the border of a cell and the content inside it, define a cellpadding attribute. Set it equal to a numeric value, such as: Task 44 Figure 44-3 shows the results in a browser. tip • When you specify no bor- der color, both Internet Explorer and Netscape use a light gray highlight color and a darker shadow color to produce a 3-D beveled effect. Once you define the bordercolor attribute, Internet Explorer loses the 3-D effect (see Figure 44-4) and renders the Figure 44-3: The same table in Figure 44-2 with cellpadding increased to 10 pixels borders in a solid color. Netscape takes the border 4. To specify a border color, define a bordercolor attribute. Set this color you specify and light- ens it by 20% for the high- equal to a hexadecimal value or predefined color name, for example: light color and darkens it by 20% for the shadow. mimic the Netscape border color effect, you must define Figure 44-4 shows the results rendered in the browser. bordercolorlight and bordercolordark attributes in addition to the bordercolor attribute, setting them equal to lighter and darker shades of the bordercolor attribute. cross-reference • Tables divide a page into distinct regions. In HTML you can also divide the Figure 44-4: The same table in Figure 44-3 with a border color applied entire browser window into distinct regions, where each region displays a separate document (called frames). To learn more about frames, see Part 8. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  5. 100 Part 6 Task 45 Spanning Cells A single cell can span multiple columns or rows. The number of columns or rows a cell spans is defined using the colspan and rowspan attributes. To demonstrate how these attributes function, we’ll build a small table and apply the attributes individually. 1. In the body section of your document, enter the table code shown in Listing 45-1. Figure 45-1 shows the results in a browser. 1 2 3 4 5 6 7 8 9 Listing 45-1: Simple table code caution Figure 45-1: A simple nine-celled table, with three rows and three columns • If you fail to remove the cells you’re spanning across, the browser renders 2. To span a cell across a number of columns, add the colspan attribute the expanded cell created to the tag and set it equal to the number of columns you want to by the span and includes span. For example, to make the number 1 cell span across the other the extra cells off to one cells in the same row, add a colspan attribute equal to 3, as shown side of the table. The effect is not typically pleasing to here: the eye. 1 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  6. Building Tables 101 3. Remove the code representing the two cells being spanned. In this example, delete 2 and 3 from the first row, save the document, and preview it in a browser. Figure 45-2 shows the result. Task 45 tip • Spanning rows and columns can be useful when creating a single table heading ( ) across the top of a table or down its side. Figure 45-2: Cell 1 spanned across three columns 4. To span a cell across a number of rows, add the rowspan attribute to the tag and set it equal to the number of rows you want to span. For example, to make the number 3 cell span the other cells in the same column, add a rowspan attribute equal to 3, as shown here: 3 5. Remove the code representing the two cells being spanned. In this example, delete 6 in the second row and 9 in the third row, and then save your document and preview it in a browser. Figure 45-3 shows the result. cross-reference • Tables can also include captions and summaries (see Task 50). Figure 45-3: Cell 3 spanned across three rows Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  7. 102 Part 6 Task 46 Aligning Table Elements J ust like many other elements we’ve examined, the align attribute can be used to influence a table’s position as well as the content of individual table cells. When you apply the align attribute to the tag, it affects the table the same way as it does an image: It positions the table relative to the other text inside the document. When you apply the align attribute to the tag, it notes aligns the cell’s content. Because cells also possess height — whether specifically defined by the height attribute or forced by the cell’s content — you can verti- • The default value for the align attribute is left. cally align content within cells using the valign attribute. • The default value for the valign attribute is 1. To specify a table’s alignment, define an align attribute of the middle. Vertical align- tag and set it equal to left, right, or center. Figure ment, as shown in Figure 46-1 shows the possible results. 46-3, is not only relative to the cell but, in the case of baseline, relative to content in adjacent cells. In Figure 46-3, the base- line of the image is at the bottom of the cell so that’s where the first cell aligns its text. Figure 46-1: Three tables aligned around text: left, right, and center (from top to bottom) caution • Older browsers do not sup- port align and valign attributes defined for the tag. Consequently, it is always best to apply them to tags instead. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  8. Building Tables 103 2. To align the content within a cell horizontally, define an align attribute for the tag and set it equal to left, right, or center. Figure 46-2 shows the result of each value. Task 46 Figure 46-2: Cells aligned to the left, center, and right 3. To align the content within a cell vertically, define a valign attribute for the tag and set it equal to top, middle, bottom, or baseline. Figure 46-3 shows the result of each value. Figure 46-3: Cells vertically aligned to the top, middle, and bottom, and at the baseline 4. To set the horizontal or vertical alignment for an entire row, define cross-reference the align or valign attributes of the tag. • Tables and images respond similarly to the align attribute. To learn more about aligning images, see Task 30. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  9. 104 Part 6 Task 47 Defining Dimensions for Table Elements L eft to its own devices, the dimensions of the overall table or individual cell is governed by the content placed within it. Like some other elements you’ve seen, the dimensional attributes width and height can also be applied to the , , and or tags with more or less similar results. notes 1. To specify the width of a table, add the width attribute to the open- ing tag and set it equal to a pixel value or a percentage. For • If there’s more content inside a table than the example: dimensions you define can handle, the browser simply ignores the dimension val- ues and renders the table or: large enough to show all the content. • When you use percentages, the table width is set to a Figure 47-1 shows examples of different table widths. percentage of the parent element. For example, if the table width is 80%, and it’s nested inside the cell of another table, it will be 80% of the width of the cell. If the table is inside a layer (see Part IX), then it will be 80% of the width of the layer. If the table is not nested inside another ele- ment, its width will be 80% of the browser window — which means it will expand and contract with the browser window’s size to maintain that percentage. cautions • When applying widths to cells, make sure the total values don’t exceed or con- flict with any width value you assign to the Figure 47-1: Various table widths and their effects tag. For exam- ple, don’t set a table width as a percentage and then 2. To specify the width of an individual cell, add the width attribute to add pixel width values to the tag and set it equal to a pixel value or a percentage. Figure every cell in a row. Also, 47-2 shows examples of cell widths. don’t define cell widths whose combined values exceed or are less than the defined table width. • Setting a height value for one cell in a row effectively sets the entire row to that height. Conversely, setting the width of a cell effec- tively sets the entire col- umn to the same width. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  10. Building Tables 105 Task 47 tips Figure 47-2: Different cell and table widths • It’s possible to combine percentage and pixel val- ues across table and cell 3. To define the height of a cell, add a height attribute to the tag widths. For example, in a two-column table you can and set it equal to a pixel value or percentage. Figure 47-3 shows the set the entire table to a effect of different height values. width of 100%, yet set the first column to a width of 150 pixels. Make sure the content inside the first column is also 150 pixels wide and then set the second column equal to 100%. The second column will try to take over the screen while the first column holds its ground. Newer browsers don’t nec- essarily require the second column value but many older browsers do, making this a good backward- compatible practice. • Older browsers do not accept width and height attributes defined for the tag. Consequently, it is always best to apply them to the tags instead. cross-reference Figure 47-3: The effect of various height values • The width and height attrib- utes are deprecated for , , and 4. To set the width or height of an entire row, add width and height tags in favor of Cascading attributes to the tag, setting them equal to pixel values or Style Sheets (see Part 9). percentages. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  11. 106 Part 6 Task 48 Working with Table Background Properties A ll four tag pairs used in creating tables support the attributes bgcolor and background. The bgcolor attribute specifies the background color and background specifies a background image. notes • Current versions of Netscape and Internet Explorer fill the 1. To define a background color for the entire table, add the bgcolor attribute to the opening tag, setting it equal to a hexadeci- entire background of the mal value or a predefined color name. For example: table with the color you define. Older versions of Netscape (prior to version 6) only fill in the cells, leaving any space gener- 2. To define the background color for an individual row, apply the ated by cell spacing clear bgcolor attribute to the tag and, for a single cell, apply it to to display the document’s the or tag. For example: background color. • Current versions of Netscape and Internet Explorer tile the image across the entire table’s background, as if the table Figure 48-1 shows the effect of applying the bgcolor attribute to were a window looking out on the tiled image. Older the , , and tags simultaneously. versions of Netscape (prior to version 6) begin tiling the image anew in each cell, so defining a back- ground image to has the same effect as applying it to each tag. Figure 48-1: Red table, white row, blue cell Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  12. Building Tables 107 3. To define a background image for a table, add the background attribute to the tag and set it equal to the pathname of the image you want to use. For example: Task 48 Figure 48-2 shows a background image applied to a table. Figure 48-2: Background images tile from left to right and top to bottom across the element they’re applied to. 4. To define a background image for an individual row, apply the background attribute to the tag and, for a single cell, apply it to the or tag. For example: cross-reference • The tag also accepts the bgcolor and background attributes (see Task 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  13. 108 Part 6 Task 49 Nesting Tables N esting tables inside other tables allows you to divide a document into discrete regions. In this way, you gain greater control over page layout. 1. To nest a new table within an existing table cell, place your cursor inside the cell and press Enter once or twice to create space for the code you’re about to enter, as shown in Figure 49-1. Figure 49-1: An existing table cell ready for nesting 2. Within the cell, enter a comment that describes the content being placed in the nested table. Figure 49-2 shows an example. Figure 49-2: A descriptive comment tag (“Begin Navigation Table”) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  14. Building Tables 109 3. Move to the next line and enter the code defining your nested table, as shown in Figure 49-3. Task 49 tips • When you place multiple tables within a single docu- ment, and tables within tables as well, reading through the code and keeping track of which tag is governing what becomes a real challenge. The solu- tion is to place comments within your code, calling out where nested tables begin and end. Comments are written inside opening and closing comment tags (), which hide any content in between from the browser. Figure 49-3: Code for a nested table 4. After the closing tag of the nested table, move to the next line and • The general practice of indenting table code makes your document insert another comment tag demarking the end of the nested table, as easier to read. shown in Figure 49-4. • Comment tags can be used anywhere within a docu- ment. They’re typically used to explain to others what the author is doing. You can also use them to hide chunks of code temporarily while you’re testing a docu- ment in the browser. cross-reference • As this task demonstrates, comments help organize your code. There are other tags specific to organizing table content (see Task 50). Figure 49-4: A comment indicating the end of a nested table (“End Navigation Table”) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  15. 110 Part 6 Task 50 Organizing Table Data In Task 49, you learned how to use comment tags to make nested table code eas- ier to read. HTML also has some tags for organizing individual parts of a table: , , , , and . These tags are generally used when the table you’re creating is meant to display tabular data. notes 1. To indicate a region of a table containing heading data, place opening and closing tags around the code, as shown in Listing 50-1. • The content must precede the content. Even though the footer information is written first, the footer row is still rendered at the bottom of MON the table. You supply the MEAN TEMP header and footer first so HIGH the browser can render DATE them prior to rendering the body, in case the table is LOW extremely big. DATA RAIN • By default, caption text is centered above the table. AVE.WIND SPEED To align the caption below the table, add an align attribute to the tag and set it equal to bottom. Internet Explorer Listing 50-1: A table row marked as a header allows you to use both align and valign 2. To indicate the table code that makes up the footer, wrap it in open- attributes, using valign ing and closing tags, as shown in Listing 50-2. to set the top or bottom value and align to place the caption to the left, right, or center. *calculations based on 5 of 7 report zones Listing 50-2: A table footer 3. To indicate the body of the table content, place opening and closing tags around the remaining table rows, as shown in Listing 50-3. 1 23.8 43.2 30/1/03 (continued) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  16. Building Tables 111 13.7 1/25/03 17.00 Task 50 7 Listing 50-3: The body section of a table 4. To describe the data within a table, include tags directly following the opening tag, as shown here: First Quarter Measurements Figure 50-1 shows how captions appear in the browser. Figure 50-1: A table caption appearing below a table cross-reference 5. To include a summary of the table data for text-to-speech browsers • The W3C prefers you to use Cascading Style Sheets to and Braille-based devices, define a summary attribute for the format captions (see tag, as shown here: Part 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  17. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  18. Part 7: Working with Forms Task 51: Defining Form Elements Task 52: Formatting Text Fields Task 53: Formatting Password Fields Task 54: Formatting Text Areas Task 55: Formatting Check Boxes Task 56: Formatting Radio Buttons Task 57: Formatting Selection Menus Task 58: Formatting Selection Lists Task 59: Formatting File Fields Task 60: Formatting Submit and Reset Buttons Task 61: Using Graphic Images for Submit Buttons Task 62: Using Hidden Fields Task 63: Specifying the Focus Order of Form Controls Task 64: Using Field Sets Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  19. 114 Part 7 Task 51 Defining Form Elements I t seems that forms exist everywhere on the Web. They allow people to sign up for newsletters, purchase goods, and send e-mail. Any HTML document that contains a form has a section inside it containing opening and closing tags. Within this section lies the regular content and its markup, as well as specific form-related elements called form controls (check boxes, radio buttons, notes menus, and so on). • The get method appends the form data to the URL Users fill in “the form” by entering information into text fields, making selections defined in the action from menus, and clicking check boxes and radio buttons. Clicking the “submit” attribute, while the post button sends the data they dutifully entered to a Web server, which sends the col- method sends the data as a transaction body mes- lected form data to a processing script. The most important thing to understand sage. Use the get attribute about Web forms is that they consist of two parts: the HTML-based interface that when you’re sending a visitors use to enter information (that is, the Web page) and a program on the small amount of data and Web server that processes that collected information behind the scenes. no type of response is scripted to come from the Web server. Use the post Web forms typically make use of something called the Common Gateway attribute when you’re send- Interface (CGI), a standard system for using external programs to communicate ing large amounts of data with Web servers. Programs (called scripts) can be written in any number of pro- and the script is sending a gramming languages. The most common is Perl. The form page on the Web site response. The World Wide Web Consortium has dep- packages the information that users enter and sends it to the Web server where recated the get method. the script resides. The script then processes the information and either has the Web server send a response back to the visitor or holds and maintains the data • The rest of the code that makes up the form (normal for some future purpose. content, form controls, and so on) is placed between There is no single script that everyone uses to create forms. The Web page form the opening and closing and the script on the server are unique little programs on each Web site. This tags. means that if you want to create your own forms, you need to learn how to program — but that’s a topic for another book. In this task, you simply learn how to define the opening and closing tags, which instruct browsers where to submit the data and how the data should be sent. 1. Within the body section of the document, enter an opening tag. 2. Add an action attribute and set it equal to the URL of the process- ing script, as shown in Listing 51-1. Forms Listing 51-1: The opening tag and action attribute Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  20. Working with Forms 115 3. Follow the action attribute with the method attribute, setting it equal to post or get, as shown in Listing 51-2. Task 51 Forms Listing 51-2: A tag with action and method attributes defined 4. To mark the end of the form, insert a closing tag. Listing 51-3 shows a completed form container. Forms Listing 51-3: A completed form container cross-reference • The application on the Web server that processes user- inputted information is typ- ically referred to as a CGI script, a program written in one of a number of programming languages. (Perl is the most common.) To learn more about CGI scripting and the Perl programming language, see Perl For Dummies, 4th Edition by Paul Hoffman (Wiley Publishing, Inc., 2003). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Đồng bộ tài khoản