If you've ever used a rich text editor like MS Word, you more than likely have seen "Heading 1", "Heading 2", under the style drop-down menu. There's good a reason for those default styles. Well-formatted documents should be hierarchical. This means as you drill down from topic, to sub-topic, to sub-sub topic, the headings should become smaller and smaller or at least have a slightly different style (just don't go overboard) making the document easier to read. HTML already has these styles built in with tags like <h1>, <h2>, etc. Why not use something that's tried and true?
Obviously the first step is to create a HTML document and save it as "index.html". In order to modify this document you must use a basic text editor like notepad, BBedit or Text Edit. Here's a blank HTML document for you to start with. Just in case, a HTML document should start with <html> and end with </html>. Everything else goes between these tags.
Let's add your website's title to the document body between the <body></body> tags. As I said above, headings are built into HTML so wrap the title of your website with the <h1></h1> tags and add this within the body of your document.
Just like the table of contents of a book, a website needs a table of contents as well. The difference is that each section of a table of contents on the web is hyperlinked in order to jump to that specific page. These days the standard is to put this table of contents into an unordered list. So let's create this list with say five different sections. Don't worry about the names for now, that can be changed later. Under your website title add...
Since we are building a website and not a static document, we'll need those sections hyperlinked. For now, add some dummy links using a pound sign (#) and as usual, you can change these links later.
Beyond the title, every page on your website should also have a heading offering an overview of that particular page's content. As I said above, this heading should be hierarchical and since we already used the <h1> tag for our website's title, we'll use the <h2> tag for the page heading.
All right, it's content time. Websites always have something to say so drop in some paragraphs of dummy text for now. I generated this text using a Lorem Ipsum generator. Head over to that site, generate some paragraphs and copy/paste it into your html document. Each paragraph should be wrapped with the standard paragraph tag <p></p>. Each paragraph should look like this...
Last, we need a footer for our web page. Footers can be used for several different items such as a copyright, lower level navigation, credits, etc. Just like the paragraphs, wrap the footer text with the <p></p> tags.
Now take a look at your document in a browser and it should look like this. That's that, we've created a well-formatted HTML document. It may not look like much but don't sweat it, we'll get there. You may be wondering what happened to the topics menu you saw in the bare-bones example, we'll get to that later. Feel free to download this sample.