Website Creation Made Simple

You don't need to be a techno-hero to build your own great site!

Many people want to build their own Website but are afraid to take the first steps because they are intimidated by Web technology. However basic Web design is not a complicated, ultra-technical process. If you are willing to learn a few easy concepts and spend some time practicing, you can get the hang of Website creation in 30 days or less.

Website Creation Prerequisites:
The Right Frame Of Mind
Some Basic Technical Parameters
Website Creation Basic Elements:
Website Creation Practice And Application:
Some Recommended Additional Resources

Website Creation Prerequisites:

This section will cover a few elementary ideas. You'll have greater success with your Web design project if you understand these basics, and once you adopt the recommended perspectives.

The Right Frame Of Mind

Here are a few of the critical mindset shifts you may need to make before we begin.

It's not at all necessary that you understand the whole of Web technology in order to build a fabulous site for your business or personal needs. So put aside the overwhelmed feeling that you have a mountain of knowledge to tackle!
Because there are so many great reference materials available to you, it's not even imperative that you memorize a lot of info. You can easily refer back to a particular fundamental if the need arises in the course of your work.
You can do this and you will if it's important to you.Insisting that you're "too old" or "not smart with computers" is bad practice, and it's the wrong perspective to move forward with. Relax and understand that if you can read this page without a struggle, you have more than enough capacity to master basic Web design.
It's actually more difficult to learn the English alphabet than it is to attain a basic grasp of Web design languages and applications.
Computer skills and Web design ability are two separate fields. It's not even essential that you are a good typist to become a very strong Website designer.

Some Basic Technical Parameters

Below are the basic technical truths you should be aware of before moving forward.

What Is A Website And How Does It Work? (Additional Resource Available: Web Development Basics)

In simplest terms, a Website is a public display of information associated with a specific domain, or virtual location. We use browser software like Internet Explorer or FireFox to connect with a specific domain or location, and to view Websites in a manner suitable for human enjoyment.

All Websites are actually a collection of files, instructions, and data, working together to form a complete whole. When viewed without browsing software, this whole would appear as multiple pages of encoded information; so a browser essentially translates digital information and formats/displays it according to the specific instructions contained within the Website design code.

The files and data that make up a Website are stored on a server, or host, machine. Think of this like a super computer that runs around the clock and thus allows us to connect with a Website anytime we want.

This connection is made when our computer reaches across the Internet and accesses the specific IP address of the Website we are looking for. You do this every time you click a link or enter a Web address into your browser and hit the 'Enter' key.

In order for a Website to be easily accessed by the public, it must be assigned a domain name. This domain name is then synchronized with the IP address where the site resides, so when we point our computers at the domain name, we are redirected to the host machine and able to view the site from our monitor.

The Above Is The Most "Technical" Content You'll find On This Whole Page.

Don't worry about knowing the above tutorial by heart. But a basic idea of how all this works will help you function more effectively as a Webmaster. Feel free to bookmark this Knol so you can refer back to is in the future.

Website Creation Basic Elements:

Now let's take a look at the actual nuts and bolts involved with the Web design process. An understanding of the following areas is crucial for successful site creation.

The Actual Building Blocks Of Website Creation

Websites are built using different forms of code language. These codes are saved in document form, and then uploaded to your host server where they can communicate and coordinate with one another to form the desired look and interactivity for your site.

A browser translates the code and displays it in a way that makes sense to you and I. All of this happens more quickly than the human eye can catch, and the entire process seems like cyber-magic if you don't know the basics behind it.

There are a wide range of coding and programming languages you can use for your Web design project. This Knol will not delve into actual programming languages, and will deal with two basic markup and style codes.

HTML Code (Additional Resource Available: What is HTML?)

HTML (Hyper Text Markup Language) is an alphanumeric code used to format and arrange Web pages. HTML consists of a tag and attribute system.

