Beginning HTML

Introduction

HTML stands for Hypertext Markup Language. While this sounds like gibberish or doubletalk, it actually means something. It means that, using HTML, you can create documents that a reader doesn't have to read in a straight line. For example, a book that you hold in your hand is linear -- the reader reads it striaght through. But, a reader of HTML can click on any of the hyperlinks you have created and jump to another document, or to a new place in the document they are reading. The Markup part of the acronym just means that it uses a system of tags to specify everything from BOLD words to italics to pictures

File names

An HTML document needs to be in a special format to be recognized. The file name of the HTML document has to end in either '.html' or '.htm'. There are special cases, but in general, this is a good rule of thumb to follow until you understand when you wouldn't need to use this naming convention. So, for example, this document is titled 'help.htm.'

Sections of a Document

A normal document will have two components -- a head, and a body. (Nope, no tail.) Each section has different commands. For now, the only important command in the head section is <title>. Obviously, the head section has to be first, so the <title> command should be somewhere near the top, or it wil lbe ignored. A sample document might look like this:

<title>Example Document</title>
You are looking at an example document!

This would produce a document with only one line on it. But, it would have the title Example Document! You can also specify where the head and the body section is. This example is exactly the same as the above, but it is more polite.

<html>
<head>
<title>Example Document<title>
</head>
<body>
You are looking at an example document!
</body>
</html>

Keep in mind that it doesn't matter if things are on the same line or not. HTML ignores extra spaces and newlines (when you press enter).

Dictionary of Tags

Headings

A heading is a part of the text that is bigger and bolder than the rest. This document uses a lot of heading commands. Everytime a new section is started, it is signaled to you by a heading. For example, the text Headings above is surrounded by a heading tag. There are 6 heading tags. <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. So, this code fragment:

<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>

would end up looking like this:

Text

Notice that the headers below <h3> are smaller than normal text! (Usually... Every computer decides for itself how to draw the document.) Also, notice how much space is between each of the words... This happens by itself. You can't stop it.

Bold, Italics, Underline

The tags for these commands are easy. The first letter of bold, italics, and underline make up the tags. An additional tag, <tt> for typewriter makes the text look more like an old style typewriter. So, the fragment:

<b>Text</b>,
<i>Text</i>,
<u>Text</u>,
<tt>Text</tt>.

Would end up looking like this:

Text, Text, Text, Text.

There are several things to notice here. You might not see the underline on the third work. (It's also possible that you don't see the bold or italics, but less likely.) If your software doesn't support a tag, it just ignores it, and not all software supports underlines. Also, notice that we wrote everything on different lines, but it came up on the same line. Why? Well, you have to tell it when you want to go to the next line, and enter doesn't do it in HTML. How to do that is covered next.

Line breaks and Paragraphs

There are two commands for getting to the next line. The most commonly used command is <p>. It means, I'm done with this paragraph, go to the next one. It moves down 2 spaces and continues on. If you are doing something that needs less of a space, the <br> tag stands for break and will only put half of the usual space. To compare, look at this example code,

This is the first line.  <p> This is the second.<p>
This is the first line.  <br> This is the second.

will look like this:

This is the first line.

This is the second.

This is the first line.
This is the second.

You should notice that these tags don't have to have the stop paragraph or the stop line-break commands. Where would you put them?

Dividers

If you are making a document that is divided into sections, you might want to visually enforce that in a stronger way than using headers. (see above) This is a job for horizontal rules! The command is <hr> and it makes a line that looks like this:

Notice that there is no need to have a stop command here either. The horizontal rule stands alone.

Lists, lists, and more lists

Often, when you're creating a document in HTML, you want to make a list of something. Sure, you might not think so now, but you'll see! There are two main types of lists, definition lists, and bullet lists. Lists relatively complicated so I'll cover the two type seperately.

Definition Lists

You have to tell HTML that you want to start a definition list, and that tag looks like this: <dl>. Obviously, this stands for Definition List. When you're done with the list, this command also has an anti-command -- </dl>. Now, if you think about it, a definition has 2 things: a subject or topic, and a definition. So, when you're making a definition list, the <dt> tag signals the start of the topic. This command doesn't have an anti-command, so when you're ready to type in the definition, the <dd> tag will handle that. So, the code for a definition list might look like this:

