World Wide Web, Part IV:
An Advanced Course in HTML
In part III of his look at the World Wide Web (August), Forest introduced the basics of creating Web pages and using hyper-text markup language. In response to requests to know more, this month he offers an advanced course.
by Forest Linton
A quick re-cap for those of you who may have just joined us. The World Wide Web is a huge collection of multimedia documents, or "Web pages," that are located on Internet servers all across the World. Web browsers (programs like Mosaic or Netscape) are used to access these documents from your desktop computer.
The multimedia documents on the Web are created with a special set of rules called HyperText Mark-up Language, or HTML. This is a simple yet powerful set of tags that define the format of a page, the size and style of the text and headlines, and the location of accessible graphics, sounds, and movies.
In my August column, I discussed the basics of using HTML and making a Web page. This month, we will delve deeper into HTML and what can be done using it.
Text/layout
With version 3.0, HTML offers an expanded set of text layout and alignment tags. Text and images can be aligned to the left, right, top, bottom, and center of the page (or related elements). Text also can now wrap around images, creating more attractive layouts. This is done by using the "align=xxxxx" tag (which can be placed inside other tags) to specify page alignment. For example, <P ALIGN=LEFT> aligns any text following the tag to the left. The tag <IMG ALIGN=RIGHT SRC="my.gif"> puts the indicated GIF image on the right, with text (if there is any) wrapping along the left.
Ordered and un-ordered lists (which use <OL> or <UL> opening tags) now offer bullet item and staggered list options. The opening tag is followed by an optional list header, <LH>name</LH>, and then by the list items, denoted with an <LI> tag. At the end of the list is the closing </UL> or </OL> tag.
Netscape offers a custom tag for setting the font size: <FONT SIZE=x> (where x is a number from 1 to 7, small to big). Any text between this and a closing </FONT> tag will take the indicated size. This font tag differs from the headline tags of ordinary HTML by allowing you to change font size even in mid-word.
Finally, the break tag <BR> has been expanded. Because of the new text wrap features, there may be times when you want to specify that text begin after an aligned element. The tag <BR CLEAR=LEFT>, for example, will space down until the left side is clear.
Images
Currently, two image formats are in use on the Web: GIF and JPEG. In general, GIF (pronounced "jif") is best for logos, line art, and big blocks of color, while JPEG ("jay-peg") is best suited for photographs.
GIF is the most widely used format and offers two handy options: transparent and interlaced. A transparent GIF has one of its colors set to clear, allowing the page color to show through. Interlaced GIFs control the order in which the pixels are read; instead of having to wait for the image to display from the top down, you first see an overall rough, blurry scattering of pixels, which then clears up as the image completes loading. This is a good option for big images; it gives viewers an initial idea of whether the full image is worth waiting for.
The JPEG format offers 24-bit color (GIF is only 8 bits) and variable compression ratios. JPEG compression is lossy (meaning that some data is lost when compressed; the higher the compression, the more data that is lost), though, whereas GIF is lossless. This means that although JPEG can create smaller images, GIFs will be clearer. The GIF format compresses line art and big blocks of single colors better than JPEG does. JPEG really shines, though, with multi-color photographs.
Background images also can be used to spruce up a page. A background tag (such as <BACKGROUND="mypic
.gif">) inside the body tag specifies an image to be used as the background for the entire page. The image is automatically tiled a number of times to fit the window.
Tables
Tables provide an attractive alternative to plain text without the "weight" of actual graphics. It can be initially tricky and a bit frustrating to get the hang of tables. HTML bases tables on rows, not columns. The beginning of a table is the upper left corner, and from there you work over and down. You build a row, specify the number of cells, and then move to the second row. The columns are automatically calculated based on the number of cells in the longest row.
Table rows are denoted by the <TR> and </TR> tags, and the corresponding cells are separated by the <TD> and </TD> table data tags. You can make as many rows and cells as you like, but it is important to make sure you have the same number of cells in each row.
Alignment can be specified within cells. For example, <TD align=center>
my text</TD> centers "my text" inside the cell. A "valign" tag specifies vertical alignment. Text and pictures can be spread over multiple rows or columns to make attractive variations. <TD ROWSPAN=2> will stretch the cell down two rows, while <TD COLSPAN=3> will stretch the cell over three columns. You can use this, for example, to create a banner over a multi-column table.
For a great introduction to creating tables, check out http://www.iaf.nl/%
7Eabigail/HTML/Myth/myth.html.
Hypertext
One of the main points of HTML is, of course, hypertext linking. Hypertext does a lot more than make blue text links to different pages; you can make images into buttons, bring elements from all over the Web together onto a page, create clickable maps, and launch movies and sound files. Access to the Web server is necessary for some of these functions (including clickable maps), however.
Page elements can be anywhere in the world; HTML simply points to where they are, and the browser brings everything together in one "page." (For example, I store my HTML document on a server in Japan while my "heavier" images are on a server in the US.)
Good-looking, fast-loading pages
Because Web pages are accessed over networks, document size is an important issue. Graphics bloat a page's file size and slow the downloading process, discouraging people from reading the page. Netscape offers a neat trick to combat this, though: the background color tag, <BGCOLOR>, an option for setting the background of a page to a specific color.
This has the advantage of loading faster than a background image. Before adding this tag to your document, though, you have to determine the RGB values that you want. You can do this from most image editing programs; the numbers are usually from 0 (black) to 255 (white). These values will need to be converted to hexadecimal (such as via a scientific calculator); once finished, the tag will look something like <BODY BGCOLOR="#FFFFF">, which presents a black background. Links and text color can also be changed. Keep in mind, though, that in a single HTML document, you can only have one link, text, and background color.
File names and formats
One of the greatest features of the Web, and the Internet in general, is its cross-platform compatibility. HTML is just a text file, so it doesn't matter what kind of computer you use to read it. As long as you have a Web browser, you are set.
When creating HTML documents, however, it is good to keep a few general guidelines in mind. For example, the Macintosh poses no limitations on file names or length, but other operating systems do. If you will be uploading your documents to a server using a different platform, you will need to heed that platform's capabilities. To be safe, don't use spaces in file names, keep them under 8 characters in length, and use only 1-byte names. Using Japanese text is no problem on the Internet, but actual file names are best left in English or romaji.
Be aware what type of Japanese code you are creating: Is it S-JIS, JIS, or EUC? Also, remember what type of ASCII file you are creating. For example, Macintosh files use CR (carriage return) while UNIX files use LF (line feed). If you want to edit a text file on a different system later, this will be important. One caution: Sometimes when switching back and forth between English and Japanese, you may get a stray 2-byte space or control character stuck in a tag. This will interfere with the browser.
The sidebar accompanying this article is a guide to resources on the Net to help you create Web pages. The task isn't hard, and the results can be impressive. If you want a handy chart of HTML tag references, send me e-mail at forest@
gol.com.ç
Next month: The state of the Net in Japan
Forest Linton lives in Tokyo and, when he's not busy exploring the Internet, works at Koyosha Graphics. He can be reached by e-mail at forest@gol.com. His personal Web page, The Digital Forest, can be accessed at http://www.twics.com/~
forest/theforest.html.
HTML/Web Guides
http://www.eborcom.com/webmaker/
http://home.netscape.com/assist/net_sites/impact_docs/index.html
http://www.ncsa.uiuc.edu/demoweb/html-primer.html
http://union.ncsa.uiuc.edu:80/HyperNews/get/www/html/guides.html
Netscape HTML Extensions
http://home.netscape.com/assist/net_sites/html_extensions.html
http://www.iaf.nl/%7Eabigail/HTML/Myth/myth.html
CGI scripts
http://www.uwtc.washington.edu/Computing/WWW/Lessons/START_HERE.html
http://hoohoo.ncsa.uiuc.edu/cgi/
Graphic tools, mapping etc.
http://www.city.net/cnx/software/webmap.html
http://wwwhost.ots.utexas.edu/mac/pub-mac-graphics.html
http://www2.ncsu.edu/bae/people/faculty/walker/hotlist/graphics.html
Background color and file references
http://www.infi.net/wwwimages/colorindex2.html
http://submit-it.permalink.com/submit-it/
http://www.psy.uwa.edu.au/bkg_gifs.htm
Announcing your Web site
http://wwwac.agency.com/WebAnnounce/
http://www.users.interport.net/~giant/COLOR/hype_color.html
