Cover of HTML 4 for the World Wide Web
Table of Contents
HTML Building Blocks
Starting your Web Page
Text Formatting
Creating Images
Using Images
Page Layout
Setting up Style Sheets
Formatting Text with Styles
Layout with Styles

HTML Tools
Special Symbols
Colors in Hex
HTML and Compatibility


Colors from the Inside Back Cover

HTML and the Web
Users vs. Programmers
Different versions of HTML
Cascading Style Sheets
What is DHTML?
HTML browsers
The HTML VQS Web Site

HTML Building Blocks
Writing HTML
HTML tags
Tags in this book
With space
With no space
Special symbols

Starting your Web Page
Designing your site
Organizing files
Designating a home page
Creating a new Web page
Looking at your page in a browser
Starting your Web page
This won't look like much by itself.
Understanding the HEAD and BODY
This won't look like much by itself.
Creating a title
This won't look like much by itself, since it's inside the frame. If it were a separate page you'd be able to see the title in the title bar.
Organizing the page
Starting a new paragraph
Creating a line break

Text Formatting
Changing the font
Making text bold or italic
Choosing a default size for body text
Changing the text size
Using relative values to change text size
In addition the BASEFONT value
Choosing a default color for text
Changing the text color
Creating superscripts and subscripts
Using a monospaced font
Using preformatted text
With bold formatting
Striking out or underlining text
Making text blink
Hiding text (Adding comments)

Creating Images
On the first page of this chapter there is an example of dithered and safe colors. Note that you'll only see the dithering if your monitor is set to view 256 colors or less.
On page 58 (still in the introduction for this chapter), there is an image that illustrates transparency.
Making images smaller
Exporting GIF images from Photoshop
Using (mostly) browser safe colors
Converting to browser safe colors
Reducing the number of colors
Creating transparency
Creating fake transparency
Interlacing GIF images
Creating animated GIFs
Creating JPEG images
Blurring images to aid JPEG compression
Creating low resolution images
Creating PNG files

Using Images
The illustration on the first page of this chapter shows the iVillage "parent soup" Web page, which is constructed almost entirely of images.
Inserting images on a page
Offering alternate text
Specifying size for speedier viewing
Linking icons to external images
Using low resolution images
Wrapping text around images
And to the left
And in between images
Stopping text wrap
On one side
On both sides
Adding space around an image
Scaling an image
Out of proportion
Aligning images
Using a banner
Adding horizontal rules

Page Layout
Specifying the margins
Using big margins
Creating indents
Creating indents (with lists)
Specifying the space between paragraphs
Creating blocks of space
In addition to horizontal spacers
Using pixel shims
Creating columns
Centering elements on a page
Positioning elements with layers
Linking to layers
Using background color
Using background images
Using block quotes
Quoting short passages of text
Controlling line breaks

Creating a link to another Web page
At another site (with an absolute URL)
Creating anchors
Linking to a specific anchor
Targeting links to specific windows
Setting the default target
Setting the default URL (see last tip)
Creating other kinds of links
Creating keyboard shortcuts for links
Setting the tab order for links
Using images to label links
Dividing an image into clickable regions
Creating a client-side image map
Using a server-side image map
Changing the color of links

Creating ordered lists
Creating unordered lists
Creating definition lists
Creating nested lists

Note: Many of these examples use styles. If the examples don't look exactly the same in your browser as they do in the book, it may be because your browser doesn't understand styles rather than the particular tag being explained. Also, there are several attributes that work fine with all tags on some browsers, but not on other browsers. The illustrations in the book mostly display Explorer and Netscape 4 for Windows. If any of this isn't clear, or you can't figure out which piece doesn't work in your browser, just drop me a line.
Creating a simple table
With no returns
Putting header cells across the top
Putting header cells on top and left
Adding a caption
Aligned to the right (IE)
Dividing your table into column groups
Structural (IE)
Non-structural (IE)
Dividing the table into horizontal sections
Skipping the TBODY tag
Adding a border
Adding a thick border
Adding a colored border (IE)
Choosing which borders to display
External (IE)
Internal (IE)
Internal and External (IE)
Internal and External, using groups (IE)
Spanning a cell across two or more columns
Spanning a cell across two or more rows
Spanning cells by controlling internal and external borders (IE)
Changing a table's width and height
Changing a cell's size
Aligning the contents of cells
All the alignment options
Changing a cell's color
Note: I have had very different results from browser to browser with the BGCOLOR tag. Make sure you test your pages on different browsers and different platforms!
Using a background image
Spacing and padding the cells
Default spacing
Adding cell spacing
Adding cell padding
Controlling line breaks in a cell
Speeding up table display
Mapping out a table

Note: The code on the first page of the chapter in Figure 10.1 is the same as in Figure 10.2 on page 158.
Creating a simple frameset
View the top frame individually
View the middle frame individually
View the bottom frame individually
Creating frames in columns
View the left frame individually
View the middle frame individually
View the right frame individually
Creating frames in rows and columns
Combining framesets
Creating an inline frame (IE)
Adjusting a frame's margins
Showing or hiding scroll bars
Adjusting the color of the borders
Adjusting the borders' thickness
To a thickness of one pixel
Hiding or showing the borders
Keeping visitors from resizing frames
Adjusting the spacing between frames (IE)
Targeting links to particular frames
Note: To see how targets work, click the “Les Rambles Boulevard” in the left hand frame. The corresponding URL will appear in the right hand frame, as illustrated in Figure 10.40.
Targeting links to special spots
Note: You may have to scroll to the bottom of the right hand frame to click the targeted link. The link should appear as in Figure 10.43 (that is, the right hand frame). However, Netscape 4 for Mac has a bug that makes TARGET=_self appear in a new window. Hopefully, it'll be fixed in a future release.
Changing the default target
Note: This particular variation of the example frameset uses the indextarget.html file for the left hand frame. All the targets for that file are set with the <BASE TARGET=photos> tag.
Nesting framesets
Creating alternatives to frames
This example only makes sense if you can't see frames. But if you can't see frames, you won't be able to see any of these examples, including this one. Therefore, I've made the link open in a new window. If you're using Explorer, you can turn off frames to see the NOFRAMES message.

