Skip to content

Read and Write

Learn more about how to write HTML by analyzing and copying an example!

Part 1

  1. Start by opening mypage.html in a new tab.
  2. Take a look at the page, its layout, and its content.
  3. Right-click the “Woof?” text and click “Inspect”.
    • This should bring up the developer tools and show the source code alongside the rendered page.
    • Look at the line of code that is highlighted. It corresponds to the “Woof?” text!
  4. Select the element picker in the dev tools pane.
    • Click toolbar button or press Ctrl+Shift+C (or Cmd+Shift+C on a mac).
    • Move your cursor around the page. It highlights the code for each selected element.
  5. Take a look at this code snippet from the page: 
    <p>
I hope you will enjoy
taking this class with me!
</p>
    • What is different about the formatting in the code above vs. what is rendered on the page?

       

  6. Use the element picker and source code to answer the following questions:
    1. What do the h1, h2, h3, etc. tags do? What is the difference between them?
    2. What does the br tag do? What is interesting about this tag? (Hint: Anything “missing”?)
    3. What do you think the p tag does/mean?
    4. What do the b and i tags do?
    5. What tag is for links? What tag is used for images? What do you need to include inside the tag to reference a specific linked page or image?
    6. What does the title attribute do for an image? What do you think the alt attribute does? (Hint: hover your mouse over the image on the page)
    7. How do you make an ordered/numbered list? How do you make an unordered/bullet list?

Part 2

  1. Minimize the page and its source code. Now, we’re going to “code in the dark”.
  2. Open Notepad, TextEdit, or another plain text editor (Vim?) that does not have any IDE assistance.
  3. Start by typing the basic template code here (you should maybe try to memorize this too): 
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>YOUR NAME's Page</title>
</head>

<body>
</body>

</html>
  4. Your goal is to make a page that looks like the following:

Hi, I’m YOUR NAME.

I like coding in the dark.

Hobbies

I also like to:

  1. Play video games
  2. Watch Netflix
  3. Sleep

Check out:

  1. Of course, not exactly. Make the page reflect you! Have at least three items in both lists.
    • Put in your own hobbies instead of those three.
    • Make the links relevant to you (e.g. your social media, favorite sites, etc.)
    • Replace YOUR NAME with… well, your name.
  2. Once you’ve tried your best, save the page as mypage.html and open it in a web browser to check.
    • Afterwards, use VS Code to make any corrections. Feel free to reference my page too!
  3. Submit mypage.html to Canvas when you’re done.