goer.org | HTML Tutorial : Introduction : Diving In

Table of Contents

About
Introduction
Diving In
Structure
Tinkering
Tags
Attributes
Browser Tools
Basic
Paragraph Breaks
Headings
Font Styles
Colors
Links
Images
Lists
Intermediate
Style Sheets
Classes and IDs
Div and Span
Font Control
Borders
Margins and Padding
Align and Indent
Advanced
Tables
Miscellany
SHTML

Diving In

The very first thing we're going to do is dive in and create a simple webpage. We'll explore what's going on in more detail very soon. For now, just follow the directions on this page as best you can.

To create your web page, you need:

Step 1: Open a Text Editor

Caution: Word Processors

Do not use Word, Wordpad, AppleWorks, or any other program that does not save files as plain text.

Notepad is not an ideal text editor for our purposes. Notepad really wants to work with files that have a .txt extension. You must constantly fight with it to make it save and open webpages (files with a .htm or .html extension). Be strong, and ye shall overcome.

Step 2: Create and Save the Web Page

Copy-and-paste the text in the example, "A Simple Web Page" into your text editor, starting with the text, "<html>".

A Simple Web Page (source)

<html>
<head>
    <title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage.
</body>
</html>

The words that are surrounded with angle brackets (< >) are called tags. We will talk about what a tag is soon, but first let's finish creating and displaying your webpage.

Caution: Notepad Users

Notepad will try to append a .txt extension to your file name. Don't let this happen. In the "Save As" dialog box, set "File name" to test.html and change "Save as type" from "Text Documents" to "All Files (*.*)".

Once you have copied the text over to your text editor, save the file in your home directory or Desktop as "simple.html".

Step 3: Display the Webpage in Your Browser

Create a new browser window. Use [File > New > Window] or Ctrl-N (Command-N for Mac users).

Open the simple.html file by hitting Ctrl-O (Command-O for Mac users). Internet Explorer users should select "Browse" to find the file. Netscape Navigator users should select "Choose File".

Once you have selected the simple.html file, click on "Open". Your webpage should appear in the browser window. It should look like this.

If it does, congratulations! Let's move on to the next section, where we'll try to answer the question, what the heck is going on?