Creating HTML Documents s1

ID-2950 Mrs. Jeanne Osborne

Creating HTML documents

Basic ideas

HTML stands for Hyper-text markup language. Documents for publication on the web must be written in HTML. There are several ways to accomplish this:

1. Write in HTML code, using a text editor. That is what we will learn.

2. Write a document in Word. Then, use the Save As command to convert it to HTML. The problem with this method is that sometimes there are problems with graphics being stored in different files and the size of the files with newer versions of Word. Word also creates lots of extra commands that makes it more difficult to find the actual web page source code. Trust me – I’ve had that problem with Word 2003. So, I have an older version of Word on a laptop that I use for converting Word to html without all of the problems.

3. Write the document using some program designed for creating web pages, such as Microsoft Front Page. The problem with this method is that sometimes you can do lose control of the formatting to the program. I’ve had this problem with line spacing, especially.

Mac’s at Kean / PC’s
Create in / Text Edit / Note pad
View with / Safari or Firefox / Netscape or Internet Explorer

When saving your file, the name of the document should be one continuous word, followed by “.htm”. Usually, the home page is saved as index.htm and the other pages have names that refer to the contents.

Note: You may experience some incompatibility problems if you create a file with Text Edit and then try to modify it with Note pad.

HTML is a code that uses elements, called tags, which are enclosed in >. Most tags consist of 2 parts; one with the command to begin and one with the command to end. There are a few commands that do not need a closing pair.

Remember: First tag on; last tag off.

Suggestion: After you finish creating a web page or are done for the day, print out the file from the text editor. That way, you will have a hard copy of what you have done. This is really important in case you lose your USB drive. Another thing you could do is to send a copy to yourself as an email attachment.

Preparing your USB drive: Create a folder called Webpages. All web pages and their graphics will go in this folder.

Creating your first HTML file

1. Open your text editor.

2. Right away, click on File, Save As, and save the file as index.htm. Sometimes, the editor may want to save the file as an extension of .txt but you must insist on it saving the file as .htm Save the file on your flash drive. If you are at home, you could of course save it on your hard drive.

3. Type in the contents of the first column of the following table:

Type in / Purpose
<html> / Identifies the document as being in HTML
<head> / Starts the heading
<title>Your name’s web page </title> / Names the page
</head> / Ends the heading
<body> / Starts the body
 Web page created on (put today’s date). / P is for paragraphs; this one identifies the date you created the web page
</body> / Ends the body
</html> / Ends the document as being HTML

4. Save the file again, this time using Save (not Save As). Minimize the editor.

5. Open your browser. Load in your file.

6. If everything works correctly, you will get a blank screen with the sentence “Web page created on (today’s date).” on it.

7. Note: When you update pages on a later date, you should change the date to reflect the day that you are working on the file.

Adding more to the file

1. Minimize the browser, open the text editor and your html file.

2. We will be adding to your file. As the file expands, the new commands will be inserted in bold font.

<html>

<head>

</head>

<body>

Web page created on (today’s date).

 Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. 

 Write a second paragraph about your outside interests. 

</body>

</html>