<dl>
<dt>Book
<dd>Something with words and pictures in it, often used to convey
information.  Throught history, books have been banned, burned, stolen, and
mistreated.  This happens even though the worst books ever did to anyone 
was give a paper cut.
<dt>Picture
<dd>Worth a thousand words.
</dl>

And, just to demonstrate, it would end up looking like this:

Book: Something with words and pictures in it, often used to convey information. Throught history, books have been banned, burned, stolen, and mistreated. This happens even though the worst books ever did to anyone was give a paper cut.
Picture: Worth a thousand words.

Bullet lists

Actually, there are two types of bullet lists, ordered lists, and unordered lists. The commands are mostly the same for both, but they start differently. So, this is code for a ordered list:

<ol>
<li>10 Apples
<li>15 Bananas
<li>8 Oranges
</ol>

and it would look like this:

10 Apples
15 Bananas
8 Oranges

The same thing with unordered list would be coded like this:

<ul>
<li>10 Apples
<li>15 Bananas
<li>8 Oranges
</ul>

and it would look like this:

10 Apples
15 Bananas
8 Oranges

Preserving Formatting

You may have noticed that HTML ignores taps, newlines, extra spaces, and the text it uses isn't good for typing in code, or text tables. This isn't a hard problem to fix, a tag was invented to solve all these problems. The tag looks like this: <pre& and does many things. If you've turned <pre> on, then all spaces, newlines, and EVERYTHING else you type (not HTML tags, those stil work) will be put on the screen just as you typed it. So, if you type:

<pre>
Well,	I don't understand this:            why not?
          -----            /////
</pre>

would come out like this:

Well,	I don't understand this:            why not?
          -----            /////

whereas it would look like this without the <pre> and </pre> tags:

Well, I don't understand this: why not? ----- /////

A brief discussion on URLs

URLs can be thought about like addresses. In fact, that's very close to what they are. A sample URL looks like this:

	http://www.leap.yale.edu/hotshots/main.html

While this may look like a long mess of random letters, it has a real order to it, and makes a lot of sense. It can be divided into three parts:

	1. http://

	2. www.leap.yale.edu

	3. /hotshots/main.html

The first part is the service name. The whole idea of a service is way too complicated to cover here, but http:// is the most common. Others include: ftp://, gopher://, telnet://, mailto://. Probably, your pages will be http://, but you should realize other possibilites exist.

The second part is the name of the computer. Internet computer names always look like this, unless they are all numbers. You have to know the correct computer name for the address. Like a real address, your request won't be delivered if the address is wrong.

The third part can be thought of as an apartment number of a house. If you don't type this part in, you'll get to the right house, but who knows who'll get the mail? This part tells the EXACT location of the document you are looking for. If you're requesting a document from the computer you're on, you can skip the previous two parts, and just put this part in.

Remember! For part three, you can put any file you have. If you have a sound file, it will play on the users machine. So will movies, and anything else. If you have a program you want to send to the user, just specify its name!

Images

So you want to put pictures in your documents, huh? Well, the command is deceptively easy to use. It looks like this:

	<img src=URL>

So, if you want to access the picture at the top of this document, the command would look like this:

<img src=picture.gif>
or
<img src=http://www.leap.yale.edu/help/picture.gif>

either way, it looks like this:

Hyperlinks

Well, we've covered everything else, so it's time to take a look at hyperlinks. A hyper link is a section of your document that can be clicked on, and will take you to some other document, get you an object like a sound file, or take you to a different place in your document. The tag which handles all of these tricks is the anchor tag. It has two main functions. I'll cover both of them seperately.

The first is making a hyper link. That format is below.

	<a href=URL> Some text, pictures, etc.</a>

All of the text, all of the pictures, and anything else between the <a> and the </a> tags is clickable. If you click on it, you will be taken to the URL you sepecified.

The second form of the <a> tag lets you make it so that the user can jump around inside your document. This is good if your page is really long, and you don't want people to have to scroll through it. For example, some people have put books on-line. I think it would be nice if there was a table of contents, so you could jump from chapter to chapter. The form of this tag is:

     <a name=random_name> Some text, or something</a>

This gives that text the name that you specified. You can then get to that spot on your page by putting '#random_name' at the end of any URL. In fact, if you're not changing documents, and only want to stay in the current document, you only have to have the anchor name as the URL.

You're done!

Yup, that's right! That's all there is to standard HTML! There are options to most of the tags, and they will soon be listed at the end of this document in a simple reference. But for now, happy coding!

