{"id":9570,"date":"2026-01-29T05:15:18","date_gmt":"2026-01-29T10:15:18","guid":{"rendered":"https:\/\/fouloistech.info\/ma\/?p=9570"},"modified":"2026-02-03T18:15:10","modified_gmt":"2026-02-03T23:15:10","slug":"5th-grade-mccrae-01-29-web-design-1-intro-to-html","status":"publish","type":"post","link":"https:\/\/fouloistech.info\/ma\/2026\/01\/29\/5th-grade-mccrae-01-29-web-design-1-intro-to-html\/","title":{"rendered":"5th Grade, McCrae, 02-06 – Web Design 1: Intro to HTML"},"content":{"rendered":"

\"\"<\/p>\n

    \n
  1. \n
      \n
    1. There is one video for today:\n
        \n
      1. Mr. Smith's Instructions<\/a><\/li>\n<\/ol>\n<\/li>\n
      2. Objective:<\/strong>\n
          \n
        1. Students will understand the basics of HTML and be able to make modifications to a website.<\/li>\n<\/ol>\n<\/li>\n
        2. Announcements:<\/strong>\n
            \n
          1. The last day for any late work is Friday, March 13th!<\/strong><\/span>\n
              \n
            1. All work not completed by then will remain a zero.<\/li>\n
            2. Any work assigned after then is due the same day.<\/li>\n<\/ol>\n<\/li>\n
            3. Previous lessons: Web Design 1: Intro to HTML<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n
            4. Today's Lesson: <\/strong>Web Design 1: Intro to HTML<\/a>\n
                \n
              1. Grading Rubric:
                \n\n\n\n\n\n
                4 Pts<\/td>\nA text file named \"index.html\" is handed in.<\/td>\n<\/tr>\n
                3 Pts<\/td>\nThe text file includes the starter code included below.<\/td>\n<\/tr>\n
                3 Pts<\/td>\nThe text file includes three sets of paragraph tags with at least one sentence in each.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n
              2. We're going to try something Mr. Smith has never attempted with 5th grade before: Web design.\n
                  \n
                1. This is currently taught to 8th grade every year. Mr. Smith has taught this to students as young as 6th grade before.<\/li>\n
                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.<\/li>\n
                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.<\/span><\/li>\n<\/ol>\n<\/li>\n
                4. We'll begin by opening a basic text editor.\n
                    \n
                  1. On the Windows computers in the lab, that's Notepad<\/strong>.<\/li>\n
                  2. If you're doing this on a Mac at home, that's TextEdit<\/strong>.<\/li>\n
                  3. Mr. Smith likes using Linux, he'll be using a program literally called \"Text Editor<\/strong>.\"<\/li>\n
                  4. (Even Chromebooks have text editors, though Mr. Smith doesn't use those.)<\/li>\n<\/ol>\n<\/li>\n
                  5. In that new document, copy\/paste the code below.
                    \n\n\n\n
                    \n
                    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<link rel=\"stylesheet\" href=\"style.css\">\r\n\r\n<title>Title Goes Here<\/title>\r\n\r\n<\/head>\r\n<body>\r\n\r\n<h1>Title Goes Here<\/h1>\r\n\r\n<p>Hello, world.<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n
                  6. Mr. Smith will explain what most of these do in class.<\/li>\n
                  7. Save your work. You'll be asked what to name it. It MUST be named \"index.html\" (without the quotes) for this to work.<\/li>\n
                  8. Find your saved file on your computer and drag it into a browser window. You should see your first web page!<\/li>\n
                  9. OK, but it's rather generic. Change the title (it's in two places, change both!) and the \"Hello, world.\" message.<\/li>\n
                  10. Save your work and reload the browser window. Did your changes work?<\/li>\n
                  11. Add two more paragraphs. (Copy\/pasting is your friend!)<\/li>\n
                  12. Save your work again and check it in a web browser.<\/li>\n
                  13. If you break something, CTRL-Z is useful! If you need to start over, the starting code is right there to copy.<\/li>\n
                  14. Go to Canvas to hand in your work.<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n