Other: HTML: The Basics

Note that these are just the very basic ideas to start HTML. While I may add more to this section, I would recommend buying a book on HTML to learn more complex features of HTML and to use as a reference. The one that I used to learn is Laura Lemay's Teach Yourself Web Publishing with HTML in 14 Days. I think it is a good reference book, and I would definitely recommend it to anyone interested in learning HTML. However, the book is pretty expensive, so you may want to look around to find a cheaper alternative.

You can write an HTML document in Notepad, Wordpad, or basically anywhere. I wrote all my HTML in Notepad, which is on any computer with Windows. When you type a document in Notepad, it will automatically save it as a text file (.txt), so whenever you save an HTML file, you need to remember to replace the '.txt' with a '.htm' or '.html' so the browser will recognize it as an HTML file. To see your webpage, open your internet browser (Internet explorer, Netscape, etc.) and open that file (To do this, click the 'File' menu, choose 'Open,' (Internet Explorer) or 'Open Page' (Netscape). Then, choose 'Browse' (Explorer) or 'Choose File' (Netscape), and open the html file that you have saved.) Each time you update the html file, you will need to reload the page to see the changes by pressing 'Refresh' (Explorer) or 'Reload' (Netscape). You do not need to actually connect to the internet to view your page since it is stored in your computer - you just need to open the browser.

Be careful when designing websites, because it may look different on different browsers. Internet Explorer and Netscape are the two most common, so you may want to at least make sure your page looks the way you want it to on both of those.

Any HTML documents starts with an HTML tag, a header tag, and a body tag. The layout of the page will look something like this:

<HTML>
<HEAD><TITLE>My Website</TITLE></HEAD>
<BODY>

....Page content....

</BODY>
</HTML>

All tags are contained in these brackets: <>. Most tags also need a closing tag, which has a / directly after the first bracket (ex: </HEAD>) The tags do not need to be typed in capital letters; I just do that so I can distinguish tags from the rest of the content easier. The <TITLE> tag in my example defines the title of the page, which is usually displayed at the top of the browser. The title is everything between the opening tag <TITLE> and the closing tag </TITLE>.

In the body of the page is where you put your actual content. There are several tags that can be included in the body. Here are some of the basic, most used tags:

<H1>This is a header</H1>

- Headers are bigger than normal text and print in bold on the browsers. They are usually used as titles. There are several different sizes of headers. <H1> is the biggest, <H2> is the next biggest, and they become progressively smaller as the number increases. <H6> is the smallest header available.

This is an H1 Heading

This is an H2 Heading

This is an H3 Heading

This is an H4 Heading

This is an H5 Heading

This is an H6 Heading

<P>
This is a paragraph tag. You put all of your text between the opening and closing paragraph tags.
</P>

NOTE: The closing </P> is optional.

- In the paragraph tag, excess spaces, tabs, and other non-character 'white space' is ignored.

- To move to a new line in the text, type: <BR>

- If you want the text to appear exactly as you write it, including spaces and new lines, use the preset <PRE> </PRE> tags. Anything you write between these tags will be formatted that way.

Example of preset text:

<PRE>
   _____      ______________   
   |   |      |             |
 __|___|____  | Look at me! |
  /     \     | I'm preset! |
 C(x)(x) D   /______________|
 |  L    |   
  \_==__/         
    | |       

</PRE>

There are several ways to edit the text in the paragraphs. You can italicize it, emphasize it, make it bold, etc. Here are a few:

<B> This text is bold </B>

<I> This text is itallic </I>

<U> This text is underlined </U>

<TT> This text is in a typewriter font </TT>

<EM> This text is emphasized - usually itallic </EM>

<STRONG> This text is strongly emphasized (Usually bold) </STRONG>

<CODE> This is used for computer code samples and usually appears in Courier font </CODE>

There are a few others, but they are not used as often.

Certain characters cannot be typed directly into the page as text, because the browser may recognize it as a tag or command. These characters are <, >, &, and ". To use these characters, you must type a special code.

