Writing your own Web Page, Going Live on the Web Tutorial

Last minute touches then up-loading to your server

by Phil Markey

Welcome back to my Free Web design tutorial. Uploading to the server

So far in lesson one, lesson two, lesson three, lesson four, lesson five, lesson six, lesson seven and lesson eight We designed, built, worded and on-page optimised ready to go. In this lesson we're going to add last minute touches then upload to your server.

Lesson 9

Let's finish optimising our webpage ready to go live...

The first thing we need to do is select a page Title for our website.

Add a Title

The page title should:

Include ONLY our main keywords. The least amount of words you can place in the title, the more weight Google will give to each of the keywords and the higher you will rank.

Note: - When I say "Google", I'm really referring to all the major engines (Google, Yahoo, and MSN). But I am saying Google because this is the search engine you should really focus on optimising for because Google gets roughly 50% of all the searches on the web. Yahoo receives about 30% and MSN about 20%.

When creating your page title, it should NOT look like this:

<title>Welcome to our website!</title>

It should not even look like this, which does contain our main keywords, but contains an unnecessary number of words:

<title>weight loss story and weight loss picture and safe weight loss</title>

Although that title isn't horrible and does contain all of your main keywords, you should do a couple of things to cut down on words used.

This would be a perfect title for your webpage:

<title>Weight Loss Story | Safe Weight Loss Picture</title>

Notice that I've:

1. Taken out all of the "and"s. Never use & because that's 5 letters to write &amp;
2. Replaced one of the "and"s with a "|" character (Note: You can add this character by holding the shift key on your keyboard and pressing the backslash key above the enter key.)
3. Combined the keywords "Safe Weight Loss" with "Weight Loss Picture".

Always Combine Your Keywords In The Page Title!

When Google looks at our title, it will see all 3 of our keywords only. Combining keywords to cut down on the total number of keywords displayed in the title is a great way to boost the strength of each individual keyword, which will have an immediate impact on your ranking.

You should by now have made a good heading for your page in the H1 tags. It should include your most important keyword phrase, and make logical sense to a human reading it. It must describe the main theme of what your page is about.

Your H2 tags should include your second most important keyword phrase, and make logical sense to a human reading it. It must describe the main theme of what your page is about further, using different words to your main H1 tag.

Now let's add your META tag information...

Do you remember back in our very first lesson I got you to add this but didn't tell you what to do with it?

Well, the robots tag says to any visiting search engine robots or spiders; "Add me to your index and follow links from this page to other pages where you can index them too".

The revisit-after tag says to those robots and spiders; "When you're done indexing me you should come back and do it again in 14 days when my site will have changed".

Tip: - If your site doesn't change then revisit-after is pointless. You don't want old versions of your site displayed, so update only if they change.

The meta http-equiv="Content-Type" says the language character set your page is written with. We've been making pages written in any of the Western European languages iso-8859-1. A none European language would have its own character set. Unicode UTF-8, charset=utf-8 has become the dominant character encoding for the World Wide Web, accounting for more than half of all Web pages these days, and you should consider using that for all your documents.

The 2 META tags that we need to look at are: description and keywords.

Add your list of keywords to the keywords' definition. Most important words first, and with separating commas like this:

Choose your page description from your headings and or the first paragraph of your text. Your first paragraph of your text is what it should really be. Don't re-word it much, try to keep it exactly the same if you can. It will be cropped off to different lengths by different engines. So don't make it over long. It must contain your most important keywords.

Two last things to carefully consider...

You've already named your document when you saved it. Remember we called it index.html.

If this page is not going to be the very first page that loads by default under your domain URL then it can't be called this. You'll need to give it a different name and it ought to be something related to the page contents. So weight-loss-story.html would be a good one to use.

Notice that a name cannot have any white space. You could do as I've just done or something like weight_loss_story.html or weightlossstory.html. That last one is not great for obvious reasons.

Note: I don't use any upper case words in the document name... It's actually better if you do, because they stand out and get clicked more. But you may run into problems... When you come to use FTP to upload, the program may automatically change the case to lower-case and therefore rendering your internal links in your menu useless.