Reference Manual

<Title>

None: None

<Body>

background

You can now put a picture in the background! With this option, just include the URL of a picture file, and there it will be! Example:

	<body background=http://www.leap.yale.edu/pics/splat.gif>

bgcolor

Instead of a picture, you can put a color as a background. This is good for pages like this, since white often looks so much nicer. Yuo have to be carefull though, the colors are specified with an RGB triple. What that means is that there are 3 numbers, each representing either Red, Green, or Blue. These values are between 0 and 255, and are represented in hex notaion. (00 - FF) So, this is white: FFFFFF. This is bright red: FF0000. You need to put a '#' sign in front of the number. So, the template is: #rrggbb. Example:

	<body bgcolor=#ffffff>

text

This specfies the color of normal text. It uses the same RGB triple as bgcolor. Example:

	<body text=#ffff00>

link

This specifies the color of a link that hasn't been visited yet. It uses the same RGB triple as bgcolor. Example:

	<body link=#00ff00>

vlink

This specifies the color of a link that has been visited already. It uses the same RGB triple as bgcolor. Example:

	<body vlink=#00dd00>

alink

This specifies the color of a link as you are clicking on it. It uses the same RGB triple as bgcolor. Example:

	<body alink=#ff0000>

<Hn>

align

You can use this option to make your text centered. Example:

	<h1 align=center>

<B, I, U, or TT>

None: None

<P>

align

You can use this option to make your paragraph centered. Example:

	<p align=center>

<hr>

align

You can use this option to make the horizontal rule be on the left, the center, or the right. It usually is in the center. Example:

	<hr align=center>

size

You can use this option is you know how thick you want your rule to be. Example:

	<hr size=5>

Will make a line 5 pixels thick.

width

You can make your rule any width you want. Example:

	<hr width=100>

Will make it 100 pixels wide You can also use percents. Example:

	<hr width=50%>

Will make the rule half of the document size.

noshade

This will make your rule completely the color that your normal text is. (Black, usually.) Example:

	<hr noshade>

<ul>

type

You can change the shape of the bullet if you want with this option. The available shapes are: disc, circle, square. Example:

	<ul type=circle>

<ol>

type

This will change the way the numbers are shown. The types you can pick for the ordered list are: A, a, I, i, 1. Example:

	<ol type=I>

This will put the numbers as roman numerals.

start

This new option lets you specify what number the list should start from. If you're not using numbers, the number you specify will be converted to the symbol that you picked. (For example, if you're using letters, it'll be converted from '5' to 'e.') Example:

	<ol start=5>

<li>

type

This will change the way the bullet of the list will be shown. The valid options change depending on which type of list you're using. The options are: Ordered list: A, a, I, i, 1 and Unordered list: disc, circle, square. Example:

	<ul>
	<li type=disc>List item

value

Change the number of the item in the list. This numbering will continue from this value. This only works for ordered lists. Example:

	<ol>
	<li value=9>This is now the ninth element.

<img>

align

This specifies where the image will be placed on the screen, and how text will react to it. (Will it wrap around it? Will it start at the bottom of the image?) The values you can use for this are: left, right, top, texttop, middle, absmiddle, baseline, bottom, or absbottom. With the left or the right values, text will wrap. Others do different things; experiment! Example:

	<img src=picture.gif align=left>

width

Specifies how wide the image should be. This speeds up the apperent loading speed of your document. You can either use an absolute size in pixels, or you can specify how big it should be relative to the width of the document. Exmaple:

	<img src=picture.gif width=90%>

height

Specifies the height of the image. It's exactly the same as width.

	<img src=picture.gif height=100>

border

This lets you ask for a specific border size. It will be the color of the text. This is useful if you have a loud background, and want to seperate your pictures visually. Also, when a picture is a hyperlink, HTML usually puts a blue border around it. Making the border equal to zero will eliminate that often unwanted blue border. Example:

	<img src=picture.gif border=0>

vspace 'n hspace

These tags let you specify how far away (in pixels) the text should stay from the image. Example:

	<img src=picture.gif vspace=5 hspace=7>

<br>

clear

This is for images that have text wrapping around them. You might want it to stop wrapping around a certain image. This is a frequent need. The values for this option are: all, left, right. If you specify left or right, the text will be moved down until it is clear on the left of the right side of the screen. All will make sure that it is clear on both sides. Example:

	<br clear=all>