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!
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
Contents
(skip to the bit you're most interested in, or if you've got time read this lens from start to finish!)
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.
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!
The 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
So 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.
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
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.
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
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.
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!
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.
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
Javascript Video Tutorial
Man all these words are hurting my eyes ... I need video relief!
powered by Youtube
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 »
- 1 featured lens
- Winner of 2 trophies!
- Top lens » How To Create a Website
Feeling creative?
Create a Lens!
Explore related pages
- How To Create An Impressive Writing Website How To Create An Impressive Writing Website
- Use These Top 6 Website Builders To Get Your Site Up Fast Use These Top 6 Website Builders To Get Your Site Up Fast
- Web Development & Web Design Resources Web Development & Web Design Resources
- Make Free Stunning Flash Websites With Wix Make Free Stunning Flash Websites With Wix
- One Day Web Designer One Day Web Designer
- Web Development Tutorials Web Development Tutorials