The first thing we’re going to do is dive in and create a simple webpage. We’ll explore what’s going on soon, but for now, just follow the directions as best you can.
To create your web page, you need:
A browser (you’re using one right now)
A plain text editor (you already have one on your machine, sort of)
Step 1: Open a Text Editor
A text editor is a program that edits plain text files. When authoring HTML, do not use Word, Wordpad, Pages, or any other program that does not save files as plain text.
Windows users: open Notepad ( Start | Programs | Accessories | Notepad )
Mac OS X users: open vi or TextEdit ( Applications | TextEdit )
Linux and other UNIX users: open vi or emacs
and TextEdit are not very
good text editors. By default,
Notepad always tries to save and open files with a
.txt extension. You must
constantly fight with it to make it save and open webpages
(files with a
.php extension). Be strong,
and ye shall overcome.
Likewise, TextEdit does not use plain text by default. Before using TextEdit to edit HTML, go into Preferences and set the Format for new documents to be Plain Text. For good measure, you might have to convert your existing document to plain text ( Format | Make Plain Text ).
Using Notepad to write HTML is kind of like using a butter knife to cut and serve a birthday cake ― it’s the wrong tool for the job, and it’s really only worth using if you don’t have anything else lying around. Professional HTML writers use more advanced text editors. See some HTML editors here.
All of these editors avoid the problems with file extensions and plain text described above, and have numerous extra features for advanced users. You don’t have to download one of these editors right now, but if you start getting seriously into web development, you’ll need to upgrade your tools.
Step 2: Create and Save the Web Page
Copy-and-paste the text in
Example 1.1, “A Simple Webpage” into your text editor,
starting with the text,
<html> <head> <title>A Simple Webpage</title> </head> <body> This is a simple webpage. </body> </html>
To see what this HTML code sample looks like as a web page, click the view html link above the code sample.
The words that are surrounded with angle brackets (
>) are called elements. We
will talk about what a element is soon, but first let’s
finish creating and displaying your webpage.
Once you have copied the text over to your text editor,
save the file in your home directory or Desktop as the file
Notepad will try to
.txt extension to
your file name. Don’t let this happen. In the
Save As dialog box, set
File name to
simple.php and change
Save as type from
Text Documents to
All Files (*.*).
Step 3: Display the Webpage in Your Browser
Open the file
by typing Ctrl-O
(Cmd-O for Mac
users) and selecting the file.
Internet Explorer users should select
Browse to find the file.
click Open. Your webpage should
appear in the browser window. Compare it to
Example 1.1. Does it match? (To compare results, click
the view html link above Example 1.1.)
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?