Lab 1

HTML & CSS Introduction

---

Lab Setup

Create lab folders

1. Create a folder in your user drive (Z:) for storing your course work called csis390/.
2. Create a sub-folder in your csis390 folder for storing your lab work, i.e., csis390/labs.
3. Create sub-folders for all the labs, i.e., lab1, lab2, ..., lab3.

Make sure you can view file extensions in Windows

1. Click the Start menu
2. Type "folder options" in the search and click "Folder Options" when it appears at the top of the Start menu
3. A dialog box with the title "Folder Options" will appear. Click the "View" tab at the top of the window
4. Click to uncheck the box for "Hide extensions for known file types"
5. Click the "OK" button at the bottom of the dialog box

Download Starter Files

Download all the images (.png) and text files (.txt) from this lab1 folder to your own lab1 folder, i.e., csis390/labs/lab1

---

1. Creating HTML Documents

• Open starter.txt in Notepad++ and immediately save it as starter.html.
• Add you and your partner's name at the top using an HTML comment.
• Use HTML markup to make the web page look like starter.pdf
• Be sure to appropriately add the following HTML tags. Chapter 1 of the zyBook will explain how to appropriately use these tags.
  1. !DOCTYPE so we know its HTML
  2. html to encapsulate all the data
  3. meta to use the utf-8 character set
  4. title so the title is "My Little Pony: Applejack"
  5. body to encapsulate all the visible content
  6. h1 for the main top title "Applejack"
  7. h2 for all the sub-headings
  8. p for all the paragraphs
  9. h3 for the sub-headings in the Skills sub-section
  10. em for all the instances of the phrase "My Little Pony"
  11. u for all the instances of the word "Friendship"
  12. strong for all the instances of the word "Applejack"
      Hint: use find and replace as there are many instances
  13. ul and li to make a bulleted list for the 4 episodes in the "Strength" sub-section inside the "Skills" sub-section
  14. img to add the small and larger image. Use the width attribute to reduce the size of the larger image.

TASK CHECK

Verify that the document validates at: html5.validator.nu
Then, show your instructor your completed valid document.

---

2. Styling Documents with CSS

1. Immediately save starter.html as final.html.
2. Add a style tag to final.html for storing embedded CSS code.
3. Add CSS selectors and properties to make the web page look like this: final.pdf
4. Chapter 1 of the zyBook will explain CSS syntax, selectors and properties.
5. Use the following directions to help you match the style. Your web page does not have to exactly match but it needs to be a close approximation.

Bonus

Read in Chapter 2 about background gradients and then add a linear-gradient to the background of the h1 tag.

TASK CHECK

Show your instructor your completed document and that it validates here: html5.validator.nu

---

3. HTML Tables & Lists

• Open data.txt in Notepad++ and immediately save it asdata.html.
• Add you and your partner's name at the top using an HTML comment.
• Use HTML markup to make the web page look like this data_structured.pdf web page.
• Hints:
  • Use the table, thead, tbody, tr, td, and th tags to properly structure the table.
  • Here are examples of how these tags are used.
  • Use the ul and li tags to properly structure a nested list.
  • Read about the proper way to make HTML nested lists.
• Be sure your code validates at html5.validator.nu
• Use CSS to make the web page look like data_styled.pdf
• Hints:
  • Give both the td and th tags a solid black border and padding so the table looks more like a table.
  • Use the border-collapse property so the border look like normal table borders.
  • Read about the border-collapse property to learn more.
  • Give the th tag a dark background color and white text
  • Read about the nth-child() selector to give the even rows a different background color.
  • Use the nth-child() selector to center the 3rd and 4th columns of data and to right justify the first column.
  • Give the ul padding of zero.
  • Give the li a list-style of none and display using inline-block.
  • Read about the difference between inline, block and inline-block display.
  • Experiment with the padding, margin, font-size and background-color to match the look of the outer list items
  • Use the selector ul ul li, to give the innerli tags a different look.
  • Read Chapter 2.6 in the zyBook to learn more about advanced selectors.
  • Experiment with the padding, margin, font-size, color and background-color to match the style approximately.