Building your Website - The Beginners Guide
Introduction to Web Design
In order to start building your site you will need two things:
Editing software
There are millions of software titles out there that will enable you to create your site ranging from a simple text editor such as notepad to a word processing program such as Microsoft Word to a fully functional website editing program such as Adobe Dreamweaver.
When you chose your editing program you are making a very important decision - so take your time! Some factors you will have to consider are:
How dirty you want to get
Starting at the most basic (and easiest) level you can code your website using Microsoft word (a program most of you are probably familiar with. Word comes with the tools to create your website without any coding knowledge, the advantage of this is obvious - you dont have to learn a language in order to create your site. The disadvantage is that your site will be very messy as far as coding is concerned, when you upload your site it may not appear as you thought it might, and in fact it may appear very differently depending on what browser you view it in, this is because you are basically giving Word the responsibility of translating what you show it into html (a website language), and as Word is effectively a machine, it will not necessarily do a good job of this.
A stage up from word would be Adobe Dreamweaver - it can create sites in a similar way whereby you show it what you want, and it creates the code (this is known as WYSIWYG or what you see is what you get). There are a few differences between Word and Dreamweaver though:
Dreamweaver was built with the intention of coding websites - so the software has been tailored specifically for this task, and as a result it is far better at it than word.
Secondly, Dreamweaver gives you the ability to edit the actual code as well as WYSIWYG - therefore you are not totally out of control when it comes to the base coding.
How dirty you want your site to get
When it comes to coding a website, every language has a standard - these standards can be found at http://www.w3.org these standards were created for a reason - so that everyone knows how to interpret a website and thus can all interpret it in the same way. If you really want to follow these standards, the only guaranteed way of doing so is to code the website yourself - this means using some form of text editor such as notepad (packaged with the Windows operating system), Alleycode or Editplus - this will involve physically typing in all the code that makes up the website. Doing this will be a much longer process and it will involve a lot of learning. But the end result should be a universally understandable site that will be loved and admired by visitors, search engines and everyone in between. If you have the patience to impliment this method you will definately benefit in the long run.
Some Knowledge of Coding
At this point you have probably settled on the method you feel comfortable with for building your website - and they all have their advantages and disadvantages. Whatever method you have chose you should still learn a little bit of how a website is actually made up.
If you look at say 10 sites on the internet, without knowing it you will undoubtedly come across most if not all of the following languages:
And there are many more.
I am going to concentrate on the primary language, and most likely the starting point for the beginner to web design. This language is known as html or HyperText Markup Language.
Before I start describing the html language, it would be beneficial to understand how websites are actually displayed and the process that takes place when you type into your browser, for example, http://www.google.co.uk
So you type in the above FQDN (Fully Qualified Domain Name) into your browser (whether it be Internet Explorer, Firefox, Opera or any other internet browser).
This name is used to query a dns (Domain Name System) server and an IP address is returned (A unique 32bit number used to identify a computer or network device).
The browser uses this IP address to find the computer that actually holds the google.co.uk website (this is done by accessing routing tables). Once this computer has been found, your web browser will send a request for the website page in question (in this case the Google home page). The computer at the receiving end (the web server) will in turn send back the requested page. Once your browser receives the page it will display it on your computer screen - now this all sounds easy, but when you concider that a webpage may contain text, images, sound, video and an enumerable amount of other media information and also that as far as the computer sending the information is concerned, you could be running Internet Explorer, Firefox, Opera, Safari, Konqueror or any one of the hundreds of browsers available, you will appreciate that making sure your website is displayed to the end user in a particular way is quite a task. This is where html comes into play.
At its very simplest, html is a series of tags that enclose information. When the browser receives html it reads the tags and then it displays the information enclosed within them in a particular way that has been predefined in the html standard.
Introduction to Web Design using CSS
What you have learned so far will enable you to create text that is publishable on the internet - in other words you can show it to the world knowing that everyone will see the same thing - you now have a feel for what the web as we know it was originally designed for. Having said that, if you browse the internet, you will find that it consists of a lot more that textual information (its nothing like using word to view a document). Yes, there is a big role for aesthetics when it comes to the internet.
Although html wasnt originally designed with aesthetics in mind, we have since had the invention of CSS - or cascading style sheets.
Once you have your text in a viewable format, implementing CSS will enable you to stylise your page - this can be anything from changing the colour of your headings to putting important points in bright red boxes.
Remember before I talked about the html standards and how all browsers interpret certain tags in a very similar way? Well what CSS does is overrules these interpretations. In other words, where text in a <h1> tag is normally displayed in a large font and in bold, we can use CSS to tell the browser to display it in a tiny font and have it underlined, in fact we can tell it to do nearly anything - we could have it displayed in red, in a black box and throw it over to the right hand side of the browser.
This sounds like it would be complicated, but it isnt - all we need to do is tell the browser: When you come across text enclosed in the <h1> tag, display it using the following criteria: ...
This can be done using three methods:
Inline:
The easiest method, we simply add style="background: blue; color: white;" after the name of our tag, for example:
<h1 style="background: blue; color: white;">
this tells the browser to display the text inside this tag with a blue background and white text.
Embedded:
To use this method we add some code to the head of the document (now you are seeing what the header is used for - to display stuff that the browser reads but the end user doesnt read directly):
<style type="text/css">
</style>
We can now add our css within these tags, in the following format:
P {background color: red;}
This line of code will cause the text inside <p> tags to be displayed with a red background.
External:
Using this method we create a separate file called a css file, it will have an extension of .css and will contain the exact same code of the above method.
We then link this style sheet to our html document with the following code placed in the head of the html file:
<link rel="stylesheet" type="text/css" href="styles.css" />
Style.css being the name of the css file.
The advantage of this method is that all of our css code is kept separately and so it wont muddle the html document, also we can use one css file and easily apply it to every html page using this one line of code in the head of each page.
The Box Model
The box model is a fundamental part of web design and it holds true for almost every element in a website - be it a <h1> tag, a <p> tag or a <div> tag - something we havnt looked at yet, but which is very important in stylising your site.
A detailed specification of the box model can be found here:
http://www.w3.org/TR/REC-CSS2/box.html
Basically, every tag in a website has these same characteristics, although they are not normally apparent:
- They are box-like in shape
- they can have a background colour
- they can have a border
- they can contain text of varying colours
- they can have a padding - a space between the content and the border of the box
- they can have a margin - the space between the border and surrounding elements
(For a diagrammatic view of the box model follow the above link and scroll down a few lines.)
When styling your website the easiest and best method to use are "divs" in other words, enclose everything you want to position in <div></div>
This div is actually a box like every other element, and this can be moved, sized and styled. Using this method your can move and style the elements on your page in almost any way imaginable.