Web Design Tutorial - Free - OkanaganWebDesign.com

New Owner's Special Offers
please contact us to hear more!

Okanagan Web Design Tutorial

Below you will find a full free web design tutorial.
Enjoy - The Staff of Okanagan Web Design

First, we should cover what website design is not - - its not a lot of sounds, graphics and
distractions thrown together on one page and put online for all the world to see.

Now with that out of the way we can get down to the nitty gritty of web design.

Welcome to the Okanagan Web Design tutorial my name is Kellie and I will guide
you through this introductory lesson on Website Design.


	The Basics Making Metatags Links Images / Colors HTML Tables Javascript / PHP Content / Navigation Browser Wars CSS Web Stats Tools to Build With

The Basics

Web design Basics - Setting up a basic website is really very simple - you can actually use just a simple text editor and your browser to build and view your site. Now with that being said in this day and age most beginning web designers will begin by using an HTML EDITOR with really simplifies the whole process.

There are a lot of great HTML Editors out there, I will name a few here and at the bottom of the page we have a list of web design tools that you may want to look into or just type HTML Editors in your nearest Search Engine for a large list of available editors.

The 2 products that I use a fair bit and like using are from Coffee Cup. If you are looking to Learn HTML then the editor is a good choice its a reasonable price 49.00 and has a free 45 day trial - Coffee Cup HTML Editor however if you just want to get a site built and running then they have a great WYSIWYG (What You See is What You Get) program as well where you build your page visually no coding - CoffeeCup VisualSite Designer

Most of this tutorial is for those that are coding their site (HTML). Well with the set up out of the way lets begin with the terms that will be used in this tutorial.

Tags = This refers to bracketed instructions -
example < b > will Bold this text < /b >
Browser = Application used to surf the net example Internet Explorer and Netscape
HTML = Hyper Text Mark-up Language
Web Server = Your HTML Documents need to be hosted on a webserver so that the rest of the world may enjoy your work.

These are the basic terms used we will explain any terms as we use them throughout this tutorial. Now lets begin building a basic webpage.

Below is an example of all that is needed to build your first basic webpage.

<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

Now we will look at each tag:
<html> This tag is simply letting the browser know that the document is an HTML document and should be read as such, creates the HTML document
<head> Separates the title and other information that isn't displayed on the Web page itself.
<title> </title> This is where the title of your webpage is placed - the title should be descriptive and not to long as it appears in the title bar at the top of the browser page.
</head> HTML below this tag will be displayed on your webpage.
<body> Beginning here is where you place info, content, images and such between <body> and </body>
</html> Ending Tag for create HTML Doc

Click here for more tags and meanings

META TAGS

Metatags - Whats a Meta Tag? - The <META> tag is an important HTML tag that can be a great help in ensuring that meaningful information about your site when its indexed by the Search Engines (like Google, WebCrawler, etc).

It doesn't display anything, but many of the search sites use the contents of the META tag as the summary description of your site and its contents instead of just the first few words that are on your page. Meta Tags look like the following:

<META name="description" content="A description of your site and services would be here.">
<META name="keywords" content="keywords from above, seperated, by, commas, would, go here.">

Simply copy the meta tag output into your html somewhere between your <head > tags. Also try to incorporate some of your key words into your website title.

Use all of the above information to optimize your pages for the search engines.

LINKS

Links Internal and External

There are 3 basic link tags and they are as follows:

<a href="http://www.whatever.com"> whatever.com </a> Creates an External hyperlink - A link from your site to someone elses.

<a href="another_of_your_pages.htm"> another_of_your_pages </a> Creates an Internal hyperlink - A link from your a page on your site to another page on your site.

<a href="mailto:EMAIL"> </a> Creates an email link

Once your site is up and running you can use the tools below to check and see what links point to your site.

http://www.marketleap.com/publinkpop/ - A great online checker

http://www.checkyourlinkpopularity.com/ - A free download - awesome free tool.

IMAGES and COLORS

Websites Dressed to Kill
You know the old saying you can't judge a book by its cover, well in the world of webdesign thats not really true. Ugly site = no repeat visitors.

Images
In the world of webdesign image is very important and so are the images that you put on a site. One of the biggest mistakes new web designers make is to overload their websites with images and animations because they can.

However to many graphics and images can distract and annoy users. Also you have to be careful about copyright images just because its online does not mean it belongs to everyone, the artist and designers have worked hard so make sure its okay for you to use an image or graphic.

