making a website

We assume here that you do not want to use any of the fancy expensive (or free) tools, but want to have complete control by doing everything manually. You can then keep the template and use it to make future websites.

My other tutorial lives at http://www.sticksite.com/making_websites/.

I refer to some images here; they are at the bottom of this page; simply right-click on them to download them to your website folder.

A. Making a Basic Web-page:

1. First, open Notepad (or any other text-editor, e.g. Wordpad) and type the following (or copy and paste this into Notepad):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>my first website</title>
</head>

<body>

</body>
</html>

2. That was easy. Now SAVE that bit of text in a new folder in your computer. You might call the new folder "My Website" for example. Then save the new page as "index.html" (without the quotation marks, of course).

A comment re names of the files you will have; the images, the page itself etc:
- maximum 8 characters to the left of the dot and only 3 to the right of it (xxxxxxxx.xxx) except for the html page(s) which will have 4 letters to the right of the dot, i.e. "html."
- no spaces in the file name (you can use a hyphen or underscore, but underscores can cause difficulties too)
- no upper case, i.e. no capital letters
- don't start a file name with a number or any character other than a - z. The letters l and o are not a good idea if you can avoid them as they can be confused with numbers.
- give images a filename which describes the image. An image of a dog should not have a filename "cat.jpg."

3. Next, open your browser, e.g. "Firefox" or "Internet Explorer" and open that new file. SURPRISE..... you will get a blank page only. Huh?! The reason: this coding is only a "framework" FOR the new website; we have not yet added any content to it. That's next.

4. Now let us add a heading to the top of the page. Look for the word "body" with the < and > marks around it. That is the "Beginning Body" tag (an HTML tag). That is where the "body" of the page starts. To add the heading, we'll use the largest print, that is, the most important heading of the page for the heading. So, type the HTML tag "h1" and surround it with the < and > marks. Then type your heading, e.g. "Making picture frames with Diamond Willow" (sans "") and then END the heading tag with a tag that is almost identical, but that has "/" in front of the "h1." So, now, after the "body tag" you will have this:

<h1>Making picture frames with Diamond Willow</h1>

Now save the file again; same name, same place, over-writing the first version of it.

5. NOW go back to the browser window and click "Refresh" to bring up the new, revised version of your new website. The heading shows; if it does not, check your work.

6. Add a heading of slightly lesser importance than the first heading. Do this just like you did the first heading, but instead of the number 1, use the number 2. In other words, instead of "h1" you'll have "h2." Again, type some text for the heading, e.g. "Where to find the wood."

7. You can have more "levels of importance" to your headings by using numbers h3 through h6.

8. Now let us add a short paragraph of text under that second heading. A paragraph is simply your text with a "paragraph tag" around it. To add that tag, enter a "p" with the < and > characters around it at the START of the paragraph, and then close that paragraph with the ending paragraph tag which is, as you have already guessed, the /p with the < and > around it. In this example, I'll use this text: "If you are lucky enough to have access to Diamond Willow, you can harvest your own; if not you can buy it online from Ken Laninga." If you have done all that, then your html after the body tag is:

<h1>Making picture frames with Diamond Willow</h1>
<h2>Where to find the wood</h2>
<p>If you are lucky enough to have access to Diamond Willow, you can harvest your own; if not you 
can buy it online from Ken Laninga.</p>

9. Again, save and view it in your browser. If the two headings and paragraph do not show properly, check your work.

10. Note that when you are typing long lines, you can break them up by pressing the ENTER key on your keyboard anytime; these will not show in your page.

11. Two of the most important things in a typical website, after the headings and text, are links and images. First, let's add a link. Let us take that paragraph we just added, and make it so that my name, Ken Laninga, will appear on the website in blue color, and make it so that if the visitor clicks on it, (s)he will be taken via the magic of the Internet and html, to my website. That website lives at this location; this is the "URL" or Universal Resource Locator: http://www.sticksite.com/. To turn my name into that line, directly in front of "Ken...." type that URL, AND in front of the URL add the < mark followed by a href=" (with the quotation mark) and right after the ....com/ enter ">. That will turn everything after Ken Laninga into a link. We want the link to END, of course, right after my name so end it with the ending tag which is the < mark followed by /a and the > mark. NOW that paragraph will look like this:

