Learning HTML

Section Tags | Text Formatting Tags | Hyperlink Tag | Table Tags | Image Tag | Putting it Together
See the HTML color codes

The Basics

A Web page is really just a plain text file with some special codes in it.

When your browser receives a web page, the special codes (called tags) are
interpreted by the browser as instructions on exactly how to display the page.

A plain text file that contains HTML tags is called an HTML file, but
it is still plain text.  All you need to make a web page is a text editor, to
create the code, and (of course) a browser to see what your code looks like.

To use the examples on this page, cut'n'paste the HTML code into a text file (using
Wordpad or Notepad), save the file as plain text with a .htm extension, and then
view the file in your browser by using the File -- Open command.  DON'T use Microsoft
Word as your text editor, because it will "recognize" that you're type HTML,
and will try to "help" you, and screw everything up.

If you want an EXCELLENT shareware text editor, (and other tools to help you
build your site) try our downloads page.

To learn more about HTML, check out Netscape's HTML Guide.


Section Tags

<HEAD>  </HEAD> pair.
<TITLE>  </TITLE> pair
<BODY> </BODY> pair.

Whatever is between the <TITLE>   </TITLE> tags will appear on the window bar
of the browser when the document is viewed.  The <TITLE> </TITLE> tags must be
nested inside the <HEAD>   </HEAD> tags.  There's other stuff that belongs in
the document head, but we'll cover that later.

The actual web page itself must live between the <BODY>  </BODY> tags.

SO... to summarize,  check out the following HTML document - it is a complete
web page.     Every Web page you create will have these standard tags. Notice
that I introduced a new tag pair:  <CENTER>  </CENTER>, and put a special
parameter in the <BODY> tag.  (bgcolor=  sets the background color of the
page.)

Cut and paste the following text into a Text document (with a .htm extension),
save it as text only, and then open that file with your browser.

=-=-=-==-=-=-= CUT HERE  =-=-=-  START HTML =-=-=-=-=-=-=-=-=
<HTML>

<HEAD>
<TITLE>  This is the title of the page  </TITLE>
</HEAD>

<BODY bgcolor=#FFFFFF>
<CENTER>
<FONT size="4"><STRONG>  This text is centered and STRONG!  </STRONG> </FONT>
</CENTER>
Note how the  center tag also acts as a line break <BR>
See?

</BODY>
</HTML>
=-=-=-==-=-=-= CUT HERE  =-=-=-  END  HTML =-=-=-=-=-=-=-=-=
Back to Top



Text Formatting Tags

Common Text Formatting Tags:

<STRONG>    </STRONG>  What's between the tags is bolded.
<B>     </B>   another way to bold.
<EM>     </EM>  emphasis  (italics)
<SMALL>   </SMALL>   text is one size smaller than default font.
<BIG>   </BIG> text is one size larger than default font.
<BR>    a line break
<P>   a paragraph break
   forces an extra space
   a quote mark

<FONT>     </FONT>  use these tags to adjust the appearance of the font.
Font specifcations are attributes included inside the first <FONT> tag.  Like this:

<FONT face="arial" size=4 color=#FF0000>
face, size and color are the most common font tag attributes.

Note that, when writing HTML, the actual line breaks that
you
enter
in when you're coding
are ignored.

The browser only interprets the <BR> tag
as a line break.  This is for the benefit of the coder - so that you can add
line breaks in your code as necessary, to make your code easier to read and edit.

=-=-=-==-=-=-= CUT HERE  =-=-=-  START HTML =-=-=-=-=-=-=-=-=
<HTML>
<HEAD>
    <TITLE>Sample text formatting. </TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">

<B>bold text</B> <P>
<STRONG>strong text</STRONG> <P>
<EM>empasized text</EM><P>
<BIG>Makes text one size bigger</BIG><P>
<SMALL>Makes text one size smaller</SMALL><P>
<UL>
     <LI>The UL tag starts an "unordered list"</LI>
     <LI> and allows you to create a bulleted list of line items</LI>
     <LI> each line item is surrounded by a pair of LI tags</LI>
     <LI>one on, and one off</LI>
     <LI> when the list is complete</LI>
      <LI> you must "turn off" the unordered list</LI>
</UL>

<P>

<BLOCKQUOTE>
You can indent a block of text using the blockquote tag.  This will bring your
margins in.  You can indent a block of text using the blockquote tag.  This
will bring your margins in.  You can indent a block of text using the
blockquote tag.  This will bring your margins in.  You can indent a block of
text using the blockquote tag.  This will bring your margins in.
</BLOCKQUOTE>

</BODY>
</HTML>
=-=-=-==-=-=-= CUT HERE  =-=-=-  END  HTML =-=-=-=-=-=-=-=-=
Back to Top



Making a Hyperlink

OKAY, now that we've seen an example of a tag that accepts parameter values,
we're ready to do the hyperlink.

