Writing web pages can be a lot of fun. Most people start out knowing nothing and teach themselves whatever they need to know. This is an attempt to help you get started and show you how to develop your skills.
Anyone who has tried to share a document created with one word-processor will be familiar with the problems caused by incompatible versions and different word processors. On the Internet however, such problems should not be as prevalent, as there are internationally agreed specifications for web pages, drawn up by the W3C, The World Wide Web Consortium, which can be found at http://www.w3.org/MarkUp
. These set out how Web pages should be displayed using the Hyper Text Markup Language, or in practice, HTML tags or instructions. Thus, in theory, every browser, Internet Explorer, Netscape Navigator, Opera, Lynx, Mosaic etc., should be able to read any Web page file.
Unfortunately, theory and practice do not always match. In an attempt to develop the best browser, companies such as Microsoft and Netscape have developed additional proprietary HTML tags. If you write a Web page using these special tags the effect may not be visible to visitors who are using a different browser. To ensure that your pages have the biggest possible audience, it is important to keep the pages simple by using only the HTML tags listed in the WC3 specification. The examples used here contain only basic tags understood by all browser versions.
Basic Web Page Design
To write your web page you need a text editor. This is a basic word processor with no formatting options. Windows 95/98 has Notepad, which can be found under Start | Programs | Accessories. This will do for most purposes, but there are others that can speed up the process, such as Notepad Pro and Homesite .
The structure of an HTML file is shown in Figure 1. The browser uses the information in this file to display the web page on the monitor.
Figure 1 - The basic structure
The HTML file is enclosed within a pair of <HTML> tags. Any information enclosed within the <HEAD> tags, such as the <TITLE> and <META> tags, does not appear on the browser screen. The Web page seen in the browser is written in the space between the two <BODY> tags. It is usual to build the basic framework first, so that you can view the Web page in your browser as it is being written.
Type this out exactly in Notepad , including your own title and text, and then Save as the file onto your desktop with the name "mypage.html". You can now double click or open this file from your desktop and it will open in your browser. A good lesson to learn is that file names are case sensitive, and it is a good idea to standardise on lower case for files and directories.
To make a more interesting Web page you need to use HTML tags to tell the browser how to format the text when it is displayed in the monitor by the browser. The tags set the appearance of the text (size, font, colour, and emphasis), and the layout of the text on the page (headings, paragraphs, lists, tables, and image placement). These tags are not visible in the browser, only their effect. Some of the more common tags are given in Table 1.
|Heading (Large) ||<H1> text </H1>
|Heading (Small)||<H6>text </H6>
|Centered Text||<CENTER> text </CENTER>
|Paragraph||<P> text <P>
|Text Size, Colour, Font
||<FONT> text </FONT>
|Bold Text||<B> text </B>
|Italic Text||<I> text </I>
|Unordered List||<UL> text </UL>
|List Item||<LI> text </LI>
|Link to another web page
||<A HREF="page url">link text</A>
|Add an image||<IMG SRC="image location(url)">
|Send email||<A HREF="MAILTO:email address">text</A>
|Undisplayed Comments||<!-- text -->
|Meta Tags - Indexing Information
||<META NAME="text" CONTENT="text">
Table 1 - Some basic HTML tags
Most of the tags have an opening and a closing form which enclose the text to be formatted. Others, like
simply define an action. The tag is used to include information about the contents of the page, such as a description and a collection of keywords, which is utilised by Internet search engines as a way of indexing Web pages more comprehensively. Successive enhancements of the WC3 HTML Specification have added to the original set of HTML tags, permitting a greater range of formatting possibilities.
To understand how these tags work, add them to the text in myfile.html, and then save the file. View the changes by using your browser’s refresh button or relaunching the file again. As an example, replace Write your text here by <H1> Write your text here </H1> (but without the ..). Now try some of the others.
Writing your first Web page
I have created a simple example which illustrates the use of many of these tags and their attributes to produce a web page. If you are connected to the Internet you can view the web page by opening http://internet-gopher.com/articles/page.html in your browser. It demonstrates what can be done using only the simple tags in Table One, and it has hypertext links to some useful health related web resources.
At the bottom of the page there is a link to another Web page http://internet-gopher.com/articles/pagecode.html . Clicking on it opens a new window which shows the HTML file I wrote to generate the web page you have just viewed. Compare the file and the page to see how the formatting and the links were achieved.
If you want a copy of the information on this page as a template for writing other pages, use the Edit | Select All | Copy option in your Web browser and then Paste the tagged text into Notepad. Save the file onto your desktop with the name "page.html". As before, you can open this file in your browser, even when you are not connected to the Internet. One of the best ways to learn more about writing Web pages is to study other people's pages. When you see something that interests you, use the View | Source on the browser toolbar to see the HTML tags which produced the effect, and copy them for your own use. If you do this with the demonstration page http://internet-gopher.com/articles/page.html you will see the tags plus many additional comments and explanations about how they were used. It will also illustrate the use of images. Modify your copies of these web page files to make them your own.
For further information about more advanced web page design you can visit the "HTML for Beginners - Ultimate Guide", and this "HTML Cheat Sheet" which has a full list of all HTML elements, including descriptions, code examples and live previews.
If you ever use a WYSIWIG editor (What You See Is What You Get) , like FrontPage, where the tags are added automatically to your text, you should now understand what it is trying to do.
Publishing your Web page
If you want others to see your Web page you must move your HTML
page from your computer to a Web server which is permanently attached
to the Internet. Your ISP may have provided you with some free
Web space, but if not, you can get it from a range of sources
such as GeoCities http://www.geocities.com/join/
and Tripod http://www.tripod.com/planet/membership/.
Irrespective of who hosts the Web page you will be given disk
space (typically about 10MB), the URL of the Web space (or the
place to send your HTML files), plus a password to allow you to
add new files to your space and edit your existing pages.
Some ISPs provide an easy way to move your files to their web servers, but in most cases you will need FTP (file transfer protocol) software to do this. Popular programs include CuteFTP
WS_FTP http://www.ipswitch.com/Products/WS_FTP/index.html , and the free FTPExplorer http://www.ftpx.com/ .
Once the FTP program is configured, updating your Web page is simply a matter of a few clicks. The software links you to your Web space over the Internet and treats it like another part of your computer. You can then copy your files to it just like you would to any other folder or directory on your own computer.
This brief article has only scratched the surface of Web page
development. However, once you have understood the basic principles
you can easily progress to using the newer and more advanced HTML
specifications that are being developed. One final comment: do
not forget that writing is only the first step. Developing and
updating the Web site is a big commitment and one that is often
forgotten in the planning stage. Also people read web sites in
a different way to printed pages, so remember this when you are
writing your own web pages. For help on writing effectively for the Web see Jacob Nielsen’s ‘Concise, SCANNABLE, and Objective’ at
You are now on your own so let your creativity take over and
make your unique contribution to the vast collection of information
known as the World Wide Web. When you are ready you can let other people
and the search engines know you are ready for visitors - but that is a story for another day.
Roger Trobridge - The Internet Gopher - firstname.lastname@example.org
W3C, The World Wide Web Consortium http://www.w3.org/MarkUp
Notepad Pro http://www.notetab.com/
The basic Web page http://internet-gopher.com/articles/page.html
The HTML file for the Web page http://internet-gopher.com/articles/pagecode.html
NCSA Beginner's Guide to HTML http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
Joe's Place - HTML tutorial http://junior.apk.net/~jbarta/tutor/makapage/index.html
Jacob Nielsen' web writing paper http://www.useit.com/papers/webwriting/writing.html
Added December 2018 following a recommendation by Meg Thomas
Computer Training: Learning about the Color Wheel and Color Theory
Website Design for Your Online Business