How to Build a Website

.ftpaccess files and ftp hacking

2010-07-21T12:02:00.001-07:00

A number of my sites have been hacked recently. Lots of dodgy links have been hidden in the html behind the scenes, only visible when you look at 'view source'.

The main vulnerabilities in the approach I use to managing websites comes from FTP (or so I am finding out) though I also use php 'includes' sometimes, which is another no-no.

Anyhow, my provider, 34sp has come up with a suggestion for resellers to protect their FTP uploads. This seemed like a reasonable idea but has not worked out that well for me, so here's my take on how to adapt their approach.

Despite having an .ftpaccess file in place, a charity site I run has again found itself with lots of dodgy hidden links in its pages. I suspect the problem may be because I created the .ftpaccess file using Dreamweaver 4 with the wrong Line Feed characters - these files apparently MUST have a Unix line feed or they will not work.

I have another problem though. With these .ftpaccess files we are advised to use the enum range if we are not on a static IP address. This seemed reasonable but my ISP's enum ranges seem to change with great frequency so this whole approach is not going to be very reliable for me.

So, I've been wishing I could just turn OFF ftp access until I need it. And that is what I have decided to do, like this.

1. Create an .ftpaccess file as above but leaving only 'Deny all' in the file, no other valid IP addresses and put it in the appropriate directories (httpdocs, httpsdocs and cgi-bin)

2. Using Plesk file manager, change the permissions on the .ftpaccess file to what I think is called 644 or rw- r-- r-- (which seems to be generally recommended for .htaccess files as a secure permission setting)

3. If I want to FTP to the site I first go in to Plesk file manager and move the .ftpaccess file to a special purpose built directory called ftp-off

4. Do whatever FTPing I need to do

5. Go back into Plesk and move the .ftpaccess file into httpdocs (I move the file rather than rename it to retain the permissions settings)

This is a rather belt and braces approach but as far as I can tell it locks off FTP so that only the person with Plesk access can use it.

Now, none of my customers do any FTPing for themselves. But, if they did perhaps the solution would be to allow 127.0.0.1 to allow them access through siteadmin.

How to Password Protect a Folder or some Files on the web

2010-05-10T23:28:00.000-07:00

Placing files .htaccess and .htpasswd into the directory you wish to protect is apparently a good way to put some password protection on folders on the web. So if you want someone to type in a password before they can access a web page, these .ht files are what you would use. There is a good explanation of how you do this here... http://davidwalsh.name/password-protect-directory-using-htaccess - Dave also has a nice tool to let you MD5 encrypt the password too!

Well, I tried it and I got a '500 internal server error' on the page when I tried to access it. After some head scratching I found this post which reminded me that sometimes the presence of non Unix line breaks can cause problems in files like this: http://www.oreillynet.com/cs/user/view/cs_msg/6238.

Rather than immediate reach for BBEdit, I found a nice article explaining how to ensure Dreamweaver uses Unix Line Breaks...
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda9110b1f693f21-7bdd.html - I don't know why you'd want it any other way!

So, I'm now happy that I have a password protected web page for one of my customers!

Struggling with PHP includes on Namesco Linux servers

2009-07-05T04:59:00.000-07:00

Flexible alternatives to PHP includes found here! Excellent!

http://blog.everymanhosting.com/php-coding/warning-include-functioninclude-url-file-access-is-disabled-in-the-server-configuration/

Identifont - Identify fonts by appearance, find fonts by name

2009-04-10T08:57:00.000-07:00

Identifont - Identify fonts by appearance, find fonts by name - this is very helpful!!!

Lightbox 2 Problem - Progress Indicator on left instead of centred

2009-02-09T16:11:00.000-08:00

I've been scratching my head over this for a while but have finally found an answer.

If you are using Lightbox 2 (see huddletogether.com) you might see the progress indicator or 'loading icon' off to the left instead of centred. This is confusing and looks a bit sloppy.

It turns out that if you have used

Display:block

for images in your main CSS this will cause a problem for the Lightbox. Simply edit the jquery.lightbox-0.5.css file adding

Display:inline;

to the

#jquery-lightbox a img { }

statement and that should fix it for you.

Described in less detail on the
forum

Cheap / Free Stock Photos - SXC / Fotolia

2008-09-29T04:30:00.001-07:00

Dan told me about this cheap/free photo library (you need to check royalties on a photo-by-photo basis).

SXC Photo

Fotolia.com

Don't forget you can also use some of the photos on Flickr too - just check the creative commons licences on each image.

UK Legal Obligation to put Company Details on a Website

2008-08-14T16:27:00.000-07:00

I have only been made aware of this today but there is a legal obligation for a company to put various details, such as it's address and company details, on its website.

Note that there are similar obligations relating to business letters and emails too.

The Google Link: operator

2008-08-14T16:06:00.000-07:00

The 'link:' operator on Google is supposed to show you what sites link to yours. This is quite helpful when assessing SEO because as we know, the number of links in to your site helps your ranking.

IT DOESNT WORK
==============

Google is thought to report only 5% of backlinks that exist. This is apparently because if they revealed more links people would be able to figure out how their search algoritms work. So, the bottom line is that the 'Link:' operator is rubbish.
http://www.successful-blog.com/1/check-google-backlinks-through-yahoo/
http://www.seo-guy.com/forum/thread10675.html

Google recommends using Webmaster Tools instead of the link command
====================================================================
"you can get a much larger sampling of sites linking to yours using Google Webmaster Tools"
http://www.google.com/support/webmasters/bin/answer.py?answer=55281&ctx=sibling -

