CISC103, Fall 2007

lab03: creating a web page
with both HTML and CSS
and your own content

Goals

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:

Before you start, you will need:


The pink sheet that you completed in class on the first day of class. Oana will have these for you in lab, or you can get it from Prof. Conrad in lecture.

If you weren't in class on the first day, here's what you need to do:

  1. Read p. 10, and then pages 22 and 23 of the textbook. There is an exercise there where someone sketches out a web site on a "napkin", then adds the HTML tags to turn that sketch into a web site.
  2. Now, in the same manner, get a piece of paper, and do the following:
    1. Write a headline on that piece of paper about some topic you are interested in (e.g. ski resorts, hiking trails, movies starring Al Pacino, songs by Cake, etc.) The headline can simply be, "Songs by Cake", or "Movies Starring Al Pacino").
    2. Next, put a subheading under the headline that says "by", and then write your name. For example "by Chris Smith" (if your name is Chris Smith).
    3. Next, make a bulleted list of some of the items that would fall under that headline. For example, a list of ski resorts, or a list of movies, etc.
  3. Now, following the example on p. 22 put an <h1> open tag before your headline, and an </h1> close tag after your headline
  4. Put an <h2> close tag before your subheading, and an </h2> close tag after your headline
  5. Put an <li> open tag before each of the items in your bulleted list, and an </li> close tag after each one.
  6. Put an <ol> open tag at the very beginning of the list, and an </ol> close tag at the very end of the list, i.e. after the final </li> close tag.
  7. Wrap a <body> open and a </body> close tag around everything you did so far.
  8. Come up with a title for your page, such as Chris' ski resort page. Put a title element inside a head element, and put it before your <body> element, like this: <head><title>Chris' ski report page</title></head>
  9. Wrap up everything in an <html> open and </html> close tag.

Now you have the equivalent of the "pink sheet", and you are ready to continue.

Detailed Instructions

Step 1: Use the SSH Secure File Transfer program to access copland.udel.edu

Open up the SSH Secure File Transfer program, and use the "Quick Connect" button to access your account on copland.udel.edu

Step 2: Create a new directory under public_html called cisc103

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.

Step 3: Make sure your new directory is readable

To 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):

Step 4: Navigate on the Windows Desktop to a place where you can create an HTML file

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 lab03. 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 lab03.html in notepad or wordpad.

In lab03.html, type in the marked up HTML for the document you created on the pink sheet on the first day of the semester.

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.

Step 5: Transfer this file to the web, inside the cisc103 folder, and view it on the web

Using the SSH Secure File Transfer program again do the following (consult step 6 of lab01 if you are not sure how)

Then, check that the file is readable at the address http://copland.udel.edu/~username/cisc103/lab03.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.

Step 6: Add a header comment to your file

Add a comment into your lab03.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. 

<html>
  <!-- lab03.html   John Smith for CISC103, section 011, 09/06/2007
       a page of hiking trails for a local hiking club  -->
  <head>
    <title>Newark Hiking Club</title>

...

Step 7: Add a <style> element into the <head> element containing CSS

Now, if you have your Head First HTML book, turn to page 30. Note the <style> element there (actually, the open tag is <style type="text/css"> ) .

Here's the content, in case you don't have the book:

<style type="text/css">
  body {
        background-color: #d2b48c;
        margin-left: 20%;
        margin-right: 20%;
        border: 1px dotted gray;
        padding: 10px 10px 10px 10px;
        font-family: sans-serif;  
  }
</style>

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.

Step 7: Change the background color using CSS

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.

Step 7: Change the foreground color of the <h1> and <h2> elements

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;}

Evaluation and Grading (50 pts total)

Specifications for the lab03.html: file

Due date: This is "due" on 09/20/07.

There is nothing to "turn in"... we'll just check your page on the web.

Your next steps

Next step: Read through Chapter 3 in your Head First HTML textbook.

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.

Copyright 2007, Phillip T. Conrad, CIS Dept., University of Delaware. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.