HTML Tutorial

Goal: Learn to use some common HTML codes to create a web page using a basic text editor program.

Preparation: Resize this window so it takes up only the right side of your screen. Also, you will need a set of headphones to hear the videos.

Directions: Click on each link below to watch and listen to each video. As you watch, do exactly the same thing as it does in each video.

Hints

• You can pause or rewind any video, if you need time to do something, or if you need to see something again.
• If you need help, figure out if your neighbor knows how to do it. If they do, you may whisper them a question. No one else should be able to hear your whisper.
• If your neighbor doesn't know, raise your hand. When your teacher comes over, politely ask your teacher the question.

Part I

1. Open a text editor program (Notepad).
2. Write the Head section of the web page, including the Title of the page.
3. Write the Body section of the web page, include a sentence.
4. Save it as an HTML document (and create a folder, if needed).
5. Open the page in a web browser (Internet Explorer). -- (Also watch to start the second day.)
6. Open it up in a text editor (Notepad). -- (Also watch to start the second day.)
7. Arrange those two windows side-by-side.
8. Markup one word in the sentence so it is bold.
9. Change a different word to italics.
10. Format the body so each sentence is a paragraph.
11. Underline one word.
12. Create a heading and try different heading styles.
13. Insert a couple horizontal rules (lines).
14. Center the heading.
15. Learn how to change text color and change the color of a word.
16. Try different sizes for the font.
17. Change the size and the color of the same word.
18. Create a link to Google.
19. Make another link, this one to NASA.
20. Underneath a horizontal line, insert an image of a USA flag.
21. Change the width of the image.
22. Put a border around the image.
23. Change the color of the background.
24. Change all the text to a different color.
25. Link to a page you already made this year.

If you are completely done with Part I, then...

1. Maximize your text editor (Notepad)
2. Maximize the web browser that is showing your page
3. Raise your hand, and politely ask your teacher to check your assignment.

Part II

1. How to link to your own page in a different folder.
2. Creating an ordered (or numbered) list.
3. Creating an unordered (or bulleted) list.
4. Insert a table.
5. Add cells and rows to a table.
6. Center a table.
7. Change the background color of a table.
8. Pad the cells in a table.
9. Adjust the width of a table.
10. Change attributes of a single table data.

If you are completely done with Part II, then...

1. Maximize your text editor (Notepad)
2. Maximize the web browser that is showing your page
3. Raise your hand, and politely ask your teacher to check your assignment.

This work by Aaron Wissner is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.