Basics


Deprecated Methods

The W3C (World Wide Web Consortium) is currently recommending the standards described in XHTML 2.0. Although web browsers will continue to support old code, deprecated methods are designated to be phased out. In short, do not write HTML using deprecated methods, instead learn the universally accepted approach and be willing to adjust to new standards.


1.1 First Things First

Open your HTML editor (a good free one is 1st Page) or just Notepad, then save your first web page with the extension ".htm" which signifies HTML. (Your HTML editor will do this by default, Notepad will not.) Until you get into more advanced techniques, start each HTML page with this skeleton:

<html>
<head>
<title>
(Write the name of your web page here)
</title>
</head>
<body>
PUT THE CONTENT OF YOUR PAGE HERE
AND HERE...
AND HERE...
</body>
</html>

Voila -- your first web page. The <html> tag signifies HyperText Markup Language, the <head> tag signifies information for the header of the document, the <title> tag is the name of the page that is displayed on the title bar of the browser window, and the <body> tag is for the body of your page. Thrilling stuff!


1.2 Header Tags

Header tags come in six sizes: <h1> through <h6> The header size corresponds to the user's browser settings. As with any other kind of tags, you have to add a corresponding ending tag where you want the heading to stop like so: </h1>

<h6> The smallest header </h6>
<h5> The 2nd smallest header </h5>

<h4> A small medium header </h4>

<h3> A large medium header </h3>

<h2> The 2nd largest header </h2>

<h1> The largest header </h1>


1.3 Line Breaks

If you want to force a manual line break in text you can use the <br \> (break) tag:

This sentence<br \>
is broken<br \>
up.


1.4 CO LOR

Color applies to many different tags in HTML. For example, you can change the background color of the entire page to red by specifying:

<body style="background-color: red">

   -or-   

<body style="background-color: rgb(255,0,0)">

As you can see, there are two ways color can be specified:

Actual names: Red, green, blue, orange or they can be quite exotic like papayawhip or peachpuff.

Hexadecimal: Expressed as 3 hex values corresponding to Red, Green and Blue (RGB).

Here are three links which will help you understand hex numbers and hex colors:

Print out a page with the colors and keep it handy for reference.

(Do a Google search for "HTML colors" and you will find several to choose from.)

Here are some examples using color with inline elements:

(View Source)

A colorful heading

A colorful paragraph


1.5 Paragraph and font Tags

Paragraph tags are used to enclose a section of text to which you will apply other formatting, such as centering.

<p>Put your text between the tags.</p>

<p style="text-align: center">Put your text between the tags.</p>

The <font> tag should NOT be used! Instead set the style of the block-level tag or use the <span> tag.

Controlling fonts throughout a webpage is tricky. Five generic font styles can be specified: serif, sans-serif, monospace, cursive and fantasy. However, the precise appearance is dictated by the user's web browser. This will produce different results between different browsers:

Here is an example of how the appearance might look using generic fonts:

serif

sans-serif

monospace

cursive

fantasy

The size can be adjusted by setting the font-size property. This can specified in four different ways:

Absolute units can be measured in five ways: mm, cm, in, pt and pc.

The measurement amount should be flush with its name:

font-size: 3.2in
font-size: 33mm
font-size: 20pc

Relative units can be specified using em or ex. These units specifiy how large the font should appear relative to the browser's default size. For example:

font-size: .8em
font-size: 1.2ex

For a small section of text, use the <span></span> tags to subdivide an inline element.

You can also specify the size of a font using keywords:

font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large

letter-spacing and word-spacing can be set to control the blank space between letters and words. line-height controls the blank space between lines. Use a negative value to bring elements closer together, use a positive value to push elements further apart.

Other parameters that can be set include font-style, font-weight, text-decoration, text-transform, and font-variant.

This demo page let's you easily experiment with the huge variety of parameters used to control the appearance of text on your page:

Text Styles Demo

It would be impractical to have to work with all of these settings on an ongoing basis. It is overwhelming to keep track of it all. Cascading Style Sheets (CSS) provide tools to consistently apply themes accross multiple web documents.


1.6 Creating Lists

Usually you will want to just make a bulleted list. To do so, you can simply use the list item tag:

<ul>
<li> Put your text for each bullet here</li>
<li> Put your text for each bullet here</li>
</ul>


This will produce the following:

You can also make an ordered list. Enclose the list items inside <ol> tags.

