Jump to content

Building a website..where to start?


aj47

Recommended Posts

I'm currently trying make a website but html is scaring me a little bit. Do any of you know of any simple to use free software or templates that I could use to save time?

 

I, too, recommend you learn the basics. HTML isn't hard at all, it's a presentation "language", it's very easy (same point as the 'BBCode' in the forum), and it will help you do a lot more than what the average template-site offers.

 

But anyways, what type of site are you talking about? Single page / database / dynamic / fixed-amount of pages? includes pictures? who is going to update it?

 

These might help me, at least, recommend either systems or templates for you to use.

For that matter, joomla is userfriendly even for non-htmlers (though, again, html is VERY recommended, at least), but it's an entire system for dynamic db-driven websites... if you require a 'static' site, there are much simpler solutions like googlepages or the likes..

 

what do you need, exactly?

Link to comment
Share on other sites

Thanks for the replies. I took your advise and sat down this morning and wrote my first piece of html which wasn't as daunting as I thought it would be. That said I just put it through a validator ( http://validator.w3.org/ ) and there's a ridiculous amount of errors that which i can't seem to fix.

 

One thing I can't work out is how to make the whole document a certain font. It only seems to work if i use the <font face="arial" font size="5.6"> </font> after every paragraph not just in between the <body> tags.

 

Also the validator seems to think theres something wrong with my image tags which are <img src="serotonin.png" width="80" height="60"> and

<img src="antidepressants.jpg" width="200" height="150">

 

Anyone know how it can be fixed?

Link to comment
Share on other sites

The first one you'll want to do with css...

 

in <head>

 

include something like:

 

<style type="text/css">

<!--

body { font-family: "New Century Schoolbook", serif }

-->

</style>

 

But using arial is NOT a good plan as it's a propitiatory font, you want to use font groups..

 

The issue with your img tags is probably that you're not closing them.

 

In the same way you do <p>text</p>

 

You need to do <img src="aslkjfsdf" alt="A dog" />

 

The final / closes the tag. You should also include an alt tag..

 

I think all of the above is correct but it's been over a year since I've written any html.

Link to comment
Share on other sites

Thanks for the replies. I took your advise and sat down this morning and wrote my first piece of html which wasn't as daunting as I thought it would be. That said I just put it through a validator ( http://validator.w3.org/ ) and there's a ridiculous amount of errors that which i can't seem to fix.

 

One thing I can't work out is how to make the whole document a certain font. It only seems to work if i use the <font face="arial" font size="5.6"> </font> after every paragraph not just in between the <body> tags.

 

Also the validator seems to think theres something wrong with my image tags which are <img src="serotonin.png" width="80" height="60"> and

<img src="antidepressants.jpg" width="200" height="150">

 

Anyone know how it can be fixed?

 

Try adding an alt="img desc" for each image. This just adds the text you see when an image doesnt open or if setting on the browser dont allow images to be displayed.

 

so it would be <img src="serotonin.png" width="80" height="60" alt="serotonin">

 

Some of the validators insist on this now.

 

I would also recommend learning css after you get a handle on the basics of html. It will make your formatting all pages so much easier and give you much more freedom to create.

Link to comment
Share on other sites

hey aj47, try out these "notepads" that highlight code and can help you complete your tags, so you do better HTML:

 

This one's a good one I know and like: http://notepad-plus.sourceforge.net/uk/site.htm

but there's also this one - http://notepad.com/

and probably others.

 

They'll help you out, even visually, to write HTML and other code. They also have auto-complete and suggest tags and closing-tags, so I hope you'll find them helpful.

 

~moo

Link to comment
Share on other sites

hey aj47, try out these "notepads" that highlight code and can help you complete your tags, so you do better HTML:

 

This one's a good one I know and like: http://notepad-plus.sourceforge.net/uk/site.htm

but there's also this one - http://notepad.com/

and probably others.

 

They'll help you out, even visually, to write HTML and other code. They also have auto-complete and suggest tags and closing-tags, so I hope you'll find them helpful.

 

~moo

 

I shall recommend scite, it's what I used to use on windows...

http://www.scintilla.org/SciTE.html

Link to comment
Share on other sites

Thanks for the help everyone. I think i've finally fixed all the problems with html but im having trouble finding a way to make borders and move pictures around etc. I've found a way to do it with css but im not sure if I can just add it to my html. Can you mix and match html and css?

Link to comment
Share on other sites

