Designing/building web pages?

[Elizabeth I]

Can anybody recommend a really good resource for learning to design and build web pages, for a totally clueless person starting several steps behind square one?

Or is there a good open-source template kind of thing out there anywhere?

I have tried the "For Dummies" book, but apparently I was too dumb for it.

Thanks for any help -

[grmcdorman]

Personally, I find the title of the For Dummies series insulting - I'm not a dummy, thank you very much, although I may be a clueless neophyte.

Having said that, what sort of expectations do you have? In addition, by design do you mean aesthetics (appearance) and usability; or, the nuts and bolts of the page layout? They're quite different things, although all are important.

If your expectations are modest, then a simple web page editor (such as provided online by Google Pages, or offline by free programs like OpenOffice.org's word process in HTML mode) may suffice. (Note that, historically, Microsoft Word tended to produce rather bad HTML layout - and HTML that worked best, or only, in Internet Explorer to boot. I'm not sure what the state is today.)

At a slightly more advanced level HTML design programs like DreamWeaver are apparently rather good.

Conversely, if you want top-notch results you should - in my opinion, anyway - get a good grounding in the layout code (HTML). Unfortunately, in that area I'm not familiar with the books available so I can't make a recommendation for you. Depending on your computer knowledge, you may need some background material first. Without knowing where you stand, it's pretty hard to recommend any. Do you know page layout? Have you done any desktop publishing or the like?

Finally, do you need to do dynamic processing (such as Flash or other scripting)? If you do, you'll probably want a programmer involved at some level to get good results - non-programmers, as a rule, tend to lack the theoretical grounding to produce stable programs. This is a very large area and would

One thing you can do, by the way, is to look at the HTML code for any web page accessible to you; this will be something like View Source in the View menu (depending on the browser you use). Once you get started in learning HTML, you can use that - sometimes - to see how a specific web page is constructed (although in some cases the result will be essentially gibberish).

