About
once a week, someone asks me:
"OK, but how do I actually make web
pages and publish them as a site?"
So here's how...
We'll cover:
- How to create HTML pages using a
text editor
- The bare bones of HTML page
structure
- How to save pages
- How to link pages together
- How to upload your pages to a live
web server
Pages are made of HTML
Web pages are described with a markup
language called HTML. This provides the content and structure of the
pages. It also says where images and other stuff should be.
The good news is that HTML is fairly
easy to learn. Here's
my introduction to HTML and the basic tags »
You start a web site on your own
local computer by creating one or more HTML pages, then linking them
together.
What software do you need to make
HTML pages?
To have full control over your web
pages (and to be able to create interactivity using scripting
languages) it's best to code
by hand.
You can do this with any text editor
(like Notepad), but there are some much better free text editors (like TextPad).
You don't even have to know HTML to
make a web page. There are lots of visual editors (sometimes called WYSIWYG
editors). NVu is
a free WYSIWYG editor that's fine for beginners.
Your first web page
HTML pages should always include the
following. You may want to copy & paste this into a new text
file...
index.html v1
<html>
<head>
<title>Page
title</title>
</head>
<body>
Your visible content goes here...
</body>
</html>
Notice how everything is contained
between <html> and </html> tags.
This is an example of a paired tag,
which need a starting tag and a matching closing tag (indicated with
the forward-slash). Paired tags describe the content between them. In
the case of the <html> tag, it's telling a web browser
that everything between the 2 tags is HTML.
Within the HTML, there are 2 main
bits that are part of every HTML page: the head section
and the body section, marked up with the
paired tags <head></head> and
<body></body>.
The head
section
The head section of an HTML page
contains information about the page, like what it's title is, whether
it should use stylesheets etc. Its contents are not seen in the browser
window (well, the title appears in the title bar..).
The body
section
The body
is where the vislble content goes. Anything you put in the body of your
HTML will be displayed in the browser (unless it's hidden).
You may want to check out the basic HTML tags,
and play with putting some of these into your HTML.
Saving your HTML pages
To make an HTML page, just save your
text file with the extension .html. Then, a web browser will know
exactly what to do with it.
Naming your HTML files
I recommend saving all your files
with lowercase names.
If you're developing on a Windows
machine, it won't be strict about filenames being in the correct case
(AboutUs.html is treated the same as aboutus.html).
But if you upload your site to a
Linux web server (which most of them are), it will
mind. If you ask for Blah.html, and the file is called blah.html,
you'll get a "page not found" error.
Also, I recommend against having
blank spaces in file names. I generally use hyphens (-) instead of
spaces.
Index pages
Whenever you open up a web site, or a
particular directory on a web site, without asking for a particular
page, the web server will give you the default page
or index page.
All you need to know for now is that
every folder in your site should have a file named something like
index.html. Otherwise, if someone browses to your site/folder, they may
be presented with a list of web pages to choose from (not very
professional), or may possible be given an error message!
Viewing your page
Let's say you've saved your file to
C:\websites\first\index.html
All you need to do is type that into
your web browser address field, or use File > Open and browse
for the file.
You should see something like this...
Note how the browser's title bar
reads: "Page title" - the words we put in the
<title></title> tags.
And the words we put inside the
<body></body> tags are visible on the page.
Linking pages together
Let's say we've created another page,
for "Contact details".
Here's the simple HTML...
contact-us.html
<html>
<head>
<title>Contact
UQW.com</title>
</head>
<body>
You can contact UWQ.com by opening
the window and shouting very loud.
</body>
</html>
To link to this page, we first need
something to act as the clickable "anchor", so we'll change our
original page to
index.html v2
<html>
<head>
<title>UQW.com's home
page</title>
</head>
<body>
<p>
My first paragraph, describing what
we do.
</p>
<p>
Why don't you contact us!
</p>
</body>
</html>
What I've changed:
- I've made the title a bit more
meaningful ("UQW.com's home page")
- I've changed the text, and put it
into 2 separate paragraphs, using the
<p></p> tags
Adding the link
All I need to do now is make the text
"contact us" a hyperlink
to the Contact Us page.
In HTML, I do this with an anchor tag
(<a></a>).
The anchor tag has a couple of uses,
but its main one is to create hyperlinks to other places. To do this,
we need to put something within the start <a> tag and the
closing </a> tag. This will become the clickable target.
The other thing I need to tell the
anchor is where to link to. I do this by
adding the href attribute to the opening
<a> tag (href stands for "hypertext reference").
Here's how the HTML looks now...
index.html v2
<html>
<head>
<title>UWQ.com's home
page</title>
</head>
<body>
<p>
My first paragraph, describing what
we do.
</p>
<p>
Why don't you <a
href="contact-us.html">contact us</a>!
</p>
</body>
</html>
If you refresh the page in your web
browser after making those changes, it should look more like this...
Adding the paragraph tags has spaced
the text out, making sure it's easy to read.
The text inside the anchor tags is
now an active link, which you can see by the blue, underlined style.
And if you click on the "contact us",
you should link through to the contact page (assuming you've created
one).
If you can see this, you've just
created your first web site. Congratulations!
Uploading your pages to the web
This is great, we have two working
web pages, linked together, which forms the basis of a web site.
But, for other people to see our
site, it needs to be hosted on a server that is connected to the World
Wide Web.
The most common way of uploading web
pages to a web server, is using FTP software.
You can get FTP software for free
too. If you use Mozilla Firefox, I recommend Fire FTP,
which is a Firefox extension
Screenshot of Fire FTP (50% scale.
Click image to enlarge.)
Most FTP software works in a similar
way.
- First, you have to log in using
details provided by your web host:
- FTP location (e.g.
"ftp.yoursite.com")
- A username
- And a password
- On the left hand side of the
window, you can browse your local computer.
- On the right hand side, you browse
the remote web server.
- You can compare the local files to
the files on the server, and upload or download between them.
- The software will usually handle
all the necessary stuff like logging in/out, managing connections, and
trying again when it fails to transfer files. In the example above,
it's telling you what it's doing in the bottom window.
- Some offer helpful things like
comparing the locations to see which files are different.
So, if your webspace is
http://www.yourspace.com/yourusername/ and you upload the files you've
just made, you ought to be able to browse to the web address and view
both the index page and click through to the contact page. And that
means everyone else can too!
