To Tutorials and Projects

IT 231 -- Tutorial 1

Completed in class: Jan 11.

Goal: Create a web page with some of your personal information.

Follow these steps to complete the tutorial. Include source code comments that explain what each section is on your webpage. Source code comments are worth 10% for this tutorial.

  1. Start your webpage with the HTML5 validation header.
  2. Add start and end html elements with the language set to english:
    <html lang="en">
</html>
  3. Add start and end head elements.
  4. Add start and end body elements.
  5. Add a title to the head section: Stan Smith Personal Information (replace with your name)
  6. Add an h1 header to the body section: Stan Smith Personal Information (replace with your name)
  7. Add an h2 header to the body section: Hobbies
  8. Add an ordered list or unordered list of your hobbies.
  9. Add at least two more h2 headers and ordered or unordered lists that display personal information, for example favorite movies, favorite songs, favorite video games, etc.
  10. Add an image of your choice and paragraph (p element) that displays a caption for the image. The image can be of you or of anything else that relates to your personal information.
  11. Include an interesting fact or other piece of interesting information that is initially hidden on your webpage that is made visible when a button is clicked. See the Birthday Riddle Example.
  12. Add an external CSS style sheet that sets the font, background color, and text color for the body. Use a sans serif font. Also, set the width and height of the image.

Grading Breakdown: Functionality: 60, Creativity: 20, Source Code Comments: 10, Source Code Header (includes name, tutorial number, and submit date): 5, Correct Zipfile: 5.