Skip to content

5th Grade, McCrae, 03-18 – Web Design 5: Links

Published on

    1. There is one video for today:
      1. Mr. Smith's Instructions
    2. Objective:
      1. Students will be able to:
        1. Edit and save HTML code.
        2. Link a web page to another web page.
    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, Typing.com: J, F, and Space, Web Design 3: Bold and Italics, Field Trip Storyboard, Typing.com: U, R, and K, Web Design 4: Images. Typing.com: D, E, & I, Web Design 5: Links
  2. Today's Lesson: Web Design 5: Links
    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 an <a> tag that successfully links the web page to another website.
    2. We're going to continue with the work we did during the previous classes, spending 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. Mr. Smith's 8th graders use a fancier program called "VS Codium," which you're also allowed to use, but this is far from a requirement.
      5. (Even Chromebooks have text editors, though Mr. Smith doesn't use those.)
    4. Find and open your index.html file in your Documents folder. (Remember that we backed our work up to Google Drive last class, your work should be there if you're working from home.
    5.  In your index.html file, look for a good place between <body> and </body> where you could link to another website.
      1. For example, if my website included "I like to put my lessons on FouloisTech.info for my students to see," I might want to make that sentence into a link.
      2. The following code lets me do that.
      3. <a href="https://fouloistech.info">I like to put my lessons on FouloisTech.info for my students to see.</a>
      4. The resulting website would look like this:
        1. I like to put my lessons on FouloisTech.info for my students to see.
      5. Whatever's between the quotation marks is the URL, or "web address." If it's pointing to another website, it needs to include the "https://..." in front of it. If it's pointing to another page on the same site, the file name might be enough.
      6. Whatever's between the <a> and </a> tags shows up as the link, usually underlined and a different color from the rest of the text on the website. You can even use these tags around an image tag to make the image be a link!
    6. If you break something, CTRL-Z is useful! If you need to start over, the starting code is right there to copy.
    7. Go to Canvas to hand in your html!
  3. This is an IN-CLASS assignment, NOT HOMEWORK. There are no extended deadlines for the remainder of this Quarter!