Webpage Building Guides for the Uninitiated?

smilingbandit2 asks: "For the past several months, I've wanted to dive into the world of webpage design. I'm not looking to creative anything cutting edge or even terribly useful, just hobby pages and weblogs that look professionally made. Unfortunately, my knowledge of website design consists of one basic HTML class I took in highschool, about 8 years ago. I feel comfortable enough coding in HTML, but it doesn't give me the results I want, and I know nothing about any other coding languages. Now, I'm not scared of learning new software or languages - in fact, I'm eager to expand my skillsets - but I don't know what to study. XML, Perl, AJAX - nothing but alphabet soup to me. I don't about anything beyond HTML. I'm completely uninitiated in advanced web design. Now, I turn to Slashdot for help. Where should I begin on the path to design enlightenment? What're the languages, programs, or whatever that are worth knowing? Are there good guidebooks, useful websites, or insightful forums? Are formal classes worth a damn? What do you frequently use on your websites? Any helpful advice, generally?"

Comments

Mmmm, XHTML is tasty

[Southpaw018]

Good news, friend. XHTML, CSS, and PHP are the three major languages of the web today, and you already know one. XHTML is very, very similar to HTML. One change, for example, is the
tag being replaced with />. The reason is that all tags must have a closing tag, like <a> </a> does. Lots of other stuff is mostly the same. The one big change you'll need to make is that all style tags have been dropped from XHTML. No more <b>! You use CSS now. Grab a book on moving from HTML to XHTML. There are lots out there!
As for programming languages, you'll probably be more comfortable with PHP than Perl. Again, I'd grab a getting started with PHP book and work your way in.
As for programs...I do everything by hand in Notepad. It makes for very sleek webpages, and there's no other way to get full control over your page's code.
Stick with it. I was in your shoes about 3 years ago, and now I do this for a living :)

Re:Mmmm, XHTML is tasty

[Cyphertube]

I concur with the XHTML and CSS. If you don't know these, you don't know the full extent of what you CAN do in the browser. While I don't think every site has to be in XHTML, it makes it much easier to transition over to working with XML docs if you already tag in an XML format.

PHP is a great language for coding the dynamic side. While there are lots of places that use ASP, I found that ASP is awkward and really isn't built well. So stick with PHP. Learn to write SQL queries too, and integration with MySQL won't be so tough.

While I promote hand-coding, look into getting a good IDE of some kind, like TextPad. That way you can validate your code and make sure you don't screw up every five minutes. XMLSpy Home Edition is also pretty good for such things.

CSS is great stuff, and while you'll be frustrated when browser X, Y, or Z doesn't support something, there are ways to make the page degrade gracefully. Start looking for CSS Hacks and you'll find plenty of workarounds. Always write for a good CSS-compliant browser and then fix for the broken (like IE).

Re:Mmmm, XHTML is tasty

[b4k3d b34nz]

Having learned the things I'm about to list in a less-preferred order, I recommend learning in this order. Some may overlap a bit.

First, learn a lot more about HTML than you know. Learn how to create the correct structure in your sites, and try to avoid excessive tags such as tables and divs. Use page headers (h1, h2,...) and paragraph (p) tags and avoid line breaks (br) unless you're actually attempting to do a line break and not just creating space. Here's a good article to read: http://brainstormsandraves.com/articles/semantics/ structure/.

Learn XHTML, and while you're at it, learn a little bit about basic XML and how it works. W3Schools has a good introduction. XHTML, XML. Don't go too far just yet with XML.

While you're learning XHTML, you'll inevitably encounter CSS. The W3C has plenty of links to articles. Make absolutely sure that you learn CSS, it is the pivot point of learning truly professional looking web development (even if you don't want to do it professionally).

Eventually, you'll need to either build your own system for a blog (as you mentioned you'd like to do), or use a blog management system such as Wordpress. If you choose to do it yourself, you need to learn 2 things. SQL and PHP. I recommend using MySQL (an implementation of SQL) because it's free. Most webhosts will support PHP and MySQL as well, so it's more widespread. W3Schools has the easiest introduction to SQL that I've seen. PHP.net has a complete PHP reference. Make sure to check out the mysql section, because that's what you'll be using most.

