Web Development‎ > ‎

HTML Coding

Goal: Create a web page using HTML codes in a text editor program.

Directions:
  • Watch & listen to each videos, in order.
  • Do what it says and shows, as you watch.
  • Use earphones to listen.
  • Make this window small, and move it to the right side of your screen.
  • Pause, if you need time to do something.
  • Rewind, if you need to see something again.
  • Note: For the first day, students need at least 20 minutes to finish the first part and save.

Part 1

  1. Create and save a basic web page.  DropBox (old)
  2. Open an HTML page in Notepad and Chrome.  DropBox
  3. Format words with bold.  (DropBox)
  4. Underlining, tags & codes.  (DropBox)
  5. Create paragraphs.  (DropBox)
  6. Underline & formatting review. (DropBox)
  7. Create heading & different styles.   (DropBox)
  8. Insert horizontal rules.   (DropBox)
  9. Center the heading.   (DropBox)

If you are completely done with this part, 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.

STOP!!!  Did you ask your teacher if you could go on?


Part 2

  1. Change color of a word.   (DropBox)
  2. Try different font sizes.   (DropBox)
  3. Change both size & color.   (DropBox)
  4. Create a link to Google.   (DropBox)
  5. Make a NASA link.   (DropBox)
  6. Use Google Chrome to find and insert an image.  (DropBox) - Hint: Most any image will work, not just JPG ones.
  7. Change the image width.   (DropBox)
  8. Put a border around an image.   (DropBox)
  9. Change background color.   (DropBox)
  10. Change the text color.   (DropBox)

If you are completely done with this part, 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.

STOP!!!  Did you ask your teacher if you could go on?

TEACHER - Decide if Part 3 or 4 is next, then tell the student.


Part 3

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

If you are completely done with this part, 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.

WAIT!!!  Please ask your teacher before continuing!

Part EMAIL!!!!

NOW:  Email the file to your teacher!!!
  1. Close NotePad and Chrome.
  2. Open your email
  3. Compose a new message
  4. Attach the file
  5. Subject:  My HTML Tutorial Web Page
  6. To:  wissnera+[hour]@waylandunion.org
  7. Click "Send".
  8. Go on to Part 4!


Part 4 - Wild Animal Report

Part 4.1.A
  1. Close Notepad and Chrome.
  2. Watch and follow along with:  Video A: Getting Started!
    • Think about what to write.
    • Write one paragraph.
    • Save it correctly.
  3. Raise your hand, and politely ask your teacher to check your assignment.

Part 4.1.B
  1. Watch and follow along with: Video B: Transforming it into a Web Page
    • Review helpful references
    • Add basic tags
    • Then add title
    • Maximize in browser and text editor
    • Review of part II directions
  2. Raise your hand, and politely ask your teacher to check your assignment.

Part 4.2 -- Wild Animal Report -- Full Directions

Make a web page with the following using Notepad...
  1. Pick a wild animal to write about. This should be a wild animal that you already know a lot about.
  2. Save it as [date]animal[hour][your username].htm (hint) in your html folder, ex. 20080129animal9username.htm
  3. For the title bar, make it say the nameof a wild animal, example: Crickets.
  4. In the body, write a heading that is centered and heading style 1.
  5. Make a horizontal rule under the heading.
  6. Write an interesting paragraph about this wild animal.  Include...
    • Imagine that you are writing for a person who has never heard of this animal.
    • The paragraph must be at least five complete sentences.
    • Where does this animal live?
    • What are the features or traits of this animal? (Be specific.)
    • What is unique about this animal?
    • Write anything else you can think of about this wild animal.
  7. Draw a horizontal rule under your paragraph.
  8. Link to all the web pages you made this year in class.
  9. Link to Google and Yahoo.
  10. Link to three web sites with information on your animal.  (Hint: Use Google to find good web sites.)
  11. Insert at three pictures of your animal in the wild.  (Hint: Use Google's Image Search.)
  12. Color the background and the text.  (Hint: Add codes to your first BODY tag.)
  13. In your paragraph, make 3 places bold, 3 places italic, and 3 places underlined.
  14. In the paragraph, change the font color in nine different places:  3 blue, 3 green, and 3 red.
  15. SAVE IT!!!
  16. Raise your hand. Politely ask your teacher to take a look at it.
  17. Change the color of additional words to make your page more interesting to read.
  18. Add more pictures of this wild animal.
  19. If a picture is large, make it smaller, between 300 and 500 pixels wide, so that more can be seen.
  20. Add more links to web sites about this wild animal.
  21. Add more writing about this wild animal, perhaps an interesting paragraph or two.

  1. HINT:  How to link to a page YOU already made.   (DropBox)


                                                          If you are completely done with this part, 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.
                                                          WAIT!!!  Please ask your teacher before continuing!



                                                          Part 5

                                                            Ask your teacher what to do for part 5.





                                                          STOP -- Do not do anything below this line.  These are notes for the teacher.


                                                          Other Hints:

                                                          • 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.



                                                          Older Directions:

                                                          1. Open a text editor program (Notepad).   (DropBox)
                                                          2. Write the Head section of the web page, including the Title of the page.   (DropBox)
                                                          3. Write the Body section of the web page, include a sentence.   (DropBox)
                                                          4. Save it as an HTML document (and create a folder, if needed).   (DropBox)
                                                          5. Open the page in a web browser (Internet Explorer).    (DropBox) -- (Also watch to start the second day.)
                                                          6. Open it up in a text editor (Notepad).    (DropBox) -- (Also watch to start the second day.)
                                                          7. Arrange those two windows side-by-side.   (DropBox)
                                                          8. Bold a word.   (DropBox)
                                                          9. Italicize words.   (DropBox)
                                                          10. Create paragraphs.   (DropBox)
                                                          11. Underline a word.   (DropBox)
                                                          12. SEVERAL STEPS SKIPPED HERE
                                                          13. Insert an image.   (DropBox)
                                                          14. SEVERAL STEPS SKIPPED HERE
                                                          15. * Skip This Step * -- 
                                                          16. * Skip this Step * -- How to link to your own page in a different folder.   (DropBox)

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

                                                          Comments