• Quick note - the problem with Youtube videos not embedding on the forum appears to have been fixed, thanks to ZiprHead. If you do still see problems let me know.

Web Site programming

yairhol

Graduate Poster
yairhol
Joined
Jan 16, 2007
Messages
1,401
Hello gang,
I'd really like to learn how to build/design web sites.
What are the programming languages that I'll need to learn and what are some excellent books to read on the subject?
Eventually I'd like to design websites with nice graphics, have comment sections written by guests, maybe some animation, hyperlinks and of course written text that I'll update on the site.

Regards,
Yair
 
You'll probably have to start learning HTML first. Technically it doesn't count as a "programming language" but is rather a way to describe the structure of a document. The pages you make with it are not interactive; it is just a way to present information.

Luckily it is pretty easy to learn. These are probably some of the best tutorials: W3CSchools and HTML Code tutorial.

When you get the hang of that, you'll probably want to look into CSS for better control of what the content of your site is going to look like, Javascript for more interactivity. Personally I think both are unnecessarily complicated, but they are the best supported things around.
 
For client side only websites HTML, CSS (better way to control your HTML styles, fonts, colors etc) and Javascript (a way to make html a bit more dynamic)

If you need server side interaction (saving to a database etc) then you get into a much more heavyweight field where you have plenty of choices. ASP, JSP, PHP etc. If you are only looking for something simple here, then look into something other people have developed. You should be able to understand what they do a lot better when you get to Javascript and get some programming concepts down (functions, loops, string manipulations etc).
 
I'd say learn HTML and CSS for a basic working knowledge. And if you want to learn the coding itself stay clear of WYSIWYG editors (like Frontpage), because not only will they make you lazy but they'll bloat your code. Doing the HTML by hand will often result in a file about half the size of a Frontpage equivalent which although a very minute difference is still cleaner and makes the page easier to edit later.
 
Time for a little crusade.

I think it is essential to learn both HTML and CSS.

Whilst possible, HTML is not meant to affect the layout or design of a webpage. It's only purpose is to structure the information contained in a document.

CSS is than used to give a layout to the structured information.

So, I'll agree with dogmeat: Do not use WYSIWYG-editors. It is simply not possible to create webpages that will look the same on all browsers. So what you see is most certainly not going to be what someone else sees when browsing to the same site.

The distinction is important because you will write better webpages. Less code, easier to edit, sites will cater to any number of browsers and users, regardless of their respective abilities or needs.


Two things I've found incredibly useful at many occasions:

Firefox Web Developer Toolbar
Firefox HTML Validator
 
I also endorse avoiding the WYSIWYG editors in favor of hand-coding HTML and CSS.

Check out CSS Zen Garden for some examples of how you can vary the look of a website by changing the CSS (and providing some images) while leaving the content encoded in the HTML unchanged.

For some websites you may also want to learn how to add a database (SQL) and server-side scripting (PHP, Perl), after javascript, but start with HTML and CSS and see how you like that first.
 
I also endorse avoiding the WYSIWYG editors - for two main reasons:
  • so-called WYSIWYGs will introduce a whole bunch of spurious code that will not only only confuse you but also (probably) use an XHTML DOCTYPE by default and this is simply stupid - see Why most of us should NOT use XHTML (if that is too geeky to understand, just trust him and use HTML4)
  • at the time of writing, there aren't ANY such editors on the planet

uf010526.gif

​

I also endorse hand-coding, using consistent indentation (aka Girl Code/Metrosexual Programming) will pay real dividends... when you write it, you understand it, so you can fix it when (not if) you make mistakes

Free text editors:
I strongly recommend (in addition to Firefox with Firebug) the Opera browser:
  • Like Firefox, its free
  • Its THE most standards-compliant browser
  • It has a Developer Console, with DOM inspector, JavaScript inspector, CSS editor and HTTP header inspector.
  • It has a nifty trick: use Ctrl + Alt + V to run the current page/tab through the w3C validator

To see how CSS can control the presentation of your content (html), as well as Zen Garden, I recommend:
And to make sure you're not writing bugs, use the w3C CSS Validator

