Web Basics

Web Servers and Hosts

Web Addressing: URIs

A web site needs a web server. This is a program that takes requests for URIs, usually from web browsers, and delivers the page requested. URI = Uniform Resource Identifier. URL = Uniform Resource Locator. These are not quite the same thing, but for now, we'll assume they are. A URI is a web address, e.g. http://Kosmoi.com/WD/Basics/index.shtml.

• http:// identifies the protocol (access method) to get the page.
• Kosmoi.com is the domain name of the web site.
• /WD/Basics/index.shtml is the path down to the page.

Paths are like folders within folders. You start at the top level, such as the folder (or 'directory') WD, and inside that you will find another directory, called Basics. Within that directory, there is a file called index.shtml. This is the actual web page that the server will send back to the browser.

Web Hosts

You can run a web server on your own computer, but setting it up and running it is more than most people want to get involved with. The alternative is to use a hosted web server. There are companies who will host your site for you, for a fee, or sometimes for free in return for putting advertising on your site. Finding a good host can be a difficult process - or easy if you're lucky. I suggest you ask around before choosing. We use Pair Networks.

Process Overview

You could sit down and make a web page using an editor, upload it to your site, and be done very quickly. This might be a useful way to get started, but if you keep on working that way, you'll probably find your site turning into an ugly mess... I recommend being much more thoughtful about it.

1. Plan
2. Build
3. Nurture

1. Plan

Before you even start to make your page, think about your subject, how you want it to look, who is it for, what should they get out of it, etc.

Choose a Title (topic)

A good, meaningful title is important. It's the first thing people will probably know about your page (e.g. through search engines, links, etc). "My Home Page" is pretty useless. "Mark Richmond's Gecko Page" is much more helpful to the world, and there probably aren't many (or any) others with the same title amongst the billion or so on the web...

Research: books, people, web (e.g. Google, EncycloZine, ...)

If you're doing more than a simple home page about family and friends, you'll probably want to do at least some research. Make sure you have good, accurate content by consulting reliable sources. If your page contains errors of fact or spelling, your visitors may not visit again.

Think about site organisation (structure, filenames, ...)

If your site is likely to be more than a few pages, it needs to be organised - both as foundation to your navigation structure, and to avoid ending up with a big mess. Don't dump everything into the top level. Think about sublevels - folders or directories, named according to your main topic categories.

Design page (layout, styles, colours, ...)

The most basic page design comprises a title, main heading, subheadings, and paragraphs. You may want something more sophisticated, to include columnar text, images, navigation menus, etc. And you'll perhaps want to use colours and different fonts. But don't go overboard! Some web pages end up being unreadable messes.

2. Build

When you've designed your page and written the text ('copy'), you'll want to actually build it. Web pages are written in HTML, a computer language with lots of <pointy brackets />. HTML isn't extremely complicated, and you can learn enough in an hour or so to create pages 'by hand', writing out the code yourself. Or, you may prefer to use and 'HTML editor' to do it for you, much like using a word processor.

Gather components (text, images, ...)

Use the results of your research, and your own knowledge, to write the copy. Writing for the web isn't quite the same as writing for paper publications such as books. Your text usually needs to be shorter and more concise. People don't like to read masses of text on computer screens. Illustrate it as far as possible with relevant pictures.

Create page (manually, editor, software, ...)

There are basically 3 ways to create web pages:

1. Using a text editor such as Notepad to write HTML.
2. Using a WYSIWYG ('What You See Is What You Get') web editor.
3. Using programs or scripts to generate code from databases or files.

Writing your own HTML requires you to learn a computer language, whereas using a WYSIWYG editor allows you to just point-and-click, and is easier for those who don't want to get too deep into computer stuff. Using programs or scripts is more specialised, but is the most powerful method. You can generate a whole site from simple files or from database records, and change the page designs easily. We use a macro processor called xh.

Upload to site (FTP, cut & paste into telnet, ...)

When you have a web server, you have one or two ways to get your pages onto it. The usual way is to create them on your own computer, and then upload them to the server, usually with an FTP program. FTP = File Transfer Protocol. Some web page editors have FTP built in, so if you're going to use one, you may not need a separate program. There are many FTP programs available, for free or for pay. You should get at least two and try them out. I use SmartFTP.

