Once you can access your account, you need to make a new directory called "public_html". You can do this by typing:

mkdir public_html

After this, change your directory to this new directory called "public_html".

cd public_html

If you want to, you can make other directories, one for all the web pages that you make, and one for all of the graphics that you have. Follow the same steps as above to do this.

Next, you need to think of a filename for your page (this is not a title, but the name of the URL). A common filename for a main web page, is "index". Once you've decided on this, add ".html" to the end of it. You can then edit it using a Unix editor like pico

pico index.html

Of course, use your page's filename, instead of this one. Once you've gotten started, exit your page. You can do this by pressing control-x. Then you need to type:

chmod index.html

Use the filename of your page with this comand. You only need to do this the very first time that you leave your web page. This command will make sure that nobody else can delete your page. You will need to do this to any other pages you add in the future. Then, look at your page on the WWW. Lets say that your server is "cs.wpi.com" , your username is "rahulb", and the name of your page is "index.html". The URL would normally be:

http://cs.wpi.com/~rahulb/Content.html

However, you will need to contact your ISP for your URL.

If you have made separate directories for pages and graphics, then you need to include that in the URL also. Lets say that you made a directory for all of your web pages, called "Pages". The new URL would be: https://rahulbhattacharya.tripod.com/Pages/index.html

Title

The first thing to put on your web page, is a title. The title is what will show up in the very top of the window. Let's say that your title is going to be "John Doe's Web Page", you would type:

<title>John Doe's Web Page</title>

In HTML, every command is surrounded by <'s, and >'s. And in most commands, you need to tell the web browser when to end this command. You do this by putting a back slash (/) in front of the ending command, as in above. Since HTML isn't case sensitive, <title> is the same as <TITLE>, which is the same as <TiTLe>. Next, you need to decide what you want to put on your page. Text, links, graphics, and text fields, are just a few ideas. Follow the table of contents above to decide how, and what to put on your page.

Text

Headings

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are displayed in larger, or smaller fonts, and usually bolder. If you wanted to use the word "Hello" as your heading, this is what you would type for each heading, and what the outcome is:

<h1>Hello</h1>

Hello

<h2>Hello</h2>

Hello

<h3>Hello</h3>

Hello

etc.

Paragraphs

Whenever you have more than a sentence of writing, you should have paragraphs. To Make a paragraph of "This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com", type:

<P>This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com</P>

The outcome is:

This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com

Lists

There are two types of lists that you can make in HTML, dotted, and numbered. To make a dotted list of: red, orange, green, blue, purple, black, and brown, type:

<UL>
<LI> red
<LI> orange
<LI> green
<LI> blue
<LI> purple
<LI> black
<LI> brown
</UL>

The result is:

• red
• orange
• green
• blue
• purple
• black
• brown

To make a numbered list of: red, orange, green, blue, purple, black, and brown, type:

<OL>
<LI> red
<LI> orange
<LI> green
<LI> blue
<LI> purple
<LI> black
<LI> brown
</OL>

The result looks like:

1. red
2. orange
3. green
4. blue
5. purple
6. black
7. brown

Forced Line Breaks

There are many cases in which you want to end typing on one line, and start on the next. To do this, you can use a simple HTML command. This is one of the few commands that you don't have to put an ending command on. Let's say that you wanted to say "Hello, how are you?", but with each word on a separate line. All you have to type is:

Hello,<BR>how<BR>are<BR>you?

The outcome is:

Hello,
how
are
you?

Horizontal Rules

Every now and then, you might want to have a horizontal rule, or line in your page. Horizontal rules can be many different sizes and lengths. You can also have the line be solid black, by typing NOSHADE. Here are several examples of sizes and widths, and what the outcome is:

<HR SIZE=1 WIDTH=100%>

Character Formatting

You may want to format some of your text differently than others using text styles. There are several types of styles of text that you can use: bold, italic, underline, strikeout, ^superscript, _subscript, teletype, and blinking text are examples. To do these styles, surround your text with the following commands:

<b>, </b> for bold

<i>, </i> for italic

<u>, </u> for underlined