To learn how javascript can control the behaviour of your content, see
There are several forums where help and advice (from experts) is freely available:
 
six7s said:
I also endorse avoiding the WYSIWYG editors - for two main reasons:
  • so-called WYSIWYGs will introduce a whole bunch of spurious code that will not only only confuse you but also (probably) use an XHTML DOCTYPE by default and this is simply stupid - see Why most of us should NOT use XHTML (if that is too geeky to understand, just trust him and use HTML4)
  • at the time of writing, there aren't ANY such editors on the planet
Click to expand...

This is not to say that you can't use editors that are built to help you with HTML, such as Macromedia Homesite or CoffeeCup. They simply do some of the dogwork, such as adding the closing tag for a tag you type in, or do syntax checking, and also will run a local browser so you can really see what you just did. There is a difference between that and FrontPage, which lards your code with arcane MS stuff. In general, you should be able enough in HTML to edit your page directly with Notepad if you have to.

By all means, learn and use CSS, but don't use Javascript unless you have to. Many people have JS turned off in their browsers and they won't be able to use your page anyway. Effects are neat, but they are always a "been there, done that" phenomena, like animated gifs and tinny music. They bore the third time. The content is the thing...

If you really get into it, you'll eventually have to learn an image editor as well, like Paint Shop Pro or PhotoShop. That's an art and takes practice.
 
Last edited:
If you design and build on a PC, buy a Mac for testing. If you design and build on a Mac, buy a PC for testing. I'm not a developer, I employ them, and the single greatest headache of every project is getting the site to look perfect or degrade gracefully in as many combinations of OS and browser as possible. My company supports the top few, contractually, which are:

