week 3 – HTML Flow

html for blackbird project

List of HTML tags

Overview: html structure, tags, attributes, nesting, formatting
Tables
HTML Flow
Organizing web files
Semantic Elements
Links
Image insert

Workshop: Finish Mark-up of Blackbird site

—————————————————

Project #1: Blackbird Project (10%)

Format and style Wallace Steven’s poem “Thirteen Ways of Looking at a Blackbird” in a one page HTML document with an external CSS stylesheet. Your pages must have at least the following :

1. one external link
2. one internal or anchor link
3. one image insert
4. one background image

The assignment will be graded based on the functional and proper uses and syntax of HTML mark-up and CSS styles.  Though I am not grading on the quality of your design and layout, please put some effort into a pleasing look.  Extra credit will be given if your design attempts to reflect an interpretation of the poem’s meaning!

Previous Blackbird Projects

Nouspace Student Gallery – Blackbird Projects

Photoshop Basics:  sizes, tools, transparency, grid
Preparing Images for the web
Formatting Images

CSS Intro: Cascading Style Sheets

csszengarden

Inline/Embedded/External CSS
Selectors, Properties and Values  p { color:blue;}

Defining Selectors:

name element: h1, p,
name class or id: .stanza, #bio
context: #bio img,  .stanza h3
pseudo-classes : p::first-letter, p:first-of-type, p:first-of-type:first-letter,
:nth-of-type(odd), :nth-of-type(even)
link-styles : a:link, a:hover (add to blackbird)
attribute or values

CSS Principles (what gets applied?)

inheritance
location (cascade)
specificity
!important ( color: red !important; )

FTP= “file transfer protocol”

– 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(’18”)  + @dtc-wsuv.org (so, “Sam Jones” would be “sjones18@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. Now you can either drag the folder and files in that directory or use the “action” menu to “upload”
5. Please upload folders with the following 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:
   http://dtc-wsuv.org/sjones18/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!
9. Email me that URL (wluers@wsu.edu)