How To Create a Website

Ranked #6,989 in Internet, #329,662 overall | Donates to Child Aid

How To Create a Website

Whether you want to create a website for fun or profit, this lens will tell you everything you need to know! I've been working as a web designer/developer for about 15 years and have decided to share my knowledge.

You can be up and running with your own website within the next hour or so without any previous knowledge on how to make one using free tools available online, or you can take time to learn various software tools and code to create the next Facebook or Google ... it's up to you! Whatever you decide to do, let your creativity run wild and have FUN!

Useful Web Design Resources on Amazon

Loading

Technical Guru or Armchair Webmaster?

OK, so you've decided you want to create a website, but what category do you fall into?

If the thought of getting square eyes analyzing hundreds of lines of cryptic code makes you feel physically ill then you are an Armchair Webmaster and should check out the EASY WAY TO CREATE A WEBSITE.

If, however, you can't wait to get stuck in to the source code of your very first web page then you are a Technical Guru and should check out the TECHNICAL WAY TO CREATE A WEBSITE.

THE EASY WAY TO CREATE A WEBSITE

Not a line of code in sight!

Google SitesThe easiest way to create your first website is to use an online service that does all the hard work for you and keeps you away from all the nasty codey stuff, and it just so happens Google has an excellent website building tool at Google Sites ... and it's FREE! All you need to use it is a Google account, and let's face it, who doesn't have one of those already?