(AHEM!--This would be a good time for you to right-click on this page and select "View Source".)

This will number the items for you:

  1. First item
  2. Second item
  3. Third item

Or you can use <ol style="list-style-type: upper-alpha">

  1. First item
  2. Second item
  3. Third item

Other list-style-type attributes include:

  1. disc
  1. circle
  1. square
  1. decimal
  1. decimal-leading-zero
  1. lower-roman
  1. upper-roman
  1. lower-alpha
  1. upper-alpha
  1. none

You may also use an image as your bullet using this syntax: <ul style="list-style-image: url(filename)">

Another type of list is a definition list (view source):

Apple
A common round fruit produced by the tree Malus domestica, cultivated in temperate climates.
Banana
An elongated curved fruit, which grows in bunches, and has a sweet creamy flesh and a smooth yellow skin.
Cantaloupe
A type of melon, Cucumis melo reticulatus , with sweet orange flesh and a rough skin resembling netting. Also known as muskmelon or rockmelon.

It's not too hard to explicitly make lists on your own, so you don't need to spend a lot of time mastering each of the list parameters. (Unless you really like making lists...)


1.7 Physical Character Tags

There are several available tags in this category. Two are heavily used in formatting:

<b> The bold tag
<i> The italic tag

There is also:

<tt> The True Type tag - sets Courier font
<big> The big tag
<small> The small tag
<sub> The subscript tag for putting text below

<sup> The superscript tag for putting text above

As with any formatting tags, be sure to close the tag when your done with that section.

(Pick up your toys when you're done playing with them!)


1.8 Special Characters

There is a huge amount of special characters which may be specified, the most common of which is the non-breaking space.

Browsers ignore consecutive spaces in your HTML page, so you must explicitly specify them:

You must write &#160; or &nbsp; for each non-breaking space.

Here are some others that are common:

Bullet &#183; -or- &middot; ·
Less Than &#60; -or- &lt; <
Greater Than &#62; -or- &gt; >
Ampersand &#38; -or- &amp; &

Here is a table of the codes and their corresponding symbols. Each special character number must be preceded by &# and followed by ;.

Click here for a chart of the codes

1.9 Line Breaks

An easy way to divide sections on web pages is to use the line break.

The <hr /> Horizontal Rule tag is used to make a line across the page.

You can also set height, width, align, color and background-color properties within the tag for different effects (view source):







As you can see, you can easily make a line or rectangle of the size and color you want. In fact, you could make a square if you want:


The standard <hr /> tag yields a boring line, so be sure to adjust your line breaks to match the style your web site. If you always used the same type of line break throughout a web site, it would be nice if you could set the page to always display your line breaks the same way without you having to restate those parameters every time. Hold on to that thought. We'll address it later.


1.10 File Navigation

All the files for your web site will be contained within a folder. In order to keep things organized, you should create separate directories for files of corresponding types. For example, you will always have many images that you will use on a web page. Therefore make a subdirectory for images, so that they don't clutter up your main folder. Always keep things in logical groups so that you can locate files quickly. There are two ways a file's path name can be specified:

You should always use relative path so that you can move your main web site folder to other folders without making any adjustments.
To go up a folder using relative path, you can specify the prefix "../". Here are examples of how files can be specified:

File: Relative Path:
The current directory is "homepage".
Select the file "birthday.jpg"
in the "images" subdirectory.
images/birthday.jpg
The current directory is "picturepages"
which is a subdirectory of
the root directory "homepage".
Select the file "birthday.jpg"
in the "images" subdirectory.
../images/birthday.jpg
The current directory is "fallpictures"
which is a sub directory of "picturepages"
which is a sub directory of "homepage".
Select the file "fallvacation.doc" in the
"documents" directory located in the
"homepage" directory.
../../documents/fallvacation.doc

1.11 Body Tag

The body tag surrounds the content of your web page. You can use it to modify the theme of the entire page.

Here are some examples of different page themes you can set:

Finding an attractive background image can add a lot of pizazz to your page.

Here's a great site to get a background for your page:

www.webpagebackground.com

1.12 Comment Tag

This is a tag for you to make comments about code in order to help you or others understand the procedure you have coded:

<!--Any comments you would like to make about your coding here-->

You don't have to use comments, but they are especially handy when you write a tricky piece of code and want to refer back to it later.


Images

XHTML 1.0 compliant