VISJ 321: HTML In Class #1

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?
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: