The Webmaster's Workshop

Before you open the editor

You need exactly two things you almost certainly already have: a plain text editor (the plainer the better, resist the fancy ones for now) and a web browser to look at your work. Type your page, save it with a name ending in .html, then open that file in the browser. Change something, save, and press reload. That loop, type, save, reload, is the whole job.

A tip that will save you an afternoon: save early and save often, and keep every file for one page in the same folder. Browsers are fussy about spelling and about where things live.

Lesson 1 · Tags 101

A tag is just a word wrapped in angle brackets, like <p>. Most tags come as a pair: an opening tag and a matching closing tag with a slash in it, like <p> and </p>. The opening tag, the closing tag, and everything between them is called an element. You wrap your text in elements to tell the browser what it is: a paragraph, a heading, a bit of bold.

Here is the same little sentence two ways. Read the Markup tab to see what you type, then click Result to see what the browser draws.

<p>This sentence is <b>bold</b>, and
this word is in <i>italics</i>.</p>

See how <b>bold</b> turned into bold? You opened the element, put your text inside, and closed it again. Forget the closing slash and the browser will happily bold the rest of your page, a rite of passage we have all been through.

^ Top

Lesson 2 · Text & colours

Headings run from <h1> (the big one, use it once) down to <h6>. Paragraphs go in <p>. That is most of what you need to write a whole page. Type your words, wrap the important ones in <b> or <em>, and let the browser handle the spacing.

<h2>My favourite films</h2>
<p>Here they are, <b>in order</b>.</p>
<p>Some words feel <em>important</em>.</p>

Sizes are worth a word. The Workshop sticks to seven honest text sizes and no more, so a page never turns into a ransom note:

Big and friendly.

Small print for the fine details.

About colour: pick from the 216 “web-safe” shades and every visitor sees the same page, even on a screen that only shows 256 colours. The Workshop keeps you inside that palette on purpose, your page will look right on your friend's ageing PC too.

^ Top

Lesson 3 · Links

Links are what makes it the Web. The tag is <a>, for “anchor”, and the important part is the href attribute, short for hypertext reference, which is a grand way of saying “where this link goes”. Put a full address for another site, a file name for a page in your own folder, or a mailto: address to open the visitor's mail program.

<a href="http://www.example.com/">
  visit my friend's page</a>

<a href="mailto:you@example.com">
  send me e-mail</a>

A link you have already clicked turns purple, that is the browser being helpful, not a mistake. Whole pages used to be nothing but a tidy list of links to other people's sites. Yours can be too.

^ Top

Lesson 4 · Lists

When you have a handful of things to name, use a list. Wrap the whole lot in <ul> for a plain bulleted list (or <ol> if the order matters and you want numbers), and wrap each item in <li>.

<ul>
  <li>bread</li>
  <li>milk</li>
  <li>a fresh box of floppy disks</li>
</ul>

The browser draws the bullets and lines things up for you. Here is that very list, dressed in the Workshop's pixel bullets:

• bread
• milk
• a fresh box of floppy disks

^ Top

Lesson 5 · Tables

A table is a grid of rows and cells. You build it row by row: <tr> starts a row, <th> is a heading cell (the browser makes it bold), and <td> is an ordinary data cell. Nest them carefully and mind your closing tags, tables are where a forgotten </td> comes back to bite you.

<table>
  <tr>
    <th>Game</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>Star Quest 3D</td>
    <td>1998</td>
  </tr>
</table>

A confession from the old days: we used tables to lay out whole pages, sidebars and all. It worked, but it tangled fast. Keep tables for real grids of data, like the one above, and your pages stay tidy and easy to read aloud.

^ Top

Lesson 6 · Images

Pictures go in with <img>, one of the few tags that stands alone with no closing partner. The src attribute names the file; put the picture in the same folder as your page to keep life simple. Always add width and height so the page can hold the space while the picture loads over a slow line.

<img src="house.gif"
     width="96" height="96"
     alt="a little pixel house">

Never skip that alt text. It is the words shown when the picture cannot load, and the words read aloud to a visitor who cannot see it. Write what the picture is, in a few plain words. Here is our example, drawn pixel by pixel:

Rule of thumb: photographs go in a .jpeg file; flat drawings, buttons and logos go in a .gif. Keep them small, every kilobyte is a second of your visitor's afternoon.

^ Top

Lesson 7 · Forms

A form is how a visitor talks back, a guestbook, a poll, a search box. Wrap the whole thing in <form>. Each box is an <input> or a <textarea>, and, this part matters, every box gets a <label> tied to it. Match the label's for to the field's id and a click on the words jumps into the box; a screen reader announces it too.

<form>
  <label for="nm">Name:</label>
  <input id="nm" type="text">

  <label for="msg">Message:</label>
  <textarea id="msg"></textarea>

  <button>Sign it</button>
</form>

And here is a real one to try. It is only for practice, it does not send anywhere, because catching a form needs a little program on the server, which is a lesson for another day.

^ Top

Lesson 8 · Frames

Frames split the browser window into panes, each showing its own page. The classic trick is a narrow menu on the left that never moves while the pages come and go on the right. Instead of a <body>, a frames page has a <frameset> that carves up the window and points each pane at a file.

<frameset cols="150,*">
  <frame src="menu.html">
  <frame src="main.html">
</frameset>

The cols="150,*" means “a menu 150 pixels wide, and the rest of the window for everything else”. Two files, one tidy layout.

Fair warning: frames muddle the Back button and make pages hard to bookmark, so many webmasters are quietly retiring them. If you want the look without the trouble, the Workshop's own layout tools give you a menu that stays put while the page scrolls with none of the headaches. Learn frames so you can read old pages, then reach for the modern version.

^ Top

Grab my graphics

Every homepage needs a little sparkle. Here are three tins of free goodies from the workbench, bullets, divider lines, and link buttons. Take what you like for your own page; a link back to the Workshop is thanks enough.

A little glossary

New words pile up fast. Here are the ones you will keep bumping into, in plain language.

Questions I get a lot

Click a question to open the answer.

Where to go next

That is the whole beginner course, you can now hand-build a real page. When you are ready, the next courses cover styling your page with a little CSS, and drawing your own animated buttons. They are on the workbench now:

Start the lessons again

Sign my guestbook

Made it all the way to the bottom? Then you are exactly the sort of visitor a webmaster hopes for. Leave a note, say where you are writing from, and tell me what you are building. Every homepage deserves a guestbook, and mine gets lonely.

Sign my guestbook →

The Homebrew HTML webring

The Workshop belongs to a ring of pages by people who still build the Web by hand. Follow the ring and you will find a hundred more homepages just like this one, some polished, some gloriously not. If you keep a hand-coded page, you are welcome to join.