WEEK 2: HTML Building Blocks (Jan 14)

To Do This Week

Codecademy: Learn HTML

This week, complete the Codecademy tutorials on HTML. The entire HTML tutorial should takes about 45-90 minutes. Pace yourself by completing 15-20 minutes at a time. When finished, take a screen grab of your browser showing the tutorial completion score (even if it is under 100%). Ensure the screenshot includes the address bar and login icon in the top-right corner. Submit this image to the Learn HTML assignment in Canvas.
Due: Jan 17

Info-Card HTML

Begin working on your Info-Card project by:

  1. Choosing a topic
  2. Setting up the HTML site and content (we will start this together in class!

Use the info-card example as a guide. Work on this project in class and complete it on your own. Upload your “info-card” folder to the server, and submit the working URL in Canvas. Ensure the project folder is named “info-card” (all lowercase) and contains the following:

  • An index.html file
  • An img folder with an image file

Due: Jan 17

Module Notes

  • Codecademy Issues: Let me know if you encounter any problems accessing or completing the tutorials.
  • All Due Dates are now the Friday of the week and not on Tuesday. I will grade Sunday night. If you will be later than Sunday you MUST Slack message me.
  • Canvas submission are urls to sites on the server.
  • Follow by instructions for naming project folder – all lower case and no spaces.
  • Remember to delete browser cache to see updates on the server.

HTML Overview

The first website, Tim Berners-Lee

HTML evolution: tags, elements, backward compatibility

HTML tag reference

Copy the source code from intro-html  and paste it into Sublime Text. Save it as “intro-html.html” on your computer. Review the following:

  • Text-editors: color coding, line numbers, soft wrap, search
  • Basic structure: anatomy of a webpage, nesting, parent/child elements
  • Text encoding: ASCII/Unicode, entity codes (e.g., &, —,  )
  • Semantic elements: h1, p, div, em, span, small
  • Inline/block elements
  • Attributes: id, class, style

Info-Card HTML Instructions

Each week you will be building on your own “Info-card” about any subject. This week you are to choose a subject, fiction or non-fiction, for an info card and hand-code the HTML with content and one image. Read more about the Info-Card: HTML assignments.

In this example of an info-card, I used ChatGPT and Midjourney for text and image. You are welcome (not obligated) to use AI tools in this class for content, but hold off on using it for code. In the last project I will go over how developers will use these AI tools, but you won’t learn much if you don’t hand-write your code for these projects. These are short assignments that should be completed early in the week as it gives you a quick hands-on task to help you understand the material we cover.

Using Sublime Text:

  1. Create a new file called index.html inside a folder named info-card.
  2. Use the starter HTML code by typing html and pressing Tab.
  3. Grab the code for HTML table and form elements from the source code of this page (this template has some CSS to make the table visible – we will do this next week).
  4. Add the following tags to your page:
    • 1 heading (h1)
    • 1 paragraph (p)
    • 1 image (img in an img folder)
    • 1 table (table)
    • 1 list (ul/ol)
    • 1 form (e.g., multiple-choice question with radio buttons)
  5. Upload the folder to the server and check the URL path: https://dtc-wsuv.org/[your-folder]/info-card.

Download an info-card example project folder 

Info-Card Class List

Blackbird Project Overview

Read the the main assignment this week: Blackbird HTML
This Blackbird Project will be graded in two parts: 5% (HTML page) and 5% (applied CSS)

  • HTML page (5%)
  • Applied CSS (10%)

Follow along in class was we format Wallace Steven’s poem “Thirteen Ways of Looking at a Blackbird”  in a one page HTML document. This HTML file should be called “index.html” and placed, along with the image file, inside a folder called “blackbird.” For this portion of the project your html file should have the following:

Follow along in class to format Wallace Stevens’ poem “Thirteen Ways of Looking at a Blackbird” into an HTML document:

  • Include one external link
  • Include one internal (anchor) link
  • Insert one image (place images inside an img folder)
  • Ensure proper formatting and indentation
  • Upload the blackbird folder to the server

Check your site at the designated URL list. The assignment will be graded based on functional and proper use of HTML syntax.

Key Points

  • Page structure, nesting, semantic elements, IDs, and classes
  • Lists: ordered and unordered
  • Block vs. inline elements
  • Links: external and internal
  • Image inserts

Working with Images

  • Images as inline elements
  • Using figure/figcaption for context
  • Styling dimensions vs. actual dimensions
  • Resizing images using Photoshop or Gimp.org
  • Understanding image file formats and transparency

 

FTP Instructions

  • Open your FTP client and connect to the server:
  • Server: dtc-wsuv.org
  • Username: [initial][lastname][year]@dtc-wsuv.org
  • Password: Sent to your WSU email

We will use a free Mac ftp client called Cyberduck Mac, Cyberduck PC is also available.

Filezilla is also good, free and cross-platform

detailed Steps:

  1. Open ftp software
  2. “Open Connection”
  3. Enter the following info:
    servername: dtc-wsuv.org
    username: first initial + last name + the year started(’24”)  + @dtc-wsuv.org (so, “Sam Jones” would be “sjones24@dtc-wsuv.org”)  – all in lowercase, no spaces or symbols!!
    password: sent to your wsu email, can’t be changed!
  4. If successful, you should be in your personal server directory that has the same name as your username (without the @dtc-wsuv.org). Now you can either drag the folder and files into that directory or use the “action” menu to “upload.”
  5. Upload the folders of your projects, making sure it is named in all lowercase: “blackbird” for the blackbird project, “recipe” for the recipe project, etc. You can always change the folder and file names on the remote server, as you would on your desktop.
  6. Make sure that your default page for the project is “index.html”
  7. Check how everything looks on the live absolute URL. It should look something like this:  https://dtc-wsuv.org/sjones24/info-card/
  8. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!

 

VIDEO: Creating the Blackbird HTML Page:
We will do this together in class starting this week and into next week, but here is a past video if you get lost or miss class