Site Tips

OK, this is a very basic tutorial for those who have never created a website before. If you don’t know where to start your journey to making websites, I’ve got good news. It’s very easy to learn how to create a website! All you need is a computer and a text editor. In fact, you don’t even need a computer. I’ve created simple websites on my mobile phone, though that’s not something I’d recommend you start with.

I’m an advocate of learning by doing, so just open an editor (I like notepad++ for quick editing) and type:

Hello, this is my website!
E=mc^2

Great! Now save the file as ‘index.html’. Next, in your file explorer, double click the file and behold! Your very first website!

All right, that may not have been as impressive as you wanted, but really, that’s basically it! You have a page that you can look at in your browser and it even has some useful information! (I bet you were wondering why I had you write E=mc^2, weren’t you?)

By now, of course, you want more. You probably wonder why all your text displays on the same line in your browser. A browser ignores white space in html files. It uses special code in websites to handle content differently. To see an example, right click on this website and choose ‘View page source’ or something similar, depending on what browser you have. You’ll see a lot of code that has angled brackets which is HTML. Don’t panic, you’ll learn many of them, but even if you don’t want to: you don’t have to. Remember, you’ve already created your first website without them.

The bracketed words are called tags and they come in pairs. They are used to describe the content that’s between those tags. For example, somewhere on the top of the page source you’ll see <title>some title</title>. This describes the t… well… you figure out what it describes. To get back to our example, you can use the tag <br /> to put an enter after your first line. Tags that have no closing tag, are closed with a /, so you don’t have to type <br></br>. Your code becomes:

Hello, this is my website!<br />
E=mc^2

Save it again and open it in your browser. You’ll see the E=mc^2 on the next line now. Pretty cool, huh?

There are a great many tags you can learn, but frankly, you can make perfect websites without them. You don’t type these silly things when you’re writing a Word document, do you? This is because Word does this behind the scenes for you. (Word doesn’t use tags, but some other markup language.) So what you need is a different editor that lets you create a website using a dedicated editor, like you use Word write documents. I don’t use editors for my websites anymore, since I write most code by hand, but apparently a very good free HTML editor is HTML-Kit.

So now you know how webpages are created, you can create a website. You can user hyperlinks to link your pages together. Create another file in your editor with the following code in it:

E = energy,<br />
m = mass,<br />
c = the speed of light in a vacuum,<br />
The 2 indicates the squaring of the c.

Save this file as explanation.html. Open your index.html again and change it to:

Hello, this is my website!<br />
E=mc^2 (<a href="explanation.html">explanation</a>)

Open the index.html in your browser, and you’ll see a link that you can click on, after which you’re taken to your wonderful explanation page. Now you can make your website as big as you want.

After this, it’s just looking at other pages and find what else you can do with HTML and other languages used to describe and manipulate web content. Examples are javascript (used often for dynamic interaction with the user) and PHP (used for handling information on your page before you get to see it in your browser). If you’re of the level of this tutorial, I wouldn’t go into it just yet, but it might be useful to know that there’s so much more possible than what you’ve just seen.

So, this concludes my basic ‘how to create a website‘ tutorial. You have learned the basics of creating websites, some HTML and you’ve seen that you can learn a lot more by viewing the page source of any website you encounter. Remember that you can make it as difficult as you want, with tags, and images, and movies, etc. But in the end, people visit your site because of your content. If they don’t like your content, it doesn’t matter how good your HTML knowledge is, they will go away faster than you can say ‘hyperlink’.

Published on July 18, 2008 02:23 am under Creation