𝌆
let's setup your local 'working' copy of your class site, and try out making a few pages using what we've been learning


Step 1

Install Sublime Text


Step 2

Create your 'Sites' folder

go to your home directory (the one with your computer username) and create a 'Sites' folder

this is capitalized and named this because it has a special meaning on your Mac, this is maybe the only time we're going to capitalize a file or folder name in this class


Step 3

create a folder called 'interactive-1' in your 'Sites' folder

'interactive-1' needs to be all lowercase and no spaces, this is where your projects code and final assets will live.

think of this folder as your website, you wouldn't store psd's or working files on a website, and you shouldn't store them in 'interactive-1' either. where you do put your working files is up to you

note: we don't use upper case letters or spaces or most special characters in URLs for a few reasons

  1. most web servers run on computers that treat 'Test.txt' and 'test.txt' as different files, so if you use capital letters you need to make sure you always use the exact same capitalization any time you try and link to or use a file. it's a pain and just easier to always know it's not capitalized.

  2. anything you want to link to on a webserver needs to be put into a URL, and URLs have a pretty limited list of valid characters they can be. everything else gets 'url encoded' which turns things like spaces or most special characters into weird garbage like %20. those are hard to remember and type, so its best to avoid those to keep your url's looking clean and tidy


Step 4

create your first page

first, make one more folder called 'exercise-0' in 'interactive-1'

then open Sublime Text, and write something like

<html>
    my favorite things are: pears, cameras, and email
</html>

save this as 'favorites.html' within your exercise-1 folder

open that in Chrome (or whatever browser you use) by going to 'File > Open File...' and navigating to your site folder. hows it look?


Step 5

add some hyperlinks

now lets add a link, remember from the lecture a link is an A tag, like

<a href="destination">Link Text</a>

lets turn each of our favorite things into a link in 'favorites.html' like:

<html>
    my favorite things are: <a href="#">pears</a>, <a href="#">cameras</a>, and <a href="#">email</a>
</html>

refresh the browser to see whats changed. what do the links do?


Step 6

create your second page

now lets make another file in our exercise-1 folder, name it after one of your favorite things, for me 'pears.html'. I'll type this in a new file in Sublime.

<html>
    pears are cooler than apples.
</html>

and make sure I save it in 'exercise-1' right next to favorites.html. it being in the same folder is important!


Step 7

link to your second page

now lets link to my 'pears.html' from 'favorites.html'. in 'favorites.html', we need to update the 'href' attribute of my pear link, link

<html>
    my favorite things are: <a href="pears.html">pears</a>, <a href="#">cameras</a>, and <a href="#">email</a>
</html>

reload favorites.html in Chrome and click on the pear link, what happens?


Step 8

link to external resources

we can also link to other things

  1. let's make cameras link to the wikipedia page about camera's
  2. let's make the email link a link to send an email (check out mailto:)



A Note About Space

you might have noticed by now that HTML ignores multiple spaces.

<html>
    pears are cooler than apples.
</html>

will look basically the same in chrome as

<html>
    pears         are        cooler
            than        apples.
</html>

this is so we can use spaces to organize our code so we can read it. but what if we want those spaces? we have some tools

first the Non Breaking Space:

&nbsp;

this is a space that the browser won't get rid of, go ahead and sprinkle some into 'pears.html' and see what it does! you can use a lot in a row, if you like.

for line breaks we have

<br>

which is just the same as hitting enter, again you can chain up a bunch of these if your want, use some to organize your 'favorites.html'