WHAT YOUWILLNEEEDTO MAKE A FULLY FUNCTIONALWEBSITE

THE RIGHT AND THE WRONG WAY

CONTENTSTHE BASICS 5

CREATING A NEW DOCUMNET 7CREATING THE HEADER 10

CREATING THE MAIN CONTENT 11CREATING THE FOOTER 12

CREATING THE STYLE SHEET 14BACKGROUND COLOUR 16

TYPEFACE 16CENTRE THE WEBPAGE 18

BACKGROUND IMAGE 18BACKGROUND IMAGE REPEAT 20

PADDING THE TEXT 22SETTING A MARGIN 23

DIFFERENT TYPE SIZES 24TEXT ALLIGNMENT 26

SETTING WIDTH AND HEIGHT 27

LINKING FIILES 29ADDING IMAGES 31

CREATING TABLES 34PHOTOSHOP IMPORT IMAGE 36

FINDING THE RIGHT HOSTING 39UPLOADING ON YOUR HOST 44

GLOSSARY 47

How do I make a website? © Shane MilesAll rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any mean, electronic, mechanical, photocopying, recording or otherwise, without the prior permission of both the copyright owner and above publisher.

The right of Shane Miles to be identified as the author of this work as been asserted in accordance with the Copyright, Design and Patents Act 1988

Typeset by Shane Miles

Printed in Great Britain by Eco Print, Norwich

SMILES DESIGN PUBLISHING

SMILES DESIGN34, Camden Street,London, WC2H 9EA

How do I make a website? © Shane MilesAll rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any mean, electronic, mechanical, photocopying, recording or otherwise, without the prior permission of both the copyright owner and above publisher.

The right of Shane Miles to be identified as the author of this work as been asserted in accordance with the Copyright, Design and Patents Act 1988

Typeset by Shane Miles

Printed in Great Britain by Eco Print, Norwich

SMILES DESIGN PUBLISHING

SMILES DESIGN34, Camden Street,London, WC2H 9EA

SMILESDESIGN

Div tags live within the body tag, these are the smarties which need a container. Div tags can be very useful for a number of things but these are basically mini body tags. Div tags are used to store the different sections of the website. In the most basic websites they consist of a header, a main content and a footer div tag. The body is basically a container which holds all the div tags and the content of the website. It’s the part that holds everything together which you see on a website. Imagine that it is a container and the div tags are smarties. Without the container all the smarties will go everywhere. This is what the body does, it is the container for the div tags. A webpage cannot function without a type of body. This is one of the most crucial parts of a webpage.

THE DIV & BODY TAG

These are the three main sections which make a website. They hold infomation and structurise your website for a browser. Websites use a language called HTML. HTML stands for HyperText Markup Language and this is the language which browsers read to get the information to make up the page.

HEAD TAGThe head tag of a webpage isn’t as visual as the body tag but just as crucial. The head tag still stores information about your website but a different type of information. One of the uses of the head tag is to store a message or a greeting in the same bar as the address bar in your browser. For example if you went of hmv.com it would probably say “Welcome to HMV”. So therefore you can put a message in your head tag to say whatever you want. The other use is search engine optimisation, you can put meta keywords into your head tag so that when you use a serach engine e.g. google it can check your site for certain words to see if it matches up with the words someone has typed in to search.

5

WITHOUT THE CONTAINER THE SMARTIESWILL GO EVERYWHERE

FIRST OF ALLTo start I am going to run through a couple of basics for you. Each section is crucial and without them it is impossible to make a website.

Websites are made up of a structure and to make a structure you need materials. The materials that make up a website are:

BODY TAGS/HEAD TAGS/DIV TAGSThese are the three main sections which make a website. They hold infomation and structurise your website for a browser. Websites use a language called HTML. HTML stands for HyperText Markup Language and this is the language which browsers read to get the information to make up the page.

THE BASICSWHATS,

WHATGET TO GRIPS OF WHAT MAKESUP A WEBPAGE

5

Everybody has to start from somewhere and so here we start by making a simple webpage using your

head, body and div tags.

CREATING A NEW DOCUMENT:

CREATING A NEW DOCUMENTIS IT DIFFICULT, WHAT FILE TYPE DO I NEED, HOW DO I DO THAT? 7

FIRST OF ALL YOU NEW DREAMWEAVER, GO TOWWW.ADOBE.COMAND DOWNLOAD A FREE TRIAL OF DREAMWEAVER

