So you want to build a freesite...



Getting started


The first step is to make a new folder that will hold all of the files that will be in your new freesite. You can name it whatever you want to; no one will see this but you.

Next, open a text editor, and create a new document. For this example, since we are going to convert the old Models Around site into a freesite, let's call it ModelsAround.html. Save it in the folder that you just made for your freesite.

HTML stands for HyperText Markup Language. It is not a coding language like Java or C++, it is a markup language. It uses tags to specify how your browser should interpret the contents of the document. There are opening tags to indicate where an element starts, and closing tags to indicate where it ends. Tags should always be in lower case. The end tag is the same as its opening tag, but with a forward slash ('/') in front of it.

The <head> section is used to tell the browser information about your site, and the <body> is where all of the content goes.


Fake It 'Til You Make It


One of the best ways to learn how to use html is to right-click web pages and choose 'View Page Source'. You can see how other people made their sites work.

If you don't know where to start, sometimes you may want to copy a section from someone else's site, and replace their content with your own. Even after becoming more familiar with html, you will probably want to copy your own headers and such and make changes where appropriate so that you don't need to re-write everything every time.

To save something that you don't want the browser to interpret, but you may want to use later, you can use comments to hide it from your browser.

Comments start with '<!--', and end with '-->' (no quotes).


You may notice that none of the meta tags in the screenshot are followed by a </meta> tag. Tags that do not surround content can close themselves by ending with '/>'. When the browser sees that, it knows that the element is complete.


The <title> in the header tells the browser what it should display as the title for its window or tab.


Hello World


Between the body tags, you can write a message without any other formatting, and it will appear when you open your file with a browser. Even though 'Hello World' is tabbed in twice in the html document, it is left-aligned when you view it in a browser. This is because all adjacent space characters (tab, space, new line) are condensed into one space when rendered.

Now, let's put an <h1> tag around 'Hello World'. This increases its font size, and makes it bold. <h1> is larger than <h2>, <h2> is larger than <h3>, and so on.


We're going to diverge for a bit, and quickly make an activelink for the site from its logo.

The only problem is, it's split across 3 images!

We can create a new image that can be used to reconstruct the logo from its pieces.

Copy the broken images, paste them into the new one, and align them so that they match.

Now that the image is back together, we can crop it to 108:36 so that it will fit in an activelink. The only problem is, it doesn't fit.

Instead, we can disable the fixed aspect ratio, and crop to the edges of the logo.

In the 'Scale Image' dialogue, enter 108 for the width, and click the chain link icon between width and height to let the aspect ratio be broken.

Change the height to 36, and press 'Scale'.

Thankfully, it wasn't squished too much, and it looks fine. We can save it in the same directory as ModelsAround.html as activelink.png. Remember, this should be in the root folder for the site, not in a subfolder.


Back to the HTML

Now that we have an activelink, we can show it on our page. The <img> tag is used to display images. The image that it shows is specified by the 'src="..."' parameter. The default folder when referring to a file on a site is the root folder where the currently open html page is stored. Because of this, we can write 'src="activelink.png"' instead of needing to specify a full path. Image tags technically have no content, so it can be self-closed with '/>'. To put some space between the text and the image, we can insert a line break ('<br />'), which also has no content, so should be self-closed. While we are seeing a lot of self-closing tags right now, they are really the exception, not the rule, for what a typical html tag looks like.

After refreshing the page, we can see the new image below the existing text.


To Be Continued...