3. HTML

This page:

  • defines HTML
  • describes HTML tag basics, including basic syntax and structure
  • describes creating and saving an HTML page using a plain text editor like SimpleText (Macintosh) or Notepad (PC)

HTML Defined

HTML stands for HyperText Markup Language.

  • HyperText is text (or pictures) that links from one web page to another, or from one place in an HTML page to another place in the same or a different HTML page.

  • Markup means there are some standard symbols you can use to make HTML.

  • Language means the symbols used for HTML have a standard syntax or "way of being used" that makes HTML easy to follow.

You use HTML, which consists of tags you put around text, to specify how browsers should the format of information.

HTML Tags

HTML tags are recognizable because they are bounded by two special characters. For example, <tag> shows the less than sign (<) and the greater than sign (>) which are often the two most used characters in many HTML documents.

Here are the tags for a very basic HTML page. 

<HTML>

<HEAD>

<TITLE>Displays in the browser's top banner area.</TITLE>

</HEAD>

<BODY BGCOLOR="white">

<P>Here's where you add your message.</P>

</BODY>
</HTML>

Container Tags

Most tags contain information and must have beginning tags and ending tags. For example, to make text bold, you need the beginning ad ending tag around the text , as in: <b>Text</b>.

Empty Tags

Other tags stand alone, without containing anything, like the horizontal rule tag, <hr>:

Tag Attributes and Values

Many tags are defined by values you provide for attributes. For example, in the horizontal rule tag, <hr> if you use no attributes the line crosses the entire browser window, but if you set the size attribute to 50%, and the align attribute to "left" the line only crosses half the window, beginning on the left side, as shown here:
<hr width="50%" align="left">

hr is the tag
width and align are attributes
"50%" and "left" are attribute values (notice the use of quotes - "")

Structure Tags

Some tags simply define the page itself and are called structure tags. The basic structure tags are the HTML, HEAD, TITLE, and BODY tags.

Format Tags

Some tags describe your format intent. These include Headings (<Hn>Text</Hn>), paragraph breaks (<p>), and emphasis using italics (<i>Text</i>)and bold (<b>Text</b>) tags are just a few of the tags you'll learn to use in this course.

Implicit Tags

Implicit (logical) tags let the browser to choose how the text will be displayed.

  • Emphasis -   <em>...</em>
  • Strong -   <strong>...</strong>
  • Teletype -   <tt>...</tt>
Emphasis usually renders as italics.
Strong renders as bold.
Teletype is monospaced text.

Explicit Tags

Explicit tags, also called physical tags, specifically tell the browser how to display the text.

  • Bold Text -   <b>...</b>
  • Italic Text -   <i>...</i>
  • Underlined Text -   <u>...</u>

These three tags (Bold, Italic and Underline) are all explicit tags. The browser is given no choice in how they are rendered. They can be used in combination with each other.

Hands On

First, get to know your computer. Notice how the menus work for each program.

When you feel ready, you can try to use an editor (SimpleText on the Mac or Notepad on the PC) to create and save a web page you can view in a browser (Netscape or Internet Explorer).

Here are some rules intended to minimize frustration:

  • use only lower-case letters in file names (no spaces or special characters!)
  • keep to an 8.3 convention such as filename.htm and graphic1.jpg. You can also use ".html" extension for your web pages, and this may be required for your main (home) page, which some web servers require you to name index.html.
  • use no spaces or punctuation other that the period in the 8.3 format or the underscore
  • remember to save your HTML files as ASII text files; use SimpleText on the Macintosh or Notepad on MSWindows machines
  • close all applications on the computer before removing diskettes (this is important!)
  • take your time

Ready to try?

  • Find and start the editor program.
  • Find and start the browser program.
  • Arrange the Browser and editor side-by-side on your screen.
  • Give the page your own title and text that includes at least one heading and some additional text; use some bold and italics for emphasis.
    Simple jokes are particularly good for this exercise... for example Question: How many therapists does it take to change a lightbulb?
    Answer: Just one; but the bulb has to want to change!
  • Save the page as page_1.html in a folder on your computer.
  • Use File, Open Page, Choose File in Netscape or File, Open, Browse in Internet Explorer to display your page.

Your page isn't on the web yet, but you have begun.

Pick Here for Lesson 4 - Text Tags