Introduction to Website Design

As you prepare to build your website, often times the hardest part is getting started.  There are so many ways to build a website, how do you know which to choose?  No matter if you use WordPress, the Premium Website Builder, or any of the many other programs available; you may need to edit the code to make the site look exactly the way that you want it.

For a website, in many ways the design is as important as the content.  Your website has to have a layout that makes the content stand out, but be simple enough that it will not scare away visitors.  Everyone desires to have a professional looking website, but first it is important to get the basics down.  Your first website might not be the best site on the Internet but it will need to function so that your users can navigate through your content.

How do I create a HTML page?

To create a website with just HTML, there are a few different programs you can use. Any standard text editor (such as Notepad for Windows or TextEdit for Mac OS) can be used to hand code a site.  You can put your HTML code directly in the text editor and when you save the document be sure to save it with the .html extension (instead of the default .txt extension).  For example, if you have created the page that will be your index, then the file would be named index.html.  This will automatically make the file a HTML file.

What is HTML?

While there are different coding methods to build your site, the easiest and most popular is HTML.  HTML is an acronym for HyperText Markup Language.  HTML has been used since the early 90s and is the standard website markup language that can be read by all browsers.  HTML is used to change or modify the text, images, and other aspects of your website.  For example, if a file is uploaded with the following code:

<strong>This is bold!</strong>

... it will display as This is bold! when your visitor views your website.  There are literally hundreds of tags you can use, this is just to show you how it works.  We will frequently use the term "tags" in this Education Channel, the tag is enclosed in < > brackets and shows where to start and stop the element.  The tag is not seen by the visitor and is used to tell the browser about the content.

One of the best ways to learn more about HTML and how it works, is to look at the source code of different websites you are already familar with.  The source code of a website will show the actual HTML coding of the page that you are viewing.  To see the source code, in FireFox right click on any page and select "View Page Source."  In Internet Explorer, right click on any page and select "View Source."  If you are not familar with HTML code yet it may not make much sense, but it will give you a feel for what goes on "behind the scenes" on the web sites that you already enjoy.

The rest of the Website Basics section goes over tags, changing fonts and colors, and other simple concepts to get you started.  Remember that if this is your first site, we recommend using a program such as the Premium Website Builder or WordPress to help as coding your first site from scratch is quite an undertaking.  By understanding HTML and how to edit your site, you will be able to further customize your website and make it look exactly the way that you want it.