One of the most common questions we're asked is "How do I build a website?". For most people, their day-to-day experience with the internet will be a straightforward one, using Google to find sites and surfing around via links to find information. It's not necessary for the average web user to know anything about the inner workings of websites, or how they run.
But when you finally decide to take the plunge and set up your own site - perhaps you want to promote your business, or simply create a page about your favourite hobby or past-time - then I'm afraid you're going to have to look deeper beneath the surface, and get to know a little bit more about how the cogs and wheels of the Internet turn
If you're finding the whole thing a little daunting though, and want a hassle-free way of getting your own website up and running, that's where we come in. If you're interested in purchasing a website design package, just get in touch for a completely free, no obligation quotation.
For those of you interested in looking deeper though, then over the next few pages, we're going to share a few tips with you about how the Internet works, and how you can get a slice of the action for yourself...
Common Misconceptions
A few common misconceptions about websites are outlined below. These represent some of the more common responses that people give when thinking about setting up their own site
"I'll have to leave my computer on all the time"
Not true. A website is something that runs completely seperately from your home PC and you'll be able to set up a website even if you don't have an internet connection at home - from a friend's house, or an Internet Cafe (although it helps if you do, as it makes the process simpler and you can access your own website whenever you wish).
Setting up a website requires that you purchase Hosting Space from a Hosting Company. At Solarise Design, we usually recommend http://www.dataflame.co.uk as a good choice, although there are many available companies, so shop around for a good bargain. See the section of "Hosting Companies" on the next page of this article for more info.
Your Website Host will take care of your website, and make sure it stays safe and secure
"My data won't be secure if it's available online"
Not true. If you choose a good hosting company, and make sure your website code is safe and secure (see the section on security on the next page of this article) then your website will be protected by the same sort of protection that covers some of the largest websites on the net today.
If you run an online shop, or keep financial data online, then you can ensure your information is kept safe by storing it in a secure administration area accessible only to yourself by typing in a password known only to yourself.
Your website will be as secure as you need it to be!
"This'll mean I'll have to learn a lot about programming"
Yes and no. To build your own website, you will need to know a little about HTML, but this is a reasonably straightforward thing to pick up once you get to know a few basic rules.
However, to get into the really advanced stuff, you would need to know about CSS Stylesheets, MySQL, PHP or Javascript, which can be quite daunting to the beginner. For simple sites though, you can stick with HTML with no worries. Tutorials for this are available throughout the internet (Google for "HTML tutorials")
Alternatively, you can get in touch with us to order a website design package, and we will work with you to construct your website to your exact specifications. No technical expertise required on your part!
Hard work pays off, but you can get us to do the hard work for you!
How To Begin...
So now you know a little about what to expect when creating your website, let's take a look at how you can get started. You're going to need to make a few decisions along the way, and learn a few new skills, but nothing on the following pages is too taxing, and help is always available through handy online tutorials if you get stuck at any point
Get a Website Hosting account for your site
There are a couple of things you need to act as the foundation for your website.
- A Domain Name (like www.yourwebsitename.co.uk)
- A Website Hosting Account
A domain name is simply a handy way of giving your website a unique, easy-to-remember name you can hand out to people, and it allows people visiting your site to come back to it at a later date, or note down the address to pass it on. The domain name also gets picked up by the search engines, and this allows them to place your website in their directory of listings.
Giving your Domain a Name
A domain name can be anything you wish, although there are limitations, mainly because a lot of the good, short and snappy names have already been taken. Simple words, like "shopping" and "business" are most certainly unavailable for most top level domains - e.g. shopping.com and business.co.uk.
Choose a name which reflects you, or your business well. If you run a business selling "widgets and devices" from the UK, then a domain name widgetsanddevices.co.uk would be an ideal choice for you.
To check if a domain is available for you, you can use the domain checker tool available through the website host when you're signing up for a hosting account
Website Hosting and Purchasing your Domain
For setting up a website hosting account, we're going to take you through the process of setting up an account with our recommended website hosts, Dataflame (A UK based company), but the process should be fairly similar wherever you decide to purchase your account.
Choose your Hosting Package
There are many options when choosing a website hosting package. The main one is whether to go for Windows or Linux. Whichever one you choose won't make much of a difference for your basic site, but there are some differences between the two packages which won't become apparent until you begin developing more complex sites. I always recommend clients choose the "Linux" option, simply because it offers a little more flexibility for developers when building the site.
If you view the Dataflame hosting page (http://www.dataflame.co.uk/hosting) you'll see these two options. Beneath each of the two options are further choices - Home, Work and Elite. These are just names they've given their packages, but the pricing differences represent the number of features, and transfer/space quota you'll recieve.
The important things to note here are the "disk space" and "data transfer" amounts - The amount given in the "Home" package (2GB/40GB) is more than enough for most personal or small-business purposes, so you can click on that to select this particular package.
On the Home package page, you can click on "Order Now" to be taken to the next step in the process.
Select Your Domain Name
After choosing the appropriate package, you'll be given the option to select a domain name. At this point, you can check to see if your chosen domain name is available too (i.e. that no-one else has registered the same name).
You may also see a few other options along the lines of
- I want the hosting company to register a new name
- I want to transfer my existing name to the hosting company
- I want to update my nameservers
For now, you don't need to worry about options 2 or 3 - They are required if you already have a domain name and it is registered with another company. Since you're adding a new domain name at this stage, select the first option.
Enter your required domain name in the box (remember to select the TLD type - e.g. ".com", ".co.uk", ".org" or whatever you require. Different TLD values will be priced differently. Approximate prices are £10 per year for .com and £5 per year for .co.uk - Domain name registration is very inexpensive.
Verify, and Complete your Purchase
Once you've chosen your domain name, and your hosting package, you'll be presented with the payment options. This works in pretty much the same way as any online shop. Place your details into the secure order form, provide the company with a valid email address and the whole process should be finished before you know it!
Keep an eye on your email once you're done, you'll be recieving important information through the mail about how to connect to your new website and upload your website files. Which brings us neatly onto the next stage - creating HTML files to display on your website
HTML - Hypertext Markup Language - is the language of the internet. It's what holds the pages together you see as you browse the net. Here's an experiment for you: While viewing a website, go to your browser's toolbar and select the "View" or "Page" menu. Within this menu is an option called "View Source". Or you can right-click on any blank area of the page and choose "View Source" from the menu that appears. A new window will be presented to you with a seemingly chaotic jumble of text and >, < characters. Congratulations! You're looking at HTML code!
If this is the first time you've ever seen HTML code, then you're in for a bit of a surprise. If you've ever seen the Matrix, remember that bit where the guy is looking at the green characters streaming down the screen and explains how he doesn't see the characters, he sees a lady in a red dress, or cars, people, buildings and so on?
It's all just Text and Characters
It's the same with the internet. HTML is basically just text. Characters and symbols which provide instructions about how your computer should display a website to you. These instructions are made up of building blocks called "elements" or "tags". The page you're reading right now is made up of chunks of text contained inside paragraph elements. This bold text is contained within "bold" tags. This italic text, within "italics" tags. Here's how the code looks behind the scenes…
<p>It's the same with the internet. All of the coloured wording, clever formatting, background images and decor on the internet is basically represented by just HTML - text, characters and symbols which provide instructions about how your computer should display a website to you. These instructions are made up of building blocks called "elements" or "tags". The page you're reading right now is made up of chunks of text contained inside paragraph elements. <b>This bold text</b> is contained within "bold" tags. This <i>italic text</i>, within "italics" tags. Here's how the code looks behind the scenes…</p>
This may look like a bit of a jumbled mess to you, but have a read through it, and compare how it reads compared to the paragraph before it. Try and match up the characters in the paragraph to the paragraph in the grey box. You'll see how where there's a string of characters like ', an apostrophe is placed in the text. Similarly, … represents three dots, ... - an ellipsis for those of you interested in learning fancy words for things.
(And for an extra little thought-exercise, take a look at the source code of this page to figure out how I wrote the text … without the symbol '…' appearing. Here's a hint - how can you represent '&' in HTML?)
To explain further how the concept of elements and tags works, imagine if you were trying to emphasise a certain phrase in a sentence to be more important than another. You might want to make it bold to stand out. You have to have some way of starting and stopping an instruction which says "This text, and this text only, must be bold". This is where the concept of closing tags comes in. Bold text is created by adding an opening tag - <b> - typing some text, and then providing a closing tag - in this case </b>. The backslash in the closing tag tells the browser to stop making text bold, and return to a normal state.
There's a huge amount you can learn about HTML though, and I'd recommend checking out some of the links on the last page of this article where I've provided some useful links to HTML tutorial sites you can peruse at your leisure.
Your Very First Site
Now, how do you actually use this HTML code, and in what way should it be structured to form a fully working, functional webpage? Well, I'm going to introduce you to a few new tags here, which make up the structure of a web-page. Look at the following example code
<html> <head> <title>My First Website</title> </head> <body> <h1>This is the main heading!</h1> <h2>This is a subheading</h2> <p>This is some <b>page text</b> - that last bit was <i>bold!</i></p> <h2>This is another subheading</h2> <p><a href="http://www.google.com">Let's Go To Google!</a> - That bit's a link!</a> </body> </html>
This code represents a very basic outline of an HTML file. The tags html, head and body are very important, as they define the overall structure of the HTML file. Without these, an HTML file may display, but there's a good chance it won't render properly.
Everything placed between the <body> and </body> tags will be shown as page content. However, everything between the <head> and </head> tags will remain invisible to the user, but visible to the web browser. This is where you place information like the page title (within the "title" tags), and other information such as page description, author, date created etc. - Basically anything that shouldn't show up on the page, but you still want to be able to have available for the browser. (The information in the "title" tags shows up in the browser's window bar at the top of the page)
To let you get started with HTML programming, open up Notepad on Windows (or an alternative simple text editor on any other system), then copy and paste the above code into a blank file and save it as "index.html". This is the file you will be transferring to the website host to display at your website address.
Be aware: You must use a simple text editor, like Notepad, as it is extremely important you don't use software like Microsoft Word or another word processing package, as these programs insert "hidden formatting" into the text which will prevent your website from showing up properly.
Placing your Code on your Website : FTP
Now that you have your first website file, it's time to upload it to your website host, to show your new creation to the world!
Remember in the first step of this guide, when you signed up for an account with the website hosting provider? You were sent an email containing a variety of bits of information which will now come in very handy. Look through the information sent to you for something called FTP. This stands for "File Transfer Protocol" and is the system most often used to transfer files between computers across the Internet. You're going to need to get hold of another piece of software to make use of this functionality. One I would highly recommend is "FileZilla", and you can download this from http://filezilla-project.org (download the FileZilla Client package)
After you've downloaded and installed the application, run it from the system menu and you'll be presented with a screen with a variety of areas on it. This is your file-upload screen, and you can use it to transfer files to your server.
Now, look back at the details you were sent when you signed up for the hosting account. Under the FTP section for a username, password and FTP server address. The username and password should be fairly self-explanatory. The FTP server address will look something like ftp.yourwebsite.co.uk. This is a special location - you can tell by the "ftp" at the start of the address - which allows you to transfer files onto another computer. Click on "File" and choose "Site Manager"
In the window that opens up next, choose "New Site", and you'll see a list of options on the right. First, type the FTP server address into the box marked "Host". Then, change "Logontype" to "Normal", since you'll be needing to enter a username and password. In the appropriate boxes, type your details and hit "Connect"
You should then see a list of instructions appear at the top of the screen, and momentarily, a list of folder icons will appear in the right-hand window. This is your remote file directory and it is here you can place your files to have them show up on your website. You should be able to navigate through the folders as you would on your home computer. Try that now, and you should see a folder named "public_html" (or similar - it could be called "www" or just "public") show up. Select this folder, and now we're going to try a file transfer
In the left hand window, you can see the files present on your local computer. These are the files present on the computer you're sitting next to right now. The files on the right of the screen are remote files and are present on a computer elsewhere in the world. Locate the file you created earlier (index.html) from the left hand window and then - making sure that you have selected the "public_html" directory on the right, right-click on your file and choose "Upload". The file should then transfer onto your website server.
Now, if you visit the address http://www.yourwebsite.co.uk/index.html (replace "yourwebsite" with whatever your website address is) you should be able to see the results of your file upload!
On the next page there are some links to HTML tutorials and other resources you can use to learn a little more about making your own website
Building your own website isn't something to be undertaken lightly, it can be a daunting task to some and, especially if you have no previous computer experience, can involve a steep learning curve. But it is a satisfying endeavour, and in the end you'll have something that you've created available on the internet for anyone to view!
If you're still interested in having your own site, but feel a bit overwhelmed by the instructions on the previous pages, or just don't have the time to spare, then we can do the hard work for you. Get in touch with us to recieve a free, no obligation quotation, and we'll work with you every step of the way to get your website up and running!
discuss this topic to 