HTML Basics: HTML Tutorial
Hypertext Markup Language (HTML) is the basic building block of the World Wide 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 graphic images.
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 spaceband.
All HTML documents must have a filename extension of .html or .htm. For example,
the name of this file is basics.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 "blessed" standards, 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. Other people use
word processors such as Word or Word Perfect that can save the files as ascii text.
HTML-specific editors are beginning to emerge. 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. Allaire, Macromedia, Microsoft, and a score of other
companies are all offering HTML creation tools.
However, 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.
Pros and Cons
HTML is the only choice for creating web pages. It is not a total solution, however. It offers
limited graphical control; if you come from the type or design world, HTML limitations will quickly become apparent. Still, it does its main task of linking content very well.
And HTML is evolving. New additions to HTML are starting to address some of the layout control issues. Features such as style sheets, which allow you to set specific styles for text, and layers, which let you accurately position items on a page are examples of some of the emerging features. IE 3.0 for Windows 95 supports style sheets and Netscape Navigator 4.0 will support both style sheets and layers. However, there will be some lag time before all the definitions of exactly what is "supported" are ironed out and before most people are using browsers that support style sheets ... and layers ... and other new HTML components.
Plug-ins are another way of addressing the HTML limitations. These add-in applications let you incorporate additional features from other programs seamlessly within your HTML pages. Adobe's Acrobat, Macromedia's Shockware, Apple's QuickTime VR, and Real Audio's streaming audio player are all examples of ways you can extend your site beyond straight HTML to add graphic control, sound, video and other features -- but remember, not everyone on the web has or can use these plug-ins.
HTML Tag Structure
The basic HTML tag has four parts:
- An opening delimiter, the < symbol.
- The tag name.
- One or more switches that set variables for the tag.
- A closing delimiter, the > symbol.
A typical HTML tag might look something like this:
<p align=center>
In this example, the tag is the paragraph tag and the switch says that the paragraph will be centered. The tag starts with an opening delimiter and ends with a closing delimiter. The tag and switch are separated with a single space.
Here are a few guidelines for using HTML tags:
- When creating a tag, remember separate each element -- the tag name and each of the switches -- with a single space.
- To use a switch, type the switch name, followed by an equal sign and the switch value. Don't put
a space between the switch name, equal sign, or value.
Sometimes the value is literal text or a value that
is passed on to another function. When this is the case, you surround the value with quotation marks. For example, the image tag switch is calling a specific file by name, so the filename is enclosed in quotations, like this example. The tag says insert an image and the image source file is named "logo.gif":
<img src="logo.gif">
-
If you don't use a switch, 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 switch, the paragraph will align left.
- Some tags stand alone. For example, you insert a horizontal rule with a single image tag, like this:
<hr>
-
Other 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 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>.
Tell Me More!
It is important to structure your HTML files consistently. The first set of HTML tags are
the basic text tags. Click on the button to learn about these basic
tags now.