How To Write Web Pages

Web pages can be written in a number of ways, but the best way to get started is to use a simple text editor and to write all your own HTML tags. HTML stands for Hypertext Markup Language, though in reality it's just a system of tags which you can put round data to indicate what kind of data is present, and the tags then tell the browser how to display the data. Lesson One (click on this link) is a simple Web page which shows you how to get going. At first sight the business of inserting all these tags into a document seems to be rather a lot of work for very little obvious gain, but the point of it will soon become clear. Lesson one introduces the following tags: <html>, </html>, <head>, </head>, <body>, </body>, <title>, </title>, <center>, </center>, <h1>, </h1>, <p>, and </p>. It also introduced the idea of inserting style="font-family:arial,helvetica,sans-serif; font-size:18pt" into a <body> tag (though you can also put it inside a <p> tag if you want to set a specific style for a single paragraph), and it introduced the non-breaking space: &nbsp;.

Lesson Two introduces the hyperlink, the piece of code which allows one Web page to link to another. The code for this takes the form: <a href="pagename.html">visible-name-for-link</a>. It also shows you how to make the colour of the link remain fixed by inserting some extra code into the tag: <a href="name-of-page.html" style="color:red">. Make sure you use the American spelling "color" rather than the English "colour". You can make internal links (to different places within the same page) by creating a named point in a page such as <a name="here"/> and using the code <a href="#here">visible-name-for-link</a> to create a link to it. If linking to that same point from a different page of your Web site, you will need to use linking code such as <a href="pagename.html#here">visible-name-for-link</a>.
You are now ready to try to create your own set of linked Web pages, but you'll want to start out doing this entirely within your computer rather than on the Internet. The first step you need to take is to create a new folder to hold your Web pages: call it "My web site". Create this folder next to or inside some other folder which you normally use and know how to find easily. Then come back here, preferably using Internet Explorer or Opera as it will make things an awful lot easier for you. The next step is to go into the source code of the Lesson Two page. You must then save it, but I want you to do so by clicking on "file" and then "Save as" (Chrome doesn't appear to let you do this at all, so you'll have to use a different browser). You will be given a menu which allows you to change the name of the file, so make it "index.html" (because this is the name which is normally given to the home page of a Web site), but before you click on save, make sure that you have also selected the folder that you have just created so that it is saved into that folder rather than just disappearing into a black hole. Click the save button and then close the window showing the source code.
Look in your new folder to see if the file "index.html" has successfully been saved into it. If it is there, click on it (double click if you're using Windows) to open it. If it didn't work, start again and make sure that you really are selecting the right folder for index.html to be saved into. Assuming you can get that to work, your next task is to go into the source code of index.html - you've done this before so it should be easy, but there are complications. If you're using an old version of Internet Explorer you will find that you are viewing the source code using a text editor called Notepad, but newer versions of Internet Explorer send you into a source viewer instead and it doesn't allow you to edit the content, so you have take an alternative route to get to Notepad: go to the "file" menu where you'll find the otion to "edit with Notepad". Once there, you'll be able to edit the content of the file. If you're using Opera you'll find that its text viewer allows you to edit the file just like notepad, but the text viewers of Firefox and Safari do not allow you to change the content at all, so you would do well to switch browser right now (though there are ways of getting at the source using Notepad - you can find the file in your "My web site" folder and right-click on it before selecting "open with" and selecting Notepad, or you can open Notepad, click on "file" and hunt for the file in the "My web site" folder from there). There must be a text editor on the Mac which can be used instead of Notepad, so you may be able to find it by right-clicking on the file in your "My web site" folder and then trying "open with". If that doesn't work, see if you can install Opera on the Mac, because that would make things a lot easier for you. Anyway, assuming that you can find a way to get at the source through one of the above methods, you can now try deleting some of the original content and adding your own words in its place, then you can save the modified document by one of the following methods: if you're using Notepad, just click on "file" followed by "save" (or hold down the "Ctrl" key and type "s"); while if you're using Opera's source editor you simply click on "Apply Changes" at the top.
Clicking on the "refresh" or "reload" button in the top of the browser window (usually next to the "stop" symbol) will then show the result of the changes, though you don't need to bother doing that with Opera as clicking "Apply Changes does this automatically at the same time as it saves the modified file, so all you have to do is click on the appropriate tab to see the result. The Opera source viewer highlights all your html tags in blue, so it's usually more user-friendly than Notepad for writing Web pages. It does have an occasional defect where clicking on "apply changes" can jump you back to the top of the page and force you to hunt for your place from scratch, so if it gets stuck in that mode for a while you may want to click on "save" instead of "apply changes" and check carefully that the right folder is selected, then add .html to the filename before saving, and then go back to the browser and click the refresh button. I actually tend to use Internet Explorer, Firefox and Opera at the same time, using Notepad or Opera's source viewer to write and modify my code, and Firefox's source viewer to look for errors in it. I then make sure my pages display properly when viewed from all three of these browsers (plus Chrome and Safari at a later stage, though anything that works with the first three usually works on the last two without difficulty).
If you go into the source code again and do another "Save as" (if you're using Opera you should click on "save" this time instead of "apply changes"), you can change the name to create a second file in the same folder without losing the first one: you can give it any name you fancy, but make sure the name ends in .html so that it isn't just stored as an ordinary text file (a little box underneath may promise to make it a .html file for you, but it never keeps its promise). Once you have a second Web page you should be able to write hyperlinks to take you from one to the other, and once you have mastered this, you will be able to create as many pages as you like and to link them together in as many ways as you fancy. It is a good idea to create a desktop shortcut to your index.html file so that you can get into it quickly: you do this in Windows by finding the file in its folder and right clicking on it, then you just click on "send to" and "desktop". Well, that's all the awkward stuff out of the way, so we can now concentrate on the business of writing html.

HTML allows you to include photographs and diagrams in a page simply by using a special tag to name the image file. Lesson Three illustrates how this is done, a typical tag being something like: <img src="name-of-photo.jpg" height=260 width=360 alt="text to describe photo">. You can write tags like this into your own Web pages to display your own photos, but for the photos to appear you must copy them into the same folder as your Web pages. Diagrams of the .gif format can be displayed in the same way as photos. To use an image as a hyperlink, you need to use the following html: <a href="filename-to-link-to.html"><img src="photo-file-name.jpg" height=260 width=360 alt="Description of photo"></a>. To put photos and text side by side you can add the following code into the <img> tag: style="float: left; margin: .5em".

There are programs which allow you to write Web pages without ever having to write any html tags yourself, but they tend to make a mess in the source code which results in the file being much bigger than necessary, and that can make your Web site significantly more expensive to run: if your site becomes popular you may run into the problem of having it disappear from the Web if it exceeds its monthly upload limit, and the uploading limit for free Web-hosting is very low. You can increase the upload limit if you are prepared to pay a monthly fee, but it may be possible to avoid this by redesigning your site so that visitors can tell more easily which pages won't be of interest to them before they download them: try to make it clear what kind of content each link will lead to. If your site includes photos, make sure that the high-resolution versions only appear if someone bothers to click on small, low-resolution versions of the same pictures: they can then judge how much they really want to download each image before clicking on it. If they have a slow connection to the Web, it will also save them a great deal of time.
If you run a very popular Web site it can become extremely expensive: this Web site is intended to be visited by millions of people every day, and if each one of them downloads just a megabyte on each visit, then that's thousands of Gigabytes of data every day. It won't surprise me if the Web-hosting costs eventually reach a million pounds a year (Wikipedia costs four of five million pounds a year to run, and most of that is Web-hosting costs). Of course, if a Web site becomes hugely popular, it is likely to become attractive to advertisers, and so the advertising should be able to cover the costs no matter how high they go, though advertising can spoil the look of a Web site if it is not controlled carefully. If you're worried that your own Web site may become too popular and that you won't be able to find advertisers to cover the costs, make sure that your Web site is hosted by a company which simply replaces your site with a "bandwidth limit exceded" notice rather than sending you an unexpectedly large bill: if too many visitors come to your Web site it will then disappear for the rest of the month once the limit has been passed, and it will reappear as soon as the next month begins. Alternatively, most Web-hosting companies offer "unlimited" bandwidth/traffic/transfer for low prices, but if the traffic to your site is too high for their liking, they may simply remove your site from the Web on the grounds that you've abused the terms of your contract, even though they give you no indication of how much traffic is too much. The better companies will give you the chance to upgrade to a more expensive package before they cut you off, and that's fair enough given that they can't afford to lose money by hosting your site: you have to remember that they are locked in an advertising war with other companies which offer "unlimited" traffic, and they have to offer the same to compete. Of course, most Web sites will never have this problem because hardly anyone ever visits them, so if you ever do manage to exceed your bandwidth limit, you can at least be very proud of your achievement.
Many popular amateur Web sites cover their costs by including paid links to other Web sites supplied by Google: it doesn't look too elegant, but it enables them to keep their pages on the Web: Google gets paid every time one of these links is clicked on, and they in turn will pay the site owner a little of that money. For more information about this, search the Web for "AdSense", but be aware that they are becoming increasingly fussy about whose Web sites can join the scheme: you need to have a serious Web site with a focus on a single subject which attracts reasonable numbers of the kind of visitors likely not just to click on sponsored links, but to buy products and services too. Wikipedia is funded by a different method: it relies on donations to cover its costs, believing that adverts should not appear on an educational resource. Magic Schoolbook relies on sponsorship and advertising instead, but with very strict rules about the kinds of adverts that can appear so that children are not distracted by irrelevant, flashing boxes inviting them to buy all manner of things they don't need and can't afford. I don't see any great harm in a company letting you know that they are helping to provide an educational resource for you without pushing actual products in your face at every turn, but I also see no harm in them showing off their products if they are relevant to the content of the pages on which they appear.

Before we look at the business of adding sound and video to a Web page (fun, but it eats bandwidth and can push up your Web-hosting costs - far better just to put your video on Youtube and link to it), let's get some more of the basic nuts and bolts out of the way. Lesson Four deals with lists. It introduces the tags <ul>, </ul>, <ol>, </ol>, <li>, </li>, and the optional additions to ordered lists: type="a", type="A" and type="I" which determine whether abcd, ABCD or I II III IV should be used instead of 1234. One of the nice features of using html is that when you add an item to the middle of an ordered list, you don't have to change the numbers/letters introducing all the subsequent items in the list: they are only created when the browser reads the page.

Using different colours of text is explained in Lesson Five. The easiest way to colour text is to use this formula: <font color="green">word</font>. Sometimes if you are trying to do something more complicated it is only possible to change the colour by putting: style="color:red", or whatever colour you're aiming for, inside another tag, as with colouring a hyperlink or a horizontal rule (which can be inserted into a document by using the tag <hr>). The background colour can be set by placing code suce as style="background-color:black" in the body tag, as shown in Lesson Five B. Notice that the standard colour for the text may have to be changed so that it will show up against a dark background. Lesson 5 also introduced the more common methods of highlighting text: <strong>, <em>, <b> and <i>. It ended with underlining, but you should try to avoid using this as it looks like a hyperlink. Lesson Five C shows you a way to set the colour of hyperlinks depending on whether the visitor has never clicked on them, has just clicked on them and is waiting for the page to load, or has clicked on the link in the past. The codings link="blue", vlink="black" (viewed) and alink="red" (active) have been put in the body tag. Notice that they don't affect the colour of links which have their own colour stated within them.

Including sound in a Web page can be done in a couple of ways. Lesson Six shows you one, and Lesson Six B shows you another, though the second one doesn't work with all browsers. The method using <embed src="sound-file.mp3"> allows visitors to the site to pause the sound and restart it at will, but it makes Internet Explorer put up an irritating message about ActiveX every time you want to play a different file. The alternative method <bgsound src="sound-file.mp3"> hides the annoying messages, but it also removes the controls. It is possible to set up a Web page to look to see which browser is being used and to set itself up to use bgsound if it's Explorer and embed if it's anything else, but you need to write a bit of Javascript code to control it: I have done this elsewhere on this site on the page teaching reading (though it's currently disabled because of costs), so you can copy the relevant piece of code from there if you need it. Opera can handle bgsound, but it won't play replacement files posted in by JavaScript.

This is still being written, so please excuse the notes to myself: [Remember to change the sound files used in 6 and 6b #######################, and use very short mp3s to save on cost]

Video can also be included in a Web page in much the same way as sound. Lesson Seven shows you how to do this using code such as: <embed src="video-file.avi" width="480" height="360">. You can change the size by using different values for the width and height, making sure they remain in the right proportion to each other.

[Remember to change the video file used in 7 ####################### - cost's the problem again, so really these are best used for content not destined for the Web but which are to be viewed via a browser.]

Lesson Eight shows you a way to make it easier for visitors to your Web site to contact you by e-mail: you need to use the following kind of tag: <a href="mailto:actual-e-mail-address@wherever">visible-e-mail-address@wherever</a>. Normally the actual and visible addresses will be the same, but you might have a reason to make them different.

Lesson Nine shows you how to include tables in Web pages. The html tags introduced in this lesson are: <table border=1>, </table>, <caption>, </caption>, <thead>, </thead>, <tr>, </tr>, <th>, </th>, <tbody>, </tbody>, <td>, </td>, <tfoot>, and </tfoot>. It also shows you how to set the width of a table or its columns using some such coding as width=50% or width="400" inside the <table> or a <th> tag. This lesson also introduced <pre> which enables you to line up text properly for making diagrams, as well as <code> and <tt>.

Superscript and subscript are demonstrated in Lesson Ten. These are achieved by using the tags <sup>, </sup>, <sub> and </sub>. The subscript one allows you to write the names of chemicals such as carbon dioxide properly: CO2; while superscript allows you to write powers of numbers: 162 = 256. Unfortunately, superscript and subscripts can both mess up the line spacing and make your paragraphs look rather disjointed. There is a way to get round this problem, however: if you put some special code into the head part of the Web page, you can then use "span" to change the format of the text, thus allowing you to write about CO2 and e=mc2 without any extra space appearing between lines in your paragraphs. The special style coding I have used in the head part of this page is designed to work with the font-size used here, so the "ex" values may need to be altered for other sizes of text, but you can find the right values through experimentation.
Another highly neglected art is that of indenting the first line of a new paragraph: most Web page writers simply put a blank line between all paragraphs because no one's told them the secret formula for tabs. For the record, the secret formula is: <div style="text-indent:60px">, but be sure to end the paragraph with a closing </div> tag as well so that it doesn't act on all subsequent paragraphs. One difficulty that comes from this, however, is that you have to change the <p> at the top of the first paragraph into a </p> to make it work properly with Firefox and Opera, and you also have to put a <p> at the top of the paragraph before that for Opera as well! No wonder people don't bother with tabs! You have to check your pages carefully with multiple browsers to ensure that they all display properly, and it's a terrible bind. At the time of writing this I still have no idea what Apple's Safari browser will make of any of my Web pages. I've actually used an alternative trick for tabs throughout most of this Web site, and the key to how that works is a linkage to a css file (cascading style sheet), but the hidden (white) word "indent" may annoy blind visitors and it also shows up if you print pages out.
Another little-known formula is the one used for justifying text (making the right-hand end of paragraphs square). I usually don't bother to use it because the irregular shape of paragraphs can help the reader to navigate their way back through a document to a particular piece of information that they want to find again, but there may be occasions where justified text looks more professional. The formula you need to use for this is <p align="justify">, but if you want to justify more than one paragraph you would put a longer version of this into a <body> tag rather than a <p> tag: the long version is <body style="align:justify">. In the case of this paragraph, I have actually put the short version into a <div> tag.
There is also a special tag <blockquote> for quoting text from another document with in your Web page: it moves the margins in away from the edges of the page to show that the text has been copied in from somewhere else. In this case here it has not come from another source, but then I'm only using it to illustrate that it can be done.
You can use tabs within it just as you would with normal paragraphs, and you can also justify text within it, though it is fussy about the way you do it, requiring the longer formula. You can use blockquote within an area which is already blockquote, thus bringing the margins still further: I have actually put this whole page in a blockquote as a simple way to create margins because the extra space makes the page feel more comfortable to read.
More about using html is introduced in the JavaScript course which you can find in the programming part of this Web site. JavaScript and html are two different systems, but they interact with each other as if they were one, and if you've got this far with the html, I think you'll find JavaScript to be a lot of fun.

By the way, if you're planning to set up your own Web site you'll need to get a domain name for it, and that costs money - perhaps 10 a year depending on where you buy it, whether you pay to have your name and address hidden and what kind of domain name you go for (the ones ending in .net and .com being more expensive than the country-specific ones). If you have a really good idea for a domain name and you're worried that someone else might register it before you do, it might be a good plan to have a look to see if it's already in use and to buy it to make sure that no one else can get it. You can check to see if the name you want is available here if you like, though I personally wouldn't unless I was about to buy it:-

Trust 1&1 Internet for your domain name registration, from only 2.99/year!. Check now!


Whatever you do, don't go for a free domain name that comes as part of a Web-hosting package because you could lose it if you switch to hosting your site with another company - it's always best not to tie the two things together but to treat them as completely separate purchaces, the only linkage being that you will point your domain name to the place where your site is hosted.


Reliable Web Hosting
Linux & Windows Hosting Starting at
Just 1.99 Per Month. Sign Up Now!