Google Webmaster Tools better than the Google Link: operator
http://googlewebmastercentral.blogspot.com/2007/02/discover-your-links.html

Google recommends another alternative approach to the 'link:' command
=====================================================================
"To obtain a comprehensive list of sites that point to a page, perform a Google search on the URL. From the search results page, select the "Find web pages that contain the term" link, and Google will provide you with webpages that mention that address. Note that in this case, Google will return all pages that mention this URL, not just those that link to it."
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=34453

Others recommend using the Yahoo link: command
==============================================
http://www.seo-guy.com/forum/thread10675.html - this thread mentions the approach but I think the yahoo operators mentioned no longer work as described.

Backlink checking tools
=======================
There are tools available to check backlinks, such as marketleap.com, but several of them, including marketleap, just report the results of a standard Google 'Link:' query, which is pretty poor.

A quick test looking at www.chrisbikes.co.uk
============================================
Google Link:www.chrisbikes.co.uk - 3 links shown
Google Webmaster Tools - 231 links shown
Google search on www.chrisbikes.co.uk - 42 occurences shown

Yahoo Link:www.chrisbikes.co.uk - 35 links shown
yahoo.co.uk linkdomain:www.chrisbikes.co.uk - 42 links shown

http://siteexplorer.search.yahoo.com - 263 links shown
http://siteexplorer.search.yahoo.com/uk/ - 35 links shown

Conclusions
===========
There seem to be 3 broad categories of results returned when it comes to looking for backlinks:

1. Absolute Rubbish
- results from google 'Link:' command

2. High Quality Links without much repetition
- results from a google search on the domain, or
- results from the yahoo link: or linkdomain: command

