Brief introduction to HTML

This document introduces you quickly to the basics of HTML. If you already know these things, but just want a quick reference of what some common tags are and what they do, click here .

John Kerl
June, 1997

A web page is just a text file, with plain old text in it, plus some "markup tags". Here is a sample HTML file:


<HTML>
<BODY>

Hi there.

</BODY>
</HTML>


You might save the stuff between (but not including) the lines in a file called /tmp/foo, then start up your browser, then hit the Open button, then — instead of typing in a URL such as "http://something.or.other.com" as you usually would — type

   file:/tmp/foo

and hit return. Or click here. Voilà — you will see how it looks.

The basic idea of HTML is that the body is just text, with formatting codes, hyperlinks, etc. indicated with "markup tags" (hence the term HTML, which stands for "hypertext markup language").

Some tags (e.g. <HTML> and <BODY> in the example above, or the <CENTER> tag which centers text) operate on a range of text. They look like <SOMETHING> and </SOMETHING>, to indicate start and end, respectively.

Other tags are just used once (e.g. the <P> tag which starts a new paragraph) so there is no corresponding </SOMETHING> (e.g. no </P>).

Tags are case-insensitive: e.g. <HTML> is the same as <html>. You might like to make them all upper-case to make them stand out. Or not. Personally, I'm very inconsistent about it.

You are probably wondering how to get a real > or < in an HTML page. What you do is to type &gt; and &lt; (for "greater than" and "less than", respectively).

(How do you get a '&' then? By typing &amp;. You need all five characters, including the semicolon.)

Now, you can vi /tmp/foo and change "Hi there." to "Hey you". Then, go into your browser (which doesn't know that the file has changed) and hit the Reload button. Now you are seeing the changed text.

This is how I do all my HTML editing — vi in one window, browser right next to it, then edit and save in vi, reload in the broswer, edit and save in vi, reload in the browser, etc. (There are tools out there that let you do all your editing in one window.)

Now you might vi /tmp/foo to make it look like this:


<HTML>
<BODY>

<b>Hi there.</b>

</BODY>
</HTML>


then push Reload in your browser, or click here. Now the text is bold.

Here is a bigger example:


<HTML>
<HEAD>
<TITLE> This text goes in the browser's title bar </TITLE>
</HEAD>

<BODY BGCOLOR ="#FFFFFF">
<!--- FFFFFF means white, which is the background color I prefer for
all my pages, and yes this is how you do a comment. --->

<FONT COLOR = "#0000FF">
<!--- 0000FF is blue --->
<B><CENTER> Here is some text that is blue, bold and centered. </CENTER></B>
</FONT>

Here is some normal text.
Here is more text on another line in the HTML source file, but the carriage
return doesn't show up unless I put in a

<p>&lt;p&gt; to start a new paragraph.  Note that paragraph formatting
is controlled by the markup tags — not by the way it appears in 
the source file.

</BODY>
</HTML>


Click here to see what it looks like.

You get the idea.

Important tags are:

Here is a bigger example, with a lot of features. I'll try to let them explain themselves. (Click here to see what it looks like.)


<HTML>
<HEAD>
<TITLE> Here is my title. </TITLE>
</HEAD>

<BODY BGCOLOR ="#FFFFFF">

<H1> </H1>
<!--- This is very big text — too big. --->
<H2> </H2>
<!--- This is also too big.  But I read somewhere that it is important
to include these blank h1/h2 spots, instead of starting directly 
with h3.  I use h3 for the top line of my pages.  --->

<H3>
<FONT COLOR = "#FF0000">
<CENTER> Here is some red centered text. </CENTER>
</FONT>
</H3>

This is just a paragraph of text.  Blah
blah blah blah blah blah blah
blah blah blah blah blah blah
blah blah
blah
blah
blah blah blah blah
blah blah blah blah blah blah blah blah blah.

<p>Here is another paragraph.  Blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah.

<p><I> This text is in italics.</I>
<HR>
<p> There is a line drawn above these words, using &lt;HR&gt;.

<p>Click <a href="http://www.tds-az.lmco.com"> here </a> to see the LMTDS-AZ
home page.  That's how easy it is to do a hyperlink.  Note that you can
also make a hyperlink have a relative pathname.  If there is an HTML
file called foo.html in the parent directory from the current page
being viewed, you can simply use "../foo.html" in the href statement.

<p> This is how to do a mailto.  Note that I can surround the mailto
with an italic format if I want. 

<p>For further information contact:  <I> <a href="mailto:john.r.kerl at lmco.com">
john.r.kerl at lmco.com </a> </I>

<p> Above I said, "Note that paragraph formatting is controlled by the
markup tags — not by the way it appears in the source file."  Well,
when you have some nicely formatted text, you can tell the browser to
print it as is, using &lt;pre&gt; and &lt;/pre&gt;.  Note the difference
between this:

<p> Here
is 
one 
word
per
line.
</BODY>
</HTML>

<p> and:

<pre>
<p> Here
is 
one 
word
per
line.
</pre>

<p>
Sometimes you want to make bulleted lists.  Here is how:

<UL>
<LI> Item 1.
<LI> Item 2.
<LI> Item 3.
</UL>

<p>Or maybe you want to number them:

<OL>
<LI> Item 1.
<LI> Item 2.
<LI> Item 3.
</OL>

<p>Or maybe you want to nest them:
<UL>
<LI> Item 1.
   <UL>
      <LI> Sub-item a.
      <LI> Sub-item b.
      <LI> Sub-item c.
      <LI> Sub-item d.
   </UL>
<LI> Item 2.
   <OL>
      <LI> Sub-item a.
      <LI> Sub-item b.
      <LI> Sub-item c.
      <LI> Sub-item d.
   </OL>
<LI> Item 3.
</UL>


<p> Lastly, here is a sample table.  Note that you can include
markup tags within the cells.

<TABLE BORDER=1 WIDTH=100%>
<TR> <TD> <b>cell</b> </TD> <TD> <b>cell</b> </TD> <TD> <b>cell</b> </TD> </TR>
<TR> <TD> cell </TD> <TD> cell </TD> <TD> cell </TD> </TR>
<TR> <TD> cell </TD> <TD> cell </TD> <TD> cell </TD> </TR>
</TABLE>


</BODY>
</HTML>


Those are the features that I use the most often. As you can see, these are all simple building blocks; but you can use them to make some neat-looking pages. It is really easy.

There are of course many more kinds of markup tags.

To learn more:

  1. Whenever you are looking at any web page whatsoever, you can choose Document Source under the View menu to see the page's HTML. If you see something cool in a web page, then view the source and re-use that cool idea.

  2. When viewing any web page, you can choose Save As under the File menu to save the HTML source locally. Then you can edit that, and clone it to make your own.

  3. Here is a great site that has on-line reference for all the stuff I talked about above and more:

    http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Lastly, how to make your own home page on the LMTDS-AZ intranet: It will take you just a minute to do and you can do it by yourself. First, cd to your home directory. Then mkdir public_html. Then, in that directory, create an HTML file called index.html. Save it, then start up your browser and open

http://www_cae/~your-user-name-goes-here-don't forget the-tilde

Voilà — you are on-line.