Getting Hyper

HTML Basics

Home pages can be simple or complex.

Most home pages are written in HTML - HyperText Markup Language.

HTML is based on tags. For example: <center> </center>

HTML files can be created using a text editor (Notepad), a word processor (Word), or with HTML software applications: HomeSite, Dreamweaver, FrontPage, etc.

The HTML source code of home pages can be viewed in Netscape by selecting View, Document Source, or in Internet Explorer by selecting View, Source.

There are HTML tags for all elements of a web page, including hypertext links, displaying images, showing backgrounds, playing audio, etc.

Some HTML tags are interpreted differently by different browsers.

Understanding HTML

Hypertext Markup Language (HTML) is the basic building block of the Web page

What is HTML?

Hypertext Markup Language -- HTML -- is a streaming text language that uses tags to format text, create hyperlinks to other places, and insert  images, sounds, and video.

HTML files live on a server. When a web browser requests the file, the server sends across one long unbroken string of ASCII text. The browser turns the long string into a viewable page. Any formatting, extra spaces, or unrecognizable characters that you put into your HTML file will be completely ignored by the browser. It turns anything it doesn't understand into a single space.

All HTML documents must have a filename extension of .html or .htm. For example, the name of this file is basic.html. The browser looks at the filename extension and knows to interpret the file as HTML tags rather than straight ASCII text.

A core set of HTML tags are standard, while others are only supported by certain browsers. The status of the "standard" and "non-standard" tags is always changing and it is important to remember that your HTML file may display differently on different browsers.

Tools You Need

To create an HTML file all you need is a simple text editor, such as Notepad.  You can also use word processors such as Word or Publisher and save the files as html.

HTML-specific editors also exist. These editors support the basic HTML tags and let you see the page as it will appear in a browser. Instead of typing tags, you can select commands from pull down menus, and click and drag items. Adobe, Netscape, Microsoft, Macromedia, and a score of other companies all offer HTML creation tools. This type of HTML software is known as WYSIWYG - which means What You See Is What You Get.
We are using Microsoft Front Page 2002 which is a combination of a WYSIWYG and text editor.

It's important to remember that even if you are using these graphical HTML tools, it is helpful to understand the HTML code itself. Understanding a little simple code makes it easier to fix problems on your page and simply understand why certain things are happening.

Back to top of page

HTML Tag Structure

In HTML terms, a document is made up of elements, which are portions of a document's structure such as titles, headings, lists, or paragraphs. Elements are defined by marking them up with tags.

There are two overall types of elements:

Block Elements. A Block element defines a paragraph constructed broadly (including Headings, Lists, and ordinary text paragraphs). Browsers insert a blank line before a block element.

Inline Elements. An Inline element defines a character styles, such as bold or italic, or some other element that fits within a line.

Whether you're talking about block or inline elements, they both consist of some or all of the following components:

1. Start Tag. All elements begin with a start tag. The start tag is formed by typing a left angle bracket (<), the element name, and a right angle bracket (>). The tag may include one or more attributes, separated by a space.
2. Element name. This is a code name, such as <title> or <h2>. 
3. Attributes. With some elements you can specify additional information for the tag.  For example, the <img> element inserts an image on your page; The <img> element's  src attribute specifies where the image is located.
4. Values. Most attributes require a value which is surrounded by quotation marks and preceded by an equals sign. For example, src="myimage.jpg" specifies the image source and gives the filename.
5. Content. Every element that accepts content has a content model that specifies what can be included. The content model specifies the type of data that can go within the element. It also specifies which tags can go within the element. Foe example, the <head> element cannot contain text; it can only contain tags, such as <title>. The <title> element can only contain text.  Empty elements do not accept any content. An example is the <br> element, which causes a single line break.
6. End tag. The end tag repeats the element name. It surrounds the name with angle brackets, like a start tag, but also has a slash mark that comes after the firat angle bracket (for example, </title>). This tells the browser when it has reached the end of the element.

A typical HTML tag might look something like this:

<H1 align="center">This is the element's content.</h1>

In this example, the start tag is the heading1 tag (<h1>).
The attribute is align and the value is center ( align="center"). The tag and attribute/value are separated with a single space.
The browser displays the content using the formatting it encounters with the tags you use. (This is the element's content.)
The end tag is </h1>.
 

Every HTML document has a global structure, which informs the browser that it has encountered an HTML page. Additionally, the global structure divides the document into two components:

Head. The information nested within the <head> element doesn't appear in the browser window, although <title> text does appear in the window's title bar.

Body. The text and markup within the b<body> element appear in the browser window.

Here's what the global structure looks like:

<html>
   <head>
     <title> Your document's title goes here</title>
   </head>
   <body>
Your document's content goes here.
   </body>
</html>

Back to top of page

Here are a few guidelines for using HTML tags:

When creating a tag, remember to separate each element -- the tag name and each of the attributes/values -- with a single space.

To use an attribute, type the attribute name, followed by an equal sign and the attribute value. Don't put a space between the attribute name, equal sign, or value.

If you don't use an attribute, the browser uses the default value for that tag. For example, the default value for paragraph alignment is left. If you use the paragraph tag without the align attribute/value, the paragraph will align left.

Some tags stand alone. For example, you insert a horizontal rule with a single  tag, like this: <hr>

Most tags create a state that stays in effect until you turn off the tag. For example, the bold command stays on until you turn it off. To turn off a tag precede the tag name with a forward slash. The following tags turn bold on and off. They are highlighted in color to make them stand out:
<b>Here's some text I want in bold</b>

Tags are not case sensitive. <b> means the same as <B>.
You may use the standard 26 alphabetical characters, and the number characters 0-9.
You cannot use punctuation other than the "." which must come before the file type.