How to Write Web Pages There are many guides to writing web pages. Most of them go into more detail than this one. This one tries to be simple. You can look at other guides for more detail (see the end for suggestions) and all the clever tricks you might want to do later. This guide is different because it does the bare minimum to set up the example, then gives 2 basic rules and 1 exception early on, which are used to complete your example. This one explains the grammar as soon as possible, while most guides seem to concentrate on vocabulary. It's a different approach. As far as I can tell, many guides are wrong and that means that most web pages are incorrect, which means that they are broken for some people. I don't think people want to produce broken web pages. This guide tries to be right in the little it tells you and tries to tell you enough so that you can spot errors in other guides you use later. You can find the latest edition of this guide online at http://mjr.towers.org.uk/writing/webpages.html Lots of guides tell you to use a particular program. For this one, you only need a text editor or notepad. If you learn the basics now, you'll find it easier to tell good fancy tools and bad ones apart when you want to start using them. Start Writing Your Example Page First, write your web page as a text file, in a simple text editor such as Notepad or Emacs (not a word processor). Put notes (maybe IN CAPITALS) for where important pictures should go. Other than that, don't worry too much about the design yet. Write the main page text first. Put its title on a line by itself at the start. Save it to a file whose name ends .html (which stands for HyperText Markup Language... more on that soon). Congratulations, you've just made your first web page! Start a web browser and open the file in it. Unfortunately, while your text is there, it's all run together and probably looks nothing like your original. That's because web browsers usually display line breaks, paragraph breaks, tabs and spaces all as just a single space. The instructions on when to display things like a paragraph break are special "markup" codes in the file. The Rules/Grammar The "markup" for web pages is usually html and the latest popular version of it is xhtml 1.0 (the previous one was html 4.01). It's good to learn xhtml first because it has a few easy common rules and few exceptions to them. Rule 1: Markup looks like
, or > The codes are contained within angle brackets, or less-than and greater-than. The code - called a tag - can be a single word like
, or a word followed by some settings: If you want to include angle brackets in your text, use the codes < and > instead. If you want to write an ampersand, put & instead. These &-codes are called entities. Rule 2: Markup Should Mark Something Markup is used to mark text. It tells the browser something about it, or puts a particular display effect on it, or both. To mark text, a word tag is put at the start and a /word tag is put at the end. For example, to mark your entire text as xhtml, put at the start of it and at the end. The first is the opening tag and the second is the closing tag. The opening tag has a setting (and closing tags can't have settings) which basically says what html you're using. The closing tells the browser where the html ends. All tags come in pairs, BUT Exception 1: Self-closing Markup Putting a mark on the page can be done with entities (the &-codes) or with tags that finish with a / immediately before the greater-than, sort of self-closing. If you put
in your file (try it now!) and reload it in your web browser, that will put a line across the page at that point: a horizontal rule. You don't need any more closing for tags finishing / or for entities. On with the Show! That's about it for rules. There are a few more exceptions which you might discover later, but they're not important for now. Now, fix your web page's display by adding markup codes in the text file. If you followed the suggestions in Rule 2, you'll already have html tags around the whole text. Next, mark the page body by putting and around everything apart from your page's title. Add "title" tags around the page's title in a similar way and then put "head" tags around the outside of the title ones. Finally, make sure any angle brackets or ampersands in the main text are replaced with the appropriate &-codes from Rule 1. Reload it in the browser. Probably the only noticeable change will be that the page title has gone to the window's title bar, but we've now got the basics of the markup. At least, it shouldn't look any worse and you shouldn't see extra words in there. Move back to the text editor and put

and

around every paragraph (ignore any headings for now) and save again. Reload in the browser and you should see your text in paragraphs again. Then, put

and

around the headings, save and reload. Now they should stand out from the main text. If you like (and most people seem to), copy your title text into the start of the body and put

and

around it instead of and . You can use h1 (heading 1 - largest) to h6 for different levels of importance. If you'd like to make some words a link to another page (popular on the web), put "a" tags around it. In the opening tag, put an href setting with the web address you want the link to take people to. A setting is just a single word followed by an equals and something between quote marks. For example, you could link to this page with: A guide that I used to start writing web pages. (If you do, let me know when your page is online and I'll link to it.) Finally, you can add pictures by saving the picture file to the same folder as your web page (.jpg files for photographs and .png for other artwork are the best choices, for now) and using a self-closing "img" tag with a src setting of the filename. For example, I use: Some raw food [F] to display a picture of some peppers. The other settings display ALTernative text for users without graphics (yes, there are some) and tell the browser the size of the picture so it can leave space for it if my site is too slow just then. Don't use height and width settings to make pictures smaller, because it will look uglier and often be a bigger file than needed. Use a paint package (GIMP is free software). Does your page look better yet? Are you dizzy yet? I think the biggest part of learning any language, even markup language, is the vocab, the tags. It may help to keep your notes of new tags visible. I still do. Keep Learning Dave Raggett has set of guides on the W3C site at http://www.w3.org/MarkUp/Guide/ - you should read these because the W3 Consortium (W3C) produce the xhtml standards, so they are normally correct. It takes a vocabulary-first approach and goes further than this guide. http://www.w3.org/MarkUp/#tutorials lists other tutorials they like. http://www.w3schools.org/ covers more material, but some is old or non-standard, so be a little cautious.