Lab 1: HTML Documents & Structure

Goals

Learn about...

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

Key Concept

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.

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

pre-lab Reading

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 learning 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

Lab 1 Questions

by [[Insert Your Name Here]]

  1. Most HTML elements have a start tag and an end tag with text content in between. But, the reading presented several elements that only have one tag (the start tag). Which elements only have one tag and why is it not necessary for them to have end tags.
  2. We used a meta tag in lab to defined the character set. Why would HTML allow you to use a different character set? Hint: Think about the fact that HTML is for the World Wide Web.
  3. A web page title typically appears in two places (in the head using the title tag and in the body using an h1 header). What is the difference between these two places and why is it useful to put a meaningful title in both places.
  4. It is a common convention to name HTML files with all lowercase letters. Why is this convention helpful/useful?
  5. There are certain symbols that cannot be used in a URL. Thus, they should not be used in the name of an HTML file. List five symbols that cannot be used.
  6. Fix the following HTML validation errors
    • <img scr="birthday">
    • <h1>Hello<\h2>
    • <a href="file.html" Home</a>
    • <p>First paragraph<p>Second paragraph</p>
  7. How are HTML documents superior to PDF documents.

 

Deliverables

Upload your lab1.html file with your answer to Blackboard. You will be graded based on the quality of your answers. But also, your document must validate as HTML5 with only one warning and no errors, and it must properly use all the required tags: html, head, meta, title, body, h1, h2, p, ol, ul, and li