Go
Most HTML tags have two parts, and operate on the text between those parts. In these cases, the second part has a / in front of the tag word. For instance, <H1> is the code used to make that big title "HTML Primer for Ackanomic" above. That text appears after the tag, and then </H1> appears, marking the end of the title. (There are 6 sizes of such headers, H1 through H6. The section headers in this document are H2's.) Such pairs of tags are often called "blocks".
In an HTML document, all whitespace (spaces characters, line feeds, carriage returns, and tabs) is normally collapsed into a single space character (or a return due to automatic wrapping). There are a few ways to work around this:
<HTML> <HEAD><TITLE>This is the Title</TITLE></HEAD> <BODY>Wheeee! Silly body text!</BODY> </HTML>One of the more recent additions to HTML are meta-commands that lie outside the HTML block. There are a variety of possible uses for such tags, but one of them is to indicate what type of HTML a particular document contains. There have been a variety of different HTML standards and extensions, and by citing a particular standard, it is possible to say for certain that a particular document is (or isn't) proper HTML. HTML validators, in particular, use such codes to decide which HTML tags are allowed in your document. In my files, I have been citing the W3 Consortium's HTML 3.2 standard, by starting each file with this line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<tagname arg1="value" arg2="value" arg3=value>Stuff inside tag</tagname>Note that the values may or may not be enclosed in quotes. Usually the values are quoted, because there are strict limits on what characters can appear in an unquoted value.
The A tag has two common arguments.
The HREF argument indicates another web address (called a URL) which is link to the enclosed text. So if I want to create a link to Acka's current score page, it looks like:
<A HREF="scores.html">Link Text</A>The NAME argument gives that location on a web page a name that other A tags can link to. This is how to make links to the middle of a page, like the links to individual proposals in the proposal archive. The URL for such a link has a # followed by the value of the NAME tag you are linking to after the rest of the URL for that page.
An A tag can have an HREF argument, a NAME argument, or both. But always remember to close the tag; otherwise everything until your next A tag will be part of the link.
The URL I used above is an absolute URL. There are two ways to abbreviate URLs that are often used to save space or to make pages more portable.
The first way is by leaving off the protocol ("http:") and the host name ("//wilma.che.utexas.edu"). A link like this is assumed to use the same protocol and host name as was used for the page containing the link. So any page accessed by http on wilma could use HREF="/~devjoe/acka/scores.html" to refer to the scores page.
The second way is by just giving a filename, i.e., HREF="scores.html". In this case, the file is assumed to be in the same directory as the page containing the link; everything after the last / in the URL of the current page is replaced by the link text. Most of the Acka pages use these links when possible, so copying these pages to another server won't require changing every link on every page -- there are a few absolute links that will need to be changed, though. You can also go down more directory levels this way -- so "images/ackpffft.gif" (used in the link for the "go back" link at the bottom of this page) refers to the file that can be addressed from anywhere on the web as images/ackpffft.gif .
There is actually a third way, when there is a link to a NAME= tag in the same page, you can even leave off the name of the page and just say HREF="#gizz" but this only works within one web page so it isn't used much.
Most URLs use the http protocol, the standard web protocol, but there are URLs that use other protocols. These can be used to provide links that do other things besides load web pages:
<IMG SRC="/deadgames/acka/images/ackpffft.gif" ALT="ACK" BORDER=0>I didn't mention the border tag. Setting the border width to zero makes it so that browsers like netscape don't put a colored border around the image, indicating the presence of a link (similar to how link text is underlined). Especially when two images are used side-by-side (as in this case), or when you have images with transparent backgrounds used as links (also true here), BORDER=0 is useful.
Another two common arguments in an IMG tag are WIDTH and HEIGHT. This tells browsers how big (in pixels) the image is going to be, before the browser actually loads the image, which allows it to format the rest of the page before that image is loaded. This is particularly useful on pages with big images or lots of images.
The ALIGN argument in an IMG tag can tell your browser to put the picture in a different location -- most commonly, ALIGN=right is used to put an image on the right side of a page.
The STRONG and EM tags are used to highlight certain sections of text; most browsers display these as bold and italic, respecitvely. There are also B and I tags that explicitly mean bold and italic.
The CENTER tag centers all the text or other elements within it.
The UL and OL tags are used to create lists. OL stands for ordered list; UL for unordered list. Inside an OL or UL block, the LI tag marks the start of a list item. The items in an ordered list are typically displayed as numbered or lettered or roman-numeraled, etc. The items in an unordered list are marked with bullets. You can nest lists; most browsers will use different types of numbers/markers for each level of nesting, and each level is also indented differently.
The BLOCKQUOTE tag indents a section of text. It is used in the proposal and rule files to mark the text of each proposal/rule.
HTML of the form
<!--some text-->is a comment. This is useful for only temporarily deleting some text or HTML coding on a page.
Tables use the TABLE tag, as well as several other tags that can only appear within a TABLE block. (Tables are used on the gallery page, for instance.) A TABLE block normally consists of several TR blocks, each of which represents a table row. A TR block normally consists of several TD blocks, each of which represents a table cell. There are arguments that can be used in TABLE, TR, and TD tags to control the appearance of a table. Look at the source to the gallery page to see how this works.
The map page uses a client-side imagemap. Originally, imagemaps operated via a cgi program on the server, but the modern form allows the client to interpret the imagemap. To make a client-side imagemap, add a USEMAP argument to the IMG tag for the image. USEMAP takes a value, which is the URL for the map, usually included in the same document. The map is enclosed in a MAP block. The MAP tag takes a NAME argument (like the A tag) which is used to refer to the specific map by the USEMAP argument. The MAP block contains several AREA tags. Each AREA tag has an HREF argument (the thing linked to, like in an A tag), a SHAPE argument (usually rect for rectangle, but there are others), and a COORDS argument (the coordinates for that link, in pixels). Also common is an ALT argument, for non-graphical browsers or if the image is broken. See the map page's source to see how this is used.
The BODY tag in an HTML document can take several arguments, controlling the default colors of text on the page, and the background color or image. The most common are BACKGROUND="/deadgames/acka/images/some url" for a background image, and BGCOLOR="color" for a solid-colored background, where color is either a color name (there is a list of accepted color names somewhere) or an RGB spec, which looks like #RRGGBB where RR is the red intensity as a two-digit hexadecimal number, etc. Other possible arguments include TEXT (default text color), LINK (default color for link text), VLINK (default color for visited links, on browsers set to show the distinction), and ALINK (active link, the color that is flashed when you click on a link.