Your Domain Name

You really need to think hard about this one... It's who you'll become on the Web. The main name to your site.

Choose a name that describes what you do rather than what you're currently known as. It'll rank higher for keyword searches. But if you really want to just use your current company name that's fine. The name's got to be unique though!

Testing in other browsers

The html layout in your page is standard. It is the most basic of basic html code that has been in use (more or less) since the very start. Therefore, it will work in all browsers and needs no workaround.

The style that you've made is compatible with Firefox, and is therefore built to Web standards. But it will NOT display the same in all browsers. Each browser manufacturer will say that their style rendering engine uses standards, but each displays slightly differently.

I don't really want to dwell on this! Because I could talk forever and I want to get on to other things. Therefore, I'm going to tell you how to detect the problems and how to go about building a quick fix. There are many ways to make a quick fix, and again, I don't want to dwell on it, so I'm going to show you just one... the one that will help you the most.

Step 1

Download and install the more popular browsers.
The ones that are used more frequently are... and in this order: Google Chrome, Firefox also Mozilla, Microsoft IE, Apple Safari, Opera, Maxthon, Rocketmelt, SeaMonkey, DeepNet Explorer, Avant Browser, Amaya - W3C's editor/browser.

I would say it's more important to test with Firefox, Google Chrome, Opera and Amaya together with Microsoft IE versions.

Step 2

Load your page in each browser and note the differences.

Step 3

Build a new style sheet for each. By removing yours to a safe place, then adapting a clone for each browser, until you have one that works for each.

Step 4

See which new styles are cross-browser (works in more than one the same way), and narrow down the differences.

Step 5

Hopfully you should narrow it down over time to give you a generic style that is acceptable for all browsers and a separate style that fixes the problems with the others.

Now, in your new generic style sheet, the one that has all the styles that work in all browsers you insert the style that only works in the special browsers.
Like this:

The special styles will override any laid-out in the main style sheet and therefore display correctly. And the others that work in any will still work in any.

It'll take you a while to get it all working cross-browser. But you will narrow it down. If you get stuck on a particular one then you can search for more information on the Internet. It would take me forever to write down every scenario here, and I don't know what you don't know for me to be able to answer your question.

That concludes. We're ready to go live now!

No obligation!
Via Paypal

Right at the start of lesson one I mentioned that there would be a Paypal donations button to come on a later page for those people who felt that the course was a good one and would like to make a small donation. Well, I put it on lesson five. I thought I'd also put it here on this page as this is more or less the completion of this section. You're under no obligation to do so! Only if you really like what I've tought you in these lessons and wish to! But it certainly would help me towards by bandwidth costs, and I would be most grateful if you did.

Going Live...

For your webpage to be seen on the Internet or World Wide Web it needs to reside on a server, a big computer somewhere in the world that is permanently connected to the Internet. The cheapest, and one that provides everything you'd ever need for that price is Justhost. Basically, what you need is cheap, fast, a Linux operating system, unlimited disc storage space, and your own email server. Later when you get more advanced with your coding and programming you will want a server with a database, support of multiple page extensions like PHP 5, and cPanel Account Control Panel. With Justhost you get all these things for the same price, and you can have multiple domain names in their own directories. That's everything you'll need. Later, when your sites become popular on the web you can get a dedicated server for your site through Justhost for a little extra.

You've built and tested all your pages, they need to go live as soon as possible, so go ahead and order your hosting account now...

Justhost provide an on-line FTP client for you to upload all your pages and pictures to the server. This works very well and is suitable for you to start off with, but sooner or later you'll want to purchase some File Transfer Protocol (FTP) software of your own.

FTP software looks like this:

Once you've made a connection to the server (the hosting company provide the IP address, username and password to connect) then the files that are in your computer (those that you made) are in the left-hand window. The files on the server are in the right-hand window. You simply upload them with this. The folder or directory that you must upload everything into is public_html.

