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 webpage is sort of a bio about you, yes you yourself! To get off to a nice easy start, follow these steps.

  1. Create a folder named 4020 or 6020 in Dropbox or wherever it makes sense to you to do so.
  2. Open Visual basic, select File, Open folder, and open the folder that you just created. Now any file that you create will save automatically to the 4020 folder and be visible in the sidebar as well.
  3. create a new file as in:
    1. File > New File.
    2. Save the file as assignmentOne.html or something of the sort.
      Now that your file has the html extension as part of its name, Visual Basic is ready to help you create the basic things that every HTML file needs.
    3. 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. Give your document a new title that reflects who you are (between the <title> </title> tags) and add your content after the <body> tag.
  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.  There are also lots of generators out there for rolling your own favicons.
  6. 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>Emuel Aldridge</h1> .
  7. Include at least one ordered or unordered list of interesting (or not 🙂 things about yourself.
  8. This list should include at least one nested list item.
  9. Use css to add a bit of custom styling to your list.
  10. Include a short section with the heading <h2>Emphasis</h2> that demonstrates the use of <strong>,<em>, <i><b>, and <u> tags.
  11. Incorporate a small picture of yourself into the page.  Add a block 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>
  12. Make sure the same link has both a title and alt tag.

Create a second webpage (and folder)

  1. Create a new folder (AKA directory) named details within your 4020 (or 6020) folder.
    1. Now create a new html file (this one can be about your home town or anything else that interests you) and save it inside of the details folder.
    2. Add an <h1> header that states the general theme of this page (ie. my hometown) .
    3. Add three additional <h2> tags</h2>  with subheadings such as 'Favorite Places', 'High School', 'The part I hated most', etc.
    4. Add an id to each of the <h2> headings such as
      <h2 id='favorites'>Favorite Places</h2>
    5. Add an internal stylesheet to your document and set the height of all h2 tags to 1500px as in  <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.
  2. Re-open assignmentOne.html.  Add a new heading titled links.  <h2>Links</h2> . Underneath the heading create an unordered list.
    1. For the very first item on the list create a link to the html file inside of the details folder.
    2. For the second item create a link to one of the ids inside of the same 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 Tifton</a>
    3. Create yet a third link to another id within the same file.
    4. Link to an external site such as cnn.com.
    5. Open the html page inside of the details folder and create a link back to assignmentOne.html. (hint: this one will require ../ as part of the link's path)
    6. 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.
    7. 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.