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||Your SOJ network username|
|Pass||your network password|
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:
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
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.
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"> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> </body> </html>
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 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.
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> 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="https://journalism.cuny.edu">CUNY Graduate School of Journalism</a>
headings are available in six levels:
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
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)