To just answer the question about templates, from a quick look OpenSource Web Design (http://www.oswd.org/) [www.oswd.org] seems to be pretty good. However, to properly use the templates you will most likely need to know Cascading Style Sheets [CSS] as well as basic HTML.

For learning HTML, www.html.net - again from a quick glance - seem to be reasonable (the Learning HTML (http://www.html.net/tutorials/html/) tutorial may be at the level you need - or even below; it starts by explaining browsers). The canonical resource is the W3C (standards organization); their tutorial is Getting started with HTML (http://www.w3.org/MarkUp/Guide/); I don't know if it would be at the appropriate level for you, though.


- grmcdorman, who is a programmer but not a web designer or web programmer

[Alex Libman]

It's not for everybody. I'm sure you can learn to do it, just as I am sure that I can learn to speak Cantonese, but some things just aren't cost-effective and the results won't be professional. Why not hire somebody?

[jimtron]

Some links you may find helpful:


Make your own Web pages very easily:
http://pages.google.com/

Comprehensive list of Web design links:
http://www.kayodeok.btinternet.co.uk/favorites/webdesign.htm

Free, open source templates:
http://www.oswd.org/

More open source templates:
http://www.openwebdesign.org/

Free Web building tutorials:
http://www.w3schools.com/

[AbleSugar]

Good links jimtron.

[Elizabeth I]

Thank you!

It's deeply appreciated -

[yairhol]

Hi Elizabeth,

I was contemplating on this same question a few months ago and picked up this book:
"Build Your Own Website The Right Way Using HTML & CSS" (http://www.amazon.com/Build-Your-Website-Right-Using/dp/0975240293/ref=sr_1_19?ie=UTF8&s=books&qid=1218343975&sr=8-19)

I was also a newbie and didn't know anything about creating web sites.
Read the other readers' reviews. I think it's a great book with many examples and it even tells you where to find free editors for you to work with.

Good luck.

[six7s]

Free Web building tutorials:
http://www.w3schools.com/I used to recommend that site, until I found the webreference.com HTML with Style tutorials (http://www.webreference.com/html/), which (unlike w3schools) are standards compliant :)

[yairhol]

I used to recommend that site, until I found the webreference.com HTML with Style tutorials (http://www.webreference.com/html/), which (unlike w3schools) are standards compliant :)

I took a look at your referenced site. It looks very promising. It seems I will be visiting it often to learn new things. Thanks.

Elizabeth, whatever six7s tells you about web site development take it as if written in stone. Understand it, memorize it, cherish it. It is usually worth more than gold. That's from personal experience.

[six7s]

:head asplodes:


You're way too kind!

But I'm glad my advice has been useful for you :)


-----------

ETA:

The thread where I gave yairhol some advice:
JREF Forum » General Topics » Computers and the Internet
Web Site programming (http://forums.randi.org/showthread.php?t=101947)

[TheDaver]

Personally, I really like HTML, XHTML & CSS: Visual Quickstart Guide (http://www.amazon.ca/HTML-XHTML-CSS-Sixth-QuickStart/dp/0321430840/ref=pd_bowtega_1/702-4065994-1511262?ie=UTF8&s=books&qid=1218371436&sr=1-1) by Elizabeth Castro.

Very easy to follow, with plenty of illustrations (in the 6th edition, now in colour), and it teaches you not just how to make pages that work, but that meet W3C standards. Also covers some basic aesthetic design concepts, though really it dwells on the practical and technical.

[moopet]

Personally, I find the title of the For Dummies series insulting - I'm not a dummy, thank you very much, although I may be a clueless neophyte.

Srlsy?

Because I hear that Web Design for Clueless Neophtytes was rejected at quite an eleventh-hour board meeting.

Does anyone else have any problem with the For Dummies or For Complete Idiots brands?

[six7s]

I and, it seems, many, many others have no problem with such self-deprecation... if anything I suspect it can make the whole experience less intimidating from the outset

Another forum I like uses this as it's motto:
There's no such thing as a stupid question,
but they're the easiest to answer.
http://forums.techguy.org/

[erlando]

I used to recommend that site, until I found the webreference.com HTML with Style tutorials (http://www.webreference.com/html/), which (unlike w3schools) are standards compliant :)

Eeek.. The first new article on that site is "How to create a search feature with PHP and MySQL" (http://www.webreference.com/programming/php/search/) complete with big sql-injection holes.. Their stated remedy is a regexp - completely overlooking escape-functions or prepared statements. Not good.

[six7s]

Please note that the OP in this thread sought recommendations "for a really good resource for learning to design and build web pages, for a totally clueless person starting several steps behind square one"

If you can find fault with the HTML with Style tutorials (http://www.webreference.com/html/), please point them out

[JoeEllison]

I used to recommend that site, until I found the webreference.com HTML with Style tutorials (http://www.webreference.com/html/), which (unlike w3schools) are standards compliant :)

I still find w3schools to be an easier site to navigate overall... I'm a stick-in-the-mud though, so I'm not exactly reliable here. I've also got an HTML/XHTML textbook (http://www.course.com/catalog/product.cfm?isbn=0-619-26747-x) around here somewhere that I'm going to have to dig out, that is super useful and has included files for modification that really get you knee-deep in the code right off the bat. I've found that by practicing on their templates, I can then shift smoothly to creating my own work by mostly cut-and-paste.

[six7s]

One technique that I think is useful for newbies and experienced designers alike is known as MoSCoW Rules, which an be used to identify and prioritise the features and functionality of a web site

Must Haves - elements/features that are essential to the success of a site
On time
Should Haves - important but success is not reliant on them
Could Haves - can be omitted without adverse impact
On budget
Won't Have - will be left out (for now), might be done later

In my opinion, the one Must Have for any page is valid HTML (http://validator.w3.org/)

If, for an absolute newbie, this means the page features nothing other than a header saying Hello World, then so be it

Encouraging anyone to run before they learn to walk is an as-good-as-guaranteed way of ensuring they go splat on their face at the first hurdle :mad:

[JoeEllison]

One technique that I think is useful for newbies and experienced designers alike is known as MoSCoW Rules, which an be used to identify and prioritise the features and functionality of a web site

Must Haves - elements/features that are essential to the success of a site
On time
Should Haves - important but success is not reliant on them
Could Haves - can be omitted without adverse impact
On budget
Won't Have - will be left out (for now), might be done later

In my opinion, the one Must Have for any page is valid HTML (http://validator.w3.org/)

If, for an absolute newbie, this means the page features nothing other than a header saying Hello World, then so be it

Encouraging anyone to run before they learn to walk is an as-good-as-guaranteed way of ensuring they go splat on their face at the first hurdle :mad:

I'd never heard that one before... but it seems obvious enough that I've more or less stuck to it in practice. You get the nuts and bolts right first, and then you worry about the bells and whistles. We're almost all of us always constrained by limits of one sort or another, deadlines or budgets. Spending resources on some fancy widget is a lot less sensible than making sure that you get the basics right first.

When I've designed sites, I've always started with a basic skeleton of code, and then added on based on the priorities. It is a lot easier to create a bunch of placeholders and delete them if you run out of time, rather than spend time on unnecessary elements and fail to get the required elements implemented correctly.

[six7s]

I've also got an HTML/XHTML textbook (http://www.course.com/catalog/product.cfm?isbn=0-619-26747-x) around here somewhere Hi Joe,

You don't sound like an absolute newbie "starting several steps behind square one"

I stopped recommending w3schools to absolute newbies because the intro is both absurdly light on 'background' (plunging the leaner into coding on the sixth line of their primer (http://www.w3schools.com/web/web_html.asp)!) and, much worse - in my opinion - erroneous in that, as far as I can tell, they make no reference to DOCTYPE and CHARSET declarations in the tutorials and, on their own (actual) pages, they get them wrong!

[erlando]

Please note that the OP in this thread sought recommendations "for a really good resource for learning to design and build web pages, for a totally clueless person starting several steps behind square one"

I gauge the quality of a reference site on the articles posted. Beginners will use google and find articles as the one I found and use the code almost verbatim. They are taught the completely wrong thing from day one. That is not good.


If you can find fault with the HTML with Style tutorials (http://www.webreference.com/html/), please point them out

The tutorials seems a bit dated. Especially the CSS parts where they describe things as they were in IE 5.5 and Netscape Navigator 4. That's a loooong time ago.

I would imagine someone following the tutorials being a bit confused when the browser does the exact opposite as is described.

And I'm opposed to the idea of basically saying "this is bad form - but here's how you do it" as the author does in e.g the tables chapter. "Don't use tables for layout - but here's how you do it". That's not good teaching. Teach the good form and leave it at that.

That said, the intros are good.

[erlando]

In my opinion, the one Must Have for any page is valid HTML (http://validator.w3.org/)

On this we are in complete agreement.

[moopet]

On this we are in complete agreement.

And a blinking marquee. Don't forget the blinking marquee. It tells the world you're serious.

[six7s]

I gauge the quality of a reference site on the articles posted. Beginners will use google and find articles as the one I found and use the code almost verbatim. They are taught the completely wrong thing from day one. That is not goodI have no vested interest in that site or any other... I simply aim to point newbies in the right direction and the webreference.com tutorials (http://www.webreference.com/html/) are the best I have found

If you know of a better resource, please post a link to it

[Achán hiNidráne]

<Crotchety Old Man Voice>
Ahhhh... I remember back in the Good Olde Days (circa 1994) when I used to code the HTML (1.X) for my Full Thrust site in by hand using a UNIX-based text editor. That was before all yer fancy XML, CCS, Javascript, and Flash! I fell so far behind I forgot most of what I knew.

Well, it's time fer shuffleboard and tapioca pudding. Mmmmmm... pudding.

[six7s]

Luxury!

[erlando]

You had HTML? What extravagance!

All we had was an old azbekistani man who painted pictures of our webpages. He was deaf and couldn't read so it was all sign language.

It turns out that the azbek sign for "frontpage" is very easily mistaken for "the bird"..

[Worm]

I taught myself the basics using short screencasts from a guy who wrote for a PC magazine.

Doubt they're still available, but I'll have a look.

[cgordon]

How/what NOT to do web pages: www.webpagesthatsuck.com

[Modified]

In my opinion, the one Must Have for any page is valid HTML (http://validator.w3.org/)

Agreed. The second thing, speaking as someone who has a big screen and scales fonts up to a very large size, is that the layouts of your pages should not break down when fonts are scaled up to a very large size. In general, you should avoid any pixel-based sizes.

[six7s]

The following is, I think, both easy to read and understand :)

http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
Using Points, Pixels, Ems, or Percentages for CSS Fonts (http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm)


Deciding on Font Sizing in CSS

One of the most common ways to use Cascading Style Sheets (CSS) is to modify the font or typography of the page. If you've examined the font-size property, you'll know that there are many different measurements to use when defining the size of the font.

Relative lengths

* xx-small through xx-large - relative to the default browser font size
* percentages - relative to the surrounding text
* em and ex - relative to the parent element
* pixels - relative to the screen resolution

Absolute lengths

* points and picas - print units
* inches, centimeters, and millimeters - length units

<snip/>
Once you've decided not to use points for your screen style sheets, you need to decide what unit of measure to use. There are two rules of thumb.

Accessibility
If accessibility is your biggest concern, then you should use ems... <snip/>
...if your readers choose to change the default font size on the fly, your page will scale to that new size.

The problem with ems is that you lose control over the exact look of your page...<snip/>

Control
If control over the look of your Web page is your biggest concern, then you should use pixels. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen.

<snip/>
Know Your Audience

<snip/>Decide which is more important, control or accessibility, and use the measure that's right for you.

[jimtron]

Article above looks good, which reminds me: it's essential to learn CSS as well as HTML. IMHO. WTF.

[Modified]

The following is, I think, both easy to read and understand

They are talking about fonts though, I was talking about page layouts in general. Whenever possible, fixed-size web page elements should scale to the text they contain, or when that is not possible, based on the font size. Non-fixed-size elements should take up the remaining space or some fraction of it. Otherwise, you end up with something like the Yahoo mail compose page:
http://forums.randi.org/imagehosting/thum_1178248a3a70d4742e.png (http://forums.randi.org/vbimghost.php?do=displayimg&imgid=13417)

Apart from the obvious layout problems, the entry fields are not wide enough in characters (they are a fixed pixel width). I have to shrink the font and lean in close to my screen to use the page. I'm not sight impaired, I just have a big, high-res screen and sit a fair distance from it.

[six7s]

They are talking about fonts though, I was talking about page layouts in general. When designing a new site, one of my first 'ports of call' is http://www.positioniseverything.net/
(http://www.positioniseverything.net/), which has a wealth of info, including links to Accessify.com, ClevaTrevor's Pagemaker and the sites of both Eric Meyer and Stu Nicholls - two of the leading gurus of CSS liquid layouts

Non-fixed-size elements should take up the remaining space or some fraction of it. Otherwise, you end up with something like the Yahoo mail compose page:
http://forums.randi.org/imagehosting/thum_1178248a3a70d4742e.png (http://forums.randi.org/vbimghost.php?do=displayimg&imgid=13417)

I'm genuinely surprised and dismayed to see how (technically speaking, not aesthetically) ugly that design is - especially so considering the reputation of the YUI Grids libraries (http://developer.yahoo.com/yui/grids/) (call me an old-fashioned stick-in-the-mud or a stubborn ass, but I've yet to use any YUI stuff, preferring instead to hand code (almost) everything myself... my rationale being that when I write code and it breaks or falls over, I will probably have a good idea how to fix it)

Apart from the obvious layout problems, the entry fields are not wide enough in characters (they are a fixed pixel width). That is a needless example of 'pixel-perfect control-freaks' ignoring the needs of their users :mad:

[technoextreme]

And a blinking marquee. Don't forget the blinking marquee. It tells the world you're serious.
You do realize that there is a way to create a valid CSS compliant marquee right....
How/what NOT to do web pages: www.webpagesthatsuck.com
Well I kind of wonder why it won't take it's own advice... Hell after trying to read the website I would not take anything they say in any seriousness.

[erlando]

You do realize that there is a way to create a valid CSS compliant marquee right....

Great! Now we just need a valid reason for using one..

Well I kind of wonder why it won't take it's own advice... Hell after trying to read the website I would not take anything they say in any seriousness.

I wondered the same. But there's quite a few of the articles on good design that are really worth reading.

[technoextreme]

I wondered the same. But there's quite a few of the articles on good design that are really worth reading.
Just to clarify my position the only problem I have with that website is that the ads placed in an odd manner.

[Akhenaten]

One technique that I think is useful for newbies and experienced designers alike is known as MoSCoW Rules, which an be used to identify and prioritise the features and functionality of a web site

Must Haves - elements/features that are essential to the success of a site
On time
Should Haves - important but success is not reliant on them
Could Haves - can be omitted without adverse impact
On budget
Won't Have - will be left out (for now), might be done later

In my opinion, the one Must Have for any page is valid HTML (http://validator.w3.org/)

If, for an absolute newbie, this means the page features nothing other than a header saying Hello World, then so be it

Encouraging anyone to run before they learn to walk is an as-good-as-guaranteed way of ensuring they go splat on their face at the first hurdle :mad:

I have to thank and curse you for this excellent piece of advice.

Thanks, because it finally convinced me, two years after starting from scratch, to rewrite my own site in valid 4.01. I made a really bad start by originally "writing" the pages with FP, and as you can imagine, things went downhill really quickly. The first time I saw the site in Firefox I was horrified. I use Notepad2 almost exclusively now, and I just love all the FP "features" that it doesn't have. If only I'd come here first :)

Curses for forcing me to admit that my HTML was a disgrace and I needed to buckle down to a month's(?) work to redo it properly. Still. it's keeping me off the streets.


Hang on . . .

More thanks due for the thrill I get from seeing that lovely green screen on the W3C validator, and for the joy of seeing my pages work in browsers other than IE.

Cool! That gives you an overall rating of a Thank You +

Please take an internet from petty cash.


Cheers,

Dave

[six7s]

...the thrill I get from seeing that lovely green screen on the W3C validatorSomething I didn't notice for a while is that results from a valid page with WARNINGS are displayed in (almost) the same green screen, esp to the unwary eye (until I noticed the anomaly, I routinely loaded the results page into a new tab, and if it had a green favicon in the tab bar, I simply closed the tab and got on with my w*rk... oblivious to the possibility that there might have been any warnings :( )

e.g.

a valid html4 strict page with this:

<a href="http://www.example.com"
title="some text describing the link">
<img src="myImageName.jpg"
alt="this image tag IS NOT terminated with a closing &gt; bracket"
</a>
and
<a href="http://www.example.com"
title="some text describing the link">
<img src="myImageName.jpg"
alt="this image tag IS terminated with a closing &gt; bracket">
</a>


The w3 validator results page says:

This document was successfully checked as HTML 4.01 Strict!
Result: Passed, 1 warning(s)
Validation Output: 1 Warning

Below is a list of the warning message(s) produced when checking your document.

1. Warning Line 110, Column 5: unclosed start-tag requires SHORTTAG YES.

</a>


The construct <foo<bar> is valid in HTML (it is an example of the rather obscure “Shorttags” feature) but its use is not recommended (http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.7). In most cases, this is a typo that you will want to fix. If you really want to use shorttags, be aware that they are not well implemented by browsers.


The boffins maintaining the w3 validator are aware of this and, for some reason, think it's not an issue worth addressing... even though doing so would, I think, simply entail two or three lines of code in the underlying CSS
:confused:

an overall rating of a Thank You +

You're welcome ++;

[Dorian Gray]

A great book to get is The Complete Idiot's Guide for Dummies.

[six7s]

I have tried the "For Dummies" book, but apparently I was too dumb for it.

A great book to get is The Complete Idiot's Guide for Dummies.

:confused: