Skip to content

5th Grade, McCrae, 02-11 – Web Design 2: Headings

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, Web Design 2: Headings
  2. Today's Lesson: Web Design 2: Headings
    1. Grading Rubric:
      4 Pts A text file named "index.html" is handed in.
      3 Pts The text file includes the starter code provided on the first day of the unit.
      3 Pts The text file includes a title formatted with the <h1> and </h1> heading tags, along with a minimum of two subtitles made with smaller heading tags.
    2. We're going to continue with the work we did last class, but spend some time adding to it.
      1. We're still doing work that's taught to 8th grade, but we are going at a slower pace than what is expected for them.
      2. 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. Find and open your index.html file in your Documents folder. (If you missed last class, this is work you should have made up before today. It wouldn't be in your Documents folder yet, but if you handed it in via Canvas we can download it and put it there.)
      1. Look for the line where you added your title. Originally it looked like this: 
        • <h1>Title Goes Here</h1>
      2. The h1 tells the web browser to make the text be large and bold.
      3. Let's add a subtitle underneath. It should look the same but instead of <h1> and </h1> it could be h2 or h3.
      4. (We can go higher but the larger the number, the smaller the words, and it gets harder to read.)
      5. Subtitles tell us what the next few paragraphs will be about, so the text between your tags should relate to the paragraphs that are under it.
        1. Example: If I have 3 paragraphs about how I can dig straight down in Minecraft without falling into lava, I might have a subtitle that says "Digging Down in Survival And Surviving" or something to that effect.
      6. Save your work again and check it in a web browser.
      7. If you're happy about your first subheading, make another below your existing paragraphs and add more paragraphs.
        1. (Copy/Paste is your friend!)
    5. If you break something, CTRL-Z is useful! If you need to start over, the starting code is right there to copy.
    6. 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!