How to Build a Website with Notepad or other Free Text Editors

Websites are constructed in a langage called HTML, which stands for Hyper Text Markup Language.  The language consists of several tags used to layout and refer to other pages, code or components. This article will introduce you to what a tag is and provide you with some basic tags to get you started.

Tag Basics

Generally tags come in pairs, an opening and a closing tag. Tags are formed surrounding a key word with the greater than and lesser than symbols, the closing tag also contains a forward slash.

The HTML tags are the outermost tags in a web page, these tags surrounds all other tags, meaning that all other content of the web page should be found inbetween the opening and closing tags.

Some other basic tags you will find are the HEAD, BODY, DIV, SPAN, A, P and IMG tags.  A breif explanation of the purposes of each of these folows in addition to an example using all of the tags discussed here.

 The HEAD tag provides a location where references to other files, scripts and styles can be included.  The contents of these tags contained in the tags will generally modify the functionality of other tags in the page, provide scripting support, interact with search engines, describe the web page and identify the page author.  In basic web pages, you may find that the tags are empty.

 The BODY tag is where all the formatting tags for the web page go, in between the body tags you will put your text, links and image tags.

 The DIV tag is used for dividing the web page into sections and other formatting functions. The DIV tag is a block element, this means that when you use a div tag, it will be on a line by itself unless it is modified by setting different attributes.

The SPAN tag is th inline equivilent of the DIV tag, it is also used for sectioning content and formatting, the difference is that it can reside on the same line as other inline elements.

The A tag is known as the anchor tag, this tag is used to make clickable links, applying various attributes to this tag allows you to adjust size, color, whether it uses an image, the actions taken when clicked and more.

Finally the P tag is also known as the paragraph tag, it is another block element used to divide text into paragraphs.

The image below shows how each of these tags look in a simple web page.  If you wish to see this page run, copy the text into a text file and save it with a ".html" extension.  Once this is done, you can open the document and it will come up in your web browser.

After reading this article you may have find yourself asking this question:  Why would you want to build a website in a text editor when there are so many good applications out there than you can design a site with?

Here are a few Answers:

• You don't get the level of customization with a web design tool that you get when working at the code level.
• In order to work at that level, having a good understanding of HTML JavaScript and CSS is essential.
• Once you are beyond the basics, any good web designer knows they cannot escape completely from coding.
• You may find yourself needing to track down bugs or update someone else code - these will make it necessary to look at the design at the code level.
• If you find yourself in a situation where a design tool is unavailable and you need something quick for a demo, a text editor is always available.