The hyper link tag is also called an anchor tag, and so starts with an "A".
Once you've specified the anchor tag, the next thing you give is the value of
the "Hyperlinked REFerence"  (or, HREF) that is, what is the destination or
target site of the hyperlink?    Then you close the tag (with a  >)   and type the piece of text
that's going to appear on the page as the hyperlink.  After you've got that,
you finish off the hyperlink tag pair by closing the anchor:   </A>

Here is typical hyper link tag:

=-=-=-==-=-=-= CUT HERE  =-=-=-  START HTML =-=-=-=-=-=-=-=-=

For more information about Josie, click
<A HREF="http://www.dbeat.com/josie"> here </A>

=-=-=-==-=-=-= CUT HERE  =-=-=-  END  HTML =-=-=-=-=-=-=-=-=
Back to Top



Tables


Tables are very important if you want your page to look just right.  They're the
best way to control exactly where things appear on the page.

Start a table with the <TABLE> tag.
At the very end of the table, there will be a </TABLE> tag.

Start a new row with a <TR> tag.
At the end of each row, there will be a </TR> tag.

Each cell in any row is created with a <TD> tag.
To "close" the cell, you need a </TD> tag.

A simple, four quadrant table:

=-=-=-==-=-=-= CUT HERE  =-=-=-  START  HTML =-=-=-=-=-=-=-=-=
<TABLE>
  <TR>
     <TD> Upper Left </TD>
     <TD> Upper Right </TD>
  </TR>

  <TR>
     <TD> Lower Left </TD>
     <TD> Lower Right </TD>
  </TR>
</TABLE>
=-=-=-==-=-=-= CUT HERE  =-=-=-  END  HTML =-=-=-=-=-=-=-=-=

Some attributes that can live inside the <TABLE> tag:
width=597
bgcolor=#FF0000
border=1    (or 0, or 2, etc)
   - if you have border=0, the table itself will be invisible.
cellpadding=5   (or more or less)
cellspacing=5  (or more or less)

NOTE the bgcolor=  attribute can also live inside of a <TD> tag,
affecting the background color of only that cell.

Placing Images

To place an image in an HTML document, you first have to have a .gif or .jpg file ready to go,
and you have to know its location relative to the page you're putting it on.

The tag that places the image is the "IMG" tag, and can have a number of attributes:

SRC="the/path/name_of_the_picture.gif"
align = left, right, or center
hspace=5  distance to wrapped text on sides
vspace=5 distance to wrapped text on top and bottom
border=0  (or 1 or 2)  thickness of border around image (important when using images inside hyperlinks)
alttext="A picture that wouldn't download"    text that gets displayed in the image space while the
      image is downloading.
width="400"     width of image in pixels
height="400"   height of image in pixels

be careful using the height and width tags in images.  If you're not accurate
on the exact size of the image, they will compress and/or stretch your image.
Back to Top


Putting it Together

Here is some HTML that combines tables, images, and hyperlinks. The code you see between the "=-=-= CUT HERE =-=-=" lines will look exactly like the table below when viewed in a browser. Somethings to note: - the $lt;IMG .. $gt; tag lives BETWEEN the $lt;A HREF ...$gt; and $lt;/A$gt; pair. this means the image itself will be an active link. - the bottom cell of the table has a colspan=2 attribute, which causes is to span two columns. Likewise, cells can have a rowspan=x, causing it to span rows. - it's common to nest tables. That is, put an entire table inside the cell of another table. Don't OVERUSE tables, though, they can make your page heavy, or long to load. =-=-=-==-=-=-= CUT HERE =-=-=- START HTML =-=-=-=-=-=-=-=-= <TABLE bgcolor=#FFFF99 border=0 cellspacing=15> <TR> <TD width=175> <CENTER> <A HREF=index.htm><IMG SRC=images/dblogo_100x100.gif border=0></A> </CENTER> </TD> <TD bgcolor=#FF0000 colspan=2><FONT size=3 color=#FFFFFF face=arial> <STRONG>This font is white on a red background</STRONG></FONT><P> <FONT size=3 color=#000000 face=arial> <STRONG>This font is black on a red background</STRONG></FONT> </TD> </TR> <TR> <TD colspan=2 bgcolor=#000000><FONT color=#FFFF00> <CENTER>This font is yellow and centered across two columns.</CENTER> </TD> </TR> </TABLE> =-=-=-==-=-=-= CUT HERE =-=-=- END HTML =-=-=-=-=-=-=-=-=
Back to Top
This font is white on a red background

This font is black on a red background

This font is yellow and centered across two columns.

ONE LAST COOL THING TO NOTE:

On this tutorial page, we've seen lots of these tags, appearing
between the arrows, like <this>.   Normally, the browser doesn't display
things inside of tags - it's supposed to INTERPRET them as instructions.

So how did we make these <arrow symbols> appear without having the browser interpret them?
Simple - by forcing them to appear like with a special code, that looks like this:
(Note that they look just like the code to force a space, above.)



Now the question, how did we make the above code appear without the browser interpreting
it as arrow symbols?

I'll leave that one for you.

If you have any questions about this, or need professional web hosting services,
drop me a note!  mike@dbeat.com