Move mouse and panic

April 11, 2007 8:09 AM

"How to" write a web page. Easy advice for a n00b.

So I've bitten the bullet and borrowed an old copy of Dreamweaver Ultradev 4. What do I do now? I've searched, believe me I've searched and anywhere I search mentioning Dreamweaver takes me to books or pay tutorials. And anywhere I don't takes me to HTML, CSS Pearl,Ruby, Java whatever.
This place is full of helpful web savvy creators. Please point me to where to get started; hopefully to produce something not too revolting. Flash is not my friend. Out there somewhere is "A morans guide to web pages sub 101... How to for Idiots."

posted by adamvasco to computers & internet (14 answers total)

Here. Ditch Dreamweaver for the time being, it will all become clear soon enough.
posted by popcassady at 8:18 AM on April 11, 2007 [1 favorite]

As a complete n00b myself many years ago (before n00bs were even n00bs), I used this tutorial, which teaches teachers how to make a web page about volcanoes. I followed all the steps and made my own web page about volcanoes. Then I made one about all about me, which was better than anything on Geocities at the time, and impressed all my computer geek friends (I could do columns!). Then I sent the link to my sister and she made a page about monkeys.

My web skills have not progressed beyond that, so I've no idea if what it teaches you is any good or not any more. Things have changed in the big wide internet.

My little sister progressed from making pages about monkeys, to making pages for other people for money, so it definately helped someone.
posted by Helga-woo at 8:24 AM on April 11, 2007

I agree about ditching Dreamweaver. The learning curve is too steep for a n00b.

Start with the basics of HTML. Work up from there.
posted by desjardins at 8:28 AM on April 11, 2007

Forget Dreamweaver. And I've never found w3schools all that helpful. In fact, and maybe I shouldn't admit this, but you know what I like to use for a totally 100% fresh from-the-ground-up my-brain-is-a-blank-slate introduction to almost any topic? For Dummies books. Read like the first 3 chapters, skim the rest and then use what you learned zero in on exactly the book you are really looking for.
posted by DU at 8:31 AM on April 11, 2007

Over a decade ago, there was a post to one of the Usenet www groups with no text inside, and a subject line along the lines of

No more stupid questions! VIEW SOURCE to see how it's done!

Still good advice, in spite of the truckloads of unnecessary frills (qv "CSS Pearl, Ruby, Java whatever") in web pagery these days. Find a nice-looking page that says "Last updated: 1998," and peek; it may help figure stuff out.

2nding desjardins.
posted by kmennie at 8:37 AM on April 11, 2007

I don't have a helpful suggestion, but I'd srongly advise AGAINST the tutorial in Helga-woo's comment. It may have been good back before n00bs were n00bs, but it incorporates a lot of things that have become obsolete and/or are generally agreed to be bad practices (the font tag, frames, etc.).

I wonder- would it be easier for someone starting from scratch to learn via CSS? You just need to grok the box model, and you're not stuck with having to keep track of all that nesting.
posted by mkultra at 8:40 AM on April 11, 2007

adam, I can't quite tell if you just want to be able to dash off a page ASAP or if you really want to learn how to "write a webpage".

If it's the former, I fear I have no insight to Dreamweaver, having tossed it out many moons ago when I found I could make web pages faster & cleaner with Notepad.

If it's the latter, I would suggest ditching Dreamweaver for the time being and bite the bullet when it comes to learning HTML & CSS. Think of the former as the bones of a web page and the latter as the window dressing.

As stated in the wikipedia link, HTML is a markup language. That means it takes text and, well, marks it up with information about that text. The closest analogy I can think of when describing correctly structured HTML is that it's like the outlines your teachers would make you do before writing an essay. ie:

Title: What I did for summer vacation
I. Went to camp
a. snogged the crafts counselor
II. Went to the beach
a. snogged the life guard
etc.

CSS takes that structure and makes it purdy. It tells the browser "I want the heading in section I. to be blue, 10 feet high and in italics"

