When it comes to making web pages I am, in all modesty, self-taught. I never opened a book though I did use the vast resources on the internet to learn. I started out using various shareware versions of "no-brainer" type visual web-page authoring programs but in about a week I had moved on to using Windows notepad! Now I can write program an entire web-page in HTML and even write a couple of lines of javascript as well as set the parameters for a java applet. I believe that anyone, given the proper instruction, can learn to do the same. I offer here you the knowledge to make and edit your own web pages the notepad way. If you have the time and the patience you too can obtain a firm grasp of HTML and even pick up a little javascript. It's tricky at times but it's definitely not impossible. My GeoCities site, in its final version, was up in about three weeks (the first interface was finished in three days. In fact if you want you can still see it by viewing the oldindex.html file in this url directory; that's www.oocities.org/SiliconValley/Bay/4254/oldindex.html). Although for large text pages (like this one) nothing beats an easy-to-use authoring program, the "notepad method" that I offer will give you a better understanding of HTML as well as give you the ability to add java and javascript.
 
 

Are you ready to learn some HTML? Well first get your hands on one of those visual web-page authoring programs I mentioned. I recommend Netscape Composer (free with Netscape version 4.0), Adobe PageMill, or Microsoft Front Page. Actually any free shareware graphical web-page authoring program you can find on the internet will be sufficient. I'm assuming you're already running windows 95 or some other operating system with an easy to use interface and you are using some kind of basic (and I do mean basic) text writing program like notepad. Complex programs such as Word, Works, or Wordperfect probably add extra hidden formatting commands into typed documents. Typically, software that you had to buy separately, didn't come with the operating system, and saves files with file extensions other than .txt won't do. When you save your HTML pages, manually save them with the file extension .html or .htm (read the section below entitled "What is HTML?" for more details).  Make a new folder on your computer in which to store all your web-page files including any images or sounds you might want to use (files ending with .jpg or .gif are especially good image files for the internet; files ending with .mid or .au make for the best sound files). Save any web-pages (files ending with .html) you make in this folder only. When files are referred to in html, they are referred to both by where they are (their address) as well as by their full name (for example: Image.gif ,which is case sensitive). Putting everything in one folder makes it easier to keep track of where everything is. You might also want to save this HTML page (tutorial.html) and optionally its associated image file smlxplrs.gif. Do this by clicking on "file" on the menu bar at the top of your browser and then selecting "save file (as)". To save the .gif scroll down this page till you see pictures then, in windows 95, right click on the image and select "save (image) as". Save both of them to that new folder I told you to make. Ready? Here we go!

This tutorial will follow the following plan:

The Basics:
• What is HTML?
• The basic structure of a page
 
Working With the Basic Page Structure:
• The Head
• Adding a title
• "Meta" tags
• The Body
• Text, Colors, Paragraphs, and Lists
1. Formatting the page in the body
2. Oooh! Colors!
3. Text commands
4. Paragraph layout commands
5. Ordered and Unordered Lists
• Images, Links, Sounds, and Tables
1. Inserting images and stuff
2. Adding links to text and images
3. Targets on the same page
4. Working with sounds
5. Tables

Frames
• What are frames?
• Formatting a frames page
• Columns and Rows
• Setting a frame's properties
• targeting a specific frame with links
• Including a message for a browser that can't see frames
• Pages in the frames

Java Applets and Javascript Basics
• What is Java?
• Using notepad to embed Java Applets on a page
• Working with Java Applet Parameters
• Adding (gulp) Javascript with notepad
• Basic variables, buttons, and  pop-ups
• Write your own simple script
• Copy It!

Putting it all together: A final word on web page authoring

What is HTML?  
HTML (Hyper-text Markup Language), if you don't know by now, is the basic programming language or code for the "pages" you see on the internet. They are instructions which dictate the way a web page looks and sometimes sounds. If you click on "view" in the toolbar at the top of your browser and select view source or page source you will see it in all of its pristine glory. Go ahead try it! Learn how to do this now because once you have "mastered" it, you can copy examples of other people's HTMLs. This way you can analyze working real life examples. Hey, it's not cheating! This tutorial is geared to help you understand the different commands used in HTML but the best way to learn this stuff is to see the finished product. Once you're done with this page you'll at least be able to say, "Ahh, so that's what it means!"
 
A web-page is actually a file, just like any other file in your computer. The file extension of an HTML web page, the letters after the . (dot) in the name of a computer file, is either .htm or .html. For example this web-page that you are reading is called tutorial.html. I prefer to use .html because it is more widely used. In actuality HTML is just text (that's why you can write it using notepad). What seperates an HTML page from a regular text page is the use of special commands called "tags" inserted between the regular text. These embedded "secret instructions" tell your web browser to do the special things we've come to know and love. Throughout the first page of this tutorial, please make note that I will refer to these "tags" as commands because it's a more logical term for them (but if anyone else asks, call them tags, this is just between you and me....  heheheh). I will refer to them as "tags" only on the more advanced pages (page 3 mostly).
 
The interrelationship of your computer, browser, and HTML can be compared to that of a musician to his instrument to the sheet music he or she is reading from. The computer is the virtual extension of yourself. It runs the browser (such as netscape navigator/communicator or microsoft internet explorer) which reads the HTML source code. HTML source code can therefore be read by most computer operating system running a browser. It doesn't matter what platform you use, mac or pc. Again this is much like sheet music, you can play the notes on most instruments ("Mary Had a Little Lamb" plays both on a piano and a guitar, even a touch tone phone!). Also much the way the same song sounds a little different depending on the instrument, an HTML "page" looks a little different depending on which browser you're using. For example spacing and the size of fonts might look a little different, this is especially the case with "tables" (you'll read more about them later). Let's look at a simple example of a web page in its HTML form......
 
 
The basic structure of an HTML page looks something like this:
 
<html>
<head>
<title> YOUR PAGE TITLE HERE </title>
</head>
<body>
 
Text and stuff go here.
 
</body>
</html>
 
 
Simple looking enough isn't it? Actually the part where it says title can even be left out (note: always have the <html> and </html>, they signify that the file is a true HTML).
 
By the way, all the examples of  HTML in this tutorial are color coded. The text in blue is where you add your own stuff while the stuff in purple is an example of HTML coding or HTML commands.
 
If you look closely you'll notice that the commands (actually "tags" but this is the last time I'll 'em that) are indicated by a pair of < >. Commands also usually come in pairs and are not case sensitive.  In the example above the <title> command indicates where the title begins and </title> indicates where the title ends. The </ > is usually the indicator to end a given command.   I say usually because although the basic commands mentioned before require a corresponding end command, most other commands relating to font size, page layout, etc. work fine without them. Omitting an end command will just make everything after the initial command default to it. In other words if you tell the browser to make the words black with the HTML command <font color="0"> and not end it with </font>, the browser will just make all the words after the font command black because it would not know where to stop. Commands are also further customized using sub commands which specify certain parameters (extra tricks) for their corresponding command. They are included between the < and the >. An example of this is the color="0" sub command of the <font> command previously mentioned.
 
Cool huh! (from now on when I mention a command, presume it doesn't require an end command unless I specifically say it does).
 
Please note that when writing a page in HTML we often reference other files; graphics files, sound files, and other .html files and web pages on the internet. This means that the HTML will "request" or "ask" for a file somewhere on the internet. You'll read more about that in the section on links. All you need to know for now, however, is that such external files are referenced by two things: their address (or "path") and their name. This is much the same we we address letters right? We usually put our name and address on an envelope!
 
On the internet, an address looks like this: http://www.nyu.edu
And a filename looks just the way they do in our own computers: index.html or explorers.gif ...... etc.
The first is an .html file and the second one a .gif file (a type of image file). Note that these letters, gif and html, are types of file extensions, mentioned a few paragraphs back.

Now in order to reference a specific file on the internet you must include the full name and address so that the html code can retrieve it properly and display it on your browser. So if you want to specifically refer to a file called index.html at the internet address http://www.nyu.edu you must to refer to it as http://www.nyu.edu/index.html.
 
However, if the external file is at the same address (in the same  "folder") as the .html file which is trying to "retrieve" it, you can just refer to the file that the .html wants by its full name. This is because since they're at the same address they are, in "essence", right next to each other. It's kinda like when you passed notes to someone in grade school. It wasn't like writing a letter to someone in another country, all you put was the person's name on the note (Well at least I did).
What I mean is that if the .html file index.html at the address http://www.nyu.edu wants to request a file named picture.gif, also at http://www.nyu.edu, then index.html would refer to the other file simply by its name, picture.gif.
 
Please note that since Netscape and Internet Explorer operate slightly differently, some HTML commands on one browser won't necessarily do the exact same thing on the other.  Don't worry though, I'll try to specify commands which work pretty much the same way on both.

OK, now that you understand these basic concepts we can proceed.
 

The Head  
The head section is where most of the "background" action takes place, stuff not normally seen when viewing a page.  Among other things this is where you put the title of the page (look on the upper left corner of the browser window, see the name right before it says netscape or microsoft internet explorer?).  This is the easiest thing to do.  If you look at the basic page structure above all you have to do is replace "YOUR PAGE TITLE HERE" with, well, obviously your page title.
 
The head is also where you can add optional "meta tags".  "What's that?" you ask? Well, if  you've ever used a search engine such as Yahoo, Hotbot, or Webcrawler, the results which turn up sometimes have descriptions of the content of their referring page.  How did that get there? With meta tags of course. They're completely optional, like I said, but they make finding your page easier for the automated search engines.
 
To insert meta tags add these between the <head> and </head> commands:
 
<meta name="description" content="the description of your page goes here">
<meta name="keywords" content="keywords that you'd want a search engine to pick up on go here, for example: personal pages, links, pictures,">
 
 
 
so the html code ends up looking something like this:
 
<html>
<head>
<title>MY  Page"</title>
 
<meta name="description" content="the description of your page goes here">
<meta name="keywords" content="keywords that you'd want a search engine to pick up on go here, for example: personal pages, links, pictures,">
 
</head>
<body>
</body>
</html>
 
 
 
Again isn't that simple?  More stuff goes on in this area, but if your just starting out you don't have to worry about that yet. I'll explain more about the head in advanced sections. Let's continue.
 
 
 
The Body (ooh la la!)  
The body section of an html is where most of the action takes place.  This is the part which directly affects what you see and even hear on a web page. This includes everything from pictures and images to text. I actually recommend you use a web page authoring program to do textual and layout work on this part of the HTML. It's a lot easier that way and you can see the immediate results. This helps when deciding where to stick pictures and images and when modifying the specific properties (color, size, etc.) of words and paragraphs. Web page authoring programs (such as Netscape Composer or Microsoft Front Page) usually offer intuitive interfaces and make editing the body as easy as typing a word processor document with Microsoft Word or Wordperfect. Web page authoring programs automatically write all the HTML code for you. They offer a "no brainer" approach to creating a web page. However they have their limits when it comes to more complex things (which again you shouldn't worry about yet). Hey! But we're here to learn this stuff in a little more in depth way anyway! Right? So let's continue with the bulk of the lesson concerning the body.
 
 
Text, Colors, Paragraphs, and Lists
 
Formatting the Page in the Body
 
The first thing I like to do is set up the default characteristics of the page. These include the background color, the text color, the text color of a link
(active link and viewed link too), and even the background image (sound too on microsoft internet explorer but we'll talk about that later). This can be done most easily by adding the following sub commands to the <body> command so that it now looks like this:

<body background="yourpic.gif" text="#000000" bgcolor="#FFFFFF" link="#00CC00" vlink="#CC0000" alink="#006600">

What to put in the text in blue is up to you.  The background image file referred to by the background sub command (in this case a fictitious yourpic.gif) may be a jpg or a gif.  The rest of the commands define the text and links as follows:
 
text - the default text color in this case, on this page, it is black
 
bgcolor - the color of the page itself, in this case it is white. if you have an image for a background it will always cover this up.
 
link - defines the color of text linking to another web page
 
vlink - viewed link; defines the color of text linking to a page you've already visited or seen
 
alink - defines the color of text on a page which links to the page you're already looking at. in other words the link goes connects to itself.
 
 
 
Oooh! Colors!
 
The numbers in blue next to the sub commands in the <body> command  refer to corresponding "hexadecimal color values". The # sign is not really necessary. Hexadecimal color values are defined by six alphanumeric digits (except for black which can bedefined as just 0 or 000000). These alphanumeric digits are 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e, and f, ordered from "darkest" to "lightest". Any combination of six of these will result in a specific color; you can repeat a digit as often as you like (white for example is ffffff) and the letters are not case sensitive (f means the same as F). Don't worry about learning how to count in hexadecimal, just look up which colors go with what numbers in a book or from some online source. The netscape home page has some of them, most web page creation software can do it for you, and even my GeoCities sponsors have a handy dandy geo "color cube" which gives you a hexadecimal value when you click on its corresponding color (click on "color cube" to try it).  I have a few colors defined for you to try out right here:
 
blue = 0000FF
my dark blue = 333393
my favorite dark blue = 0C0430
another of my favorite blues = 180864
red = FF0000
yellow = FFFF00
green = 00FF00
white (like the background of this page) = FFFFFF
black = 000000 or just 0
a favorite gold color = 787443
orange = FF9900
A cool "lime-ish" color = CCFF99
 
 
That should be all you need to know for basic stuff.
 
 
 
Text Commands
 
Now that you have your page layout formatted it's time to type stuff! Actually typing is the easiest part.  Let's look at the basic page structure again, this time with all of the modifications we've learn to make so far:

<html>
<head>
<title> YOUR PAGE TITLE HERE </title>

<meta name="description" content="the description of your page goes here">
<meta name="keywords" content="keywords that you'd want a search engine to pick up on go here, for example: personal pages, links, pictures,">

</head>
<body background="yourpic.gif" text="#000000" bgcolor="#FFFFFF" link="#00CC00" vlink="#CC0000" alink="#006600">
 
Text and stuff go here.
 
</body>
</html>
 
 
Any text message you want to display goes in the body replacing where it says "text and stuff go here." However the text commands come in when you want to do stuff like making text bold, underlined, a different color, italicized, or a different size. They are also essential when adding spacing and quoting.

Here's a little secret about html. If you want to add more than one space between an object or between words like this            , you can't simply make spaces by hitting the space bar. HTML only allows you to skip one space between objects (text or image). I f you want two spaces or more the extra ones need to be indicated by the special code (called "escape characters") &nbsp; which represents only one additional space. Also since quotation marks often indicate more special codes if you want to make the browser display them you'll have to use &quot; at the beginning and end of the quote.  This means that in order to make your browser show this:
"Clothes make the man; naked people have little or no influence in society."

you would have to type this into the HTML in the body:
&quot;Clothes make the man; naked people have little or no influence in society.&quot;

Not that bad to learn right? Of course not!

Now for changing text properties like I mentioned before (size etc.), you will need to use more commands with the < >. Note that although you don't have to in all cases, you should use the following commands with their corresponding end commands. First of all it tells the browser when to stop making the text bold or underlined or whatever and it also helps you, the composer, keep track of  where stuff starts and ends.
The text commands for size and color always start with <font> and end with </font>. The characteristics of the text in between them is dictated by the sub commands as in this example stuck in the body:
<font size=1 color=0>your text here</font>
 
You don't have to put size and color together all the time. If you just want to change the text color just include the "color=" sub command replacing the blue colored part with the hexadecimal value for the color of your choice. If you didn't include the end command, </font>, all the text following the <font> command would be of size 1 and color value 0 (black) despite the defaults we set up earlier in the <body> command.

Now for making text bold, underlined, or italicized, you must include use the command pairs (< > and </ >).
If you want to made a string of text bold you'd use the command:
<b>your text here</b>
 
For italicized words:
<i>your text here</i>

For underlining:
<u>your text here</u>

You can even change font size without using the font command with:
<h1>your text here</h1>
(in this example the value next to the h range from 1, the largest, to 6, the smallest)

Ok. Now that you have the know-how to work with words let's try your hand at formatting paragraphs.
 
 
 
Paragraph Layout Commands
 
Want to center a title at the top of a page? Indent? Force a line of text to continue to the next line? Well paragraph layout commands are just the thing! These commands function like the text commands used for underlining and italicizing. It's a good idea to use the end commands since they format entire paragraphs. You'll especially need them when you want to format two or more different paragraphs in different ways.  For example you'd most likely center a paragraph of your favorite poetry but write an explanatory paragraph about it in regular format. As long as you put the proper paragraph layout command at the beginning and end of each paragraph you'll be fine.
 
Ok. Now that that's settled, the paragraph layout commands you'll use most often are;
The centering command:
<center>text here</center>
(must use the </center> end command)
which looks like this:

and the skip to the next line (or new paragraph) this command is used most often:
<p>new paragraph here
(you really don't need the end command here as long as you mark each new paragraph with the <p>)
<br> also skips to the next line but does not indicate a new paragraph.
 
The other layout commands include;
align right:
<p align=right>your paragraph here</p>
(you must use the </p> end command with the align right command to stop it from formatting the whole page!)
which looks like this:
your paragraph here

to indent once:
<blockquote>your paragraph here</blockquote>
(you must use the </blockquote> end command with this command to stop it from formatting the whole page!)

to indent twice and more keep adding the <blockquote> and </blockquote> pairs as in:
<blockquote><blockquote>your paragraph here</blockquote></blockquote>
This paragraph that you're viewing is indented twice.
 
Another way to indent (this one makes smaller indentations) is to use <ul> and </ul> instead of </blockquote> and </blockquote>
 
When you want to leave an empty space or two between two paragraphs or lines of text you must use the <p> with &nbsp; which holds the empty space. Otherwise a blank line won't appear. The structure should look something like this in the body:
 
<p> your 1st paragraph here
<p>&nbsp;
<p> your 2nd paragraph here
 
 
 
Hey now you know the basics of writing a text page in HTML! Good job! Now let's review a bit. The following HTML code incorporates most of the commands we've gone over so far. Let's see if you can follow it:
 
 
<html>
   <head>
          <title> MY PAGE</title>

          <meta name="description" content="my personal home page">
          <meta name="keywords" content="personal pages, links, pictures,">

          </head>
          <body background="mypic.gif" text="3333FF" bgcolor="FFFFFF" link="00CC00" vlink="CC0000" alink="006600">
   <p>&nbsp;
          <p>
          <center><b><h2>This is my first web page written in HTML</h2></b></center>
          <p>&nbsp;
          <p>
          <blockquote><font size=3 color=FF0000><u>Paragraph One</u></font>
 
          <p><blockquote>Wow! I'm pretty good at this stuff! Anyone can learn to write web pages the notepad way with <i>Paolo's web page tutorial</i>!
          </blockquote></blockquote>

 
          </body>
          </html>
 
 
 
The above page of  HTML ends up looking like this on your browser:
 
 

Paragraph One

Wow! I'm pretty good at this stuff! Anyone can learn to write web pages the notepad way with Paolo's web page tutorial!
 
 
 
 
Not bad huh? Hopefully you got the gist of it. It's perfectly O.K. if you had to look back to any of the previous sections to review the commands and what they do. You're not supposed to memorize all of them.
 
 
 
Ordered and Unordered Lists
 
These are numbered and unordered lists:

An example of an unordered list:
 
Stuff I Need to Do:

• Laundry
• Ironing
• Groceries

Which in HTML would look like:

<p>Stuff I Need to Do
<ul>
<li>Laundry
<li>Ironing
<li>Groceries
</ul>

 
The u an l in <ul> stand for unordered list and li just stands for list. When using <ul> always make sure to end it with its matching end command  </ul>. You can also compound unordered lists like so (note: make sure you match each <ul> with its </ul>):
 
<p>Stuff I Need to Do
<ul>
<li>Laundry

<ul>
<li>wash
<li>dry
</ul>

<li>Ironing

<ul>
<li>starch
<li>fold
</ul>

</ul>
 
which turns out like this:
 
Stuff I Need to Do:

• Laundry
• wash
• dry
• Ironing
• starch
• fold

 
This is a ordered list:
 
Members of the Blue Team:

1. Bobby
2. Joey
3. Paolo

 
Which looks like this in HTML:

<p>Members of the Blue Team:
<ol>
<li>Bobby
<li>Joey>
<li>Paolo
</ol>
 
As you can see the only differerence between the command for an unordered list and a ordered list is the use of <ol>, which stands for ordered list, rather than <ul>. Ordered lists can be compounded like unordered lists, but unlike unordered lists you can specify how the list is ordered with the type= sub command. For example if  you wanted the list to be written with roman numerals you would change <li> to <li type=i>, for lower case numerals or <li type=I> for upper case numerals. If you had wanted letters you would type <li type=a> for lower case and <li type==A> for capital letters. For example to redo the ordered list examples using capital letters the HTML would look like this:
 
<p>Members of the Blue Team:
<ol>
<li type=A>Bobby
<li type=A>Joey
<li type=A>Paolo
</ol>

(note you never use type=B or type=C etc., the HTML automatically changes the letters)
 
 
Images, Links, Sounds, and Tables
 
Inserting Images and Stuff
 
Well, now that we've learned how to add words to a web page how about some pretty pictures? It's really quite simple. The only tough part is deciding where to stick them and how to arrange them. The main command inserted into the body section of the HTML where-ever you want the image to appear is:
 
<img src="yourpic.gif">

As I mentioned before in the section on formatting the page in the body, the image can be in any format but gif and jpg are the most widely used on the internet cause of their relatively smaller sizes (for quicker downloads). The command is simple enough to remember. Just think of img as short for image and src as short for source. The sub commands control the image's positioning relative to the text or images next to it. These are used in this way:
 
<img src="yourpic.gif" height=93 width=125 align=bottom hspace=0 vspace=0 >
 
 
The hspace and vspace sub commands, if given values greater than 0, create an invisible border around the picture so that text or other images will stay a certain distance away from it. Kinda like indenting for pictures. The height, width, align, hspace, and vspace sub commands can be left out if you don't want to specify them, however a page actually loads faster if you specify how big a picture is with the height and width sub commands. This stems from the fact that since images usually take the longest to download text appears first on a web page. Therefore if you tell the browser beforehand how big it should anticipate the incoming image to be, it will layout the text to accommodate the picture before the picture actually downloads. Look at these examples of  image alignment and invisible borders:
 
align sub command set to "texttop"
 
align sub command set to "abscenter"
 
align sub command set to "center"
 
align sub command left out (default text alignment)
 
text aligned "absbottom"
 
align sub command set to "bottom"
 
align sub command set to "middle"
 
align sub command set to "top"
 

Just play around till the picture is where you want it. A little too much at once? Well let's see what a simple page of HTML incorporating the image I've been using looks like.
First let's see what the HTML code looks like:
 
<html>
   <head>
          <title> MY PAGE</title>
          </head>
          <body background="mypic.gif" text="3333FF" bgcolor="FFFFFF" link="00CC00" vlink="CC0000" alink="006600">
   <p>&nbsp;
          <p>
          <center><b><font size=+3>This is my first web page written in HTML with picture!</font></b></center>
          <p>&nbsp;
          <p><blockquote>
          <img src="smlxplrs.gif" align=left height=93 width=125 hspace=10 vspace=5><font size=+1>This image is aligned left and its height is set to 93 and width set to 125, it's natural height and width. You don't have to define its height and width but the web page will load faster if you do. If you want to display an image but have no idea what its natural width and height are, then its best not to define them. To find out what an image's natural height and width are use a graphics program to find its resolution or use a web page authoring program to layout the image. It should set the natural dimensions automatically. If you just want to stick a picture in between a couple of words like so: <img src="smlxplrs.gif" height=93 width=125>..... you can do that too!
          <p>&nbsp;
           <p>&nbsp;
           <p>This image is just centered in the middle of the page using a paragraph layout command:</font>
           <p>&nbsp;
           <p><center><img src="smlxplrs.gif" height=93 width=125></center>
          </body>
</html>
 
 
It should come out like this:

This image is aligned left and its height is set to 93 and width set to 125, it's natural height and width. You don't have to define its height and width but the web page will load faster if you do. If you want to display an image but have no idea what its natural width and height are, then its best not to define them. To find out what an image's natural height and width are use a graphics program to find its resolution or use a web page authoring program to layout the image. It should set the natural dimensions automatically. If you just want to stick a picture in between a couple of words like so: ..... you can do that too!

This image is just centered in the middle of the page using a paragraph layout command:
 

How about one more trick? OK, if you want a little description or message to come up when someone puts their mouse courser over an image just add the subcommand alt="your text here" in the img command like this:
 
<img src="yourpic.gif" alt="your text here" height=93 width=125>
 
Here's a real life example, in this case "your text here" has been replaced by "this is paolo's picture"; go ahead put your mouse cursor on top of the picture:

 
All coming together? I hope so! Cause now you've learned almost everything you need to know about creating a web page in HTML complete with graphics and text.
 
 
 
Adding Links to Text and Images
 
Well this is it one of the final lessons in the basic section of this tutorial. I'm sure you know what a link is. It's the thing you click on that sends you from one web page to another or retrieves a file of any type. It's actually quite simple. As we all know by now, in order to write text all we have to do is type text normally (that is, if we don't want to format the text in any special way relating to size, color, bold, etc.). Accordingly, in order to insert an image we add the command <img src="yourpic.gif"> (of course you would use the name of the desired image and add the desired sub commands to adjust the image properties, etc.). Keeping these facts in mind, all you have to do to turn an image or a string of words (or just one word) into a link is to add the command <a href="http://your desired link here"> before the image command or text and add the end command </a> at the end of the image command or text.  You'd replace the stuff in blue with the desired file you want to connect to. This "linked file" can either be an html page on the internet (as in the example) or a music or image file. In other words in order to turn a word like LINK into an actual link which connects to, for example, the official web page of Motown Records at www.motown.com, you would first start off with the word LINK like so:
 
LINK
 
and then add the command pair so it becomes:
 
<a href="http://www.motown.com">LINK</a>
 
Bingo! If you click on the word LINK appearing on your web page you'll be taken to the Motown Records web site!
In order to do link an image called say "records.gif" to the same place you'd do the same thing. First you'd start with the command to insert an image:
 
<img src="records.gif">
  (let's not include any subcommands to format the image in this example)
 
and then add the command pair so it becomes:
 
<a href="http://www.motown.com"><img src="records.gif"></a>
 
 
It's pretty easy. If you had wanted to link to a particular file at www.motown.com you'd have to name it specifically. For example if you wanted to link to a picture called Elvis.gif at www.motown.com you'd have to write the whole thing between the quotation marks as:
"http://www.motown.com/Elvis.gif "
 
However if the file was in the same place as the html page that the link is on, you'd just name the file without the http://...... etc.
In other words, if there existed an html page called index.html at www.motown.com (so the page's address would be http://www.motown.com/index.html) with a link to that Elvis.gif file, also at www.motown.com, it would be referred to between the quotation marks as: "Elvis.gif "
 
Whenever you want to make something a link just add the pair of commands like in the example above.  You can link to any type of file you want, an image file, another web page (html file), a sound file; anything that can be downloaded can be linked to. Whatever is enclosed between these pair of commands becomes a link. It doesn't matter whether it's a word or a phrase; you could use one word such as LINK or a whole phrase like A Link To Motown Records. If you want to format text within the link, for example change its size, you just include the <font size=1> and </font> along with the text and put the link command pair around the whole thing so that it would look like:
 
<a href="http://www.motown.com"><font size=1>A Link to Motown Records</font></a>
 

 
One last trick about links, if you set the href= like this:
href="mailto:pmb200@is5.nyu.edu"
 
clicking on the link will send e-mail! Just change the part in blue to whatever e-mail address you want.

 
(note: you can't change a linked word's color, it will always be determined by the default color you set for links in the <body> command; a link will always be underlined as well, unless you perform a complicated trick using javascript)
 
 
 
Targets on the Same Page
 
Sometimes on especially long documents like this tutorial, you'd want a way to link to a specific part of a page (instead of an entirely new page). For this task we use "targets". The first step is to set up a link as in the previous examples above; let's say we want to link to a "target" which I have named "the basics" on this page:
 
we start off as before with the text we want to turn into a link:
LINK to The Basics
 
Now, this page that you are reading is called "tutorial.html." I've already set up the target called "the basics" beforehand and in order to link to that spot on this page we type:
<a href="tutorial.html#the basics">LINK to The Basics</a>
 
 
In order set up a target as I did, you would add the following command line anywhere you wanted in the body of the HTML code:
 
<a name="the basics"></a>
 (in this instance I stuck the command line next to the phrase The Basics near the beginning of this tutorial)
 
Now every time you clicked on the link: "LINK to The Basics" you would be taken to the part of the page where the target appears in the source code.
 
Now since the target (the basics) is on the same page as the link (Link to the Basics), you don't have to include the name of the page (tutorial.html) in the command line; <a href="#the basics">LINK to The Basics</a> will suffice as a link to the target.
You'd only need to include the page name if the target was on another page in the same folder. Consequently, if the target was on a different page (anotherpage.html for example) at a different internet address (http://www.nyu.edu for example) then you'd have to "request" the file by its full name and address. That is, the full command line would be:
<a href="http://www.nyu.edu for example/anotherpage.html#the basics">LINK to The Basics</a>
 
A little confusing? Actually it is, but here is a working example of a link to a target. Click on the the link below to jump to the target called "the basics" on this page:
LINK to The Basics
 
As you might think it can come in handy especially if you don't want to make a lot of different pages for each section of your document.
 
 
 
Working with Sounds
 
Although adding sounds is rather simple, I left this section towards the end of this page because not all computers hooked up to the internet have speakers, especially ones in libraries or on-college campus "public" server stations. There are several ways to add sound to a page. The simplest way is to have it playing in the background when you first load up a web-page. The command to do this can vary from one browser to another. For example, in order to add background sound on Netscape browsers, all you have to do is add the command line:
<embed src="yourmusicfile.mid" hidden=true autostart=true> in the head section of the the HTML.
 
In order to add background sound on Internet Explorer you would add the sub command bgsound="yourmusicfile.mid" into the <body> command
so it would look something like this:
<body bgsound="yourmusicfile.mid" background="yourpic.gif" text="#000000" bgcolor="#FFFFFF" link="#00CC00" vlink="#CC0000" alink="#006600">
 
 
Another way is to create a link to your desired music file. When you click on the link, the music file will be downloaded and played. You would do this simply by creating a link, let's call it "Music", and connecting it to a music file called "erie.mid" (which we'll pretend is at the same address).
As we've done several times we first set the text to be linked:
Music
 
Then add the command pairs inserting "erie.mid" where appropriate:
<a href="erie.mid">Music</a>
 
Here's a working link to that music file; click on it to hopefully hear some music:
Music
 
 
 
Tables
 
I left this section last because it incorporates most of the stuff preceding it. What is a table? Well here's an example:
 

An Example of a Table with Three Rows and Two Columns

YOUR TEXT HERE!	or here!
you can use an image as a background......	...or just a color.
This particular part of the table (this rectangle) is called a "cell". Cells lined up horizontally to each other are called "rows".	You can even stick an image in a cell like this!

Pretty isn't it? Ok maybe mine is a little rough, but I just wanted to show you what one looks like. Well in order to make a table we use the <table> and </table> command pair. The table is defined by rows and then cells within the row (each rectangle is a cell). A row is defined by the row defining command pair <tr> and </tr> (tr stands for table row). They are stuck between the <table>/</table> command pair. Likewise to define cells within rows, we use the <td>/</td> command pair stuck between the row command pair. Here's a simple example of a basic table, like the one above, without the frills:
 
<table border=5 cellspacing=5 cellpadding=5 height="30%" width="70">
<tr>
<td height=15%>
<td height=15%>
</tr>
 
<tr>
<td height=35%>
<td height=35%>
</tr>
 
<tr>
<td height=50%>
<td height=50%>
</tr>
</table>

which looks like this:
   

Not much to look at yet (cause there's nothing in them!). You can format the the entire table by inserting subcommands within the <table> command much the way you format a page with the <body> command. Here's an example of the <table> command with all of its sub commands used and their explanations:
 
<table border=5 cellspacing=5 cellpadding=5 cols=2 width="70%" height="30%" background="smlxplrs.gif" bgcolor=000000>
 
width and height - they specify the size of the table
border - creates a border around the entire table giving it "3D" look
cellspacing - creates a space between each cell
cellpadding - creates a "pushed in" look on each cell
bgcolor - specifies a background color for the table
background - specifies an image to be displayed in the background of the entitre table
cols - specifies the number of columns but is not really necessary if you specify each cell in the rows with the <td> and </td>
 
 
You can also format an entire row using the <tr> commands like so:
 
<tr align=center valign=bottom>

The align sub command works just like the paragraph layout command or image layout command. The valign on the other hand stands for vertical alignment and centers what's in the table in vertical direction. Both their values can be set to either top, bottom, or center; the align value can be also set to right or left (the default).
 
 
Finally, on the most specific level you can define the properties of each cell by using the <td> command. You can actually use all of the previously mentioned table sub commands. In order to insert stuff into a cell, just type the as you would if you were writing stuff into the body of an html page. You can format text using the text and paragraph layout commands and setup images using the <img> command and its sub commands. Defining each cell is the only way to make sure the table appears pretty much the same way on internet explorer and netscape.
 
You may also add a caption for the table by inserting the <caption>/</caption> command pair anywhere between the <table>/</table> command pair.
The only sub command it has is "align" which can be set to either top or bottom. This controls where the caption shows up (above or below the table).
 
 
Now that you know the commands for tables here's the HTML code for that first table I showed you with all the images, text and background:
 
<table border=5 cellspacing=5 cellpadding=5 cols=2 width="70%" height="30%" >
<caption><B>An Example of a Table with Three Rows and Two Columns</B></caption>

<TR>
<TD width="50%" height="15%" bgcolor="#000000"><font color="#FFFF00">YOUR
TEXT HERE!</font></TD>

<TD height="15%" background="smlxplrs.gif">
<center><font color="#FFFF00">or here!</font></center>
</TD>
</TR>

<TR>
<TD width="100%" height="35%" background="smlxplrs.gif"><font color="#FFFF00">you
can use an image as a background......</font></TD>

<TD width="50%" height="35%" bgcolor="#000000"><font color="#FFFF00">...or
just a color.</font></TD>
</TR>

<TR>
<TD bgcolor="#000000"><font color="#FFFF00">This particular part of the
table (this rectangle) is called a "cell". Cells lined up horizontally
to each other are called "rows".</font></TD>

<TD height="50%" bgcolor="#000000"><img src="smlxplrs.gif" height=93 width=125 align=left><font color="#FFFF00">&nbsp;</font>&nbsp;
<BR><font color="#FFFF00">You can even stick an image in a cell like this!</font></TD>
</TR>
</table>
 
 
A little complex, but comprehensible I hope. If all else fails remember that a cell will automatically readjust its size to accomodate whatever's in it. You can even layout an entire page as a table and set up columns to layout your page.

Congratulations! You have made it to the end of the first page of this tutorial! Now you have the basic knowledge to write your own web pages purely in HTML. Give yourself a good pat on the back, but not for too long 'cause pages 2 and 3 are waiting! Yes, there's actually more stuff you can learn in order to give your pages even more umph and pazazz! Impress your friends and the ladies with even more cool web page skills. Before proceeding, make sure you are familiar with the basic structure of an HTML page and understand how to maninpulate commands with their subcommands. Are you ready for more?