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...
Actually, before you start with the mechanics, please make sure you've read my comprehensive guide to the discipline of web design, “Save the Pixel - the Art of Simple Web Design”, which will help inform every decision you make when designing any web site.
The Basics of Making a Web Page
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.
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.
HTML pages should always include the following. You may want to copy & paste this into a new text file…
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 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 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.
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.
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.
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!
Let’s say you’ve saved your file to C:websitesfirstindex.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.
Let’s say we’ve created another page, for "Contact details".
Here’s the simple HTML…
</head>
<body>
</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
</head>
<body>
</p>
<p>
</p>
</body>
</html>
What I’ve changed:
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…
</head>
<body>
</p>
<p>
</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!
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. If you don’t have a hosting provider, here is a list of some cheap web hosts.
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.
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!
Buy the entire Basics of Web Design section as a PDF e-book:
only £1.50 GBP
New eBook - Guide to Semantic HTMLBen Hunt adds another great eBook to the collection with his "Guide to Semantic HTML". The book gives you advice and tips on how, and why to use semantic HTML.
Included is a comprehensive list of HTML tags, each with their semantically appropriate uses, along with a worked example taking you through the process of how to build a website using semantic HTML.
New eBook - Web page production with xHTML and CSS #1Experience the thought process of a professional web producer as he guides you through the web page production process, from photoshop design to working HTML template.
The book tells you how to approach web production, beginning with semantic HTML, guiding you through how to slice up a photoshop document, and finally how to use CSS for presentation.
"Save the Pixel - The Art of Simple Web Design" is Ben Hunt's manifesto for simplicity in web design, plus a comprehensive guide to achieving great results.
It's over 100 pages of guidance on the process of designing simple web pages, complete with 22 before & after examples of real home page redesigns and dozens of practical techniques you can use today.
Howie Jacobson, author of “Adwords for Dummies”, says...
“Save the Pixel is the best book on web design and usability I've ever read, and one of the best books on internet marketing in general. If … you haven't discovered the strategies and tactics in Save the Pixel, I guarantee you're throwing away money.
ONLY £27 GBP
Do you love our approach to crafting simple & effective web sites that just work for people?
We'd love to hear about your web strategy.
Contact one of our team today!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
</head>
<body>
</body>
</html>