Web design

It's not hard to create a website. You can make it one of two ways. The simplest is using a WYSIWYG (What You See Is What You Get) editor where you don't have to manually write the code that makes a website. The other way is doing just that, writing the code by hand, which gives you a lot more control, but is bit harder to learn.

Guess which method I'll be covering in this tutorial...

Please note: This tutorial is optimized to work best in an up-to-date browser. Preferably Internet Explorer 5+, Opera 5+ or Netscape Navigator 6+, but a level 4 browser will work fine as well.

The Basics

HTML is the language of choice on the Web. It's a universal mark-up language that allows the creation of complex pages that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used. All you need to create HTML is a simple text editor or word processor and a working knowledge of HTML. Lucky you that basic HTML is so easy.

All the information on a website is structured with the help of tags. These tags are just integrated into a text document and they can for instance dictate the size of text and how many times a sound on the page should be played.

All the tags combined make up the HTML-code that the web browser use to interpret the looks of a website and display it to the visitor.

The tags are made up of words with surrounded by angle brackets. Most are English words (such as <font>) or abbreviations (such as <p> for paragraph). Some tags dictate how the page will be formatted, others dictate text appearance or spacing and positioning. There are also invisible tags, that simply hold information about the page, but don't appear on the page itself.

For text you normally use tags telling the browser wheather it's body text or a heading. The element for a good-sized header is H2, the tag therefore looks as such <h2>.

Almost all elements must have a opening tag (<>) and a closing tag (</>), so the browser won't do any mistakes when it renders (interprets the HTML in) the page.

So if you wanted to use that good-sized header it might look something like this:

<h2>My homepage</h2>

This would in turn render as follows:

My homepage

Let's make an HTML page

A basic HTML page begins with the tag <html> and ends with </html>. It's also divided into two section, the header (enclosed by <head> and </head>), and the body (surrounded by <body> and </body>).

The header contains information about the page that won't be displayed in the browser. The body of an HTML document is where everything appearing on the page is contained.

More than enough talking about it already! Let's build a page shall we...

Fire up your text editor of choice (Windows users turn to Notepad please). If you're using a word processor, be sure that you're working in plain text or text only mode. Create a new document named whatever.html, "whatever" can be whatever you want. Never (ever, for any purpose) have blank spaces in your filenames, insert underscores (_) instead.

Then write the following:

<html> <head> <title>My first homepage</title> </head> <body> <h1>My first homepage!</h1> <p>This is my first attempt at writing HTML.</p> <p>Next thing you know I'll be a full-fledged web designer.</p> </body> </html>

Summer

As you can see enclosed in the <head> tags we have the title of the page, which appears in the bar across the top of your browser (the title of this page, as you can see, is "Yoki Productions' Web Design Basics").

Within the <body> tags is everything that will appear on the page. Which in our example will render close to something like this:

My first homepage!

This is my first attempt at writing HTML.

Next thing you know I'll be a full-fledged web designer.

You've probably guessed already that <h1> is the tag for a headline, the largest one in fact. You mark the beginning of each new paragraph of text with <p>, and although <p> doesn't have to be closed, we do recommend that you always close your HTML tags.

Now that wasn't so hard was it?

HTML is actually quite easy, especially since you can see other's HTML on the Web simply by viewing source. As you've noticed you don't need your own homepage either, you can simply save the HTML files to your local drive and open them in your browser.

Color and typeface

A homepage with just black boring text is not going to get many visitors, luckily it's quite easy to spruce up your content.

Just like in a basic word processor you're able add color, styles, and typefaces to your HTML text. WYSIWYG editors work almost exactly like a word processor. The only difference is that on the Web you can't use as many typefaces. This is due to the fact that people visiting your homepage might not have the same fonts as you installe on their computer. So it's more like recommending fonts than specifying them.

It is therefore important to stick to the most common fonts, that the majority of Web surfers have. The good news is that you can list more than one typeface, in order to get something similar to your wanted typeface for Windows, Mac and Unix users. Here are the safest lists:

sans-serif:

Arial, Helvetica, sans-serif
Verdana, Geneva, Arial, Helvetica, sans-serif
System, Chicago, sans-serif

serif:

'Times New Roman', Times, serif
Georgia, 'Times New Roman', Times,serif

monospace:

Courier New, Courier, monospace
Terminal, Monaco, monospace

To control typeface in basic HTML you use the <font> tag. The font tag has three commonly used attributes; family, color, and size. For instance:

<p><font family="Arial, Helvetica, sans-serif" color="#ff0000" size="5">My homepage</font></p>

Which in a browser will look like:

My homepage

So now you know how to list font families, please note how fonts with more than one word in their name have to be enclosed in single quotes.

Now for the other two attributes of the <font> tag. Size goes from 1 (smallest) to 7 (largest) with 3 being the default font size if none is specified. Color is specified using hex values (hexadecimal RGB values). Any good HTML editor comes with a color picker that translates colors into hex values for you. Hex values are always six digits and start with the pound sign (#).

It's also very simple to bold or italicize text: <b>will turn text bold</b> while <i>makes italics</i>.

In addition to breaking your text up into headings and paragraphs, you can also insert line breaks by using the <br> tag. The <br> tag does not have a corresponding closing tag. Be aware that some browsers skip multiple <br> tags in a row, so they do not replace <p> tags. A trick around this is nesting a <br> inside a <p>, and repeating until you have the desired white space.

Horisontal rules help to break up your documents as well, and are simply inserted using the <hr> tag.

Here's a list of some excellent HTML editors:

HomeSite - the cream of the crop for experienced Web designers and developers. This baby can do it all (including this tutorial). Unfortunately only available for Windows, but it's reason enough to give up on your Mac or Linux box.
CoffeeCup - another exclusive Win editor, much more basic than HomeSite, but in that regards much better for beginners too. I recommend starting with this one (you might even be so impressed that you never give up on it).
BBedit - I've heard that this is the editor of choice for the Mac, but as you can tell from how I'm selling my first two choices I've never even tried this one.
Topstyle - a cascading style sheet editor for Windows. It's also integrated with HomeSite, which makes it even more powerful. A great tool for writing style sheets.

Other resources:

HTMLib - A Windows application that's invaluable as a tool running side by side with your HTML editor. It's already incorporated into HomeSite, but in a rather clunky manner. This is a great reference tool.
Webmonkey - Once you're ready for the next step (and you should be right about now) look no further than Webmonkey. They have the best tutorials on the web on just about every aspect of Web Design/Developement.
webreview.com - Once you've exhausted Webmonkey, this is a good place to turn for a more in-depth look at the workings of the Web.
Aftonbladet IT - For the Swedes reading this, if you're a beginner at web design you should check out this link. They provide some excellent tutorials in Swedish.