By Vashti
This is the start of a series of tutorials explaining the mechanics of putting together a site without paying through the nose. Throughout this tutorial series I'm going to use a program called Notepad, which is installed and free to use on every PC.
These tutorials will be covering:
This series is not going to cover every single aspect of running a web page. It will just give you enough information that you will be a competant webmaster or web mistress at the end of it.
Let's begin!
Web pages are just text. You might see an image or a colour when you open up a page in a browser, but the document that tells it to show that colour isn't coloured, and doesn't have that image embedded in it. HTML pages are just a text only document that tells the browser how to display the page when it reaches your computer.
The example below might look complex but HTML is easier than you think.
You don't have to spend a fortune on website programs. They help and they speed up the process of updating your site, but all of the parts of putting together a website can be done with some wonderful free programs that come with your computer or are available for free on the internet.
This first tutorial will focus on building a basic web page skeleton. We will not be creating pages with Sims content just yet, but we will get there.
Go to your Start button on the bottom left of your computer desktop. Click on that button, followed by All Programs, Accessories and finally select and open Notepad.
The first thing I need to explain to you is that HTML coding has some basic rules it needs to follow:
In your notepad document, type <html> and </html>.
Inside your <html> </html> codes, type <head> </head> like so:
Inside your head codes (<head> </head>) type <title> </title>. Within that code, type My First Content Page, as shown in the picture. This is what I mean by nesting the code, as you can see the head and html codes sit neatly outside the title code.
The body of your page comes directly after the head. So, in this case, we're not going to nest it inside the head tag. We will still be nesting it inside the html tag, though.
Type <body> </body> right after the closing head tag ( </head> ). Inside the body tag, type My Sims Content, as you can see pictured below:
Note: I've also added some spaces so you can more clearly see the code lay out. Something very important to know about html: Unless it's created by a special code html ignores any white spaces you add to your page, so you can add as many white spaces as you like if it helps you see what you're doing.
Save your notepad file as simscontentpage.html
Saving it as .html is the other basic part of the equation that tells the browser what kind of document it's dealing with. The first part being the code with in the page. There are other things I will be teaching you later on to make your code compliant, but this will do for now.
There are three ironclad rules to make sure your files don't cause problems later:
Name and save your file and close Notepad. Now we're going to preview the file in your browser.
Open your browser and select File, then Open in the menu at the top left of your browser. In this instance we're using Internet Explorer because it's the most common browser people use.
This takes you to the Open box. Click Browse.
Find your newly created html file on your computer. Select it and click Open.
Now that your file is selected, click OK.
Here we have our first unglamorous and boring HTML page. As you can see, we've changed the title bar and written some text that successfully appears in the browser. Congratulations! You have just learned your first pieces of HTML!
In subsequent tutorials we're going to add different fonts and formatting, different colours, images, and links to zip files to this page. Keep this page to be added to when you do the next tutorial.