common object example


Create an Index Page using Text Edit

    ●   Learn the difference between the <head> tag and the <body> tags.

    ●    Use the <p> tag to create text and center it with in-line tags.

Learn About:

<head> Tags <body> Tags<h1> Tags
<h2> Tags in-line Tags <p> Tags

  •   This tutorial is for the Fan-Tastic Project and is part of a series:

1 - First Web Page   2 - index Page   3 - Special Characters   4 - Ordered Lists   5 - Links   6 - Horizontal Nav

Step #1: Open your index page ~

Last tutorial you worked in the <head> tag area

- Now you'll work in the <body> tag area.

Open the index.htm document you created in your preferred text editor …


Insert a new date between the invisible comments tags <!-- todays date -->

Do this every time you work on your pages. The Rubric for this project requires the current date inserted between the invisible tags.

Step #2: Heading ~

What is the name of your web site? What are you going to call it? Use heading styles to create large words across your page.

HTML supports 6 sizes of heading styles:


<h1> is really big





<h6> is really small.


Step #3: Head vs. Body ~

The HTML codes on Web Pages are divided between <head> and <body> tags.

Step #4: Click in the Body Area ~

Click somewhere between the <body> tags:

Use a large <h1> tag and type your big text:

Step #5: Head vs. Body ~

Save your work by hitting Cmd (⌘) + S

cmd key +

… then Double-Click the web browser icon in your web page folder.

Check out your big h1 text style in your preferred browser!

Step #6: Site Map ~

If you haven't already, go to the site map tutorial to figure out your links.

Click to view the site map tutorial

Once you have your links decided upon, use the 2nd largest <h2> tag to put the your first link in the <body> of your page by opening index.htm in your text editor again.

Repeat the process for at least 3 links according in decending order.

Save your work by hitting Cmd () + S and then Refresh your browser to reveal your changes …

Step #7: Center Alignment ~

Next, center your text using in-line styles to align your web page element:

in-line styles can be applied to almost any tag but you must type them correctly …

Save your work by hitting the keyboard shortcut Cmd (⌘) +S and refresh the web browser …

The Big text should look like this when viewed in your browser. If not, you may need to go back and CAREFULLY analyze everything you did. Remember: Computer Language is precise and unforgiving of even the slightest errors.

Step #8: Paragraphs ~

The next step is to enter text information for each section. It's time to use the <p> tag.

When the browser encounters this tag, it starts a new line with a blank space above it.

Place the insertion point at the end of the line that creates the first h1 heading, and enter some text describing your site:

Add paragraphs below all your links and customize them however you want:

[Note: The new text does NOT have to be Red!
It's just so you can see it!

Save your work and view it again in your browser. It might look something like this:

Last Step: Save and Attach ~

Go to: File » Save as … and save your index.htm file IN YOUR ROOT FOLDER …

… and attach your index.htm to the tutorial.