Question of the day (GOOGLING PERMITTED):
What is the Super Secret Password?
week 2

Recap: How the web works
The computers we use to access the web are connected to computers called "servers" our computers are "clients". At the school there are a couple servers that handle web traffic. One is at

Let's disect http// The first part; "http://" explains the communication protocol that we're using to submit this request. HTTP stands for HyperText Transfer Protocol. The second part; "" is the unique name of the server at the school we wish to talk to. The last part tells the server what documents we are requesting. The "/" says look inside this directory for a folder. "joseph.mckay" is the name of the folder that exists on the server computer (just like you have a "Documents" folder on your own computer). We are telling the server to look inside that folder and find a document titled "week2.php" and if it exists, transfer its contents to our browser on our computer. That document may then contain additional instructions for other files that need to be transferred to complete the message, i.e. images, additional text files, video files, etc. Note: my website ends in php not html because of the way I write my dropdown menus, but essentially they are exactly the same.

If we drop "week2.php" the website will resolve to the home page - this is because the brower knows to look for something called index.html (or in this case "index.php") if it has not been given a specific address.

Of course, computers being what they are, your address is actually code, known as an "IP address" (IP stand for Iternet Protocol, yet again), every computer on the internet has one. We'll talk more about IP address and how they are used later in the semester.

Uploading your website
You should have been given web space by CTS by now. Picture+10 The process of putting files on a server is called "file transfer Protocol" (FTP). At school we have a secured server, meaning we are actually using FTP/SSL, not just FTP. There are several different applications that can handle the transferring of files through FTP. In fact you can even use the Terminal, although it's not very user friendly. My favorite is Cyberduck because it has the cleanest interface, but we also have Filezilla and it works fine too.

Open Cyberduck, click on "new connection", and enter your information as it looks in the image. Remember to set the pulldown menu to FTP(FTP/SSL). The password is your Purchase password.
The student web space server uses the FTP-SSL protocol. You must select this from the menu at the top. In the "Server" field, enter "". In the "Username" field, enter your Purchase College username (email without ""). In the "Password" field, enter your Purchase College password. Leave "Add to Keychain" checked so that you will not need to enter all of this information each time you connect. Students1 If everything went correctly you should see a directory with a folder called WEB and a readMe file. Everything that you put in the WEB folder is accessible online, so all our files for this class will be going in there. Everything outside that folder is only accessible to you, so you can use that space to store files if you want. This space will be yours now until you graduate.

When putting up your page remember that capitalization may not count locally, but it will on the web. So if your file looks great on the computer, but doesn't work online the first thing to check is capitals. Just make everything lower case and life will be easier.
Next, make sure you have the correct extension. Our html files will always end in .html

There are three kinds of links, Absolute, Relative and Anchors. They all use the <a href> tag. While "a href" can be tricky to remember it's way better than typing "anchor hypertext reference" every time you want to make a link.

You can add target="_blank" to the "a href" tag to open the link in a new window or tab. Use this sparingly and only if it makes sense in the context of your site. It is good "netiquette" to assume that your user knows how to use the back button - otherwise your screen would be littered with browser windows.

File Structure
Every webpage has a title and an extension, however pages that are titled "index.html" are special. Web browsers look for these pages and display them first. Create a page called index.html which has a link to your profile.html page. Put this page online. As the course expands this index page will be the first stop to see what you are up to.
Once you have your index.html file in place you can get to it online by going to you do not need to add the "/indext.html" in the address because the browser knows to look for this file.

As your website grows you will need to be aware of the file structure. If you want to make a relative link to a file that is in another folder you need to include that folder in the code. For example, lets say we wanted to put our profile into a folder called game - the link would look like this <a href ="game/profile.html">
Your profile would now be at
In this scenario, if you want to link back from your profile page to the index page simply writing <a href ="index.html"> would not work because the index page file is not in the same folder as the profile page. To "move up" a folder use "../" to tell the computer to look for the file in the folder that preseeds the one we are currently in. So the link from the profile page back to the index page would look like this <a href ="../index.html">

Also note, that whatever file strcuture you create on your local website (offline), the same structure has to exist on the server (online). This is the most common mistake people make when starting out. That is why this text is bold and large!

Of course, there's no good reason for us to have our two page website have separate folders, but when it gets really handy is with images - it's common practice to keep an images folder that is separate from your html.

putting images on a page

There are three major image file types online.

In the folder that holds your local site, create another folder called "images". It's always good to stay as organized as you can.

Think of "img src"" as shorthand for "image source" - that always helps me remember it.

