HTML Guide

Hypertext markup language (html) is a bunch of tags that one adds to a document to make a page readable on the web. It's a relatively easy process to write HTML tags and link pages to pages, and pages to URL's, and pages to an e-mail address. Learning HTML is like learning another language. If you are adept at that, perhaps learning to build a web page will be a challenge that you welcome. If languages and computer technology intimidate you, then take things a step at a time.

A basic html page looks like this (without the space before and after the brackets:

< HTML >

< HEAD >

< TITLE >Web Page< /TITLE >

< /HEAD >

< Body >

< H1 >Heading One< /H1 >

< H2 >< strong >Heading Two< /strong >< /H2 >

< p >Paragraph information goes here.

< /p >

< HR >< strong >A Rule: Have fun.< /strong >< HR >

< /p >

< /Body >

< /HTML >

Click here to see what the web page for the above red html language looks like.

Click "View" and "Source" to see how I put this page together. If it looks confusing, take a look at this list of html tags. Here is a good site to look at for more information about html.

Make Your Own Web page

If you want to make a web page,

• You can highlight and copy and paste my red html tags above to a blank "Notepad" page (Click Start, Programs, Accessories, and Notepad). Delete the space after < and before > in the tags.
  
  
• Insert your information in the paragraph after < p > and before < /p >.
  
  
• Make your own headers after < h1 > before < /h1 >, etc.
  
  
• Play with it. Add lists if you like. (A list begins with < P >, < UL >, and < li >.) Click "View" and "Source" to see how I made the bulleted list here. Look at the list of tags from from above if you are confused.
  
  
• When you are finished, save the Notepad document as an html document. Before you do this, it would be a good idea to make a file folder on the "C:" drive entitled "Web" so you can save all of your web pages into one place. To make a file folder, go to Windows Explorer (Click Start, Programs, and Windows Explorer unless you have Windows XP. With Windows XP find Windows Explorer under Start, Programs, Accessories. In Windows Explorer, click on "C:" and then click "File," "New" and "Folder." Type the name of the folder and press "Enter". Then go back to the Notepad document (which hasn't been saved yet) and save it by clicking File and Save As. For the "File Name" you could type "practice.html"(without quotation marks). The File Type should be a "Text" document. Then click "Save". Go to Windows Explorer and find the file in the "Web" folder that you made for your web documents. Double-click on "Practice" and it will open and show you what you made. If it's not what you want, go back to the "Notepad" document and make changes and save (Click "File," "Save as," file name is "practice.html" and file type is "text". Keep going back to "Windows Explorer" to check the file until you have what you want. Then you can upload it to your web page by using ftp.

(If you plan to transfer the html document to a Web Server, then make folders on your "C" drive that mirrors the name on the server. That makes it easier to remember where things are and where they go when you transfer them to the web server via FTP).

Each web page begins with "< html >" and ends with "< /html >" (without quotation marks and spaces).

Pages begin with "< html >" and are followed by "< head >" and "< title >". < Head > ends with "< /head >" and "< title >" with " < /title >". Look at the bare bones html for a web page (in red) above or the source for this page again if you are confused. Or look at the basic tags list. Remember that everything from < html > to < /title> will not show up on your web page. This information identifies your page on the web. The head will show up if you print it out.

Everything from < body > to < /body > will show up on your web page when you access it on the Internet. In the body, there are headers and paragraphs and graphics. Headers follow "< body >" and begin with "< h1 >" for a large header or "< h2 >" for a smaller one, and so on. An "< h1 >" header ends with "< /h1 >" and an "< h2 >" ends with "< /h2 >". See html tags.

Paragraphs begin with "< p >" and end with "< /p >".

Bulleted lists begin with "< p >" then "< ul >" and end with "< /ul >" and < /p >.

Numbered lists begin with "< p >" then "< ol >" and end with "< /ol >" and < /p >".

Links

Once you learn the basic html tags, you can link one web page to another by the use of tags. You can link a page to a URL. You can link a page to a photo. You can link a page to your e-mail.

To link a page to another page in the same folder (the special folder you titled "Web" for your web page documents), type:

< A href="webpagename.html" >word to click goes here< /A >.

This links you to another page. The < A href > part and the < /A > work as an anchor. You need an open < A > and a closing < /A >. In between the < A href. . .> and the < /A> you need to type a word for the user to click on to go to the next page.

To link from this page to the list of basic html tags, I typed: < a href="basictags.html" >Basic html tags < /a >.

To link to an html document in another folder (I try to keep most of my documents in one folder to eliminate confusion but sometimes you need a document from another folder to be linked to the page. Another option is to just copy the html document into the "Web" folder you are working in and you won't have to do the following), type:

< A href="../webpagename.html">linking words< /A > (There are two dots and a slash before the html document name)>

To link to another url, type:

< A href="http://www.yahoo.com" >linking words< /A >.

To link to your e-mail, type:

< A href="mailto:youremail@address.com >E-mail< /A >

Keep playing with the above between your Notepad document and Windows Explorer until you get things to work the way you want.

TABLES

You can also build tables like the one here.. Click "View" and "Source" to see the "html" for tables. A table begins with < p > and < table > and < tr >< R1C1 > and < TD >. The row ends with < /td >. Row two will begin with < R2C1 > and < TD >. A new column will begin with < R1C2 > and < TD > and so on. When you have all of your rows and tables and are finished with the table, type < /TR> and < /TABLE > and
< /P >. Find more information about tables at: activejump.com.

FORMS

You can make forms to get feedback from your users like this one. Click "View" and "Source" in the linked form page to see how the html page in Notepad is typed. A form, like a table, begins with < form > and ends with < /form >. In between, it's more complicated. Try playing with it from my form above. Find information about forms at activejump.com..

FTP

To transfer your web pages to a file server, you will need an FTP file transfer program. You can download one from here.

For FTP Help, click here