How to write a web page in HTML

Web pages are text files, written with a text editor such as SimpleText (Mac), Notepad (Windows) or vi (Unix). The formatting of the page is described with HTML (HyperText Mark-up Language) tags. A web browser (Netscape or Internet Explorer) uses the tags to format the text on the page for display.

All web pages have at least these two pairs of tags:

<HTML>
<BODY>


</BODY>
</HTML>

The name of the tag (HTML, for example) is enclosed by a less-than symbol (<) and a greater-than symbol (>). Most tags are used in pairs and the closing tag contains a slash (/) before the name.

Create a folder on your computer for your web pages. Call it something like "web_site". Open your text editor (Notepad, for example) and copy the following text into a new document:

<HTML>
<BODY>

My Web Page

This is the text of my web page.

Please look at my second web page.

This page was written by Your Name, your_email@your-isp.com
August 21, 2000
</BODY>
</HTML>

Save the document in your web_site folder as "index.htm".

The file names of web pages must not have spaces and should end with the extension ".html" or ".htm".

web page is not a valid file name
web_page.html is a valid file name

Use your web browser (Netscape or Internet Explorer) to open the file you just saved. (Pull down the File menu to Open or Open Page..., navigate to the file and click Open.)

When viewed in the web browser, the text runs together, like this:

My Web Page This is the text of my web page. Please look at my second web page. This page was written by Your Name, your_email@your-isp.com August 21, 2000

Go back to the text editor and add the tags (highlighted below in green) to format the text when it is displayed by a web browser:

<HTML>
<BODY>

<H1>My Web Page</H1>

This is the text of my web page
<P>
Please look at my second web page.
<HR>
This page was written by Your Name, your_email@your-isp.com<BR>
August 21, 2000
</BODY>
</HTML>

Save the text editor document and go back to the web browser. Click Reload or Refresh. The tags you just added will produce this in your web browser:

My Web Page
This is the text of my web page.
Please look at my second web page.
This page was written by Your Name, your_email@your-isp.com
August 21, 2000

The tags have the following purposes:

<H1> </H1>: Header 1 (most important header)
<P>: Paragraph
<HR>: Horizontal Rule
<BR>: Line Break

Links

Before creating a link on our page, we need another page to use as the target of the link. In your text editor, open a new file. Paste some text on the page, perhaps a copy of the text in index.htm, and save it in the web_site folder as "page2.htm".

Use the text editor to open index.htm and add a link:

<HTML>
<BODY>

<H1>My Web Page</H1>

This is the text of my web page. 
<P>
Please look at <A HREF="page2.htm">my second web page</A>.
<HR>
This page was written by Your Name, your_email@your-isp.com<BR>
August 21, 2000
</BODY>
</HTML>

Go to the web browser and press Reload or Refresh. The browser will show a clickable link:

My Web Page
This is the text of my web page.
Please look at my second web page.
This page was written by Your Name, your_email@your-isp.com
August 21, 2000

The link above is a "relative" reference, which will work while the page is on your computer. The link will also work after the page is published.

To create links to pages outside of your site, use "absolute" references. Copy the full address (or "location") from the web browser and paste it in your page. For example, to create a link to my second page on this site, use the following:

<A HREF="http://www.jneuhaus.com/page2.htm">John's second page</A>

That will be displayed by the web browser like this:

John's second page

Both the absolute and the relative references will link to the same page when the page is posted on the net. The advantage of a relative link is that you can check that the link works as intended before publishing. (Also, if you move your web pages to a different address, relative links to pages within your site will still work but absolute references will be broken.)

There is a more extensive introduction to HTML at http://www.cwru.edu/help/introHTML/. For links to the reference documents that specify HTML, see Thang Quy Nho's Learn to Create Your Home Page

Some people prefer to create web pages using a specialized text editor, such as PageSpinner for the Mac or Amaya for Unix and Windows, that automate the creation of the tags. Netscape Communicator and Internet Explorer include web publishing tools. Many word-processor programs, including , Corel WordPerfect, Microsoft Word97 and Front Page, let you create pages in a WYSIWYG (What You See Is What You Get) environment and save them as web pages.

How to publish your pages on the web so others can view them.

John Neuhaus, john at jneuhaus.com, Friday, June 30, 2006