Exercise: HTML Basics

In this exercise, we will create (at least) two webpages that incorporate all of the stuff that you learned in the reading assignment.

Webpage 1 characteristics.

This first webpage will be a bio about… you! To ensure you include everything, follow these steps.

  1. Open Visual Studio Code
  2. Create a new file:
    • File > New File.
    • Save the file as assignmentOne.html or whatever naming system works for you.
      Now that your file has the .html extension, Visual Studio Code is ready to help you populate the file with the basic things that every HTML file needs.
    • Start to type in ‘html’ in the blank workspace.
      A few options should generate automatically. Select the one that looks like html:5. Once you select it, the code that you need should appear.
  3. Give your document a new title that reflects who you are between the <title> tags.
  4. Add metadata tags that list the author (you) and a brief description.
  5. (optional) Incorporate a favicon. Here’s a good source for pre-made free favicons.
  6. Now we will start adding content in the <body> of the document.
  7. Your page should have clear structural hierarchy with good use of <h1> and smaller tags.  Place an <h1> tag at the very top of your page, just after the <body> tag. Put your name between the tags, as in:  <h1>Claire Jordan</h1> .
  8. While you are at it, add an id attribute named ‘top’ to the <h1> tag as in
    <h1 id="top">Claire Jordan</h1>. We will use this id in a later step.
  9. Include at least one ordered or unordered list of interesting (or not ?) things about yourself.
  10. This list should include at least one nested list item.
  11. Use css to add custom styling to your list.
  12. Include a short section with the heading <h2>Emphasis</h2> that demonstrates the use of <strong>,<em>, <i>, <b>, and <u> tags.
  13. Incorporate a small picture of yourself into the page.  Add a link to the picture that, in turn, links to a larger image of yourself.  Example:
    <a href ="bigMe.jpg"><img src="smallMe.jpg" alt="small picture of me"></a>
  14. Make sure the same link has both a title and alt attribute.

Create a second webpage (and folder)

  1. Create a new folder named ‘details’ within your 4020 (or 6020) folder.
  2. Within that folder, create a new html file.
    • This page can be about any detail about you; your home town, your hobby, or anything else you want. Be sure the file is properly saved inside of the details folder.
  3. Add an <h1> header that states the general theme of this page (i.e. My Hometown).
  4. Add three additional <h2> headings. (i.e. ‘Favorite Places’, ‘High School’, ‘The part I hated most’, etc.)
  5. Add an id to each of the <h2> headings such as <h2 id='favorites'>Favorite Places</h2>.
  6. Add an internal stylesheet to your document and set the height of all h2 tags to 1500px.
    • <style> h2 {height: 1500px;} </style>
    • The reason for this step is to add a lot of space between each of your headings. In a bit you should understand why you want that space.
  7. Create a link back to assignmentOne.html.
  8. Create an email link with at at least one detail such as subject.
  9. Style your links. Links are underlined by default but it’s pretty easy to remove that underline, make the font larger or a different color, etc.
  10. Go back to the assignmentOne.html file. Add a new heading titled links.  <h2 Links</h2> .
  11. Underneath the heading create an unordered list.
    • For the first item on the list, create a link to the ‘details’ html file.
    • For the second item, create a link to one of the ids inside of the ‘details’ html file.
      • For example, if the html file is named about.html and one of your id tags is titled ‘badPlaces’ (as in <h2 id=”badPlaces”> ) the link should read something like <a href="details/about.html#badPlaces">Bad Places in Smithton</a>
    • Create a third link to another id within the ‘details’ file.
    • Create a link to the top (<h1>) heading of assignmentOne.html. <a href = "#top">Home</a>.
    • Create a link to an external site of your choice (reddit.com, cnn.com, etc.)
  12. Test your links to see what takes place! Look carefully at the URLs in your browser’s address bar when you visit the html file inside of the details folder. In addition to the file path, you should also see the portion of the URL that targets each ID.