3. Comprehensive list of links with lots of repetition
- results from Google Webmaster Tools
- results from yahoo site explorer (US version - http://siteexplorer.search.yahoo.com)

Recommendations
===============
Do not use the google 'Link:' command.

Consider using the following:
Google Webmaster Tools or Yahoo Site Explorer
http://siteexplorer.search.yahoo.com to get a comprehensive list of links in.

To get a list of high quality links in try the yahoo link: or linkdomain: commands.

Better PHP Includes - php includes - solving "no suitable wraper could be found"

2008-05-05T07:29:00.000-07:00

I've had a few problems with PHP Includes done at the directory level. Particularly with the $root variable I mentioned in a previous post.

34sp pointed out that, "If you simply use the $_SERVER['DOCUMENT_ROOT']."/path/to/file" it is more secure", so that's what I'm doing now.

Free webpages for Cambridge people & another Cambridge Index

2008-04-04T06:06:00.000-07:00

www.colc.co.uk is Cambridge Online. They have so many links that they are almost another Cambridge Directory, and a good one too.

They have a great service helping Cambridge People to get on the web, letting you have a 1 page website for free. It's fantastic! These sites seem easy to find on Google too.

SEOmoz | Google Search Engine Ranking Factors

2008-03-14T03:33:00.000-07:00

SEOmoz | Google Search Engine Ranking Factors - an excellent article which reports on a survey of SEO experts about which things are important to your web page for effective SEO. I know enough about all this to put quite a lot of faith in this survey - the things ranked as most important here correspond to my understanding.

Wordtracker - Keyword analysis

2008-02-13T16:30:00.000-08:00

Word Tracker seems like a great tool for helping you figure out which keywords your customers might be typing in to find a business like yours. This is worth a good read.

Don't let Nominet rip you off for a domain name

2008-02-07T17:42:00.000-08:00

I was doing some work for Chris' Bikes today. He had got a domain name renewal letter from Nominet asking for £94 for 2 years. What a complete rip-off! He is not a web expert and might well have just paid it. I talked to the guys at www.34sp.com and we managed to renew the domain name for £10 for 2 years.

I was chatting with someone later who put me onto www.1and1.co.uk. They sell domain names for as little as £2.62 per year !

Telling Google WHERE you are in the world

2008-01-29T14:37:00.000-08:00

Step 1. Go to http://maps.google.com
Step 2. Go to 'mymaps' tab and create a map, with a pushpin marking your location
Step 3. Hit the 'View in Google Earth' button and save the .kml file
Step 4. Load the .kml file into Google Earth
Step 5. Save the new .kml file from Google Earth (this one is cleaner)

(an alternative to the above 5 steps would be to use http://www.addressfix.com/ (I've just discovered that useful tool!)

Step 6. Edit the kml file in your favourite text editor making good use of the tags and links you can put in there.

Here is a nice example of a .kml file which indicates the kinds of things you can do with the <description> tag:
http://www.seo-expert-services.co.uk/seo-expert-services-london.kml and in use here.

Step 7. Put a link to the kml file in the sitemap.xml file, like this...
<url>

<loc>http://www.userexperiencedesign.co.uk/userexperiencedesigncambridge.kml</loc>

<priority>0.5</priority>

<changefreq>daily</changefreq>

</url>

Refs:
http://weblog.millionpieces.nl/2007/4/how-to-get-your-information-into-google-maps

Some more advanced KML examples.

Web Page Title Tags for Search Engine Optimization & Web Usability - Search Engine Marketing FAQ - SEO Logic

2008-01-21T05:56:00.000-08:00

Web Page Title Tags for Search Engine Optimization & Web Usability - Search Engine Marketing FAQ - SEO Logic

Google Webmaster Tools

2008-01-20T16:15:00.000-08:00

Google has some pretty handy Google Webmaster Tools - Dashboard to use to show you how it sees your website.

You can check your robots.txt file here and your sitemap and loads of other stuff.

Add a robots.txt page to tell search engines like google which pages to leave out of the index

2008-01-20T16:10:00.000-08:00

There is a good summary of the robots.txt file here: The Web Robots Pages.

These days, you can add a reference to the location of your sitemap here too.

Adding a Sitemap

2008-01-20T15:32:00.000-08:00

An interesting Google article asks - What is a Sitemap file and why should I have one?

It is worth adding one to tell google all about your website. It is also worth adding a robots.txt file if you have parts of your website that you would like Google to avoid, or indeed, would like to make really sure Google finds your sitemap!

base href does not work for php includes !! (and what to do about it)

2008-01-08T04:14:00.000-08:00

Base href is very handy for organizing relative addressing on a website. You may, for example, be working on a project for a client with a directory structure like this:

www.userexperiencedesign.co.uk/projects/cambridge_motorcycles

The 'normal' root of this would typically be www.userexperiencedesign.co.uk but if you want the /cambridge_motorcycles part to be the root, you could define a base href so that all the sub-directories under it would refer to that as root instead. Like this...


<base href="http://www.userexperiencedesign.co.uk/projects/cambridge_motorcycles/\" />

This works GREAT for images and general relative addressing.

I was stumped for a while, trying to figure out why this didn't work for PHP includes. PHP experts would not be so stumped. PHP is handled server side, so the base href in the document is not used. After a lot of head scratching I figured that you could define an equivalent for base href to be used by the PHP includes.

First, you need to define the variable in PHP. Mine is like this...


<?php $root="http://www.userexperiencedesign.co.uk/projects/cambridge_motorcycles/\"; ?>

Then, when you call the include file you do it like this...


<?php include ($root."include/header.html\"); ?>

This gives us a neat way to fake up a base href equivalent for PHP includes. Neat!

If you are an efficiency expert you might worry about how many server calls are made by the PHP includes and whether, when defining $root, you should give the whole path or something relative. My sites are very small so this is not a big deal for me but if anyone wants to leave comments on efficiency (or anything else) I am always happy to learn!

embedd a flickr slideshow set to allow good control of display order

2007-12-09T12:56:00.000-08:00

I always seem to struggle with embedding flickr photos into my web pages and I'm not sure why really. If you want a lot of control of the order your photos will display, you should create a flickr set and put the photos in there and order them.

Then you'll need to use your flickr user id number (see idgettr.com) and the set id number for your photos (shown in the URL when you view the set).

Then replace the user_id and set_id in the following bit of code, showing my Impington Swimming Club set.

<iframe align=\"center\" src=\"http://www.flickr.com/slideShow/index.gne?group_id=&user_id=79364623@N00
&set_id=72157594394097360\" frameBorder=\"0\" width=\"500\" height=\"500\" scrolling=\"no\"></iframe><br/><small>Created with  <a href=\"http://flickrslidr.com\" title=\"flickrSLiDR\">flickrSLiDR</a>.</small>

Created with flickrSLiDR.

Aardvark Maps - An easy way to add pushpins to Google Maps

2007-12-02T03:49:00.001-08:00

Aardvark Map - a simple tool for building a map for your website with a few pushpins on it. A bit like this...

Getting your business onto the Google Map data

2007-11-24T07:44:00.000-08:00

Check out the Google Local Business Center.

Can I embed Google Maps into my website or blog?

2007-11-24T06:46:00.000-08:00

Can I embed Google Maps into my website or blog?

Here's how to embed a google map in a website - handy!

Putting code into a blogger post

2007-11-21T12:13:00.001-08:00

It can be a bit of a faff to put code onto a blogger post. I have just found a nifty utility to convert it into the right format to make it easy.

Check out http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/.

This adds the escape characters you need to put code onto a blog. You can put the results between <pre></pre> tags.

How to hide your email address from spammers if you have to put it on the internet

2007-11-21T11:42:00.000-08:00

When you put an email address on the internet, computer programs called 'spam robots' will find it by trawling over all the web pages they can find. Over the years these 'spam robots' have become more sophisticated but they can be thwarted to some degree. There are various ways to thwart them, one of which is to make your email address into an image which has no code equivalent that can be read by the programs. This is a bit nasty from an accessibility perspective - how do people with disabilities access this information?

Another way to do it is to assemble the email address with a snippet of javascript. Whilst a computer program could interpret this ('parse it'), it probably won't bother since there are plenty of other email addresses out there which are not protected at all and they may as well sell Viagra to those people.

Here is how my email address is protected. You will see how it appears at the end bottom of my website, www.userexperiencedesign.co.uk.

The code looks like this. It's a little more complicated looking than I would like because I have had to ensure that it is still valid XHTML. The comments in the code reference the sources of information I used in coming up with this.

You should note that this is NOT a foolproof way of ensuring you don't get spam but it should reduce the amount you get.







<div>
<script type=\"text/javascript\">

</script>

<noscript>
<p><em>Contact carl.myhill at userexperiencedesign.co.uk</em></p>
</noscript>
</div>

NOTE: This bit of code also activates accesskey 9 for your email address. This is the standard (in the UK government at least) accesskey for 'feedback' and allows users to hit Alt+9 to send you an email instead of needing to navigate to the link.

Test your web design in different browsers - Browsershots

2007-11-15T02:36:00.000-08:00

Test your web design in different browsers - Browsershots

What a GREAT tool for testing how your website looks in multiple different browsers. Inspired!!!! Browsercam.com looks good too but is expensive, this one is free!

This post was extremely helpful...
http://www.sitepoint.com/forums/showthread.php?threadid=462563

base href and named anchors

2007-11-14T18:25:00.000-08:00

This is just a rough note for now. I have always wanted to use the base href tag. With this you can have structure like this...

maindomain
maindomain\projects
maindomain\projects\bikeshop
maindomain\projects\bikeshop\map
maindomain\projects\bikeshop\about

Well, normally the root you are working with is maindomain but if you want to temporarily have your bikeshop project sitting in some sub folders you can and you can specify the base ref to acheive it, like this...

maindomain\projects\bikeshop\index.html

<head>
<base href="http://www.maindomain.com/projects/bikeshop">

And now any sub folders can be set up with relative links and will all look at the baseref. SWEET

One thing is not sweet. When you are in this file...
maindomain\projects\bikeshop\about\index.html
...and you jump to a named hyperlink within that document, you jump to the base href instead. Which is a complete pain.

After many hours of surfing it seems that good old PHP has an easy answer for us...

<p class="skiplink"><a class="skiplink" href="<?php echo $_SERVER['REQUEST_URI']; ?>#top" accesskey="2" >Skip over navigation</a></p>

This server request returns the actual URL of the document and sticks it into the page, so, your named hyperlink within the page is more fully qualified.

This probably makes no sense but it is very handy to me to write it down right now!

Decent & Free Usability Tool - usability.gov

2007-02-07T20:18:00.001-08:00

This is worth a look.

Free Web usability tool - usability.gov (ZDNet, 5 Jan 2007) - "The Web Communications
Division in the U.S. Department of Health and Human Services’ Office of
the Assistant Secretary for Public Affairs, in collaboration with "many
federal agencies," offers a comprehensive, easy-to-use,
no-cost, online how-to guide for developing usable and useful Websites."

Source: UPA MONTHLY - FEBRUARY 2007 - The monthly newsletter of the Usability Professionals' Association

Lesson 13: How to put blogger content on your webpage or How to set up a webpage that people can simply edit using blogger

2007-01-30T18:39:00.000-08:00

I distinctly remember spending a full 12 hours trying to figure this out only for my friend Paul Warwicker to give me the key to this in about a minute. Sadly I didn't record the detailed steps but perhaps this outline will be helpful. If not, please let me know and I'll update this.

First create a blogger.com account and a new blog

The first thing you need to do is to create a blog with blogger.com. First you will need to create an account. The second step is to name your blog. Before you finish this, click the 'Advanced Blog Setup' option, since you will be hosting your blog content somewhere else (in your own web space)

In the advanced setup you can add your websites FTP details, FTP path you want to use and the name of the file you want blogger to create and send there for you (in this case I've asked for it to be called 'blog_content.html'.

I am a big fan of looking at lots of examples. I fabricated the one above but the following settings are the ones we use on our swimming club website www.impingtonswimmingclub.org.uk, the first page of which is powered by blogger content.

After you have finished with this page you will be asked to choose a template. You will not be using it really so just pick anything (such as 'son of moto' in green) and then you are done.

Invite the people you want to be able to edit the blogger served webpage

The next thing you may want to do is decide who you will allow to edit the blog. Go into the Blog 'Settings' tab and choose 'Permissions' and then 'Add Authors' to enter the email addresses of people who you would like to edit the blog.

The people you invite will get an email like the one below. They will need to sign up for a google account in order to post to the blog but google accounts are GREAT! Not a hassle.

Explore formatting options - how many posts do you want to show on the webpage?

You may now like to explore other 'formatting' options from the settings page. Depending on how active your page becomes you may need to tune this a bit to decide how many entries you want to post to your webpage. Here are the settings we currently use on the Impington Swimming Club website.

Inserting your blogger file into your webpage using a PHP Include

Now you need to edit your webpage HTML to read in this new file blogger is going to send (via FTP) to your webspace. Again, here is an example from the Impington Swimming Club website. This is pretty simple stuff though it uses 1 line of PHP.

You will notice that the 'Main' content of the webpage is kept within a <div> block (that's not really important here). You'll see a heading <h2> and then 1 line of PHP. Look carefully at the syntax of that line, it's easy to make a mistake if you are unfamiliar with PHP. The most important thing to notice here is that the PHP Include Path may look different than you are used to when refering to different web pages on your webspace (I think they call this 'fully resolved' but I'm afraid I don't remember all of the nuances of this but I think my webspace provider 34sp helped me out with it).

When this works, what happens is that the line of the PHP include will be replaced with the actual contents of the file from blogger, which in the impington example is called, "blogger_whats_on.html". Here's a snippet of our what that current file looks like. It's just a snippet of clean HTML produced by blogger. Heading tags and everything else will adopt the style you already have set up for your website, perhaps in your CSS file.

So, that's that.

Editing the webpage via the blogger interface

When your prospective webpage editors want to change the blogger served content of your webpage they simply go into blogger and blog away. To control the order of the posts editors may like to play around with the posting dates. It's not very elegant but it's pretty simple. Here's what the editing interface looks like...

If people want to add photos to their blogger posts, they can do this in the usual way (see some of the 'lessons' below).

Feedback please

OK, this 'lesson' has been written largely from memory. Please do let me know if you have any trouble making sense of it.

Lesson 12: How to leave space beneath floating block elements

2006-12-04T18:42:00.000-08:00

If you have trouble with floating block elements having no defined height there is a neat solution to it.

This picture is inside a block which is floated left. Any text that follows will just sit next to it.

If you want the text after the image to come out beneath it you don't want to add loads of <BR /> tags to artificially line things up. A more certain and clean approach to giving the element some height is as follows:


<div style="clear:both"></div>

Here is the picture again...

...but with the extra empty div below it to give it some fake height.

Lesson 11: How to centre (center!) your Flickr Slideshow

2006-12-04T18:26:00.000-08:00

I don't know much about iframes but I figure they behave like block elements. If you put a <div> wrapper around it and center that, you should be in business.

Take a look at this example from the Impington Swimming Club website's results page. The entry from 26th November has a centered flickr slideshow and the one from September 2006 has a standard left justified one. All of these entries are fed from Blogger.

Here's the code...


<div align="center">
<iframe align=center src=http://www.flickr.com/slideShow/index.gne?tags=isc_barnet1500_06 frameBorder=0 width=450 scrolling=no height=500></iframe>
</div>

Here's how it looks but note that, you will probably not notice much difference looking at the code on this blog since the margins are controlled very well by other aspects of this page's template style sheet. Best to take a look at the Impington website. Actually, I've made the width 450 instead of 500 now so it may show up.

Lesson 10: How to put a Flickr slideshow on to your website or blog

2006-11-30T16:32:00.000-08:00

The excellent photo hosting service Flickr now allows you to put a slideshow on your website or blog. It uses Flash but most people seem to have that these days.


<iframe src="http://www.flickr.com/slideShow/index.gne?tags=black bear, wildlife" align="middle" frameborder="0" height="500" scrolling="no" width="500"></iframe>

This code searches flickr for any images tagged with both 'black bear' and 'wildlife' and puts them into the following slideshow.

If you make up your own unique Flickr tags you can quickly put a slideshow of your own images on the web or on a blog. If you tell your friends what the tag is, they can also add photos to your slideshow if they have a Flickr account.

Alternatively you can make the Slideshow viewer just look for photos from a particular Flickr user. You can look up your flickr user_ID with idgettr.com. In the following code snippet and slideshow you can see only MY images tagged 'black bear' and 'wildlife'.


<iframe src="http://www.flickr.com/slideShow/index.gne?user_id=79364623@N00&tags=black bear, wildlife" align="middle" frameborder="0" height="500" scrolling="no" width="500"></iframe>

Lesson 9: Writing Valid Mark-Up Code (html or xhtml)

2006-03-06T22:32:00.000-08:00

Why bother with writing valid HTML or XHTML?

1. Improved cross browser compatibility

Browsers like Internet Explorer and Firefox have a relaxed attitude to the quality of your mark-up code. If you forget to close a tag, well, they will usually let you off and make assumptions about what you meant to do. This kindness is actually extreme cruelty in disguise because each browser takes a different relaxed attitude to your mark-up code. This means that if you are developing a website on Internet Explorer, everything may look fine and dandy, but when you try it on Firefox, it may well be very wrong.

So much for kindness.

The solution to many cross-browser problems comes from ensuring you code is valid, which you can do with some free tools, which teach you along the way too.

2. Better Google hits

It seems likely that Google and other search engines prefer valid code. This is unproven but their indexes need to walk over your code, so writing valid code will help them out and will probably be rewarded.

3. Better Accessibility

Valid code is inherently more accessible than non-valid code. To build an accessible website it's not enough to valid code but it is a very good start.

DOCTYPE DTD Declaration

The first step towards writing valid mark-up code is to declare the kind of code you are writing. HTML and XHTML come in different flavours and have different specifications. By stating which one you are following, your mark-up can be validated against the specification.

Here is the basic template you will need (taken from the w3c site), just so you can see where the DOCTYPE fits in...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

 <title>An XHTML 1.0 Strict standard template</title>
 <meta http-equiv="content-type" 
  content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

     <p>... Your HTML content here ...</p>

</body>
</html>

I generally use this xhtml 1.0 strict definition. This is a little tougher than html but not too much when you get into the swing of it. If you want to use xhtml, you have the choice of 'strict' or 'transitional'. I usually strive for strict but at times I give up and switch over to transitional. As I understand it, transitional allows you to use some markup which is really out-of-date with the strict interpretation of the standard but not in a really serious way.

Strict and Transitional DOCTYPES for XHTML are...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A perfectly acceptable alternative approach would be to stick with html. If you do that, here are your strict and transitional choices...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

The W3C website has more information on Document Type Definitions (DTDs) or DOCTYPES for short

Validation Tools

When you have declared the specification your html is written against, you are ready to validate it. The W3C has an excellent markup validator. Why not try it and see how you get on. The validator gives you quite a bit of detail on any problems it finds and is quite a nice way of learning by doing.

Changing from HTML to XHTML - tips

There is not a whole lot of difference between XHTML and HTML, the former is just a little more rigourous. Here are a few tips to get you started in making the transition:

XHTML tags are always lower case

Don't mix case in your tags, just stick to lower case.

Open and Close all tags

All tags must now be closed. Mostly you already know you should close tags like <p> with </p> but there are some tricky ones:

For <br> you should now write the open and close within the same tag, like this <br />.

Same applies for <img src="photo.jpg" />.

Ampersand &

Sometimes when you paste a lump of code from somewhere else, you'll see some '&' in there. You will need to change every one of them to & instead.

Update bold and italic tags

Instead of <b> for bold and <i> for italic; <strong> is now preferred for bold and <em> for italic (emphasis). Often these will give you the same result by default, and you can use a style sheet to change their appearance too.

Lesson 8. How effective are your keywords and SEO?

2006-02-27T23:35:00.000-08:00

In lesson 7 I talked about Search Engine Optimization and keywords. When you have made some of the recommended changes don't expect immediate results.

But when you have been patient and are ready to assess how you are doing you might like to check some tools from Marketleap.com:

1. Link Popularity Check - the number of links there are to your website

2. Search Engine Saturation - the number of pages each search engine has in its index for your website.

3. Keyword Verification - a check to see if your website is in the top three pages of search engine results for a specified keyword

If you want to check how many sites are linking to your website you can use Google advanced operators, particularly the 'link:' operator. For example, link:www.impingtonswimmingclub.org.uk finds other websites linking to Impington Swimming Club's website.

Lesson 7: Making sure search facilities like Google, Yahoo and MSN can find your site (or Search Engine Optimization - SEO)

2006-02-26T20:32:00.000-08:00

When you build a website you probably want it to be found by a Google search. This lesson gives you some ideas about how to achieve that.

I've done quite well with getting hits from my keywords over the years and have not done anything other than what I've written in this lesson. Here some of the keywords which hit my sites easily:

Cambridge car mechanic - 2nd hit
duncan cook plumbing - 1st hit
Impington Swimming - 1st hit
Cambridge outdoor shops - 1st hit
Lindman Doors - 2nd hit

My understanding of the Google indexing method is that it is based on honesty and strives to deliver genuine information to the user of the search facility. Google often changes its index strategy to deal with dishonest attempts to get web pages to the top of its indexes. You will be familiar with annoying websites which apparently had some information relevant to your search but turned out to be meaningless junk. Google takes a dim view of certain companies claiming to specialize in Search Engine Optimization (for a price) and who use all kinds of dishonest tricks to attempt to boost your search results, some of which could get you blacklisted (Google has a useful webpage on this kind of SEO).

Unfortunately all this means that getting to the top of the Google ranking is an uncertain business. However, if you play it straight and honest you will be rewarded for your efforts.

Here are a few things to consider if you want the search engines like Google, Yahoo and MSN to find your website (I frequently refer to Google in this lesson but that generally applies to Yahoo, MSN and the other search engines too).

1. Decide upon your keywords

The first and most important thing to do when trying to ensure your website is listed on Google results is to think through keywords. Have a good long and lateral think about it. What is your website about? Will people think of your name as a way of finding your site? Will they think of a geographic area? What are common synonyms? Do people commonly mispell one of your keywords? Think long and hard and make a list. As you read the points that follow, have the keyword list to hand. For example, in the description of your website that you use for your site submission, put the important keywords in there. Don't go completely mad about it though. If Google asks you for a description, write a description, not just a long list of keywords. Play fair with Google. Write in such a way as your main keywords are mentioned, just don't over do it.

2. Submit your site to the big three - Google, Yahoo and MSN

There are search engines but most of them use data from these big three, so if you cover these bases you've made a strong start:
Google website submission page - free
Yahoo website submission - free
MSN website submission - free

Until recently AskJeeves was one of the other big sites to submit to but now Jeeves has gone, leaving just 'Ask' and they no long accept site submissions.

3. Submit your website to web directories

Search engines take notice of web directories. Two are commonly recommended as worthy for improving your search engine ranking:

The Open Directory Project - DMOZ - free
Yahoo Directory - $299 per year

Given the cost of the yahoo listing I would recommend ignoring that one.

4. Get links to your site from other respected sites - Google PageRank

Google explain that PageRank is the heart of their system. They explain that they count a vote from page A to page B as a vote cast by page A for page B. If page A is a well respected page, it will have a high PageRank and so the vote for page B will be that much stronger. It is a kind of respect system, if a highly respected website like http://news.bbc.co.uk links to your website, it will contribute a lot to improving your ranking. If you download the google toolbar it has a widget on there which shows you the PageRank over every page you visit.

Remember though that honesty is valued by Google. Get links to your website from other places where such a link is relevant - don't just take a splatter gun approach to getting your website linked from all over the place.

When you do get a link from somewhere else it seems worthwhile ensuring that the text associated with the link is also meaningful. So, if you have a website about musical instruments called bananas.com, you might like people to ensure that 'musical instruments' are part of the link text they write for you, like this, Buy guitars and keyboards and other musical instruments at bananas.com.

One place to start could be adding a link to your site from somewhere in Wikipedia but stay honest, only do this if it makes sense.

5. Structure your web page for Search Engines

The way you structure the html code of your web page has a big effect on how high it scores in the Google rankings. The precise significance of each item is not clear but the title tag, heading tags and main body text are very important. Keywords in a meta tag are presumed to be ignored by search engines these days.

5.1 Title tag <title>

In the <head> of your page you should always have a <title> tag (you will see this in the window title of your browser). If your site has many pages, you can have a different <title> tag per page if you like. Here are two that I use on our swimming club website. I was keen to ensure that anyone typing 'cambridge swimming club' into google would also find our website, since we are just 2 miles north of cambridge and may well be relevant to anyone wanting a swimming club around cambridge.


<title>Impington Swimming Club (Impington, Cambridge, England)</title>
<title>About Impington Swimming Club (Cambridge, England) 
- The other Cambridge Masters Swimming Club</title>

It is interesting to note that Google now favours the first more straightforward page title (the first one above) and used to favour the 'About' page title. Such is the way things change with search engines as they continue to evolve in favour of honesty!

5.2 Heading tags <h1>,<h2>,<h3> and bold tags <strong> (formerly <b>)

It is important to ensure your important keywords appear in heading tags if possible. I would assume <h1> is the most important but use the others too if you can.

It constantly surprises me that websites produced by tools like Microsoft Frontpage are devoid of sensible heading tags. Such tools are supposed to help people build websites and protect them from needing to worry about fundamentals of html. In the circumstances I would expect the tools to have some 'duty of care' to their users to ensure the html produced 'behind the scenes' is proper. This seems to be sadly not the case with Frontpage, though Dreamweaver seems somewhat better.

5.3 Body Text

There are various theories about writing for the web which you can find elsewhere. Writing well, keeping it short and spelling correctly all perhaps help your search engine rankings. Try to stay honest and don't go over the top with splattering your keywords all over the place. However, do remain aware of the keywords and synonyms and fit them into your copy. For example, if you are writing about cycling you could try to vary the words you use to try to cover more keyword bases. So, cycling is also bicycling, or biking or MTBing (mountain biking), etc. Think laterally about your keywords and get them into the body of your text but not in a forced way.

5.4 Domain Name and File Names

The domain name you choose and the filenames that form the URL may have an impact on search engine results placement, though perhaps not much.

5.5 Image <alt> tags

When you put an image on a website it is generally good practice to include an <alt> tag with the link. Primarily this is so that blind people who cannot see the image can still tell what it is (sometimes they use screen reading devices that will read out this text).

From a search engine standpoint this is also a good idea since one of the google search indexes specifically relates to Image searches. For example, Paula Collier is one of my swimming club friends, amongst the swimmer profiles on our website. If you view the source of this page you will see the only occurence of her name is in the the alt tag of an image, like this:


<img src="paula_1.jpg" alt="Paula Collier Photo">

A google image search for 'paula collier' has this page as the 3rd result. It is likely that the getting keywords high up in the google image index also helps normal page results for those terms too.

5.6 Links

It is useful to put links between pages on your website to improve your overall page rankings. The more links to a page the better in general, but again, don't force the issue.

Putting links to other websites can also help your own. Working on www.aquariusclub.net (a Florida condo) I linked to the Colony Club, a world famous tennis resort nearby. At one time, when you typed 'colony club' into Google our site was the first hit because we linked to them. Alas, this is no longer the case. Sarasota attracts lots of money and websites so search results for the area are quite dynamic.

5.7 Meta tags <meta>

In the old days you used to put keywords into <meta> tags. Although they are thought to be little used now lots of people seem to use them anyway, just in case. A belt and braces approach. Meta tags go into the <head> section of your html and look something like this:


<meta http-equiv="Keywords" content="masters swimming, swimming in cambridge,
swimming club, masters swimming club, masters, swimming, cambridge, friendly club" />

6 Content quality and freshness

I'm not sure how Google assesses content quality and freshness but they seem likely to make some kind of difference. Things to think about include:

6.1 Short, well written pages

Don't write too much but check the spelling of what you write. Ensure page sizes are quite small. Using Cascading Style Sheets to separate content and formatting information can help to keep page sizes small.

6.2 Fresh Content

Fresh content seems attractive to google. Having a blog as part of your site may help you keep on with the updates.

6.3 Write Valid HTML/XHTML/CSS Code

Choose a syntax, declare it, stick to it and verify it. I think google likes this kind of thing.

The W3C has a useful code validation service if you are curious and want to poke around. I will write another lesson on valid code.

7 Blogger

There is something funny about the successfulness of blogs with SEO. I suspect Google, who owns Blogger, prioritises blog content quite low in its index. I don't know why this is, I just notice that my blogger blogs are harder to find in Google than my other web pages. I'm not sure why, or what to do about it but this does seem so. If anyone wants to enlighten me, I'm all ears.

I've just found a link on Blogger SEO Information and it's worth a read. Ping-o-matic sounds like a good idea!

8. Consequences for Dishonesty

I've mentioned throughout this lesson that google rewards honesty. What happens if you stray and try to trick google, perhaps by putting huge lists of keywords on your site? You may well get blacklisted by google and dropped from their indexes. I have no experience of this but I've heard it happens.

References

These links may be helpful:

search engine watch - 'a webmasters guide to search engines'
http://websitehelpers.com/seo/rankingfactors.html
http://pandecta.com/forum/checklist3.html

Lesson 6: Learning Cascading Style Sheets (CSS)

2006-02-11T12:16:00.000-08:00

Cascading Style Sheets (CSS) allow you to separate the website content (in HTML) from the presentation. CSS seems like a great idea but is not without significant problems for someone getting started. One of the biggest problems is that each browser handles CSS slightly differently. So, when you think you have everything looking perfect in Firefox, you really need to check it works well on Internet Explorer and the other popular browsers.

I began to get to grips with CSS from certain enthusiast's websites. Luckily, several of them got together and wrote an excellent book, which I would recommend buying, called Cascading Style Sheets: Separating Content from Presentation. These guys also have useful sites devoted to CSS which may be of interest (but can also drive you crazy), a couple of them are www.glish.com, and www.thenoodleincident.com/.

One of the big things with CSS is called, 'the box model' which involves using CSS boxes instead of HTML tables to provide the layout for your website. The RNIB famously did not use CSS in favour of html table layout for their site redesign. This outraged the CSS community and they set out to show how CSS was up to the job. You can follow what happened from the RNIB link and a bit of surfing. Strangely, despite their best efforts, the RNIB's layout won out as a more robust accessible design. An unhelpful result for CSS. So, CSS is in need of continual improvement but the idea of separating content from presentation in this seems to be the future, we just need to get better at it!

Lesson 5: FTP

2006-02-09T00:53:00.000-08:00

With a PC, uploading your files to your webspace using FTP is a fairly simple matter. If you open Windows File Explorer, ensure the address bar is shown, and then type your FTP details in there (eg. ftp.litsl.com ), you will be invited to type your user name and password and then you are ready to transfer files around as you would on the desktop.

On a Mac you can't do that. I tried out a few tools and in the end bought Transmit, which I've found to be excellent.

Lesson 4: Choosing a Web Host

2006-02-09T00:50:00.000-08:00

Many companies offer web hosting and best buys regularly change. The folks at 34sp.com have good flexible packages which are cheap, and they offer very good support (though they are a very technical bunch).

If you buy both your domain name and web hosting from 34sp, getting started will go quite smoothly.

I've just seen another hosting company recommended (by Nerd Vittles>and they seem quite interesting, westnic.net. These folks support multiple domains per hosting service, so could be a big saving if you are supporting several different websites.

October 2007. I have just noticed Nerd Vittles recommending another host Blue host who offers a decent deal for $6.95 per month, hosting up to 6 domains.

Lesson 3: Choosing a Domain Name (eg. www.litsl.com)

2006-02-09T00:34:00.000-08:00

There are many places to search for available domain names. I favour 34sp.com, who have sorted out my domain names and web hosting for several years and have excellent technical support (seemingly at all hours of the day or night).

There are a few things to consider when choosing a domain name:

often you will tell someone your domain name, so if you have hyphens in there or it's hard to spell you may lose business.

a good portion of web users attempt to guess domain names rather than using search. Will yours be guessable?

domain extensions have certain implied meanings:
- .com - has an international flavour with an american bias and usually refers to a company
- .co.uk - UK company but some charities like Friends of the Earth use it too
- .net - a bit obscure and usually picked when someone cannot get their first choice of extension
- .org - a good name for a not-for-profit organisation, and has an international flavour (Greenpeace International uses this)
- .org.uk - a good name for a UK not-for-profit

If you are shopping for a domain name and the one you want doesn't seem to be available you can do what's called a 'whois' search, www.whois.net is one such company.

Lesson 2: Choosing Tools

2006-02-09T00:04:00.000-08:00

Internet Explorer & 'View Source'

The easiest way to begin experimenting with HTML, if you are working on a PC with Internet Explorer, is to use the 'View-Source' function.

To get started, in Windows File Explorer create a new file and call it something like lesson2.htm. In Internet Explorer, use 'File-Open' to open the new blank document called lesson2.htm and copy Phil's template in there, and Save.


<html>
 <head>
  <title>New Doc</title>
 </head>

 <body bgcolor=white text=black>
  <h2>New Doc</h2>
  by <a href="/">Philip Greenspun</a>, revised April 1, 2003
  <hr>
  introductory text
  <h3>First Subhead</h3>
  
  <p>
  more text
  yet more text
  </p>
  
 </body>
</html>

With the webpage now open in Internet Explorer you will see the end result of what the template HTML looks like. If you choose 'View Source', you will see the HTML itself.

This notepad editor automatically colours HTML tags so it is easy to see if you have forgotten to close a tag. This is one of the most useful features of an HTML editor for someone writing HTML by hand.

A useful way to work is to have the Internet Explorer screen showing the actual webpage on one screen, and the notepad view showing the HTML on another. When you make a change to the HTML you can quickly Save, and then switch over to Internet Explorer and Refresh, to immediately see the changes you have made.

Other Tools

Internet Explorer and its Notepad are perfectly adequate tools to get you started but you may want more from an editor, such as spell checking or a more WYSIWYG way of creating your webpage.

Here are a few thoughts on other tools:

Dreamweaver - A WYSIWYG tool with a long reputation of producing decent HTML. Later versions have extras like spell checkers and code validators, which can be useful. Dreamweaver seems to interpret CSS fairly well, so as you are working you can see what you're producing. Recommended for PC and Mac. This is the tool I use but I mainly write the HTML from scratch still.

BBEdit - A neat HTML editor for the Mac. One strong feature which I've found useful has been it's facility for doing a search and replace across multiple files. As a long time PC user I never have got used to the keyboard shortcuts in BBEdit, in fact some standard PC ones don't seem to exist.

Pagespinner - An award winning HTML editor for the Mac and one favoured by Zeldman at one time I believe. As with BBEdit I continue to be frustrated by the keystrokes available.

Microsoft Frontpage - A WYSIWYG tool but one which does all kinds of funny things with the HTML code it creates. For example, with web pages it is important to make good use of <h> tags for the sake of search engines like google. Frontpage seems to avoid using them by default. Not recommended.

Microsoft Word - Word can act like a WYSIWYG tool for creating HTML pages but it is even worse than Frontpage. Not recommended.

Lesson 1: Getting Started with HTML

2006-02-08T23:13:00.000-08:00

A good place to start with learning HTML is Phil and Alex's Guide to Web Publishing - Chapter 5: Learn to Program HTML in 21 minutes.

Key things to note from this:
- Phil's standard HTML page template. You might want to make your own standard template and this would be a good place to start.
- "Now that you know how to write HTML, Dont" In the broadest sense I think he means don't get too fancy and try to separate HTML basic content from style, using Cascading Style Sheets (CSS). More on that later.
- Notice the comment about, 'The leading "/" '. I'll return to this point later but it is important in maintaining your sanity through structuring your website well.
- keep it simple

When you've finished chapter 5, Phil and Alex have covered Adding Images to Your Site in Chapter 6. Phil's fame comes from his invention of photo.net, so he knows what he's talking about.

To see essence of what Phil is saying, check out the simplicity and photographic excellence that is his 1994 award-winning travelogue, Travels with Samantha