More HTML
Contents
This section includes a few basic HTML concepts that you'll need to create useful web pages. It doesn't give detailed instructions or exhaustive lists of all the tags and attributes you'll need; for that, see some of the references in Additional Resources. Rather, it introduces a few of the most useful concepts and terms for basic web design.
Advice: Don't get carried away. Keep everything (especially graphics) small and readable. Large file sizes means longer download times, which will annoy people with slow connections. Too many complex graphics and poor color choices make a page hard to read. For more good advice, consult LSIT's Design Guidelines.
What makes the web a web is the prevalence of links. When you click on text marked as a link, it takes you to another document somewhere on the Web.
Another Website
The way to indicate a link to another website is to enclose the text in the <a> ("anchor") tag, and put the URL you're linking to (in quotes) as the value of the href attribute of that tag. The text in the <a> tag will display underlined and colored.
<p>For more information, go to the <a href="http://www.linguistics.ucsb.edu/">Linguistics Department Web Site.</a></p>
This displays as:
For more information, go to the Linguistics Department Web Site.
This type of link is called an "absolute URL", because it gives the full address of the destination page.
Another page on your site
If you're linking to a page at your own site, you should use a "relative URL", which specifies the page location relative to the current file. If the page you're linking to is in the same directory, all you need is the file name:
<p>For less information, see <a href="webpage.htm">Create a Web Page</a>.
If the page you're linking to is in another directory, you can use the conventions you're familiar with from DOS. Two dots stands for "one directory up" (e.g. "../webpage.htm" would refer to a file in the parent directory); for a subdirectory you use the directory name followed by a slash (e.g. "subpages/webpage.htm" refers to a file in the 'subpages' subdirectory.)
The reason you should use relative URLs whenever possible is that then you can set up your website on your local machine and test it there, and then upload it, without changing any of the links; you can even move it to another server and the links stay the same.
Another place on the same page
To link to another part of the same page (like the "contents" links at the top of this page), you need to insert a "named anchor" (like a bookmark in Word) at the location you want to link to. This is just an a tag with no contents and a name attribute. For instance, the anchor at the top of this section looks like this:
<a name="Links"></a>
Then to jump to the named location, you just use a regular link tag where the href value the anchor name. The link to this section in the "contents" at the top of this page looks like this:
<a href="Links">Links</a>
A link to download a file
If you have a non-html file you want to let people download to their computer, such as a Word document, a sound file, or a zipped collection of files, all you have to do is put the file on your site and link to it. When somebody else visits your site and clicks the link, if the file is in a format their browser doesn't understand, the browser will offer to download it rather than displaying it. For instance, the following code would link to the file "SusannaFonts.zip", a compressed file containing two fonts:
<a href="/Font/SusannaFonts.zip">Download the Susanna font</a>
This displays as follows:
Clicking this link should result in an offer to download the font.
Which file types a particular browser will attempt to display depends on what "plugins" the browser has installed. Internet Explorer, for instance, will display a Word .doc file rather than downloading it; a .wav file would probably be loaded and played in a media player application. To avoid this it's a good idea to compress files you want people to download; this also reduces download times.
Linking with an image
Websites often use images rather than text for links. To use an image link, put the <a> and </a> tags around an image tag, instead of around text.
Most modern web pages make more or less extensive use of images. Images live in separate files from the HTML and text; you include an image in a web page simply by including a link to the image, usually as the value of the src ("source") attribute of the <img> ("image") tag. (Again, you should always use relative links if possible.) The image tag has various attributes relating to the size and position of the image. For instance, the following code:
<img src="Images/Apple.jpg" width="50" height="49" align="right">
produces
the following result, assuming you have a file called "Apple.jpg"
in the "Images" subdirectory of the directory the document file
is in:
The "width" and "height" attributes (measured in pixels) are optional, but including them is recommended so that your page will save the right amount of space for the image as the image loads. (Images usually load more slowly than text.)
Another way you can use graphics on your page is to tile them over the background of the whole page or part of it. Text and other elements then appear on top of the image. You do this by using the image URL as the value of the "background" attribute of the "body" tag. This approach should be used with care, since it can easily make text completely unreadable. Here's an example of a page with a tiled background. (The text in this page is mostly in a table with a solid background.)
You can't use just any computer graphics file on the Web. There are two main image file formats in use. Since graphics files tend to be large and thus take a long time to download, both are compressed; but they use different types of compression.
- JPEG or JPG ("Joint Photographics Experts Group")
is ideal for images with a large number of colors or continuous shading
between colors, such as photographs (or the apple graphic above). JPEG
is a "lossy" compression format, which means that some of
the image data is thrown away. However, it can achieve extremely high
compression ratios and will usually result in much smaller file sizes
than GIF. Also, the compression amount is variable, meaning that you
can decide for yourself what tradeoff you want to make between image
size and fidelity. The downside of JPEG is that it tends to blur sharp
edges, making text (for instance) blotchy and hard to read:
- GIF ("Graphics Interchange Format") is ideal for
images with a small number of colors (up to 256), or where the lines
between the colors are sharp, such as text on a solid background. For
such images GIF is a "lossless" compression format, which
means the file that results will look exactly like the original:
Animated
GIF: a sequence of GIF images contained in a single file. They play
back rapidly like the frames of a movie to create the effect of movement.
An animated GIF has the same file extension as a regular GIF, and can
be included in your document in the same way.
There is another new file format, ".png" ("Portable Network Graphics") that is gaining acceptance, but it is not yet widely supported so I won't discuss it further here.
So -- to use graphics on the Web, you will have to convert them to either GIF or JPG format if they are not in one of those formats already. Just about any graphics program can do this, including the most current version of Windows Paint (the free graphics program that comes with Windows -- look in Accessories).
Page
layout: tables and frames
By default, HTML text stretches from edge to edge of the window. However, you won't see many web pages that have that organization. Usually, there are extra elements, for decoration or navigation, above or to the left or right of the main text.
These types of page layouts are produced in one of two ways: tables and frames.
Tables
Most Web pages (this one, for instance) use a table layout. This is the most common layout:
|
Header
|
|
|
Navigation (Links) |
Text |
Table cells can be formatted independently: for instance, they can have different text alignments, colors, or bitmapped backgrounds from each other. Tables can also be nested inside other tables.
It is much easier to design a table using an authoring program like Dreamweaver than by hand. However, it helps to know a little about how the HTML is set up. A table in HTML has a hierarchical structure:
- the table <table> </table>, which contains
- one or more rows: <tr> </tr> ("table row"), which contain
- one or more cells: <td> </td> ("table data"), which contain
- the actual text and HTML in each cell.
Any of these elements can have attributes for color, font, background image etc. By default, HTML tables are autosizing: columns will change width to accomodate the text and graphics placed in them. If you want to specify a size, you can give an absolute size (in pixels) or a relative size (a percentage of the width of the element's container). Since screen sizes vary, it's preferable to use percentages.
The HTML for the small table above is as follows:
<TABLE WIDTH="80%" BORDER="1" CELLSPACING="0" CELLPADDING="10" ALIGN="CENTER">
<TR BGCOLOR="#99CCCC">
<TD COLSPAN="2">
<DIV ALIGN="CENTER">Header</DIV>
</TD>
</TR>
<TR>
<TD WIDTH="20%" BGCOLOR="#FFCC66">
<P>Navigation</P>
<P>(Links)</P>
</TD>
<TD>Text</TD>
</TR>
</TABLE>
This illustrates the general structure of a table. If you're interested in the details of the attributes of the various tags, consult the links in Additional Resources.
Frames
If you want the parts of your page layout to scroll independently, you can use frames. Frames give you the ability to combine several different HTML files on a single page. There is a matrix page which contains the "frameset", and then separate daughter pages for each frame in the set. Databases for Linguists is an example of a site which uses a frame layout: the navigation links are in the left frame and the text is in the right frame. When you scroll the text, the links all stay visible. The links are actually in a separate HTML file from the text. The details of how to set up frames in HTML are a bit complex, so I won't go into them here. Consult the links in Additional Resources.
 |
|
|
|
|
 |
 |
 |
 |
|
 |
|
|||
 |
|
|
|
|
 |
 |
|
|
||
 |
|
|
 |
|
|
|
||
 |
|
|
|
||
 |
|
|
|
||
 |
|
|
|
