|
When you look at a page on the web it looks much like any other page. There are headings, blocks of text, graphics. Some words may be coloured, in italics, bold, or underlined as in most material produced by a word processor. When we design a page on a word processor we know how to select a word or sentence and click a button or type commands that change the text to fit our design. To mark up a page for the web we have to learn to use a special mark up language called HTML (hypertext markup language).
You can use your Document Source function in the View menu to look at the source of this HTML document
HTML and Tags
Instead of selecting a word or sentence and clicking a button to change it appearance, we select a word or sentence and put a tag at each end.
Here is an example for making a heading
<H1>Make your own Web page</H1>
the beginning and end tags are identical except for the forward slash (/).
Other tags for smaller headings are
<h2> smaller
<h3> and smaller
<h4> and smaller
<h5> and smaller
and
<h6> smallest
There are tags to make text bold <b> and for italics, <i>.
There are tags for emphasis <em> and <strong>.
There is a tag to make a horizontal line <hr> and a line break <br>.
There is a tag for marking paragraphs <p>.
The Browser
The browser reads documents marked up in HTML. I use a browser called Netscape, but there are others including Internet Explorer, Mosaic, WinWeb, and MacWeb. The browser shows the page without the tags. You can however view the tags if you select Source under View in the Menubar. This is a good way of finding out how other people mark up documents, and copying the bits you like for your own documents. Some of the latest browsers like Netscape Gold, include an editor to help you mark up your web pages without learning any codes. There are many other programs that will create your web pages for you loike Claris Home Page or Dreamweaver.
Back to Marking up
Marking up can be done using any word processor as long as you save the work as Text or ASCII files. Let's start at the beginning to see what a marked up page looks like.
First there is a tag which tells the browser this a marked up document. This always goes right at the start.
<HTML> (the final tag at the finish of the document will be </HTML>)
Next comes the <HEAD> tag which specifies the prologue to the document.
None of the text of the document goes between the head tags. However this is where the <TITLE> tags go. The title is a word or two that names the document.
So here are the tags that should appear at the beginning of all HTML documents
<html>
<head>
<title> Name of Document </title>
</head>
After this comes <body> ...... </body> between which we put all our text, graphics, links etc.
Here is our first working attempt at a marked up document, copy and paste or type it on your word processor. You can select the text below by clicking the mouse and dragging it across the text you wish to copy, then use the keyboard commands for copying and pasting
Notice the tags at the beginning and end of sections. Dont forget the
forward slashes (/). Try it out for yourself. Save it as a text file called
firstdoc.html. (Earlier Windows word processing programs required you
to save with only three letters after the dot in that case save as firstdoc.htm)
and, after you've saved and closed the document, open it with Netscape
or Internet Explorer using Open Page under File in the Menubar.
Return to top of page