Slashdot Mirror
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?"
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.
Powered by Web3.5 RC 2
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.
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.
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.
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.
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.
Bogtha Bogtha Bogtha
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
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.
Grammar Lesson: you're is a contraction of "you are"; your means you possess something; yore means days gone by.