Summary Summary Tags, tags, and more tags! Today you learned about most of the remaining tags in the HTML language for presenting text, and quite a few of the tags for additional text formatting and presentation. You also put together a real-life HTML home page. You could stop now and create quite presentable web pages, but more cool stuff is to come. So, don't put down the book yet. Table 6.2 presents a quick summary of all the tags and attributes you've learned about today that are included in the HTML 4.01 specification. Table 6.3 summarizes the CSS properties that have been described in today's discussion. Table 6.2. HTML Tags from Lesson 6 Tag Attribute Use <address> </address> A signature for each web page; typically occurs near the bottom of each document and contains contact or copyright information. <b> </b> Bold text. <big> </big> Text in a larger font than the text around it. <blink> </blink> Causes the enclosed text to blink (Netscape only). <blockquote> </blockquote> A quotation longer than a few words. <cite> </cite> A citation. <code> </code> A code sample. <dfn> </dfn> A definition, or a term about to be defined. <em> </em> Emphasized text. <i> </i> Italic text. <kbd> </kbd> Text to be typed in by the user. <pre> </pre> Preformatted text; all spaces, tabs, and returns are retained. Text is printed in a monospaced font. <s> </s> Strikethrough text. (Deprecated in HTML 4.01.) <samp> </samp> Sample text. <small> </small> Text in a smaller font than the text around it. <strong> </strong> Strongly emphasized text. file:///G|/1/0672328860/ch06lev1sec12.html (1 von 3) [19.12.2006 13:48:50] Summary  Subscript text.  Superscript text. <tt> </tt> Text in typewriter font (a monospaced font such as Courier). <u> </u> Underlined text. <var> </var> A variable name. <span> </span> A generic tag used to apply styles to a particular bit of text. <hr> A horizontal rule line at the given position in the text. There's no closing tag in HTML for <hr>; for XHTML, add a space and forward slash ( /) at the end of the tag and its attributes (for example, <hr size="2" width="75%" /> ). size The thickness of the rule, in pixels. (Deprecated in HTML 4.01.) width The width of the rule, either in exact pixels or as a percentage of page width (for example, 50%). (Deprecated in HTML 4.01.) align The alignment of the rule on the page. Possible values are left, right, and center. (Deprecated in HTML 4.01.) noshade Displays the rule without three-dimensional shading. (Deprecated in HTML 4.01.) <br> A line break; starts the next character on the next line, but doesn't create a new paragraph or list item. There's no closing tag in HTML for <br>; for XHTML, add a space and forward slash ( /) at the end of the tag and its attributes (for example, <br clear="left" / > ). <nobr> </nobr> Doesn't wrap the enclosed text (nonstandard; supported by Netscape and Internet Explorer). <wbr> Wraps the text at this point only if necessary (nonstandard; supported by Netscape and Internet Explorer). Adds a space and forward slash at the end of the tag for XHTML 1.0. <p> </p>, <h1-6> </h1-6> align="left" Left-justifies the text within that paragraph or heading. (Deprecated in HTML 4.01.) align="right" Right-justifies the text within that paragraph or heading. (Deprecated in HTML 4.01.) align="center" Centers the text within that paragraph or heading. (Deprecated in HTML 4.01.) <div> </div> align="left" Left-justifies all the content between the opening and closing tags. (Deprecated in HTML 4.01.) file:///G|/1/0672328860/ch06lev1sec12.html (2 von 3) [19.12.2006 13:48:50] Summary align="right" Right-justifies all the content between the opening and closing tags. (Deprecated in HTML 4.01.) align="center" Centers all the content between the opening and closing tags. (Deprecated in HTML 4.01.) <center> </center> Centers all the content between the opening and closing tags. (Deprecated in HTML 4.01.) <font> </font> size The size of the font to change to, either from 1 to 7 (default is 3) or as a relative number using +N or -N. Relative font sizes are based on the value of <basefont>. (Deprecated in HTML 4.01.) face The name of the font to change to, as a list of fonts to choose from. (Deprecated in HTML 4.01.) <basefont> size The default font size on which relative font size changes are based. (Deprecated in HTML 4.01.) There is no closing tag in HTML for <basefont>; for XHTML, add a space and forward slash ( /) at the end of the tag and its attributes (for example, <basefont size="- 1" /> ). Table 6.3. CSS Properties from Lesson 6 Property Use/Values text-decoration Specifies which sort of decoration should be applied to the text. The values are underline, overline, line-through, blink, and none. font-style Specifies whether text should be italicized. The three values are normal, italic, and oblique. font-weight Specifies the degree to which text should be emboldened. Options are normal, bold, bolder, lighter, and 100 - 900. font-family Enables you to specify the font used for text. You can choose families such as serif, sans serif, and monospace, or specific font names. You can specify more than one font or font family as well. font-variant Sets the font variant to normal or small-caps. text-align Specifies how text is aligned: left, right, center, or justify. font-size Enables you to specify the font size in any unit supported by CSS. file:///G|/1/0672328860/ch06lev1sec12.html (3 von 3) [19.12.2006 13:48:50] Workshop Workshop Here you are at the close of another day (a long one!) and facing yet another workshop. Today's lesson covered a lot of ground, so I'll try to keep the questions easy. There are a couple of exercises that focus on building some additional pages for your website. Ready? Q&A Q If line breaks appear in HTML, can I also do page breaks? A HTML doesn't have a page break tag. Consider what the term page means in a web document. If each document on the Web is a single page, the only way to produce a page break is to split your HTML document into separate files and link them. Even within a single document, browsers have no concept of a page; each HTML document simply scrolls by continuously. If you consider a single screen a page, you still can't have what results in a page break in HTML. The screen size in each browser is different. It's based on not only the browser itself, but also the size of the monitor on which it runs, the number of lines defined, the font currently being used, and other factors that you cannot control from HTML. When you're designing your web pages, don't get too hung up on the concept of a page the way it exists in paper documents. Remember, HTML's strength is its flexibility for multiple kinds of systems and formats. Instead, think in terms of creating small chunks of information and how they link together to form a complete presentation. If page breaks are essential to your document, you might consider saving it in the PDF format and making it available for download. Q How can I include em dashes or curly quotes (typesetter's quotes) in my HTML files? A There are entities for all of these characters, but they may not be supported by all browsers or on all platforms. Most people still don't use them. To add an em dash, use &mdash;. The curly quote entities are &ldquo; for the left quote and &rdquo; for the right quote. Similarly, you can create curly single quotes using &lsquo; and &rsquo;. Quiz file:///G|/1/0672328860/ch06lev1sec13.html (1 von 3) [19.12.2006 13:48:51] Workshop 1. What are the differences between logical character styles and physical character styles? 2. What are some things that the <pre> (preformatted text) tag can be used for? 3. What's the most common use of the <address> tag? 4. Older versions of HTML provided ways to align and center text on a web page. What's the recommended way to accomplish these tasks in HTML 4.01? 5. Without looking at Table 6.2, list all eight logical style tags and what they're used for. Explain why you should use the logical tags instead of the physical tags. Quiz Answers 1. Logical styles indicate how the highlighted text is used (citation, definition, code, and so on). Physical styles indicate how the highlighted text is displayed (bold, italic, or monospaced, for example). 2. Preformatted text can be used for text-based tables, code examples, ASCII art, and any other web page content that requires extra spaces to align characters. 3. The <address> tag is most commonly used for signature-like entities on a web page. These include the name of the author of the web page, contact information, dates, copyright notices, or warnings. Address information usually appears at the bottom of a web page. 4. Alignment and centering of text can be accomplished with style sheets, which is the recommended approach in HTML 4.01. 5. The eight logical styles are <em> (for emphasized text), <strong> (for bold text), <code> (for programming code), <samp> (similar to <code>), <kbd> (to indicate user keyboard input), <var> (for variable names), <dfn> (for definitions), and <cite> (for short quotes or citations). Logical tags rely on the browser to format their appearance. file:///G|/1/0672328860/ch06lev1sec13.html (2 von 3) [19.12.2006 13:48:51] Workshop Exercises 1. Now that you've had a taste of building your first really thorough web page, take a stab at your own home page. What can you include that would entice people to dig deeper into your pages? Don't forget to include links to other pages on your site. 2. Try out your home page in several browsers and even on multiple platforms if you have access to them. Web developers have to get used to the fact that their designs are at the mercy of their users, and it's best to see right away how different browsers and platforms treat pages. file:///G|/1/0672328860/ch06lev1sec13.html (3 von 3) [19.12.2006 13:48:51] Lesson 7. Adding Images, Color, and Backgrounds Lesson 7. Adding Images, Color, and Backgrounds If you've been struggling to keep up with all the HTML tags I've been flinging at you the last couple of days, this lesson will be easier. In this Lesson In fact, in this lesson you won't be learning very many new HTML tags. Instead, you'll learn about how to add images to your pages and change the color of elements on a page. In particular, you'll learn the following: ● The kinds of images you can use in web pages ● How to include images on your web page, either alone or alongside text ● How to use images as clickable links ● How to set up and assign links to regions of images using client-side imagemaps ● How to provide alternatives for browsers that can't view images ● How to change the font and background colors on your web page ● How to use images for tiled page backgrounds ● How and when to use images on your web pages ● A few tips on image etiquette After this lesson, you'll know all you need to know about adding images to your web pages. file:///G|/1/0672328860/ch07.html [19.12.2006 13:48:51] Images on the Web Images on the Web Images displayed on the Web should be converted to one of the formats supported by most browsers: GIF, JPEG, or PNG. GIF and JPEG are the popular standards, and every graphical browser supports them. PNG is a newer image format that was created in response to some patent issues with the GIF format. It's superior to GIF in almost every respect, but old browsers don't support it. Many other image formats are supported by some browsers and not others. You should avoid them. Let's assume that you already have an image you want to put on your web page. How do you get it into GIF or JPEG format so it can be viewed on your page? Most image editing programs, such as Adobe Photoshop ( http://www.adobe.com/), Paint Shop Pro (http://www.jasc.com/), and CorelDRAW (http:// www.corel.com/), will convert images to most of the popular formats. You might have to look under the option for Save As or Export to find the conversion option. There are also freeware and shareware programs for most platforms that do nothing but convert between image formats. Many shareware and demo versions of image editing programs are available at http://www.download.com/ (search for "image editors" using the software platform of your choice). Tip If you're a Windows user, you can download IrfanView, which allows you to view images, and convert them to various formats, at http://www.infanview.com/. It also provides a number of other image manipulation features that are useful for working with images for the Web. Best of all, it's free for non-commercial use. To save files in GIF format, look for an option called CompuServe GIF, GIF87, GIF89a, or just plain GIF. Any of them will work. If you're saving your files as JPEG, usually the option will simply be JPEG. Remember how your HTML files have to have an .html or .htm extension to work properly? Image files have extensions, too. For GIF files, the extension is .gif. For JPEG files, the extensions are .jpg and . jpeg . Note Some image editors will try to save files with extensions in all caps (.GIF or .JPEG). Although they're the correct extensions, image names are case sensitive, so .GIF isn't the same extension as .gif. The case of the extension might not be important when you're testing on your local system, but it can be when you move your files to the server. So, use lowercase if you can. file:///G|/1/0672328860/ch07lev1sec1.html [19.12.2006 13:48:51] Image Formats Image Formats As I just mentioned, three image formats are supported by every major web browser: GIF, JPEG, and PNG. JPEG and GIF are the old standbys, each useful for different purposes. PNG is designed as a replacement for the GIF format, which was necessary after Unisys invoked its patent rights on the GIF format. (The patent has since expired.) To design web pages, you must understand and be able to apply both image formats and to decide which is appropriate to use in each case. GIF Graphics Interchange Format, also known as GIF or CompuServe GIF, is the most widely used graphics format on the Web today. It was developed by CompuServe to fill the need for a cross-platform image format. Note GIF is pronounced jiff, like the peanut butter, not with a hard G as in gift. Reallythe early documentation of GIF tools says so. The GIF format is actually two very similar image formats: GIF87, the original format, and GIF89a, which has enhancements for transparency, interlacing, and multiframe GIF images that you can use for simple animations. The GIF format is great for logos, icons, line art, and other simple images. It doesn't work as well for highly detailed images because it's limited to only 256 colors. For example, photographs in GIF format tend to look grainy and blotchy. The problem is that with the limited color palette, it's hard to create smooth color transitions. JPEG JPEG, which stands for Joint Photographic Experts Group (the group that developed it), is the other popular format for images on the Web. JPEG (pronounced jay-peg) is actually a compression type that other file formats can use. The file format for which it's known is also commonly called JPEG. JPEG was designed for the storage of photographic images. Unlike GIF images, JPEG images can include any number of colors. The style of compression that JPEG uses (the compression algorithm) works especially well for photographs, so files compressed using the JPEG algorithm are considerably smaller than those compressed using GIF. JPEG uses a lossy compression algorithm, which means that some of the data used in the image is discarded to make the file smaller. Lossy compression works extremely well for photographic data, but makes JPEG unsuitable for images that contain elements with sharp edges, such as logos, line art, and type. JPEG files are supported by all major web browsers. PNG PNG, pronounced "ping," was originally designed as a replacement for GIFs. It stands for Portable Network Graphics. Only the oldest browsers don't support PNG natively. Current browsers all support PNG, and it has some important advantages over GIF (and to a lesser extent over JPEG). Like GIF, it is a non-lossy image format. No information about the image is lost when it is compressed. file:///G|/1/0672328860/ch07lev1sec2.html (1 von 2) [19.12.2006 13:48:51] Image Formats It has better support for transparency than GIF, and supports palette-based images (like GIF) as well as true-color and grayscale images (like JPEG). In other words, you don't have to worry about color usage with PNG, although limiting color usage will result in smaller files. More and more sites are using the PNG format for images, but due mainly to inertia, GIF and JPEG are still the most used formats. For more information on PNG, see http://www.libpng.org/pub/png/. file:///G|/1/0672328860/ch07lev1sec2.html (2 von 2) [19.12.2006 13:48:51] . additional pages for your website. Ready? Q& ;A Q If line breaks appear in HTML, can I also do page breaks? A HTML doesn't have a page break tag. Consider what the term page means in a web document Summary Summary Tags, tags, and more tags! Today you learned about most of the remaining tags in the HTML language for presenting text, and quite a few of the tags for additional text. There are also freeware and shareware programs for most platforms that do nothing but convert between image formats. Many shareware and demo versions of image editing programs are available at