OPEN DREAMWEAVERFILE>NEWHTML>NONEAs you can see luckily Dreamweaver creates <head> and <body> tags. Also it shows the correct way of how to close tags. This is one of the most important things in web site building. If you start a tag e.g. <body> you must always close it at the end of the selection of infomrtaion you want using a / therefore say <body> Infomation </body>.

So now you have the foundations of your building we now need to plan some rooms to go in it. By this I mean by inserting div tags into the body.We are going to create a header, main content and a footer tag.

First of all we need to locate exactly where we are going to insert our div tags. Div tags need to go within <body> and </body>. If the div tags are out of this, then they will simply not show up. So always make sure whatever your putting in, lives in between <body> and </body>.

Now you know that, we shall move onto the next step, inserting the div tags.

You simply click after <body> and press return to make a new line then type <div> to make a div and then close this tag with a </div>. However, make sure that the </div> is before the </body>, because if you close it after the body tag, it will confuse the browser and therefore muck up the layout basically.

IS IT DIFFICULT, WHAT FILE TYPE DO I NEED, HOW DO I DO THAT?

IT’S THIS SIMPLE:

7

TIME TO CREATE THE:HEADER

MAIN CONTENT& FOOTER

REMEMBER A <DIV> IS ALWAYS

CLOSED WITH A </DIV>

9

SAVE AS INDEX.HTML

THEN

1This is a completely blank canvas, no

information is shown yet. All it says at the moment is that it is a HTML document.

We need to put information into it. To do this we use div tags which was discussed

earlier on. To start off we are going to put a <header> tag in.

So time to put some content. For now we are just going to type Hello, This is a Header. Just to get a general feel of

how it looks. To do this go between <div id=”header> & </div> and just type in:

Hello, This is a Header.

3

2

CREATING THE HEADER

YOUR WEBSITE NEEDS ANATTRACTIVE SMILE WHICH WILL SUCK EVERYONE IN

A COUPLE LINES OF CODE AND YOUR WEBSITE HAS A SMILE

To do this you simply type withing <body> and </body>, <div id=’header’> followed

by </div>. This will create a div tag

So time to put some content. For now we are just going to type Hello, This is a Header. Just to get a general feel of

how it looks. To do this go between <div id=”header> & </div> and just type in:

Hello, This is a Header.

CREATING THE MAIN CONTENT

YOUR WEBSITE CAN HOLD WHATEVER INFORMATION YOU

GIVE IT

EVERYBODY LOVES SOMEBODY

WITH A BIT OF INFORMATION

You can put more content into this. The more you type the bigger the box will get. However when you type more content, make sure you type it into the code view screen rather than the deisgn view. When you need a new line use a <br> if you do it in design view it will create a new paragraph each time you press the return key. Also if you need a new paragraph put <p> at the end of each paragraph put a </p>. If you want certain words in bold then use <b> at the beginning of the word and then </b> at the end. The same with italics but use <i> followed by </i>.

3

2Like the header tag the main content has to have content in. For it to show up so put: Hello, This is the Main Contents.

1So you got a header, the next part which is the Main content. The steps are basically the same as the header, just this time for the main con-tent you put <div id=”main”> rather that <div id=”header> and also make sure you use </div> afters to close the div. All divs must have a </div> at the end.

YOUR WEBSITE NEEDS ANATTRACTIVE SMILE WHICH WILL SUCK EVERYONE IN

A COUPLE LINES OF CODE AND YOUR WEBSITE HAS A SMILE

11

CREATING THE FOOTER

NAVIGATION IS ONE OF THE MOST IMPORTANT PARTS OF YOUR

WEBSITE, YOU DON’T WANT PEOPLE TO GET LOST DO YOU

GIVE YOUR SITE A BIT

OF DIRECTION

1So far you should have some code that looks like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”><title>Untitled Document</title></head><body><div id=”header”> Hello, This is a Header </div><div id=”main”> Hello, This is a Main Contents </div></body></html>

This will become a vital part of the website, the backup navigation links. However, for now just type the same as the the other to put, just this time <div=’footer’> instead of header or main so you have something like this: <div id=”footer”></div>. Then again put some content in like:

Hello, This is the Footer

