- Virtual bricks -->
- Back to Landing strip
Alan builds a web site
It really is true, anyone can build a web site, well, at least on your local PC. All you need is MS notepad, which comes free with Windows, a list of HTML tags and an idea of what you want to say. I proved it by opening up Notepad, typing <p>Hello world</p> and saving the file. Pointing a browser at "file:///c:\temp\test.html" gave me this.
In fact, I did not even need the HTML paragraph tags <p> and </p>,but not using any markup kinda defeats the object of using a markup language.
As any programmer knows, once you get "Hello "world" to appear you are a short step away from creating Guitar Hero 10, so once I had proved to myself that I could write web pages, I sat down to undertake my favorite part of any project, the research.
Sorting wood from trees
Like any good project manager, I started off by looking at the project landscape; it's huge. A lush jungle containing thousands of species of web site, some of which are still undiscovered, even by Google. Within each species there were hordes of varieties, hybrids and out of control weeds and everything was evolving as I watched. Every time I went surfing, there were new sites, new ideas, new traps for the unwary. For someone just starting on a first web site, this was complete sensory overload. Time to simplify.
I filtered out all commercial, government and technical sites, concentrating on personal sites and those run by small organizations. Here is a small non-random sample and they are all smartly presented with cohesive colour schemes.
I was beginning to see the species of wood that I needed to carve my site. It would be a simple text and picture site to start with, no fancy scripts or dancing images. Don't get me wrong, I have nothing but respect for some of the tricks being played with actionscript, flash, PHP and the many other web development tools, but I wanted to explore the basics of communicating ideas and information with simple markup language. I also needed to think carefully about the visual design if it was not to look too shabby.
Words and how to control them
By far the largest part of the web is covered with words. Many subjects, many languages, some new slang; but essentially the same words that we have always used to communicate with each other. My greatest fear when starting this site was my lack of knowledge of the correct syntax and semantics of my mother tongue, English.
My wife, who is French, has taught me enough English grammar over the past thirty years to write passable technical documents and business presentations, but I have never considered writing for pleasure, which is funny given that I am an voracious reader. The only thing I ever remembered about how to communicate with words was a quote from Oscar Wilde "Sorry this letter is so long, I didn't have time to write a short one". Which is probably a misquote, but you get the idea.
Fortunately, words came to my aid in the form of two books.
- The Adventure of English, Melvyn Bragg, Sceptre Publishing, ISBN: 978-0-3408-2993-6
- Guide to effective military writing, W A McIntosh, Stackpole Books, ISBN: 978-0-8117-2779-2
The first gave me confidence to write, by showing what a dynamic evolving thing the English language is. So if you don't think much of my mastery of English grammar, remember that this could be the next direction that the language takes after txting has been absorbed.
The second book was the odd man out in a google for help in writing and I couldn't resist it. As I find more and more with modern military tomes, the writing guide was free from dogma and full of practical advice on the organization of writing, which I think reflects their fairly recent understanding that if they get things wrong, people can die. Not before time after thousands of years of lions led by donkeys.
Once I was a bit more confident about creating words, I needed some way to control their production. To start with I just typed directly onto a web page along with all the markup, but I soon found it difficult to manage this approach. The problems arose when I added or altered more than a couple of sentences at a time. When doing a block replace or delete, it was all too easy to pick up unwanted characters, or lose necessary characters at either end of the block.
The solution of course is easy, just separate the editing process from the page composition process, but for an amateur web site, that seems like overkill. What I currently use is a simple process halfway between the two extremes.
Obviously I don't work on the published version of the site, but on the next version to be published and this is hosted on my local PC. Original text, including headings, is created and edited in my text editor until it is close to being finished, after which it is inserted into an HTML page template and marked up. So far, so easy, but once I see it on the page I almost always want to make some changes and this is where update control comes into play.
I backup the current state of a page and then insert a fair amount of white space around the piece I want to update. I then copy the chunk of text, making sure to include starting and ending paragraph tags and update it off page, safe in the knowledge that the page will still function properly as the white space I inserted is ignored as long as the HTML structure is preserved. Editing off page allows me to scribble all sorts of supplementary information and sort it all out when I am ready to insert the updated content back into the page. Small changes and typo corrections are done on page.
I have moved on from Notepad as a text editor and I currently use NoteTab Pro. This is a fairly efficient little editor which has pre-built template libraries for HTML, CSS, FTP and many others and I can also create my own libraries of templates and boilerplate text. Markup is colour coded and can be switched in and out if needed. An extendable dictionary completes the basic functionality, but the full extent of function is far too great to detail here. You can find out more about NoteTab on the web site.
Hosts of options
At an early point in the web site creation process I found it necessary to work out where my site was going to be hosted.
There are many places that offer web site hosting for free. I get broadband from Virgin media and they host free web pages, but like most of the free services, you don't get to choose a domain name. I wanted the extra flexibility that a package from a commercial hosting service offers, but which? After much pawing through adverts, I chose a reasonably priced small business package from 1 & 1 Internet
Why a business package rather than a personal package, if I have no intention of doing business on it? Well, building a web site is a learning experience for me, so it made sense to have a package that would host a database and server side scripting and at £9 per month, it is not going to break the bank even if I do not get around to using all the available facilities.
Images to go
I won't bore you with glib statements about a picture being worth a thousand words -- Oh damn, I just did. Anyway, there are a few simple things I learned about images that you may find useful.
Firstly, It is important to remember that you don't know how a picture will be framed when it is viewed. By that I mean that it may first appear centred on the screen, or with only a few centimetres of one edge showing. This is particularly important when a picture relates to some text, so I always play around with text re-sizing and scrolling to check that meaning does not get lost as the page flows.
Secondly, I need to worry about copyright on any image I use that I have not created myself. The last thing I want is a large legal bill for using that iconic photograph of Marilyn Monroe's dress being wafted up by a subway air outlet.
One option is to use images that are published under a creative commons usage licence. This allows certain freedom of use, whist the publisher reserves some rights. Find out more at either the Creative Commons web site, or the Wikimedia Commons site.Another option, which I have used for this site, is to purchase a CD of permission free images from a commercial publisher. The best known source is Dover Publications
Finally, there is the job of preparing images for web publishing and this, at the very keast, is a matter of sizing them and setting them to a web friendly colour resolution. Each of the images on this page started out at around 150k and have been reduced to around 50k without losing their essential information content. Of course you can just set an image size in CSS, but if you are going to cram an image 500 pixels square into a space 100 pixels square, it make sense to get it somewhere near its final size before the page tries to load it. It also saves page load time if the colour resolution is reduced to that most appropriate to the size on a web page.
One thing that can be easily done with images using CSS is to play around with their aspect ratio. I have deliberately changed the height/width ratio of the Mona Lisa picture on the Leonardo page to broaden Mona's smile slightly. It's harmless fun, but please don't tell the director of the Louvre.
Last updated 14 January 2009