Welcome to CISC103, a class that is designed to introduce basic concepts of computer science through the window of "web applications".
It has no pre-requisite, so there is no assumption about any previous background with computers, other than that which is common knowledge (e.g. how to use a web browser, a mouse, etc.). So if you are uncomfortable with your computer knowledge, the word of encouragement is for you: the introduction will be gentle.
The word of caution is for everyone: if this initial activity seems really easy, don't be lulled into a false sense of security, or into thinking this class is going to be "cake". The work will get rather challenging very soon. You may breeze through this activity, and perhaps even the first couple of weeks, to find that later material requires a lot more study and careful attention. So develop the habit now of doing each activity carefully and completely, even if you find it simple.
By the end of this lesson, students should be able to
When you first sit down at a computer, move the mouse slightly to "wake up" the computer, in case a screen saver is operating.
Question 1: Do you see the following?
If answer to question 1 is no: instead, you see something else... perhaps the computer is already logged in. If so, you need to be sure that it is logged into cisc103. You can check this by clicking on the "start" menu button, as shown here:
If you aren't logged into cisc103, as shown by looking at the top of the start menu in the image above, then click log off. You may be asked to confirm that you really do want to logoff.
If answer to question 1 is yes:
Then you are ready to log on. To bring up the logon screen, hold down CTRL-ALT-DELETE all at the same time (the so-called "three finger salute").
The username for everyone is cisc103, and there is no password (just leave it empty), as shown below:
If your screen looks different than the one above, you might find it looks like the image below, you'll have to make a change:
If so, that's ok. If instead, it looks like this:
If you have this image (basically, anything in the ":Log on to:" box other than MEMLAB, you need to click on the little grey arrow to the right of the box, and change it to MEMLAB before logging on.
Click OK to continue logging on. You should then see a screen like this one:
You are ready to proceed to step 2.
Note that if you are working from a paper copy of these instructions, now is the time to switch to the online version, available at: http://copland.udel.edu/~pconrad/cisc103
Click on the "activites" link, and then on "activity01.html".
Now find the "My computer" icon and double click on it, as indicated in the figures below. That will bring up a window where you should notice the "H drive" somewhere towards the bottom of the screen.
Double click on the H drive icon. That should bring up a window like this one. You should see folders for various folks in the class, including your instructor and your TA, as well as fellow students. Your next task is to create a folder for yourself. This is where you will store things for the course this semester. The next diagram illustrates what to do. The folder will initially come up with a name like "New Folder", or "New Folder (2)". Change the name to your UDEL email address (but without the @udel.edu part), e.g. jsmith, or skibum, or whatever.
Next, we are going to change a few default options for how Windows treats filenames. Go to the Tools menu at the top of your folder screen, as shown here:
You need to change some of the folder options under the "View" tab, as shown here:
Next, double click on your folder. It should initially be empty. First, create a new folder called "lab01", and then double click on that folder, as shown here:
The folder will first come up with a name such as "New Folder", as shown here. Rename your folder to "lab01", then double click on it to go into it.
You should now be inside an "empty folder" called "lab01", which is inside your personal folder on the H drive. You are ready for the next step.
Now right click on "empty space" to bring up a menu where you can select "New Text File", as shown below:
Your screen should then look something like this:
Rename the file to test.html. At first, Windows may "scold" you a bit, as shown below. Go ahead and click "yes", because you are changing this file extension on purpose.
You now have a file called "test.html". We are now going to edit this file with Notepad. It is very important that we are doing this with Notepad, rather than with a more sophisticated editor such as FrontPage, Dreamweaver, or with a word processing program like Microsoft Word. The reason is that we want to start at the very beginning with learning web technologies. Those other sophisticated tools will put in a lot of codes that are advanced, and will be confusing for us at this stage. Eventually, we will move on to those advanced tools. For now, we will use Notepad.
To use Notepad to edit the HTML file, right click, and go to "open with Notepad", as indicated below. If you double click the file will just open the file in Internet Explorer, which is no problem, but it won't allow you to make any changes. At this point, you'll see a blank page, since the file doesn't contain anything yet.
After you open the file with Notepad, you should see a screen like this one, except it will be empty. You are now ready to start creating your first HTML file from scratch. Start with the open tag <HTML>, and the close tag </HTML>
The combination of an open tag <HTML> and a close tag </HTML> gives you something called an HTML element. Now, you are going to nest two elements inside the HTML element, as shown below. These two elements are the HEAD element and the BODY element.
Now, continue editing, in the stages shown below. First, add a TITLE element, nested inside the HEAD element. This is the first element that will actually contain some content, in this case, the title of our web page. This title appears in the title bar, at the top of our new web page. We will also put an H1 element containing a "1st level headline", and P element ("P" stands for "paragraph") inside our BODY element. Our web page is complete.
For your content, don't type exactly what I have here. Instead, change it to your own interesting and creative title, one that incorporates the name you would like to be called by in class. In the P element, include your complete first and last name somewhere in a complete English sentence. Again, the sentence can be something of your own imagination, as long as it contains your name. Don't worry about being profound; this is just meant to be an example.
Now—and this is probably the most important step of the entire exercise—go to the File menu and click Save to save your work!
You are now ready to see the results of your creation. Go back to the window where you have the test.html file icon, and double click on it. This will open the file in Internet Explorer.
If your file doesn't come up, or you don't see what you think you should see, ask your TA for help.
It is helpful, when creating web content, to be sure that it works in more than one browser. Internet Explorer is fairly tolerant of minor errors in HTML code, which is helpful in some ways, but no so good in others. The Firefox browser interprets HTML much more strictly, and checking that the HTML looks correct in Firefox is a good "first step" in checking that our HTML coding is done properly.
To open the Firefox browser, go to the Start menu, and find "Mozilla Firefox":
Then, once in Firefox, choose the option "Open File" from the File menu:
Then, navigate to your lab01 folder inside your folder on the H drive, as shown here:
This should open up your test.html file in Firefox, with a result such as the one below:
There are several steps involved in publishing your web page to the Internet. They involve the use of the SSH Secure File Transfer Client. Your TA or Instructor will demonstrate these on the projector screen.
Your final step is to be sure that you save all your files, close all your windows, and log off the cisc103 account when you are finished.
This activity counts as a particpation grade. (Information on "participation grading" appears on the course syllabus.) To receive full credit for this activity (a "check"), your TA should be able to find the following four items completed.
Specifications for the test.html file:
The test.html file should consist of a single HTML element, that has two nested elements inside it, a HEAD element, and a BODY element. The HEAD element has one element inside it, which is a TITLE element. The title should consist of a short description such as "Phill's simple web page". The BODY element should contain two elements: an H1 element with a headline, and P element with a short sentence. The sentence should include the student's full name (first and last), e.g. "This is a simple web page by Phill Conrad", or "Keith Monihen wrote this very simple web page." Similarly, the H1 element should include a suitable headline such as "My Simple Web Page".
Due date: This is "due" one week from your scheduled lab date for lab01.html, i.e. Tuesday 9/6/05 for Tuesday lab students (section 010) and Thursday 9/9/05 for Thursday lab students (section 011). However, due to "drop/add", a general "amnesty" applies to all students for late completion of this lab up through 9/20/05. Any student not completing this lab by that date will receive a zero.
Your next step should be to complete project 1 in your "Essentials for Design: XHTML Level One" textbook. That will be our first task in next week's lab, but if you'd like to get an early start, feel free to go ahead.
If you don't have a copy of this book yet, never fear: a PDF copy of the first chapter is available online.
(That is not true of any other chapter in the book, so this is your last "free pass"... next week, bring your XHTML book to lab with you! We'll be doing lesson 2 in lab next week, which is NOT available online. You also will need your JavaScript Level One book for next week's lab. You can leave the other two books—Deitel/Deitel, and JavaScript Level Two—at home for now.)