|
|
|
|
|
|
 |
Introduction 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 Spacing  With spaceWith no spaceSpecial symbols URLs |
|
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 |
|
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 leftAnd in between imagesStopping text wrap On one sideOn both sidesAdding space around an image BeforeAfterScaling an image Out of proportionAligning images Using a banner Adding horizontal rules |
|
Links 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 |
|
Lists Creating ordered lists Creating unordered lists Creating definition lists Creating nested lists |
|
Tables 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 returnsPutting 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 tagAdding a border Adding a thick borderAdding 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 optionsChanging 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 spacingAdding cell spacingAdding cell paddingControlling line breaks in a cell BeforeAfterSpeeding up table display Mapping out a table |
|
Frames 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 individuallyView the middle frame individuallyView the bottom frame individuallyCreating frames in columns View the left frame individuallyView the middle frame individuallyView the right frame individuallyCreating frames in rows and columns Combining framesets Creating an inline frame (IE) Adjusting a frame's margins BeforeAfterShowing or hiding scroll bars Adjusting the color of the borders Adjusting the borders' thickness To a thickness of one pixelHiding or showing the borders Keeping visitors from resizing frames BeforeAfterAdjusting 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. |
|
Forms About CGI scripts The Programming Republic of PerlSelena Sol's Public Domain CGI Script ArchiveGetting 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 |
|
Multimedia Helper applications Non-supported images Sound Converting sound formats Adding external sound to a Web page Adding internal sound for Netscape users (N) Adding background sound for Explorer users (IE) Video 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 sheetCreating an external style sheet Using an external style sheet For additional pagesDefining 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 |
|
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 barsClipping an element Setting list properties Specifying page breaks |
|
Scripts Adding an “automatic” script Calling an external automatic script The external scriptTriggering 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 |
|
Publishing 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 correctionsAfter correctionsTransferring files to the server Fetch's Home pageWS_FTP's Home pageTransferring files to AOL or CompuServe Changing permissions Advertising your site On YahooOn AltaVistaOn Lycos |
|
HTML Tools HTML Editors Claris Home PageMicrosoft FrontPageAdobe PageMillSoftQuad HoTMetaLAOLpressBBEdit (This is the one I use...)DreamweaverGoLive CyberstudioNetObjects FusionWorld Wide Web WeaverAardvark ProANT_HTMLHotDog ProfessionalInternet AssistantFree-use images for your pages On YahooHawkeye's Land of BackgroundsPaul 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 TidBITSGraphics 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 HTML Tags Intrinsic events |
|
Index |
|
The colors from the inside back cover |
|
Examples from 2nd edition |
|
 |
|
 |
|
 |
|
 |
|
 |
 |
|
 |