Try adding this extra stuff to the image tag
<img src="images/test.jpg" alt="test image" width="300" height="100" vspace="10" hspace="10" align = "right">

Save and reload your page.

alt - this text appears if the image does not load properly, more importantly it is used by screen readers so that people with disabilities can better navigate and understand your site. It's a very good idea to get into the habit of using alt.

width and height - for the most part these do what you'd think they do. If you make a picture larger than the original, it will start to look blurry as the computer tries to guess what the image should look like.
Conversely if you make an image a lot smaller than the original it will look fine, however, keep in mind that the browser is still loading the larger image, so you are not saving yourself any load times. It's a better idea to have a smaller separate image than use the lager image as your thumbnail.
it's a good idea to include the height and width because it tells the browser to set aside space for the images even if the image is slow or (heaven forbid) the link is broken.
If you change both width and height the image will conform to the new size. If you change just one and not the other it will retain the proportion of the original.

vspace and hspace - this is the "padding" or extra space around the image.

align - you can align either right or left. If you want text to flow to the left say align="right" and the text will flow around the left side of the imageimage. There are more complicated ways to position images and text coming up in the next weeks.

If text is flowing and you don't want it to add this line <br style="clear:both;"/>
Again we're getting ahead of ourselves, but this is really useful.

hotlinked UFO image There is another way to link to images - you can give an absolute link to an image instead of a relative link. This is called "hotlinking" and it is generally a bad idea. If the owner of the website takes down thier image suddenly your website is broken. Here's a nice cautionary tale.

The ufo image on the left has the tag <img src="" alt="hotlinked UFO image" align = "left" width ="100" vspace="0px" hspace="5px">

getting images
You can get images from any website buy dragging the image onto your desktop, or better still, right into your images folder, however, you want to be mindful of copyright. You can search for royalty free images through google image search.

Also, through goolge you can now do a reverse image look up. Open google images, and drag the picture of the UFO onto the Google images page.

The difference between “Block” and “In-line”
A block is a section of the HTML that has its own rectangle. A paragraph, for example, has it's own boundaries that are defined by the tags. Same thing with a div - it will rise or shrink depending on the size of content within the div. You'll see as we go that you can control how boxes react with one another.

An in-line element flows along with the text. The bold tag is a great example of an in-line tag - the bold text does not have it's own box, and making it bold does not force the text, it just flow "in line" with the rest of the text.

This all seems intuitive, why do we care? Because images, which naturally have their own boxed and would seem like a natural for a block element, is actually treated like an in-line element by the HTML. Sucks right? Fortunately there's a couple easy ways around this. You can put the image in a div, or you can tell the browser to treat the image as a block by putting style ="display: block;" into the image tag.

This image is a block element
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This image is inline (default)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Changing the font is tricky becasue you cannot gaurentee that the "client" is going to have the right fonts installed on their machines. So in declaring a font, start with the specific font you want and end with either serif, or san-serif.

Last week we changed size with the point size (pt). This is fine, but it's a good habit to set the size with em instead. Em will set the size relative to the size set in the body. This way as a user changes the page size the fonts will scale accurately.

	font-family:"Times New Roman", Times, serif;
	font-size: 1.5em; 
	color: red;	
There is an alternative to using fonts on the client's computer. If you have created a perfect graphic you can always save a picture of the font as a PNG, jpeg or gif - then load it as an image.
Another alternative is to use Google Webfonts.This has it's upside and downside - on the up it is a great way to ensure that the user will have the exact font you expect them to. On the downside Colors
There are three ways to designate a color. examples.
	color: red;	
	color: #ff0000;	
	color: rgb(255, 0, 0);	
All three of these classes would produce the same color.

Making an image a link.

To make an image a link, place an image reference inside a link reference. Like this.
<a href ="index.html"> <img src="images/test.jpg"> </a>

Making a thumbnail that opens a large image is pretty much the same process, but the page the link directs to is just a larger version of the image. You need to make a smaller thumbnail image in an image editor (or at ) - do not just use the width and height attributes in the image tag to change your image size, this will needlessly slow down your website.
<a href ="images/nail.jpg"> <img src="images/nailsm.jpg"> </a>
The new "figure" and "figcaption" tags make captioning an image easy. You can apply a class to the figure tag to change the location of the image

   <figure >
  <img src="images/reas-book.jpg" alt="book" vspace="8" hspace="5" width="150">
   <figcaption>This is a good book.  </figcaption>
This is a good book.
Okay, so I cheated a little bit and added a class to the figure tab that centers the image and the text. More on that later.
being someone online
Amalia Ulman's Instagram Performance

Remake your game profile with

here's a sample.