How to build a web page

Hi everyone.
I've not been around much lately.
I have been very busy since my husband lost his job.
Trying to drum up trade doing more work and helping him as much as I can.
I am now thinking about a web page to advertise our business but I haven't got a clue where to start.
Any help would be gratefully received.
I'm no techi so if it's to difficult I would have to try something else.
Would it even be a good idea ?

Forgot to say I have a Mac

 

Sorry I cant help Lyn but Im sure at least one of our knowledgable clan will come to the rescue. So sorry to hear about your hubby losing his job, these are terrible times we are going through at the moment. But Im sure with with your determination and a bit of luck of course you will get there. Hope everything gets better soon and you get help as Im sure you will. 02

 

There are several different aspects to this, most of which are so often overlooked.

It is a subject in itself, but if I can give you a few pointers here I will. Here's the steps I'd follow:

1. Avoid the common mistake - don't even think about design yet, until you've at least completed step 2.

2. Think carefully about what information should be presented in the web site. Start as though you are just writing a report in Word or similar. Don't worry about the layout at this point, just the content. What write-ups should be in, what pics (if any) do you want to use etc. Just as if you were writing a report, you need to have it well structured into clean sections.

3. Have several people proof read your content. It needs to be concise and easy to read. Remember that people don't like to read too much off a screen. A person that might happily sit down with a 10 page report and a cup of coffee is less likely to read 10 pages on screen.

4. Now think about how the info will be visually presented in your website. If you are not a design guru or a techy, no worries. Use someone else's template. There are lots of completely free ones with no copyright restrictions. Look here: http://www.oswd.org/

5. This is where you'll need to know the very basics of HTML. You need to put your content into your design. HTML is easy. It is not, as some would have you believe, a programming language. It is just like in the olden days of word processing where you had a few special codes to control the final presentation. There are numerous HTML tutorials on the web, and a good starting place is http://www.w3schools.com/ You can test your site as you build it (provided it has no server side dynamic content, which it most likely wont) just by double-clicking the files you create, which will then open in your default web browser.

6. Find a suitable website hosting company. There are loads and loads. Just google 'web hosting'. You will need to buy a domain name (the main part of the web address - for this forum for example the domain name is gardenerscorner.co.uk). Most web hosts will sell you this and the hosting as a single package, which is the best option, otherwise you have to start messing about with DNS's and things. Expensive doesn't mean best. For a static site you won't need any database support or SSL or any of the other stuff that pushes the price up.

7. You will need an FTP client tool. There are many free ones (just google 'Free FTP client'). The web hosting company will supply you with the login details etc to connect to your online site. Just pop these in the FTP client of your choice and it will connect. FTP clients typically present themselves as two windows explorer style file explorers side by side, with you local files (on your hard disk) in one, and the other showing the file structure on your web host account. You just drag the files from one to the other.

8. Now your site is online, it needs to be indexed so that the search engines can see it. Many companies will make all sorts of promises to do it for you for a fee. Don't pay them a penny. There is nothing they can do that you can't. Search engines find sites by following links from other, already indexed sites. This place is indexed, so linking from here will get you into google and others. It takes time though, so don't expect any miracles. The more sites that link to yours, the quicker google and others will find it and index it, so if you know anyone else that has a site that could link to yours, ask them to make it so.

So that's about it, or not:(

There are a few things to consider:

* If you must show an email address in your site, expect loads of spam. You can reduce it by with a bit of JavaScript that will assemble the email address from broken up parts so that spammer's programs don't so easily recognise the format when they look at the source code of the page.

* Think about how people will search for your site. What search terms might they use. Try to put those likely search terms into the content of the pages. However, don't go for overkill. The page must still be pleasant to read for humans, while at the same time having your search terms in so that google et al can know what to index you under.

* Think about human psychology. Choose your colour scheme, layout, fonts etc wisely. Whether we admit it or not, we subconsciously react differently to certain colour schemes for example. Only the other day I saw a gardening website that used black for the background, and while the site was technically ok and well presented, it didn't put me in a gardening frame of mind. You also need to think about ease of use. Make sure it is as easy as possible to find your way about the site.

