Creating a Geocities webpage... HTML and Javascript for Testers Part I

This article is intended for software testers who have little HTML or Javascript knowledge, but would like to learn some basics. It'll help guide you through setting up your own website, and add some functionality via javascript. It will also touch on cascading stylesheets.

A website hosting service will store your files and serve up your pages. This is something you don't have to pay for if you don't mind popup ads, or having a URL which contains the name of the service. Of course, a free service will limit how much data you can store on their servers and will limit how much throughput they'll allow your site to generate. One free service, Geocities, allows you to store 15 MB on their servers and generate up to 1 GB/month, which is plenty for most purposes. The free service also has some restrictions like no CGI and no FTP access, but most users will find that they can do a lot for free.

Creating an account The first step is to go to http://geocities.yahoo.com/home and select sign up for a free website. If you already have a yahoo account, supply that information, otherwise select sign up now. The site will help you choose a unique site name (URL) and setup a geocities account.

Creating a webpage Once you have an account, go to http://geocities.yahoo.com/home and login. Geocities has a page building wizard that could be used to create your site, but using it won't help you learn HTML, won't let you incorporate javascript, and produces HTML that can be hard to understand. If you go this route initially with the intention that you'll eventually dig into the HTML the wizard produces, you'll be in for some heartache. Instead, we'll jump right in to it. Select File Manager>>Open File Manager. You'll see a table with one file listed, index.html. This is the default page that is served when someone hits your site. Before we edit it, create 3 subdirectories using the onscreen tools with the names icons, images, and stylesheets. You won't use these directories now, but this organization will payoff later on when you are ready to upload and/or use icons, images, and stylesheets. Now check the checkbox in front of index.html and select the edit button. You will be brought to a text editor displaying the current contents of index.html. Highlight the entire contents, delete them, type the following:

I made this
next line

and select save and continue. Open a new browser and enter your site's URL and view your handiwork. HTML commands are contained between <>. Whereas starts a command, ends a command. HTML commands are not case sensitive. Pretty much all HTML commands for a page should be within . is where things like page title are defined and is a good place to put javascript functions. is where the content of your page is built. Everything between is commented out. It won't appear on your page. Browsers ignore any spaces that are following a space. So if you want display no way (with three spaces in between) you need to use the code for a space (  ), so you'd type no   way.
signifies a line beark. Simple. Go ahead and alter the text in index.html, select save and continue, switch back to the second browser, hit the refresh button, and observe the results. Select browser View Source and you are presented with your HTML source. You can View Source of any websites, but this won't necessarily give all the information used to present a site. A website may use cascading stylesheets, javascript, and CGI contained in separate files. The stylesheet and javascript files can be found somewhere within your local cache.

You may say, ok this is a website, but the format stinks, there are no icons to click, and images to view. Fortunately there are many HTML commands you can play with. You can open another browser and search for HTML references, and or buy a book. I like Sybex's "HTML Complete". Their books are less than twenty bucks and are good references. It is a good idea to sketch out what you want your page(s) to look like. Page layout will be a big deal. I strongly suggest you never use frames. That leaves tables divisions, and layers, any of which are ok to use. Tables are very popular, but are messy to work with. I'm currently happy using divisions to layout my page.

You can put links to other sites on your page. You can also links to other pages that you create in your account directory structure. You can use file Geocities File Upload to upload HTML pages and pictures for use with your site. Throw them in the appropriate subdirectories and you'll be able to keep organized.

Ok, my site is up, friends and relatives have seen it, but I want to add some interactive bits to make my site less boring....

See the upcoming article "Creating a Geocities webpage... HTML and Javascript for Testers Part II"