Option 1: Using Yale as hosting

While in Finder, click "Go" in the top menu bar, then "Connect to Server". Type in afp://bert.art.yale.edu and then "Connect"

Enter your username (firstnamelastname) and password

Navigate to bert/Users/firstnamelastname/Sites. Your "index.html" page in the Sites folder is your homepage that will appear here: http://www.art.yale.edu/~firstnamelastname/. If you put a folder (hello-world) in your Sites folder, that folder's contents will appear here: http://www.art.yale.edu/~firstnamelastname/hello-world/.

Option 2: Using Dropbox as web hosting

(Adapted from How to host your website on Dropbox)

If you haven't already, sign up for Dropbox.

Navigate to the "Public" folder in your Dropbox. Create a new folder within this folder called "ICP" (Interactive Concrete Poetry). You will host your personal class homepage here.

Download starter-package.zip. Unzip it and place its contents into your "ICP" folder.

Right click (or control click) on the index.html file and choose "Copy public link".

Paste this link into your web browser's address bar. It should have my name (Laurel Schwulst), a green hand icon, and a link to Workshop 1. Once you verify that it worked, please paste your link (next to your name) in this Google Doc.

Make sure to have a text/code editor. A standard, good one is Sublime Text. It is free. (There is a paid version that will get rid of the pop-ups that happen every so often, but it shouldn't be too distracting.)

Here is a basic HTML skeleton (see what this looks like):

Here are some HTML tags in action (see what this looks like):

Here are two ways to integrate CSS into your HTML:

Viewing the source code

It's important to know how to view the source code of a website. When first learning, it's often easiest to see a site you like and then see how it's made.

For simplicity's sake, I'm going to explain things in Google Chrome. You can use whatever browser you want, but using a different browser may make it harder to follow along if you are new to these basics.

To view the source code of a website in Chrome, click "View" in the top navigation, then Developer, then View Source.

Learn what you can do with HTML and CSS

To see all possible elements and their attributes for HTML, CSS, and other languages, check out DocHub.

Some basic HTML elements to start with:

• html (start an html page)
• head (header)
• body (all content of a website, the body)
• a (link)
• img (image)
• ul, ol, li (used in making lists)
• p (paragraph)
• br (line-break)

Some basic CSS properties to start with:

• color
• font-family
• font-size
• background-color
• border
• text-align

On your own

Please read Lesson 1 from Beginner's Guide to HTML & CSS. You should do this in tandem with Workshop 1: Assignment, which is due next class on Tuesday. If you are better with video lecture, I recommend these three simple intro videos that should give you a solid foundation: HTML Intro, Part 1: HTML, Part 2: CSS. I know this may be a lot, but it's good to start now. Your knowledge will build over the semester.