Visit our FaceBook Page

Creating your first web page (Basics of HTML documents)

To do this, go ahead and open your text editor, for this example just use a program like Notepad for windows or TextEdit for Mac. Once we move on from the basics, well start playing with more advanced editors such as Dreamweaver or Notepad++.

Create a new file called "myFirstWebPage.txt", it doesn't really matter what you call it as well get to naming conventions later. Now technically web pages will have the ".html" or ".htm" file extension but because we are not yet using an actual HTML editor, we will leave it ".txt" for now.

Open the file you just created using your text editor if it's not already open and start the beginning. The canvas is fresh...

HTML documents, being tag based, are defined with, well,.. A tag! The HTML tag to be specific. So, to begin your document, type "<HTML></HTML>" without the quotations. The rest of your document will be between these tags. From here, you will want to divide your document into two main parts, the "head" and the "body". You will do this by inserting the tags "<head></head><body></body>" within the HTML tags. Your code should now look like this:


You probably noticed the indentation of the code, it's not totally necessary but do yourself and the rest of the world a favor and INDENT YOUR CODE! Yes, I typed in caps, it's that important. Because of the nested nature of tags, think one tab space for each nest. It will make locating things that need changing much easier. If you get in the habit of not indenting your code, you're going to waste a lot of time and you're going to go through a lot of aspirin.

The difference between the "head" and the "body" of an HTML document is that the head section contains information about the document, such as meta information (link) and is not displayed in the rendered version of your webpage. The body section contains the content you wish to convey to your website visitor(s). Every well formed HTML document has these tags and all though the information found in the head tag is not visible to your visitors, it is equally important. For more information regarding the HTML head section, click here (link).

To finish of this tutorial, let's insert some actual content into your web page; between the "body" tags, type "This is my very first HTML document.". Now if you remember, In the beginning of this section, I had you create this file with the file ext ".txt", if you save this file and try to open it in a web browser like say Internet Explorer, Safari, or my personal favorite Google Chrome, you will notice that it outputs everything you typed, tags and all. This will not be very helpful to the end user so to see it render properly, rename the file to "myFirstWebPage.html" (notice the extension is now ".html" rather than ".txt")' now open the newly renamed file in your browser and you should only see the line you typed between the head tags.

Ok, if you have gotten this far, than I think it's safe to assume that it is time to get yourself a proper code editor. Visit my page about code editors here and download and install one. From this point forward we won't be working with .txt files.

next - Headers and Paragraphs

Reader Comments