# HTML in 10 Steps or Less- P5

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

0
66
lượt xem
13

## HTML in 10 Steps or Less- P5

Mô tả tài liệu

HTML in 10 Steps or Less- P5: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ủ đề:

Bình luận(0)

Lưu

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

1. 56 Part 2 Task 27 Nesting Lists N esting simply means to place elements inside other elements. When you nest lists, you insert a new ordered or unordered list between list items in an existing list. The existing list is called the parent list and the second, nested list is called the child list. You can, in turn, nest a third list within the second, a fourth within the third, and so on. By nesting lists in this fashion, each list becomes a note sublist of the parent list item above it. This technique is ideal for creating formal outlines. • Each nested list is indented beneath its parent list item. The deeper 1. In the body of an HTML document, begin the parent list by enter- you nest, the deeper the ing an or tag. list is indented. 2. Define an appropriate type attribute. 3. Move to the next line, indent, and insert list items for your primary topics using and tags. 4. End the parent list with a closing or tag. 5. Beneath a list item, nest a child list whose items represent subcate- gories of the parent list item above it. Set an appropriate type attribute for this list’s or tag also. 6. Nest subsequent lists for each new subcategory level you require. A full code example appears in Listing 27-1. Figure 27-1 shows how the document appears in the browser. Figure 27-1 Nested lists rendered in the browser Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
2. Working with Text 57 Nested Lists Task 27 Main Idea tip Subordinate Idea • By indenting your code, and even adding blank lines before and after Supporting Detail nested lists, you can easily locate where each new list Example begins and ends. Example Supporting Detail Type defaults to disc First nest defaults to circle Third nest defaults to square... and continues as square until you set a type attribute cross-reference Listing 27-1: Example of nested lists • You can modify list styles using Cascading Style Sheets (see Part 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
3. 58 Part 2 Task 28 Creating Definition Lists D efinition lists are slightly different than the previous list types you’ve encoun- tered. The list items in a definition list consist of two parts: a term and a description. Browsers render definition lists by placing the term on one line and indenting the definition underneath it, creating what’s called a hanging indent. You use three pairs of tags to create a definition list: and tags define where the list begins and ends, and tags define the term, and and tags define the term’s definition. 1. In the body of your HTML document, enter a tag to begin your list. 2. Begin your term by proceeding to the next line, indenting, and enter- ing a tag. Follow this opening tag with the first term you intend to define and finish it with a closing tag. 3. Begin the term’s definition by proceeding to the next line, indenting to be directly under the term, and then entering a tag. 4. Follow this tag with the text that defines the term and close this with a tag. 5. Continue this process, entering as many terms and definitions as you require, as shown in Listing 28-1. The Ordered List Created using the OL element. This list should contain information where order should be emphasized. The Unordered List Created using the UL element. Listing 28-1: Example of a definition list 6. End the definition list with a closing tag. An example of a caution completed definition list is shown in Listing 28-2. The page this code • The W3C, which maintains the HTML standard, dis- produces appears in Figure 28-1. courages designers from using lists purely as a means of indenting text. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
4. Working with Text 59 Definition Lists Task 28 Lists in HTML The Ordered List tip Created using the OL element. This list should • Definition lists can be used to create written dialog. contain information where order should be For the term, enter the emphasized. speaker’s name; for The Unordered List the definition, enter the Created using the UL element. This list should be speaker’s lines. used to express a series of significant points The Definition List Create using the DL element. This list should be used to define a list of terms. Listing 28-2: A definition list Figure 28-1: A definition list indenting the definitions beneath each term, thereby creating a hanging indent cross-reference • Indenting is a stylistic con- cern, and therefore better left to Cascading Style Sheets (see Part 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
5. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
6. Part 3: Working with Images Task 29: Inserting Images Task 30: Controlling Image Alignment and Spacing Task 31: Resizing Images Using Photoshop Elements Task 32: Optimizing GIF Images Using Photoshop Elements Task 33: Optimizing JPEG Images Using Photoshop Elements Task 34: Optimizing PNG Images Using Photoshop Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
9. 64 Part 3 Task 30 Controlling Image Alignment and Spacing I mage alignment is controlled with the align attribute. The values top, middle, and bottom relate to the image’s position relative to the surrounding text. The values left and right cause the image to float to the left or right notes margin, wrapping text down the image’s opposite side. White space surrounding • Images floated to the left are pinned to the left an image is controlled with the hspace and vspace attributes. margin; text wraps around 1. To align an image element, add an align attribute to the tag them down the right side. as shown here: When floated to the right, the image is pinned to the down the left side of the image. 2. To vertically align the top of the image with the top, middle, or bottom of the preceding line of text, set the align attribute equal to • The hspace attribute affects the spacing on top, middle, or bottom. Figure 30-1 shows the results created by the left and right side each value. of an image; the vspace attribute affects the spac- ing above and below the image. • The align attribute is deprecated in favor of Cascading Style Sheets (see Part 9). Figure 30-1: The effects of the align attribute set to top, middle, and bottom, respectively 3. To float an image element to the left or right margin, set the align attribute equal to either left or right. Figure 30-2 illustrates both alignments. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
10. Working with Images 65 Task 30 Figure 30-2: Two paragraphs with images floated to the left and right tips 4. To center an image, wrap the tag inside opening and closing • The default value of align is bottom, so using this tags and add an align attribute to it instead, setting it equal value is the same as not to “center”. Figure 30-3 shows the results of centering an image. defining the attribute at all. • The tag is short for “division.” Use it wherever you intend to make a logical division of page content that doesn’t lend itself easily to textual markup, like the tag. The tag’s align attribute accepts the value center, just as the tag does. Figure 30-3: A centered image • Another way to center any- thing in HTML is to place 5. To increase the amount of white space around an image, add the content between opening and closing hspace and vspace attributes and set them equal to a pixel value, as tags. This shown in Figure 30-4. practice is deprecated by the World Wide Web Consortium, but it works in all browsers. • You typically modify the white space around an image when it floats amongst text. Browsers generally default to an hspace value of 3, while the vspace value defaults to 0. Figure 30-4: An image with 25 pixels of horizontal and vertical space added with the hspace and vspace attributes Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
11. 66 Part 3 Task 31 Resizing Images Using Photoshop Elements Image editing is not exactly specific to HTML, but it is important to understand whenever you work with images. notes Changing an image’s pixel dimensions in an image editor is called resampling. • For Tasks 31–34, we chose to use Adobe Photoshop As you might guess, decreasing the image’s dimensions — also called downsampling — deletes data from your image. Increasing the dimensions Elements 2.0 because (resampling up) adds new pixels through a process called interpolation — which it’s based on Adobe looks at existing pixels in the image and determines what the best color values of Photoshop — the most widely used professional the added pixels should be. In general, resampling up results in a loss of detail. image-editing application on the market. Currently 1. To resample an image using Photoshop Elements, first open the file list-priced at USD $99, it you want to resample by choosing File ➪ Open from the menu. can be found at retailers (educational and other- 2. Choose Image ➪ Resize ➪ Image Size from the menu. This opens wise) where discounts the Image Size dialog box (see Figure 31-1). and manufacturer’s rebates reduce the price to less than USD$50. Download a 30-day free trial version from www.adobe.com/ products/tryadobe/main .jhtml#product=40. If you own a scanner, chances are it came bundled with image editing software which should also be able to handle these tasks. • Bicubic is the most precise interpolation method in Photoshop Element. It takes longer to process Figure 31-1: The Image Size dialog box in Adobe Photoshop Elements but it produces the best results. Nearest Neighbor is the fastest and, conse- 3. At the bottom of the dialog box, select the Resample Image option quently, least precise inter- and choose an interpolation method from the pop-up menu (see polation method. Bilinear Figure 31-2). falls between Bicubic and Nearest Neighbor, as a medium-quality interpola- tion method. Figure 31-2: The Resample Image interpolation pop-up menu Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
12. Working with Images 67 4. Click the Constrain Proportions option if it isn’t already checked. Doing so maintains the image’s proportions by automatically updat- ing the width or height when you alter one of the dimensions. Task 31 5. Enter Width and Height values in the Pixel Dimensions fields. If you want to use percentages of the current dimensions instead, click the pop-up menus to the right of the Width and Height fields to switch from Pixels to Percent (see Figure 31-3). Figure 31-3: Choose a unit of measure: pixels or percentage 6. The image’s resulting file size appears at the top of the Image Size dialog box, with the old file size in parentheses. Click OK to process your resampling choices and close the dialog box. cross-reference • Manually resizing an image in this fashion is preferred to simply changing the val- ues of an tag’s width and height attributes. See Task 29. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.