skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Getting Started

Organizing | Basic HTML | HTML Editors | Basic CSS | CSS Templates

There are many different ways to do the mechanics of building a website. All methods have their pros and cons - their supporters and detractors. However, the important thing is to choose a method that works best for you in creating and maintaining your site and which results in a website that people want to visit.

Included in this part of the tutorial are exercises to learn how to use some HTML editors and to practice adding content to some free css templates. With that knowledge, you could choose your own template and start building your own site. However, there are also exercises to practice changing the external CSS file to "tweak" the template for those who are interested.

Organizing

It is important to organize your website material on your computer in the same manner as it will be organized on the web hosting site you choose. Since the links between pages will be relative links (not full URL's), this will keep the links from breaking when the site is uploaded to the web hosting site.

You will need to keep everything in one main folder (like it will be in the "root" directory of the webhosting site). Most folks have a special folder just for images that is inside the main folder and it's named - images. Some folks who have lots of pages and/or lots of other special files may also have additional folders.

Since we will be using some templates for the exercises, we can use the folders that are created when the templates are unzipped. As you begin to work on your own website, you can decide if you want to create additional folders. When you upload your site, you'll need to organize the folders (directories) in the same manner as you have them on your computer.

Practice exercises

The exercises are on separate pages with links back to this section on this page. Some of the tutorials were written as help files for The Studio and have not been revamped to match the layout of the other pages on this site. However, they will have a link to "Return to the Practice Menu". As you finish with one exercise, you can return here for more!

Learning the Basics of HTML -

  • Introduction to HTML:  It's not a bad idea to have a little knowledge of the different parts of an HTML page and some of the basic HTML tags, even if you plan to use an HTML editor to do the grunge work.
  • Website "A" Tutorial: Step-by-step guide to hand code a very simple website with an external CSS file.

Learning how to use an Html Editor

  • Introduction to Kompozer (a free HTML editor): Kompozer works much like a word processing program (like MS Word, for instance). Many of the icons will be familair. However, as you type in the normal view, the editor is writing the HTML code for you. You can toggle between the normal view and the source code to see how things are done.
  • Kompozer part 2 - adding an image:  This is a continuation of the exercise on learning how to use Kompozer.
  • Introduction to SeaMonkey (another free HTML editor)  SeaMonkey is a browser and HTML editor combination. It also comes in Windows or Mac versions and works much the same as Kompozer.

Basic Css

Learning how to use a Free Css Template

Once you feel comfortable using an HTML editor and have practiced changing some of the basics in the CSS file, you should be ready to start creating your own site. The next section contains steps to take if you plan to use a free css template and are going to use an HTML editor to add content.


Next Section: Building Your Website -->