WEEK 2: HTML Building Blocks (Jan 14)

To Do This Week

Codecademy: Learn HTML

This week, complete the Codecademy tutorials on HTML. The entire tutorial 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: Friday, August 30th

Info-Card HTML

Begin working on your Info-Card project by:

  1. Choosing a topic
  2. Setting up the HTML site and content

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: Friday, August 30th

Notes

  • Superpower Survey: If you are a DTC major, please fill this out by next week to guide your focus and mentor assignment.
  • Codecademy Issues: Let me know if you encounter any problems accessing or completing the tutorials.

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

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. 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)
  4. Upload the folder to the server and check the URL path: https://dtc-wsuv.org/[your-folder]/info-card.

Blackbird Project Overview

Read the Blackbird HTML assignment this week. This project will be graded in two parts:

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

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.

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

Upload your project folders (e.g., blackbird, info-card) to the server and verify the live URL. Ensure all file names are lowercase and consistent to avoid errors.

Key Points

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

Video: Creating the Blackbird HTML Page

We will work on this project together in class. If you miss class, refer to the video linked in the module for guidance.

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

To Do This Week:

This week you should complete Codecadmy tutorials on HTML. You can start this anytime, but pace your self and complete about 15-20 minutes at a time. The total HTML tutorial is about 45-90 minutes. When you complete the tutorial please take a screen grab of the browser showing your tutorial completion score – even if it is under 100%. In the screen grab, include the address bar and login icon in the top right corner.  Submit this image to the Learn HTML assignment in Canvas.

During this week, you will also work on your own Info-Card by 1) choosing a topic and 2) setting up the HTML site and content. You can use the “info-card-example” as an example. We will work on this project in class and you will complete it on your own. You will upload your “info-card” folder to the server and then submit the working url in Canvas. Make sure your project folder is called “info-card” – all lower case – and inside there is an “index.html,” an “img” folder with an image file.

NOTES:

Superpower Survey: If you are a DTC major please fill this out by next week. This will give you some guidance on your DTC focus and the mentor assigned to you.

Codecademy issues?

Hypertext Markup Language / HTML:

The first website, Tim Berners-Lee
HTML – evolution, tags/elements, backward compatibility, spaces
HTML tag reference

Go to intro-html and copy the source code (Windows>CTRL + U/Mac>Option+Command+U). Then open the text-editor Sublime Text and paste the saved code into the empty panel. Save this on your computer as “intro-html.html.”

  • Text-editors, color coding, line numbers, soft wrap, search
    Basic structure –  anatomy of a web page, nesting, parents/children
  • Text-encoding – ASCII / Unicode, entity codes | &amp;   &mdash; &nbsp;
  • Semantic elements – h1, p, div, em, span, small
    inline/block
  • Attributes – id, class, style
  • HTML syntax= <element attribute=”value”></element>
    self-closing elements= <element>

Info Card Overview

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 code the HTML with content and one image. Read about the Info-Card: HTML assignment.

In this example of an info-card, I used ChatGPT and Midjourney. 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.

Info Card HTML:

  1. In the Sublime Text text-editor, save your own new file and call it “index.html.” Save it inside a folder called “info-card”
  2. Copy the HTML source code of this page: starter-page.html
    This page has the basic HTML code to start a web page. But Sublime Text has a new feature to get this start code. On your newly saved index.html, type <html> and then Tab, and you will see all the essentials to start making your site.
  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). Grab what you need from the source code for your page.
  4. Find or create a topic for your Info Card. Use wikipedia, chatGPT or any public domain resource. Have fun! You will need to fill up the tagged content blocks below.
  5. In plain HTML add the following HTML tags for your content inside the <body>:
    1 heading (h1)
    1 paragraph (p)
    1 image (img) (put this image inside a folder called “img”)
    1 table (table)
    1 set of bullet points (ul/ol)
    1 short form to collect information from the reader (only the HTML “form”, not the functionality – you would need JavaScript to send the info to a database). You can create a multiple choice question with radio buttons, text fields for user input, etc.
  6. Fill the tags with the appropriate content
  7. Upload to the server the folder “info-card” containing the “index.html” file and the one image file inside an “img” folder
  8. Check the lists below to see that your file structure works using this url path – https://dtc-wsuv.org/”your folder”/info-card

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)

Blackbird HTML – 5%

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:

  1. one external link
  2. one internal or anchor link (from the author to the bio section)
  3. one image insert (with image(s) inside a folder called “img”)
  4. formatted HTML (identing)
  5. a blackbird project folder uploaded to the server using FTP (Cyberduck) – or the correct url/path to your pages.
  6. check that you site shows up from the list: TBA

The assignment will be graded based on the functional and proper uses and syntax of HTML mark-up. 

Key Points:

  1. page structure, nesting, semantic elements, id and classes,
  2. lists
  3. block and inline > HTML flow
  4. divs and spans – inline styles
  5. links – external and internal or anchor link
  6. image insert vs image background

 

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

 

Working with Images – 

  • images are inline
  • figure/figcaption element
  • style dimension vs actual dimension
  • resolutions
  • resizing images in Photoshop or Gimp.org
  • image file formats
  • transparency 
  • exports

FTP Instructions:

  • Uploading web files to the server using  FTP (file transfer protocol)
  • We will use a free Mac ftp client called Cyberduck Mac, Cyberduck PC is also available.
  • Filezilla is also good, free and cross-platform

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!