<strike>, <strike> for strikeout

^, for ^superscript

_, for _subscript

<tt>, </tt> for teletype

<blink>, </blink> for blinking text (very annoying)

You can also mix styles together like this!

Linking

URLs

When you make a link, you are connecting a piece of text or even a graphic to a different web page. When a user clicks on this link, it will take him to another web page, or possibly a certain section of a web page. Let's say that you wanted to make a link from your web page, to this page. The URL of this page is:
https://rahulbhattacharya.tripod.com/Content.html
To do this, you would type:

<A HREF="https://rahulbhattacharya.tripod.com/Content.html">The linkable text goes here</A>

The result would be:

The linkable text goes heree

Links to Specific Sections

Sometimes, you might want to have a link that will take you further down a page, or to a certain section of another page. An example of this is the index to this web page. You click on the colored text, and it takes you to that section. To do this, you need to do two things. The first, is to make the link, and the second, is to make where the link will lead to. NOTE: You cannot make links to specific sections within a different document unless either you have write permission to the coded source of that document or that document already contains in-document named links.
1) To make the actual link, think of a name for the certain spot. Let's say you are going to call it "spot". If this certain spot is on the same page that the link is, you would type:

<A HREF="#spot">Colored Text

Otherwise, you would add "#spot" to the end of the URL.
2) Now, you need to make where the link will take you. Go to the spot where you want the link to take you, and type:

<A NAME = "spot">

Mailto Links

Most people like to have a link on their web page that automatically sends e-mail to an address. If you want to do this, and your name is Rahul, and your e-mail address is a@a.com, type:

<A HREF="mailto:a@a.com">Rahul</a>

Here is the result of typing this (click on it to send me e-mail).

Rahul

Graphics

Putting Images On A Page

There are mainly two kinds of ways to have graphics on your web page. The first, is to use a graphic that is on another web page somewhere on the web. The second, is to upload the graphic to your own account. Personally, I prefer to use the upload method. If you are using the other way, there is always a chance that the person who made that page will decide to delete that graphic. Then a symbol with either a square and a cross or a torn page (Depending on what browser you use) will appear where the graphic was supposed to be.

To display a graphic on some one else's page, you need to find the URL. To do this, I recommend that you have Netscape Navigator. Right click or click and hold down on the graphic, until a menu comes up. Choose "View this Image". Then , copy the URL that appears at the top of the screen, in the "location" box. Let's say that the URL was: https://rahulbhattacharya.tripod.com/ball.gif You would type:

<IMG SRC="https://rahulbhattacharya.tripod.com/ball.gif">

The result is:

To display a graphic that is in your account, all you have to do is type in the filename. If you didn't make separate directories for graphics and pages, then you just need to type the graphic's name.(i.e. <IMG SRC="ball.gif">

Alternate Text for Images

Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a command to tell readers what they are missing on your pages. The "ALT" attribute lets you specify text to be displayed instead of an image. For example:

<IMG SRC="ball.gif" ALT="How to make a web page">

In this example, "ball.gif" is an animation of a spinning ball. With graphics-capable viewers that have image-loading turned on, you see the graphic. With a non-graphic browser or if image-loading is turned off, the words "How to make a web page" is shown in your window. You should try to include alternate text for each image you use in your document, as it is a courtesy for your readers.

Background, text, and link Color

On most pages, you want to have a specific color for the background, text, unvisited links, visited links, and active links. In order to do this, you need to find the code number for the specific color that you are looking for. Here is a HUGE list of code numbers, and here is how you would display this in your page. NOTE: Type these ONLY right below your title. NOTE: You must have the "#" sign before the actual code.

• <body bgcolor= "#code">forbackground color < /FONT>
• <body text= "#code">forcolor of text (all non-links) < /FONT>
• <body link= "#code">forcolor of unvisited links < /FONT>
• <body vlink= "#code">forcolor of visited links < /FONT>
• <body alink="#code">forcolor of active links (while being selected)< /li>< /li>< /li>< /li>< /li>< /li> < /FONT> < /li> < /li> < /li> < /li> < /li>

Getting Started