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

Another use of file URLs is to cre-ate a local startup page for your browser with links to sites you use frequently.. To create links to specific parts of a page, set an anchor at the po

you’re done Depending on how the user’s browser and email client are configured,

mailtolinks might not work at all for them

ThemailtoURL 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

Unlike the other URLs described here, the mailtoURL works strictly on the client side

Themailtolink 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 fileURLs 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 fileURL Another use of file URLs is to

cre-ate 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 fileURLs 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

126 LESSON 6: Adding Links to Your Web Pages

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.

NOTE

page was retrieved! If you use fileURLs as links in your page, and someone from

else-where 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,

becausefileURLs 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

unre-lated pages into an enormous, interreunre-lated 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 hrefattribute) and anchor names (the

nameattribute)

When linking pages that are all stored on the local disk, you can specify their pathnames

in the hrefattribute 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 hrefattribute

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 hrefattribute, you

use the nameattribute 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)

6

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 nameattribute 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

rea-sons why The following are two common possibilities:

n 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 simultaneously Try again later If you know the people who run the server, you can try sending them electronic mail or calling them

128 LESSON 6: Adding Links to Your Web Pages

n The URL itself is bad

Sometimes URLs become invalid Because a URL is a form of absolute

path-name, 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

per-son or site you got the URL from in the first place See whether that perper-son

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

exam-ple, 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 do

Q Is there any way to indicate a subject in a mailto URL?

A If you include ?subject=Your%20subjectin 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>

6

Quiz

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

cur-rent file Relative pathnames are portable, meaning that if you move your files

else-where 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); and mailtoURLs (which

are used to send electronic mail)

Exercises

1 Remember the list of topics that you created in Lesson 5 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)

2 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!

130 LESSON 6: Adding Links to Your Web Pages

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 do 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 do 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

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

surround-ing text—maksurround-ing 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 <strong>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:

<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>

132 LESSON 7: Formatting Text with HTML and CSS

<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 under-line, 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>

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:

<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>

7

<acronym> Similar to the <abbr> tag, <acronym> designates a word formed by

combining the initial letters of several words, as in the following example:

<p>Jonathan learned his great problem-handling skills

from <acronym>STEPS</acronym> (Simply Tackle Each Problem

Seriously)</p>

Only the <abbr>tag made it into HTML5; <acronym>has been removed due to

redun-dancy You may still see it used but you should use the <abbr>tag instead The following

code snippets demonstrate each of the logical style tags, and Figure 7.1 illustrates how

all the tags display

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>

<p>Jonathan learned his great problem-handling skills from

<acronym>STEPS</acronym> (Simply Tackle Each Problem Seriously)</p>

134 LESSON 7: Formatting Text with HTML and CSS

ptg 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

<tt> Monospaced typewriter font (removed from HTML5)

<s> Strikethrough (removed from HTML5)

<big> Bigger print than the surrounding text (removed from HTML5)

<small> Smaller print

7

Output

FIGURE 7.1

Various logical

styles displayed in

a browser.

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.

NOTE