Writing Your First Webpage

Getting Your Feet Wet

Web pages are written in HTML, a language that was originally created to help academia disseminate and share it’s information. The title says it all: Hyptertext Markup Language is a language of semantic attributes, or “tags,” that mark segments of text as having a certain meaning.

If you’ve never made a web page, you might consider playing around with an WYSIWYG web editing program. Using such software, you can plop stuff onto a page and then look at the resulting HTML to start piecing stuff together.

Once you know a few HTML tags, go to the HTML Sandbox and experiment by writing some simple markup. For example, you can try writing:

<p>This is a paragraph that has a link to Google:
<a href="http://www.google.com">This is a link.</a></p>

How to Make Your First Page

Once you’ve experimented a bit, I recommend reading this tutorial on HTML. When you’re done with that, you should review the HTML mark-up tag reference provided by the W3C. In order to write good web pages, you’ll eventually need to memorize and use almost all of them.

When you’re ready to get coding, just copy and paste the template below into a file called sample.html and start writing your page in between the body tags. Don’t worry about what everything in the template means for now, that will come in time. You can look at your page by opening the file with any web browser. You’ll want to use Firefox.

At this point, do not add mark-up to change the way your page looks. Your mark-up should reflect the content of your page, not how you want it to look.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Put Your Page Title Here!</title>
</head>
<body>
<p>This is a paragraph. Play around!</p>
</body>
</html>

Every so often, you should check the code you’ve written against the W3C HTML Validator. This will ensure that you are writing proper HTML code. You’ll have to take my word that it is important to write proper code, but for now you can believe me just as a matter of taking pride in your work.

Styling Your Page with CSS

Once you have a handle on HTML authoring, you should learn to use CSS to style the look and feel of your pages. As with HTML, beginners should start with a CSS tutorial. Once you’ve done that, you’ll want to reference the w3’s CSS manual fairly regularly until you get comfortable. Remember to separate your HTML and CSS code.

With HTML and CSS under your belt, you can do just about anything on the web. The CSS Zen Garden is a showcase of what can be accomplished using these basic languages alone.

What Now?

If you’ve written a web page, you’ll want to put it on the internet. Your university or company probably has web space available for you to use. Just do a Google search for it. Here are instructions on how to upload your page to Lehigh’s web server, for example. Once you’ve done this, be sure to send me your link!