Building A Simple Website

Building a Simple Website ... by Sal Towse

If you have opted for one of the "freebie" sites with easy-Web-page tools to setup your website, this article is not for you. If you have a free website but want to write your pages from scratch, skip the first sections on getting a domain name and a Web host.

Want your own domain name? Want a "real" Web host and not a "free" site? Don't want your site to look like yet-another-AOL homepage? Don't want pop-ups and banner ads annoying your visitors? This tutorial's written for you.

Beginner Certified

Who better to act as guinea pig than Sam, my fearless, Web surfing, instant-messaging teenager, who didn't know what Notepad was, who had to learn how to use an FTP Client and who didn't know any HTML (hyper text markup language - what Web browsers translate into the Web page on your screen). Thank you, Sam.

If Sam can do it, you can too.

In The Beginning

First, register your domain name. Many services are available these days for a wide range of prices. I've used GoDaddy.com to register ten domains. GoDaddy is professional, prompt and cheap: $18 for a 2-year registration. Domain registration takes a couple days to complete.

Sign up for Web hosting while you're waiting for your domain registration. GoDaddy can host or you can sign up with one of the hundreds of other Web hosts. CNET lists many alternatives.

I use both GoDaddy and Your-Site.com. GoDaddy's barebones hosting costs $5.95/mo. Adding features can cost up to $12.95/mo. Your-Site.com costs $60/yr, paid in advance. $5/mo is just a nickel more than what I paid Yahoo!GeoCities for a "premium" account to get rid of their pop-up ads. If you tell Your-Site.com I sent you, I'll get a $7 credit. Woohoo!

If, as I did, you register a domain name with GoDaddy but host the domain elsewhere, log onto GoDaddy and modify your GoDaddy Nameserver information to point to Your-Site's machines. Your "welcome" letter from GoDaddy explains how to do this. Other Domain Registrars operate in a similar manner.

Pop your domain name into your Web browser. If your hosting and nameservers are setup correctly, you will pull up your barebones site. Now what?

FTP - What?

