Class coding: HTML #2

April 19, 2017

This week, we start with the foundation from earlier this week 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. Open Chrome and TextWrangler
  2. In Chrome, go to File > Open File… and open “index.html”
  3. Command-Tab to select TextWrangler and write code
  4. Command-Tab to select Chrome
  5. Command-R to refresh your webpage

You’ll do the following:

  1. Use/create WWW folder; create “index.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

Too easy? Try these:

  1. Change background color of page
  2. Change style of top headline to Verdana font family, a different color, and centered alignment
  3. Change style of your intro paragraph to 30px, a different color, and centered alignment

Class Coding: HTML 1

April 17, 2017

After completing your first Codecademy assignment in Web Fundamentals (HTML I) and showing me your completion badges, do the following:

  1. Preparation:
    • Create a desktop folder called WWW
    • Open TextWrangler (or another text editor), create a new file called “index.html” and save to WWW
    • Save two images (ideally with short names) to your WWW folder
  2. Place your structural tags
  3. Create a title
  4. Add a first-level headline and one paragraph
  5. Bold a few words. Italicize a few other words.
  6. Insert an image
  7. Add a second-level headline and another paragraph
  8. Create a hyperlink to the SOJ homepage within this paragraph
  9. Add a third-level hed and another image
  10. Make this second image into a hyperlink

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

To view a webpage’s source code

  • Chrome: View > Developer > View Source
  • Firefox: Command-U OR Tools > Web Developer > Page Source
  • Safari (why are you using Safari???): Develop > View Page Source

In-class: HTML #2

November 16, 2016

This week, we start with the foundation from earlier in the semester 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. Open Chrome and TextWrangler
  2. In Chrome, go to File > Open File… and open “index.html”
  3. Command-Tab to select TextWrangler and write code
  4. Command-Tab to select Chrome
  5. Command-R to refresh your webpage

You’ll do the following:

  1. Use/create WWW folder; create “index.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

Too easy? Try these:

  1. Change background color of page
  2. Change style of top headline to Verdana font family, a different color, and centered alignment
  3. Change style of your intro paragraph to 30px, a different color, and centered alignment

In-Class #1: HTML1

January 28, 2015

After completing your first Codecademy assignments in Web Fundamentals (HTML I and Personal Webpage) and showing me their completion badges, do the following:

  1. Preparation:
    • Create a desktop folder called WWW
    • Open TextWrangler (or another text editor), create a new file called “index.html” and save to WWW
    • Save two images (ideally with short names) to your WWW folder
  2. Place your structural tags
  3. Create a title
  4. Add a first-level headline and one paragraph
  5. Bold a few words. Italicize a few other words.
  6. Insert an image
  7. Add a second-level headline and another paragraph
  8. Create a hyperlink to the SOJ homepage within this paragraph
  9. Add a third-level hed and another image
  10. Make this second image into a hyperlink

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

To view a webpage’s source code

  • Chrome: View > Developer > View Source
  • Firefox: Tools > Web Developer > Page Source
  • Safari (why are you using Safari?): Develop > View Page Source