HUP Web Workshop

 

Index

 

Writing an HTML document in MS Word

It's easy! Just write it, and choose save as... from the file menu. The file format should be Hypertext Markup Language. That's it!

Well, OK, there are some subtleties. For example, web documents rely heavily on the concept of the link. Word has a provision for creating them, but you still need to know something about the syntax for addressing your links.

Word and other text processing software with HTML capabilities are pretty good at what they are designed to do, and they provide a very fast way to get your stuff on the web fast, but you should still know how to edit the text directly, using Notepad or a similar editor. Why? Because they don't always do it right. Actually, that statement may be too harsh. It is just a good idea to know the structure of your documents, because sooner or later you are going to want to do something the word processor doesn't know how to do, or to fix something the word processor messed up. This workshop is basically about learning enough to realize that it ain't rocket science.

Reverse Engineering and the Anatomy of a Web Page

Finding out how to write a web page is one of the easiest things you could do. Imagine for a moment that all the information you needed to make a perfect copy of a Van Gogh painting or your fancy new automobile, or new home entertainment center was embedded in the thing itself. Not excited yet? Well, put yourself in the mindset of an engineer at the ATARI video game company who just bought herself a new Nintendo 64 game. Wouldn't you really like to know what makes the game tick, so you could start producing newer and better copies of it an sell them for 1/2 the price. You'd be rich!! But it would also be very difficult because you would probably break the working parts when you tried to open it up. Nevertheless, competing companies do this to each other all the time. It's called reverse engineering.

Reverse engineering a web page is as easy as can be. In fact, it is so easy the idea of "stealing" or "borrowing" stuff (ideas, document structure, and graphics) out of other people's web pages is practically a fundamental axiom of web culture. Please don't infer from this statement an endorsement of copyright law violation. But sometimes the difference can seem pretty subtle. The idea here is to learn how to write web pages by example.

The practice of reverse engineering web pages is so fundamental, all (both?) of the major browser producers allow you to inspect the source of any page you are viewing. Keep in mind, however, that there can be all sorts of things going on in the background that are not so obvious. Some of the most interesting web pages use technology to generate HTML code "on the fly." This workshop will only cover static and not dynamic web page creation. It also will not cover java, java script, cgi and it's variants, etc.

A Basic Web Page
A basic web page should contain at least these tags: Using these tags we can produce the following very basic web page:

<HTML>
<HEAD>
<TITLE>INANE WEB PAGE</TITLE>
</HEAD>
<BODY>
<H1>Dumb Idea</H1>
<P>Not much to say, but I say it well.</P>
</BODY>
</HTML>

We should now discuss what a tag is and how to make one, the observation of nesting rules, etc.

Types of Links and Making Them
The most common types of link are the standard link <A HREF="URL"></A> and the image link<IMG SRC="URL">.  The standard link takes you somewhere, and the image link displays an image.

Examples:

The link <A HREF="http://jevons.sscnet.ucla.edu/gerdes/">Geoff's Home Page</A> looks like this:  Geoff's Home Page.  This link takes a standard web address (URL) as its argument so that when you click on it your browser makes the connection.

The link <A HREF="mailto:gerdes@ucla.edu">Geoff's E-Mail Address</A> looks like Geoff's E-Mail Address and should address a message to me with your mailer.

The image link <IMG SRC="http://jevons.sscnet.ucla.edu/gerdes/images/NeXTPowered.jpg"> will insert this graphic into the page right here: .

Advanced Topics

It doesn't make sense for me to write all this stuff down here.  Otherwise I am writing a book that has already been written.  We'll have to talk about it at the workshop.

Handy References On the Web (where else ya wanna look?)

THE BARE BONES GUIDE TO HTML
A handy reference to HTML tags

http://werbach.com/barebones/barebone.html
 

THE RGB COLOR CHART
Easily choose colors

http://www.phoenix.net/~jacobson/rgb.html
 

Yahoo!
Many more references...

http://www.yahoo.com/Computers/Internet/World_Wide_Web/

Happy Web Scribing!