How to (hopefully) Pass CIS 1203

Step 1. Title your page on the title bar. To do this, you must add <title> to your html document, then put your title in, and close it like so </title>

Step 2. You must have a head section on your page. To do this, you must add <head> to your html document, this is where you will put your title and your <!-- Author, Date, files used, etc. -->. Then you close it with a closing tag, such as </head>

Step 3. You must have a body section on your page. To do this, you must add <body> to your html document, this is where you will put everything that will be displayed on the page. Then you neet to close it like so </body>

Step 4. You must declare that you are using HTML. To do this, just put a <html> at the beginning of your html document, and a </html> at the end.

Step 5. You need an h1 heading. To do this, you must use a <h1> tag, then add some text and close it with a </h1>.

This is a h1 heading.

Step 6. You need an h2 heading. This is very similar to an h1, but instead of putting a h1 between the <> put an h2

This is a h2 heading

Step 7. Use a h3 heading. Once again, very similar to a h1, this time use a h3 between the <>s.

This is a h3 heading

Step 8. Use a h4 heading. This time, put a h4 in there.

Here is a h4 heading

Step 9. Use a h5 heading. This time, use a h5 between the <>s

Here ya go!

Step 10. H6 this time. Just put it where it belongs

Here is a h6. Pretty small, huh?

Step 11. Use the align attribute with a heading. To do this, you must have a <h1>, but you need to have the word style after the h1 followed by an ="text-align:__" replace the __ with top, right, left, or center like so: <h1 style="text-align:center">. If done correctly, it will look like this:

Once you're done, close it with </h1>

Step 12. Add an Ordered list. To do this, put in a <ol> into your html document. Within that tag, you need to have list items enclosed in a <li> </li>, put what you want in your list between these two, then add another set for each list item. Close the list with </ol>. When done it will look like this:

  1. Item 1
  2. Item 2
  3. Item 3

Step 13. Add an unordered list. This is very similar to the <ol> tag, but put a ul instead of an ol. List items are done the same way, but it will look like this

Step 14. Add any 2 logical character tags. Examples of this would be <address>, <cite>, or <code>. The <address> tag looks like

this
The <cite> tag looks like this.

Step 15. Add any 4 physical tags. Examples of this are <b>, <u>, <i>, or <span>. Bold text is the <b> tag and looks like this. Underlined text is the <u> tag, and looks like this. Italicized text is the <I> tag and looks like this. The <span> tag can be used to change the text in multiple ways such as size, letter spacing, and word spacing. Here is an example of   Letter spacing being changed

Step 16. Insert at least 3 graphics. To do this, you must add an <img src> tag, with an ="filename.extension". Here is an example <img src="graphic.jpg" />. To add text to a graphic when a user floats over it, just add alt="text you want to appear". Here are 3 graphics for you to view. image 1image 2image 3

Step 17. Insert at Least 3 special Characters. to do this, you need to add a & a # then a series of numbers representing the character. Here are 3 examples: ® © §

Step 18. Add at least 3 different style horizontal lines. To do this, you have to add the <hr> tag. Then you have to add the style="color:color;width:size" for examply <hr style="color:blue; width:100%" /> Here are 3 examples:




Step 19. Add at least 3 section id's used to link within a single document (text). To do this, you need to add id="idname" to your headings. I will put links to 3 different parts of this page now.

step 1 · step 2 · step 3

Step 20. Add at least 1 section id used as a link in a single document(graphic). To do this, you have to add the id="idname" tag to a graphic and make a link to it.

link to the graphic number 2

Step 21. Add links to 4 other pages on the main page. To do this, you must put a <a href="pagename.extension"> then close it with </a> Here are links to the other pages of this site.
link to page 2 · link to page 3 · link to page 4 · link to page 5

Step 22. In secondary pages, include links back to the home page. Check the other pages now, and see that I have included links back to the home page, to do this, once again just add the <a href> tag, this time, put in index.htm since that is the name of the home page, it will look like this: <a href="index.htm">link back to the home page</a>. the words between the <a href> and the </a> are the words that will show up as the link.

Step 23. Add at least 2 links to other pages on the internet. This is just like the other links, but this time in the <a href=""> you would type in http://www.yahoo.com for example. Your link will look like this <a href="http://www.yahoo.com">Link to Yahoo!</a>. Here are 3 links to outside pages:

link to Yahoo! · link to Google · link to Ask Jeeves

Step 24. At least 1 e-mail link. To do this, type in the a href just like a link, but type in mailto:emailaddress, like this <a href="mailto:myemail@microsoft.com">Click to email me</a>. Here is a link to an e-mail address: Jeffrey's Email address

Step 25. Add the <font> tag with size, color, and face. This is done just how it sounds, add a <font style="size:size;color:color;face:face> Here is a sentence with the tag <font style="size:4;color:blue;font-weight:bold">: Size=4, color=blue, and face=bold

Step 26. Add a background image. To do this, in your body tag, you need to add a style="background:color url(filename.extension)", here is what I used on pages 2-5 <body style="background:white url(bg.gif)">

Step 27. Add an Animated Gif to your page. To do this, just find an animated gif off of the internet, and add a <img src="filename.extension" /> tag to your page and an animated gif will appear. Here is an animated gif H E L L O

Step 28. Add an Image Map to your site. To do this, you need a bit more experience with HTML. You have to have an image, where you can click on it and it will take you someplace. For my example, I will use this image: It will take you to page 2.