WEEK 2: HTML Building Blocks
(August 2 – September 1)

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:

FTP issues?
Codecademy issues?
Slack messaging…

 

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 | &   —  
  • 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
    DTC355-01 InfoCard list
    DTC355-02 InfoCard 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)

Follow along in class as we build the  Blackbird HTML. You will set up the HTML5 page and hand-code the HTML tags to format the poem “Thirteen Ways of Looking at a Blackbird.”

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

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(’23”)  + @dtc-wsuv.org (so, “Sam Jones” would be “sjones23@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/sjones23/blackbird/
  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!