JPROF - Learning HTML-2

Home > Online journalism > Learning HTML-2

Learning HTML-2

This tutorial designed as a follow-up to the first Learning HTML tutorial on this site. This tutorial introduces students to some additional HTML tags, particularly those having to do with font, color, alignment and lists.

The directions are virtually the same as those in the first tutorial:

1. Type the text below into Microsoft Word or some other word processing document.

• Save the document as "text only."
• Whatever name you give the document, make sure it has the suffix ".html" on it. Example: mydocument.html
• Remember where you have saved the document.
• After saving the file, keep the window for that document active on your screen.

2. Open a web browser (Explorer, Netscape, Firefox, etc.). The bowser should give you an online connection, but if it doesn't, the exercise will still work. You simply won't be able to see the picture of the Gettysburg Address.

3. Once the browser is up, use the open function to open the document you just typed. It should look much like the document on the right. (Click here or on the picture to see a larger version of it.)

4. Chances are, it won't look like the picture. That's because there has been some error in typing the text. Keep this window active and go back to your document window.

5. Go through the document carefully and correct any errors. Remember that the document should be exactly what is typed below. When you have made a correction, SAVE the document. Then go to the brower window and refresh the page. If it still doesn't look like the picture here, there are still errors in the typing.

6. Repeat the process until the page looks like the picture.

Note to instructors: You may want to hand the students a copy of the text below rather than have them read these instructions. You can download the text here if you like. You should also give them a picture of what the page should look like. The real learning in this exercise takes place when students make mistakes in their type and then have to find them. You should try to get through this exercise with a minimum of coaching.

Once students get the page so that it looks right, you might suggest that they go back to the HTML page and change the <ul> to <ol> -- that is, changing it from an unnumbered list to a numbered list. They should also remember to change the end tag to </ol>.

They should be encouraged to make other changes to see what effect it will have on the page. Remind them to put end tags so their changes will be correct.

The text

Here is the text the students should type:

<!DOCTYPE html This is helping me learn HTML>

<html>

<head>

<title>AP style</title>

</head>

AP style

<a href="http://www.jprof.com/writing/localstylebook.html"><img src="http://www.jprof.com/images/shakespeare.jpg" alt="" height="265" width="180" align="right" border="0"></a>Some of the basic principles of AP style that every journalism student should know are the following:

<ul>

<li>Abbreviations should be kept to a minimum.

<li>Every word has one and only one spelling.

<li>Do not capitalize words unless they are proper names or come at the beginning of a sentence.

<li>With a few exceptions, you should follow the standard rules of grammar, spelling and punctuation.

<li>As a general rule, spell out zero through nine; use figures for 10 and above.

</ul>

In general, publications should follow the AP Stylebook and Libel Manual, but there are many instances that come up in writing local news that are not covered by the stylebook. In those cases, publications should develop their own stylebooks. For some tips on doing that, click <a href="http://www.jprof.com/writing/localstylebook.html">here</a> or on the picture of Shakespeare.

</body>

</html>

About JPROF.com | Who is JPROF? | Contact us
All of the words and images on this site are copyrighted and may not be used without the permission.
Copyright © Jim Stovall 2005
FreeFind.com provides search technology for this website.