Your first web site Part 5 - Getting your stuff on to the Web
Surfing the web is easy, creating the web is too!
So, now you’ve got your web site created and sitting there on your hard drive ready to go in all its glory and splendour. It looks great to you, but how do you get it up on to the Web for other people to start to use, like Google or eBay? You need to upload it on to a server and get a web address for people to access it through. But how do you do that, exactly? Here I will outline a series of steps to follow to get your site online.
Doing some browser testing
I won’t go into this in too much detail, but suffice to say, the technologies we use to build our web sites work slightly differently across different browsers, so you should test it in different browsers to make sure it works ok before putting it up on the web for all to see. This is less important in simple web pages than it is in complicated web applications like Facebook, but it is still a good habit you should get into.
There are all kinds of devices people use to surf the web, many with their own particular browsers. I recommend that you test your site in as many of the following as you can. You don’t need to own all these devices; just do the best you can, and find some friends that do own them to help you:
- Windows: Internet Explorer 7 or 8, Opera, Firefox, Chrome; try to test Internet Explorer 6 separately, as it behaves very differently to other versions (it is very broken, but a lot of people still use it)
- Mac: Opera, Firefox, Safari, Camino
- Linux: Opera, Firefox, Konqueror, Galleon
- Mobile phones: Opera Mini (you can test this using the Opera Mini emulator), Opera Mobile, Internet Explorer Mobile, iPhone's browser, the default Nokia phone browser
- Other devices: See what else you can find that you can browse the Web with. Games consoles and other handheld devices that aren’t mobiles are a good place to start
If you find this list too daunting, start off simple, then expand as your knowledge increases. At the very minimum, you should test in Internet Explorer 7 or 8, Internet Explorer 6, Firefox/Opera/Safari on any platform, and any mobile phone browser, to see how it looks on a small screen. For example, the images below show my example running on Camino on the Mac, and Opera Mobile 10 on a Windows Mobile device.
Find a place on the web to call home
The next thing you need to do is find a domain name. This is the term used to describe the name part of the web address that points to your web site. For example, Google’s web site is reached by browsing to the web address
http://www.google.com. The domain name part of it is
www.google.com, and the actual domain that Google owns is Google.com.
So what name should you choose? Here are some tips:
- Above all, make sure that your domain name is as short and memorable as possible.
mywebsite.comis good, but
- It should have some relevance to what the web site contains information about. If it is about you,
yourname.commight be good. If it is about cars, how about
- The extension after the last dot (eg
.com) can be changed, but it can only be a set number of different items — see here for a full list. It doesn’t matter that much, but you should pick one that is relevant to your web site, for example
.bizif it is a business,
.seif you live in Sweden, or
.nameif it is just about you.
- You can include numbers, dashes (-) or underscores
(_) in your domain name if you wish, but you probably shouldn’t unless it is absolutely necessary, as it might made it harder to remember.
- Think not just about what the site is now, but also what it might grow into in the future. If your site will only have your resumé on it for now, don’t call it
mynameresume.com, because it might have a lot more on it in the future. Instead, put it as a sub-page of the main site, such as
myname.com/resume.html. More on how to do this later
You can find a much more detailed information about domain names at the WikiPedia Domain Names article.
Checking whether your domain name is up for sale
Ok, please don’t get mad at me if you love eating apples and therefore chose apple.com as your domain name. After you’ve chosen your domain name, you need to check if it is available — someone might have their site hosted on that domain already!
This is easy to check. Go to Whois; enter
apple in the Enter a domain name search box, make sure the com checkbox is checked, then click the Search button. It will come up with a report that shows a cross next to
apple.com, indicating that it is already owned by someone else. Below that, it rather helpfully gives you a list of similar list of domain names that are available with Register... links detailing the cost to buy these domains. You can click one of these links to buy a domain straight away if you like, but you probably want to spend more time searching, to find a domain name you really want.
Once you find an available domain you like, go ahead and click that Register... link, and you’ll go through the process of buying it, just like you would with any other online shopping site, such as Amazon or Play.
Some internet access deals come with free web space for you to put a small site up on, but these are usually less reliable, and tend to give you a less than ideal domain name.
When you buy a domain name, you’ll receive a document from the registrar (the company that adminstrates the domains) through the mail containing a unique code for you to use should you want to do anything with the site, such as move it to a different server. More on this in the next section.
Note that you have to pay a small amount each year to keep your domain — it is more like renting than buying. If you don’t pay, you’ll lose the domain, and someone else will be able to buy it.
Uploading your site to the web!
This is the moment you’ve been waiting for. Now you are ready to upload your site on to the web for all to see. But how?
The domain name you bought is pointing to some space on a server owned by a hosting company. These are the people you talk to, to get your site online. You will get their contact details when you buy the domain.
Accessing your web space
This is usually done in one of two ways. Most hosting companies will offer you both.
First of all, they will probably have some kind of administration web page where you can log in to the site, then get to a web form that allows you to upload files. You will have selected a username/password at some point during the registration process. This is easy, but can be a bit painful to use, especially if you have a lot of files to upload.
The second option is a bit more complicated, but not much. It involves using an FTP client (File Transfer Protocol client), which is a software program that sits on your computer’s desktop; most of these allow you to look at the contents of your hosting space in a window. You can then add and remove files as you wish by dragging and dropping them. To use one of these, you need to do the following:
- Download one! There are some good free FTP programs available. I’d recommend FileZilla for Windows and Linux and CyberDuck for Mac.
- You now need to find the login details for your domain’s FTP site, which your hosting company should be able to help you with this. You will probably need:
- A hostname: This usually looks like your domain name, except with
ftp.on the front, ie
- A username: This should be the same user name as mentioned above, which you chose when obtaining the domain
- A password: Again, you should have this from when you obtained the domain
- Initial folder: Sometimes you might have to specify a folder that you are logging in to on your hosting space
- A hostname: This usually looks like your domain name, except with
- Create a new connection on your FTP client, and enter the above details into it. Depending on the exact client you end up using, this should take the form of selecting a simple option and filling in a dialog box with the above information. I use Fetch on the Mac, and my connection window looks like this:
- Hit Connect, and you should now be connected to your hosting space.
What files do I put up where??
With most hosting servers I have worked with, you will have to upload your standard web site content to a folder called httpdocs or http. If it doesn’t appear obvious, bug your hosting company about it! There will be other folders present, but don’t worry about those for now.
Another thing to bear in mind is that normally when you load up your domain in a web browser, the web site is set up to automatically display an HTML file called
index.html. Therefore, you should call the page you want to be shown when a visitor goes to your site
index.html, and upload it, along with the CSS, images, etc. that make up your site (the technical term for this is the assets of the site). Again, these details may differ, so talk to your hosting company if this is not the case. You can also change the default page loaded to another one, but I'd leave it at the default for now.
So go ahead and try it! Create your own web page (or modify the template I’ve provided), and try uploading it to your hosting space along with its assets.
Wow, that’s it. Quite a journey huh? In this foray into creating web sites, I should’ve given you just enough to get a basic page of your very own up on the Web for all to see. I hope I haven’t scared you off; on the contrary, I hope I’ve given you a thirst to learn more about this topic. I’d like to invite you to start digesting the Opera Web Standards Curriculum, which gives a much deeper treatment of Web design and development. In addition, check out the other education project I have contributed to, WaSP InterAct, which contains exam questions, lists of competencies, sample assignments, and many more recommended readings about web development for you to get your teeth into. There are lots of other resources recommended there, and I’d like to encourage you to recommend your favourite ones to your friends and family, see if they can start creating their own bit of the Web too. Happy experimenting!