Services from Tom March
archive rss 
Basic HTML Tutorial
an Intro to HTML through Creating a Barebones Personal Homepage
What you need to complete this lesson:
- a basic text editor like SimpleText or Notepad
- a browser like FireFox or Microsoft Internet Explorer
Phase 1: Writing the Content
Use your text editor (SimpleText or Notepad) to type each of the items in bold:
Your First Name
Then type in a few sentences on:
Your Motto
a favorite quotation, song lyric, snippet of poetry, etc.
You can take a look at Quote Search, a personal list, or Bartlett's Familiar Quotations
Professional Background
schools you've attended, advanced degrees, areas of special interest, groups you belong to, etc.
Personal Background family, hometown, hobbies, recreations, travel, etc.
Save the page and view it through the browser (need help doing this?). Depending on the browser you use, you might see a yucky text page or an all smooshed together block of text.
Phase 2: Making it a HyperText file (HTML)
- Add <HTML> at the top of the page and
</HTML> at the bottom.
Save the page and view it through the browser. If you had the yucky text, depending on the browser you're using, you may now get a better font, but the text will be smooshed together.
- Add <H1> and </H1> before and
after your name
Save the page and view it through the browser (yields your name in large, bold text, but the rest is still smooshed).
- Add <h2> and </h2> before and
after each section heading (i.e., your Motto, Professional
Background, and Personal Background)
Save the page and view it through the browser (yields larger, bold headings)
- Add <Center> before your name.
Save the page and view it through the browser (yields a centered page)
- Add </Center> after your motto.
Save the page and view it through the browser (yields a centered name & motto)
- Add <HR> after the </Center>
after your motto.
Save the page and view it through the browser (yields a horizontal rule under your motto)
- Add the following after the <HTML> at the top of the page:
-
<HEAD>
<TITLE>
Your Name's Homepage
</TITLE>
</HEAD>
Save the page and view it through the browser (yields proper identification in the menubar)
- Add <BODY BGCOLOR="#FFFFFF"> after the
</HEAD>
Save the Page and view it through the browser (yields a white background color)
- Add the following just before the ending at the bottom of the
page:
-
<P>
<HR>
<P>
<A HREF=http://www.ozline.com>ozline.com</A>
</BODY>
</HTML>Save the Page and view it through the browser (yields a hypertext link to the tommarch.com
- Adding an image (including animated Gifs). To get an image (IMG) to show up (as a source - SRC) on your Web page:
- you need an image in .gif or .jpeg format
- the image must be in the same location as your HTML document (i.e., the same folder, directory, diskette, etc.)
- you have to add the HTML code:
-
<img src ="vampire_bat.gif" width="140" height="110" alt="image name">
Save the Page and view it through the browser (yields a an animated picture of a bat)
There you have it! Steps 1, 2, 3 will get you this,
, an inline, animated image.
- That's It!
- you need an image in .gif or .jpeg format
Possible Next Steps
If you want to change the background and text colors, go to this
great site:
- The Color Composing Engine and More on Color from Two4U: http://www.two4u.com/color/
- This tutorial might be helpful in doing the HTML of changing background colors.
If you want other similar online HTML tutorials go to:
- Beyond the Son of Filamentality at:
http://www.kn.pacbell.com/wired/beyond
In particular, you might be interested in: