Pre-lab

In lab, we will used a text editor called Notepad++ to edit code, which you can download for free at home: Notepad++ Download

Notepad++ is also available in many of the CS labs on the 3rd floor of Roger Bacon..

If you have a Mac, TextWrangler is a similar text editor that you can download for free. But, you will still have to use Notepad++ in lab, so be sure complete the pre-lab using Notepad++. Again, it is available in the CS labs.

pre-lab Reading

• Textbook pp 3-19
• About Notepad++ on Wikipedia
• Notepad++ User Manual (for reference, do not read the whole thing)
• http://www.w3.org/Consortium/facts (use to answer questions about the W3C)

Pre-lab Activity

Answer the pre-lab quiz questions in Blackboard as you complete the reading above and the activity below. Many of the pre-lab questions will be based on the activity below, so you really should do it.

1. Using a web browser, visit the syllabus for this course
2. Save the course syllabus web page as syllabus.html and be sure to note the location where you saved it. Depending on your computer and web browser the file could be saved in a folder called Downloads or it could be saved on your Desktop.
3. Using Notepad++, open the syllabus web page that you just saved.
4. Take note of how Notepad++ uses color to highlight the syntax of the HTML code. Typically, HTML elements (markup tags) are colored blue, attributes are red, values are purple, comments are green, and the actual text content is black.
5. Click on the View menu, select Document Map, and use the document map to move around the document.
6. Move to the very bottom of the document and create a new line by hitting enter. Then, type the letters c o l and press CTRL-Space (i.e., hold the CTRL key and press the space bar). Take note of what happens when you typed CTRL-Space. It if worked, it should gives you a list of HTML elements and attributes that start with the letters you typed. This is very helpful if you cannot remember the exactly spelling of HTML key words.
7. Download the following Adobe PDF file: syllabus.pdf
8. Open the file in Notepad++ and try to find the any of the text content, i.e., course leaning goals, required textbook, grading, etc.
9. Click on the View menu and select Summary. Use the Summary tool to compare the size of the two files (syllbus.pdf and syllabus.html). Consider this information for the pre-lab questions.

Be sure to complete the activity and answer the pre-lab questions in Blackboard before the start of the lab period.

In-lab

Note that these instructions are not always detailed. You must figure out some of the detail by reading the textbook and investigating online sources. You can always ask your instructor for help. If your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.

Preparation

• On your Z: Drive create a folder for this course. You might already have a folder for storing your course files. Call the folder csis180. Inside this new folder create a sub-folder called labs and inside this folder create sub-folders called lab1, lab2, lab3, lab4, ..., lab11. In lab, you will always put all your files in the sub-folder for the lab. This will help you stay organized as you may need to refer back to lab files for project and for exam studying.
• Note that the folder names are lowercase. For folder and file names, always use lowercase letters and never use spaces. When specifying a file name in a hyperlink or when typing a URL, the case of the letters matter. Consider that if you are not consistent, there are four possible file names: Lab 1, Lab1, lab 1 or lab1 for you lab folder. Think about why being consistent will help you later on.
• If you have a USB flash drive and would prefer to store your files there, you can do so, but it is your responsibility to keep and protect your flash drive for the entire semester.

Textbook Exercises

1. Follow the instructions in the textbook for exercise 4-1 through 4-5 and read pages 53-67.
   
   It is very important to read the pages as you do the exercises. While you may be tempted to download the solution without doing the reading and actual exercises, the purpose of this work is to learn concepts and details that you will need to know to complete the rest of the lab and to answer exam questions.
2. Be sure to store all the files in the appropriate lab folder and use Notepad++ throughout the lab.
3. After you are finished with exercise 4-5, be sure your file is saved as index.html and validate it at http://validator.w3.org/#validate_by_upload
4. Your index.html document should validate with only warnings and no errors.
5. Show your instructor that index.html validated.

Activity

You can work together with your partner during lab. But after the lab session is over, you must complete this activity independently. Be sure to email your partner relevant files before the end of the lab session. You should not collaborate with your partner outside of the designated two-hour lab session.

• Answer the following questions by creating an HTML document using Notepad++ called lab1.html that includes the questions below and your answers.
• Note that in order to display HTML tags you must use special character codes instead of simply typing < and >. You can look at the HTML source of these lab instructions to figure out how I displayed these symbols.
• Your HTML document must validate, must have the required minimum structure described in the book and must use all of the following tags appropriately: html, head, meta, title, body, h1, h2, p, ol, ul, and li