Learn about...

• The overall structure of HTML documents and how they are different than other types of documents.
• Creating HTML documents using Notepad++.
• W3C validation of HTML documents.

HTML documents are text documents structured with special markup tags also called elements. Unlike other document formats such as PDF and Microsoft Word, HTML source code is human readable. Also, HTML is not proprietary, i.e., it is not owned or copyrighted commercially. The format and standards for HTML documents are established by the W3C and WHATWG, which are "transparent," non-profit organizations devoted to the open and free development of the WWW.

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. Another one is Sublime. 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.

• 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)

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.

• Using a web browser, visit the syllabus for this course
• 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.
• Using Notepad++, open the syllabus web page that you just saved.
• 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.
• Click on the View menu, select Document Map, and use the document map to move around the document.
• 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.
• Download the following Adobe PDF file: syllabus.pdf
• Open the file in Notepad++ and try to find the any of the text content, i.e., course learning goals, required textbook, grading, etc.
• Click on the View menu and select Summary. Use the Summary tool to compare the size of the two files (syllabus.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.

• 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 your 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.

• 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.
• Be sure to store all the files in the appropriate lab folder and use Notepad++ throughout the lab.
• 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
• Your index.html document should validate with only warnings and no errors.
• Show your instructor that index.html validates.

You can work together with a 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