If your web host allows it, you may also telnet into your web directory and edit your pages directly, just as if you were sitting at the computer where your web site is hosted. This option is only suitable for more advanced computer users, but is much more powerful. I use PuTTY.

Integrate with site (styles, links, ...)

Your site should have a reasonably uniform 'look and feel' - i.e. style of its own. You may already have built much of that into your page, but some may require linking in a 'style sheet'. And, you will need to link to it from 'neighbouring' pages in your site structure, e.g. from the parent and possibly from siblings.

3. Nurture

Once your web page is on your site and visible to the world - you're probably not finished with it! You'll probably think of more to say and add to it. Many pages are permanently "Under Construction". Some seem to just grow and grow and grow... When they get to be big, consider breaking them out into new pages.

QA / test (validate, browsers, link check...)

Pages can be good or bad not just because of the content, but also because of the underlying structure - the HTML, style sheets, links, etc. Perhaps they work fine in your browser, but not some others. Pages need testing.

Get more links (promote, advertise, ...)

If the page is just for family and friends, its enough to tell them the URL. But if you want a wider audience, you need ways to tell the world. There are 2 basic ways: get your site listed in search engines (e.g. Google), and in directories (e.g. Yahoo!). Some are free, some will cost you ($300 in Yahoo!).

Improve, update, experiment...

I'm constantly looking at my sites and wondering if I've made them easy to use, attractive, useful, etc. Architecture and usability are actually quite deep topics, and even some big, famous sites sometimes fail to be as good as they could be. Don't be afraid to try new things.

Split out to new pages...

As already mentioned, your site is likely to grow not just because you uploaded new pages, but also because your old ones grew too big and so you broke them up. You may one day find that your handful of pages grew to dozens, or hundreds, or even thousands (I know this from experience). Then, you'll be glad if you were thoughtful about the site's organisation!

A Basic Introduction to HTML.

HTML is the HyperText Markup Language. Hypertext refers to the ability to link text to web documents such as other web pages. For example: HTML (click on it!). A markup language is like markup that book publishers use: it specifies how the page should be structured and formatted. It does this with tags, which are special bits of text placed in the web page, that aren't displayed, but apply to the text or images inside them. Here's an example: <b>make this be bold</b> -> make this be bold.

Here's a more complete example:

 
<html>
<head>
	<title>	My Web Page </title>
</head>
<body>
<h1>	My Web Page	</h1>
<p>
	This is the first paragraph on my first web page.
</p>
</body>
</html>

To learn more, visit Simple HTML in a Nutshell.

HTML Editors and Other Tools

Probably the most popular method of creating web pages is to use an HTML editor. Some are 'point-and-click' WYSIWYG environments in which you can create simple or sophisticated web pages with little or no knowledge of HTML, while others - such as those listed here - require at least some knowledge of HTML or will help you learn it, and give you the satisfaction of having complete, hands-on control of your web page. Many of the WYSIWYG editors generate dreadful code that you're better off never looking at, except to see how bad it can get...

An HTML editor saves you from having to learn HTML and typing <pointy bracket stuff />. They will usually provide you with the quickest, easiest way to get your site up. Still, I recommend you to at least try making your first page 'by hand', so that you'll have a better idea of what your web editor is doing. This may be useful if, for example, you can't get it to do exactly what you want, and you can then look at the code generated and diagnose and fix the problem. But be aware, some editors generate awfully bloated code, and few of them generate standard HTML.

What Next?

Once you've learnt the basics and created a couple of simple web pages, you will probably want to learn more advanced techniques, and how to make your web site useful and friendly to your visitors - and how to get people to visit your site!

You'll probably find it useful to learn more HTML, and CSS. Style sheets are a way of separating presentation from content. That is, instead of writing code into your page to say that this or that text should be bold red on a pale yellow background, you give the text a class (e.g. 'special_note'), and then put the specific details (color, font, alignment, etc) in a separate file. That file can then be used for all your web pages, so that if you change your mind about how you want things to look, you only have to change that file, instead of all your pages.

If you want to get into some real web programming, then take a look at JavaScript, Java, DHTML, XML, etc.

Last but certainly not least, always consider architecture and usability!