In theory anyway - thanks to different browsers not adhering to proposed standards, CSS is the more difficult part only for the fact that you'll have to tweak, hack, and rip your hair out occassionally trying to make things look the same for all browsers.

But let's not jump the gun and discourage ourselves. Back to learning the basics...

To this effect, I fondly remember HTML Goodies when I first began tinkering with web pages those many moons ago. It has sections on CSS as well, though I haven't skimmed very thourghly to see just how up to date they are.

W3schools is also invaluable for both HTML & CSS, though drier. The big bonus here is that you can try out examples in your browser.

Right clicking on a web page and selectging 'View Source' will also help you learn how somebody did X on page Y.

Pearl, Ruby & Java you can worry about way down the road when/if you finally decide to try your hand at a programming language.

And on preview, what everyone else has said while I was typing slowly.
posted by romakimmy at 8:57 AM on April 11, 2007 [1 favorite]

Is your goal to just get something up on the web, or to learn how to code HTML?

If the former, you can use a content management system, meaning you don't need to actually write any HTML. You just go to a special admin web page and start typing. CMSs can be complex beasts, but they can also be simple. You can set one up at a hosted service like Wordpress.com (there are many others) or get your own web-hosting account and get it going there. Wordpress.com unsurprisingly uses the Wordpress blog engine, but it can also be used for setting up standalone pages. Or both.

If the latter, here's a really basic intro to HTML with some links to more advanced (but still pretty basic) concepts. It's a little dated, but still basically valid. Here's another even more basic introduction that covers things like "why do I have to save as text?" Here's another that looks to be more up to date and structured a little better.
posted by adamrice at 8:58 AM on April 11, 2007

I've had really good luck with the books from sitepoint.com
posted by Wild_Eep at 9:04 AM on April 11, 2007

For a non technical person, kmennie's advice is not only a bit rude, but also not helpful.

No layperson is going to understand anything from viewing the source of any modern webpage that has a lot of layout elements, especially without knowing to also view the CSS source. All that's going to happen is they'll be intimidated and give up.

A good question would be do you want to really know HTML, or do you want to create one site as a one time deal and it doesn't have to look super professional?

If the answer is the latter, then you're best off finding a decent what-you-see-is-what-you-get editor and whipping something together. I haven't used Dreamweaver so I'm not sure how hard it is to use. However, googling for free wysiwyg html should yield you some results on free editors that are basically similar to Microsoft Word in how they work.

If you're looking to make slick, great looking sites and continue doing web stuff after your first one, your best bet is going to be to learn HTML and CSS (Cascading Style Sheets). For that, you should definitely check out the tutorials mentioned in answers above. Once you have a basic understanding, I find that blooberry has great reference pages on html and css
posted by twiggy at 9:12 AM on April 11, 2007 [1 favorite]

It wasn't written in 1998, but my web page is pretty basic when it comes to HTML. I mean, like, really basic. You can view it through my profile. And, yes, I realize I didn't put out a family Christmas letter this year. :/
posted by Doohickie at 9:21 AM on April 11, 2007

If you can use Microsoft Word, then you will easily be able to use NVU. It's a free, open source web design application. It's so simple and FREE! I don't know how to write HTML or use DreamWeaver. I figured out NVU by myself in an hour.
posted by HotPatatta at 10:02 AM on April 11, 2007

You can write a simple text document in Notepad, use very simple HTML for Bold, Underline Italic, and paragraphs. Add a picture of you, in your basement, with your computer, and you have a web page circa 1993. You have to learn how to use FTP to put the page, and any picture(s) on a server that is available via the Web. That sounds snarkier than intended; I quite like those old homepages.

The more sophisticated, beautiful, complicated it is, or the more work you want it to do, like submitting forms, or integrating with a database, the more difficult it will be and the more training you need.
posted by theora55 at 10:45 AM on April 11, 2007

For the "just want to put some pages on the web" option, Google Pages is one of the easier online tools. You can use a simple interface to write your pages, and they're available online instantly.
posted by mbrubeck at 1:32 PM on April 11, 2007