Ken Kaleta's Place [HTML

Getting Started

Web pages can be created using a simple text editor, HTML editor, or application like DreamWeaver or PageMill. It is very useful to know HTML to tweak elements in ways that may not be possible in some editors or applications.

A Web browser like Netscape's Communicator or Microsoft's Internet Explorer is needed to view the page.

Posting It

Publishing your Web pages requires an Internet Service Provider (ISP). You will likely need software to push files from your computer to your ISP. Your ISP should provide or offer a way to acquire the software. Be aware that your ISP may also charge you for some services including:

Number of megabytes you can put on their server
Number of hits your site can have in a day
Types of scripts that you can run (for instance, counters or forms)

Check with ISP or ask about services before you sign up.

Background

HTML stands for HyperText Markup Language. Web browsers read codes embedded in Web pages. As the page is read, the codes tell the browser how to display the elements on the page.

Technically speaking:

Web browsers interpret HTML codes
Codes are commonly embedded in Web pages as Tags and Attributes

More elements are added to HTML as the language grows and evolves. It is important to note that not everyone uses the latest Web browsers. Remember to keep in mind that older Web browsers generally ignore (or crash) when interpreting newer codes. Test Web pages in different browsers before posting them to your site.

Tags

Tags are simply specific words that hold meaning for Web browsers.

They are distinguished from the content of the page by
less than (<) and greater than (>) symbols.

HTML uses some tags that are used on all pages. The basic elements of a Web page are shown and described below.

Example: HTML skeleton
<HTML> <HEAD> <TITLE> Title of HTML page goes here </TITLE> </HEAD> <BODY> <P>Content of the page goes here</P> <!-- Comments use these tags --> </BODY> </HTML> ____________</Example>

The <HTML> ... </HTML> tags are the first and last HTML tags in the file and let the Web browser know that the file is actually an HTML document.

The <HEAD> ... </HEAD> tags are a kind of a prologue, giving information to the browser about the rest of the file.

The <TITLE> ... </TITLE> tags are a required part of the <HEAD>.

The <BODY> ... </BODY> tags contain the content of the page with all of the codes in place to format the text, graphics, and other elements on the page.

The  tags are for comments that are ignored by the browser but useful to authors.

Note that each tag generally appears twice, once to open the tag and then again, with a forward slash (/) to close the tag.

Example: The bold and italic tags
The <B>Bold</B> and <I>Italic</I> tags ____________</Example>

The order that tags are opened and closed is important.
The last tag opened should be the first one closed.

Example: Order of opening and closing tags
The <B><I>*Bold and Italic</I></B> tags together ____________</Example>*

There are dozens of HTML tags that apply to text formatting, images, links, and other elements like forms, QuickTime movies, and Java applets.

Attributes

Most tags have optional instructions called attributes that give the tag more flexibility. Attributes can modify an elements alignment, size, spacing, color or even what window to display an element or other Web page.

Attributes are specific words placed after a space inside the opening tag.

Common attributes that many tags use are:

Horizontal alignment
- ALIGN=LEFT
- ALIGN=CENTER
- ALIGN=RIGHT
Scaling
- WIDTH=nnn% where nnn is % of window
- WIDTH=nnn where nnn is the number of pixels wide

Example: ALIGN=CENTER attribute used with the <FONT> tag
<FONT ALIGN=CENTER>Center this type</FONT> ____________</Example>

It is very important to be aware that different browsers may interpret HTML tags and attributes in different ways. Generally, as with tags, an unsupported attribute is ignored. Even the same browser can change how a page appears simply by changing the preferences.

The <HR> Tag

The <HR> (Horizontal Rule) tag can be used as a simple divider across a page or used with the following attributes:

<HR> Tag Attributes

SIZE=nnn
- Where nnn is thickness of the rule measured in pixels
- Default thickness is 2 pixels
- Smallest thickness is 2 pixels
WIDTH=nnn
- Where nnn is pixels or
  nnn% is the percentage of the width of the current window to span
- Default width (across window) is 100%
ALIGN=lrc
- Where lrc is =LEFT, =RIGHT, or =CENTER
- Default is CENTER
NOSHADE
- Removes shading from Horizontal Rule making it solid

Example: <HR> tag default
<HR> ____________</Example>

Result:
____________</Result>

Example: <HR> tag with attributes (1)
<HR ALIGN=LEFT SIZE=4 WIDTH=75%></HR> ____________</Example>

Result:
____________</Result>

Example: <HR> tag with attributes (2)
<HR ALIGN=LEFT SIZE=8 WIDTH=25% NOSHADE></HR> ____________</Example>

Result:
____________</Result>

Puting It Together

The following example is a sample of a simple, yet complete HTML page.

Example: Sample HTML page
<HTML> <HEAD> <TITLE> Title of HTML page goes here </TITLE> </HEAD> <BODY> <P>The result is the body of the HTML page</P> <!-- The Title appears in the browser window --> <HR ALIGN=LEFT WIDTH=75% SIZE=8></HR> <HR ALIGN=LEFT WIDTH=55% SIZE=6></HR> <P>A sample with </B>Bold</B> and </I>Italic</I> type</P> <HR ALIGN=LEFT WIDTH=55% SIZE=6></HR> <HR ALIGN=LEFT WIDTH=75% SIZE=8></HR> </BODY> </HTML> ____________</Example>

Example: Sample HTML page

    <HTML>
      <HEAD>
        <TITLE>
          Title of HTML page goes here
        </TITLE>
      </HEAD>
      <BODY>
        <P>The result is the body of the HTML page</P>
         <!-- The Title appears in the browser window -->
         <HR ALIGN=LEFT WIDTH=75% SIZE=8></HR>
         <HR ALIGN=LEFT WIDTH=55% SIZE=6></HR>
         <P>A sample with </B>Bold</B> and </I>Italic</I> type</P>  
         <HR ALIGN=LEFT WIDTH=55% SIZE=6></HR>
         <HR ALIGN=LEFT WIDTH=75% SIZE=8></HR>
      </BODY>
    </HTML>

____________</Example>

Result:
The result is the body of the HTML page A sample with BOLD and Italic type ____________</Result>

Result:

The result is the body of the HTML page

A sample with BOLD and Italic type

____________</Result>