Like I mentioned earlier, you need your own domain name, Justhost will register a name for you for free. Or you can transfer a name to point to your new server IP address. Requires changing the registry to point to the new named servers.

Don't forget to upload all the pictures and things in the folders you've made, like images and styles. You can upload the whole folder with everything in it, or create the folder on the server using the FTP program and then upload the files into that. Make sure the spelling of the folders is correct or you'll have broken links.

Now check that your index.html file loads under your new domain name in the Internet. Simply type in your new domain name in a web browser and your index.html page will load as the default page.

Tip: - You can load the full URL:
http://www.yourname.co.uk/index.html
or
http://www.yourname.co.uk/
Both will load the same default page.

Lastly, with regards to uploading, check that your whole site is working properly, live on the Internet. The W3C have a broken link checker to help you check the whole site is uploaded and working correctly.

Now go out there and try and find as many PR 3, 4, 5 or higher websites to make a link to your new site. That is the only thing that will move your site further up the search results.

Submit your site to directories...

Directories are search engines powered by human beings. Human editors compile all the listings that directories have. Getting listed with the web's key directories is very important because many people will see these listings. In addition, if you are listed with them, then crawler-based search engines are more likely to find your site and add it to their listings for free.

Yahoo maintains its own independent "directory" of Web sites, which are compiled by its human editors. Yahoo has two submission options: "Standard", which is free, and "Yahoo Directory Submit", which involves a submission fee.

Anyone can use Standard submission to submit for free to a non-commercial category. You'll know the category is non-commercial because if you try to submit to a non-commercial category, the Standard submission option will be offered in addition to the Yahoo Directory Submit paid option.

Why might you choose to pay when the free search engine submission option is available? Simply for a fast turnaround time. If you use the free submit choice, there is no guarantee that your submission will be reviewed quickly or at all.

How do you submit? If you are submitting for free to a non-commercial category, click on the "Suggest a Site" link that appears at the top right-hand corner of the category page. That will bring up a submission form. Fill it out, and you're done.

Submitting To The Open Directory

The Open Directory Project (aka ODP or DMOZ) is a volunteer-built guide to the web. It is provided as an option at many major search engines, including Google. Given this, being listed with the Open Directory is essential to any site. You want search engine spiders and crawlers to come and visit your site don't you? This is so you appear in search results. Well they'll never find you unless someone else or a directory make a link to you.

The good news is that submission is absolutely free. The bad news is that this means there is no guaranteed turnaround time to getting a yes or no answer about whether you've been accepted. In fact, you may not receive any notification one way or the other. So go ahead and try to get a high page ranked site to link to you as well, you may get spidered or crawled this way first.

To submit, locate the category you want to be listed in. Then use the "add URL" link that appears at the top of the category page. Fill out the form, and that's it -- you've submitted.

If you are accepted, you should see your site appear within about three weeks. If this doesn't happen, then you should resubmit. Note that for a while it took considerably longer than three weeks to be listed in ODP because of editorial delays. In December 2006, ODP announced that "editing is back", so the situation should be back to normal.

Well! That's it...

I think I delivered all that I said I would on that first page. I certainly feel that I've put a lot of work into this! That donation would be most appreciated, even the smallest of contributions will help. If you feel I've done a reasonable job of teaching you all this then I'll add the donation button again. Thank you!

So where do you go from here?

I recommend getting a good book about JavaScript. JavaScript is a prototype-based scripting language with dynamic typing and has first-class functions. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. More recently, however, it has become common in both game development and the creation of desktop applications.

Your hosting company Justhost offers many useful free ad-ons like WordPress for building an on-line blog, JavaScript libraries like Ruby on Rails etc..

What I don't recommend is learning Flash. Flash is slow, not supported by any of the mobile devices, and everything that can be done with Flash can be done by myself or even yourself using good old hard coding like I've taught you in this tutorial. Furthermore, what I do is better and downloads faster than Flash. I'm currently building a HTML 5 tutorial, which will demonstrate how you can better implement Flash-like features in mobile devices and web pages.

All the best,

Phil Markey
Retired Professional Web Developer