NVU From Scratch


  1. Introduction
    1. My Background
    2. What Does This Have To Do With Me?
  2. The Technology of Web Design
    1. The Importance of "Clean" HTML
    2. Tables and Div Blocks
    3. Putting an "X" in your HTML
  3. Can We Start Yet?
    1. Your First Page
    2. A Picture is Worth 1000 Words
    3. NVU Has Style


If you are not interested in leaning my reasons for writing this document you probably should just skip along to the section on The Technology of Web Design. If you just want to fire up NVU and start typing then feel free to jump clear ahead to Can We Start Yet? If you find this Introductory bit to be stilted and boring don't say that I didn't warn you.

My Background

As far as I am concerned the perfect tool for just about any job involving text is the fantastic Emacs Text Editor. I've been using it forever now, and I am constantly amazed by hidden functionality that I never knew existed. Emacs has an intelligent mode for editing just about any kind of text you can think of, and it is easy to add new features to Emacs by writing your own Emacs-Lisp programs. Every couple of years I toy around with using some other tool to get my work done, but I still live in a very text-heavy world, and when it comes to text Emacs is really really hard to beat.

The problem with Emacs is that it is not particularly newbie friendly. Part of that lies in the fact that Emacs has predates nearly all of the software that most people use these days. Heck, it was originally written before the personal computer was invented (not to mention software like Windows, or even DOS), and because of it's past Emacs doesn't conform to the software practices that most users are familiar with. Even simple tasks like cutting and pasting text require that you actually read the instructions. In short, Emacs is ridiculously powerful, but unleashing that power requires a fairly substantial investment of time. Most people simply aren't interested in that sort of trade off. They would happily accept a somewhat less powerful tool in exchange for something that is easier to learn.

What Does This Have To Do With Me?

It used to be that the only people that cared about the development tools that I used were my co workers. Many of these folks even felt the same way about text editors (although some of these heathens believed that some other text editor like vi, jedit, or even nano, was the one true text editor). Sure, every once in a while a family member, or a friend, would ask for some help creating a web page. I would boldly begin talking about terms like markup and the basics of creating HTML by hand and the enquiries would soon cease. Eventually my loved ones would type something up in their word processor of choice, export the results to HTML, and live with the ugly output. Everyone was happy. Or at least I was happy, and that's really what I was aiming for.

However, I recently took a job at Hosting Solutions, and all of a sudden teaching people how to create HTML was part of my jobs description. Actually that's not entirely true. I don't really need to teach people to create web pages. Instead I simply have to help people when they choose a completely ridiculous tool and use it to create their new web site. I generally only deal with the really sticky issues, but that still meant that once (or sometimes twice) a day I found myself on the phone with someone that had designed a really cool site in Microsoft PowerPoint or Microsoft Publisher and now they wanted to turn their creation into HTML.

Now, don't get me wrong. I actually like helping people out. I simply would like it even better if they didn't get into trouble in the first place.

My buddies that answer our technical support phones really like a program with the unfortunate name of Web Dwarf, but I have a real problem with the fact that it stores all of your work in some crazy binary file and then forces you to export to HTML. In my opinion that sort of thing is just wrong. HTML is a perfectly good text-based format. I simply have a hard time hiding all of that text-based goodness in some other crazy format.

So I decided to see if I couldn't meet the newbie halfway and find some HTML design tools that were both functional and easy to use. What's more, the tool had to be inexpensive, and it got serious bonus points if it was Free Software. After a bit of a search I believe that I have found a tool that could make everyone happy. I am not planning on giving up on Emacs any time soon, but even I will probably use this new tool for the early stages of design work where the job is more about visualization than it is about moving around text.

What magical tool is it that I found? The name of the tool is NVU, pronounced N-View, and while the name clearly shows that the NVU team is short on marketing personnel the feature list shows that the NVU guys have plenty of engineering moxie.

The Technology of Web Design

Chances are good that you have actually created a web page or two and are somewhat dissatisfied with the results. How do I know this? Elementary! Most people tend to dive into tasks without bothering to read instructions. It is only after these initial attempts have failed that people start looking around for instructions, how to guides, or start seeking the advice of experts. This phenomenon explains why there are so many tools out there that promise to allow neophytes the ability to quickly and easily create web pages without having to learn HTML. That's what most people actually want. They don't want to read the instructions, and they certainly don't want to learn to code HTML by hand. In fact, the primary advantage over NVU and other HTML editors of its type is that NVU also includes powerful tools that can be used by folks that know and understand HTML markup. Essentially NVU is a tool that not only can get you started writing web pages, it is also a tool that you can grow into.

The Importance of Clean HTML

Most folks that are new to web design could not care less what sort of HTML their tool spits out. If the design looks good in their editor, then it is good enough for them. The problem with this sort of thinking is twofold. First of all eventually you are going to be required to manually insert a bit of HTML code in the right place. Perhaps it is some sort of ad code, or it might be a cool new Javascript tool that will make your web pages that much more functional. Second of all complicated HTML code is hard to debug. Just because your site looks good in your editor doesn't necessarily mean that it looks good in the half dozen or so different web browsers that are currently in heavy use. The cleaner and simpler the code that your editor generates the more likely you are to create a site that looks good no matter what browser your audience uses.

Whatever the reason eventually you'll want to actually wade around in the HTML code that your editor has created. You'd much rather see something like:

	    <h2><a name="Introduction">Introduction</a></h2>
	    <p>If you are <em>not</em> interested in leaning my
	      reasons for writing this document you probably should
	      just skip along to the section
	      on <a href="#design101">The Technology of Web
	      Design</a>.  If you just want to fire...</p>

than some of the horrors that I see generated by some of the more sloppy tools. The good news is that most of the more popular modern tools actually do a pretty good job. Even Microsoft's tools have made great strides. In my opinion

Tables and Div Blocks

Once upon a time, when the web was new, a horde of designers and marketing professionals descended on the fledgling media form and were appalled by what they saw. Early web pages were spartan in the extreme, barely supporting graphics at all, much less complex layouts. If you are using a web browser that allows you to turn off styles (like Firefox) then you can be reminded of those days by turning off styles on this page. The resulting page is still easy to read, but it definitely has less visual appeal. The folks who had created the early web pages were actually proud of this simple elegance as it allowed them to mark up their pages with tags that told the computer what each element of the page represented and then let the web browser worry about the presentation. Your computer could tell you all sorts of neat things about these early web documents because the markup provided subtle clues as to which bits were most important and which bits were merely supportive. This phenomenon was called semantic markup, and computer nerds the world over still get excited about the promise that self-describing documents could theoretically deliver.

Unfortunately, early web browsers were not particularly good at turning an understanding of the basic structure of the document into documents that looked like they were worth reading.

Putting an X in your HTML

Can We Start Yet?

Your First Page

A Picture is Worth 1000 Words

NVU Has Style

Valid XHTML 1.0 Transitional