For those who don’t know the dirty little secret of designers, here it is … there are web designers and there are print designers. Rarely do the two specialties cross but it doesn’t have to be that way, great print designers can easily learn to be wonderful web designers without having to know a lot of coding and technical garbage.

First off, let’s be blunt and say the world of web design has changed a lot in the past few years so if your last attempt to build a website was five or six years ago, trust me … this is going to be painless. Building a website is made easier with Adobe Dreamweaver but there are still a few basics that you’ll need to understand before we get into the real world of web development. Before we begin let me be honest and tell you that I’m a stickler for Web Based Standards, follow the rules and nobody gets hurt, break the rules and you’ll spend the rest of your design career wishing you’d listened.

Building a website is broken into two distinct areas, first there’s Web Publishing and then there is Web Design. This of your website design software as Adobe InDesign, before you can design your amazing page layout you have to format your text. The web is really no different.

Web Publishing

To help us publish a new website, you’ll really only need to know a handful of codes and to be honest, Dreamweaver takes care of them all for you. The first code you should know is the <p> tag, it’s a paragraph and when you wrap the code around a bunch of text, the web browser knows that those words represent a paragraph. For example:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

That’s it, that’s the basic foundation for HTML. Now remember, if you’re using Dreamweaver the software will add the <p> tags on it’s own, you don’t have to add them unless you’re in code view (View > Code to see the code or View > Design to see the design).

If you want to force a line return in a desktop publishing application we use Shift-Enter and that will force a new line. Well in the wonderful world of HTML we have a similar command it’s <br />. Note the closing / in the code? It’s because <br></br> looks silly, so we combine the opening and closing of a tag into a single object, hence <br/>.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

Take note in the example above that HTML doesn’t care about the actual format of the code, <br /> will insert a line break when viewed in a web browser and it’ll ignore the code when viewing the code. Likewise, the code view doesn’t recognize breaks in the code, so the follow example means nothing to HTML:

<p>Lorem

ipsum dolor sit amet,
consectetuer adipiscing elit. <br />Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

So now you’ve learnt the first two critical tags of HTML. Remember, HTML isn’t about producing amazing graphics it’s about publishing documents to the web. These two tags may seem silly to a designer but to an information architect they’re the most powerful tools in the world.

Next up, we need a basic way to break up HTML into headings and indicated how important text is. For that, we turn to the mighty heading tag, in fact it’s so cool there are six of them. <h1><h2><h3><h4><h5><h6> each of which has a rather unremarkable closing tag, </h6></h5></h4></h3></h2></h1>. Using the proper heading tag outside of a paragraph will indicated how important your text is for both the audience and search engines such as Google.

<h1>My Great Text</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus.</p>

<h2>Less Important Text</h2>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

There you have it, the greatest secret in the universe … how to effectively publish web documents. Actually there are a few other things that you’ll need to know for example if you want to place emphases text and make it appear as an italic on the page, you’ll need to wrap the <em></em> tags around the words you want to effect. Bolding words is accomplished with the <strong></strong> tags, you’ll notice that I don’t use the <i> and <b> tags which the W3C has asked us very politely not to use any more.

Adding an image to your page is a little more complex, basically it’s the <img /> tag but you have to add an optional tag to it so the tag reads <img src=’???’> where the src (source) is equal to the path to your image. Adding a list is fairly easy, first you have to decide if you want an ordered list (numbered) in which case use the <ol></ol> tags or an unordered list (bullets) <ul></ul>. List items contained within the list, have to be wrapped in a <li></li> tag.

<h1>My Great Text</h1>

<p><img src=’path_to_file/filename.gif’>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus.</p>

<ul>
<li>Donec sed eros in felis dictum euismod.</li>
<li>Nunc quam orci, elementum molestie, porttitor eu, faucibus eget, quam. </li>
</ul>

<h2>Less Important Text</h2>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

<ol>
<li>Donec sed eros in felis dictum euismod.</li>
<li>Nunc quam orci, elementum molestie, porttitor eu, faucibus eget, quam. </li>
</ol>

I kid you not, that’s all there is to publishing HTML web content. Any graphic designer who can figure out how to use Quark or InDesign should be able to publish web content within an hour of starting.

Keep an eye out for my next piece, Web Design which will cover the secret art of Cascading Style Sheets (CSS) which turns your raw and ugly web content into stunning design while still complying to Web Standards.