Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
1,11 MB
Nội dung
The title Attribute
As mentioned at the start of the chapter, a title attribute is vital for any links that are images, and can also
help provide additional information to visitors in the form of a visual text tooltip in most browsers or an
auditory clue in voice browsers for the visually impaired. Figure 2-2 near the beginning of this chapter
showed you what the
title attribute looks like in Firefox when a user hovers over the link.
The type Attribute
The type attribute specifies the MIME type of the link. Appendix H includes a list of MIME types. An
HTML page would have the MIME type
text/html, whereas a JPEG image would have the MIME type
img/jpeg. The following is an example of the type attribute being used to indicate that the document
the link points to is an HTML document:
<a href=”index.html” type=”text/html”>Index</a>
Theoretically, the browser could use the information in the type attribute to either display it differently
or indicate to the user what the format of the destination is, although none do use it at present.
Try It Out Creating Links Within Pages
Now it’s your turn to try making a long page with links between different parts of the page. In this
example, you are going to create a page that is a restaurant menu. So open your text editor or authoring
tool and follow these steps:
1. Start with the XML declaration, DOCTYPE declaration, and the elements for the skeleton of the
document:
<html>, <head>, <title>, and <body>. Remember to give the document a title and
add in the namespace identifier on the root
<html> element:
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
<head>
<title>A menu example</title>
</head>
<body>
</body>
</html>
2. Inside the <body> element, add the headings for the page. Each of these should have a destina-
tion anchor so that you can link directly to that part of the page. The main heading will be used
for “Back to top” links, whereas each course of the menu will have an
id attribute that describes
its sections:
<body>
<h1><a id=”top”>Wrox Cafe Menu</a></h1>
<h2><a id=”starters”>Starters</a></h2>
<h2><a id=”mains”>Main Courses</a></h2>
<h2><a id=”desserts”>Desserts</a></h2>
</body>
71
Chapter 2: Links and Navigation
59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 71
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
3. Between the title and the starters, not only will there be an introductory paragraph, but also a
menu linking to each of the courses. In order to be Strict XHTML, the links at the top will go in
a block-level
<div> element:
<h1><a id=”top”>Wrox Cafe Menu</a></h1>
<div id=”nav”><a href=”#starters”>Starters</a> | <a href=”#mains”>Main
Courses</a> | <a href=”#desserts”>Desserts</a></div>
<p>Welcome to the Wrox Cafe, where we pride ourselves on good, honest home
cooked food at good, honest prices.</p>
<h2><a id=”starters”>Starters</a></h2>
4. At the bottom of the page, you will have a description of vegetarian dishes. Links next to vege-
tarian items will point to this description, so it needs to have a destination anchor.
<p><a id=”vege”>Items marked with a (v) are suitable for vegetarians.</a></p>
5.
Finally, you can just add in the items on the menu in a bulleted list. Note how the vegetarian
items have a link down to the description of vegetarian dishes. Don’t forget to add the “Back to
top” links.
<h2><a id=”starters”>Starters</a></h2>
<ul>
<li>Chestnut and Mushroom Goujons (<a href=”#vege”>v</a>)</li>
<li>Goat Cheese Salad (<a href=”#vege”>v</a>)</li>
<li>Honey Soy Chicken Kebabs</li>
<li>Seafood Salad</li>
</ul>
<p><small><a href=”#top”>Back to top</a></small></p>
<h2><a id=”mains”>Main courses</a></h2>
<ul>
<li>Spinach and Ricotta Roulade (<a href=”#vege”>v</a>)</li>
<li>Beef Tournados with Mustard and Dill Sauce</li>
<li>Roast Chicken Salad</li>
<li>Icelandic Cod with Parsley Sauce</li>
<li>Mushroom Wellington (<a href=”#vege”>v</a>)</li>
</ul>
<p><small><a href=”#top”>Back to top</a></small></p>
<h2><a id=”desserts”>Desserts</a></h2>
<ul>
<li>Lemon Sorbet (<a href=”#vege”>v</a>)</li>
<li>Chocolate Mud Pie (<a href=”#vege”>v</a>)</li>
<li>Pecan Pie (<a href=”#vege”>v</a>)</li>
<li>Selection of Fine Cheeses from Around the World</li>
</ul>
<p><small><a href=”#top”>Back to top</a></small></p>
6. Save your example as menu.html and take a look at it in your browser. You should end up with
something that looks like Figure 2-8.
72
Chapter 2: Links and Navigation
59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 72
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 2-8
How It Works
You have already seen the skeleton parts for the page (along with the declarations that come before it),
so let’s focus on the links.
There are three source anchors just under the first heading that form a simple navigation bar. When clicked,
these will take users to the appropriate section of the page. These items are kept inside a <div> element
because
<a> elements should appear inside a block-level element in Strict XHTML 1.0 — although any
earlier versions would allow you to leave this off.
<div id=”nav”><a href=”#starters”>Starters</a> | <a href=”#mains”>Main courses
</a> | <a href=”#esserts”>Desserts</a></div>
The id attribute on the <div> element is there just to identify the purpose of this block-level grouping
element. Because this element does not have a specific purpose like some of the other elements (such as
<p> or <h2>), it helps to add this attribute as a reminder of what it is grouping.
Three additional source anchors are underneath each section of the menu to take you back to the top of
the page.
<p><small><a href=”#top”>Back to top</a></small></p>
Finally, source anchors with the text v indicate items are vegetarian, and to take you to a key at the bot-
tom of the page that explains what the
v stands for.
<li>Mushroom wellington (<a href=”#vege”>v</a>)</li>
73
Chapter 2: Links and Navigation
59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 73
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The destination anchors are using the id attribute to indicate the potential targets of links. Each of the
headings contains a destination anchor. The main menu heading requires an anchor so that the “Back to
top” links will take the user to the top of the page, while the subheadings have anchors so that the navi-
gation menu at the top can take them to that part of the page.
Remember that destination anchors must have some content — they cannot be empty or the browser
might not recognize them, which is why they have been put inside the heading elements surrounding
the actual heading name:
<h1><a id=”top”>Wrox Cafe Menu</a></h1>
<h2><a id=”starters”>Starters</a></h2>
<h2><a id=”mains”>Main courses</a></h2>
<h2><a id=”desserts”>Desserts</a></h2>
Similarly, the paragraph at the bottom that indicates what the (v) sign means contains a destination
anchor, just like the heading.
<p><a id=”vege”>Items marked with a (v) are suitable for vegetarians.</a></p>
Advanced E-mail Links
As you saw at the beginning of the chapter, you can make a link open up the user’s default e-mail editor,
and address an e-mail to you — or any other e-mail address you give — automatically. This is done like so:
<a href=”mailto:info@example.org”>info@example.org</a>
You can also specify some other parts of the message, too, such as the subject, body, and people that it
should be cc’d or bcc’d to.
To add a subject to an e-mail, you follow the e-mail address with a question mark to separate the extra
values from the e-mail address. Then you use the name/value pairs to specify the additional properties
of the mail you want to control. The name and the value are separated by an equal sign.
For example, to set the subject to be Enquiry, you would add the
subject property name and what you
wanted to be the subject, like so:
<a href=”mailto:info@example.org?subject=Enquiry”>
You can specify more than one property by separating the name/value pairs with an ampersand. Here
you can see that the subject and a cc address have been added in:
<a href=”mailto:info@example.org?subject=XHTML&cc=sales@example.org”></a>
The table that follows includes a full list of properties you can add.
74
Chapter 2: Links and Navigation
59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 74
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
If you want to add a space between any of the words in the subject line, you should add %20 between the
words instead of the space. If you want to take the body part of the message onto a new line you should
add
%0D%0A (where 0 is a zero, not a capital O).
It is common practice to add only the e-mail address in e-mail links. If you want to add subject lines or
message bodies you are better off creating an e-mail form, like the one you will see in Chapter 5.
Summary
In this chapter you learned about links — the part of XHTML that puts the “hyper” in hypertext. Links
enable visitors to your site to jump between pages and even between parts of pages (so that they don’t
have to scroll to find the place they need).
You have seen that you can use the
<a> element to create source anchors, which are what most people
think of when you mention links on the Web. The content of the source anchor is what users can click —
and this should usually be an informative, concise description of what the target is (rather than text such
as “click here”), or it can be an image (as you will see in Chapter 3).
You can also use the
<a> element to create destination anchors. Destination anchors are a little like index
points or special markers because they allow you to create links that take you directly to that part of the
page. Destination anchors should always have some content, and the old
name attribute that HTML
introduced for destination anchors has been replaced in Strict XHTML by the
id attribute (although this
works only in version 3+ browsers).
Along the way, you learned more about URLs, in particular the difference between an absolute URL, like those
that appear in the address bar of your browser, and relative URLs, which describe where a resource is in rela-
tion to the document containing it. Learning the different ways in which relative URLs can be used will also be
helpful as you head to the next chapter and learn about adding images and other objects into your documents.
Property Purpose
subject
Adds a subject line to the e-mail; you can add this to encourage the user to use a
subject line that makes it easier to recognize where the mail has come from.
body
Adds a message into the body of the e-mail, although you should be aware that
users would be able to alter this message.
cc
Sends a carbon copy of the mail to the cc‘d address; the value must be a valid e-mail
address. If you want to provide multiple addresses you simply repeat the property,
separating it from the previous one with an ampersand.
bcc
Secretly sends a carbon copy of the mail to the bcc‘d address without any recipient
seeing any other recipients; the value must be a valid e-mail address. If you want to
provide multiple addresses, you simply repeat the property, separating it from the
previous one with an ampersand.
75
Chapter 2: Links and Navigation
59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 75
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Exercises
You can find the answers to all of the exercises in Appendix A.
1. Look back at the Try It Out example where you created a menu, and create a new page that has
links, like those at the top of the menu page, to each of the courses in the menu example. Then
add a link to the main Wrox Press web site (
www.wrox.com). The page should look something
like Figure 2-9.
Figure 2-9
2. Take the following sentence and place <a> elements around the parts that should have the link.
<p>To find out why advertising on our site works, visit the testimonials
page.</p>
3. What is wrong with the positioning of the <a> element here?
<p>You can read the full article <a>here</a>.</p>
76
Chapter 2: Links and Navigation
59313c02.qxd:WroxPro 3/24/08 11:31 PM Page 76
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
3
Images and Objects
In this chapter, you begin learning some aspects of web design that will really breathe life into your
web pages. You start by learning how to add images into your documents using the
<img> element.
You will see the difference between some of the main formats used for images on the Weband learn
how to prepare your images for use on the Web. You will also learn how to make an image a link,
and even how to divide an image up into sections so that different parts of the image link to differ-
ent pages — this is known as an image map.
Then you will go on to meet the
<object> element that you can use to insert all manner of objects
into pages, from MP3s and Flash movies to Active X controls and even images.
Adding Images to Your Site
Images and graphics can really bring your site to life. In this section you will not only learn how to
insert images and graphics into your pages, but also the different image formats you can use on the
Web (such as GIFs, JPEGs, and PNGs). You will also learn when you should choose which format.
You will see how careful you have to be when using images on the Web because if you don’t prepare
images correctly, they can really slow down the speed it takes for a page to load — and slow sites
frustrate users. Furthermore, because you will probably be writing your first sites on your desktop/
laptop computer, you might not realize how long a page will take to load until it is actually on the
Web. So choosing the right format for your images and saving them correctly will help make your
site faster and result in happier visitors.
For practice purposes, you can download images from other sites by right-clicking the image (or
Ctrl-clicking) and selecting either the
download image to disk or save image as options.
Remember, however, that images are subject to copyright, and you could land yourself in legal
trouble if you use other people’s images on your site.
Once you’ve learned how to insert the right kind of images into your pages, you will then see how
to turn them into links and even how to write code that divides them up, so that when users click
different parts of the image they get taken to different web pages.
59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 77
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Types of Image Formats
To start off, it would help to look at how computers store and render pictures. Graphics are created for
computers in two main ways:
❑ Bitmapped graphics
divide a picture into a grid of pixels and specify the color of each pixel, much
as a computer tells a screen the color of each pixel. Broadly speaking, bitmaps are ideal for photo-
graphs and complicated gradations of shade and color. There are several different Bitmap formats;
common ones include JPEG, GIF, TIFF, PNG, and the rather confusingly named bitmap or BMP.
You will be learning more about JPEGs, GIFs, and PNGs later in the chapter.
❑ Vector graphics break the image into lines and shapes (like a wireframe drawing), and store the
lines as coordinates. They then fill the spaces between the lines with color. Vector graphics are
commonly used for line art, illustration, and animation. They often feature large areas of flat
color (as opposed to textures, shades of colors, and photographic styles).
In the early days, bitmaps were the main image format for the Web, although more recently some formats
such as Flash and SVG are making use of vector graphics.
Bitmap Images
Most static images on the Web are bitmapped images. As mentioned, the image is divided into a grid of
pixels. If you look very closely at your computer screen you may be able to make out the pixels that make
up the screen. If you look at Figure 3-1, you can see an example of a bitmap image with one section that
has been modified so that you can see how pixels make up the image.
Figure 3-1
78
Chapter 3: Images and Objects
59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 78
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The number of pixels in every square inch of the screen is known as the resolution of the image. Images on
the Web can show a maximum of 72 pixels per inch; images used in print are usually higher resolution and
are often supplied to printers at 300 dots per inch (note how onscreen we refer to pixels per inch, while in
print we call them dots per inch). The more pixels or dots per inch an image contains, the larger the size
of the file will be. As a result, any images that you use on the Web, you save at a resolution of 72 dots
per
inch. If you saved it any larger, this would create unnecessarily large files that would take longer to
download.
Note that while you can easily save an image that is 300 dots per inch at 72 pixels per inch for the Web,
you cannot simply increase an image from 72 pixels per inch to 300 dots per inch because you do not
know what color the 228 pixels that are missing from every square inch should be. If you just try to
increase the resolution of the image, it will often look grainy. Therefore, if you have a high-resolution
300-dots-per-inch picture, it is often helpful to keep a copy of it at that size just in case you ever wish
to show it larger or at a higher resolution.
Browsers tend to support three common bitmap graphics formats, and most graphics programs will save
images in these formats:
❑ GIF: Graphics Interchange Format (pronounced either “gif” or “jif”)
❑ JPEG: Joint Photographic Experts Group Format (pronounced “jay peg”)
❑ PNG: Portable Network Graphics (pronounced “ping” or “pee en gee”)
Let’s take a quick look at each of these because understanding how the format works helps you choose
how to save an image.
GIF Images
In the early days of the Web, the GIF (or Graphics Interchange Format) was the standard for all web
graphics. GIF images are created using a palette of up to 256 colors and each pixel of the image is one of
these 256 colors. Every different GIF image can have a different palette of 256 colors selected from a range
of over 16 million colors. The program that saves the image also selects the palette that will best represent
the images.
The GIF file stores the palette of colors in what is called a lookup table, and each pixel references the color
information in the lookup table rather than each pixel having to specify its own color information. So, if
many pixels use the same colors, the image does not have to repeat the same color information and the
result is a smaller file size. This way of storing images is known as is an indexed color format. Figure 3-2
shows a GIF file being created in Adobe Photoshop. You can see the color palette that is being used for
this image represented in the set of squares halfway down the image on the right.
Because of the way GIF images save color information in a lookup table, they are particularly suited to
images where there are large flat areas of color. A flat area of color is a section that is just one shade; for
example, a rectangle that uses just one green is a flat color, whereas a picture of grass contains lots of dif-
ferent greens. The fewer colors the image uses, the smaller the GIF file is.
If a GIF contains less than 16 colors (in which case it can be referred to as a 4-bit GIF), the image will be
less than half the file size of a GIF using 256 colors (known as an 8-bit GIF). Therefore, if you are creating
an image that uses less than 16 colors, it is worth checking whether your program automatically saves your
image as a 4-bit GIF because this will result in a smaller file that’s quicker to download than an 8-bit GIF.
79
Chapter 3: Images and Objects
59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 79
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 3-2
If your text or lines are two colors (say black and white) and you have used anti-aliased edges to make
them look smoother, your image will contain more than two colors because the edges use a variety of
other colors to make them look smooth.
If the GIF needs to use more than 256 colors, then most graphics programs, when saving GIFs, will use a
technique called dithering to better represent the extra colors. Therefore, they use two or more colors in
adjacent pixels to create an effect of a third color. Dithering has the following two drawbacks:
❑ It can result in some banding in colors. This usually occurs when patches of the image look flat to
the eye in the original, but are actually very slightly different shades. For example, when there is
a smooth transition between one color and another color (referred to as a gradient), dithering uses
a lot of different colors to create the smooth effect. In this case, the changes between colors can
become more visible.
❑ If you place a flat color next to a dithered color you will be able to see where the change occurs
(because the dithered color is really made up of more than one color).
Figure 3-3 illustrates how even a simple gradient, when saved as a GIF, can result in banding because the
image contains more than 256 colors — if you look closely you can see that the gradient had vertical lines
rather than a smooth transition from black to white.
Because GIFs support only 256 colors and have to use dithering to achieve any further colors, they are not
really suitable for detailed photographs, which tend to contain more than 256 colors. If you have a photo-
graph, gradient, or any image with similar shades of the same color next to each other, you are often better
off using a JPEG, which can support unlimited colors, or sometimes a PNG — both of which you will
learn about shortly.
80
Chapter 3: Images and Objects
59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 80
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... JPEG for the Web On the left, you have the original image, and on the right is the version that it is saving for use on the Web 82 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 83 Chapter 3: Images and Objects Figure 3-5 Because the JPEG format was designed to work with photo-realistic images, they do not work so well with images... use on the web site If you reduce the size of the image using the height and width attributes, the user will still have to download the full-sized image, which takes longer than a special small version and uses up more bandwidth Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 89 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 90 Chapter 3: Images and Objects The hspace and vspace... The hspace and vspace attributes can be used to control the amount of whitespace around an image hspace=”10” vspace=”14” The value is the amount in pixels of whitespace that should be left around the image, and is similar to a white border Before CSS, the hspace and vspace attributes were particularly helpful because text can flow around an image and, unless there is a gap between the text and the image,... between the text and the image, the text becomes hard to read and doesn’t look as professional Figure 3-9 illustrates this idea (ch03_eg03.html) Figure 3-9 These attributes have been deprecated, and you can achieve the same result by using the border or margin properties in CSS The ismap and usemap Attributes The ismap and usemap attributes are used with image maps Image maps are covered in the “Image Maps”... 3/22/08 4:21 PM Page 92 Chapter 3: Images and Objects Try It Out Adding Images to a Document In this example, you’re going to add some images to a document; they will be some brightly colored images of food accompanied by a description of each So, open up your text editor or web page authoring tool and follow these steps: 1 Start with the XML and DOCTYPE declarations and add the skeleton of the XHTML document,... the most common way of embedding moving graphics and video into web pages, without asking the user first, is by using Flash (Flash was being used to serve most of the video and audio files on sites such as YouTube and MySpace) However, while Flash is often quoted as being installed on over 95 percent of computers worldwide, support for playing audio and video was only included in later versions of... URL for that file For example, here is a URL to an MP3: data=”http://www.example.com/mp3s/newsong.mp3” The value can be a relative URL, which would be relative to the value provided in the codebase attribute if specified; otherwise it would be relative to the page itself The height and width Attributes The height and width attributes specify the height and width of an object The values should be in pixels... of the images when the pages first load and then add a link to the larger version These smaller images are often referred to as thumbnails, and you will usually see them in image galleries or on pages that contain summaries of information (such as the home pages of news sites and pages that list several products, from which you link to a page with more detail and larger images) When creating the smaller... the coordinates are plotted against Browsers and XHTML do not, by default, support any vector graphics formats, although the main browsers now ship with the Flash Player that is required to view Flash files As a result, Flash is currently the most popular way of deploying vector graphics and animations on the Web While the Flash Player is free for download, and the browsers feature it, you should be... 59313c03.qxd:WroxPro 3/22/08 4:21 PM Page 86 Chapter 3: Images and Objects Microsoft has also come up with a technology called Silverlight that uses vector graphics and competes with Flash It has been gaining interest from developers, although the player required for Silverlight does not have widespread support at the time of this writing Flash, Silverlight, and SVG files tend to be included in pages using the . used for images on the Web and learn
how to prepare your images for use on the Web. You will also learn how to make an image a link,
and even how to divide. of objects
into pages, from MP3s and Flash movies to Active X controls and even images.
Adding Images to Your Site
Images and graphics can really bring