Thanks for the help everyone. I think i've finally fixed all the problems with html but im having trouble finding a way to make borders and move pictures around etc. I've found a way to do it with css but im not sure if I can just add it to my html. Can you mix and match html and css?

 

Yes, infact you're supposed to, css for layout and colours etc, html for content.

Link to comment
Share on other sites

Thanks for the help everyone. I think i've finally fixed all the problems with html but im having trouble finding a way to make borders and move pictures around etc. I've found a way to do it with css but im not sure if I can just add it to my html. Can you mix and match html and css?

 

Yes, but for me it works best to call the style sheet from my html doc.

<link rel="stylesheet" href="looks.css" type="text/css">

 

But I like to use absolute path so if I move stuff, I dont have to change the stylesheet links.

<link rel="stylesheet" href="http://www.mySite.com/xtras/looks.css" type="text/css" >

Link to comment
Share on other sites

After a several days crying over my computer I've knocked up a basic website that seems to work ok. However one thing im yet to work out is how to get a caption for a picture when you hover over it?

 

Also im trying to create a roll over image which changes when you put the mouse over. Some people say I should use Javascript while others say use css. What do you guys think?

 

I tried using ..

 

<img src="rollover0.png" id="Phenylethylamine" onMouseOver="getElementById('Phenylethylamine').src='rollover1.png'" rollover0.png="getElementById('Phenylethylamine').src='rollover1.png'">

 

...which changes the picture when you hover over but not back when youtake the mouse off.

Link to comment
Share on other sites

After a several days crying over my computer I've knocked up a basic website that seems to work ok. However one thing im yet to work out is how to get a caption for a picture when you hover over it?

 

Also im trying to create a roll over image which changes when you put the mouse over. Some people say I should use Javascript while others say use css. What do you guys think?

 

I tried using ..

 

<img src="rollover0.png" id="Phenylethylamine" onMouseOver="getElementById('Phenylethylamine').src='rollover1.png'" rollover0.png="getElementById('Phenylethylamine').src='rollover1.png'">

 

...which changes the picture when you hover over but not back when youtake the mouse off.

 

Its been a long time since I played with JavaScript, but I think you have to have a mouse off / out part too.

 

http://www.w3schools.com/jsref/jsref_onmouseover.asp

 

Heres a tool tip that can be adapted for images using dhtml:

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

 

hmm i have an alt tag on all my pictures but none of seem to do anything when i hover over with a mouse.

 

The alt tag is a compliance issue. Some verifiers require images to carry that tag for people who dont have pics load on page open. This gives them that text caption in the empty image box.

Link to comment
Share on other sites

Let me first stress that rollovers are a REALLY bad idea if you wish your content to be accessible so I would advise that you not use them.

 

The problem is with your JavaScript event handling; it could be more simple done as follows:

 

<img src="rollover0.png" id="Phenylethylamine" onmouseover="this.src='rollover1.png'" />

 

... because the code in the mouseover event handler will be interprited in the context of its parent element (in this case the image tag) it will work just fine to reference to the element as "this"

 

Hope that helps.

Link to comment
Share on other sites

I realise the thread has gotten a little more specific, but if you were looking for free templates, http://www.freecsstemplates.org has some fantastic templates you can use for free. You will have to know a little bit of HTML yourself to insert text properly, embed images and such, but you'll find it all quite trivial after you do it the first time. W3Schools.org is a maybe a good starting point to learn the basics of HTML.

Link to comment
Share on other sites

  • 1 month later...

I know this is a bit late for the OPer's purposes, but has anyone used Google Sites yet? Apparently it's a webpage builder that lets anyone build webpages. IT doesn't require the builder to know any HTML.

 

Anyone tested this yet?

Link to comment
Share on other sites

I know this is a bit late for the OPer's purposes, but has anyone used Google Sites yet? Apparently it's a webpage builder that lets anyone build webpages. IT doesn't require the builder to know any HTML.

 

Anyone tested this yet?

It's actually pretty sweet, but I am having troubles analyzing it correctly, because I'm not used to letting go of code while building a site.. it is a bit limited, as is expected from a WYSIWYG editor (specifically an online one), but if your purpose is a basic site without too much hooha, it looks great.

 

I think it might be better that someone who is not a web developer check the site out too for ease-of-use and abilities.. from what I could see, it's very basic, but quite good, specifically since it's a free service.

 

Oh.. and there are really nice templates to google pages, too.. i was thinking of. uhm.. adapting... some.... :P

 

~moo

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.