Based on my experience, the way that students mess up most frequently in this class is by not understanding these core concepts. The purpose of this lesson is to help you get past this little barrier [footnote] Which really is a little barrier [/footnote] so that we can concentrate on things that are more fun and rewarding.
1. Download concept.zip and decompress it. A new folder called concept should appear. Open concept and double click the file called fixme.html so that it opens in your browser. [footnote] Most likely it will open in Safari.[/footnote] Fixme.html used to display a lot of images but all have now been moved from their original folders and the original image folders have been thrown away. Your job is to fix the fixme file by re-creating the folders that it is looking for and moving the correct images into them. Here’s how to do it.
2. If you are using Chrome click “View Source” in the browser’s View menu. If you are using Safari, you will select the Develop menu, then Show Page Source. Don’t see the Develop menu? Click this –> [footnote]
To view source with Safari, you must activate the “Develop Menu”. Click on the word Safari in the upper left corner of your monitor, select Preferences, click Advanced, and check “Show Develop menu in menu bar” as shown at right. If you are using Chrome or Firefox, skip this step. If you are using Internet Explorer, please switch to Chrome, Firefox, or Safari. 
[/footnote] Find the line of code that says
<img src="pic1/climbing.jpg" width="199" height="300" border="2" />
This line of code tells the web browser to load a picture called climbing.jpg this is located inside of a folder called called pic1. It also instructs the browser to display the picture with a width of 199 pixels, a height of 300 and a border of 2.
3. Look inside of the concept folder and find the climbing.jpg picture. See it? Create a new folder inside of concept called pic1 and drag climbing.jpg into it.
4. Return to the browser window that displays fixme.html [footnote] Not the window that displays the source code but the other one [/footnote]. Click the refresh button. At this point the climbing.jpg picture should appear.
5. Return to the browser window that displays the source code and locate each segment of code that looks for a picture. You should find a total of nine pictures and should also be able to tell that all of the pictures should be stored in two separate folders, pic1 and pic2. Create the second folder, and place the appropriate pictures into whichever folder they belong to.
6. Once you have inserted all of the pictures return to the browser and hit refresh/reload. Do you see everything? If so, very good, but wouldn’t it be nice to have a bit more structure to this page?
7. Next, locate the line of code that says
<link href="css/style.css" rel="stylesheet" type="text/css" />
This line of code tells the web browser to load a cascading stylesheet (css) called style.css from inside of a folder called css. The CSS file named style.css controls the structure of the webpage and the placement of the pictures.
8. Look inside of the concept folder and find style.css. Create a folder called css [footnote]Please note that css is lower case. NEVER change case because web servers are very case sensitive [/footnote] and drag style.css into the new folder. Now return to your browser [footnote] not the source code, the actual webpage [/footnote] and refresh fixme.html. Hopefully you see some changes. If not, double check the instructions.
9. As you read earlier, CSS files are very useful so let’s explore style.css by opening it in a text editor. Right-click on style.css and open it in a text editor named brackets.
10. Take a look at the all_content tag at the top of the file. This tag, when applied, creates a very big div tag that is 800 pixels wide, 1666 pixels high with a white background color as indicated by background-color: #FFF. Just for fun, let’s change that background from white to yellow by replacing the final F with a zero as in #FF0. Save the file, return to your browser and reload fixme.html. The middle portion of the page should now be yellow.
11. Take note as well, that all_content has a border setting of 4 pixels. Change that to 54, save the file, and reload fixme.html once again. See the big border?
12. Make all_content narrow by changing width: 800px; to something smaller. Change it again and make it larger. Finally, just for fun, change the body background color [footnote]
as in body { background-color: #000; [/footnote] to something else and check out the result. Although these are simplistic exercises, the message you should take away is that you can change any aspect of a webpage or website just by altering little pieces of text in an externally linked CSS file that is not actually part of the html document. Later on we will learn LOTS more about CSS.
13. Download a picture from the Internet and put it into the webpage.
Hint 1: Get your picture into the webpage by renaming it and replacing an existing picture of the same name or
Hint 2: By putting it into the same folder as another picture and modifying the code with a text editor such as brackets, so that it loads into the page.
14. One final step just to cement the learning. Create a new folder inside of concept named pictures and drag ALL of the images from the pic1 and pic2 folders into it. This will of course break the link to every image inside of fixme.html, so now we have to fix it again.
15. If you are in the NMI classroom, open a program named Brackets which you will be using a LOT this semester, and use Brackets to open fixme.html. Now change all of the image paths so that they point to the pictures folder instead of pic1 and pic2.
<img src=”pic1/climbing.jpg” width=”199″ height=”300″ border=”2″ /> should be changed to
<img src=”pictures/climbing.jpg” width=”199″ height=”300″ border=”2″ />
etc.
Next: An extremely simple introduction to Javascript and Jquery