Introduction to HTML

The development of web pages is based on the use of a "programming language" called "Hypertext MarkUp Language (HTML)". Although many web design editing software programs proclaim that there is no need to understand or know HTML, it is nearly impossible to work on web pages or design web sites without at least a small understanding of basic "HTML coding".

The information listed below is not going to make you into an expert in HTML. It is given to you to use as an introduction for learning some of the most widely used codes for web formatting. There will be a "Review Questions" sheet that will accompany this lesson. Use the sheet as a study guide, but don't just answer the questions. Read the entire material contained here. Many students just try to answer the questions "out of context". That means they skim through the material to find only the answers to the questions. This is a poor way to approach this type of learning. Remember, you are the person responsible for learning this material. This can only be presented to you. You must be the one who takes advantage of it.

Hypertext Markup Language (HTML)

HTML is a "markup language" that follows rules set up in a more complex language called "Standard Generalized Markup Language (SGML)". HTML is constantly evolving. This means that there are programmers and designers continually working to improve and expand the capabilities of HTML. Although this sounds great, it really can create problems viewing pages in older browsers. If this sounds a bit complicated, let's try to simplify things.

HTML is basically a "page description" language. A page description language is actually used by computers to send files to printers. Think of your computer as a printer. HTML files are read by your computer. Then the computer uses the browser software to interpret how the page will look. After it processes this information, it sends the image to the monitor screen. The HTML "describes" the way the page is going to look.

The HTML "code" consists of text mixed with special "instructions". These instructions are called "tags". "Tags" are the important part of HTML. They are the "descriptors" that tell the web browser software how to display the image. So, "tags" are really the "code" that you hear HTML programmers talk about. Let's look at an example:

This is a bold word.

This is how the sentence above would look before it is "read"
by the browser software:

In the example above, you have seen an example of a "tag". The tag is "B" (always enclosed in brackets < >) which means bold when read by the browser software. As you can see, tags are always used in pairs. The first tells the browser to begin applying the tag and the second tells the browser to turn off the tag.

The example above may seem like an oversimplification of HTML, but it gives an excellent example of how the process works.

Creating HTML Documents

One of the best things about HTML is, unlike other computer languages, it can be created without any special software. Why then, you would ask, are there so many web design programs for sale? There is a simple answer for that. Most people view learning any new language as difficult. So, these programs promise that there is "no need to learn any HTML" to use the software. That is a real incentive for many people to begin creating web pages without learning HTML. I won't lie to you, I am one of them. I never had the time to sit down and learn HTML, and I have created this entire web site with very little knowledge of HTML. However, I will honestly tell you that I have had to go into the HTML and change certain things. That is why it is good to be able to learn at least a little bit of HTML before you get into designing pages.

HTML documents can be created in a number of ways, however, it is possible to get started right away, without purchasing any software. As long as you have Windows®, you have access to a simple text editor. That is all you need to begin creating web pages. There are a few other ways to create web pages too. Here is a list and description:

• Word Processor - Word processors are the software programs that we use to type things with. They are for creating letters, reports, etc. However, they can be a useful tool for typing HTML pages. As long as you insert the proper tags, and save the file as a "text" file with an .html extension, the page will display properly in a web browser. Newer word processors also include an option to save your page (WITH all formatting such as bold text, underlines, etc.) as an HTML page automatically. So before you start looking for special HTML software, check out your word processor.

• HTML Tool - An "HTML tool" is a software program that assists you in creating HTML, but hides some of the details from you. Some older HTML software programs were of this type.

• Graphical HTML Editor - This is probably one of the best types of software to use if you are already an artist and designer. This type of program allows the user to work on pages as if they were working in a page layout program. It allows more artistic freedom, and is fairly easy to use. Templates are also featured on most of these programs that allow inexperienced designers to utilize pre-created templates. Most also allow the designer to view the HTML coding to alter it if necessary. However, this is sometimes confusing software to use since it is still bound by the limitations of what HTML can accomplish in a browser. This may leave the designer feeling somewhat frustrated when they can not accomplish a layout that they have planned.

Many designers do not begin designing web pages in any of the ways described above. They use traditional designing methods. First they sketch out a "flow chart" of how the pages will be related to each other. Then they create comprehensive layouts of their pages in an image editor like Adobe Photoshop®, Corel PhotoPaint®, or PaintShop Pro®. Then they "code" the pages, or have them coded by a programmer. This allows more artistic freedom in designing the pages, and some of the most impressive sites on the Web are now created in this manner. Images created for the comprehensive layout of the web pages can be taken and modified for use in the actual page as well. That will be discussed in another section of our instruction that concentrates on creating web graphics.

HTML Tags

This hyperlink will open a page in your Adobe Acrobat Reader that you will print out. In order for you to complete your Review Sheet assignment, click on the hyperlinked text, and print out the page on the black and white laser printer. Staple the sheet to your Review Sheet. Then hand in both sheets .

htmlcode.pdf

Return to Web Design Home Page / Return to Academy Home Page / Top of Page