HTML in 10 Steps or Less- P9

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

lượt xem

HTML in 10 Steps or Less- P9

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- P9: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ủ đề:

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

  1. 136 Part 7 Task 62 Using Hidden Fields E ach of the form controls you’ve seen so far sends data to a script in response to an action taken by the visitor, who types something into a field, clicks a check box or radio button, selects something from a menu or list, and so forth. HTML provides a mechanism by which you can include values in your form to be sent to the script that visitors never see. These values are defined using hidden fields. note 1. Insert an tag. • In this example, the URL of the processing script (see the tag’s action 2. Define a type attribute and set it equal to hidden: attribute) is on another Web site. The hidden field tells the script which Web site this data came from. 3. Define a name attribute and set it equal to the appropriate value specified by the processing script: 4. Define a value attribute and set it equal to whatever information you want the field to pass to the script when the form is submitted: 5. To make the tag compatible with XHTML and keep it rec- ognizable to non-XHTML browsers, conclude the tag by inserting a space after the last attribute value and adding a forward slash and closing bracket: Listing 62-1 shows an example of a hidden field that sends data to a script. Figure 62-1 shows how that data could be used by a script to generate a special message to the visitor. Figure 62-1: The script returns a second page that makes use of the information supplied by the hidden field Please purchase PDF Split-Merge on to remove this watermark.
  2. Working with Forms 137 Hidden Fields Task 62 tips • If you use a single script located on one server to process forms from a num- Select the Newsletters you wish to receive: ber of different Web sites, you could include a hidden Oral Hygiene Weekly Web site the data came from. Do-It-Yourself Root Canal in 10 Simple Steps or Less • Sometimes Web pages that visitors see are generated dynamically by scripts. For Guide to Home Dentistry information on one page and click a Submit button marked “Continue,” which takes them to the next part of the form that’s tailored to the information they submitted on the previous page. If the next form page requires any previously submitted information, you don’t want to make visitors enter it a second time. This is where hidden fields come in handy: When the script generates the second Listing 62-1: A hidden field that tells the script which Web site this form is from page, it can include the required information inside hidden fields. cross-reference • To learn more about CGI scripting, see Perl For Dummies (Wiley Publishing, Inc., 2003). Please purchase PDF Split-Merge on to remove this watermark.
  3. 138 Part 7 Task 63 Specifying the Focus Order of Form Controls O n a page with several form controls, pressing Tab moves the cursor from the first form control to the last. By default, the page’s focus is the first form con- trol on the page. You can control not only the Tab order but also the specific keys notes that bring the focus to a particular form control. Both of these methods allow • By default, most browsers allow users to tab through users to bypass the mouse when they enter information on the form, and they are typically included for visitors with speaking browsers. the form in the order the form controls appear in 1. Define a tabindex attribute for each form control you want to code. affect. • The key you specify with the accesskey attribute 2. Set each tabindex attribute equal to a numeric value, in the order must be pressed in con- you want them to be focused on when people press the Tab key. For junction with either the Alt example, tabindex=“1” is first, tabindex=“2” is second, and so key (Windows) or the Control key (Mac). Older on, as shown in Listing 63-1. browsers do not support 3. To make a specific key bring a form control into focus, define an the accesskey attribute. accesskey attribute for the form control and set it equal to the key letter or number. For example: 4. Include explicit notes about your access key assignments within your site (see Figure 63-1). Figure 63-1: Instructional text that helps people navigate the form without the mouse Please purchase PDF Split-Merge on to remove this watermark.
  4. Working with Forms 139 Focus Order Task 63 User Name: tip • To remove a form control from the tab order, set the tabindex attribute equal to –1. E-mail Address: Join the Mailing list? Yes No Select a Newsletter: Chiropractic Accidents Medical Love Stories Dental Torture made Easy cross-reference • Access keys can also be assigned to hyperlinks (see see Part 5). Listing 63-1: Defining tabindex attributes in reverse order Please purchase PDF Split-Merge on to remove this watermark.
  5. 140 Part 7 Task 64 Using Field Sets F ield sets allow you to group a series of related form controls visually and structurally. Doing so gives users (of visual browsers) a greater understanding of the form by wrapping related controls inside a gray or black border with an accompanying caption (rendered with the tag). Text-to-speech and Braille browsers use the captions to inform users about the section of the form notes they’re in. • Netscape 7.x and all ver- sions of Internet Explorer 1. Insert the opening tag above the first form control in render the fieldset bor- the group. ders in gray. Netscape 6.x renders them in black, and 2. Insert opening and closing tags immediately following the Netscape 4.x doesn’t the opening fieldset tag. For example: render them at all. • Netscape renders field set outlines with more white space around form controls than Internet Explorer does. 3. Place the text you want displayed as the fieldset’s caption between the tags: Personal Information 4. At the end of the group of form controls, insert a closing tag. Listing 64-1 shows a completed form using a field set. Figure 64-1 shows how Netscape renders the field set. Please purchase PDF Split-Merge on to remove this watermark.
  6. Working with Forms 141 Field Sets Task 64 Last Name: First Name: Address: Listing 64-1: A sample form using a field set cross-reference • You can use tables to influ- ence fieldset borders. To learn more about tables, see Part 6. Figure 64-1: How Netscape renders the form that uses a field set Please purchase PDF Split-Merge on to remove this watermark.
  7. Please purchase PDF Split-Merge on to remove this watermark.
  8. Part 8: Working with Frames Task 65: Defining Frameset Documents Task 66: Specifying Frame Dimensions Task 67: Specifying Border Properties Task 68: Controlling Frame Margins and Scroll Bars Task 69: Nesting Framesets Task 70: Targeting Frames Task 71: Providing noframes Content Task 72: Working with Inline Frames Please purchase PDF Split-Merge on to remove this watermark.
  9. 144 Part 8 Task 65 Defining Frameset Documents A frameset document is a set of instructions for dividing the browser window into separate panes. Each pane is called a frame. The frameset document defines the orientation of each frame, their physical properties, and the filenames of the other HTML documents displayed within them. In this task, we lay out a base frameset document. Subsequent tasks demonstrate how to flesh the document out. notes 1. In your text editor, open a new document and define the opening and • A frames-based layout requires multiple docu- closing tags, including a simple head section, as shown in ments to make it work. Listing 65-1. For example, a three- framed layout requires a minimum of four HTML documents: the frameset document and one docu- Frames ment for each frame that the frameset creates. • A frameset is simply a set of instructions for how the browser window should be divided, rather than a Web page with its own visible Listing 65-1: Basic tags of any Web page, without tags content. This is because a frameset has no 2. Below the closing tag, insert an opening tag, tags. as shown in Listing 65-2. Frames Listing 65-2: An opening tag 3. Move to the next line, indent, and add a tag for each frame you want to define, as shown in Listing 65-3. Frames Listing 65-3: Adding empty frame tags Please purchase PDF Split-Merge on to remove this watermark.
  10. Working with Frames 145 4. To specify which document should be displayed in a frame, define a src attribute for the tags and set them equal to the chosen document’s pathname, as shown in Listing 65-4. Task 65 Frames Listing 65-4: Defining src attributes for each tag 5. To make the tag compatible with XHTML and keep it rec- ognizable to non-XHTML browsers, conclude the tag by inserting a space after the last attribute value and adding a forward slash and closing bracket, as shown here: 6. To close the frameset, move to the next line, return to the left mar- gin, and insert a closing tag. This initial document appears in Listing 65-5. Frames cross-references • Frames can be defined as rows or columns. Mixing the two requires nesting the framesets. To learn how to define rows and columns, see Task 66. To learn about
  11. 146 Part 8 Task 66 Specifying Frame Dimensions A frame’s dimensions and their orientation are defined by two attributes: rows and cols. Their values don’t correspond to the number of rows or columns you want to create. Instead, these attributes accept multiple column width and row height values, separated by commas. The syntax works like this: cols=”width of the first column, width of the second notes column, etc.” • The values you define for the cols and rows attrib- utes can take any of three rows=”height of the first row, height of the second row, possible forms: numeric etc.” pixel values, percentages, or relative values. 1. To create a frameset of columns, add the cols attribute to the • Using an absolute pixel value ensures that a row or tag: column is always an exact size. Percentage values cre- ate frames that take up the specified percentage of the 2. Set the cols attribute equal to the widths of each column you want browser window. to create. Separate each value with commas. For example: • Relative values allow you to set a frame’s dimensions relative to the other frames in the frameset. Written 3. To create a frameset of rows, add the rows attribute to the using an asterisk, a value tag: written as creates three rows that are relative sixths of the 4. Set the rows attribute equal to the height of each row you want to browser window height: 3/6, 2/6, 1/6. (Why create. Separate each value with commas, as shown here: sixths? Because 3+2+1=6.) 5. For each row or column defined by the rows or cols attribute, include a tag within the frameset. caution • You need to be careful how you use pixel values. If you create a frameset defining your cols or rows attribute all with pixel values (for example, ), the browser will create a three-column frameset with each column 100 pixels wide. Because you have no control over the size of a visitor’s browser window, the browser compensates and makes each frame one third of the screen, effectively giv- ing you percentage widths. Please purchase PDF Split-Merge on to remove this watermark.
  12. Working with Frames 147 Listing 66-1 shows the completed code for a two-column frameset. Figure 66-1 shows that frameset displayed in a browser. Task 66 Frames tips • To ensure that a frame stays at a specific pixel dimension, you need to mix absolute pixel values with relative values. For exam- Listing 66-1: Code for a two-column frameset ple, the code shown in Step 2 creates a first fixed column that is 150 pixels wide and leaves the rest of the browser window over to the second frame, which expands and contracts as the browser window resizes. • Although not typically done, you can define both the cols and rows attrib- utes simultaneously. For example, would create a three-row, three-column frameset of equally sized frames. Figure 66-1: A two-column frameset rendered in the browser cross-reference • As you define a row or col- umn, instead of using a tag, nest a whole other frameset (see Task 69). Please purchase PDF Split-Merge on to remove this watermark.
  13. 148 Part 8 Task 67 Specifying Border Properties H owever you define a frame’s border properties has a large impact on the look and feel of your layout. You can leave borders to their default settings — free to be repositioned by the visitor — or you can lock them in place to enforce a specific boundary. You can also modify their color, set their thickness, make them flat, or hide them completely. notes 1. To disable borders, define a frameborder attribute for the • Frame borders are enabled by default. A yes value tag and set it equal to no: simply hard-codes the default browser behavior. When enabled, frame bor- ders appear as gray, bevel- Figure 67-1 shows the result. edged bars, approximately 5 pixels thick. A no value flattens the borders. Internet Explorer displays borders roughly 2 pixels thick (see Figure 67-1), provided no value has been defined for the border attribute (see Step 2). Netscape flattens the bor- ders also but leaves them 5 pixels thick. • Apply this attribute to the tag to govern the border’s appearance for all borders in the layout. Apply it to the tag to affect specific frames. Be aware that frames sharing a common border can’t have conflict- ing frameborder values. • A border value of 0 ren- ders borders invisible in Figure 67-1: Disabling the frame border in Internet Explorer Netscape (see Figure 67-2). Internet Explorer also 2. To modify the thickness of frame borders, add a border attribute to requires the frameborder the tag and set it equal to a numeric value representing attribute be set equal to no. the border’s width in pixels: Figure 67-2 shows the result. Please purchase PDF Split-Merge on to remove this watermark.
  14. Working with Frames 149 Task 67 Figure 67-2: Hiding borders in Netscape 3. To prevent users from resizing the border of a specific frame by drag- ging on it, add a noresize attribute to the tag represent- ing the frame you want to lock. For example: 4. To make the noresize attribute compatible with XHTML, set it equal to noresize, as shown here: 5. To specify border colors, add a bordercolor to either the tag (to modify a specific frame) or the tag (to govern all borders in the layout). Set the attribute equal to either a hexadecimal value or predefined color name. For example: cross-reference • Some of the early browsers didn’t support frames, which required Web designers to include noframes content (see Task 71). Please purchase PDF Split-Merge on to remove this watermark.
  15. 150 Part 8 Task 68 Controlling Frame Margins and Scroll Bars T he content inside a frame impacts scroll bar behavior. Scroll bars appear whenever there’s more content than can fit within the defined dimensions of the frame. This means that scroll bars often pop up when a browser window is resized or if the visitor’s monitor resolution is set sufficiently low. The margin settings you specify can add to or subtract from the volume of content in a frame. 1. Open the frameset document you want to edit. 2. To specify the width of a frame’s left and right margins, add a mar- ginwidth attribute to its tag and set it equal to a numeric value that represents the margin’s pixel width. 3. To specify the height of a frame’s top and bottom margins, add a marginheight attribute to its tag and set it equal to a numeric value that represents the margin’s pixel width. Listing 68-1 shows margin width and height defined for one frame. Figure 68-1 shows the result in Internet Explorer. Frame Margins Listing 68-1: Margin attributes set for one frame caution • If you set the scrolling attribute to no, be sure to test your site across as many browsers and plat- forms as you can. Text, borders, and the browser window all appear differ- ently in different browsers, operating systems, and monitor resolutions. Therefore, your layout can vary from visitor to visitor. Avoid having a visitor get to your site and not be able to see all the content in one of your frames because you’ve disabled scrolling. Please purchase PDF Split-Merge on to remove this watermark.
  16. Working with Frames 151 Task 68 Figure 68-1: Margin effects displayed in Internet Explorer 4. To control the scroll behavior of a frame, add a scrolling attribute to the tag: 5. Set the attribute equal to one of the following three values: • yes displays scroll bars regardless of the amount of content in the frame • no disables scroll bars entirely • auto displays scroll bars if the frame content is sufficient to require them (this is the default browser behavior) cross-reference • Coding frames can take some time to get used to. Many WYSIWYG editors make the process a bit easier. If you’re curious about those editors, see Part 15 (Working with Dreamweaver) and Part 16 (Working with FrontPage). Please purchase PDF Split-Merge on to remove this watermark.
  17. 152 Part 8 Task 69 Nesting Framesets T ables allow you to span columns and rows, but the colspan and rowspan attributes aren’t available for the tag. To achieve similar results, you’d instead nest a frameset in place of a tag. 1. Create that initial frameset, defining either columns or rows with the note cols or rows attribute, as shown in Listing 69-1. • Typically, if your main frameset (called the parent frameset) is rows, then the frameset you nest is columns, and vice-versa. Listing 69-1: Beginning a basic frameset 2. In place of one of the frame tags, insert an opening tag, as shown in Listing 69-2. Listing 69-2: The parent frameset’s second row occupied by the nested frameset 3. Enter the tags for the nested frameset, as shown in Listing 69-3. caution • Although having two clos- ing tags back to back looks a little odd, it is necessary. Forgetting the second tag is the first mistake most beginning coders make. Listing 69-3: Nesting frames inside the frameset Please purchase PDF Split-Merge on to remove this watermark.
  18. Working with Frames 153 4. Close the nested frameset with a closing tag. Listing 69-4 shows the completed code, and Figure 69-1 shows the results in a browser. Task 69 Nesting Frames Listing 69-4: Completed code for nested frames cross-reference • Most frame-based layouts place the main navigation Figure 69-1: Nested frames in Internet Explorer links in one frame and the documents they point to in another (see Task 70). Please purchase PDF Split-Merge on to remove this watermark.
  19. 154 Part 8 Task 70 Targeting Frames H yperlinks displayed in one frame can be written in such a way that the docu- ments they point to are opened within other frames in the frameset. By giv- ing your frames names (via the name attribute), you can reference those frames using the tag’s target attribute, setting it equal to the name of a particular frame. note 1. In the frameset document, add name attributes to each tag • With a base target defined, that target is now the and set them equal to a descriptive term. For example, left_frame default frame for all links in or right_frame, as shown in Listing 70-1. that document. Use the _self target when you need a link in that docu- ment to open inside its own frame. Targeting Frames Listing 70-1: Describing each tag with name attributes 2. In the document containing the hyperlinks you want to target, add the target attribute to each tag and set it equal to the frame name you want the linked documents to be displayed in. For exam- ple, target=“right_frame”, as shown in Listing 70-2. Left Frame Home About Us Contact Us Listing 70-2: Targeting each tag with a target attribute Please purchase PDF Split-Merge on to remove this watermark.
  20. Working with Frames 155 3. To make all links in a document open in a specific frame without using the target attribute, add a tag to the document’s head section, as shown here: Task 70 Targeting Frames tip 4. Define a target attribute for the tag and set it equal to the frame name you want the linked documents to be displayed in. • Besides the _blank value, HTML offers other prede- For example: fined target names that produce various effects. If the link is in a nested Targeting Frames frameset: target=”_parent” opens the document in the next outside frameset. 5. To make a link’s document open in a new browser window, set the target=”_self” opens target attribute equal to “_blank”: the document in the cur- rent frame (this is the Contact Us default value). target=”_top” displays the new document in the entire browser window, replacing the frameset altogether. cross-reference • You can use the target=”_blank” method to open links in a new window whether the link is part of a frameset or not. To learn more about the tag, see Part 5. Please purchase PDF Split-Merge on to remove this watermark.
Đồng bộ tài khoản