In lab01, you learned how to create a basic .html file, and upload it on to the web server for student web pages at UD, namely copland.udel.edu.
In this lab, you'll follow up on a task we started in lecture, based on some of the examples in the textbook.
You'll practice:
Read Chapter 1 in Head First HTML with XHTML and CSS
Do the exercise from lecture on 09/05, and have your marked up "napkin" ready to go. (Folks in the Thursday lab got photocopies of these back immediately on 09/05 —the rest of you can get them back from me in Thursday's lecture)
Open up the SSH Secure File Transfer program, and use the "Quick Connect" button to access your account on copland.udel.edu
In the right hand window (the one on copland.udel.edu), double click to open up the public_html folder.
Once you are inside, click on the "New Folder" icon, as shown in the picture below.
Once you've created a new folder, name your new folder cisc103.
cisc103 is in lowercaseCISC103 (uppercase)Cisc103 (mixed case)cisc103To make sure that cisc103 is readable, right click on it and check the properties. You want the "permission mode" to be 755.
To double check that it is readable, go to the web page http://copland.udel.edu/~username/cisc103 (substituting in your username in place of username). You should see something like the following (i.e., an empty web directory):
If you are in the Memorial 028/033 lab, go to the H drive, and to the folder with your name that you created in lab01.
If you are at home, navigate to a folder on your hard disk where can create work for CISC103. I suggest you make a folder called cisc103 somewhere on your hard drive.
Once you are in that place, create a folder for lab02. It will be easier to manage your files if you create a new folder for each new lab, and do all your work inside that folder.
Once you are inside that folder, open up a new HTML document called lab02.html in notepad or wordpad.
In lab02.html, type in the marked up HTML for the document you created "on the back of the napkin" in class on 09/05.
Once you've finished typing in the HTML, save your work, and check your document by opening it in the web browser using "File|Open File" in Firefox, or "File|Open..." in Internet Explorer.
Using the SSH Secure File Transfer program again do the following (consult step 6 of lab01 if you are not sure how)
public_html/cisc103 folder (if you are not already there)lab02.html file from the hard drive to the public_html/cisc103 folder by dragging from left to right. Then, check that the file is readable at the address http://copland.udel.edu/~username/cisc103/lab02.html (substituting in your username in place of username).
If it is not readable, check the properties on the file, as before. The file permissions should be either 644 or 755 (either one will work.)
Also, look at how the page displays. If anything is not right, fix it.
Add a comment into your lab02.html file similar to this one, following the opening <html> tag but before the <head> tag. Substitute your own name, date and section number, and a brief description of what your page is (mine is hiking trails, but yours could be ski resorts, pizzas, ways you can help the homeless, or whatever you chose as a topic).
After you add the comment in Wordpad or Notepad, copy the file AGAIN with the ssh secure file transfer program. Refresh your browser, and do a "view source" to make sure that the comment shows up.
... at the end of the file indicates that the file continues beyond that point. It is not actually part of the content. <html>
<!-- lab02.html John Smith for CISC103, section 011, 09/06/2006
a page of hiking trails for a local hiking club -->
<head>
<title>Newark Hiking Club</title>
...
Now, turn to page 30 of your textbook. Note the <style> element there (actually, the open tag is <style type="text/css"> ) .
Insert this <style> element (all the way down to the </style> closing tag) into your web page, along with all the CSS content.
Copy this updated page to the web server, and refresh the page. It should look similar to the Starbuzz page on p. 31 of the textbook.
Now, look at the style element, and find the place where it says: background-color: #d2b48c;
The number #d2b48c is a hexadecimal color code that stands for the particular shade of "tan" that you see as the background color. We'll talk in lecture more about what a hexadecimal color code is—for now it is enough to know that it is a code for a particular color made up of 6 symbols, where each symbol is one of the digits 0-9, or one of the letter A-F.
You can choose from a wide variety of colors—in fact there are over 16 million colors to choose from (16777216 to be exact, which is 224.)
The most "popular" colors are the ones shown on the following web page: http://html-color-codes.com/
That page lists colors in a format like the following (this is only an excerpt):
| FFF FFF |
CCC CCC |
999 999 |
666 666 |
333 333 |
000 000 |
FFC C00 |
FF9 900 |
FF6 600 |
FF3 300 |
||||||
| 99C C00 |
CC9 900 |
FFC C33 |
FFC C66 |
FF9 966 |
FF6 633 |
CC3 300 |
CC0 033 |
||||||||
| CCF F00 |
CCF F33 |
333 300 |
666 600 |
999 900 |
CCC C00 |
FFF F00 |
CC9 933 |
CC6 633 |
330 000 |
660 000 |
990 000 |
CC0 000 |
FF0 000 |
FF3 366 |
FF0 033 |
As an example, the light green in the second row, all the way at the left has 99C followed by C00. Stick these two parts together, put a # at the beginning, and you have a legal hexadecimal color code, namely #99CC00.
(Color codes are one of the rare cases where uppercase vs. lowercase really doesn't matter).
So, if you want your background color to be this shade of green:
| 99C C00 |
You would use: background-color: #99cc00; instead of background-color: #d2b48c;
Choose some color other than #d2b48c; and refresh the page. Then copy it up to the web server.
Now, add two additional rules to the <style> element. Specifically, after the closing } of the rule for the body element, but before the </style> closing tag, add the following:
h1 {color:green;}
h2 {color: red;}
This will turn your <h1> elements green, and your <h2> elements red. That's fine if your product is Christmas trees, but most likely you'll want two other colors instead. Choose two colors either by name, e.g.
h1 {color:orange;}
h2 {color: purple;}
or, choose by number from the http://html-color-codes.com/ web page.
h1 {color:#CC00F6;}
h2 {color:#EEEE22;}
You can also mix and match:
h1 {color: blue;}
h2 {color:#11EE22;}
Specifications for the lab02.html: file
lab02.html file should consist of a single html element, that has two nested elements inside it, a head element, and a body element. head element should contain a title element, and a style element.style element should have the attribute type="text/css" body element should contain the content of the web page that was marked up "on the napkin" during lecture on 09/05, or similar content (for those who missed the lecture, see your instructor to make up this exercise). style element should contain CSS markup similar to that on p. 30 of the text, but with a different background-color value for the body element, and with rules changing the foreground color (i.e. the color property) for h1 and h2 elements.http://copland.udel.edu/~username/cisc103/lab02.html (be sure this is all lowercase!) Due date: This is "due" on 09/15/06.
There is nothing to "turn in"... we'll just check your page on the web.
Also, due to "drop/add", a general "amnesty" applies to all students for late completion of this lab up through 9/20/06.
Next step: Read through Chapter 3 in your Head First HTML textbook.
As you read, consult the online reading notes
As you read, you may like to try the examples online. Send me email if I can help in any way, and cc your TA.