<p>If you are lucky enough to have access to Diamond Willow, you can harvest your own; if not you 
can buy it online from Ken Laninga.</p>

12. Again, save and view it in your browser by clicking the Refresh button. Test the link and see if you don't wind up on my website. If not, check your work.

13. Wasn't that easy? Isn't it fun to be so creative?! Now let's add a picture. Take any image, a JPG or a GIF or a PNG for example. I am providing one here, called "transparent.jpg" and it measures 350x263 pixels. Here is the html for adding that image:

<img src="transparent.jpg" width="350" height="263" alt="computer and sticks" title="transparent laptop">

With that done, save and view the page. Hopefully, you got it running perfectly.

14. If you want a picture that moves, you'll need an "animated gif." I'll provide one called "bak.gif." Just before entering that image, let's include this very short paragraph:

<p>Here is an animated picture; a GIF file:</p>

Here is the html for that image:

<img src="bak.gif" width="84" height="84" alt="moving picture" title="laughing beaver">

That animated image consists of 8 images and each shows for 15/100 of a second. You can make your own; you can download the free MS GIF Animator."

15. OK, we now have a website. Next, let's dress it up a little by changing the background of the page to a pretty yellow color. If you Google "web color chooser" you might wind up at this website which shows for the pretty yellow color, two codes: 204.255.51 and #CCFF33. Either can be used; let's use the latter one. This means we change the "body" tag to:

<body bgcolor="#FFCC33">

Now if you did everything correctly, your page will look like this in your browser:

how the page looks

And the little picture will have motion.

We can get into other options for the page background later.

Note that the html has two sections; the "Head" and the "Body." The head starts at the very top, with that long line starting with "head" between < and > marks, and ends with the "head" word between . The "Title" of the page appears in the Head section and right now it still says "my first website" so now you can change that to whatever you want it to read.

Perhaps here we should stop to let you practice all this.

You can check your html coding online at http://validator.w3.org/



B. Uploading your new Website to the Internet:

Now that you have made a first page and viewed it with your browser on your own computer, you might feel that you are ready to share it with the world. That means you have to upload it to a server. If you have access to the internet (which, of course, you have if you can browse the WWW and send/receive email, then MAYBE your account with your ISP (Internet Service Provider) includes web-space, i.e. space on their computer for YOUR websites. First, find out if you have that or not. If you have it, you can use it BUT you may not have much space, or your ISP may have a problem with it if you have your own Domain name, or they may have restrictions such as not allowing you to sell goods etc. etc. After using many different ISPs over the years, I finally settled on one which is, without doubt, the BEST. Besides VERY low cost, the many features they offer are too many to list here. If you could use such a Web Host, click here and get yourself an account: http://www.1and1.com/?k_id=9854692.

Next you will need a TOOL to upload your files to the ISP. For many years I've been using the free version of WS_FTP LE and you can get it here: http://www.pagematic.com/faq/ws_ftp.html.

Once you have configured it by entering your password etc and indicated where your website folder is on your computer etc. then you can upload files for the world to admire.

Note that we named the page "index.html" when we started. This is important. You can have many folders for your various websites, but the main, most important file/page in each folder should be called that. If you are going to have more than one html file in a folder, you can name them whatever you like as long as the first/main/most important page/file in the folder is "index.html."

Now check my other tutorial at http://www.sticksite.com/making_websites/ and in particular, read "Bottom Line" re Domain Names.

Study also the advice on my other pages, http://www.sticksite.com/making_websites/makeweb(2).html and the rest of that tutorial.


Here are the images which I refer to above:


computer and sticks

moving picture

Removing Websites:

https://www.google.com/support/bin/answer.py?answer=61808&hl=en


Back to Part 1 .. Back to Part 2 .. Back to Part 3 .. Back to Part 4

how to get Diamond Willow

in fact, tell EVERYBODY!

Diamond Willow Sticks

back to page top