2So that is the foundations of your website. It looks pretty rubbish at the moment but in the next chapter we shall start work on making it look alot better. Before we move on just double check you got all the code right:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”><title>Untitled Document</title></head><body><div id=”header”> Hello, This is a Header </div><div id=”main”> Hello, This is a Main Contents </div></body></html>

A COUPLEOF WORDS

BEFOREWE MOVE ON

Before we move onto the next chapter we need to get a couple of things sorted. We need images to make into backgrounds for our divs tags. We need an image 120x900 pixels for the header saved as a JPEG. It can include your logo or anything you would like as a logo. Another image saved as a JPEG again but this one 5x900pixels for the main content but make sure that if it was tiled down the page that it would match up correctly. One final one for the footer. This one has to be 80x900 pixels and this one has to match up with the main content, so imagine that the the footer is the bottom part of the main contents.

13

TIME TO MAKE IT LOOK PRETTY:CSS-CASCADING STYLESHEETSOUNDS BORING BUTAMAZING WHAT IT CAN DO TO YOUR WEBSITE

CREATING A STYLESHEET

SPRUCE YOUR WEBSITE UP WITH A FANCY STYLESHEET, IT WILL LOOK 100% BETTER GARANTEED

WOMEN WEAR LIPSTICK, WEB PAGES WEARSTYLESHEETS

1To create a CSS stylesheet, in Dreamweaver go to New > Document >CSS

2

3After the first bit of code insert this:

body {}#header {}#main {}#footer {

4We are going to focus on the body, the body is basically the aspect of everything you see. The font, font size, background color of the site.

We are going to target the background first. We are going to change the background color of the site. For this you need to go to the body part of the css and between the { and the } put background-color:#(color); for now we are just going to make it black so the color code is #000000. You can have it any color but it has to be done using the HTML colour code. (colour code chart back page)

WARNING: LOTS OF INSTRUCTIONSIT’S ALL VERY IMPORTANT THOUGH

15

Save this as: css.cssThen in the css style tool bar you will see a chain icon, click on this , then browse then select css.css.This will link the two files together.

SPRUCE YOUR WEBSITE UP WITH A FANCY STYLESHEET, IT WILL LOOK 100% BETTER GARANTEED

WOMEN WEAR LIPSTICK, WEB PAGES WEARSTYLESHEETS

We are going to focus on the body, the body is basically the aspect of everything you see. The font, font size, background color of the site.

We are going to target the background first. We are going to change the background color of the site. For this you need to go to the body part of the css and between the { and the } put background-color:#(color); for now we are just going to make it black so the color code is #000000. You can have it any color but it has to be done using the HTML colour code. (colour code chart back page)

5So the code should now look like this:

body {background-color:#000000;}

#header {}

#main {}

#footer {}

6Now the background colour is done, we are now going to give a font to the overall site. The fonts are put into font families which are all web friendly. You can’t use any font, it has to be one of the web safe families. We want a san-serif typeface so to do this under the line you just done you put font-family: Arial, Helvetica, Sans-serif;

So now you got:

body {background-color:#000000;font-family: Arial, Helvetica, Sans-serif;}

15

In design view the font should change to a sans-serif

7Time to tackle the header now, first of all we want the header to float in the centre at all time so no matter how big the browser window is it will be in the centre. It’s pretty simple, you just put margin: auto; into the header part.

body {background-color:#000000;font-family: Arial, Helvetica, Sans-serif;}

#header {

margin: auto;}

#main {}

#footer {}

So now you got:

body {background-color:#000000;font-family: Arial, Helvetica, Sans-serif;}#header {}

#main {}

#footer {}

WHICH SHIRT/SKIRT TO WEAR?WHICH TYPE OF BACKGROUND SHOULD YOUR WEBSITE WEAR?

DRESS YOUR WEBSITE UP WITH SOMETHING SPECIAL

17

body {background-color:#000000;font-family: Arial, Helvetica, Sans-serif;}

#header {margin: auto;background-image: url(header.jpg);}

#main {}

#footer {}

Adding a image as a background for your header is easy aswell. Find the header image you prepared earlier on and to put it as your background image just type background-image: url(name of file);

body {background-color:#000000;font-family: Arial, Helvetica, Sans-serif;}

#header {

margin: auto;}

#main {}

#footer {}

8

IF YOU WANT YOUR WEBSITETO ALWAYS FLOAT IN THE MIDDLE OF THE BROWSER WINDOW USE:MARGIN: AUTO

17