Pete Writes: Suddenly, the tone was dramatically lowered... ►
◄ Site Update: Back to HTML 4.01
I thought this might be useful as I've had a lot of people ask me how I'd suggest getting into building websites. And you know how much I hate repeating myself like writing. It's written in note form, because covering these subjects in detail would take a heck of a long time. You might find it useful to search on Google or Wikipedia for unfamiliar terms.
Suggested timetable:
- Learn HTML and CSS, including some practice.
- Test your pages from hard drive in different browsers. Test them on a free webhost.
- Investigate using PHP to make life easier, and install an offline server.
- Find a paid webhost to suit you, register a domain name, etc.
Getting started:
I learnt HTML (Hypertext Markup Language) almost ten years ago, by looking at other people's code. At the time, most HTML was version 3.2 and version 4.0 was just starting to appear. If I had that time again, I would have learnt to treat the two versions separately earlier and avoided many early bad habits. I will warn you now: don't expect your first pages to look whizz-bang impressive or be put off if they don't. The most important thing has always been content, and a layout that allows people to read and view it comfortably. Focus on content.
Visit the W3Schools website at http://www.w3schools.com/ and be prepared to spend some time copying examples and learning by doing. Without getting into detailed explanations, I'd suggest learning HTML 4.01 Strict rather than XHTML 1.0 for now.
Avoid using tags that are described as "deprecated". Again, without in-depth explanation, you'll probably pick up bad habits if you use them. If you're following good practices, HTML is what you'll use to break down your pages into paragraphs and lists and link in images. It isn't what you'll use to describe whether words should be shown in a particular font — that's where CSS (Cascading Style Sheets) come in. W3Schools have a "Learn CSS" section for you to work through too.
When you have pages on your hard drive that you're happy with, experiment with uploading them to a free webhost such as Tripod. Such a host will probably insert ads into the pages when it shows them, but it's a chance to get other people to test your site and tell you how easy it is to find their way around and whether your content is of interest or use to them.
Once you move on to paid webhosting, you can starting Googling terms such as FTP or PHP and how those can make building pages and getting your site online for other people to use a lot easier. But don't walk before you run; do learn HTML and CSS first.
Choosing development tools:
A good text editor, an image browser, image-editing software and an offline server for when you've progressed to working with PHP. My current choices here are jEdit, XNView, Corel PhotoPaint and EasyPHP, one of which (PhotoPaint) is commercial software but version 7 or 9 is available cheaply. I wouldn't recommend jEdit as a text editor to complete beginners... something such as ConTEXT or Crimson Editor will suit you more, or older and more powerful editors such as Notetab Light or HTML-Kit. For completely free image-editing you may like to try Serif PhotoPlus or GIMPshop, though I personally find neither particularly easy to work with.
There aren't any circumstances I'd recommend using Internet Explorer except to test your own pages, because it's too prone to bugs and security holes to use it on unknown sites. However, it's important to test using IE because some people have no choice what web browser they use, whilst many others simply don't know better. Also test with (and use) Firefox and Opera, plus a text browser (such as Lynx) to approximate what search engines and blind users get when they access your pages. Versions of IE older than 6.0 can be run as standalone instances for testing backwards compatibility, although this is becoming less and less necessary. If you can find a Mac, test with Safari.
Images for the web you'll be saving out of XNView and PhotoPaint (or an equivalent) in JPEG/JPG, GIF or PNG format. Keep a copy of anything you may want to go back and edit in BMP or TIFF format, but don't use these formats on the web (as they tend to produce very large files and aren't compressed or are compressed very poorly.) JPEG is for photos, PNG for images with only a few colours in them. GIF is almost completely redundant now, but may occasionally be useful if you (or clients) insist on putting distracting little animations on pages. Learning to edit images and adjust compression settings is a course in itself, so experiment with trade-offs in quality.
It is possible to save HTML out of some DTP programs such as Word, which is called WYSIWYG (What You See Is What You Get) editing. Don't, because web pages are inherently not WYSIWYG — it's up to the browser how it displays your HTML, and the best you can do is give it clear suggestions... something much harder to do with WYSIWYG editors. Additionally, programs such as Word make it too easy to produce ugly pages that are hard to navigate, because they're designed for making documents with content broken into chapters rather than pages that are entirely separate.
Choosing a paid webhost:
These days I wouldn't select a host without PHP/MySQL, or without the ability to use .htaccess controls. Convenient domain registration and FTP access to the server should also be assumed. There are circumstances in which you may not want to register domains through the same provider as your hosting, such as if you think you may want to switch services in future and have heard reports of the host making it difficult for domains to be transferred. Even if you don't think you'll need the services I've mentioned so far, you'll quickly run into situations in which they make life much easier.
Research your webhost. Google them. Read accounts of how they've handled any problems. And now a bit more on those services I mentioned...
At its simplest, PHP is a language invaluable for the ability for all pages on a site to use content stored in a separate file, so changes to that content only have to be made once. Editing and uploading hundreds of files is otherwise a chore, and sites grow. As you grow more confident you'll find yourself using PHP for more conditional output, or using guestbooks, etc. built in it.
MySQL is a readily available basic database solution. Something that as a beginner you're likely to grow into a little more slowly, but useful early on for storing data such as stuff visitors type into a guestbook, even if you don't understand the script you're using.
Simple uses for .htaccess include blocking your images from being remotely-linked on other sites, which amounts to theft of your bandwidth. More advanced use allows you to change the page returned when a visitor clicks a broken internal link or enters a URL for a page that doesn't exist, or forward them to an index page.
Establish in writing what will happen if you use more than your allocated bandwidth. Some hosts will automatically cut public access to a site if it goes over transfer limits, others will bill for the overage — which could be an unforeseen hidden cost.
Try to pick a host that will scale to meet changing needs. One that will let you pay slightly extra per month or year for extra bandwidth per month or extra server space for files, rather than shifting you up to a different hosting package with features you may not need such as as multiple email inboxes.
💬 Comments are off, but you can use the mail form to contact or see the about page for social media links.