IE7 on PC
IE6 on PC (I have a dedicated PC in the office for this as you can't have both versions installed at the same time)
Firefox (latest version) on PC
Firefox (latest version) on Mac
Safari (latest version) on Mac

Opera looks after itself, although I don't guarantee it in the contract, I've never had a site not work in it. Anything else, the client has to pay extra for. Sometimes they want IE6 on a Mac or that sort of thing.

Anyway, my advice is, learn the bug fixes and make sure you have access to both a Mac and PC for testing. If you're just doing it as a hobby, call a mate with a Mac and ask them to look at the site for you.

And my top tip: Mac OS renders fonts slightly larger than Windows, so beware the dreaded text-going-onto-the-next-line headache.
 
Last edited:
tkingdoll said:
IE7 on PC
IE6 on PC (I have a dedicated PC in the office for this as you can't have both versions installed at the same time)
Click to expand...


tech-recipes.com \ Using IE6 and IE7 together

Now, Microsoft has come up with another rather interesting solution using a Virtual PC image. You can download the Windows XP IE6 Virtual PC image, and then use it through Virtual PC. Beware through, because these images do expire, and you'll most likely have to download a new version of it every couple of months or so. The image linked in this article will expire on April 1st 2008.

But the cool thing is that you get a install free XP image that you can use for testing out software and what not, so that you don't screw up your existing Windows install. It saves you the hassle of installing XP from scratch to see how websites work in an outdated version of Internet Explorer that people still use.
Click to expand...

ETA See also: blogs.msdn.com \ ie6-and-ie7-running-on-a-single-machine
 
Last edited:
shadron said:
They simply do some of the dogwork, such as adding the closing tag for a tag you type in, or do syntax checking, and also will run a local browser so you can really see what you just did
Click to expand...

SciTE (my favouritest free text editor ever) won't add anything at all, no closing tags, zip, nada, BUT (unlike Notepad) it does 'recognise' the syntax of 30+ languages AND it uses COLOUR to differentiate elements, tags, meta tags, css, javascript, comments, etc, etc, AND (on a PC) if/when you hit the F5 key it will load your (html) file into a new tab in your default browser :)

I could go on, and on, and on....
 
Last edited:
six7s said:

tech-recipes.com \ Using IE6 and IE7 together
Click to expand...

Been there, tried that, lost a day's work. For 100% reliability, I'd rather spend £200 on a second-hand PC, it's useful to have a spare machine anyway. But for those on a budget, the standalones are worth a try. As for the XP image solution, my office machines are Vista, except for the IE6 tester. But I've not tried it, I might give it a whirl on a home machine and see how I get on, it would be useful for my freelancers who don't use Vista. Cheers for the link.
 
Wow, thanks for all the great comments.
Some of the posts are way over my head since I'm an absolute beginner when it comes to web programming and don't know yet what you guys are talking about.
In the meanwhile I bought this book:
"Build Your Own Website The Right Way Using HTML & CSS"
http://www.amazon.com/Build-Your-We...=sr_1_1?ie=UTF8&s=books&qid=1198991484&sr=1-1

I hope it will get me going in the right direction.

Regards,
Yair
 
yairhol said:
...I bought this book:
"Build Your Own Website The Right Way Using HTML & CSS"
http://www.amazon.com/Build-Your-We...=sr_1_1?ie=UTF8&s=books&qid=1198991484&sr=1-1

I hope it will get me going in the right direction
Click to expand...

It should do :)

I downloaded a pdf copy of the 1st 4 chapters from http://www.sitepoint.com/books/html1/

It looks quite good...

My only beef is that the author endorses an XHTML doctype with <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> :(

This goes against what Ian Hickson recommends in Sending XHTML as text/html Considered Harmful, which (although a bit geeky for a beginner) says that unless you know what you're doing and why, stick to HTML4 (which will be compatible with all of the other 'steps' described in Ian Lloyd's book)

e.g.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>EDIT TITLE</title>
	</head>
	<body>
		<h1>Hello World</h1>
	</body>
</html>
 
Last edited:
In addition to what others have said, I'd recommend the book "Don't Make Me Think: A Common Sense Approach to Web Usability". It won't teach you programming but it will help you keep from making your websites unusable.

http://www.amazon.com/Dont-Make-Me-...bs_sr_1?ie=UTF8&s=books&qid=1199041296&sr=8-1


Also for those recommending purchasing 2nd machines for testing, I'd highly recommend using Virtual PC's instead. If you main OS is XP or Vista, Virtual PC 2007 is free:

http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx

If you're on a Mac I'd recommend either Parallels or VMWare Fusion. Not free.

http://www.parallels.com/
http://www.vmware.com/products/fusion/

much better than having multiple machines. You can even setup one virtual machine as Linux running Apache for testing server side stuff (or Microsoft Server with IIS, although that costs more)
 
kevin said:
In addition to what others have said, I'd recommend the book "Don't Make Me Think: A Common Sense Approach to Web Usability". It won't teach you programming but it will help you keep from making your websites unusable.

http://www.amazon.com/Dont-Make-Me-...bs_sr_1?ie=UTF8&s=books&qid=1199041296&sr=8-1


Also for those recommending purchasing 2nd machines for testing, I'd highly recommend using Virtual PC's instead. If you main OS is XP or Vista, Virtual PC 2007 is free:
Click to expand...

I've read the blurb, I think I'll give it a whirl when I'm back in the office next week, it could be very useful. But, you still need a Mac for testing if you build on a PC...
 
The best books I've read on web design are
http://www.amazon.co.uk/Designing-W...bs_sr_2?ie=UTF8&s=books&qid=1199046808&sr=8-2
and
http://www.amazon.co.uk/Eric-Meyer-...=sr_1_2?ie=UTF8&s=books&qid=1199046842&sr=1-2
because they teach you the "why" - especially why standards make sense.
Plus you've got to love Zeldman for his own website
http://www.zeldman.com/adgraveyard/
and anyone who names a website http://www.thenoodleincident.com/ has to be one of the good guys.
However, I'm a programmer and website design is something I just dabble in, FWIW.
 
tkingdoll said:
But, you still need a Mac for testing if you build on a PC...
Click to expand...

I do agree... but...

I strongly recommend that testing of each file is done using html and css validators first (until the results are found to be vaild without even any 'warnings'), then testing will be much quicker/easier on a variety of platforms (Mac, Windoze, Linux, mobile phones, screen readers, printers, etc, etc) and browsers (Internet Exploiter, Firefox, Opera, Safari, Konqueror, etc etc)
 
Last edited:
You must log in or register to reply here.

Back
Top Bottom