Articles

Websites for Beginners: The Basics

Last Updated on Thursday, 11 February 2010 23:43 Written by Johnny Samsky Tuesday, 09 February 2010 22:22

The purpose of this article is to give the reader a basic understanding of what a website IS. I will be outlining the different sections of a website and defining some common terminology. Again this is the basics, if you have a general understanding of what a website is, this probably isn't for you. So with that in mind, let's get started.

Terminology

Website - a collection of web pages linked together through a common navigation and layout

Web page - a single page of a website focused on one section of the website

Content - the information that you see on the webpages including: images, text, links and navigation

Links - these are used to connect or link to another website or within the web page itself. They can also link to other things such as images and documents.

Navigation - These are a collection of links that are used to navigate through your website. Most websites consist of a "Home" page, some or many content pages, and a "Contact Us" type of page.

(Web) Server - This is a type of computer that is used to store your website. Generally you "host" your website with a 3rd party using their servers.

Hosting - The storage of your website files on a server.

Domain names - A domain name is how people can find your website. An example of a domain name would be www.clearwaterwebsolutions.com. "www" is the prefix standing for world wide web, clearwaterwebsolutions is the domain name, and .com is the domain extension. Other common extensions include .net and .org

Anatomy of a Web page

A website can be broken up into sections. Many websites today follow a similar and common theme, consisting of a header, navigation, body, and footer. It is a good idea to keep a common layout across your website, as this will enhance usability and make it easier to navigate throughout the site.

In the example below I have illustrated one of the common layouts used on a website.

I have color coded the sections of the web page to explain them more readily.

Header (Green)

The header is located at the top of the page and generally displays the company logo. The header may also contain the websites navigation in a horizontal structure.

Navigation (Blue)

This shows a vertical styled navigation that runs down the left side of the page. The navigation consists of links that connect the pages of the website together.

Body (Red)

The body may contain the content of the web page. The information that you wish to display will go into the body.

Footer (Purple)

The footer contains copyright information and sometimes may also have a horizontal navigation or contact information, as seen in the example.

Conclusion

This was just a small introduction into the terminology and layout of a web page. I hope you may have learned something and come back soon.