Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P16 pptx

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:?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> /></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> /><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]