If each document on the Web is a single page, the only way to produce a page break is to split your HTML document into separate files and link them.. Adding Images, Color, and Background
Trang 1Summary
Tags, tags, and more tags! Today you learned about most of the remaining tags in the HTML language for presenting text, and quite a few of the tags for additional text formatting and presentation You also put together a real-life HTML home page You could stop now and create quite presentable web pages, but more cool stuff is to come So, don't put down the book yet
Table 6.2 presents a quick summary of all the tags and attributes you've learned about today that are included in the HTML 4.01 specification Table 6.3 summarizes the CSS properties that have been
described in today's discussion
Table 6.2 HTML Tags from Lesson 6
the bottom of each document and contains contact or copyright information
retained Text is printed in a monospaced font
Trang 2Courier)
text
There's no closing tag in HTML for <hr>; for XHTML, add a space and forward slash ( /) at the end of the tag and its attributes (for example, <hr size="2" width="75%" />)
size The thickness of the rule, in pixels (Deprecated in
HTML 4.01.)
percentage of page width (for example, 50%)
(Deprecated in HTML 4.01.)
4.01.)
(Deprecated in HTML 4.01.)
line, but doesn't create a new paragraph or list item There's no closing tag in HTML for <br>; for XHTML, add a space and forward slash ( /) at the end of the tag and its attributes (for example, <br clear="left" /
>)
supported by Netscape and Internet Explorer)
(nonstandard; supported by Netscape and Internet Explorer) Adds a space and forward slash at the end
of the tag for XHTML 1.0
heading (Deprecated in HTML 4.01.)
heading (Deprecated in HTML 4.01.)
(Deprecated in HTML 4.01.)
Trang 3and closing tags (Deprecated in HTML 4.01.)
closing tags (Deprecated in HTML 4.01.)
closing tags (Deprecated in HTML 4.01.)
(default is 3) or as a relative number using +N or -N Relative font sizes are based on the value of
face The name of the font to change to, as a list of fonts to
choose from (Deprecated in HTML 4.01.)
changes are based (Deprecated in HTML 4.01.) There
is no closing tag in HTML for <basefont>; for XHTML, add a space and forward slash ( /) at the end of the tag and its attributes (for example, <basefont size="-1" />)
Table 6.3 CSS Properties from Lesson 6
Property Use/Values
sans serif, and monospace, or specific font names You can specify more than one font or font family as well
Trang 4Workshop
Here you are at the close of another day (a long one!) and facing yet another workshop Today's lesson covered a lot of ground, so I'll try to keep the questions easy There are a couple of exercises that focus
on building some additional pages for your website Ready?
Q&A
Q If line breaks appear in HTML, can I also do page breaks?
A HTML doesn't have a page break tag Consider what the term page means in a web
document If each document on the Web is a single page, the only way to produce a page break is to split your HTML document into separate files and link them
Even within a single document, browsers have no concept of a page; each HTML document simply scrolls by continuously If you consider a single screen a page, you still can't have what results in a page break in HTML The screen size in each browser
is different It's based on not only the browser itself, but also the size of the monitor
on which it runs, the number of lines defined, the font currently being used, and other factors that you cannot control from HTML
When you're designing your web pages, don't get too hung up on the concept of a page the way it exists in paper documents Remember, HTML's strength is its flexibility for multiple kinds of systems and formats Instead, think in terms of creating small chunks of information and how they link together to form a complete
presentation
If page breaks are essential to your document, you might consider saving it in the PDF format and making it available for download
Q How can I include em dashes or curly quotes (typesetter's quotes) in my
HTML files?
A There are entities for all of these characters, but they may not be supported by all
browsers or on all platforms Most people still don't use them To add an em dash, use
right quote Similarly, you can create curly single quotes using ‘ and ’
Quiz
Trang 51. What are the differences between logical character styles and physical character
styles?
2. What are some things that the <pre> (preformatted text) tag can be used for?
3. What's the most common use of the <address> tag?
4. Older versions of HTML provided ways to align and center text on a web page What's the recommended way to accomplish these tasks in HTML 4.01?
5. Without looking at Table 6.2, list all eight logical style tags and what they're used for Explain why you should use the logical tags instead of the physical tags
Quiz Answers
1. Logical styles indicate how the highlighted text is used (citation, definition, code, and
so on) Physical styles indicate how the highlighted text is displayed (bold, italic, or monospaced, for example)
2. Preformatted text can be used for text-based tables, code examples, ASCII art, and any other web page content that requires extra spaces to align characters
These include the name of the author of the web page, contact information, dates, copyright notices, or warnings Address information usually appears at the bottom of a web page
4. Alignment and centering of text can be accomplished with style sheets, which is the recommended approach in HTML 4.01
5. The eight logical styles are <em> (for emphasized text), <strong> (for bold text), <code>
(for programming code), <samp> (similar to <code>), <kbd> (to indicate user keyboard input), <var> (for variable names), <dfn> (for definitions), and <cite> (for short quotes
or citations) Logical tags rely on the browser to format their appearance
Trang 6Exercises
1. Now that you've had a taste of building your first really thorough web page, take a
stab at your own home page What can you include that would entice people to dig deeper into your pages? Don't forget to include links to other pages on your site
2. Try out your home page in several browsers and even on multiple platforms if you
have access to them Web developers have to get used to the fact that their designs are at the mercy of their users, and it's best to see right away how different browsers and platforms treat pages
Trang 7Lesson 7 Adding Images, Color, and Backgrounds
Lesson 7 Adding Images, Color, and Backgrounds
If you've been struggling to keep up with all the HTML tags I've been flinging at you the last couple of days, this lesson will be easier
In this Lesson
In fact, in this lesson you won't be learning very many new HTML tags Instead, you'll learn about how
to add images to your pages and change the color of elements on a page In particular, you'll learn the following:
● The kinds of images you can use in web pages
● How to include images on your web page, either alone or alongside text
● How to use images as clickable links
● How to set up and assign links to regions of images using client-side imagemaps
● How to provide alternatives for browsers that can't view images
● How to change the font and background colors on your web page
● How to use images for tiled page backgrounds
● How and when to use images on your web pages
● A few tips on image etiquette
After this lesson, you'll know all you need to know about adding images to your web pages
Trang 8Images on the Web
Images on the Web
Images displayed on the Web should be converted to one of the formats supported by most browsers: GIF, JPEG, or PNG GIF and JPEG are the popular standards, and every graphical browser supports
them PNG is a newer image format that was created in response to some patent issues with the GIF format It's superior to GIF in almost every respect, but old browsers don't support it Many other image formats are supported by some browsers and not others You should avoid them
Let's assume that you already have an image you want to put on your web page How do you get it into GIF or JPEG format so it can be viewed on your page? Most image editing programs, such as Adobe
Photoshop (http://www.adobe.com/), Paint Shop Pro (http://www.jasc.com/), and CorelDRAW (http:// www.corel.com/), will convert images to most of the popular formats You might have to look under the option for Save As or Export to find the conversion option There are also freeware and shareware
programs for most platforms that do nothing but convert between image formats Many shareware and demo versions of image editing programs are available at http://www.download.com/ (search for
"image editors" using the software platform of your choice)
Tip
If you're a Windows user, you can download IrfanView, which allows you to view images,
and convert them to various formats, at http://www.infanview.com/ It also provides a
number of other image manipulation features that are useful for working with images for
the Web Best of all, it's free for non-commercial use
To save files in GIF format, look for an option called CompuServe GIF, GIF87, GIF89a, or just plain GIF Any of them will work If you're saving your files as JPEG, usually the option will simply be JPEG
Remember how your HTML files have to have an .html or .htm extension to work properly? Image files have extensions, too For GIF files, the extension is .gif For JPEG files, the extensions are .jpg and .
Note
Some image editors will try to save files with extensions in all caps (.GIF or .JPEG)
Although they're the correct extensions, image names are case sensitive, so .GIF isn't the
same extension as .gif The case of the extension might not be important when you're
testing on your local system, but it can be when you move your files to the server So, use
lowercase if you can
Trang 9Image Formats
Image Formats
As I just mentioned, three image formats are supported by every major web browser: GIF, JPEG, and PNG JPEG and GIF are the old standbys, each useful for different purposes PNG is designed as a
replacement for the GIF format, which was necessary after Unisys invoked its patent rights on the GIF format (The patent has since expired.) To design web pages, you must understand and be able to apply both image formats and to decide which is appropriate to use in each case
GIF
Graphics Interchange Format, also known as GIF or CompuServe GIF, is the most widely used graphics format on the Web today It was developed by CompuServe to fill the need for a cross-platform image format
Note
GIF is pronounced jiff, like the peanut butter, not with a hard G as in gift Reallythe early
documentation of GIF tools says so
The GIF format is actually two very similar image formats: GIF87, the original format, and GIF89a,
which has enhancements for transparency, interlacing, and multiframe GIF images that you can use for simple animations
The GIF format is great for logos, icons, line art, and other simple images It doesn't work as well for highly detailed images because it's limited to only 256 colors For example, photographs in GIF format tend to look grainy and blotchy The problem is that with the limited color palette, it's hard to create smooth color transitions
JPEG
JPEG, which stands for Joint Photographic Experts Group (the group that developed it), is the other
popular format for images on the Web JPEG (pronounced jay-peg) is actually a compression type that
other file formats can use The file format for which it's known is also commonly called JPEG
JPEG was designed for the storage of photographic images Unlike GIF images, JPEG images can include any number of colors The style of compression that JPEG uses (the compression algorithm) works
especially well for photographs, so files compressed using the JPEG algorithm are considerably smaller
than those compressed using GIF JPEG uses a lossy compression algorithm, which means that some of
the data used in the image is discarded to make the file smaller Lossy compression works extremely well for photographic data, but makes JPEG unsuitable for images that contain elements with sharp
edges, such as logos, line art, and type JPEG files are supported by all major web browsers
PNG
PNG, pronounced "ping," was originally designed as a replacement for GIFs It stands for Portable
Network Graphics Only the oldest browsers don't support PNG natively Current browsers all support PNG, and it has some important advantages over GIF (and to a lesser extent over JPEG) Like GIF, it is a non-lossy image format No information about the image is lost when it is compressed
Trang 10Image Formats
It has better support for transparency than GIF, and supports palette-based images (like GIF) as well as true-color and grayscale images (like JPEG) In other words, you don't have to worry about color usage with PNG, although limiting color usage will result in smaller files
More and more sites are using the PNG format for images, but due mainly to inertia, GIF and JPEG are still the most used formats For more information on PNG, see http://www.libpng.org/pub/png/