Summary Summary Today, you learned all about links. Links turn the Web from a collection of unrelated pages into an enormous, interrelated information system (there are those big words again). To create links, you use the <a> </a> tag pair, called the link or anchor tag. The anchor tag has attributes for creating links (the HRef attribute) and anchor names (the name attribute). When linking pages that are all stored on the local disk, you can specify their pathnames in the href attribute as relative or absolute paths. For local links, relative pathnames are preferred because they enable you to move local pages more easily to another directory or to another system. If you use absolute pathnames, your links will break if you change anything in the hard-coded path. If you want to link to a page on the Web (a remote page), the value of the HRef attribute is the URL of that page. You can easily copy the URL of the page you want to link. Just go to that page by using your favorite web browser, and then copy and paste the URL from your browser into the appropriate place in your link tag. To create links to specific parts of a page, set an anchor at the point you want to link to, use the <a> </a> tag as you would with a link, but rather than the HRef attribute, you use the name attribute to name the anchor. You then can link directly to that anchor name by using the name of the page, a hash sign ( #), and the anchor name. Finally, URLs (uniform resource locators) are used to point to pages, files, and other information on the Internet. Depending on the type of information, URLs can contain several parts, but most contain a protocol type and location or address. URLs can be used to point to many kinds of information but are most commonly used to point to web pages ( http), FTP directories or files (ftp), electronic mail addresses ( mailto), or Usenet news (news). file:///G|/1/0672328860/ch05lev1sec7.html [19.12.2006 13:48:41] Workshop Workshop Congratulations, you learned a lot today! Now it's time for the workshop. Many questions about links appear here. The quiz focuses on other items that are important for you to remember, followed by the quiz answers. In today's exercises, you'll take the list of items you created yesterday and link them to other pages. Q&A Q My links aren't being highlighted in blue or purple at all. They're still just plain text. A Is the filename in a name attribute rather than in an href? Did you remember to close the quotation marks around the filename to which you're linking? Both of these errors can prevent links from showing up as links. Q I put a URL into a link, and it shows up as highlighted in my browser, but when I click it, the browser says "unable to access page." If it can't find the page, why did it highlight the text? A The browser highlights text within a link tag whether or not the link is valid. In fact, you don't even need to be online for links to show up as highlighted links, although you can't get to them. The only way you can tell whether a link is valid is to select it and try to view the page to which the link points. As to why the browser couldn't find the page you linked tomake sure that you're connected to the network and that you entered the URL into the link correctly. Also verify that you have both opening and closing quotation marks around the filename, and that those quotation marks are straight quotes. If your browser prints link destinations in the status bar when you move the mouse cursor over a link, watch that status bar and see whether the URL that appears is actually the URL you want. Finally, try opening the URL directly in your browser and see whether that solution works. If directly opening the link doesn't work either, there might be several reasons why. The following are two common possibilities: ● The server is overloaded or is not on the Internet. Machines go down, as do network connections. If a particular URL doesn't work for you, perhaps something is wrong with the machine or the network. Or maybe the site is popular, and too many people are trying to access it at once. Try again later. If you know the people who run the server, you can try sending them electronic mail or calling them. ● The URL itself is bad. Sometimes URLs become invalid. Because a URL is a form of absolute pathname, if the file to which it refers moves around, or if a machine or file:///G|/1/0672328860/ch05lev1sec8.html (1 von 4) [19.12.2006 13:48:42] Workshop directory name gets changed, the URL won't be valid anymore. Try contacting the person or site you got the URL from in the first place. See whether that person has a more recent link. Q Can I put any URL in a link? A You bet. If you can get to a URL using your browser, you can put that URL in a link. Note, however, that some browsers support URLs that others don't. For example, Lynx is really good with mailto URLs (URLs that enable you to send electronic mail to a person's email address). When you select a mailto URL in Lynx, it prompts you for a subject and the body of the message. When you're done, it sends the mail. Q Can I use images as links? A Yup, in more ways than one, actually. You'll learn how to use images as links and define multiple links within one image using image maps in Lesson 7, "Adding Images, Color, and Backgrounds." Q My links aren't pointing to my anchors. When I follow a link, I'm always dropped at the top of the page rather than at the anchor. What's going on here? A Are you specifying the anchor name in the link after the hash sign the same way that it appears in the anchor itself, with all the uppercase and lowercase letters identical? Anchors are case sensitive, so if your browser can't find an anchor name with an exact match, the browser might try to select something else in the page that's closer. This is dependent on browser behavior, of course, but if your links and anchors aren't working, the problem usually is that your anchor names and your anchors don't match. Also, remember that anchor names don't contain hash signsonly the links to them do. Q Is there any way to indicate a subject in a mailto URL? A If you include ?subject=Your%20subject in the mailto URL, it will work with most email clients. Here's what the whole link looks like: <a href="mailto:someone@example.com?subject=Your%20subject">Send email</a> Quiz file:///G|/1/0672328860/ch05lev1sec8.html (2 von 4) [19.12.2006 13:48:42] Workshop 1. What two things do you need to create a link in HTML? 2. What's a relative pathname? Why is it advantageous to use them? 3. What's an absolute pathname? 4. What's an anchor, and what is it used for? 5. Besides HTTP (web page) URLs, what other kinds are there? Quiz Answers 1. To create a link in HTML, you need the name or URL of the file or page to which you want to link, and the text that your readers can select to follow the link. 2. A relative pathname points to a file, based on the location that's relative to the current file. Relative pathnames are portable, meaning that if you move your files elsewhere on a disk or rename a directory, the links require little or no modification. 3. An absolute pathname points to a page by starting at the top level of a directory hierarchy and working downward through all intervening directories to reach the file. 4. An anchor marks a place that you can link to inside a web document. A link on the same page or on another page can then jump to that specific location instead of the top of the page. 5. Other types of URLs are FTP URLs (which point to files on FTP servers); file URLs (which point to a file contained on a local disk); mailto URLs (which are used to send electronic mail); and Usenet URLs (which point to newsgroups or specific news articles in a newsgroup). Exercises file:///G|/1/0672328860/ch05lev1sec8.html (3 von 4) [19.12.2006 13:48:42] Workshop 1. Remember the list of topics that you created yesterday in the first exercise? Create a link to the page you created in yesterday's second exercise (the page that described one of the topics in more detail). 2. Now, open the page that you created in yesterday's second exercise, and create a link back to the first page. Also, find some pages on the World Wide Web that discuss the same topic and create links to those pages as well. Good luck! file:///G|/1/0672328860/ch05lev1sec8.html (4 von 4) [19.12.2006 13:48:42] Lesson 6. Formatting Text with HTML and CSS Lesson 6. Formatting Text with HTML and CSS In Lessons 4, "Learning the Basics of HTML," and 5, "Adding Links to Your Web Pages," you learned the basics of HTML, including tags used to describe page structure and create links. With that background, you're now ready to learn more about what HTML and CSS can do in terms of text formatting and layout. In this Lesson Today you'll learn about most of the remaining tags in HTML that you'll need to know to construct pages, including tags in HTML 2.0 through HTML 4.01, as well as HTML attributes in individual browsers. Today you'll learn how to do the following: ● Specify the appearance of individual characters (bold, italic, underlined) ● Include special characters (characters with accents, copyright marks, and so on) ● Create preformatted text (text with spaces and tabs retained) ● Align text left, right, and centered ● Change the font and font size ● Create other miscellaneous HTML text elements, including line breaks, rule lines, addresses, and quotations In addition, you'll learn the differences between standard HTML and HTML extensions, and when to choose which tags to use in your pages. You'll also learn which of these tags have been deprecated in XHTML, and how to use CSS to achieve the same effects. Finally, you'll create a complete web page that uses many of the tags presented today, as well as the information from the preceding four days. Today you'll cover several tags and options, so you might find it a bit overwhelming. Don't worry about remembering everything now; just get a grasp of what sort of formatting you can do in HTML, and then you can look up the specific tags later. file:///G|/1/0672328860/ch06.html [19.12.2006 13:48:42] Character-Level Elements Character-Level Elements When you use HTML tags for paragraphs, headings, or lists, those tags affect that block of text as a wholechanging the font, changing the spacing above and below the line, or adding characters (in the case of bulleted lists). They're referred to as block-level elements. Character-level elements are tags that affect words or characters within other HTML entities and change the appearance of that text so that it's somehow different from the surrounding textmaking it bold or underlined, for example. To change the appearance of a set of characters within text, you can use one of two kinds of tags: logical styles or physical styles. Logical Styles Logical style tags describe the meaning of the text within the tag, not how it should be presented. They're similar to the common element tags for paragraphs or headings. For example, logical style tags might indicate a definition, a snippet of code, or an emphasized word. This can be a bit confusing because there are de facto standards that correlate each of these tags with a certain visual style. In other words, even though a tag like <strong> would mean different things to different people, in web browsers it means boldface. Using logical style tags, the browser determines the actual presentation of the text, whether it's bold, italic, or any other change in appearance. You cannot guarantee that text that's highlighted using these tags will always be bold or italic, so you shouldn't depend on it. These days, browser makers have pretty much agreed on how each of these logical tags are rendered, but it's still important to understand that the logical tags convey more meaning than just the physical styles that they apply. Each character style tag has both opening and closing sides and affects the text within those two tags. The following are the eight logical style tags: <em> This tag indicates that the characters are to be emphasized in some way; that is, they're formatted differently from the rest of the text. In graphical browsers, typically <em> italicizes the text. For example: <p>The anteater is the <em>strangest</em> looking animal, isn't it?</p> <strong> With this tag, the characters are to be more strongly emphasized than with <em>usually in boldface. Consider the following: <p>Take a <strong>left turn</strong> at <strong>Dee's Hop Stop</strong></p> file:///G|/1/0672328860/ch06lev1sec1.html (1 von 6) [19.12.2006 13:48:43] Character-Level Elements <code> This tag indicates that the text inside is a code sample and displays it in a fixed-width font such as Courier. For example: <p><code>#include "trans.h"</code></p> <samp> This tag indicates sample text and is generally presented in a fixed-width font, like <code>. An example of its usage follows: <p>The URL for that page is <samp>http://www.cern.ch/ </samp></p> <kbd> This tag indicates text that's intended to be typed by a user. It's also presented in a fixed-width font. Consider the following: <p>Type the following command: <kbd>find . -name "prune" -print</kbd></p> <var> This tag indicates the name of a variable, or some entity to be replaced with an actual value. Often it's displayed as italic or underline, and is used as follows: <p><code>chown</code> <var>your_name for the_file </var></p> <dfn> This tag indicates a definition. <dfn> is used to highlight a word (usually in italics) that will be defined or has just been defined, as in the following example: <p>Styles that are named after how they are actually used are called <dfn>logical styles</dfn></p> <cite> This tag indicates a short quote or citation, as in the following: <p>Eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p> file:///G|/1/0672328860/ch06lev1sec1.html (2 von 6) [19.12.2006 13:48:43] Character-Level Elements Note Of the tags in this list, all except <dfn> are part of the official HTML 2.0 recommendation. <dfn> was added in the HTML 3.2 recommendation. They're all still valid in the XHTML 1.0 recommendation. HTML 4.01 introduced two additional logical style tags that are most useful for audio browsers. A graphical browser, such as Netscape or Internet Explorer, won't display them any differently. When an audio browser reads content included within one of these tags, however, each letter is spoken individually. For example, fox is pronounced F-O-X rather than fox. These tags also use opening and closing sides and affect the text within. The following are new tags: <abbr> This tag indicates the abbreviation of a word, as in the following: <p>Use the standard two-letter state abbreviation (such as <abbr>CA</abbr> for California)</p> <acronym> Similar to the <abbr> tag, <acronym> designates a word formed by combining the initial letters of several words, as in the following example: [View full width] <p>Jonathan learned his great problem-handling skills from <acronym>STEPS</acronym> (Simply Tackle Each Problem Seriously)</p> Got all these tags memorized now? Good! There will be a pop quiz at the end of the day. The following code snippets demonstrate each of the logical style tags, and Figure 6.1 illustrates how all the tags are displayed. Input <p>The anteater is the <em>strangest</em> looking animal, isn't it?</p> <p>Take a <strong>left turn</strong> at <strong>Dee's Hop Stop </strong></p> <p><code>#include "trans.h"</code></p> <p>The URL for that page is <samp>http://www.cern.ch/</samp></p> <p>Type the following command: <kbd>find . -name "prune" -print</kbd></p> <p><code>chown </code><var>your_name the_file</var></p> <p>Styles that are named after how they are used are called <dfn>logical styles</dfn></p> <p>Eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p> <p>Use the standard two-letter state abbreviation (such as <abbr>CA</abbr> for California)</p> file:///G|/1/0672328860/ch06lev1sec1.html (3 von 6) [19.12.2006 13:48:43] Character-Level Elements <p>Jonathan learned his great problem-handling skills from <acronym>STEPS</acronym> (Simply Tackle Each Problem Seriously) Output Figure 6.1. Various logical styles displayed in a browser. [View full size image] Physical Styles In addition to these style tags, you can use a set of physical style tags to change the actual presentation style of the textbold, italic, or monospace. Like the character style tags, each formatting tag has a beginning and ending tag. Standard HTML 2.0 defined three physical style tags: <b> Bold <i> Italic <tt> Monospaced typewriter font file:///G|/1/0672328860/ch06lev1sec1.html (4 von 6) [19.12.2006 13:48:43] . and create links. With that background, you're now ready to learn more about what HTML and CSS can do in terms of text formatting and layout. In this Lesson Today you'll learn about. the page rather than at the anchor. What's going on here? A Are you specifying the anchor name in the link after the hash sign the same way that it appears in the anchor itself, with all. remaining tags in HTML that you'll need to know to construct pages, including tags in HTML 2.0 through HTML 4.01, as well as HTML attributes in individual browsers. Today you'll learn