Learn about...

• How HTML5 is a living standard
• The default format of HTML text elements and how to change them.
• The different types of text elements and how to choose the correct ones for organizing content (semantic markup)

HTML elements do not just change the appearance of text (i.e., bold vs. italic, large vs. small font, etc.), they are used to specify the structure, purpose and meaning of text. Search engines and many programs use HTML markup to determine the context and importance of text. CSS can be used to change the default appearance of HTML elements. It is considered bad practice to use HTML tags inappropriately just to achieve a certain visual appearance.

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

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 to 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:

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

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

• Read pages 79-94 and complete exercise 5-2 (p. 94) 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. Make sure your document above validates at http://validator.w3.org/#validate_by_upload

  Show your instructor that article.html validates.

• Read pages 96-102 and complete exercise 5-3 (p. 101) using Notepad++. Add the specified markup tags appropriately and add the required HTML document stucture (see Figure 4-7 on page 56).

  Note: Do not use the pubdate attribute in the time tag in parts 4 and 11 of this exercise.

  Save the document as bistro_blog.html. Make sure your document validates at http://validator.w3.org/#validate_by_upload

  Show your instructor that bistro_blog.html validates.

You can work together with a partner during lab. But you must complete this part of the lab on your own. You should not collaborate with your partner outside of the designated two-hour lab session.

• You should each create a starter web page that you can use for project 1.
• Use your name in creating the file. For instance, my file would be named maryanneegan.html.
• In deciding how to markup the content, use exercise 5-3 as a guide. Note that the model content below includes some instructions in parenthesis.

(Use header and h1, h2, etc.)
MaryAnne Egan
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: maegan@siena.edu
Phone: (518) 782-6546 (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)
These can be in one or two paragraphs instead of just listed.


(This is a division, use <div class="favorites">, h3, ol, li ) 
Favorite Courses:
1. Web Design
2. Introduction to Computer Science
3. (use an ordered list)


(This is a division, use <div class="favorites">, h3, ul, li ) 
Favorite Books:
* Harry Potter by JK Rowling
* How to travel on someone else's dime by Michael Schneider
* (use an unordered list)


(This is a division, use <div class="favorites">, h3, ul, li, q, cite ) 
Favorite Quotes:
"Genius is one percent inspiration and ninety-nine percent perspiration" by Thomas A.Edison
"I'm writing a book. I've got the page numbers done." by Steven Wright
"I didn't like him anyway.  He wasn't right in the head." by Stephen to William Wallace in Braveheart


(use footer)
Copyright © 2018, MaryAnne Egan