About CGI scripts
The Programming Republic of Perl
Selena Sol's Public Domain CGI Script Archive
Getting a script ready
Creating a form
Note: Like all the form examples in this chapter, this example won't do anything when you press the Submit or Reset buttons. The CGI scripts are dummies.
Creating text boxes
Creating password boxes
Creating larger text areas
Creating radio buttons
Creating check boxes
Creating menus
And submenus (this is standard HTML 4,though not yet supported by any browser)
Allowing visitors to upload files
Creating hidden elements
Creating the submit button
With an image (PC)
Resetting the form
With an image (PC)
Active images
Organizing the form elements (PC)
Formally labelling form parts
Setting the tab order (PC)
Adding keyboard shortcuts (PC)
Disabling form elements (PC)
Keeping elements from being changed
Using a form hosting service

Helper applications
Non-supported images
Converting sound formats
Adding external sound to a Web page
Adding internal sound for Netscape users (N)
Adding background sound for Explorer users (IE)
Converting video to the proper format
Adding external video to your page
Adding internal video
Adding internal video for Internet Explorer (IE)
Creating a marquee (IE)
Inserting applets

Setting up Style Sheets
No styles vs. Styles (on first page of chapter)
The anatomy of a style
Applying styles locally
Creating an internal style sheet
Commenting an internal style sheet
Creating an external style sheet
Using an external style sheet
For additional pages
Defining styles for classes
Identifying particular tags
Special tags for styles
For block-level items (using the DIV tag)
For inline items (using the SPAN tag)
Defining styles for links

Formatting Text with Styles
Choosing a font family
Embedding fonts on a page
Creating italics
Applying bold formatting
Setting the font size
Setting the line height
Setting all font values at once
Setting the text color
Changing the text's background
Controlling spacing (IE PC, except indent for N and Mac)
Setting white space properties (N)
Aligning text
Underlining text
Making text blink (N)
Changing the text case

Layout with Styles
Note: As with the other Styles chapters, the examples in this one work best with IE4 for Windows. IE4 for Mac and Netscape 4 for Mac and Windows may recognize some of the styles but not the rest. They should look like the illustration in the book.
The base example used throughout this chapter
Offsetting elements within the natural flow
Positioning elements absolutely
Positioning elements in 3D
Displaying and hiding elements
Setting the height or width for an element
Setting the border
Adding padding around an element
Setting the margins around an element
Aligning elements vertically
Wrapping text around elements
Stopping text wrap
Changing the foreground color
Changing the background
Determining where overflow should go
Hiding the overflow scroll bars
Clipping an element
Setting list properties
Specifying page breaks

Adding an “automatic” script
Calling an external automatic script
The external script
Triggering a script
Creating a button that executes a script (PC)
Hiding scripts from older browsers
Adding alternate information
Note: Of course, you can't see the alternate information unless you turn off scripting support (in the Web Content Preferences page in Explorer or in the Advanced Preferences panel in Netscape).
Setting the default scripting language

The inspiration of others
Creating a counter
Changing a link's status label
Souping up mailto links
Creating drop caps
Using vertical rules
Creating buttons with tables
Using tables for layout
A shortcut for creating HTML tables in Word
Creating an automatic slide show

Helping visitors find your page
Controlling your page's summary
Exercise: Go to Altavista, and do a search for Alpacas.
Controlling other information about your page
Keeping search engine robots out
Testing your page
Before corrections
After corrections
Transferring files to the server
Fetch's Home page
WS_FTP's Home page
Transferring files to AOL or CompuServe
Changing permissions
Advertising your site
On Yahoo
On AltaVista
On Lycos

HTML Tools
HTML Editors
Claris Home Page
Microsoft FrontPage
Adobe PageMill
SoftQuad HoTMetaL
BBEdit (This is the one I use...)
GoLive Cyberstudio
NetObjects Fusion
World Wide Web Weaver
Aardvark Pro
HotDog Professional
Internet Assistant
Free-use images for your pages
On Yahoo
Hawkeye's Land of Backgrounds
Paul Medoff's Hall of Doodads--the link no longer works...if you know where this page has gone, I'd love to hear from you.
Also check Tara Calishain's article in TidBITS
Graphics Tools
Graphic Converter (M)
Adobe Photoshop (M, W)
Paint Shop Pro (W)
LView Pro (W)
Image Map Tools
Mapedit (M, W)

Special Symbols
Using special symbols
Table I: Characters
Table II: Symbols

Colors in Hex
Extra! Browser safe color chart
The colors from the inside back cover
Finding a color's RGB components-in hex
Hexadecimal equivalents
The Hexadecimal system

HTML and Compatibility
Intrinsic events


The colors from the inside back cover

Examples from 2nd edition

What People Are Saying
  Buy this book!
  Cookwood Press (home)