Colors
This is an often critical step in webdesign that is overlooked - pick the wrong color background with the wrong color font and you have a web design disaster ( don't laugh it happens a lot ). Before getting into picking a color scheme we should probably learn about color and the web.

When building your site you can with some colors use there name however with many colors you need to use hexadecimal, for a great list on hex colors be sure to visit WebMonkey Color Codes

Time to take a little break and learn at the same time. Grab a coffee or beverage and then for an idea of what not to do visit Web Pages that Suck and have a look around.

Website Tables

Tables ummmm I'm hungry

Tables are very important when it comes to the layout and organization of your site. Below is an example of a table:

Info Here	Picture Here
Picture Here	Info Here

These are the basic tags you will need to know in order to create a basic table:

<table> </table> Creates your table
<tr> </tr> Creates a row
<td> </td> Creates a cell in a row

For more on tables and a full sheet on tags be sure to visit:
Webmonkey Cheats

JAVASCRIPT / PHP

A scripting we will go.

JAVASCRIPT - - JavaScript is embedded as a small program in a web page that is interpreted and executed by the Web client.

PHP - - PHP Hypertext Preprocessor (PHP) allows web developers to create dynamic content that interacts with databases.

Well those are the official definitions of what javascript and PHP are. If you are interested in learning and using either of these then you will need to do a lot more reading and learning - use the search engines and visit a lot of the sites that offer free code / scripts and take and play with them - its truly a great way of learning... unfortunately its beyond the scope of this tutorial.

CONTENT / NAVIGATION

Have something to say and know how to say it..

Site content is a large part of designing, you need to know what you want to say and how to say it. There are to many sites out there that are void of any real content or information.

Once you have your content you need to organize it into sections ( pages ) and build your webpages around your content. While doing this it is a great idea to start planning how people will navigate your site ( move from page to page in an orderly way ) I recommend drawing out your site first complete with link paths.

THE BROWSER WARS

Well you have heard of the cola wars well this is similar only its taken out on the web developer - you slave away and build your site checking it in IE - you are so happy then you decide you should have a look at you finished site in netscape and to your horror the site either looks horrific or does not work at all - welcome to the browser wars.

While building your site we suggest that you test it at various stages in several browsers and screen resolutions.

CSS

CSS - - Cascading Style Sheets is when a style sheet (which is file or form that defines the layout of a document) is attached to an HTML document, to influence its layout when accessed via a browser.

Again the official definition but really what it does is allow you the web designer the ability to organize and create styles for various elements of your web site. For more info and tutorials on CSS check out W3schools.com

WEB STATS

One of the most important and sometimes most overlooked areas of promotion are the web stats, knowing how and why your visitors got to your site makes promoting it even easier. When looking for a stats program you should look for one that is easy to set up and tracks what the visitor typed in and how they arrived at your site.

WEB TOOLS

HTML Editors	Graphics Programs	Free Resources
Coffee Cup HTML Editor	Web Attack Free	123 Webmaster (Free)
Coffee Cup Web Designer	Paint Shop Pro	Bravenet (Free)
Arachnophilia Free Editor	Photoshop	Free Web Templates

I hope that you have gotten a little bit out of our tutorial be sure to book mark this site and when you come back look for me as I appear on several pages here at Purpose Driven.


	Cheers Kellie

* Okanagan Web Design runs many portal sites featuring products and services we use these sites to promote and build link popularity to our clients sites we also do Search Engine Submission , Keyword building and meta tag creation all for the single purpose of driving purpose driven traffic to your site.

Let us help you design your site.....

Web Design Packages > >

For more info or a custom quote be sure to go to our contact us page.

Thanks from the Staff at Okanagan Web Design

General Information on Okanagan Web Design

Mission
Our mission is to provide quality, fast loading search engine friendly web design at a reasonable price.

Web site design is almost as important as promotion in that getting people to your site is great but getting them
to stay on your site and ultimately buy, sign-up or join your business is really what its all about. A website that takes
long to load, is hard to navigate or hard to read is left in an instant, leaving you with lots of one time visitors and not
a lot to show for it. It can actually hurt your business in the long run.

We here at Okanagan Web Design offer a variety of web site design packages and services.
So look around check out all that we have to offer and if you have any questions feel free to drop us a line.

We offer several different web hosting packages - From setting up a small sub-domain account to setting up a full hosting solution -
including full ftp access, ability to run PHP and CGI scripts, SQL database access and multiple email accounts.

Domain Name Registration and Setup.
Affordable Webhosting
Email Accounts Matching Your Domain Name.
Hosting on High Speed Servers.
CGI, PHP, SQL and Front Page Extensions.
Free Access to PHP Scripts.

< Read More >

OWD News:

We here at OWD are proud to sponsor the following site:
Katrinabeads.net this site is run by a local couple and the purpose of this unique relief effort is to help raise funds for the Little Doctor's Neighborhood Clinic. It will need to be rebuilt as it has lost its supplies, equipment and tools to Hurricane Katrina, and without them, it's beautiful mission statement, to help New Orleans' most needy people cannot be fulfilled.

OWD Clients:

Below Are a few of our Clients Sites.