* Think about who might view your site. Does everybody have perfect vision? A small or badly coloured font will rule out a big chunk of your audience. By the same token you don't want to patronise people by have giant kiddie fonts. Wherever you use pictures, use the ALT property of HTML's IMG tag to put in a short written description of the picture in case anyone is using a text only browser or a screen reader.

* Think about updating the site. It is all very well getting a good place in the search engine indexes, but you'll start sliding down if the search engines automated checks find that your site never changes (and therefore may be out of date and less relevant than someone else's site). However try not to rewrite good content. Try to find other ways to update it, perhaps with news articles or such.

Good luck. Let us know how you get on, and if you get stuck, don't be afraid to ask.

 

Clueless - many thanks for a very clear and well thought out answer. Its a subject that potentially could interest a lot of people. I keep telling myself that one day I will get a web page - but its easy to be daunted by the prospect.

It strikes me that there are three seperate aspects.

1) The actual design and content - which as you say you can plan on paper - describing any links or clever bits in plain English.
2) The technical means of converting these pages into web speak - ie using a package and/or raw HTML
3) The insider bit of how and where to get a name, location etc, and how to get a search engine to find you and raise you up its list etc.

I haven't had time to look properly at your links, but where do packages like Frontpage (thats probably very old now) come in? Do you need such a package on your machine or can you download the equivalent for free? I am afraid that free becomes quite important for most of us. In the past a lot of software was simple and cheap and suitable for dabblers. But these days programming type software seems to be aimed both in price and complexity at professionals, and the amateur is no longer considered.

 

Wow thank you.
You make it sound do-able.
I will certainly have a go.
Thank you very much.
And yes PeterS I'm sure a lot of people will be very interested in this.

 

HTML is nothing more than text. You don't need any special software to write a web page. If you have a simple text editor (like Notepad in Windows) you can do it. The downside with that is that you have to be a bit more comfortable with HTML tags than you would if you used a proper web page editor.

