What is HTML?

HTML stands for Hyper Text Markup Language. It is the computer programming language that web pages are written in.

When you use the Article Manager to publish your web site, a lot of the HTML work is already done for you by your web designer. Sometimes adding content to your site requires nothing more than typing words into a form on the screen.

But sometimes you want to make your pages a little more interesting, and so there are a few HTML tags that you need to know about.

Web pages are simply text documents full of HTML tags that surround the words and images that you want people to see.

Web browsers, like Internet Explorer or Netscape Navigator, read a web page document and interpret the HTML tags into how the words and images should be displayed on the screen.

An HTML tag is the actual code you type into your web page document to format the way your web page will look.

An example of an HTML tag that tells the browser that you want to start a paragraph is this:

<p>

The HTML tag used to tell the browser to close a paragraph is this:

</p>

A tag is surrounded by a less-than sign (<) and a greater-than sign (>). There is usually an opening tag and a closing tag that work together. They tell the browser to start doing something and to stop doing something. Whatever the tag tells the browser to do, it does it to everything in between the two tags.

So a complete paragraph would look like this in the HTML document:

<p>This is my paragraph.</p>

Closing Tags

Every time you open an HTML tag in your web document, you need to make sure that you also close it.

If, for example, you use a paragraph tag like this:

<p>

then after the end of the paragraph you close it with a tag like this:

</p>

Every tag should be closed. There are some HTML tags, however, that stand alone. They do not surround any other text. In that case there is a special way to close the tag.

For example, the line break tag does not surround any other text. This is the old way of making a line break tag:

<br>

Newer versions of the HTML language, like XHTML, require all tags to be closed, so how do we do it? Like this:

<br />

The good thing is that older browsers can read this tag and not get confused, so it still works. That, by the way, is called backwards compatability.

Proper Nesting

The term nesting means that HTML tags are required to be placed in a certain order when you use sets of opening and closing tags around the same text or within one another.

Whenever you open a tag you also have to close it (with a few exceptions). Some tags can be placed inbetween the open and close tags of other tags. This is called nesting.

Properly nested tags look like this:

<b><i>Bold and Italic</i></b>

Improper nesting is when you open one tag, then open a second tag, then close the first tag, then close the second tag, like this:

<b><i>Bold</b> and Italic</i>

That is wrong and can cause errors that make your web page do strange things.

Uppercase or Lowercase?

In older versions of HTML, it didn't matter whether your tags were uppercase or lowercase.

This:

<P>

worked just as well as this:

<p>

But now, with the modern languages of HTML, like XHTML, they require that you only use lowercase letters in all of your tags.

So it's best to make it your habit to always type HTML tags in lowercase. That way it's always right.

Attributes

Some HTML tags have options that you can add on to them in order to make them do different things.

These options are called attributes.

An example of an attribute that is available to the paragraph tag is alignment. You can left-align, center or right-align a paragraph by including an attribute in the tag.

Like this:

The name of the attribute in this example is align. The value for the attribute in this example is center.

In older versions of HTML it didn't matter if you included the quotes or not. But in newer versions of HTML, like XHTML, it is required that attributes are properly surrounded by quotes.

For forward compatibility it is best to get into the habit of properly surrounding your HTML tag attributes with quotes.

It doesn't matter if you use double-quotes (") or single quotes (') as long as use the same kind on a single attribute. You can't mix them like this: <p align="center'>

Style Sheets

It is best if you try to separate content from presentation. We do this using Cascading Style Sheets (CSS).

Your web designer will create a CSS file, called a style sheet, that every one of your web pages includes. The style sheet will define certain attributes that are applied to the HTML tags on your web pages. These are things like size, color, margins and things like that.

The main point here is that if you do it right, it makes it easy to maintain and update your web site.

For example, let's say you wanted the titles on every one of your web pages to look a certain way. You wanted them to be in 20 point bold Arial font. You wanted them to be green. You wanted them to be center aligned.

You could do this:

<p align="center"><b><font color="green" size="20pt" face="Arial">My Title</font></b></p>

But what if tomorrow you decide they should be red, or blue, or not bold? What if you have 500 web pages on your site? Then you'd have to edit 500 pages and make all the changes 500 times.

That's not good.

So, although you could use HTML tags and attributes to make all of this happen on your web site, you shouldn't. You should let your web designer define these things in a style sheet.

Then you would code all of your pages like this:

<p class="mytitlestyle">My Title</p>

In your style sheet, the class mytitlestyle would be defined any way you like it and it would apply to every web page on your site. So tomorrow, when you want it red instead of green, your web designer makes the change to one CSS file and instantly your whole web site is updated.

That's why I'm not going to teach you how to use some HTML tags that are better left alone because of the headaches they cause. Learn to trust your web designer and work with him to make your content look how you want it to look using style sheets. That frees you up to concentrate on what you do best, write content for your site.

HTML Tags

Now here are some of the more common HTML tags that you, as a person entering web site content for Sonlight, using the Article Manager, are likely to need to know...

Anchor

This element is what the hyperlinked structure of the World Wide Web is based on. It is used in two ways:

1. Create a hyperlink to another anchor.

<a href="http://www.inquisicorp.com/index.html#gohere">InquisiCorp Corporation</a>

By using the HREF attribute you create an hyperlink, this is a link which points to another document, somewhere on the internet. When a user selects this link, the browser will load the resource that the link refers to.

2. Create an anchor in a document.

<a name="gohere">A specific spot within a page.</a>

When you use the NAME or ID attribute you create an anchor, this is a position inside a document which can be used as the target for an hyperlink.

Bold

Makes text look like this...

This is bold.

Italics

<em>This is italics.</em>

Makes text look like this...

This is italics.

Block Quote

<blockquote>This is a quote.</blockquote>

This is used to enclose larger quotations from other words on the page. Usually it makes the text indented from the rest of the page.

Like this:

This is a quote.

Line Break

<br>

Breaks the current line and continues on the next line.

Heading 1-6

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

The H1, H2, H3, H4, H5 and H6 tags are used to create several levels of headers, with H1 as the most important header and H6 as the least important.

They make text look like this...

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Images

Place an image in the document.

Ordered List

<ol>

  <li>Item 1.</li>
  <li>Item 2.</li>
  <li>Item 3.</li>

</ol>

Create an ordered list of items. Ordered means that every item has an identification in front of it to show the sequence.

Makes text look like this:

Item 1.
Item 2.
Item 3.

Tables

<table>

  <tr>
    <th>Column Heading 1</th>
  <th>Column Heading 2</th>
  </tr>
  <tr>
    <td>Column Text 1</td>
  <td>Column Text 2</td>
  </tr>

</table>

Create a table layout which can contain cells in rows and columns. The cells of a table are specified with the table row (<tr>), table header (<th>) and table data (<td>) elements.

The code above would make text look like this:

Column Heading 1	Column Heading 2
Column Data 1	Column Data 2

Of course tables have many attributes and can get very, very complicated.

Unordered List

<ul>

  <li>Item 1.</li>
  <li>Item 2.</li>
  <li>Item 3.</li>

</ul>

Create an unordered list of items, where unordered means the individual items are not numbered, but have a bullet in front of them.