HTML Introduction

Hypertext Markup Language, or HTML, is the language used to define the basic structure of web pages. Although, in Dreamweaver, we work with a visual, nearly WYSIWYG, interface, behind the scenes HTML is being created for us. There are a number of different versions of HTML being used in web pages these days. One, called XHTML, was touted to be the Next Big Thing a few years ago. However, this has now been replaced by HTML5. You will also probably still find many pages using version 4.01 of HTML. On this site I try and make all the examples use HTML5 - however, I may not have updated everything yet...

Complicated? Not really, as you'll see.

Whilst you don't need to understand HTML to use Dreamweaver, if you want to be the best web designer you can be, you will need to have some understanding of how HTML works behind the scenes.

What Does It Mean?

First, what does HTML mean? Well, hypertext is just any page of text that contains references (called hyperlinks) to other pages of text. That sounds like a web page to me! Next, a markup language is a way of annotating the content of a page to identify various components in that content. When we look at a web page, we don't see any of the actual markup itself, but we do see the effects of the markup.

Some Simple Examples

Consider the heading above. This is displayed in a bold font, slightly larger than the main text. In fact, this text is declared as being a level 3 heading. If you were to look at the code for that heading you would see the following:

<h3>Some Simple Examples</h3>

The <h3> at the beginning of the text and the </h3> at the end are called tags; specifically, the start and end tags for the h3 (level 3 heading). The two tags, together with the content they enclose form an element. In HTML any element that has content must have a beginning and an end tag which define the scope of the element.

Every text formatting feature and page element is actually created by some combination of tags. As a further example, if I make a piece of text in my paragraph italic by selecting the italic button the text properties, then behind the scenese Dreamweaver wraps the text in <em>...</em> tags, where "em" means emphasis.

Some tags do not contain content, these are called void tags. For example, the tag to insert a simple image, as shown here Smiley looks something like this:

<img src="../img/485.png" alt="Smiley" align="absmiddle" />

Notice that the tag itself ends with />. The / part is optional.

The basic element used to layout text on a page is the paragraph. A paragraph element is created with a <p> and </p> tag pair. If you look at the source for this page, you will see these tags wrapped around every paragraph of text.

There are a lot of different markup tags in HTML, creating corresponding page elements. You can read more about HTML elements on the W3Schools pages here.

Attributes

The additional information shown in the img example above are attributes of or parameters to the tag. So, src is the attribute that tells the browser where to find the image, this is the source of the image. The alt attribute specifies the alternative text for the image, and the align attribute specifies how the image is to be aligned in the page.

There are a number of standard attributes that any tag can have; the class attribute and id attribute are two important ones that we will be using in the following pages. In addition, most tags have have a number of attributes that are specific to that tag.

Next, the structure of an HTML page Next

References