Scripting comes next. DevGuru has a pretty good, although incomplete reference for basic JavaScript. Basically, just do a search on Google for Javascript reference and you'll pretty much be able to find anything you want. As you get more advanced, try to understand more complex JavaScript such as the Prototype library, among others.

At this point, you'll have a firm grip on web development. Go back and refresh your skills with XHTML and CSS and you'll find out how much you still have left to learn.

There are many other things to learn about web development, specifically if you want to do web programming and application development. That's a whole other can of worms though.

What do you want?

[tfinniga]

just hobby pages and weblogs that look professionally made

If you don't need any fancy interactivity, just a more professional look, I'd suggest starting with css. It basically allows you to get much more control over layout, etc, than you can with just html.
Here's some css inspiration.
If you're looking for certain interaction models, maybe tell us more about what you want the site to do, and we can better recommend technologies. :)

web design or web programming?

[CanSpice]

You really sound like you're talking about two different things. First off, you say you want to learn better and more advanced web design. If this is the case, then you should check out the CSS Zen Garden for inspiration. Use that as a basis for learning about advanced CSS (Cascading Style Sheets) techniques, page layout, colour integration, and so on. They have links there for places you can steal from. Eric Meyer also has excellent ideas. A List Apart has excellent columns and tutorials.

Second, you talk about the alphabet soup of AJAX, XML, Perl, etc. This is web programming. It doesn't have anything to do with web design, it has everything to do with web content. I don't know about advanced web programming (I've done all mine in Perl, PHP, ASP, and ColdFusion, and those last two were five years ago). Others can chime in on that count.

Re:web design or web programming?

[nege]

The way I do things, there are several components to Web Development:

Document markup and design:
HTML: Used for document markup only!
CSS: Used to solve most display requirements

Content management / functionality:
Javascript: Client side DHTML (when you DONT want to refresh the page)
PHP: database interaction, web forms, etc.

The CSS links CanSpice points to are excellent resources. I think you should start there, regardless of wanting to learn a web programming language. Knowing CSS will benefit you to:

+ Start on the right path with web standards (as opposed to old HTML 4 sins that many webmasters commit to this day). HTML is NOT for display / design purposes, only for document markup.
+ Cross-browser functionality
+ Less code (you can usually do a lot more with a little css, compared to html)
+ Separation of design and code. You can keep all your css in an external stylesheet than can be updated independently of the site code.

As far as web programming, you basically have two sides:

1. Javascript
It is extremely useful for its DHTML capabilities. You can instantly move html elements around on a page and do some pretty powerful stuff with this. People hate it when they have to refresh a page for something as simple as sorting a table. This is where Javascript shines. Get started by learning the DOM (document object model). Keep in mind that each browser implements this model a little differently so you can consult each browser's documentation.

http://msdn.microsoft.com/library/default.asp?url= /workshop/author/dhtml/dhtml.asp (IE)
http://www.mozilla.org/docs/dom/domref/dom_shortIX .html (mozilla)
http://www.w3.org/TR/DOM-Level-2-Core/core.html (safari implements this)
www.brainjar.com (great for DHTML as well as CSS)

(by no means a complete list but you get the picture)

2. PHP.
YMMV, but I have found this to be one of the easiest languages to learn. Other contenders in this category include: ASP, ASP.NET, C#, Perl, ColdFusion just to name a few. PHP has a very low effort to learn and there are tons of resources on the web to help you. The Microsoft languages (.NET stuff) are pretty powerful too, but you mentioned this is mostly for hobby reasons so I would recommend going with something with an open license like PHP. ColdFusion is also extremely easy to learn, but your host may not support it (and you may not want to have to purchase the Macromedia IDE for it).

Some great PHP resources:
http://www.php.net/manual/en/
www.w3schools.com

Good luck!

Re:web design or web programming?

[Bogtha]

HTML 4 may be a standard, but there really isn't a standard way to parse it.

This is not true. HTML 4, being an SGML application, is parsed according to the rules set out in the international standard ISO 8879:1986. The HTML 4 specification lists this standard as a reference.

It's based upon XML, but is loose about a few of the fundamental rules.

Who told you that? It's completely wrong. HTML 4 is based upon SGML, a meta markup language that's been around since 1980 (or earlier, depending on how you look at it). SGML is a very complex specification, and a need for a simpler markup language was recognised. That led to the development of XML, which is a subset (an "application profile") of SGML. In no way is HTML based upon XML - in fact HTML is substantially older than XML.

The things that it allows you to get away with forces browsers to use a tag soup parser which can have unpredicable results.

This isn't true either. The things that force browsers to use tag soup parsers are forbidden by HTML's syntax rules too.

CSS first

[Will2k_is_here]

Based on your situation, study CSS first. Once you have HTML and CSS together, you can move onto javascript (a client-side programming language), or PHP (or ASP) a server-side language depending on what your needs are.

It really comes down to what you want to do

[jbarr]

For hobby pages, something like NVU or Word will give you simple pages with surprising power.

But you will probably better suited with installing a CMS like Joomla! which will give you functionality that a novice could never program. It may be overkill for a simple hobby page, but it will give you an excellent platform to build a successful, professional, feature-rich site.

In any case, bone up on HTML, PHP, and Javascript.

Oh, and get yourself a good text editor like UltraEdit to make those "quick fixes" a snap.

Web guides

[wanerious]

I was in your shoes, too --- just a smattering of HTML. I needed to create pages for my students and local sailing association, so I availed myself of Web Schools from W3C, which is pretty straight from the horses mouth, but no tricks or advanced techniques, and then studying layout like CSS Zen Garden and Boxes Tutorials. I tried to go XHTML 1.0 Strict, and validated my pages with the W3C validator, which gave useful feedback. (Don't look at my "home" page indicated by my ID --- it's just a stub). You're welcome to look at my amateurish example at my school home page. Good luck.

some tools

[kwench]

A true (X)HTML freak will probably use a sophisticated text editor (like EditPad for Windows, nedit, bluefish or even emacs for Linux...), but for beginners a tools like Dreamweaver or Mozilla Composer or its next version nvu might be a good place to start. With NVU / Mozilla Composer, if you need something special in your source, you can switch to source-edit-mode and change or insert it.

A big disadvantage of many hight-level tools is their inability to cope with PHP. (By the way, the parent is right to say that PHP is a much better beginner's choice, since it is not as cryptic in syntax.)

On the client's side, you might find javascript useful. With a HTML layout tool, PHP and javascript, you can probably do most pages.

Re:some tools

[Shaper_pmp]

"but for beginners a tools like Dreamweaver or Mozilla Composer or its next version nvu might be a good place to start."

No no no, no nono, nonono. ;-)

If you learn using a WYSIWYG editor you learn to use the editor - you don't learn to code websites. Learning to write code by hand is slightly more time-consuming while you're learning, but you're learning the skill you need to do the job, not learning how to instruct one of a selection of flaky, inconsistent, inefficient tools that, imperfectly, do the job for you.

"With NVU / Mozilla Composer, if you need something special in your source, you can switch to source-edit-mode and change or insert it."

Indeed. But how many users who learn using a WYSIWYG editor ever go on to properly learn the code that it writes for you? Almost none, comparatively - people are lazy.

Generalising wildly for a moment, I know two types of web designers: those who learned by hacking code, and those who learned by using Frontpage or HoTMetaL or Dreamweaver.

The ones who learned by writing code may subsequently use Dreamweaver or the like to quickly prototype pages, but they almost always end up dropping back into the code and optimising it by hand (especially with XHTML and semantic markup, which visually-oriented HTML editors almost by definition can't do for you).

The ones who learned by using an HTML editor use the editor, but it's because they find writing code difficult or frustrating, not generally through choice. It also means that when you want to do something unusual and you're forced to drop into the code-view, it's ten times harder because you aren't already familiar with the structure of the code in the way you would be if you'd written it yourself from first principles. And this is without even touching on the more advanced issues of bloated, tautological, machine-written code, or the undue influence on your design process of the visual angle over the semantic/navigational/informatics angles.

X/HTML isn't hard - it's not nearly as complicated as even the most basic programming language, and it doesn't come with all sorts of overhead and boilerplate code-cruft that makes using an IDE of any kind worthwhile (unlike, say, Java or Visual C++).

Short version: if a programming language requires three pages of boilerplate on every task, or you just want to get a job done quick 'n' dirty, use a visual editor.

If you want to learn a useful skill, and do the job right, use a text editor with syntax highlighting and a good reference resource.

Editors start you off quicker, but later on actively hamper your development into a coder. And by the time you've learned all the quirks and weird bits of a particular editor, I can guarantee you'll have less motivation to learn the actual stuff you need to know.

Random assortment of advice

[Bogtha]

You'll hear lots of people talking about how you should use XHTML. Ignore them. You'll hear lots of people talking about how you shouldn't use XHTML. Ignore them too.

There's little practical difference between the two languages. Browser support isn't quite there for XHTML, so the chances of there being any practical benefit to you using it are small. People will say that the added strictness will help you learn, but you aren't going to notice that strictness unless you serve it in a special way or validate, and you can validate HTML 4.01 just as you can with XHTML.

A much more important distinction to be made is the difference between Strict and Transitional. Transitional includes all kinds of old-fashioned crap that you shouldn't be using. You should use Strict.

After every edit to a document, run it through a validator. The W3C has free validators that you can use. If you do it this way, you will quickly notice when you are doing something wrong.

Ignore all the buzzwords like Ajax for now. Most buzzwords are things you can learn afterwards and use to enhance what you already know; you should learn the foundations first. You need to have a good working knowledge of HTML, CSS, URIs, and HTTP. Javascript, a server-side language and SQL will come in handy later; PHP is far from ideal, but it's easiest to get hosting with it. Same goes for MySQL.

Remember that the foundation for a website is its HTML. Everything else is an optional extra. Don't write Javascript that breaks things for non-Javascript users, write good alt attribute text so that people with images unavailable can read your pages, etc.

There's a hell of a lot to learn, but don't be intimidated, because most of it's simple, and most of it you can learn piece-by-piece.

Lurk on the relevant Usenet newsgroups: comp.infosystems.www.authoring.*, comp.lang.javascript, etc. Read their FAQs. Read the specifications for things like HTML, CSS, etc - they aren't that hard to read. Use Google before asking anybody anything. Ask smart questions.

When debugging something, save it to a temporary test page, and reduce it to the smallest amount of code possible that reproduces the bug. Nine times out of ten, you will find the bug by doing this. The rest of the time, you have a testcase to show people on the newsgroups.

Learn to hate Microsoft in advance. It saves time. You will wish you could travel back in time to kill Internet Explorer's dev team before they release it. It's that bad.

Not too hard

[Metasquares]

XHTML, CSS, and one server-side language (I like Perl, but use whatever you want) are really all that you need. You might benefit from some Javascript knowledge, but lack thereof won't kill you.

DO NOT hack up CSS unless you must. I've been developing websites, often professionally, for the last 10 years, and I have NOT ONCE needed to use a CSS hack because IE or some other browser is displaying something incorrectly. You can almost always fix these problems using standard XHTML + CSS without relying on hacks, and your code will be more robust as a result.

Browser tests in script are bad; check for functionality rather than a particular browser (quirksmode had a great article on this).

Remember that every new language/plugin that you use in a page shuts out certain groups. Use them where you must, but don't rely on fancy things such as flash for the core functionality of your website.

Use the right tool for the job, even if it's *gasp* a table or iframe. You'll be much faster than those trying to use some long and complex CSS to do something that you can do with a table, and the result will be indistinguishable (and will probably work on more browsers, since tables have been around for so long).

Re:a few random ramblings on places to start

[dslauson]

I think it's probably a good idea to have a few "JavaScript tricks" up your sleeve. After all, why make a round trip to the server when something can be done quicly on the client side?

A good web developer knows how and when to do something on the client side or the server side, and can make the two play nice with each other.

CSS and PHP

[vapspwi]

I'll just throw in my $0.02 with a lot of other posters and say that (X)HTML, CSS, and PHP is all you really need to know to do some really nice hobby-level pages (and even some pages you get paid to build - throw in some MySQL and you're really rolling).

I recommend using a good text editor (Textpad is the editor of choice at my workplace, for all sorts of coding, web and otherwise) to write your code. You'll learn a lot more (and end up with much better, cleaner code) being right down in the code instead of relying on some layout program that auto-generates code.

Just be prepared for an unbelievable amount of frustration when you start trying to do anything with CSS - every browser's implementation of CSS is broken (in different and incompatible ways), so even the simplest design you dream up will require a lot of hair pulling to actually implement so that it looks right in, say, IE and Firefox. That's far and away the worst, most frustrating part of building websites with CSS. If browsers implemented the specification consistently and correctly, CSS would be outstanding, but they don't, so it'll leave you a broken shell of a man.

JRjr

what do you really need

[hesaigo999ca]

It all depends, but I would say that first you need to think of what it is you
really want...start small....I want an intro page that has a bit of flash,
maybe some art work etc...then build from there, then I want a link of that
intro page that goes to an about us page...etc....

You need to figure out a workflow...so that once you have finished
a small step in the overall development, you can move on to the next one.

What techs to use, any really, you know nothing now, but 1 year of development
on your own asking questions searching on google etc...will make you a small time
pro real fast.
www.experts-exchange is one of the best places for novices to begin, if they get
stuck...then there is google if you are really good with their search
capability (hint.... " html form posting site:www.experts-exchange.com" in google will yield alot of results...)

Last but not least, actually should have been first, is do not panic!
Do you need it now...check sourceforge to see if they already have it....are you
under pressure, need this tomorrow...then check out www.rentacoder.com
if you want to learn on your own through making lots of mistakes and enjoying
yourself when you realize you just figured something out....then go to
www.w3school.com...for html,css,javascript etc...

I would suggest also cheating alot by using the view source code of your
favorite websites you want to duplicate, helps learn real quick how others
have done it!
Cheers....happy developing!

L.A.

Re:Oh wow, your isp AOL by any chance?

[MissingDividends]

Personally, I have to agree with everything you said.

I'm still a beginner in web design, but I have found that some people can design and some can't. Some people can write books on design, but can't do it worth crap, and vice versa, the same applies to teaching it. Some people go for what works (the KISS method); others work on making their components applicable to multiple projects (make a template and fill in content). I can make a website that does just about anything I want it to do, but I can't make it (or the markup) even look presentable. I have friends that can do fancy designing in CSS, but don't understand what simple PHP statements like "if(!isset($_POST['submit']))" checks for, or how to build a whole multi-page form in a single file.

To elaborate on what you said, I believe any person can be plotted on a graph.
As far as web design goes, I believe you can plot people on a graph with the x axis to be considered creativity and a y axis to be considered logic.

Everyone falls into quadrant I or along the positive x-axis/y-axis (I don't know anybody that has negative creativity or logic, do you?)...
(I'll go with simple equations for ease)
Just to clarify before we start, whenever I use the percent sign, I'm talking about percentile...

Anybody under the curve "y=10+(100/x)^2 {100>x>0}" should be considered hopeless in the world web design and programming.
(If you are less than 10% in creativity or logic, even if you are 99% in the other, you'll never get anything accomplished...if you are balanced logical or creative; you need to be at least 25% in both)

Anybody over the curve "y=60+(100/(x-50))^2 {100>x>50}" is extremely well suited for pretty much any aspect of web design and programming.
(They must be at least 65% in both... If they are as low as 65% in one, they are 99% in the other... if they are a completely balanced person; they will be 75% in each...)

Between the 2 lines is the area where everyone has the potential to be a good web designer, but very few actually pursue it... as you move from the first line to the second, the people become, in general, better web designers
Remember I'm talking about POTENTIAL, not actual skill; a very creative and logical person has the POTENTIAL to be a great web designer, but may lack interest or initiative...someone who isn't creative or logical doesn't have POTENTIAL, but they could become a web designer with some effort...