VISJ 321: HTML In Class #4

April 14, 2014

Today we learn about CSS, a more elegant and streamlined way of adjusting the style of our webpages (see the previous three weeks for review). The following instructions are based on this week’s Codecademy module: CSS: An Overview:

As always, remember these basics for coding and previewing your work:

To preview in TextWrangler:

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

Complete these instructions:

  1. Create a WWW folder (or use your previous one). In TextWrangler, create two files: “index4.html” and “stylesheet.css” – save BOTH to your WWW folder.
  2. Add structural tags and a <title>
  3. In your HTML: Create a first-level heading and two paragraphs of text; make the second paragraph a different font; add a hyperlinked word; create a <div> of any size and color
  4. In your CSS:
    1. Change background color of <body>
    2. Make the font size of <h1> 36px
    3. Make your <p> red
    4. Give your <div> a border of 1px and a background color of blue
    5. Create a comment
  5. In your HTML, link to the CSS (three parameters, end with /) – Preview in your browser
  6. In your HTML, add a second <div></div> tagset – what happens?

VISJ 321: HTML In Class #3

April 2, 2014

Building on the previous two weeks, today we’ll play with tables and divs (learned in this week’s Codecademy module: Web Fundamentals: HTML Basics III):

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 “index3.html”; add structural tags and a <title>
  2. Create a first-level heading
  3. Create a table with three rows and three columns
  4. Give your table a 2px border
  5. Give it a header row
  6. Below your table, create a <div> – make it 100px wide, 50px high, and give it a color.
  7. Turn your div into a clickable link.

Too smart for all this? See if you can…

  1. Change the background color of a row or cell in your table?
  2. Get rid of your table’s borders? Give your div a border?
  3. Put text in a div? Center that text horizontally? (note: vertical is kind of complicated at this point)
  4. Give your div a border? Give it rounded corners to look more like a button?

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?