HTML Tags A tag is a single "command" of sorts, that defines a specific behavior to be interpreted by browsing software. There are dozens of HTML tags that relate to anything from page background, text paragraphs, internal page format, link and image placement, and much more.

Where a tag is placed within a document, and which other tags or attributes it is placed with, determines the resulting format and display of the Web page in question. Tags are enclosed within the greater and lesser characters on your keyboard, and a tag statement must be opened and closed, thus defining the affected area precisely.

A working example is in order at this time for clarification purposes.

The first tag used within any HTML document is: < HTML >

This tells a browser it is about to read an HTML document and to react accordingly to the following syntax. You are opening this tag when you add it at the top of your document.

Everything that follows is part of your Web page design. Then, when you reach the end of your HTML document you would close the main tag as follows: < / HTML >

So the first time any tag appears in a particular definition of formatting within your HTML document, it is being opened. And repeating the tag at the end of the specific definition along with the trailing slash character ' / ' is closing said tag. (Additional Resource Available: Remember To Close Your HTML Tags )

In addition to tags, the HTML system uses attributes. These commands allow you to add greater depth to your design process.

HTML Attributes Attributes are specifications and enhancements applied within a tag. The purpose of an attribute is to define additional parameters, i.e. to get more specific about how you want things to appear and behave.

A working example is in order at this time for clarification purposes.

Let's say you've opened your main body tag. As you'll learn later in your studies, the body tag tells the browser it is reading the main, publicly visible display portion of your Web page. In our example we'll say you want a dark green background for your page body; this could be achieved using the attribute shown below:

< BODY bgcolor=#00FF00 >

The highlighted code is the attribute used within this particular tag. The attribute bgcolor helps define background color, and the alphanumeric sequence thereafter refers to a dark shade of green.

You'll learn more about attributes and the color code system later. For now I just want to draw up a clear example of how attributes are used in the design process.

As a Web designer you will learn to use HTML tags and attributes as the foundation for your Web projects. This is the simplest, most effective way to hit the ground running as an up-and-coming Webmaster.

(Additional Resource Available: Learn Basic HTML)

CSS Code (Additional Resource Available: Example Of CSS Application In Web Design)

CSS, or Cascading Style Sheets is an innovative technology that, for many designers, has completely replaced the older HTML code. However, I find it useful when teaching new Webmasters to introduce CSS as an additional utility to be used alongside HTML.

Once you have basic knowledge, you can decide whether or not you want to abandon HTML completely. But here's a key point: Unless your goal is to become a professional Web developer there is no real pressure to comply to all cutting-edge philosophies; HTML is more than sufficient for new and intermediate designers who simply want to create thier own site or network of sites.

For purposes of this Knol, CSS is a method for applying additional, and more fluid, stylistic elements to your Website. In other words you'll use CSS to enhance your basic templates and designs.

There are three main ways to apply CSS:

Inline CSS You can add CSS style elements directly into your HTML tags. This allows you to control individual tags and precise areas on your page with new style commands.
Internal Style Sheets You can place a style key in the head of your individual HTML documents. This allows you to set style parameters for your entire page, but is a bit clumsy for practical use, and should only be applied in certain situations.
External Style Sheets Without a doubt, external CSS is a must for every Website creation project! This method involves setting up one central CSS document that defines the style of your entire Website! From a single document you can control page color, text and link behavior, table and paragraph format, and pretty much anything else you want sitewide.

I recommend a mixture of items 1 and 3 above. I always define a central, external sheet to handle my base site stye. Then I leverage inline CSS in the areas where I want to override the default style settings. This gives the designer good control and as much flexibility as he or she needs throughout the project.

At this point you should have a good overview of Web development basics. You are now ready to jump into some hands-on training!

Website Creation Practice And Application:

Coming soon...

Due to the robust nature of the subject matter, this Knol must be an ongoing project. I will update this material 1 to 2 times per week until I have a comprehensive outline for basic Website design.