Pre-lab

Pre-lab Reading

• Textbook pp 69-78
• http://en.wikipedia.org/wiki/HTML5
• http://en.wikipedia.org/wiki/WHATWG
• http://en.wikipedia.org/wiki/Living_document

Pre-lab Activity

1. Using Notepad++ (PC) or TextWrangler (Mac), create an HTML document called lab2.html with the basic required structure (see Figure 4-7 on page 56) and be sure to save it a familiar folder, i.e., a folder that you can easily find (Desktop, My Documents, etc.)
2. Be sure that the file is saved as an HTML Document so that it is named lab2.html and not lab2.html.txt
3. In the head, add the text Lab 2: Semantic Markup inside a title tag, i.e., <title>Lab 2: Semantic Markup</title>.
4. In the body, add the text Lab 2 inside an h1 tag, i.e., <h1>Lab 2</h1>.
5. Open the lab2.html web page in a web browser (Chrome, Firefox or Safari, avoid Internet Explorer if you can).
6. To open a web page locally, find the lab2.html file using File Explorer for Windows or the Finder for Mac, right click on the file, select "open with," and pick a web browser.
7. In the web browser, take note of where the title in the head appears vs. where the h1 in the body appears.
8. Switch back to your text editor and add three paragraphs of text inside the body of the HTML document. Cut and paste a long sentence over and over so that each paragraph has multiple lines of text. Use the p tag, to properly markup your three paragraphs.
   
   Key concept: By default, most web browsers will separate block elements (paragraphs and headers) with blank lines by using a top and bottom margin of 16px. Margins define an area around an element where other elements cannot be placed. When paragraphs and headers are vertically adjacent, the margins overlap, i.e., instead of being separated by 32px (16px + 16px) the paragraphs will be 16px apart.
9. Change the margins and indent all paragraphs by inserting the following code inside the head element of the page:

   <style>
   p { 
   text-indent: 24px;
   margin-top: 8px;
   margin-bottom: 4px;
   }
   </style>

10. Save your lab2.html file and press the reload/refresh button on your web browser.
    
    Notice that the first line of each paragraph is indented and paragraphs are now closer together vertically. Specifically, adjacent paragraphs are 8px apart, not 12px (4px + 8px). Remember that paragraph margins overlap and the bigger value determines the actually space between adjacent elements.
11. In between the first and second paragraph add an h2 with the content Subtitle.
12. In between the second and third paragraph add an h3 with the content Sub-subtitle.
    
    By default, headers are bold with a larger font size than paragraph text.
13. Add the code shown below to style the h1, h2, and h3 tags. Make sure this code is inside the style tag and below the paragraph style you previously typed:

    <style>
    h1, h2, h3 {
    font-size: 16px;
    color: green;
    border-bottom: 1px solid green;
    margin-top 24px;
    margin-bottom: 2px;
    }
    

14. Save the file and refresh/reload the page in a web browser.
    
    Notice how the font size and color have changed. Also, note that there is now 24px of space between each header and the paragraph above the header, but there is actually 8px of space (not 2px) between each header and the paragraph below the header. This is because each paragraph has a top margin of 8px, which is larger than the 2px bottom margin of the headers.
15. In the body below third paragraph, add the ordered list shown in Figure 5-5 on page 75.
16. Change the ordered list to an un-ordered list.
    
    Note: By default, lists are indented. On most web browsers, each li element has a left margin of 40px. In addition, the numbers or bullets are displayed 16px to the left of the indented text.
17. Move the entire li elements to the left by adding the following code inside the style tag:

    li {
    margin-left: -16px;
    } 

18. Save and refresh/reload the page.
    
    Notice that the list's text and bullets moved to the left. A negative left margin is a trick that allows you to move elements to the left.
19. Next, move the text closer to the bullet by adding the following code to the li style:

    text-indent: -8px;

20. Save and refresh/reload the page.
    
    Notice that only the text moved. The bullet, which is actually part of the li element, did not move. The text-indent attribute only effects the text inside the element, whereas margins effect the entire element.
21. Below the un-ordered list, add a blockquote element and add several sentences of text (see Figure 5-7 on page 77)..
22. Below the blockquote add a pre element and add several sentences with many spaces and blank lines (see Figure 5-8 on pages 77-78).
23. Save and refresh/reload the page.
    
    Notice how the blockquote and pre elements impact the appearance of the text inside the tag. Web designers often misuse the blockquote element just to create an indented paragraph. However, it should only be used to indicate that a block of text is a quote. Similarly, the pre element is often misused to position text, wheres it should only be used to indicate text where the spaces and tabs matter, i.e, in code or pre-formatted text.

Use this activity and your observations to answer 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

• Always make sure you save your lab file in the appropriate folder, i.e., lab2 for this lab.
• For file names, only use lowercase letter and never use spaces.

Image Editing with GIMP

GIMP Topic: Cropping, resizing, transforms, exporting.

Textbook Exercises

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.

1. Read pages 79-94 and complete exercise 5-2 using Notepad++. Add the specified markup tags appropriately and add the required HTML document stucture (see Figure 4-7 on page 56). Save the document as article.html
2. Make sure your document above validates at http://validator.w3.org/#validate_by_upload
3. Show your instructor that article.html validates.
4. Read pages 96-102 and complete exercise 5-3 using Notepad++. Add the specified markup tags appropriately and add the required HTML document stucture (see Figure 4-7 on page 56). Save the document as bistro_blog.html.
5. Make sure your document above validates at http://validator.w3.org/#validate_by_upload
6. Show your instructor that bistro_blog.html validates.

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.

• Create a starter web page that you can use for project 1. You should work together in lab to get started, but eventually you'll want to create separate documents for you and your partner.
• Create two files: (1) one with your name and (2) one with your partner's name. For instance, my file would be named ericbreimer.html. Work on the two files in a fair way; do as much as you can during lab; and then email your partner their file at the end of lab.
• In deciding how to markup the content, use excercise 5-3 as a guide. Note that the model content below includes some instructions in parenthesis.

(Use header and h1, h2, etc.)
Eric Breimer
CS Major
Siena College

(This is your navigation menu, use nav, ul, li, use mark to highlight the word home)

Home
Resume
Courses
Projects
Photos

(This is a division, use <div id="info">, h3, strong, address )

Contact Info

515 Loudon Road Loudonville, NY 12211
Email: ebreimer@siena.edu
Phone: (518) 786-508 (use <span class="phone">)

(This is a division, use <div id="background">, h3, p, em, strong )

Background

I grew up in blaa blaa blaa.
I enjoy blaa blaa blaa.
This should be about 3-4 sentences.
Try to be professional but interesting.
Use the em and strong tags appropriately
to highlight key parts of your background.
You should also include a date
so you can use the time and date tags.
Somewhere use an abbreviation and then
define it with the abbr element.
For instance I went to RPI (Rensselaer Polytechnic Institute)


(This is a division, use <div class="favorites">, h3, ol, li ) 

Favorite Courses

1. Web Design
2. Accounting
3. (use an ordered list)


(This is a division, use <div class="favorites">, h3, ul, li ) 

Favorite Books

* How the Mind Works by Steven Pinker
* Freakonomics by Blaa Blaa
* (use an unordered list)


(This is a division, use <div class="favorites">, h3, ul, li, q, cite ) 

Favorite Quotes

"...and that tells you something" - My Grandma
"You are a brainless wonder" - My Mom


(use footer)

Copyright @copy; 2013, Eric Breimer