(Hey, just in case you've been living under a rock and somehow avoided signing up with Google, you can easily create a free account from their Sites page)

Once you've logged in to Google Sites, you get the option to create your first website by clicking the 'CREATE' button.

You are then asked for a page title (e.g. My Dogs First Birthday). TIP: If you are making a website for a specific niche then use the keywords you want people to find your site for here.

Once you've decided on your title, you are then asked to select a theme for your website (and there are dozens to choose from). Don't worry too much about this bit as you can always select another template later.

Finally you are asked to enter a short description about your site (again, try to use your keywords in your description) and to verify whether your site is suitable for all ages or if it's adult only.

When you're done, click the 'CREATE' button at the top of the page. If the website name already exists you will be alerted and you will need to change it to something else, but try to keep your keywords in there. TIP: Try adding a few numbers to the end of your website URL to make it unique. That way you keep the keywords in context and the URL will be valid.

After a few moment you will be presented with your very own website based on the template you chose just begging for you to add some content!

Editing Your Google Sites Page

Creating a website with Google

Google SiteSo you're now staring at a fantastic looking web page with nothing in it of any value and you're pondering "How do I put my own stuff on here?!"

Just click on the pencil shaped icon at the top right of the page to edit it.

Everything on the page should become editable, with various tools along the top to select font type, size, color, etc. If you're used to using any kind of word processor then all this stuff should be second nature. Just click on any text area or image on the screen to edit it and add your own. Once you save the changes they will go live on the website immediately.

Adding New Pages

Because one page just ain't enough

Depending on what template theme you choose will determine how many pages your new website starts with, but don't despair if you only get one. It's easy to add more, and more ... and more ...

Just next to the 'Edit' icon is an 'Add page' icon. Click this and you will be asked for a new page name. TIP: Remember to keep your keywords in page names! It all helps with SEO

When you've selected your page name you'll need to select a page type. By default you'll probably just use the Web Page template, but if you want to display a blog type announcements page, or a list of uploaded files you get options for these too.

Go Go Google Gadgets!

Seriously .. is that a cat up his sleeve??

One *really cool* thing you can do with a Google website is add gadgets. These can be selected from the Insert -> More Gadgets drop down menu and they let you do things such as add news feeds, Twitter buttons, shopping carts ... even random pictures of cats if that's your thing.

These provide complex features which add sparkle and functionality to your website that only those with a serious predisposition to speaking in binary can create from scratch, and all you have to do is click a button to have these wonderful things populating your website.

THE TECHNICAL WAY TO CREATE A WEBSITE

HTML is your friend!

If you want something more than a 'click and create' website then you're going to have to get stuck in and learn HTML (HyperText Markup Language) which is the core language of all websites. No exceptions, you will actually have to learn stuff which at the start may look really difficult, but perseverence is key and once you get your brain around the way different 'tags' are 'nested' you'll probably have it sussed in no time at all.

Nowadays I can put together any kind of website from scratch using all sorts of web technologies, but there was a time when I didn't know my HEAD from my BODY (which just in case you think I had some sort of nervous breakdown, they are both important tags in HTML. I know my head is on my shoulders and my shoulders are just above my knees ...)

The easiest way to start learning HTML is to go through some examples online (see the links below to get started) and download a WYSIWYG HTML editor such as Dreamweaver. You can even download a free 30 day trial from the nice people at Adobe.

If you really want to dive in at the deep end, just fire up Notepad and code HTML the veterans way without any pretty graphics to help you along. You'll probably learn more.

Learn HTML Resources

If you really want to learn HTML, start with a few of these

The sites below offer an excellent beginners guide to HTML
W3Schools HTML Tutorial
An excellent introduction to learning HTML, essential to creating your first website. Examples, try-it-yourself sections and short quizzes guarantee you will learn something!
HTML.net
Another very useful learning resource to help you on your way to being an HTML master

HTML Books 'n' Stuff

Loading

Learn HTML Video

Don't want to read anything? Sit back and watch this vid instead

powered by Youtube

CSS

Content and style are the perfect combo!

CSS (Cascading Style Sheets) are what makes your HTML actually look good on the page. Without CSS your web page will probably look like a Word document written in Times New Roman font with a few poorly placed images. Basically pretty ugly and not likely to win any web design awards. Ever.

CSS lets you style particular elements on the page, such as paragraph text in a certain font, size and color. It also lets you place certain elements anywhere on the page which is essential if you actually want your page to look great, otherwise you'll just end up with a load of text and images placed horizontally down the page which, as previously mentioned, will just look like a boring document.

CSS may look tricky to understand at first glance, but the format is pretty standard across most browsers. You simply state which element you want to style on the page and add various styling options, and if you use Dreamweaver to create your website it even gives you a drop down list of choices.

For example:

<H1> is the HTML tag for a Header, usually used for page titles. If you wanted to make all <H1> tags default to Arial font, size 14px and color red, you would use the following code in your CSS.

H1 {
font-family:Arial;
font-size:14px;
color:#FF0000;
}

This would make give H1 tag on your web page these attributes, and the cool thing about using CSS is if you ever want to change the way a particular tag or element is styled, you just amend it once in the CSS and it updates immediately on your web page.

Learn CSS Resources

Get stylish with CSS

W3Schools CSS Tutorial
An excellent introduction to CSS from W3Schools
CSSTutorial.net
Great introduction to CSS with videos and useful tips

CSS Books 'n' Stuff

Loading

CSS Video Tutorial

Put your feet up and watch this

powered by Youtube

Web Hosting & Domain Names

How to get your site from your computer onto the interwebs

Once you're confident with HTML and CSS and have put together a few web pages, you might be thinking "this is all great, but how do I actually get my new website online?"

You will need two things at this point - a domain name and some web hosting. The domain name is the name of your site people type into their browser to find it (e.g. 'www.squidoo.com'), and the web hosting is a basically a specially configured type of computer server which is always online and allows you to upload your web files to it and point your domain name to it.

You can purchase any available domain name for around $10 - $30 per year and web hosting is approximately $10 - $20 per month depending on who you use (so bear in mind the average yearly costs for having your own website is around $130 - $270) . You can buy the domain name separately from the web hosting but to be honest, while you're still a relative novice to web design I would recommend buying the domain name at the same time as your web hosting in an all in one package with the same company. If you don't you can end up in a whole world of pain trying to point your new domain name to your web hosting server and it's just not worth it at this stage.

New domain names are usually active globally within 48 hours of purchase, but there's no harm in registering a domain name before you have a website to upload if you want to ensure that domain name doesn't get sold to anyone else.

I've recommended a couple of web hosts below and these are two companies I've personally used for years without any problems.

Recommended Web Hosting Companies

I've used these companies for years

1and1 Web Hosting
Very good web hosting company if you're based in the UK or Europe
Hostgator
Cheap as chips web hosting with tons of features - best for US based websites.

CHECKPOINT: You're good to go!

With HTML, CSS and web hosting under your belt, what's stopping you?

If you've been following the tutorial up to this point then you've basically learnt enough to create your own website and make it available online. It might not be the next Facebook or Squidoo at this stage, but it's a positive start and a fundamental building block in your web design career.

If you do want to create the next Facebook or Squidoo, then you're going to have to learn some more advanced topics such as PHP, mySQL and Javascript, basically all the 'under the hood' stuff which makes theses types of websites interactive. It's not for the faint hearted so proceed with caution!

Programming and Databases

This is where the brain-ache starts!

Modern 'Web 2.0' sites such as Facebook, Squidoo and even Google all function the way they do because of complex programming comprising of thousands of lines of code, interrogating databases and generating web pages on the fly. This code processes raw data and converts it into HTML real time.

If you want to create a website with similar functionality then you will need to learn a web programming language, a database platform and Javascript. I suggest learning PHP, mySQL and Javascript / jQuery as these are very common throughout many Web 2.0 websites.

I will add some content soon about how these technologies work together, but in the meantime here are a few links to resources where you can learn a bit more.

PHP, mySQL & Javascript Tutorials

W3Schools PHP Tutorial
Start your PHP training here!
mySQL Tutorial
Databases have never been so exciting!
W3Schools Javascript Tutorial
Yes I know, W3Schools again but they just have great tutorials!

PHP, mySQL & Javascript Books 'n' Stuff

Loading

PHP Video Tutorial

Hey, just stay in bed and watch this

powered by Youtube

mySQL Video Tutorial

Reading can be boring ... watch this instead!

powered by Youtube

Javascript Video Tutorial

Man all these words are hurting my eyes ... I need video relief!

powered by Youtube

Comments about this lens

Feel free to comment on this lens - hopefully it's helped answer some of your questions about creating a website

by

ThePresentMoment

Hi, I've been working as a web designer/developer for around 15 years and have decided to share my knowledge to help others who might be interested in... more »

Feeling creative? Create a Lens!