![[Your Picture Here]](photo.gif)
Text and stuffGeoff,
Here's the stuff I promised over the phone, the goods, as it were. I remembered this morning when I went to pick up my HTML book from my bookshelf, since I noticed it was missing and I don't think someone would break in just to steal that, that I loaned it to one of my professors who still has it. So, I'll have to make this up from memory.
HTML is a rather simple "language." It is, what they call, a markup language. Whatever that means. It works by means of tags.
Tags are statements enclosed in brackets, for example:
<tag>insert your text here</tag>
Notice an important, yet easily overlooked detail at this point: the tag on the end must have a front slash (/) in it. This designates it as the end tag. Now, <tag> isn't an actual HTML tag. A list of tags follows, but first things first.
When you surround simple ASCII text with an HTML tag it takes on the new characteristic that the tag defines. For example there is one tag, <html> which must surround your entire document because web browsers don't know that stuff outside the html tags is really supposed to be html stuff. Inside the <html> tag is the entire contents of your HTML file.
There are two primary parts to an HTML file: the head and the body.
The head contains very little information that is seen by the user. The most important thing for you to know about the head is that the title is located there. Nested inside the <head> and </head> tags you use the <title> and </title> to define the title of your HTML file. It would look like this:
<html>
<head>
<title>Title of My Super-Duper HTML file</title>
</head>
<body>
<abunchastuffyoudon'tknowyet>crapcrapcrap</abunchastuffyoudon'tknowyet>
</body>
</html>
Which would look like this when viewed by a web browser:
crapcrapcrapcrap
And there you have it. There are other things you can put in the head of your file, but these are "cutting edge" things that have to do with organization of all your files on the server. I can go into detail later. The <body> and </body> tags enclose all the neato stuff that you're probably interested in at the moment: text, hypertext links, graphics, and other crap.
As I said, well typed, earlier, most of the interesting stuff that you're interested in is located inside the <body> and the </body> tags. The promised list follows complete with examples.
<p> -- This is the paragraph tag. You use this to designate the beginning of text. A web browser, upon seeing this will indent all the crap and do carriage returns automatically until it sees a </p> or a new <p> tag. Other tags can be nested inside the <p> and </p> tags. They're coming up.
<br> -- This is the break tag. It creates a blank line, for
example if you wanted to stick a space between two paragraphs,
this would be the tag to use. It is "kinda funny" in that you
don't need an ending </br> tag with this one. You can use it
if you want, but it's not necessary. The web browser interprets
it like this:
<hr> -- The horizontal rule tag is this. Works exactly the same as the break tag, but it puts a horizontal line instead of just a blank line. It looks like this:
<img src="photo.gif"> -- This is the tag used to stick a picture or some other graphical thing in your file. There's an optional alignment thing you can do with the <img> tag to tell where the graphic will be placed in relation to surrounding text. The HTML would look like this:
<img src="photo.gif" align="top"> and would look like this to a web browser:
Text and stuff
The options for align are "top", "bottom", and "middle". Kind of quarkish, but not really. The alignment of graphic to text is as follows:
top = text is at the top of the graphic, e. g.
------------- Text goes here
| YOUR |
| PICTURE |
| HERE |
-------------
middle = text is in the middle of the graphic, e. g.
--------------
| YOUR |
| PICTURE | Text goes here
| HERE |
--------------
bottom = text is on the bottom of the graphic, e. g.
--------------
| YOUR |
| PICTURE |
| HERE |
-------------- Text goes here
<a> -- This is the anchor tag. It is used to create links from one file to another or from one section of a file to another labeled section. To create a link from one file to another type in the following:
<html> <head><title>A link</title></head> <body> <p> Stuff. <a href="linkedfilename.htm">Text you want highlighted</a></p> </body> </html>
And it would look like this when viewed by a web browser:
Stuff. Text you want highlighted
To jump from one part of a file to another labeled portion of the same file do the following:
<html> <head> <title>Example</title></head> <body> <p>crapcaracpacrap</p> <a href="samefile.htm#label">Text you want hightlighted</a></p> <br> <p>crapcrapcrap <img src="star.gif" align="top"> crapcrapcrap</p> <br> <p><a name="label">This is the point to which the web browser will jump when the user clicks on the Text you want highlighted.</p> </body></html>
And it would look like this when viewed by a web browser:
crapcaracpacrap
Text you want highlightedcrapcrapcrap 
crapcrapcrap
There are also some word-processor-like features in HTML:
<b> -- This makes enclosed text bold. The HTML looks like this:
<b>This text is bold</b> other text isn't.
A web browser would display this like:
This text is bold other text isn't.
<i> -- Italics. Looks like this to you: <i>This text is italicized</i> this other text isn't.
A web browser would display this like:
This text is italicized this other text isn't.
<strong> -- Same as bold
<blink> -- Makes enclosed text or stuff blink. Now, there's a surprise. The code looks like this:
<blink>This is blinking --- how annoying.</blink>
And it would look this annoying when displayed by your web browser:
<center> -- Centers enclosed text or graphics. Yet another surprise. The HTML code would look like this:
<center>This text is centered, and thankfully not blinking</center>
And it would look like this when viewed with a web browser:
To center a picture just enclose the <img> tag in the <center> tags:
<center><img src="photo.gif"></center>
In your web browser:
In HTML you are not limited to just an endless list of paragraphs interspersed with highlighted links and pictures. You can create headings of various sizes, lists of various types, tables, and you can plop preformatted text right into your HTML file without the web browser screwing it up (this is useful when exact spacing is important, since normally spacing is relative according to monitor type, resolution, which web browser is being used, and which operating system one is running, and is done automatically by the web browser).
<hn> -- This is the tag you use to create headings. N is a variable and can be equal to any integer from 1 to 6, with 1 being the largest and 6 the smallest. This tag will bold and make the font size larger for all the text enclosed in the <hn> and </hn> tags. Example:
<html><head><title>Head Example</title></head><body> <h1>This would be a very large heading</h1> <p> Text follows</p> <h6> This would be a very small heading </h6> <p> text follows </p> </body></html>
And a web browser would display this as follows:
Text follows
text follows
<ol> -- This is used at the beginning of an ordered list, that is, a list where each list item is numbered.
<ul> -- This is used at the beginning of an unordered list, that is, a list where each list is set apart with a bullet.
<li> -- This designates the beginning of a new list item. All <li> tags need to nested within either <ol> and </ol> tags or <ul> and </ul> tags. Outside of these tags, <li> is meaningless. An example follows:
<html> <head> <title>Example of some lists</title> </head> <body> <ol><h3>An ordered list</h3> <li> This is item number one.</li> <li> This is item number two.</li> <li><i>Item number three is italicized.</i></li> </ol> <ul><h3>An unordered list</h3> <li> First item of an unordered list</li> <li> <--- There's a bullet right there.</li> </ul> </body> </html>