There are free tools for editing web pages. I used to use a product called AceHTML ( http://software.visicommedia.com/en/products/acehtmlfreeware/ ) which I found quite good.

There is also Mozilla Composer, part of Mozilla Suite, but unfortunately it is no longer supported, though you can still download it. ( http://www-archive.mozilla.org/products/mozilla1.x/ ).

There will be others. Open Office, a free rival to MS Office, has a web page editor which is similar to FrontPage, but I personally didn't like it when I looked at it. It is perfectly capable of making a well presented page but it puts too much superfluous formatting stuff in the finished page.

 

Again thanks clueless, and am I right in saying that you can publish your web pages to your own computer so that you can see them as a complete product - but obviously others can't.

I appreciate that HTML is only text. Just as a best selling book is only text - but its what text to use that is the question. :D

 

Ok, by popular demand, I've knocked up a quick demo. If you want to follow it, let's go:

1. Open whatever plain text editor you have (if you use Windows you'll have Notepad in Start->Programs->Accessories.

2. Cut and past all of the following code into your text editor:

Code:

<!-- Text starting with the characters that this line starts with is a comment.
It doesn't appear on your page, it is used by and for the page developer to describe
other bits of the 'code'. You don't need it, but if the page is complex it can sometimes
help clarify different bits should you need to go back and edit the page.
HTML is just text with special 'tags' that tell the browser what to do with the text.
A tag is enclosed in angle brackets and there is usually an opening tag and a
corresponding closing tag.
Comments are ended like this: -->
<!-- The two main parts of a HTML document are the header and the body, but first we must
tell the browser that it is all HTML.
The header is reserved for things like the page title, links to any CSS style sheets or other external
files that the page might need, or JavaScript code etc. A simple page won't need any of those things.
Here we go -->
 
<html>
<head>
 <title>This appears in the title bar at the top of the window</title>
</head>
<body>
 <h1>This is a big heading</h1>
 <h2>A smaller heading</h2>
 <h3>Smaller still</h3>
 <h4>Smallest heading</h4>
 <p>The 'p' tag tells the browser that we are starting a new paragraph. It is one of the
  more important text formatting tags because HTML treats any number of spaces and
  blank lines as a single space.
 
  So looking at the source, this line looks like it is going to be on a new line, but it
  isn't. When you open it in the browser it will appear to continue straight on from the
  previous sentence.
 </p>
 <p>Now we have another paragraph, because we closed the last one and opened a new one for this
  sentence.
 </p>
 <p>Note it is good practice to indent tags to aid readability of the source so it is easier to edit
  later. Because our paragraph (p) tags are inside the body tag, we indent them so that when
  looking at the source, you can easily spot what stuff is inside which tag.
 </p>
 <p>Now for some more commonly used tags.</p>
 <p>The <b>bold</b> tag is just a 'b'</p>
 <p><i>Italics</i> <u>underlined</u><p>
 <p><b><i><u>Bold italics and underlined</u></i></b></p>
 <p>Note in the above, where we applied more than one tag to the same piece of text, we always close
  the most recently opened tag first.
 </p>
 
 <p><a href="http://[url=http://www.gardenerscorner.co.uk/forum>A]www.gardenerscorner.co.uk/forum>A[/url] link to gardener's corner</a></p>
 <p><a href="index.htm">A relative link to another page in the same site doesn't need the full url</a>
  Note that this link won't work because we don't have an index.htm file yet.
 </p>
 
 <img src="[url]http://i42.tinypic.com/33jqzqe.jpg[/url]" alt="Some description"/>
 <p>The img (image) tag doesn't have a closing tag, because all the info is enclosed in the opening tag.
  We gave it a source (src) which tells the browser where to find the image, and some 'alt' text
  which tells the browser what text to show if images are switched off in the browser settings.
  It is worth pointing out that in your own page, the image source is likely to be local to your
  site so will only need a relative url (like we did in the second anchor (a) tag).
 </p>
 <p>For our last example, we'll do a little table. We won't put it in a paragraph tag because it doesn't
  typically need to be in one. It can be, but doesn't need to be.
 </p>
 <p>Tables start with the table tag, which will enclose table row (tr) tags for each row,
  and each row will contain table detail (td) tags for the cells. Anything you can do in HTML can
  go inside a td tag if you wish.
 </p>
 <table>
  <tr>
   <td>Column 1</td>
   <td>Column 2</td>
  </tr>
  <tr>
   <td>Something in col1</td>
   <td>Something in col2</td>
  </tr>
  <tr>
   <td>More in col1</td>
   <td>More in col2</td>
  </tr>
 </table>
 <p>By now, hopefully you'll have the general idea. There are many more tags, and even the tags I've demonstrated
  here typically have more options and settings. I haven't even touched styles (CSS or otherwise) or special
  characters.
 </p>
 <p>To find out more, pop along to <a href="http://[url=http://www.w3cschools.com">W3C]www.w3cschools.com">W3C[/url] Schools</a>
 </p>
</body>
</html>

(its lost all my indents, but will still be perfectly valid). Have a read through that 'code' as it explains what's going on.

3. Save the file, calling it mypage.htm or whatever you like as long as it has the .htm extension and not .txt

4. Double click the file. It will open in the browser.

5. If you want to experiment, just edit the file in Notepad, save, then refresh the browser to see your changes.

 

Excellent demonstration Clueless - Thank you.

It didn't like word- which didn't surprise me - as I know Bill Gates likes to do secret things without telling us. But worked fine in Notepad.

The last link really needs an http:// in front as the computer assumes its on the hard disk. But it looks a very good site. You sure have given me some homework to do. :D

 

You're quite right, well spotted:gnthb:

 

I've justed edited the HTML demo to fix the deliberate mistakes that Pete spotted (you need to put http:// before urls in link tags).

I thought I'd also point out a couple of common pitfalls for you to avoid.

If you develop your site under Windows, and deploy it on a host that uses Linux, you need to watch out for a couple of things.

1) Windows is not case sensitive but Linux is, so if you have a link in your site to another page in your site, make sure the casing of the url in the link matches the casing of filename of the page it links to. For example Index.htm and index.htm are two different things in Linux but the same thing in Windows.

2) A more common pitfall is backslash vs forward slash. Windows is happy for you to use either, but in Linux it must always be the forward slash ( / ) because backslash in Linux has a different job. So if you link to admin\adminpage.htm in Windows, it will work, but it will fail on a Linux host. So always use forward slash in that context (ie admin/adminpage.htm)