FTP, file transfer protocol, is the simplest way to transfer files over the Internet. Use an FTP Client to transfer your Web files from your machine to your website. FTPPLanet provides a brief FTP tutorial (http://www.ftpplanet.com/ftpresour ces/basics.htm).

Google can pull up information on free FTP clients, or you can pay for a commercial version.

Learn how to use your FTP Client. Log onto your website. Navigate through the site. Create a directory off your main page where you'll practice HTML. We'll call it "stash."

Trial Run

Edit your HTML pages on your hard drive before uploading to the website, even if you are able to edit directly on the site. If your hosting company goes sneakers up or the site gets hacked, you will have a pristine copy of the latest version on your hard drive and can recover without breaking a sweat.

To keep transfers easy, set up a directory structure on your machine that mimics your website structure.

You could, for example, have a directory structure that looks like this:
yourdomain
links
mp3s
work
stash
graphics

After your directories are set up on your hard drive, go to http://www.towse.com/stash/practice.htm and save a copy of practice.htm to the /stash folder on your hard drive.

Practice moving files to your website. FTP the practice.htm file on your "local system" to your "remote" website's /stash directory. If you've FTP'd practice.htm successfully to your website, you will find it in http://[yourdomain.com]/stash/practice.htm

Beginning HTML

Too often the easy-as-pie HTML tools a novice Web designer gets with a "here's your free Web page" service create cluttered, incomprehensible HTML code. The novice never learns how HTML works and doesn't know how to edit HTML to make simple changes.

Use a simple text editor (Notepad) to create HTML files when you're just beginning, rather than the beginner Web editors available. Later when you're ready for more complex design, decide whether to get gutsy or to use Web tools to produce your HTML code.

Index.htm

Every directory on your website should have an index.htm file. If a directory doesn't contain index.htm, a snoop may be able to read all files in that directory. This tutorial teaches HTML by helping you create an index.htm file for your /stash directory on your website.

In your /stash folder on your hard drive, make a copy of the practice.htm file. Call it index.htm.

Open index.htm using your text editor. If you use MS Notepad, simply drag and drop index.htm into Notepad.

Take a look at the simple HTML in index.htm. Here are a few basic design factoids to remember:

HTML uses tags to tell Web browsers how to lay out and display the contents of Web pages. open < > and close </ > tags describe what happens in-between.
If multiple tags affect a section, close the tags in reverse order:
Web browsers ignore lines beginning with <! -- and ending with -- >. To add internal notes, use <! -- your comment here -- >

Basic Layout

Every HTML file has four master tag sets.

The <html></html> tags tell the Web browser that the file is an HTML file. <html> is the first line of your file. </html> is the last.

The <head></head> tags begin and end the header - descriptive information at the beginning of the file. You need "title" information in the header. You can also have META tags. Wait until you're comfortable with simple Web design before adding META tags. When you're ready, read this article from Search Engine Watch.

The "title," surrounded by <title></title> tags, is the first line of header information. The title information for practice.htm is <title>practice.htm</title>.

The <body></body> tags follow the <head></head> information and surround the bulk of the Web page layout. To summarize, your basic layout looks like

<html>

 <head>

 <title>

 title stuff here

 </title>

 META tags, if used

 </head>

<body>

 page layout details here

</body>

</html>

Most < > tags require a complementary close </ > tag. Close all tags that need closing or you may have mysterious problems with your page: it may not display at all!

Background And Colors

Most people want to jazz up their plain white background with colors or patterns.

The command for a patterned background is

<body background="the URL for the pattern you've chosen">

Awesome Website Marketing

Find free backgrounds by searching with Google for / free background jpgs webpage /

Find a "free" background you like and save it (right-click and save) to your /stash folder on your machine. I found featherclouds1.gif out on the Web and stashed it away. FTP the new background to your website's /stash directory. Edit index.htm on your hard drive to reference the new background name thusly

<body background="http://www.towse.com/stash/featherclouds1.gif">

Save the changes. Double-click on index.htm. Your Web browser will display your local copy and you can see how the changes look. featherclouds1.gif looked interesting but is overwhelming when it's rendered over an entire page. I went back to the Web and found whitemar.gif and repeated the process.

Note: Do not "lift" backgrounds and graphics from sites unless the background is freely available or you ask the site for permission. Not only text but also Web art, backgrounds, and images are covered by copyright law.

If you'd rather have a solid background than a pattern or picture, use <body color="######">

To find the six-digit codes for colors, use http://www.visibone.com/color/hexagon_800.gif .

<body color="ccff66">, for example, specifies a bright chartreuse background.

Put all <body> specifications -- background pattern/color, text and link colors -- in a single <body> tag.

<body background="[URL for your background]" text="000000" link="cc66ff" vlink="339966" alink="0000ff">

"text" specifies text color. Link color specifications include link (hyperlinks), vlink" (visited hyperlinks) and alink ("active" hyperlinks).

Lines, Text, And Spacing

Let's move into the <body> section of index.htm.

 <center>Practice

</center>

<hr align=center width=50%>

 indicates a line break and has no complementary . Text wraps automatically. If your visitor uses a different sized font, text wraps to fit. If, however, you want to force a line break or want multiple blank lines between two lines of text, toss in as many as needed.

The <center> tag centers whatever follows up until the </center> tag.

 specifies "strong" lettering, which is usually, but not always, rendered "bold." Close with .

 specifies "emphasis," which is usually rendered italicized, between the two tags.

 and specify "bold" and "italics."

Please avoid <blink></blink>.

To set or change font size use , where n ranges from 1-7, increasing as the value increases. reduces font size two steps from the default font size.

Edit index.htm as follows and see what happens:

The five boxing wizards jump <font=-1>quickly.

Another way to change font size is to use headers (not to be confused with <head></head>). Headers come in different sizes. Headers appear as bold type on a separate line.

<h1> is the largest header font. <h6> is the smallest. The header tag must be closed: </h3>. Header tags can specify where the header appears (left, right, center). Add this line and see what happens.

<h1 align=left> H1 with align=left.</h1>

Add the text "Hello, world." Use text tags and see how tags affect the look of the text. Combine font size changes with bolding and italics, but don't go overboard.

You can also (gingerly!) specify a font type other than the Times New Roman default for your text. I say "gingerly" because if visitors don't have the specified font on their computers, their default fonts are used and your Web page won't display the way you intended.



Some popular fonts are Times New Roman, Arial, Impact, Verdana and Comic Sans MS. Specify some fonts. Check whether you like Comic Sans MS, for example, better than Times New Roman.

To change text color for a given section from the specifications in the <body> tag, use . The color codes are those already used for text, links and background color.

Multiple font settings can be set with one command . resets values to defaults.

<hr>, like , doesn't "close." <hr> indicates a "horizontal rule," like the line at the top of index.htm.

<hr align=center width=50%> tells the Web browser to create a horizontal line half the width of the text space and center it. Alignment can be left, center or right.

Barbed Wire And Graphics

What if you don't want that boring old horizontal rule? Instead you want barbed wire! I found an image at Bishop College's Web Class Resources site in the "lines" subsection. Save the barbed wire image. FTP the image to your website /stash.

Substitute <img src="http://www.[yourdomain.com]/stash/barbed_w.gif"> for <hr align=center width=50%>

Uh-oh. The image isn't centered under the title. Center the barbed wire by using <center> before and </center> after.

Free graphic images are available in many places on the Web. Novice Web designers tend to include too much of a good thing. Keep your site simple. Your site will load quicker and your visitors will appreciate it.

Pictures!

Adding a picture is similar to adding the barbed wire graphic.

FTP your picture (.jpg, .gif) to your site.

Add a line of code: <img src="URL here">

Is the image too big? Either use your picture editing software to reduce the size (and FTP the reduced-size image to your site) or adjust the height by specifying the width and height: <img src="URL here" width=180 height=230>

Text aligns along the bottom of the image. If you add enough text, it wraps around under the image. Try playing with image alignment. The choices are top, middle, bottom, left and right. What happens when you have loads of text? How does it wrap?

Some of your visitors browse with graphics turned off for quicker loading times. Provide them with a label so they'll know what they're missing.

<img src="your URL for your image" width=160 height=210 align=top alt="my brother Casey"> What happens when you move the cursor over the image?

Hot Links

Back when the Web was the new-new thing, hot links, which allowed us to surf for hours from site to site, were the red-hottest thing about Web pages. Hot links use anchor tags <a> and </a>.

<a href="your URL here"> description or title here</a>

e.g. And here's a practice link to <a href=http://www.towse.com> towse.com</a> for this practice page.

Thumbnails

Another use for anchor tags is thumbnails. Loading large images puts a heavy load on a 'net connection and eats up time if your visitor has a slow connection. If you want to have large pictures or loads of pictures on your site, consider using thumbnails (smaller images) and anchor tags. First, FTP your pictures to your site.
,br>1. Make a much smaller image using your picture editing software. FTP this image to your site and give it a name like bigpic_tiny.jpg.

<a href="[yourdomain]/stash/bigpic.jpg"><img src=" [yourdomain]/stash/bigpic_tiny.jpg" alt="big picture here"></a>

The <a href="URLbig"> anchor tag provides a link to the picture. The <img src="URLtiny" alt="text"> tag (used in place of the "description or title here" hotlink we had before) displays the smaller image. A click on the smaller image hotlinks to the picture. Remember to close the anchor tag.

Hello, World!

You now have an index.htm page on your website with lines, graphics, lettering of various sizes, colors and fonts, hotlinks to other sites and images. It may or may not look a bit like mine (http://www.towse.com/stash/practice-a fter.htm).

You know enough HTML to build simple Web pages from scratch. Be sure to FTP your completed index.htm page to your website /stash and create another index.htm page for your home page.

There are a number of good online HTML tutorials. When you are comfortable with the baby steps I've outlined, cruise the helpful information at the following sites:

WebMonkey's HTML Basics

Kevin Werbach's " Barebones Guide to HTML"

Ron F Woolley's " So you want to create your first HTML pages?"

Dave Kristula's " HTML: an Interactive Tutorial for Beginners"

Paul Lutus's " HTML for the Conceptually Challenged"

John C. Gilson's HTML Tutorials (the first 21 are free!)

No Dancing Raisins!

Check out Please, no dancing raisins for some (ahem) outspoken opinions (ahem) on what is and is not "good" Web design.

About the Author

Sal Towse spends her waking hours writing, surfing the Net (research!), and loitering in Usenet newsgroups when she isn't sitting crosslegged on the deck watching events unfold from her perch above the San Francisco Bay, exploring the nooks and crannies of the City or curled up with a good book. You can find her at http://www.towse.com.

Have comments about this article?

© Reproduction or other use without permission -- don't.
You are here:http://www.towse.com/articles/200209simplewebsite.htm
A version of this article was originally published September 2002 in Computer Bits
Links checked Oct 2005. This page was last updated on 2005-10-21.

Exploring the Web, Machete In Hand