3. Save the file, minimize the text editor, open the browser and open your file. (From now on, this set of operations will not be repeated. It will be assumed that you will open and minimize the text editor and browser at each step of the work. Each step will introduce only one type of new command at a time.

4. The <H#> command. Purpose: Makes a heading, in a different size font

<html>

<head>

</head>

body>

<H1> Type your name. </H1>

Web page created on (today’s date).

Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching.

Write a second paragraph about your outside interests.

</body>

</html>

After viewing this, change the command to H2. What happens?

The largest number you can use is H6.

5. The command. Purpose: Writes in bold font

<html>

<head>

</head>

<body>

Web page created on (today’s date).

Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching.

Write a second paragraph about your outside interests.

</body>

</html>

6. The <body bgcolor> command Purpose: Changes the background color

<html>

<head>

</head>

<body bgcolor=yellow

Web page created on (today’s date).

Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. Add any relevant experience such as sophomore or junior field, substitute teaching, volunteer work, etc. that would relate to your professional career.

Write a second paragraph about your outside interests.

</body>

</html>

Note: Some browsers require quotes around the colors.

The bgcolor = yellow is called an attribute. The yellow is the value of the attribute. There are 16 colors accepted by almost all browsers. Other colors are possible; there are hexadecimal codes available for them. However, not all browsers may accept all colors.

Here are the 16 universally accepted colors:

Aqua Black Blue Fuchsia

Gray Green Lime Maroon

Navy Olive Purple Red

Silver Teal White Yellow

To use other colors, you can specify the RGB values. For example, if you wanted coral as a background, you could use <body bgcolor=“#FF7F50”>. See the handout on the color chart.

7. The <body text> command. Purpose: Changes the color of the font

<html>

<head>

</head>

<body bgcolor=yellow text = blue

Web page created on (today’s date).

Write a second paragraph about your outside interests.

</body> </html>

Note: As you create your web pages, be aware of the colors of your background and text. Some colors do not look well together. For example, a blue background with red text may be difficult to read. Generally, if you use a dark colored background, use light colored text. If you use light colored text, use dark colored text.

8. The <blockquote> command. Purpose: Creates an indentation; can use multiple blockquotes

<html>

<head>

</head>

<p Web page created on (today’s date).

<blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote>

<blockquote>Write a second paragraph about your outside interests. </blockquote>

</body>

</html>

9. The command. Purpose: Creates a blank line between text

<html<head<title> Your name’s web page. </title</head>

<p Web page created on (today’s date). </b

<blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote>

<blockquote>Write a second paragraph about your outside interests. </blockquote

How to contact me

Type your address.

Type your phone number.

</body</html>

Note: this command does not have a closing tag.

10. The command. Purpose: Changes the font color for just some of the text on a web page

<html<head<title> Your name’s web page. </title</head>

Web page created on (today’s date). </b

<blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote>

<blockquote>Write a second paragraph about your outside interests. </blockquote

How to contact me

Type your address.

Type your phone number.

</body</html>

11. The <center> command. Purpose: Causes the text (or other items) to be centered on the screen.

<html<head<title> Your name’s web page. </title</head>

<p <center>Web page created on (today’s date). </center> </b

<blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote>

<blockquote>Write a second paragraph about your outside interests. </blockquote

How to contact me

</font

Type your address.

Type your phone number.

</body>

</html>

12. The command. Purpose: Changes the font size

<html<head<title> Your name’s web page. </title</head>

<b<center>Web page created on (today’s date). </center</b

<blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote>

<blockquote>Write a second paragraph about your outside interests. </blockquote

<font color=red size=2

How to contact me

</font

Type your address.

Type your phone number.

</body</html>

Try changing it to 7! The default size is 3. Values go from 1 to 7, making a total of 7 sizes. You can increase or decrease font sizes by writing -3 to +3; this makes the font size decrease or increase that number of sizes, relative to the text around it.

Note: Some browsers require quotes around the size number.

13. The <hr> command. Purpose: Draws a horizontal line

<html<head<title> Your name’s web page. </title</head>

<p <center>Web page created on (today’s date). </center</b

<blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote>

<blockquote>Write a second paragraph about your outside interests. </blockquote

<center<hr width=75%</center>

How to contact me

Type your address.

Type your phone number.

</body</html>

If you would like the line to be thicker, you can add <hr width=75% size = 4>. The number in the size attribute tells how many pixels thick to make the line. You can also add a color attribute to the horizontal line. If you want the line to appear more solid, you can the attribute noshade to the hr tag.

14. The Align Attribute for either H or p tags. Purpose: Allows you to align items

<html<head<title> Your name’s web page. </title</head>

<p <center>Web page created on (today’s date). </center</b

<blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote>

<blockquote>Write a second paragraph about your outside interests. </blockquote

<br<center<hr width=75%</center>

How to contact me

Type your address.

Type your phone number.

</body</html>

Note: Align could also be Left or Right or Justify.

15. Would you like your paragraphs indented? There are 2 ways that you can do it:

A. Type   after the tag. Each   will make an indent of 1 space.

B. Replace the and tags with <pre> and </pre> tags. Then, make the spaces

that you want with the space bar. It preserves any white spaces that you type. Be

careful, though, as you must hit the enter key at the end of each line of typing to agree

with the way you want it to appear on the screen.

This tag will also allow you to make columns. However, there is a better way as

you will see in the next lesson.

16. The and tags will italicize words, but this may not be recognized by some computers. The <ul> and </ul> tags will underline, but this not recommended as they can be confused with links.

17. If you want to change fonts, it is possible, but I would recommend that you give the browser two choices, in case the first one is not recognized.

will change the font to Arial. If Arial is not recognized, then the font will be Times New Roman. When is applied, then the font face will be turned off.

18. If you need subscripts, you can use and . If you need superscripts, you can use and .

For example, if I wanted to type x2 in HTML, the code would be: x 2

20. Special characters may be inserted using a code. When you use a special code, you must pre-cede it with and end it with a semicolon (;). Here is a table of some special characters that you may want to have on web pages designed for school usage. This table was copied from Creating Web Pages With HTML, Simplified. 3rd edition, 2006. Publisher: Wiley.