CIS 101 - Lab 10 - Basic Web Page

Lab Exercise 10 - Making a very very simple web site.

Purpose:  to introduce students to web topics like HTML, CSS, and browser differences. To assure that the student is familiar with a basic web page formatting, links, and pictures.

At this point you should be able to complete a lab with more general instructions instead of the minute step-by-step instructions at the beginning of the text's chapters. An outline of the lab is provided here. Much of this lab will be done in class or via questions on the class message board/forum.

• Please DO NOT deviate from these instructions.
• Please recreate my sample page exactly.
• Please do ask specific questions in class or on the message board.
• Don't change the filenames or they won't match the instructions and won't work.

The example files are .PDF and require Adobe Acrobat Reader. If you don't have it, you will need to download and install it from Adobe.

Note: Essentially you will be copying the code/html that is in the PDF files. (This is a case of doing the task before understanding it, so please be patient. We can't cover all of HTML in CIS101, but we can expose you to it.) You can check your work by viewing the file in your browser.

Getting started (suggestions):

1. Get your tools together.
   • If not already installed - Download and install Adobe Acrobat Reader.
   • Windows users - Download and install Notepad++. Mac or Chrome users will need a different editor - discuss on the forum for current options.
2. Download lab10.zip and uncompress it. Put/keep all the uncompressed files in the same folder called lab10. There are 7 files in the lab10.zip and there will be 7 files in the folder:
   • Examples - 4 .pdf files which show you the code view and web view of each of the 2 html pages.
   • Code to edit - 2 .html files which have been named and started for you.
   • Picture - 1 .jpg graphic file.
3. Open the 4 sample files in Acrobat.
4. Use Notepad++ to type/copy the code for the 2 documents (cis101_lab9sample1.html first and then cis101_lab9sample2.html) and save them into the Lab folder. You will be copying these 2 html files exactly from the pdf examples.
5. Ask instructor if you get stuck. Make sure you bring your files to class. (If you are online post to the message board.)
6. Remember, in this lab understanding may FOLLOW doing. Be patient with yourself.

Tips for Lab:

• You need to create 2 web pages. The first will link to the second. (Start with the base files I provided.)
• Replace my name with yours in each case.
• Your first page will look like this: Page 1 web view, html code view. (These files are also in lab10.zip above.)
• Your second page will look like this: Page 2 web view, html code view. The graphic is . (These files are also in lab10.zip above.)
• Link the pages to each other. You need a link on page 1 to go to page 2, and a link on page 2 that goes to page 1. (The picture on page 2 is also in lab10.zip above.)
• You must use a plain text editor to make your page. Notepad is a text editor, as is Notepad++, and there are many others. DreamWeaver is NOT a text editor, neither is saving a Word document as filetype of HTML.
• You can make your page in Notepad or you can use a free program like Notepad++. Personally, I find Notepad rather primitive and unnecessarily painful, but you may take whatever action you feel is appropriate. ;-) If you use Notepad++ it will color your html code as you type alerting you if you make a mistake, allow easy insertion of tags, and give other assistance. The one drawback is that the free version inserts upper case tags.

Upload your finished html files to Moodle.