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.
✓ <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 …
✓ … 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.
✓ 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.