HyperText Markup Language:
A New Form of Communication
Let's Learn to Write HTML


Thanks to Barry Pederson, you, too, can have your own World Wide Web pages! If you belong to the UND School of Medicine, you can develop and send your files via e-mail (mail.med.und.nodak.edu). Here's how.

As Barry mentioned, there are many helpful documents you can access if you want to know more about HyperText Markup Language, or HTML. HTML tags are easy to understand. Most of them specify the beginning and the end of a block of text, and the block takes a different shape or provides a link to another document/file when viewed by a browser such as Netscape Navigator. The Netscape Navigator (or any other web browser) "decodes" the document written in HTML. In its native format, which is a simple text, contains a series of "tags".

After you construct the HTML document and proofread on a local computer (Windows-based PC or Mac), it can be sent to the medical school server via e-mail. The server recognizes that you have attached file(s) to the message and places the file(s) on a particular disk location. Once the process is completed, anyone with internet access and a web browser (like Netscape Navigator) can view your document with the browser if you provide the address.

Before you start...
There's a forum to ask questions and share ideas about creating web pages. Others who write HTML and manage the files on internet gather and discuss different topics here. If you get stuck, want to ask questions, etc., access this forum and leave a comment. You can browse what others have said, also.

To begin composing in HTML, you should start by reading a beginner's guide to writing HTML documents, such as this one.

There's a guide to all the different HTML "tags". However, many of us are not as patient as perhaps we should be, hence we look for "an easier way".
OK, for advancement of superior mode of communication, the following is a way to take some frustration out of writing HTML. There are HTML editors that add necessary tags for you upon your command, but it never hurts to understand how HTML works before you comit to one of the HTML editors. Some people say that using the HTML writers may be counter productive in the long run (or at least make the user less flexible and prone to errors that are difficult to debug). You'll probably venture out and explore the method with which you are most comfortable once you try this:

  1. Choose the most basic word processing program you like. It must be able to save the file in text format (see "Save As" or "Export" in the word processing application menu). You may want to run the file concurrently with this Netscape page so that you can copy a segment from here and paste onto your word processing file.

  2. Type the document you want. You can import or copy-and-paste from other documents. However, avoid any tab, smart quotes, or special characters. The barer it is, the better.

  3. You should have a title to the document. Give a brief name that you want to see at the top of the document window (outside the text area, outside the browser buttons). This identifies the document. At the beginning of the title, place <title>. At the end of the title, place </title>. So, you have something like this at the beginning of your document: 
    <title>My Incredible Home Page!</title>
    (Go ahead, highlight, copy, and paste onto your document...)

  4. You probably have a "heading", an identifier for a group of text. If you want the beginning of your page to look like:

    Welcome to My Home Page

    My name is Drew Carey and I'm a comedian-turned-sitcom-actor.

    Then you should type: 

    <H1>Welcome to My Home Page</H1>
My name is Drew Carey and I'm a comedian-turned-sitcom-actor.
    H1 is the biggest and H6 is the smallest header size.

  5. Here are several exceptions to the rule of "tag before AND after the block of specified text." These tags are placed in areas you wish without corresponding </whatever>:

  6. If you want to add accents to your text, there are various tags such as:

  7. Numbered and unnumbered lists are VERY useful in conveying your message. You can "nest" these tags to develop more complex lists.
    If you want your list to look like this:
    Count in Japanese: --- this text is outside of the tags
    1. Ichii (one)
    2. Nii (two)
    3. San (three)
    4. Shee (four)
    5. Goh (five)

    Then copy this: 

    Count in Japanese --- this text is outside of the tags
<ol>
<li>Ichii (one)
<li>Nii (two)
<li>San (three)
<li>Shee (four)
<li>Goh (five)
</ol>
    A great thing about it is that Netscape automatically counts and "renumber" the list if you insert a line with a <li>.

    On the other hand, if you want the list to look like this (bullets):

    Things I want to do:
    Then you can copy this: 
    Things I want to do:
<ul>
<li>Go to the movies
<li>Go to a party
<li>Not study all the time
</ul>
    Examples of nested lists are here...1, 2, 3. Click on them, then view the source and see how the tags are placed.

  8. About linking other documents (hypertext, image, or application files):

  9. About embedding images in your document:

  10. Here's a concise and useful guide about "relative URLs" by Barry Pederson.

  11. Periodically, add comment lines to your document so that you can easily recall what you were trying to do. Your text inside the comment tag does not appear on the Netscape document but it does show as a source code. Comments can be placed between "<!--" and "-->". For example: 
    <!-- Start of pathology links -->
  12. Use empty lines ("Enter" key) a lot so that you can see your native text easier. Carriage returns are ignored by the web browser (except the content inside the <pre> and </pre> tags). It's much easier to trace your document when there's a lot of empty lines between tags.

  13. You can also make up an area where people can respond to your questionnaire and have the results mailed to your e-mail address. You can copy the following example, paste onto your document, modify the variables to your e-mail address, then use it:

    <form method=POST action=/mail>
    <input type=hidden name="Mail-To" value="yourname@mail.med.und.nodak.edu">
    <input type=hidden name="Mail-Subject" value="Whatever">
    Your name:<br><input name="From"><p>
    Your Internet address: (if you would like a reply)<br><input name="Mail-From"><p>
    Your comment:<br>
    <textarea name="Comment" rows=3 cols=50></textarea><p>
    <input type="submit" value="Send Comment"> <input type="reset" value="Clear Fields">
    <input type=hidden name="Mail-Response" Value="Thanks for your comment.">
    </form>
    You can have radio and check buttons, also. Here's additional help to learn how to add more functionality to your pages.

  14. For folks looking for more adventure...Here are some Netscape-specific tags that may be helpful in developing your pages:

  15. Once you think you completed the document, add the following tags:
    1. <body> on the line after the </title> tag.
    2. </body> on the last line of your document.
    3. <head> at the very top of the document.
    4. </head> just after the </title> tag, before the <body> tag.
    5. <html> at the very, very top of the document.
    6. <html> at the very, very bottom of your document.

    When you are done, it should look like this: 

    <html>

<head>
<title>...</title>
</head>


<body>

...lots and lots of lines you created...

</body>

</html>
  16. You can double-check your errors by submitting the URL of your document to this address. This remote server checks your document and indicates incongruent tags and syntax errors. It's really handy.

  17. Common errors and corrections identified by Eric Tilton


Good luck with your HTML writing!



The above document was prepared by Makoto Tsuchiya, Division of Sports Medicine.

Contact him by e-mail: tsuchiya@badlands.nodak.edu