|
|
|
HelpNet
Web Authoring Workshop HTML Tips and Tricks Every Web author has their own bag of shortcuts and little tricks that make their work easier. Here are a few of our favorites. (Some of these we both knew, and some we just taught each other in putting this list together.) Using tables for page layout: Ever wondered how Web pages have columns, headers, navigation bars, etc? The easiest way to do this is by using tables. By adjusting the size and arrangement of the table cells, and putting your content elements (text, graphics) into the cells, you can get more or less the design you want. (“More or less” because html is less precise than print publishing.) For this to work, you need to:
It’s fine to nest tables (putting a table inside a cell of a larger table), but do this in moderation. A table within a table is very common, but beware of a table within a table within a table within a table within a table within a table within a table. If might work, but it will load slowly, give some Web browsers fit, and if you make a mistake somewhere on the page you’ll never figure it out. The single-pixel gif trick: One feature of gif files is that a color can be defined as transparent. The file “dotclear.gif” on the CD we’ve provided is a transparent image, with dimensions of 1 pixel x 1 pixel – it’s a tiny, invisible dot. This little image is a powerful spacing tool, because you can define the horizontal and vertical space between and image and whatever is next to it. So if I want to create a blank space 51 pixels wide (to indent some text, for instance), the HTML code would look something like: <img src="images/dotclear.gif" width="1" height="1" hspace="25"> Using images as links: Images can be hyperlinks – this is a very common practice. Images also can have borders, with a thickness you can define. If you use an image as a link, be sure to set the border=0. Otherwise, when a user clicks in the link, the border will change colors, just like your other visited links, so your image with the classy black border may now have an ugly blue one. Flowing text around images: To flow text around an image, all you need to do is put the image within a paragraph of text, and then specify the image alignment (right or left). The image will line up on the right or left margin, with the text around it. Use the “hspace” and “vspace” attributes of the image tag to specify how much horizontal and vertical space there will be between the text and the image. Using lists for text formatting: An easy way to create a heading, with a number of indented entries under it, is to use HTML list tags. HTML can make numbered lists, un-numbered (bulleted) lists, and definition lists. Definition lists are particularly handy – since they have no bullets or numbers, you can use them wherever you want text entries indented. In a definition list, the definition term <dt> is not indented, and the definition item <dd> is indented. There can be multiple definition items under a single definition term. Watch your case: Windows users are not in the habit of paying attention to the case of our file names. Windows doesn’t care about case at all – it will treat “home.htm,” “HOME.HTM,” or HoMe.HtM” as all the same file. However, most Web servers run on Unix or Linux, which care a great deal about case. If you tell a Unix server to link to the file “home.html,” and the file is really named “Home.html,” it will not find the file. Also, , sometimes case gets changed when you FTP a file to your Web server, so that the file that is listed as “home.html” on your local machine ends up as HOME.HTML on the Web server. If you remember to pay attention to this, you’ll save yourself hours of tearing your hair out trying to figure out why something isn’t working right on your site. Background images: If you use a background image, the Web browser will tile it horizontally and vertically across the page. To make a background like the Folk School web site’s, which puts a vertical stripe of color on one side of the page, you should use an image that is 1000 pixels wide, so it won’t repeat horizontally – otherwise you’d get more than one colored stripe. The image doesn’t have to be very high – the Folk School background image is 996 x 20 pixels.
Preloading images: If you have a page with a lot of photos, you can put the first one or two of them on a page which browsers are likely to visit before visiting the photo page, but se the dimensions to 1 pixel x 1 pixel. This way, the photos are pre-loaded and come up right away then the browser gets to the photo page and there is something to look at while the others load. Only a dot shows on the page where they are preloaded (you can see this on the www.gwi.net/fiddle site – there are two photos from the photo page on the home page at the very bottom).
Pine
Tree Folk School |
