Introduction
This tutorial is based on the Introduction to HTML seminar that I used to teach at the University of Albany’s Interactive Media Center in the University Library when I worked there. It is not intended to be a comprehensive class in HTML. Rather, this is a simple overview so that participants can become familiar with the most crucial component of Web pages.
Let’s get started!
About HTML
HTML (Hyper Text Markup Language) is the central core on which all Web pages are built. Although there are new types of technology and coding options, including PHP, ASP, XML and others, traditional markup language is the place where “all things Web” starts.
Some Web editing software publishers claim that it is not necessary to know HTML if you use their programs to build Web pages. However, this is rarely the case in actual practice. In almost every instance at least some knowledge of HTML is helpful. WordPress, which is a content management system (CMS) is a similar case. This site is built and managed by using WordPress, but knowledge of HTML remains useful. This is also applicable to other CMS’.
In this tutorial we will guide you through the basics of writing HTML code. It is important to realize that there is no better way to learn and understand the code than to actually write and use it. This tutorial will get you started on your first steps toward becoming knowledgeable about the code.
What Does HTML Do?
HTML is a markup language. As such, it is used to specify what things are. This may sound a little complicated or confusing, but it is actually quite simple. For instance, if we write some text we might specify that it is a paragraph. We then use HTML to “mark it up” as a paragraph. If we write another segment of text we might specify it (mark it up) as a list or a heading.
What Does HTML NOT Do?
“Modern” HTML does not specify appearance or action. In the “old days” we had specialized HTML tags that were used to make things look a certain way. For instance, if you had text that you wanted to be red you wrote something like “<font color=”ff0000”>This is red specified in hexadecimal.</font>”. You could also cause text to blink or make images float right or left.
Today appearance is controlled outside of HTML by CSS (Cascading Style Sheets). Action is usually managed by JavaScript.
Technique
Many people try to write Web page code as if they were creating a term paper. They start at the beginning and continue on through the middle to the end in a linear fashion. HTML code consists of two types of tags. There are the container tags and the single part tags, often called “non-container” tags.
Container tags have a opening part and a closing part with the “stuff” that the tag controls inside. An example is the tag that creates bold text, <strong></strong>. <strong> is the opening part and </strong> is the closing part.
If we write a code snippet it might look like this, “<strong>This is bold</strong>” and you can see the bold text in between the tag parts.
An example of a single-part tag is the line break, <br> which merely stops a line of text at a specific point. This is used where a line must end after a particular word.
Because Web pages will have lots of code, trying to remember which tag has been opened or closed can be extremely difficult. The best technique for writing code is to make both the opening and closing parts at the same time, and THEN insert the material between the tags. This prevents the problems that arise when a tag is accidentally left unclosed and is the technique that will be used in this tutorial.
Single-part tags can be inserted as required anytime.
Tools
Writing HTML code can be done simple word processor. But it is important to note the average code write should never use a processor such as Word, WordPerfect, OpenOffice, or similar. These “high end” word processors are too smart and will try probably to insert their own markup codes.
The best software to use is also the most basic. NotePad is a perfectly suitable tool for writing HTML. Some programs that are specifically designed to create Web pages, such as Dreamweaver, Notepad++, Brackets, and others have special HTML writing functions that allow you to create straight code. There are also programs such as HTMLKit (an oldie but goodie) that function as “code insertion” programs where the user doesn’t necessarily write the code, but rather instructs the program to insert blocks of HTML. Even though these programs make writing code easier, it is still necessary to know the code. You can’t write it if you don’t know it.
In this tutorial we suggest that you use NotePad or a similar program.
Up Next
In our next segment of Introduction to HTML we will set up our Web site. Introduction to HTML: Part 2.
Headings
Headings one of the objects on a Web page that HTML and XHTML are intended to identify. Headings tags that are used to specify importance and are defined by using the “h” tag. There are six heading tags ranging from 1 to 6 with 1 being the most important and 6 being the least important.
Imagine that you are making a traditional outline for a paper or article you are writing. It might look something like this:
I. Introduction
A. Welcome
II. Main Message
A. Part 1 – What I did on my summer vacation.
1. Getting to the airport
2. Flying on the airplane.
a. Visiting Alaska.
b. Seeing a bear.
3. Flying home.
B. Summing my vacation.
III. Conclusion
The most important parts of the outline are in Roman numerals, the second most important parts are noted with capitalized letters, and so on. Headings follow a similar pattern. The most important h1 would be comparable to the Roman numerals, the h2 would be second most important as is the capitalized letters. This continues on down through the h6 tag.