Skip to content

5th Grade, McCrae, 01-29 – Web Design 1: Intro to HTML

Published on

    1. There is one video for today:
      1. Mr. Smith's Instructions
    2. Objective:
      1. Students will understand the basics of HTML and be able to make modifications to a website.
    3. Announcements:
      1. The last day for any late work is Friday, March 13th!
        1. All work not completed by then will remain a zero.
        2. Any work assigned after then is due the same day.
      2. Previous lessons: Web Design 1: Intro to HTML
  2. Today's Lesson: Web Design 1: Intro to HTML
    1. Grading Rubric:
      4 Pts A text file named "index.html" is handed in.
      3 Pts The text file includes the starter code included below.
      3 Pts The text file includes three sets of paragraph tags with at least one sentence in each.
    2. We're going to try something Mr. Smith has never attempted with 5th grade before: Web design.
      1. This is currently taught to 8th grade every year. Mr. Smith has taught this to students as young as 6th grade before.
      2. Naturally, this will not be as advanced as the 8th grade lessons, but what you accomplish will help Mr. Smith decide if this unit will be repeated.
      3. This is one of those lessons where the video tutorial is super important. If you aren't in class, you NEED to watch it.
    3. We'll begin by opening a basic text editor.
      1. On the Windows computers in the lab, that's Notepad.
      2. If you're doing this on a Mac at home, that's TextEdit.
      3. Mr. Smith likes using Linux, he'll be using a program literally called "Text Editor."
      4. (Even Chromebooks have text editors, though Mr. Smith doesn't use those.)
    4. In that new document, copy/paste the code below.
      <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">

<title>Title Goes Here</title>

</head>
<body>

<h1>Title Goes Here</h1>

<p>Hello, world.</p>

</body>
</html>
    5. Mr. Smith will explain what most of these do in class.
    6. Save your work. You'll be asked what to name it. It MUST be named "index.html" (without the quotes) for this to work.
    7. Find your saved file on your computer and drag it into a browser window. You should see your first web page!
    8. OK, but it's rather generic. Change the title (it's in two places, change both!) and the "Hello, world." message.
    9. Save your work and reload the browser window. Did your changes work?
    10. Add two more paragraphs. (Copy/pasting is your friend!)
    11. Save your work again and check it in a web browser.
    12. If you break something, CTRL-Z is useful! If you need to start over, the starting code is right there to copy.
    13. Go to Canvas to hand in your work.
  • This is an IN-CLASS assignment, NOT HOMEWORK. Please stay on task to complete this work by the end of class!