HTML Tutorial

Chapter 1: Basic Concepts of HTML

Elements and Attributes

All HTML pages are made up of tags called elements. These elements are responsible for the design and structure of the page. For example, if you wanted to insert a paragraph onto your page, you would enclose the text inside paragraph elements. It would look something like this:

Most elements have two tags, an opening tag and a closing tag. The closing tag has a forward slash (/) in front of the element name as shown above.

Attributes are used to define the properties of elements. For example, if I wanted to align my paragraph to the right, I would use the align attribute:

Here, the align attribute is placed inside the opening tag of the paragraph element. The attribute is given the value right.

The img element is an example of an element that does not need a closing tag. This element would display an image on the web page.

The src attribute is given a value of the path of the image to be displayed. Notice how the tag ends with a space and a forward slash. This is very important and is part of the XHTML 1.0 standard. Some web designers neglect to include these in the tag, so you may see source code without it, but I assure you it is important.

Nesting

In a web page, there will be many elements and tags that make up the overall design. It is very important that all tags are properly nested. This means that the last tags opened are the first tags closed; you can’t close a tag before all of the tags opened after it are closed.

Improper nesting:

Proper nesting:

Notice that the h1 tag must be closed before the b tag. The h1 element produces a large header, while the b element makes everything inside of it bold.

HTML Layout

Now that we have gone over the important properties of how the tags must be organized, we will move on to how the page is constructed. There are many tags that make up a proper html page, all of which must be properly nested.

This may seem quite complicated, but it’s really not. The First element that begins with !DOCTYPE is unique to XHTML and specifies which DTD or Document Type Definition to use. The main DTDs are strict and transitional. I find that it is much easier to conform to the transitional DTD at this time.

The next tag begins the HTML document. The title element specifies the title of the web page and is nested inside of the head tags. The body tags enclose all the elements that are specific to the body and layout of a page. As you can see, I created a large heading in the body of the page.

Creating an HTML Page

In order to create an HTML page that is viewable by a web browser, you need a text editor. If you use windows, notepad will work as a basic editor. Crimson Editor is a good option for windows if you want more advanced features.

First, you should write or paste the previous example into the editor. Next, you need to save the file. Choose Save As, and save the document as index.htm. It is important that the file extension of your HTML documents is always .htm or .html. This allows the browser to detect that it is HTML and will interpret it as such. Finally, you can open the page with your web browser and view the results! Your first web page!

As you progress through the chapters, you should play around with some of the new material, using your web browser to view the results. Practice makes perfect!