Tự học HTML và CSS trong 1 giờ part 16

126 LESSON 6: Adding Links to Your Web Pages you’re done Depending on how the user’s browser and email client are configured, mailto links might not work at all for them The mailto URL is different from the standard URL form It looks like the following: mailto:internet_e-mail_address Here’s an example: mailto:lemay@lne.com NOTE If your email address includes a percent sign (%), you’ll have to use the escape character %25 instead Percent signs are special characters to URLs Unlike the other URLs described here, the mailto URL works strictly on the client side The mailto link just tells the browser to compose an email message to the specified address It’s up to the browser to figure out how that should happen Most browsers will also let you add a default subject to the email by including it in the URL like this: mailto:lemay@lne.com?subject=Hi there! When the user clicks the link, most browsers will automatically stick Hi there! in the subject of the message Some even support putting body text for the email message in the link, like this: mailto:lemay@lne.com?subject=Hi there!&body=Body text File File URLs are intended to reference files contained on the local disk In other words, they refer to files located on the same system as the browser For local files, URLs have an empty hostname (three slashes rather than two): file:///dir1/dir2/file You’ll use file URLs a lot when you’re testing pages you’ve created locally, although it’s easier to use the browser’s “Open File” functionality or drag and drop to open local files in your browser than it is to type in a file URL Another use of file URLs is to create a local startup page for your browser with links to sites you use frequently In this instance, because you’ll be referring to a local file, using a file URL makes sense The problem with file URLs is that they reference local files, where local means on the same system as the browser pointing to the file—not the same system from which the Download from www.wowebook.com Summary 127 page was retrieved! If you use file URLs as links in your page, and someone from elsewhere on the Internet encounters your page and tries to follow those links, that person’s browser will attempt to find the file on her local disk (and generally will fail) Also, because file URLs use the absolute pathname to the file, if you use file URLs in your page, you can’t move that page elsewhere on the system or to any other system If your intention is to refer to files that are on the same file system or directory as the current page, use relative pathnames rather than file URLs With relative pathnames for local files and other URLs for remote files, you shouldn’t need to use a file URL at all Summary In this lesson, 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 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 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), or electronic mail addresses (mailto) Download from www.wowebook.com 128 LESSON 6: Adding Links to Your Web Pages Workshop Congratulations, you learned a lot in this lesson! 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 the following exercises, you take the list of items you created in Lesson 5, “Organizing Information with Lists,” 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 to—make 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: n The server is overloaded or is not on the Internet Machines go down, as 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 simultaneously Try again later If you know the people who run the server, you can try sending them electronic mail or calling them Download from www.wowebook.com Workshop n 129 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 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 Be sure to read the error message provided by the browser carefully Often it will describe the reason why the link can’t be opened, indicating whether it is a network problem or a problem with the URL 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 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 learn how to use images as links and define multiple links within one image using image maps in Lesson 9, “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 signs—only the links to them 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: Send email Download from www.wowebook.com 130 LESSON 6: Adding Links to Your Web Pages Quiz What two things you need to create a link in HTML? What’s a relative pathname? Why is it advantageous to use them? What’s an absolute pathname? What’s an anchor, and what is it used for? Besides HTTP (web page) URLs, what other kinds are there? Quiz Answers 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 A relative pathname points to a file, based on the location that’s relative to the cur- rent 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 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 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 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); and mailto URLs (which are used to send electronic mail) Exercises Remember the list of topics that you created in Lesson in the first exercise? Create a link to the page you created in Lesson 5’s second exercise (the page that described one of the topics in more detail) Now, open the page that you created in Lesson 5’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, too Good luck! Download from www.wowebook.com LESSON Formatting Text with HTML and CSS Over the previous three lessons, you learned the basics of HTML, including tags used to create page structure and add links With that background, you’re now ready to learn more about what HTML and CSS can in terms of text formatting and layout In this lesson, you learn about most of the remaining tags in HTML that you need to know to construct pages, including how to use HTML and CSS to the following: n Specify the appearance of individual characters (bold, italic, underlined) n Include special characters (characters with accents, copyright marks, and so on) n Create preformatted text (text with spaces and tabs retained) n Align text left, right, and centered n Change the font and font size n Create other miscellaneous HTML text elements, including line breaks, rule lines, addresses, and quotations Download from www.wowebook.com 132 LESSON : Formatting Text with HTML and CSS Character-Level Elements When you use HTML tags to create paragraphs, headings, or lists, those tags affect that block of text as a whole—changing 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 tags and change the appearance of that text so that it’s somehow different from the surrounding text—making 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 look in the browser 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 would mean different things to different people, in most 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: 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 italicizes the text For example: The anteater is the strangest looking animal, isn’t it? With this tag, the characters are to be more strongly emphasized than with —usually in boldface Consider the following: Take a left turn at Dee’s Hop Stop Download from www.wowebook.com Character-Level Elements 133 This tag indicates that the text inside is a code sample and displays it in a fixed-width font such as Courier For example: #include “trans.h” This tag indicates sample text and is generally presented in a fixedwidth font, like An example of its usage follows: The URL for that page is http://www.cern.ch/ 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: Type the following command: find -name “prune” -print 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: chown your_name for the_file This tag indicates a definition is used to highlight a word (usually in italics) that will be defined or has just been defined, as in the following example: Styles that are named after how they are actually used are called logical styles This tag indicates a short quote or citation, as in the following: Eggplant has been known to cause nausea in some people (Lemay, 1994) HTML 4.01 introduced two additional logical style tags that are most useful for audio browsers A graphical browser, such as Firefox 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: This tag indicates the abbreviation of a word, as in the following: Use the standard two-letter state abbreviation (such as CA for California) Download from www.wowebook.com 134 LESSON : Formatting Text with HTML and CSS Similar to the tag, designates a word formed by combining the initial letters of several words, as in the following example: Jonathan learned his great problem-handling skills from STEPS (Simply Tackle Each Problem Seriously) Only the tag made it into HTML5; has been removed due to redundancy You may still see it used but you should use the tag instead The following code snippets demonstrate each of the logical style tags, and Figure 7.1 illustrates how all the tags display Input ▼ The anteater is the strangest looking animal, isn’t it? Take a left turn at Dee’s Hop Stop #include “trans.h” The URL for that page is http://www.cern.ch/ Type the following command: find -name “prune” -print chown your_name the_file Styles that are named after how they are used are called logical styles Eggplant has been known to cause nausea in some people (Lemay, 1994) Use the standard two-letter state abbreviation (such as CA for California) Jonathan learned his great problem-handling skills from STEPS (Simply Tackle Each Problem Seriously) Download from www.wowebook.com Character-Level Elements 135 Output FIGURE 7.1 Various logical styles displayed in a browser Physical Styles Over time, a number of physical style tags were added to HTML as well, but most of them have been removed from HTML5 You may see them used but avoid using them and use CSS instead NOTE Bold Italic Monospaced typewriter font (removed from HTML5) Underline (removed from HTML5) Strikethrough (removed from HTML5) Bigger print than the surrounding text (removed from HTML5) Smaller print Subscript Superscript Text-based browsers, such as Lynx and those associated with some mobile devices, can’t render bold, italic, or other styled text They generally highlight the text in some way, but the method varies depending on the browser and platform Download from www.wowebook.com ... miscellaneous HTML text elements, including line breaks, rule lines, addresses, and quotations Download from www.wowebook.com 13 2 LESSON : Formatting Text with HTML and CSS Character-Level Elements... it?

With this tag, the characters are to be more strongly emphasized than with —usually in boldface Consider the following:

Take a left turn at Dee’s... Figure 7 .1 illustrates how all the tags display Input ▼

The anteater is the strangest looking animal, isn’t it?

Take a left turn at Dee’s Hop Stop