Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P7

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

Thêm vào BST

Báo xấu

142
lượt xem 11
download

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

Tham khảo tài liệu 'creating cool web sites with html, xhtml and css (2010)- p7', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P7

274 Creating Cool Web Sites with HTML, XHTML, and CSS Notice that, in addition to specifying float: left; in the style attribute, I also add a 10 pixel margin around all four sides of the container border and spruce things up with a light-red background (which appears gray in the black and white figure). Technically, #FDF results in a light purple—red + blue = purple—but your color may note vary, as mine does! If you really want purple, try #C9F instead. Figure 12-8 shows the attractive results and should certainly inspire you regarding ways to improve long passages of text! Figure 12-8: Float and container tweaks produce a delightful result. The float: CSS attribute can take three possible values: left, right, or none; you use the last to override the parent float: value if you specify one. Remember that this attribute affects any container, even one that has child containers, so you can use this layout technique with a parent container that includes multiple paragraphs of text, graphics, hyperlinks, or whatever. It still acts as a single unit for any CSS presentation speci fications that you apply at the parent container level. Container Positioning The idea that containers can hold child containers and that you can alter the appearance of the parent through CSS is a cornerstone of advanced Dynamic HyperText Markup Language (DHTML) Web design. It’s also why accurately and precisely positioning the container is so important. In the CSS world, you have four different container-positioning options: absolute, relative, fixed, and static. The good news is that one of these—static—is the default, so you’re already familiar with it. In static positioning, the container lays out as it would if you didn’t specify any positioning, with preceding material appearing on-screen before the container and subsequent material appearing after the container. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 275 Absolute positioning Absolute positioning offers a way to specify, pixel by pixel, exactly where the container appears on-screen. You set this positioning through a combination of three CSS attributes. The most obvious is position: with the value absolute, but you also need to specify some combination of the top:, left:, right:, and bottom: values, all of which are relative to the edges of the parent container. Those last few words are so critical, I want to repeat them again: all of which are relative to the edges of the parent container—not relative to the Web page itself. If you specify top: and left:, for example, they’re relative to the top-left corner of the parent container. Here’s an example of how you can use absolute positioning to change the appearance of our working passage from Arthur Conan Doyle’s novel, The Red-Headed League: The stout gentleman half rose from his chair and gave a bob of greeting, with a quick little questioning glance from his small fat-encircled eyes. “Try the settee,” said Holmes, relapsing into his armchair and putting his fingertips together, as was his custom when in judicial moods. “I know, my dear Watson, that you share my love of all that is bizarre and outside the conventions and humdrum routine of everyday life. You have shown your relish for it by the enthusiasm which has prompted you to chronicle, and, if you will excuse my saying so, somewhat to embellish so many of my own little adventures.” Figure 12-9 shows the results. Figure 12-9: Absolute positioning often layers containers atop each other. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
276 Creating Cool Web Sites with HTML, XHTML, and CSS I don’t know about you, but Figure 12-9 gives me a bit of a headache! The good news is that you have a couple of different ways to address the overlapping container problem. The fastest solution is to simply restore the background color so that you can’t see the text of the second paragraph, which the following example accomplishes: When the preceding code replaces the previous tag and style attributes, the result is as shown in Figure 12-10. You can see this is considerably easier on the eye. Figure 12-10: Specifying a background color hides the overlapping text problem. It’s not a completely satisfying solution, however, because you still face the issue of the miss ing text. In this particular example, the best solution is to use the float: left CSS attribute. Experiment with it yourself and find what works best for you. Relative positioning Absolute positioning is absolute only within the parent container, and most DHTML designers prefer relative positioning, which they consider part of the normal flow of the document for layout. In the example in the preceding section, switching from absolute to relative solves the overlap problem, but in a somewhat inelegant manner (leaving a big empty space to the right of the purple box), as follows: Figure 12-11 shows the result of replacing the existing tag style attribute with the val ues shown in the preceding code. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 277 Figure 12-11: Relative positioning makes the container part of the regular document flow. In this case, float: left produces a more attractive result. So what’s the point? To see why the positioning of elements can prove so useful, I need to change the perspective a bit. Instead of merely providing you with a tool to create big containers of information, rela tive positioning can actually become your best friend when you want to exert fine control over the positioning of inline elements. The vertical-align CSS attribute enables you to change the relative location of an element, such as the trademark symbol, in a line of text. Relative positioning offers far greater control over inline positioning, and that’s its greatest value, as the following example shows: .tm { position: relative; top: -2.2em; left: -2em; font: 8pt bold; border: 1px red groove; padding: 1px; background-color: #009; color: white; } This book has been brought to you by J. Wiley & Sons, Inc. tm— formerly Hungry Minds, Inc., formerly IDG Books, Inc. Here I create a new class, .tm, that creates a small blue box with white tm lettering inside that’s actually a hyperlink to the trademark information on the site. By using the top and left attributes, I can carefully tune exactly where the box appears on the layout, pixel by pixel. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
278 Creating Cool Web Sites with HTML, XHTML, and CSS on the web A figure illustrating this example appears on the book’s Web site at http:// www.intuitive.com/coolsites/. Fixed positioning You have one more possible positioning value, fixed. This position is essentially the same as absolute positioning with one spiffy difference: Fixed containers don’t scroll as the rest of the page scrolls. Fixed positioning offers another way to get around the hidden text problem: Simply let the user scroll to reveal the otherwise hidden text. Probably not the most user-friendly solution, but it works! Here’s a nifty fixed header example that shows up on this book’s Web site (at http://www. intuitive.com/coolsites/, in Chapter 12). Before you jump up and try this fixed position example on your computer, I give caution you fair warning: Windows browsers don’t support fixed positioning in my tests. Clipping Containers The capability to size and position containers with a high degree of precision is useful, but if the con tents are larger than the container parameters, browsers ignore the specified dimensions. Two CSS attributes offer control over what happens if the contents of a container are larger than the size that you specify for the container itself. The first is overflow, and it offers three possible values: hidden, visible, and scroll. For hid- den or scroll to work, you must define a clipping region, using the clip CSS attribute. You define the clipping region as a rectangle. Think of it as a stencil cutout superimposed atop the region, with its top left and bottom right vertices defined. If the material can be seen through the cutout, it’s displayed. If not, the material is hidden. Now for the bad news: Very few of the browsers available as of this writing support either overflow or clip as the CSS specification defines them. Worse, the Cascading Style Sheet 2.0 specification defines the rectangular region associated with the clip attribute as rect(top, right, bottom, left), but Microsoft Internet Explorer, in its flaky implementation of clip, expects a rectangular definition of rect(top, left, width, height). I encourage you to experiment with a combination of size, overflow, and clip values to see whether you obtain results that are a reasonable solution for your specific design needs! Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 279 Here’s how fixed positioning looks in HTML: ADVENTURE II. THE RED-HEADED LEAGUE Hide Containers with the Visibility: Attribute Examples in preceding sections demonstrate how you can assign containers a wide vari- ety of layout attributes and can even make them float above other containers by setting position changes. Something that you may find remarkable is that every container also has a visibility: attribute—one that controls whether its contents appear on-screen or remain hidden to the viewer. The following example shows how this visibility attribute works: As he spoke there was the sharp sound of horses’ hoofs and grating wheels against the curb, followed by a sharp pull at the bell. Holmes whistled. “A pair, by the sound,” said he. “Yes,” he continued, glancing out of the window. “A nice little brougham and a pair of beauties. A hundred and fifty guineas apiece. There’s money in this case, Watson, if there is nothing else.” “I think that I had better go, Holmes.” “Not a bit, Doctor. Stay where you are. I am lost without my Boswell. And this promises to be interesting. It would be a pity to miss it.” Figure 12-12 shows the results. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
280 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 12-12: You still must allocate space even for hidden containers. The most important thing to notice about Figure 12-12 is that the paragraph of information that’s hidden still has its space allocated in the layout of the page. To work with the visibility: of a container, you specify a unique ID (in this case, “holmes1”). To go further, you must jump into the world of JavaScript . . . Controlling visibility with JavaScript The visibility: attribute isn’t of much use unless you can make it visible on demand. To accomplish any event-based scripting on a Web page requires JavaScript, the official scripting language of HTML 4.0 and CSS 2.0. x-ref For a refresher on JavaScript, flip back to Chapter 11. The Web browser uses a document object model (DOM), and every container and element on the page is accessible through an appropriate reference to that element in the DOM. on the web To learn more about document object models, surf over to http://www.w3.org/ DOM/. To switch the value of the visibility: attribute from hidden to visible, reference the paragraph by ID through the circuitous route of the DOM itself, as follows: document.all.holmes1.style.visibility=”visible”; I’d better explain. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 281 You’re already familiar with the idea that a series of nested containers surrounds a given element on your Web page, right? Simply imagine that you now want a method of referring uniquely to any of the elements in any of the containers, and you see that this dot notation (that is, separating elements with a period) makes sense. In fact, by using a unique ID value, all you really have in the preceding line is the following: document.all.holmes1 This line refers uniquely to the container (paragraph) that you designate as holmes1 on the Web page. After you initially specify a unique element, you can access a wide variety of different attributes of that container by further utilizing the dot notation. To get to visibility:, you must use the .style element and then specify the exact name of the attribute that you want. Conceptually, it’s as follows: unique container descriptor.style.visibility After you specify the visibility: attribute of the style of the holmes1 paragraph, you can change its value by using a simple assignment statement in JavaScript, as follows: document.all.holmes1.style.visibility = “visible”; I hope that makes a bit more sense. If you can’t get the examples in this session to work, perhaps your Web browser is tip using an older document model. If that’s the case, try using document.holmes. visibility = “visible”; instead. JavaScript is all eventbased, so to test this snippet of code, I’m going to associate the reas signment of visible to a simple event that occurs on all Web pages: onload. After you spec ify this event in the tag of a page, onload enables you to easily specify JavaScript to execute as soon as the Web browser receives every element of the page from the network. Inline JavaScript looks a little bit different from inline CSS because you don’t have a single attribute that you always use, style. Instead, you list the desired event, with the associated JavaScript code on the right-hand side of the statement. The tag of your page may look like this: By convention, many people write JavaScript events in mixed upper- and lower- note case letters, although to ensure that your page remains fully XHTML compliant, JavaScript events should be all lowercase. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
282 Creating Cool Web Sites with HTML, XHTML, and CSS Following is a complete listing of the source for Figure 12-13: As he spoke there was the sharp sound of horses’ hoofs and grating wheels against the curb, followed by a sharp pull at the bell. Holmes whistled. “A pair, by the sound,” said he. “Yes,” he continued, glancing out of the window. “A nice little brougham and a pair of beauties. A hundred and fifty guineas apiece. There’s money in this case, Watson, if there is nothing else.” “I think that I had better go, Holmes.” “Not a bit, Doctor. Stay where you are. I am lost without my Boswell. And this promises to be interesting. It would be a pity to miss it.” If you view this example in a Web browser, you may expect the hidden paragraph to appear along with the other paragraphs of material. Figure 12-13: JavaScript materializes the otherwise invisible paragraph. This example isn’t too scintillating, but what if you add the following two hypertext reference links to this page? They both associate with the onmouseover event, which triggers whenever the user moves the cursor over the highlighted text. make it visible | hide it Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 283 Now you can start to see where CSS plus JavaScript can really give you a tremendous amount of power! In this example, moving your cursor over the link hide it sets the visibility: of the holmes1 element to hidden, hiding the paragraph of text. Move your cursor over make it visible and the visibility: of holmes1 is set to visible, revealing the paragraph again. The href=”#” is a common trick for a null hypertext reference that you tie to a note JavaScript event. If you click it, you go to the same Web page, effectively making it an empty reference. You can also use to tie a JavaScript event to a container, as in the following example: “Not a bit, Doctor. Stay where you are. I am lost without my Boswell. And this promises to be interesting. It would be a pity to miss it.” The interesting thing about using is that the enabled text appears completely identical to the surrounding text. Go back to Figure 12-13 and look closely at the two sentences shown in the preceding example: Stay where you are. and It would be a pity to miss it. You can see no visible indicator that they’re turbocharged, capable of hiding or displaying a paragraph of the text on the user’s whim! The display: attribute controls visibility and flow Although the visibility: attribute is definitely valuable, it has one characteristic that makes it less than the ideal layout element: The browser allocates space for the invisible element even if it never appears on-screen. You can see that in Figure 12-12. CSS offers a second style attribute that enables you to simultaneously control the visibility and whether the space for the element is allocated: display:. According to the CSS 2.0 specification, the display: attribute offers a whole group of possi ble values, as enumerated in Table 12-2. Table 12-2: Possible Values for Display Value Explanation inline Container with no break before or after. block Container with a forced line break above and below. list-item Element that creates both a box and list-item box (indented). Continued Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
284 Creating Cool Web Sites with HTML, XHTML, and CSS Table 12-2: Continued Value Explanation run-in Element that you can insert into the subsequent container. compact Element that you can place adjacent to the subsequent container. marker Used for pseudocontainer references. inline-table Inline table container (not possible in regular HTML; regular tables are always block elements). table Table container. table-cell Table data-cell container. table-row Table data-row container. table-row-group Table data-row group container. table-column Table column container. table-column-group Table column group container. table-header-group Table header group container. table-footer-group Table footer group container. table-caption Table caption container. none Invisible container that gets no allocation for layout and flow. The only values that need interest you are none, block, and inline. The attribute display: none sets the visibility: of the element to hidden and frees up any allocated space for the container in the page layout. The other two possibilities, block and inline, illustrate the same distinction that differentiates and : The former forces a blank line above and below, whereas the latter displays no break from the surrounding material. Here’s how you can use display: none with the buttons of the last paragraph as your inspiration for this approach: As he spoke there was the sharp sound of horses’ hoofs and grating wheels against the curb, followed by a sharp pull at the bell. Holmes whistled. “A pair, by the sound,” said he. “Yes,” he continued, glancing out of the window. “A nice little brougham and a pair of beauties. A hundred and fifty guineas apiece. There’s money in this case, Watson, if there is nothing else.” Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 285 “I think that I had better go, Holmes.” “Not a bit, Doctor. Stay where you are. I am lost without my Boswell. And this promises to be interesting. It would be a pity to miss it.” This example is particularly interesting to experiment with on your own computer, but Figures 12-14 and 12-15 show how the page initially loads and how the page looks after I move my cursor over the sentence Stay where you are. Figure 12-14: The default layout with the block hidden from view. Notice how no space or other indication in Figure 12-14 hints at anything lurking beneath the surface on this Web page; then take a look at Figure 12-15. Figure 12-15: The mouse is over the magic phrase, so the hidden paragraph emerges. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
286 Creating Cool Web Sites with HTML, XHTML, and CSS In this case, the JavaScript is different because I’m working with a different CSS attribute. Instead of visibility: hidden and visibility: visible, the settings are display: none and display: block. Inline elements use display: inline instead. Here’s how you can use display: inline to make acronyms automatically spell themselves out if someone puts the cursor over the acronym: CSS (Cascading Style Sheets) Type this small code snippet in and try it yourself; you’re sure to like the results! Notice the addition of a second JavaScript event: onmouseout triggers after the cursor moves out of the container. In essence, I set display to inline if the cursor is over the abbreviation CSS and reset it to none after the cursor moves out. Stacking: Using z-indexes for a 3D page I know it may have been years ago, but do you remember your high school geometry class? In the class, you undoubtedly learned about the three primary axes or dimensions of our physical space. Other dimensions exist, notably time (duration), that also affect physical space, but fortunately, I’m going to just look at the three core dimensions: height, width, and depth. Imagine that each container on a Web page has its own depth value and that, the deeper the element, the lower that depth value. A depth of zero is on the bottom, and a depth of 100 is on the topmost layer. If you have three layers, the depth values (which are known as z-index values in DHTML) may be z=0 for the bottom, z=1 for the middle, and z=2 for the topmost layer. The attribute z-index easily translates this concept into CSS nomenclature. The z-index attribute accepts a single integer value from zero to 100, with higher values positioned above lower values on the Web page. Here’s an example:
Chapter 12: Advanced Cascading Style Sheets 287 top: 80px; left: 40px;”> Figure 12-16 shows the result, which, on your computer screen, is quite attractive, particu larly if you remember that each colored box is actually a full dynamic HTML container and can hold graphics, hypertext links, or whatever else you want. Figure 12-16: Three boxes, neatly stacked atop each other. Using JavaScript to change z-index values You can initially set z-index values within the CSS, but to dynamically change them, you must jump into JavaScript again. The onclick JavaScript event triggers the associated script after the cursor moves into the element and the user clicks the mouse button, as the following example demonstrates:
288 Creating Cool Web Sites with HTML, XHTML, and CSS Continued height: 150; top: 80px; left: 40px;” onclick=”document.all.red.style.zIndex=100;”> This change appears to achieve the result that you want. You create layers that you can click to bring to the foreground. If you try actually changing the z-index of the different layers in your browser, however, you quickly find that, after you move all three to the z-index of 100, they can’t move farther towards the top—so nothing changes. One solution to this problem is to make each layer move the other layers back to their original settings as it rises, so that each onclick looks more like the following example: onclick=”document.all.green.style.zIndex=100; document.all.blue.style.zIndex=2; document.all.red.style.zIndex=1;” This solution works (sort of), but although each layer that you click does indeed jump to the front after you click it, your browser loses the relative z-index values of the other two layers after they automatically reset to their original values. A more sophisticated approach to this situation makes the requested layer’s z-index increment by one and the z-index of the other layers decrement by one, as follows: onclick=”document.all.green.style.zIndex += 1; document.all.blue.style.zIndex -= 1; document.all.red.style.zIndex -= 1;” Here I’m using a convenient JavaScript shorthand: The += is an increment, so a+=1 tip is exactly the same as a = a + 1; it’s just more succinct. This solves the problem, but now a new problem appears. You don’t want any layers to ever have a z-index of less than zero, because that’s an illegal value. If you blindly subtract from a zIndex, you could easily end up with a negative number. Another level of JavaScript sophistication can constrain the decrement statements so that the script checks for a zero value before deciding to subtract one, as in the following examples: onclick=”document.all.blue.style.zIndex += 1; if (document.all.green.style.zIndex > 0) { document.all.green.style.zIndex -= 1; } if (document.all.red.style.zIndex > 0) { document.all.red.style.zIndex -= 1; }” Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 289 In addition to ensuring that nothing is ever less than zero, you must also be sure that nothing is ever greater than 100, the maximum z-index value that you can have, as the following example shows: onclick=”if (document.all.blue.style.zIndex < 100 { document.all.blue.style.zIndex += 1; } if (document.all.green.style.zIndex > 0) { document.all.green.style.zIndex -= 1; } if (document.all.red.style.zIndex > 0) { document.all.red.style.zIndex -= 1; } To understand what’s wrong with this seemingly reasonable solution, open this example from the book’s Web site (http://www.intuitive.com/coolsites/) and click the red layer a half-dozen times, then click the blue layer. The result that you want is for the blue layer to move to the front after you click, but it doesn’t work. Clicking the red layer a half-dozen times increments its z-index each time, resulting in a red z-index of 7 (after starting out at z-index: 1, remember). Clicking blue then sets its z-index to 1 (after starting at 2 but decrementing to zero because of the clicks on red) and decrements the red layer from 7 to 6. Four more clicks on the blue region are necessary before the blue layer correctly moves to the top. The complete solution is actually to write a sophisticated JavaScript function that checks the value of the other layers and ensures that the layer that you want increments sufficiently to move to the front. Subsequently clicking that layer doesn’t result in any change in z-index values. Netscape Navigator includes a built-in method (a fancy name for a subroutine) to accomplish what you want: moveAbove(id). However, it requires that you use the note Netscape approach to layers rather than the more standard CSS tags, as shown here. A JavaScript function implementing the moveAbove concept might look like this: function moveAboveIt(id1, id2) { id1o = eval(“document.all.”+id1+”.style”); id2o = eval(“document.all.”+id2+”.style”); if (id1o.zIndex > id2o.zIndex) { return 1; // already above, nothing to do } if (id2o.zIndex == 100) { id2o.zIndex -= 1; } id1o.zIndex = id2o.zIndex + 1; return 1; } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
290 Creating Cool Web Sites with HTML, XHTML, and CSS This example represents quite a lot of JavaScript, but it’s really rather straightforward: If id1 already has a higher z-index value than id2, the function has nothing to do and exits directly. If id2 is already at 100, id1 can’t be one higher, so id2 must decrement by one, which you do by using the -=1 shortcut. Finally, id1’s z-index is set so that it’s one higher than id2’s z-index. Table 12-3: CSS Styles Covered in This Chapter Tag Meaning margin Specifies spacing between container contents and surrounding material margin-left Specifies left margin setting only margin-right Specifies right margin setting only margin-top Specifies top margin setting only margin-bottom Specifies bottom margin setting only padding Specifies spacing between container contents and container edge padding-left Specifies left padding setting only padding-right Specifies right padding setting only padding-top Specifies top padding setting only padding-bottom Specifies bottom padding setting only border Specifies color, style, and size of container border element (other values include border-left, border-right, border-top, or border- bottom). width Specifies container width height Specifies container height float Specifies container’s relationship container to surrounding material position Specifies container’s position on page. top Specifies position of container’s top relative to its parent container left Specifies position container left side relative to its parent container overflow Determines what Web browser does with content that doesn’t fit in con tainer (must define a clipping region with clip) clip Defines a clipping region to use with overflow attribute visibility Indicates whether container is visible or not display Controls container visibility and flow in page layout zindex Specifies container’s relative z-index value Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 12: Advanced Cascading Style Sheets 291 Summary In this chapter, you learned how containers function within CSS and the myriad ways you can control and modify a container’s presentation on your Web pages. Not only did you explore the difference between borders, margins, and padding as they relate to containers, you also examined how content flows both within and around containers. Finally, you delved into positioning containers on your pages, and how working with z-index values affects where a container’s content appears on your Web pages. In Chapter 13, you will learn about weblog, a different and increasingly popular way to manage your Web site. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Site chapter Development with Weblogs In This Chapter 13 Understanding weblogs? Creating a weblog Getting a handle on RSS Ensuring valid RSS feeds O f the many trends to hit the Web in the last few years, few have had more impact on the daily experience of Web surfers than weblogs, or blogs as they’re commonly known. Initially used as a system for creating online diaries, they’ve expanded to encompass business and other professional uses, and you can find weblogs at Yahoo!, the BBC World Service, Google, CNN, and many more sites. But don’t be intimidated! At its most fundamental, a weblog is a content manage ment system that lets you design the site once and then focus on the content, on what you want to say, without worrying about CSS, HTML, and similar concerns. To demonstrate, I will give you a guided tour of my own weblog, The Intuitive Life, and show you how it’s built and how I can add new weblog entries with just a few clicks. I explore RSS feeds, a core underpinning of weblog popularity. The chapter wraps up with a quick examination of how to build your own RSS feed and vali date it so that even if you don’t want to use a blog, you can still reap the benefit of these new technologies on your own site. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.