Introduction to HTML

Before we begin, there are some terms you should be familiar with. WWW is the World Wide Web, also called the Web for short. HTTP is HyperText Transfer Protocol - the method that documents are transferred to you computer to be read by your Browser - the program that inteprets HTML documents. HTML is HyperText Markup Language - the method of formatting documents for display in the browser.

What is an HTML document?

At the very base, an HTML document is a text file that contains formatting instructions to be read by a browser. HTML documents can be created using any text editor (pico, emacs, vi under UNIX/Linux, SimpleText on Macintosh, or Notepad in Windows). HTML documents can also be created using WYSIWYG (What You See Is What You Get) editors such as Adobe Pagemill, Macromedia Dreamweaver, or Microsoft Frontpage.

An HTML document is made up of tags that format text, insert images, and provide for all the features we see on modern web pages.

What are tags?

HTML tags format a document for display in a browser. In HTML, tags consist of a left bracket "<", a tag name and tag commands, and a right bracket ">". Tags usually work in pairs, formatting the material between them. The difference between the last tag is that it will usually have a slash "" placed at the beginning of it. Example: <b>This is bolded.<b>

HTML tags are not case-sensitive. <b> and <B> perform the same function, though it is often easier to capitalize the HTML tags for readability's sake.

An example HTML document

<HTML>
<HEAD>
<TITLE>This Sets The Title</TITLE>
</HEAD>
<BODY>
This is body text.
</BODY>
</HTML>

HTML Markup Tags

  • <HTML>...</HTML>
    This tells the browser that the following information is HTML. This should always be the first and last tags you use.
  • <HEAD>...</HEAD>
    This tag is generally used for organization. Items within this tag are generally used to lay out the basic features of a document. The following tag would go inside the header tags.
  • <TITLE>...</TITLE>
    On most browsers, whatever is between these tags will be displayed in the title bar of the browser. Data between these tags cannot contain HTML.
  • <BODY>...</BODY>
    The body tag contains all the physical data of the page (text, images, etc) - anything that will be displayed.
  • <H#>...</H>
    With the arrival of the <FONT> tag, these generally aren't used quite as much anymore. They scale the size of the font used in a page, with # ranging from 1 to 6. 1 is the largest, 6 the smallest.
  • <P>...</P>
    Marks off a paragraph in HTML. These tags will force the browser to double-space after </P>.
  • <UL>...</UL>
    An unordered list. This will cause <LI> to produce a bullet (like this listing).
  • <OL>...</OL>
    Ordered list. This will cause <LI> to produce a number instead of a bullet.
  • <LI>...</LI>
    Inserts a list item into an ordered or unordered list.
  • <BR>
    One of a few tags in HTML that doesn't require a closing tag. BR forces a linebreak, causing the text after it to be a new line in the browser.
  • <HR>
    Another tag that has fallen out of favor recently, this tag produces a horizonal line across the width of the browser. Useful for seperating sections of a page.
  • <B>...</B>, <I>...</I>, <U>...</U>
    Bolds, italicizes, or underlines text.

Linking HTML Documents Together
If you've been "surfing" the world wide web for some time, you know that HTML documents can be linked together. This what forms the "web" architecture of the world wide web. Document links are accomplished by "anchors" that connect documents together. Example:

<A HREF="page.html">A link</A>

This would link the current page to "page.html" with the text "A link" for the user to click on. Documents on other servers can also be linked. Example:

<A HREF="http://www.yahoo.com">Yahoo!</A>

This will create a link to Yahoo!

Images

Images are another very popular function in HTML. Traditionally, all images were in GIF, JPEG, or X-Bitmap formats. Internet Explorer introduced the ability to use BMP images, though this is not recommended because of their immense size. You can also use PNG images, an open-source alternative to GIF.

Images are inserted much like links are. Example:

<IMG SRC="graphic.jpg">

Will display "graphic.jpg" on your page. IMG is one of a very few tags that does not require a closing tag.

Related Links