The lecture starts with an overhead gel welcoming attendees, this slide also indicates why I use overhead gels for presentation rather than PowerPoint and give an apology for my extensive use of notes, due to Meningitis. The slide also mentions that questions can be answered in the dinner queue, mealtimes or in the Cock Tavern during the evenings.

Websites 'R' Easy

First we have to define what the web actually is... Many people confuse the Internet and the World Wide Web.

The Internet... Is an interconnected system of networks that connects computers around the world via the TCP/IP protocol.

The World Wide Web... Is a hypertext-based, interconnected set of websites and pages, that was Invented in 1989 by Tim Berners-Lee, that runs within the framework of the Internet.

TCP/IP Pronounced as Tea Sea Pea Eye Pea... Short for Transmission Control Protocol/Internet Protocol, the suite of communications protocols used to connect host computers on the Internet. TCP/IP uses several protocols, the two main ones being TCP and IP. TCP/IP is built into UNIX (the main operating system used by the Internet, making it the de-facto standard for transmitting data over networks. Even network operating systems that have their own protocols, like Netware, also support TCP/IP.

What is a website?

A website is simply a collection of files that provide information on any topic that are placed on the web, at a specific address that can be accessed by a user.

The files themselves are very simple text files and are assembled within the viewer's computer by an application known as a browser, this file content is laid out according to a set of rules suited to screen display. It is a process that involves the very minimum of signal traffic on the Internet and the information from each page is cached locally on the viewer's machine so that any repeated files do not need re-sending. This simplicity is where the speed comes from, our job in creating a website is to keep the files as simple as possible, consistent with them containing an adequate amount of information.

This simplicity means that this lecture contains overhead gels that are almost all text based, (normally not good lecturing practice) I hope this does not detract too much from the experience.

Simplicity of coding, does not necessarily mean that a site has to be boring, your first few attempts may not be very sparkling, but you will get better as you gain experience.

Creating a Website involves six basic stages:-

1.   Planning

Register a domain name (www.yourwebsite.com) that is short and relevant.

Site Hosting... There are many 'rip off' deals offered for hosting your site, shop around and go for one that charges about €40 to €80 per year all in, but make sure you have secure backups of everything, both locally on your machine and on CD roms in your local bank vault.

2.   Content development

Clearly define your objectives, making sure they are realistic, given the time and money that you have available.

First understand your target audience, then identify content based on their needs and interests.

The content of your site will most likely be some combination of information that you currently have and information you will need to write to suit the purpose, or information provided by others.

Use 'white space' between short(ish) paragraphs, for some reason a person's attention span is less when reading from a screen than when reading a book.

3.   Graphic design

No matter how interesting your page content is, it is graphic layout that sets the style that will make your site memorable to the surfer. A common theme running through all pages on a site sets the style. A common theme may also be used through sets of pages dealing with a particular subject that are on a very large multi subject site. Repeated design elements throughout the site, create a sense of continuity.

4.   Writing the code

Once you have planned your site text and images, you will need to convert this information into a form that browsers understand. Originally this was done using HTML... (Hyper Text Markup Language), but these days this has been modernised to XHTML + CSS, do not be put off by the abbreviations or acronyms... They are a fact of life in cyberspace, XHTML is a version of HTML that also copes with documents written in XML (Extensible Markup Language), CSS stands for Cascading Style Sheets, which is a very simple way of incorporating style into a document.

I stress that you should not be 'put off' by these technical terms, they are in fact very, very simple to understand and learn.

The simplest way of doing this is with a text editor, I use the one that comes with windows... It is called Notepad and is trivially simple to use.

Many documents on the web and tutors in colleges will recommend using web page software to produce the code, this requires no knowledge of HTML, but is harder to learn and produces very poor quality code.

There is a 'halfway house' available, that is a souped up version of a text editor that also contains features that can insert and check HTML tags.

It is also possible to write a web page as a 'word' document and then save it as HTML, this is seen as easy by some that are already used to 'word' software, but this method produces the worst quality code of all, that will run slow and hamper the search engines, which are all features that will make your pages less visible on the net.

If you really cannot handle this work yourself, you can hire an expert HTML coder for between £40 per hour and £100 per hour, (to make a page from a document that is the size of two A4 printed pages, takes about three quarters of an hour including error checking and inserting on the web server).

5.   Marketing and promotion

Creating a brilliant website is waste of time if no one can find it, there are millions of sites on the web and you need to put some effort into promoting and publicising your site, otherwise yours will be lost in a sea of similar pages.

Make the search engines do this for you, by writing the text in a way that they will recognise that the content matches the title and the Meta data is also related exactly to page content. Create links to other sites that have similar information and ask for reciprocal links.

Web pages are indexed by search engines and as more and more content has been placed on the web the analysis of these pages has become quite sophisticated in order that the customer gets the best possible suggestions from the range available.

The search engines do this by ranking several different aspects of the pages and comparing the page content to the meta data (if any), they also make value judgments of the way language is used and the relationship of the text to the page title, the quality of the HTML coding is also assessed as well as how up to date the coding standard is.

It is this promotion aspect that makes handwritten code so valuable, as once the rules have been learned and understood, you can write the text and code to 'keep the search engines happy', which in turn means you need to spend little effort in promotion as the robotic page assessors do it all for you.

You can achieve high page ranking by paying for top billing, but it will cost £300 to £400 per page per year, so it is well worth doing the job right in the first place.

You can 'submit' your site to the search engines, this does not mean that your page will get a higher ranking, but it might achieve it's ranking a few days earlier than it would if the crawling robots had to find it.

There is another benefit of good handwritten code... If the robots find your work is good enough and has validated structure, the top search engines will come back more often to look for site upgrades and additions without any intervention from you and you will get much traffic as a result.

There are businesses that will submit your pages for you, some of these will add meta data for you, but you still end up paying high prices for the service.

6.   Maintenance

A website needs regular upkeep... Please don't think that once it's online, it's done, new content has to be added and existing material kept abreast of current developments, links require to be regularly checked. For a small hand written site, this can take as little as a couple of hours a month, but maintenance on a large website like mine is almost a full-time job, so factor in the time and effort of continuing maintenance into your original planning.

Again this maintenance can be bought in, but it is far better and cheaper if the originator of the code also deals with all ongoing maintenance.

Make sure all features of your site design and layout are fully documented, and that you have backups for all files, always create an updated file by first copying the file to be modified and renaming it with the title and date, then work on the copy. NEVER modify the original file.

Measuring traffic and tracking visitors to your website, and how they navigate through it, can help you refine and improve the site. You can measure visits to your website by analyzing your web server's log files, these tell you when and how often specific files were downloaded. You can also see which pages are most popular. Log files can record which domains (web servers) visitors came from, but not exactly who they are.

ROBOTS... The internet is populated with many strange beings (they do not all look like me :-) They have names like Spiders, web crawlers, active agents or just plain robots. The main task of these robotic ferrets is to index the web so that when you ask for information by typing into a search box, you get not only what you asked for, but the cream of what is on the web that deals with your subject.

OK... I have rattled on about how easy it is to write good quality code, so how is it done?

HTML allows you to specify text size, color and font and has Tags for the placement of graphics, tables, bulleted or numbered lists on web page.

HTML files are written and stored in ASCII (plain text) format, so they can be easily and quickly transferred between computers using different operating systems and can be easily read by either humans or computers. (Again, hand coded pages are more easy to read than software generated ones.)

Formatting "tags" instruct a web browser how to display an element in a hypertext document. They are enclosed in 'less than' and 'greater than' symbols used rather like brackets, and in general there is an opening tag and a closing tag... Here is an example,

<p>
<big>The first few words </big>of this sentence will show as larger than the rest of the sentence.
</p>

This shows on screen as...

The first few words of this sentence will show as larger than the rest of the sentence.

All the different web browsers will display HTML files, but different browsers may render the code to a slightly different layout on the screen. This is due to the browsers being designed by large software companies that take little heed of the rules laid down by the World Wide Web Consortium (W3C).

W3C actually make the rules for how the web works.

The differences between browsers are small and there are coding tricks that you can learn that will take care of most of the differences.

All the standards for all aspects of web coding are available on the W3C website, however it is written by geeks like me and takes time to get used to, if you struggle, a quick Email to me will enable me to point to the information that you need.

A simple web page will look like this...

Coding		Screen Rendition
<html> <head> <title>My First Web Page</title> </head> <body> <h1>My First Web Page</h1> <p>Body text (Hello World !)</p> </body> </html>		My First Web Page Body text (Hello World !)

Now to explain why... The <html> and </html> tags tell the rest of the world that what is between them is an HTML document and should be parsed by a browser application.

The document is in two halves, A 'head' portion and a 'body' portion, each enclosed in the tags <head></head> and <body></body>.

The two sections are dealt with differently, the head section is where information intended for robots is placed and it does not show on the screen, in my example the words between the <title> and </title> tags tell the internet that this page is titled 'My First Web Page'.

There are two items within the <body> and </body> tags, the first of these is the title that will show on the screen and it is rendered large and bold by the <h1> and </h1> tags. The second is a paragraph (represented here by just the words  'Body text (Hello World !)'  that are enclosed by the <p> and </p> tags.

A few Do's and Don'ts

Animation and multimedia can add interest to a website, but use them sparingly, they soon become an annoying nuisance to the surfer.

Since multimedia files tend to be large, they may take a long time to download, possibly frustrating your audience.

If you must use animation... Use animated GIFs. The file size can be kept small and all web browsers support them.

Beware of requiring visitors to have browser plug-ins. Many people won't take the time to download and install them.

Use Java applets sparingly, as they run slowly on older computers.

Use JavaScript sparingly and never use it for navigational purposes, as you will get very poor marks from the search engine spiders .

Do not use code 'just because it works', many browsers will render bad code so that it looks reasonable on screen, but that does not make it 'right' and you will score low marks with the robots.

Frames are bad... They were a common way to organise a website when the net was in it's infancy, but things have grown up and everything that you could ever do with frames can now be done by CSS far more efficiently.

Books

I am often asked to recommend books to help in coding, but I'm afraid the pace of development on the net outstrips conventional publishing to such an extent that nothing ever appears in print that is current. There are many books available, (I have a shelf full), but all of them have at least some wrong information. The only thing I can recommend is keeping up to date by reading the information published on the W3C site. Having said that, do not use the latest 'cutting edge' ideas, they take time to get implemented in browser software, so it is safer to lag behind by about a year on the latest ideas.

Office Software... Is something that many computer users are used to, but it is designed for producing printed documents. A web page is viewed on a screen and it's layout is due partly to your coding and partly due to the browser. Screens come in all shapes and sizes, and the user's browser knows what size screen the computer has, so it is wise to let the browser handle most of the layout so you do not need to get involved in tedious layout coding.

Always remember that software that is sold to you, is designed for connectivity with other pieces of software that are marketed by that company, your ease of use and fitness for purpose come way down the list.

Part two, this afternoon, will tell you how I translate all of this into the pages that I produce for my own website.