Creating a Website 03: Getting Started

[Mimi58]

There are many different ways to do the mechanics of building a website. Rather than discuss a number of them in this post, we'll stick to coding by hand and using a template. This information can also be used in another series I plan to start - Designing a Skin. Later I will add links to posts about how to use some HTML editors; how to choose and use templates, and other tools/methods you could use.

There are some things you need to do no matter which tools you use to do the mechanics.
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. If you are wanting to learn how to make your own skins rather than make a website, you still need to organize. You might want to have folders for each month or you mighr want to add an identifier at the front of each part of the skin (text file with code, images, screenshot) - such as 01JanNewYear (and then a number or some descriptive words and whatever suffix is necessary) ..... 12DecChristmas (and then a number or some descriptive words and whatever suffix is necessary) ... and so on.

If you are working on a website, you will need to keep everything in one main folder (like it will be in the "root" directory of the web hosting 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.
Choosing Your Tools
File Extensions and Plain Text Editors

If you use Windows, you will need to change some settings so that file extensions will show. Also, you'll need a plain text editor. You can use Notepad (comes free with Windows) or TextEdit (comes free with Macs) However, there are a few adjustments that need to be made. The Necessary Settings page on my website explains what needs to be done and also contains a list of alternate plain text editors you might want to download and use.
Browser

You'll be using a browser to check your progress. It doesn't matter which one. I use Firefox because it is easy to locate the file I want to test. Open Firefox. Got to "File" --> "Open File". In the popup that appears, navigate to the file you want to open and click, "Open"
Basic HTML Page

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. I created a little exercise HTML Introduction on my website so that you could get familiar with some of the HTML tags while actually creating a very simple HTML page. When you reach this statement, "Congratulations! You've made a very simple webpage." you can come back to The Studio to see what we might do next or ask questions or share information.
Choosing a Template

Later on, we'll choose our own templates, but to start out, we'll use some templates I've already used with some exercises. I'll give you the first link to download in the next post. However, you might want to look around at what templates are available. The site I used before I started creating my own templates is Templated http://templated.co/ (formerly freecsstemplates.org) The site contains a collection of over 800 free, Creative Commons-licensed CSS, HTML5, and responsive site templates. It requires a visible link back to Templated for using the template, but you can leave the linkback that is in the template footer

After people have had time to digest the information in this post and the linked articles, we'll get down to brass tacks and learn how to change some things in a template by changing the CSS in the external stylesheet.

If you have any questions, suggestions or tips about what has been posted so far, please share.