Session 02 - Markup (HTML)

Harvard Extension School
Fall 2021

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

Presentation contains 38 slides

Announcements

Sections begin this week!
Wednesday, 9 pm US/Eastern
Friday, 12 noon US/Eastern

File Management

For Your Class Work

Create a directory or folder for your class work.
Create a "playground" or "sandbox" folder where you can play in and experiment in without worrying about messing up anything assignment related.
Assignments - unzip/extract the materials, then move into your class work folder

File Management

For Web Sites

Use folders or directories to help organize files. Recommendation is to adopt folder names of styles (for CSS files), scripts (for JavaScript files), and images (for images).
```
.
├── images/
├── index.html
├── scripts/
└── styles
    └── site.css
```
Use index.html filename as appropriate
Prefer filenames that only have lowercase, numeric, underscore or dashes (e.g. avoid spaces, and other things like !@#$%^&*(){}\|?/>)

URLs

URL components - scheme, host, and path

URL
https://www.archives.gov/historical-docs/voting-rights-act

Scheme
https://www.archives.gov/historical-docs/voting-rights-act
Host
https://www.archives.gov/historical-docs/voting-rights-act
Path
https://www.archives.gov/historical-docs/voting-rights-act

Markup Recap

Structure / Markup (HTML, XHTML)
- Structure
- Content
Style / Presentation (CSS)
- Style
- Presentation
- Appearance
Function (Javascript)
- Actions
- Manipulations

Markup (HTML) + Styles (CSS) + Scripts (JavaScript)

solarsystem-markup.html
markup

solarsystem-style.html
markup + style

solarsystem.html
markup + style + function

Components of HTML Elements

Markup for a Hypertext link:

<a href="http://www.harvard.edu/">Harvard</a>

How it would render in a web browser:
Harvard Link in a web browser

element anatomy

Start Tag
<a href="http://www.harvard.edu/">Harvard</a>

Element Name
<a href="http://www.harvard.edu/">Harvard</a>

Attribute
<a href="http://www.harvard.edu/">Harvard</a>

Attribute Value
<a href="http://www.harvard.edu/">Harvard</a>

Content
<a href="http://www.harvard.edu/">Harvard</a>

End Tag
<a href="http://www.harvard.edu/">Harvard</a>

Markup - HTML

The Code

My Schools

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Schools</title>
  </head>
  <body>
    <h1>My Schools</h1>
    <ul>
      <li>
        <a href="https://www.harvard.edu/">Harvard University</a><br/>
        <img src="images/harvard-shield.png" alt="Harvard Shield" />
      </li>
      <li>
        <a href="https://www.ku.edu/">University of Kansas</a><br/>
        <img src="images/kansas-jayhawk.png" alt="University of Kansas Jayhawk" />
      </li>
    </ul>
  </body>
</html>

How a Browser Displays It

web page

How Your Browser Thinks About It

dom tree

HTML5

116 elements defined in HTML5 HTML5 Logo

More information: HTML5 Living Standard from the WHATWG. Section 4 contains the List of elements in HTML.

I've highlighted the 24 elements that you will use and/or see most commonly.

The root element
- html
Document metadata
- head
- title
- base
- link
- meta
Style
- style
Sections
- body
- article
- section
- nav
- aside
- h1, h2, h3, h4, h5, h6
- hgroup
- header
- footer
- address
Grouping content
- p
- hr
- pre
- blockquote
- ol
- ul
- li
- dl
- dt
- dd
- figure
- figcaption
- main
- div
Text-level semantics
- a
- em
- strong
- small
- s
- cite
- q
- dfn
- abbr
- ruby
- rt
- rp
- data
- time
- code
- var
- samp
- kbd
- sub
- sup
- i
- b
- u
- mark
- bdi
- bdo
- span
- br
- wbr
Edits
- ins
- del
Embedded content
- picture
- source
- img
- iframe
- embed
- object
- param
- video
- audio
- source
- track
- map
- area
Tabular data
- table
- caption
- colgroup
- col
- tbody
- thead
- tfoot
- tr
- td
- th
Forms
- form
- label
- input
- button
- select
- datalist
- optgroup
- option
- textarea
- output
- progress
- meter
- fieldset
- legend
Interactive elements
- details
- summary
- menu
- dialog
Scripting
- script
- noscript
- template
- canvas
- slot

Most commonly used or seen elements

HTML5 Logo Start with these 24 — these are elements you will use in most of your web pages, or that you'll find in a majority of web pages.

The root element
- html
Document metadata
- head
- title
- link
- meta
Sections
- body
- nav
- h1, h2
- header
- footer
Grouping content
- p
- ul
- li
- main
- div
Text-level semantics
- a
- span
- br
Embedded content
- img
Forms
- form
- label
- input
Scripting
- script

How to find out more about them? Two places that I would start are:

HTML Living Standard (WHATWG). For example:
- html
- a
MDN web docs, and specifically MDN - HTML elements reference. For example:
- h1 to h6
- img

Page Structure - header, main, footer

First, recall the basic document structure:

html
- head
  - title
  - meta
- body

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
  </head>
  <body>
    <!-- content goes here -->
  </body>
</html>

header, main, footer

MDN HTML elements reference: header, main, footer.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
  </head>
  <body>
    <header> <!-- page header --> </header>
    <main> <!-- main content goes here --> </main>
    <footer> <!-- page footer --> </footer>
  </body>
</html>

An improved HTML5 document template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
  </head>
  <body>
    <header> <!-- page header --> </header>
    <main> <!-- main content goes here --> </main>
    <footer> <!-- page footer --> </footer>
  </body>
</html>

HTML5 Elements - Page Structure

header, main, footer, nav

Common HTML5 Elements - Grouping Content

article and section
Paragraphs - p
Lists
- ul
- li

article and section and div

article — implies a "self-contained composition in a document".
section — a generic section of a document
div — has no special meaning at all

p and div elements

p element

The p element is used to group paragraphs.

Example 2.1 - p element - Example 2.1

Markup
Display


 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.
 </p>
 <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.
 </p>
 <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.
 </p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.

Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.

Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.

div element - division

The div element is to group block-level content, and is typically used to define parts of the page so that CSS rules can be applied specifically to those parts.

Example 2.2 - div element - Example 2.2

Markup
Style
Display


 <div class="part1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.
 </div>
 <div class="part2">Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.
 </div>
 <div class="part3">Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.
 </div>

In style element (<style>) within head element:

div.part1 {margin: 1.5em; padding: 2em; color: white; background-color: green;}
div.part2 { color: purple; margin: 1em; padding: 2em; border: medium solid purple;}
div.part3 { background-color: orange; margin: 0.5em; padding: 1em; font-size: smaller;}

Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.

Harvard Extension School Homepage and div elements

Harvard div

Lists - ul and li

Lists are very useful, both for:

Content
Navigation

There are three types of lists:

Unordered (most common)
ul and li
Ordered
ol and li
Description (rare)
dl, dt (description term), and dd (description detail)

Example 2.3 - Unordered List - Example 2.3

Markup
Display


 <ul>
   <li>Tea
   </li>
   <li>Bread
   </li>
   <li>Cheese
   </li>
   <li>Chips
   </li>
   <li>Ice Cream
   </li> </ul>

Tea
Bread
Cheese
Chips
Ice Cream

Example 2.4 - Nested Unordered List - Example 2.4

Markup
Display


 <ul>
   <li>Tea
     <ul>
       <li>Kenya
       </li>
       <li>Sikkim
       </li>
       <li>Ceylon
       </li>
       <li>Assam
       </li>
       <li>Oolong
       </li>     </ul>
   </li>
   <li>Potato Chips
     <ul>
       <li>Dirty's
       </li>
       <li>Art's and Mary's
       </li>
       <li>Tim's Cascade
       </li>
       <li>Cape Cod
       </li>     </ul>
   </li> </ul>

Tea
- Kenya
- Sikkim
- Ceylon
- Assam
- Oolong
Potato Chips
- Dirty's
- Art's and Mary's
- Tim's Cascade
- Cape Cod

Example 2.5 - Ordered List - Example 2.5

Markup
Display


 <ol>
   <li>Boil water
   </li>
   <li>Measure tea (approximately 1 tsp. per 6 oz. cup)
   </li>
   <li>Steep tea for 3 to 5 minutes
   </li>
   <li>Enjoy!
   </li>
 </ol>

Boil water
Measure tea (approximately 1 tsp. per 6 oz. cup)
Steep tea for 3 to 5 minutes
Enjoy!

Example 2.6 - Description Lists (terms and definitions or details) - Example 2.6

Markup
Display


 <dl>
   <dt>bread   </dt>
   <dd>a usually baked and leavened food made of a mixture whose basic constituent is flour or meal   </dd>
   <dt>butter   </dt>
   <dd>a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food   </dd> </dl>

bread: a usually baked and leavened food made of a mixture whose basic constituent is flour or meal
butter: a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food

Nested Lists - li is a child of ul!

Keep in mind that the only allowed child of a ul element is an li element. So in a nested list, the nested ul needs to contained within the li:

Correct Incorrect
ul must be within li

Correct	Incorrect ul must be within li
Example in Gist View Example Validate Example `<ul> <li>Tea <ul> <li>Kenyan</li> <li>Sikkim</li> <li>Ceylon</li> <li>Assam</li> <li>Oolong</li> </ul> </li> <li>Potato Chips <ul> <li>Dirty's</li> <li>Art's and Mary's</li> <li>Tim's Cascade</li> <li>Cape Cod</li> </ul> </li> </ul>`	Example in Gist View Example Validate Example `<ul> <li>Tea</li> <ul> <li>Kenyan</li> <li>Sikkim</li> <li>Ceylon</li> <li>Assam</li> <li>Oolong</li> </ul> <li>Potato Chips</li> <ul> <li>Dirty's</li> <li>Art's and Mary's</li> <li>Tim's Cascade</li> <li>Cape Cod</li> </ul> </ul>`

Example in Gist View Example Validate Example

<ul>
<li>Tea
    <ul>
        <li>Kenyan</li>
        <li>Sikkim</li>
        <li>Ceylon</li>
        <li>Assam</li>
        <li>Oolong</li>
    </ul>
</li>
<li>Potato Chips
    <ul>
        <li>Dirty&apos;s</li>
        <li>Art&apos;s and Mary&apos;s</li>
        <li>Tim&apos;s Cascade</li>
        <li>Cape Cod</li>
    </ul>
</li>
</ul>

Example in Gist View Example Validate Example

<ul>
<li>Tea</li>
    <ul>
        <li>Kenyan</li>
        <li>Sikkim</li>
        <li>Ceylon</li>
        <li>Assam</li>
        <li>Oolong</li>
    </ul>

<li>Potato Chips</li>
    <ul>
        <li>Dirty&apos;s</li>
        <li>Art&apos;s and Mary&apos;s</li>
        <li>Tim&apos;s Cascade</li>
        <li>Cape Cod</li>
    </ul>
</ul>

Sometimes this is confusing, since in the "HTML" form of HTML5, the end tags are options for li, so while it may appear that you can have a ul as a child of ul, you really can't -- there's an implied end-tag there.

Correct HTML serialization Correct XML serialization

Correct HTML serialization	Correct XML serialization
Example in Gist View Example Validate Example `<ul> <li>Tea <ul> <li>Kenyan <li>Sikkim <li>Ceylon <li>Assam <li>Oolong </ul> <li>Potato Chips <ul> <li>Dirty's <li>Art's and Mary's <li>Tim's Cascade <li>Cape Cod </ul> </ul>`	Example in Gist View Example Validate Example `<ul> <li>Tea <ul> <li>Kenyan</li> <li>Sikkim</li> <li>Ceylon</li> <li>Assam</li> <li>Oolong</li> </ul> </li> <li>Potato Chips <ul> <li>Dirty's</li> <li>Art's and Mary's</li> <li>Tim's Cascade</li> <li>Cape Cod</li> </ul> </li> </ul>`

Example in Gist View Example Validate Example

<ul>
<li>Tea
    <ul>
        <li>Kenyan
        <li>Sikkim
        <li>Ceylon
        <li>Assam
        <li>Oolong
    </ul>

<li>Potato Chips
    <ul>
        <li>Dirty&apos;s
        <li>Art&apos;s and Mary&apos;s
        <li>Tim&apos;s Cascade
        <li>Cape Cod
    </ul>

</ul>

Example in Gist View Example Validate Example

<ul>
<li>Tea
    <ul>
        <li>Kenyan</li>
        <li>Sikkim</li>
        <li>Ceylon</li>
        <li>Assam</li>
        <li>Oolong</li>
    </ul>
</li>
<li>Potato Chips
    <ul>
        <li>Dirty&apos;s</li>
        <li>Art&apos;s and Mary&apos;s</li>
        <li>Tim&apos;s Cascade</li>
        <li>Cape Cod</li>
    </ul>
</li>
</ul>

Lists in Action

Harvard Homepage - lists are outlined in magenta and list items in green. Note that some lists are "horizontal" and some are "vertical" -- exactly how a list is rendered can be controlled by CSS

Top:
harvard home page with lists and list items highlighted

Footer:
harvard home page with lists and list items highlighted

Sections - Headings

Any single heading element wasn't technically only our "top" list, but collectively (h1,h2,h3,h4,h5,h6), these are important!

Example in JSFiddle

<h1>Primary Heading (1st)</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h2>Secondary Heading (2nd)</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h3>Tertiary Heading (3rd)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h4>Quarternary Heading (4th)</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h5>Quinary Heading (5th level)</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h6>Senary Heading (6th level)</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

Headings and Lists In Action

Heading elements (h1,h2,etc.) and lists (ul,li) combined with CSS are very powerful. Headings can remain headings in markup and CSS can style them as desired. Lists can remain lists in markup (navigation, content items, etc.) and CSS can style them as desired.

DCE Home 2013 Annotated

Common HTML5 Elements - a element - anchor

The anchor — a — element is at the center of the key "hypertext" feature of the web. The a element is how to create hyperlinks from resource to another!

To go along with the a element is the href attribute. The value of the href attribute is the URL that the browser will load when the link is activated (e.g. a mouse click).

The following paragraph was taken from "'Sunshine vitamin' looks a little brighter", Harvard Gazette, February 5, 2013:

Code:

<p>Adequate levels of
<a href="http://www.mayoclinic.com/health/vitamin-d/NS_patient-vitamind">vitamin D</a>
during young adulthood may reduce the risk of adult-onset
<a href="http://www.diabetes.org/diabetes-basics/type-1/">type 1 diabetes</a>
by as much as 50 percent, according to researchers at the
<a href="http://www.hsph.harvard.edu/">Harvard School of Public Health</a>
(HSPH). If confirmed in future studies, the findings could lead to a role for vitamin D
supplementation in preventing this serious autoimmune disease in adults.</p>

Rendered:

Adequate levels of vitamin D during young adulthood may reduce the risk of adult-onset type 1 diabetes by as much as 50 percent, according to researchers at the Harvard School of Public Health (HSPH). If confirmed in future studies, the findings could lead to a role for vitamin D supplementation in preventing this serious autoimmune disease in adults.

Creating Links

Build confidence by making your links predictable and differentiable.

Predictable
- Am I getting 'closer' to my goal?
Differentiable
- What is the difference between clicking here or clicking there?

scent

Do
- Be descriptive
  - Link several words or a phrase, not just one or two words
  - Remember that the list of links in your page may be presented as a list of items for people using assistive technology.
Do Not
- Lie or Mislead
- "Click Here"
- Find out more in this knowledge base article

Common HTML5 Elements - Text Level Semantics

a
span
br

span element

The span element is a cousin to the div element -- in that it is used primarily for styling purposes, except that it is geared towards "inline" content.

Example 2.7 - span element - Example 2.7

Markup
Style
Display


 <div class="citation">
   <span class="author">Berners‐Lee, Tim   </span>.
   <span class="title">
     <a href="https://canvas.harvard.edu/courses/95649/files?preview=12898083">We Need a Magna Carta for the Internet     </a>   </span>
   <span class="journal">New Perspectives Quarterly   </span>31.3 (2014): 39-41. Web.
 </div>

In style element (<style>) within head element:

.citation .journal { font-style: italic; }
.citation span.title::before { content: '"';}
.citation span.title::after { content: '." ';}

Berners‐Lee, Tim. We Need a Magna Carta for the InternetNew Perspectives Quarterly 31.3 (2014): 39-41. Web.

See: Inline elements and Block elements from MDN (Mozilla Developer Network)

Line Breaks and white space characters (br element)

Since "white space" characters are ignored in rendering HTML, the br element is used for explicit line breaks.

Examples below are from the first part of Paul Revere's Ride by Henry Wadsworth Longfellow

Example 2.8 - Using br for line breaks - Example 2.8 | Example 2.8 JSFiddle | Example 2.8 Gist Example 2.8 bl.ocks

Markup
Display
Screenshot


 <p style="background-color: #ffc">Using br for line breaks:
 </p>
 <p>Listen, my children, and you shall hear
   <br/>
Of the midnight ride of Paul Revere,
   <br/>
On the eighteenth of April, in Seventy-Five:
   <br/>
Hardly a man is now alive
   <br/>
Who remembers that famous day and year.
 </p>
 <p style="background-color: #ffc">Line breaks and spaces in HTML code don't render...(exception below):
 </p>
 <p>Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year.
 </p>
 <p style="background-color: #ffc">...except in the "pre" (preformatted) element:
 </p>
 <pre>Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year. </pre>

Using br for line breaks:

Listen, my children, and you shall hear
Of the midnight ride of Paul Revere,
On the eighteenth of April, in Seventy-Five:
Hardly a man is now alive
Who remembers that famous day and year.

Line breaks and spaces in HTML code don't render...(exception below):

Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year.

...except in the "pre" (preformatted) element:

Listen, my children, and you shall hear
    Of the midnight ride of Paul Revere,
On the eighteenth of April, in Seventy-Five:
    Hardly a man is now alive
Who remembers that famous day and year.

Screenshot

You can use a non-breaking space (  or   character entities) for spaces that won't be collapsed:

<p style="background-color: #ffc">You can use a non-breaking space (&amp;#160; or &amp;nbsp; character entities):</p>
<p>
Listen, my children, and you shall hear<br/>
&#160;&#160;&#160;Of the midnight ride of Paul Revere,<br/>
On the eighteenth of April, in Seventy-Five:<br/>
&#160;&#160;&#160;Hardly a man is now alive<br/>
Who remembers that famous day and year.
</p>

Entities - what's this &name-or-number;?

Entities in a markup language:
- & → &
- > → >
- < → <
- " → "
- ' → '
Numeric Entities (Unicode character code charts from Unicode)
- ▰ → ▰
- Ω → Ω
- &#1f610; → 😐

Common HTML5 Elements - Embedded content

img element
Key attributes
- src
- alt

img element

HTML documents do not contain the images themselves, but merely contain references to the images to be displayed. Common image file types are:

GIF, Graphics Interchange Format, ".gif"
JPEG, Joint Photographic Experts Group, ".jpg", ".jpeg"
PNG, Portable Network Graphics, ".png"

Example 2.9 - img element - Example 2.9

Markup
Display


 <img src="https://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/>

Harvard University Extension School Shield

Example 2.10 - 'img' element with an anchor - Example 2.10

Markup
Display


 <a href="https://extension.harvard.edu/">
   <img src="https://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/>
 </a>

Accessibility Principle: Provide text alternatives for non-text content.

The alt attribute is used to specify a short text alternative when using the img element.

Accessibility essentials:

W3C Web Accessibility Initiative
The Web Accessibility Initiative (WAI) develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities.
Accessibility - W3C
The first place to start for a short introduction to Web accessibility.
Web Content Accessibility Guidelines (WCAG) 2.1 at a Glance.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Section-level elements

HTML5 defines elements that can be used to represent sections:

body - represents the content of the document
h1, h2, h3, h4, h5, h6 - headings for sections
New section-level elements in HTML5
- main - represents the main content on the page
- header - represents a group of introductory or navigational aids
- footer - represents a footer for its section
- nav - represents a section with navigation links
- aside - tangentially related (analagous to a sidebar for printed material)
- article - represents a self-contained composition within a document
- section - a generic section of a document

See: Usage Summary for Section Elements

Parts of a Page

body
header
footer
nav
main

header

extension school header

footer

extension school footer

nav

Workflow

(Edit, Save, Browser Check, [Validation Check]) × repeat

Note: Live Server extension in VS Code will help!

Assignments

Download ZIP, unzip or extract, move to designated work area
(Edit, Save, Browser Check, [Validation Check]) x repeat
Decide when you are finished and ready to submit
1. Publish to course web server:
  1. Cyberduck
  2. connect
  3. navigate to
    public_html/[YOUR OBSCURE FOLDER]
  4. copy local assignment folder to server
  5. check in browser
    https://NETID.cs12students.dce.harvard.edu/[Your Obscure Folder]/[assignment path]/
  6. From your browser, copy the URL of the assignment folder that you just published and submit in Canvas
2. Submit ZIP file
  1. ZIP assignment folder up
  2. Submit ZIP file in Canvas