I thought I'd point those two things out, because they've caught me out in the past, and if you are used to Windows, it can be a real headache to work out where you've gone wrong but it such an easy place to get caught out.

It is worth noting that most cheaper web hosts use Linux because it keeps their licensing costs down, so it is definitely worth bearing in mind.

 

Itâ??s a bit late, but I saw the mention of FrontPage. FrontPage does make web design very easy, if you can get it all well and good, but sadly its officially obsolete. (It did used to come with office, so you may have it)

Some web hosts will offer a hosting / template options. You can choose from various templates and change the options there in, I suggest you donâ??t touch them, because when you get good at web design, you will soon realise they are very limited.

Can I also suggest you use a web host that gives you web space and say up to 10 email addresses, One host I use, charges Y for the webspace and Y for the email address.

Speaking of mail address, I know its not going to be just yet, but please have one like

[email protected] not as some you see on vans, for example

visit our website xxxxxxxxxxx.co.uk email [email protected]

To me it does not look professional to have a domain name, but an aol email address.

You can also â??foolâ? spambots by putting your email address as a picture. (write it in something like Microsoft paint, and save it.

Like this one



You can see its an address, but its actually a picture. Spambots can't read pictures.


I would also suggest donâ??t try and put everything on one page, websites are not measured by pages, but how much space they use.

Pictures are also good, previous work etc but use a photo editing programme to make them small for the web, nothing more annoying that waiting 5 seconds for a picture to download, 5 seconds is a long time when you are waiting.

And good luck.

 

Good tips there from Watergarden. The only thing with the picture for the email address though, while it will fox the spambots, it also means that the user has to type it out rather than just clicking it.

The ideal solution is to have an email form on the page, so your address is not exposed, and have something like PHPMailer (a script that some hosts include) deal with it. The only downside is that it gets a bit more involved for someone just beginning in the techy stuff, not hard, but not an tech novice thing.

The halfway house is to have the email address link render in Javascript. I'm sure there are lots of examples floating about t'internet. The basic idea is that you bust up the email address and have a little script assemble it on the screen so the email address is not actually present in the download page, but gets built on the browser.

If you go with the multiple email address thing (I'd recommend it too), you can set one up to be the 'catch all' address. When choosing a name for such an address, don't make it the address you'll actually pickup. Some spammers take it for granted that the catch all will be the main email account, so they spam addresses like '[email protected]'. Because 'somerandomrubbish' isn't set up as an actual account, your host server catches it and puts the message (spam) in your catch all account.

I wholeheartedly agree about avoiding web host's own page builders. They are poor, look unprofessional, and are clumsy. For those that aren't a design guru (that would include me, I'm a techy not a designer), the open source templates I linked to earlier are a good start. Unlikely host's page builders you can freely chop and change the downloaded templates to suit.

 

Would you say then that it is better to try to understand all of this rather than going to and using one of the "create your webpage for free" sites?

Don't boot me one for seeming thick, I am almost ashamed for not really understanding this.

I am struggling with the part which tells me how to put in a picture from a local site ( my own computer yes?).
Correct me if I am wrong, I would type in..........<p>the img src="name of file"/>........?

Also can I use a pic from photobucket using the url link from the image there?



Considering how offputting the whole thing is I don't think you would struggle to find freelance work creating webpages for self-employed people looking to get on the web. I'm a tight sod so I will make myself learn this, but I am sure there are hundreds of people who would pay someone to do it for them.

 

I am doing it wrong anyway as this is what has come up when I tried to open my practise


{\rtf1\ansi\ansicpg1252\deff0\deflang2057{\fonttbl{\f0\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.15.1507;}\viewkind4\uc1\pard\f0\fs20


There is no point in it speaking to me in htmlspeak when it is quite clear I don't understand what it is trying to tell me lol.