Important information

FTP information

Your work for this module will be hosted on the Journalism School’s Digital Storage server. This web hosting will be available to you for two years after you graduate–you should make plans to backup work you are proud of and find hosting for it off of campus servers.

FTP and S(ecure)FTP are standard protocols. That means that there are many different software tools you can use to transfer files between computers using FTP. Filezilla is just one of those tools. Fetch and Cyberduck are popular alternatives that many Apple users like.

When you open Filezilla, use the following settings to connect to digital storage:

User demosite
Pass I will tell you where to find it!
Protocol FTP
Port 21

If you get an error, read it! Sometimes the error is a celar clue to what is going on upstream!

Everything you upload to Digital Storage will be available to the public at:{folder_name}


Some code that we’re using in this class will actually need to be delivered by a web server. You can create a miniature web server on the fly by running python’s SimpleHTTPServer

Open a terminal, use cd to navigate to your data viz folder. Run python -m SimpleHTTPServer and then visit http://localhost:8000

This launches a mini web server in that directory. We’ll do more fun things at the command line before the semester is over, but this is incredibly useful.

You can make this a bit easier with System Prefs – right click on any folder and say “new terminal at folder” – use pwd to see where you are.

Basic HTML Sites and Bootstrap

A complete HTML page has a few basic components – it has a head and a body nested inside of <html> tags. The very most basic template looks something like this:

<!DOCTYPE html>
                <html lang="en">
                        <meta charset="utf-8">
                        <title>Page Title</title>

The DOCTYPE declaration tells browsers that this page really is written in HTML. The lang attribute tells search engines (mostly) that this page is in the english language. And the charset attribute tells the browser what characters to use – in our case mostly the English alphabet and numerals. This won’t be on the test, though, so don’t worry too much about it.

You’re going to want much more layout control than you can get from an unstyled HTML page, but we’re not here to learn CSS, at least not this semester. We’re going to use a template called Bootstrap to give our pages a cleaner look and to help us incorporate some interactivity into them.

Bootstrap Template

Bootstrap will let you build out a clean page that moves easily between large and small screens, and their templating system makes it easy to build out things like slideshows. Which we’ll get to.

Amanda Hickman put together a Bootstrap template that you can just copy and paste to get started:

Copy that template into a new, blank text file, save it with an .html extension and open it in your browser.

Basic HTML Tags

Browsers ignore linebreaks and white space in an HTML page. That’s handy, because it means you can organize and indent your code however you like, but it also means that you have to do more than just hit return to start a new paragraph.

paragraphs Without any markup, the contents of an HTML page will just flow together into one big blob. Wrap them in <p></p> tags to make paragraphs.

links use the “anchor” tag. Anything between the opening <a ...> and the closing </a> will be a link. Anchors need at least one attribute, too: the URL of the page to link to. That attribute is href. So create a link with:

<a href="">CUNY Graduate School of Journalism</a>

headings are available in six levels: <h1> through <h6>.

More HTML Tags

DOCTYPE - document type

html - “what follows is HTML

head - invisible part of your page

link - to attach CSS stylesheets

title - title of the page

meta - information about your page, ()like the character set)

style - for inline CSS styling

body - visible part of your page

a - anchors a link (important attribute: href)

blockquote - for large quotes

br - line break

cite - citation

div - content block or “division”

em - text w/ emphasis (aka italics)

h1 - first header

h2, h3,…h6

img - image (important attribute: src; always include the alt attribute for accessibility) ul - unordered list

ol - ordered list

li - list item

p - paragraph

span - inline content divider – think of this as a highlighter.

strong - strong text emphasis (aka bold)


Tip sheets

GAHHH?! What should I do?

A flowchart for aspiring multi-platform reporters

Anatomy of a chart

A flowchart for aspiring multi-platform reporters