ozline - Quick and Dirty Personal Homepage

Quick and Dirty HTML

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 Netscape Navigator 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 <H3> and </H3> 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 ozline.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!

Possible Next Steps If you want to change the background and text colors, go to this great site: The Color Composing Engine at: http://www.two4u.com/cgi-bin/color/compose 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: Adding New HyperText Links Placing Images in Web Pages