Saving your masterpiece
Now that you have your first page written, you need to save it to your computer’s hard disk, and then open it up in a different program (your web browser). This part can be a little tricky, so please follow along closely.
When you double-click a file on your computer’s desktop, the computer knows what program to open the file in by checking the file’s “extension”. This is the characters that come after the name of the file. So, for example, .mp3 files will open in a program that can play music, and .txt files will open in a text editor.
You need to give your document a file extension of ”.html”, which will tell it to open the file in your web browser, such as Internet Explorer, Firefox or Safari (at least one of these programs will have come with your computer — in fact, you’re reading this in one of them right now!).
Right now you should be editing your HTML page in a text editor, which normally saves files with the extension “.txt”. We want to make it save in “.html” instead, so, in your text editor click File → Save As…. Find the place on your hard drive where you want to keep all your pages (I would recommend you create a new folder on your desktop and keep all of your documents together). If you use Microsoft Windows, there will be a box labelled “save as type”; change it to “all files *.*”. This means that you can save the data (in this case, some text) into any format. Now type in the name index.html for your file and click save. Finito.
sourcetip: After you have done this once, the next time you change your code, you will only need to press Save, not Save As…, because the computer now knows this is a HTML file.
Your page’s filename can consist of any combination of letters, numbers or _ (underscore) and — (hyphen) characters. It is a good practice to start the filename with a letter and use lowercase letters at all times. This will make sure that you won’t get any capitalisation errors when people try to type your page’s address into their web browser. You should always call your homepage index.html — this will be important later on.
- Question: how come I sometimes see some pages named “something.htm”?
-
Well, a long time ago back in the 1990s, file extensions were limited to only three letters, hence “.htm”. You could name all your files using .htm as the suffix, but there are so few people with operating systems that old that you’re better off just using .html and being done with it.
- Note to users of word processors
-
If you’re trying to use something like Microsoft Word to make your pages (which is a really bad idea), you don’t want to be saving all of the editor’s values for margins and formatting etc. when you save your html file, as they can’t be read by your browser. So when saving your file, make sure to save it as text-only, and only the things useful to your browser will get saved.
Again, I implore you all to use just a simple text editor while you are learning HTML. It will mean that much fewer things can go wrong, and you will learn so much quicker!
A Basic Page Format
All pages follow this basic structure. Let’s start with the first tags you’re going to learn.
Tags, eh?
Yeah. They are the things between the <> brackets. I’m sure you’ve seen them in someone’s code before, but if you haven’t, right-click this page and select “View Source”. The code that makes this page will appear. Have a quick glance through it. Yes, it probably makes little sense yet, but that doesn’t matter at the moment. See how, later on, there’s some text? It’s the words you’re reading now. Surrounding all that is a load of stuff, all being encased by <>s. That’s all the HTML that goes into making this page.
Structure of HTML Elements
Tags follow a common structure too. Some of those tags you can see are ”start tags”, like , and others are paired with them and called “end tags”. They look like . Together, a start tag and an end tag form a HTML element. A start tag opens an element and an end tag closes it again.
For example, to make text bold, you use the element. So, at the point in your text that you want the bold to start, you just stick the angle-brackets around that and put , and when you want it to stop, you put . An end tag is simply the start tag with a forward slash in front of the element name. Some tags won’t need that end tag, but most do, so don’t forget it.
So let’s make a page
Oh yeah. Ok, first step. Open Notepad, or any other text editor. Type this:
These are the standard start and end tags on any page. Note that when I say “standard”, that means “you must put it there”. HTML elements can contain text and other HTML elements inside them, and these two tags will contain the rest of the HTML that makes your page.
Now we’ll add in the rest of the structure. Modify your page to this:
Very Important
That complicated looking bit at the top isn’t something you need to worry about just yet. It basically tells your browser which version of HTML you’re using in your page. You are going to be using HTML 4.01, the most recent version of HTML. Later you may move to a newer version, but HTML 4.01 will be perfect for most of your sites.
HTML pages are made up of two distinct parts — the part, and the part. The part contains things that won’t appear on your page. Most of the elements that go in the part are advanced stuff for search engines and the like, so the only one you need to know for now is .
The text you put into the element is the text that appears at the very top of your browser window when you view the page. You can type whatever you want in that. No other HTML will work in here, although special characters will. Don’t forget to add the , because without it, that bar will have the of your page in it, and that’s just nasty. This text will also be used if a reader bookmarks your page, and in search engine listings, so take the time to write a unique title for each page.
The section is the main part of your page. Everything between those two tags will be visible on your page. So type something there now. Whatever you want, I don’t care. Be spontaneous.
Now your page looks something like this:
That’s about as complicated as I’m going to make this tutorial. If you want to format your text, check the next page where you will find all the tags needed to make your page more presentable. For now, stick with saving your page and checking how it looks…
Having a look
Well, you’ve been toiling away on this page for hours, has it paid off? Let’s check. Create a new web browser window to open it in (so that you can keep this page open when you do it) — press Ctrl + N. Now, in that new one that should have opened, go to File → Open. Click Browse… and find the file you just saved (“index.html”, unless you were cheeky and called it something else). Click the Open button. Your page will appear in all it’s glory. You did it! Huzzah!
Ok, now smile.
In the next tutorial, you will learn about more of the options you have to format your text.
Keep Learning // Basic Formatting → Go! Go!
Other My First Site Articles //
My First Page ·
Basic Formatting ·
Basic Links ·
Basic Images ·
<body> Attributes ·
Basic Web Design ·
HTML Tag Reference ·
Uploading your Site ·
What’s Related //
Homepage · Full Index · Section Index