< = <
> = >
& = &
" = "

<UL>This is an unordered list
<LI>One bullet
<LI>Another bullet
<LI>Yet another bullet
</UL>

Example:

One bullet
Another bullet
Yet another bullet

- Unordered lists are used when the items you are listing do not need to appear in a particular order. The list items are displayed as bullets. The <UL> tag needs a closing tag after the list, but the individual bullets ("List Items" - <LI>) do not need to be closed.

<OL>This is an ordered list
<LI>First item
<LI>Second item
<LI>Third item
<LI>Fourth item
<LI>You get the idea...
</OL>

Example:

First item
Second item
Third item
Fourth item
You get the idea...

- An ordered list is similar to the unordered list, except that instead of bullets, the list items are numbered.

<HR>

- "Horizontal Rule" This makes a horizontal line on the page.

<BR>

- This adds a line break to the page. If you are typing a lot of text and you would like to double space the paragraphs, you would type <BR><BR> after the first paragraph so the next thing would start two lines down.

- Comment tags are used to add notes to yourself or others. If I have a large page with several sections, sometimes I use a comment to separate the sections.

Example:

There are also extension attributes to certain tags. These attributes are place inside the tags and provide a more specified task.

ex. <BODY BGCOLOR=blue>

- In this example, BGCOLOR is an attribute, which makes the background color blue. The body tag has several other attributes, as well. Some of them are:

LINK=blue - This makes it so that all the links are blue originally.

VLINK=red - This makes it so that all the links that have been clicked on already are red.

ALINK=green - This makes it so that all the links that have been clicked on but don't work are green.

BACKGROUND="picture.gif" - This tiles a picture as the background. Replace 'picture.gif' with the name of the picture you want to use.

<HR> has an extension, too. You can modify how far across the page the line reaches by defining the width.

Typing <HR WIDTH=50> will make a line that spans 50 pixels.

Example:

Typing <HR WIDTH=50%> will make a line that spans 50% of the available space.

Example:

You can also adjust the size of the line by using the size attribute.

Examples:

Type: <HR WIDTH=100 SIZE=1> to get this:

Type: <HR WIDTH=100 SIZE=10> to get this:

Type: <HR WIDTH=100 SIZE=20> to get this:

Type: <HR WIDTH=100 SIZE=30> to get this:

To add a picture:

<IMG SRC="picture.gif" WIDTH=30 HEIGHT=50 BORDER=0 ALT="Picture">

- Replace 'picture.gif' with the filename of the picture that you want to use. The width and height are optional. They are measured in pixels. It is a good idea to define the width and heights of the pictures, because it will make it so the browser can arrange the page before the pictures have loaded, making the page appear to load much faster. The border attribute is also optional. If the picture is serving as a link, it will automatically be bordered by a box. To get rid of this border, type BORDER=0. The ALT is an optional alternate description of the picture. If a browser does not support pictures, this text will be displayed. This text will also be displayed before the pictures have completely loaded and when you hold the mouse over the picture for a long enough time. It is a good idea to include alternates to all the pictures you use.

To add a link:

<A HREF="nextpage.htm"> Click Here! </A>

- Anything between the <A> tags will serve as the link. HREF is an attribute to the <A> tag, and it defines where the link will direct you. replace 'nextpage.htm' with the filename of the html file that you want to be linked from there. You can use pictures as links.

HTML Example:

<A HREF="nextpage.htm"><IMG SRC="picture.gif" BORDER=0></A>

There is much more HTML than this. These are just some basic ideas to get you started. Once again, I recommend Laura Lemay's Teach Yourself Web Publishing with HTML in 14 Days. If you have any questions, just ask, and I'll see if I can help.

I can't help much with telling how to actually post a site on the internet, but there are several places where you can find places that will host a website for free on the internet. If you search around, I'm sure you'll be able to find one. To start, you might want to try Geocities or Homestead.

Other

Learn HTML:

- The Basics