VISJ 321: HTML In Class #2

March 26, 2014

This week, we start with the foundation from last time and add lists and styles (learned this in this week’s Codecademy module: Web Fundamentals: HTML Basics II):

Remember these basics for coding and previewing your work:

To preview in TextWrangler:

  1. In Chrome, go to File > Open File… and open “index2.html”
  2. Command-Tab to select TextWrangler and write code
  3. Command-Tab to select Chrome and Command-R to refresh your webpage

You’ll do the following:

  1. Use/create WWW folder; create “index2.html”; add structural tags
  2. Create a comment inside that says “In-class assignment #2: HTML2”
  3. Create a first-level heading and an intro paragraph
  4. Create a second-level heading and an ordered list of your top three books, movies, or bands
  5. Create a fourth-level heading and an unordered list of skills you possess
  6. Add a fourth item to the ordered list (step 4) and add an image to it
  7. Change background color of page
  8. Change style of top headline to Verdana font family, a different color, and centered alignment
  9. Change style of your intro paragraph to 30px, a different color, and centered alignment

VISJ 321: HTML In Class #1

March 19, 2014

Today we delve into the world of HTML coding! You should all have completed Web Fundamentals unit 1, “HTML basics” (I’ll be checking badges at the start of class) in Codecademy. Today you’re going to create a very simple webpage with those skills.

First, do the following:

  1. Preparation:
    • Create a desktop folder called WWW
    • Open TextWrangler (in Macintosh HD > Applications), create a new file called “index.html” and save to WWW
    • Save two images (use short names like “image1.jpg”) to your WWW folder
    • Open Chrome (also in Macintosh HD > Applications)
  2. Place your structural tags (these are the initial tags that make a blank document into a website. There are four, three of which are in pairs. Do you remember them?)
  3. To preview in TextWrangler
    • In Chrome, go to File > Open File… and open “index.html”
    • Command-Tab to select TextWrangler and write code
    • Command-Tab to select Chrome and Command-R to refresh your webpage

Start designing

Once your groundwork is laid, you’ll have … a blank document. This will become your webpage. Complete the following steps:

  1. Create a title
    • Don’t just write a line of text – you’ll need to use a specific HTML tag that goes in a specific location
  2. Add a first-level headline and one paragraph
  3. Bold a few words. Italicize a few other words.
  4. Insert an image (pay attention to punctuation like quotation marks!)
  5. Add a second-level headline and another paragraph
  6. Create a hyperlink to the SOJ homepage within this paragraph
  7. Add a third-level hed and another image
  8. Make this second image into a hyperlink

Finished already?

I’ll be checking your work when you’re done, but if you’re a real go-getter, see if you can make some of the following changes. A Google search can answer every one of them.

  • The color of text?
  • The background color?
  • The size of an image?