Jonsjobs.co.uk

 

 

How to build a Website

We've all thought about it at one point or another, building our own Website. Here you will be shown how to input meta data for search engines, get your own banner and alot more need to know things.

If you would like to Download our guide simply scroll to the bottom of the page.

How to change my background colour/color

There are numeroud ways in changing the background colour of your website, you can either use an image with css, this would go as

background-image: url(insert address for background here)

If your image is too small you could always make it repeat by adding the command

background-repeat: repeat;

so the overall code including your tags would be

<head>
<style type="text/css">
body {
background-image: url(background.gif);
background-repeat: repeat;
}
</style>
</head>

The much simpler way would be to put a background color. Notice the American interpretation of the word Colour. Instead of putting background image you would use "background-color:" without the quotes, ater the colon on color you need to put a hexadecimal color code, these are colour codes that are 6 characters long and consist o numbers and letters. These can be found online or photo editing software. So lets assume you want a nice shade o yellow.

<head>
<style type="text/css">
body {background-color: #ffffcc;}
</style>
</head>

You may think theres only a slight difference in this, but it makes all the difference to loading your webpage. I am into streamlining things as effectively as possible and using the background-color command means a website just needs to tell a browser what colour to display, the browser already knows the rest. If you use a background image not only are you slightly increasing the size off your webpage by having more text in it, but it also has to load quite a sized image. The only way to get it more efficient is having the smallest image you can on it and using the repeat command.

How to make a banner

Most people think making a banner is difficult and time consuming. You can make a web banner using a program called photoshop or other alternative. You can also go on a search engine and there are literally hundreds of websites that will make one for free.

How to insert an image

So you made your banner but don't know what to do with it. If you put a folder named images and placed it in the same directory as your index.html page you can simply put <img src="images/howto.png">

If you want to streamline your website a little then load your image into some imaging software and halve the size of it, this means it will be nearly half the file size so will load twice as quick, then in your IMG tag put a size, like so <img src="images/howto.png" width="insert width here in pixels including commas on the end" height="insert height here in pixels including commas on the end">

To optimize inserting an image for search engines look at our SEO page

Formatting text

There are two main ways of formatting text, HTML and CSS (cascading style sheet.) First we will look at HTML

<u>your text here</u>

<b>your text here</b>

<em>your text here</em>

<font color="red">your text here</font>

<font color="#FF0000>your text here</font>

As you can see you can use the color red or the hexadecimal value, it is always better to use he hexadecimal value as more browsers support it, you can use numerous styles on text e.g

<b><u>your font here</u></b>

To optimize text for search engines look at our SEO page

How to insert meta tags

Meta tags are used by search engines. Most novices often miss these tags and miss out on huge opportunities to get website visitors through search engine results, by simply entering some text you can tell a search engine what your website is about and key words you want visitors to type in to find you. Most web design programs don't cover this, so simply insert this right after <head> in your HTML code, <head> should be very near to the top of the code.

<meta name="description" content="insert a description in here over 50 characters long and include the commas at each end" />

<meta name="keywords" content= "insert upto 20 words in here that you want to attract search engine users to, each word needs to be sperated by a comma then space apart from the last one, don't forget to keep the commas on each end" />

Another useful tool to help you with your meta tags is one that i frequent often, this tells you how relevant your keywords are to your actual data. In order for a search engine to take you seriously your keywords should be made up of common words in your website, to find out how yours does go to meta tag analyser

How to insert a Hyperlink

Hyperlinks are the most basic form of links and are what makes it possible to open a new webpage. Go to where you would like to insert your hyperlink and insert this in the HTML <a href="http://www.jonsjobs.info">Jons external hyperlink</a> this would bring you Jons external hyperlink

If you would like to place a link to a page on your own site simpy put <a href="folder and name of your page goes here, something like /pageone.html don't forget to keep the commas on each end">link to index page</a>link to index page

Sometimes you may want to make the new link open in a new window or tab, a simple addition to the above will do that like this <a href="http://www.jonsjobs.info" target="_new">Jons external hyperlink</a> to give Jons external hyperlink

To optimize links for search engines look at our SEO page

Robots.txt

Robots.txt is a file that search engines look for. This tells the search engine what it can and can't look for, you do not have to have it in place but if you don't, everytime a search engine looks at your site you will get a cannot find robots.txt error in your error log, unless you don't want search engines looking at your site simply open notepad and save a blank file as robots.txt and place it in the root directory of your website.

Want more information?

While we have provided basic information for your understanding we cannot possibly fit all of the information on building a website on one page. This page will provide enough information for even the most novice of users to get to grips with creating a useable web page and the majority of this Webiste is created based on the simple coding explained.

We have put together numerous guides to help you to get into the world of web page design, this goes from the basics of html as described above to using PHP, Javascript and databases, If you would like to learn more about Web design simply click the "buy now" button.

Contents

Simple web design and building a free website guide

1.The basics
2.Plan and prep
3.Website building basics
4.Site testing and maintenance
5.Website workshop

Guide to HTML, XHTML CSS and Javascript

1.Structuring documents for the Web
2.Links and navigation
3.Images, audio and video
4.Tables
5.Forms
6.Frames
7.Cascading style sheets
8.More cascading style sheets
9.Page layout
10.Design issues
11.Learning Javascript
12.Working with Javascript
13.Putting your site on the Web
14.Checklists

PHP and MySQL (SQL databases) guide

1.Introduction
2.Getting started
3.PHP quick start
4.Data types, literal, variables and constants
5.Operators
6.Strings
7.Conditionals and loops
8.Arrays
9.User defined functions
10.More on PHP forms
11.Files and directories
12.Regular expressions and pattern matching
13.Introduction to MySQL
14.SQL language tutorial
15.PHP and MySQL integration
16.Cookies and sessions
17.Objects


Simply click buy now to get your 3 guides in one for £4.50 only!

Payments accepted via Paypal and credit/debit card