Intro to Web Design: HTML Basics

HTML or hypertext markup language is a computer-based language used by web browsers to interpret web pages. When viewing a page on Internet you are actually viewing an interpretation based on what your browser reads in the webpage file. When viewing an image on a website you're actually viewing an image that is held in another file. The image itself is not contained within the webpage that you're doing, rather a link to that image is placed within the website along with the dimensions to define the size of the image. Although there are a lot of fancy web design programs such as Dreamweaver that can assist in the designing of HTML files, all you really need to design a website is a notepad program. A website is simply a text file with HTML code written in it. If you want to create the basic layout of an HTML file, all you have to do is open up a notepad file and follow the instructions below.

In HTML there is a basic concept that is used with almost every code that could be written in the file. Specific elements of HTML are called tags. For example, if you wanted to insert an image into a webpage, all the code associated with inserting that image would be considered a tag. Every tag in HTML must be opened and then close. To illustrate this I will use the HTML tag. The HTML tag is used at the top and bottom of the entire HTML document in order to define that document as an HTML document. The HTML tag would look like this...

As you can see, I have inserted two elements. Although both have the letters HTML, the closing tag is slightly different. The forward slash is added just after the less than sign to close the tag. Everything between the two tags would be HTML. Anything written after the closing tag would not be read by the browser. Similarly, anything written before the open HTML tag would also not be read as part of the website. If you attempted to insert an image before or after the HTML section, the image would not appear.

Within an HTML tag there are two sections that make up a website. The first section that makes up a website is the head section. The head section contains the website title, keywords, and other information vital to the website operation. Nothing within the head section of the website is visible within the browser. After inserting the head section your HTML document, your page should look like this...

As with the HTML tags, the head tags also need to be opened and closed. Although I have indented the head tags in front of HTML tags, it is simply a matter of code cleanliness. In essence, your code could look like this and still operate just fine...

The final section of an HTML file that I will discuss in this article is the most important part of the website. This section is the body section and is defined with a body tag. The body tag contains links, text, image codes, and all other information that you want your website visitors to view when visiting your site. After inserting the body tag into your HTML code your document should look like this...

You must make sure that the body open and close tags are written after the closing of the head tag and before the closing of the HTML tag. Inserting the body tag in any other manner would cause errors in your webpage. Now that you have created your first HTML document, it is a good idea to create a site folder in order to organize your test website for future editing and design. First you should create a folder in your computer called test site or my site. The folder name doesn't really matter, however it should be something that you remember as being your test website. Once you create that folder, make sure to "save as" your text document. Since this is going to be essentially your homepage you'll name your page index. However, it is not enough to simply save it as index as her computer to simply save it as a tax document. When "saving as", you must type in ". HTML" after index. Putting in the . HTML will allow your computer to save the file as an HTML document.

In order to check to make sure that you save it properly, go to the folder that you save it in and look at the document icon. The document should not look like a notepad document anymore. When you save an HTML document it will save with the icon of your default browser. If your default browser is Internet Explorer the document will show up as an Internet explorer document. Now you have created your first HTML document.