Section 2: Document Markup

Section 2 Assessments

For each of these assignment, complete each bulleted step and submit all files (HTML, CSS, scripts, images, etc.) necessary by zipping and submitting your assignment folder.

Your First Page:

  1. Your name, the course, and semester commented at the top of the file
  2. Create body, header, and footer sections
  3. Create a div named content between your header and footer
  4. Set a page title that displays in the browser tab
  5. Place an address in an address tag in your footer
  6. Your name at the top of the page as an <h1> heading in your header
  7. Add a few paragraphs about yourself to your content div
  8. Add a list of hobbies or interest displayed as an HTML unordered list to content
  9. Link at least two of your hobbies or interests to websites related to those interests

Fun with Media

  1. Your name, the course, and semester commented at the top of the file
  2. One image as part of your page
  3. A short audio clip (or link to available audio file) and player
  4. A short video clip (or link to available video) and player
  5. Set both audio and video clips to have controls and not play automatically
  6. Give your video clip a placeholder image

Tables on Chairs

  1. Recreate the following table in HTML
  2. Use style attributes to set cell colors as needed
  3. Use the caption tag to label your table

Production Levels for Chairs This Week:

Monday

Tuesday

Wednesday

Thursday

Friday

Total

Stools

5

5

5

(quota met)

15

Rolling

(out of materials)

10

15

25

Standard Leg

4

8

12

4

28

Registration Form

  1. Create a form with an action attribute of post
  2. Give it the following fields, and a submit button:
    1. First Name, Last Name
    2. Email Address, Email Address Again
    3. Age
    4. A “Plan” select box that contains Basic, Premium, Titanium options
    5. A checkbox asking if the user wishes to be added to a mailing list
    6. A shirt size radio set that has values of Small, Medium, Large

Adding Some Style

Using CSS rules, modify your “Your First Page” submission to include:

  • A background image that repeats to fill the screen
  • A background color on your content div
  • Modifying H1 to be 32 point and a different color from default
  • Split your About Me and Hobbies sections into separate divs within Content
  • Give your new divs a fixed width of 400 each and set them to sit side by side

Responsive Styling

Add rules to your CSS to achieve the following:

  • Allow divs in your content section to shrink to 200px
  • Vertically align your content divs for screens smaller than the typical tablet
  • Shrink your h1 to fit on one line when on tablets and phones if needed
  • Only show the first paragraph of your About Me section on phones

Discussion / Written Response

  1. Explain the W3C’s stated reasoning as to why it was decided to stop moving all of CSS through version numbers as one cohesive unit. Do you agree or disagree with this position, and why?
  2. Discuss pros and cons of creating web applications using HTML5, CSS3, and other languages against creating the same application for each device’s platform (i.e. Apple’s iTunes, Google Play, Windows Store).
  3. Discuss how XML differs from HTML, and where it is commonly used today.
  4. Why is HTML considered a document markup languages as opposed to a programming language?

Questions

  1. What does HTML stand for?
    1. Hyperlinks and Text Markup Language
    2. Hyper Text Markup Language
    3. Home Tool Markup Language
    4. Hyper Text Manipulation Language
  2. Choose the correct HTML tag for the largest heading.
    1. <heading>
    2. <h1>
    3. <header>
    4. <h6>
  3. Which of these is a properly formatted link?
    1. <a link=”www.google.com”>Link</a>
    2. <a href=”www.google.com” />
    3. <link location=”www.google.com”>Link</a>
    4. <a href=”www.google.com”>Link</a>
  4. How can you open a link in a new tab/browser window?
    1. <a href=“url” target=“_blank”>
    2. <a href=“url” target=“new”>
    3. <a href=“url” new>
  5. Which doctype is correct for HTML5?
    1. <!DOCTYPE HTML5>
    2. <!DOCTYPE html>
    3. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 5.0//EN” “http://www.w3.org/TR/html5/strict.dtd”>
  6. What is the correct HTML for making a drop-down list?
    1. <select>
    2. <input type=“dropdown”>
    3. <input type=“list”>
    4. <list>
  7. Which of the following is correct?
    1. HTML is used for exchanging data, XML is not.
    2. XML is used for exchanging data, HTML is not.
    3. HTML can have user defined tags, XML cannot.
    4. Both b and c above.
  8. What is the correct HTML5 element for playing video files?
    1. <movie>
    2. <video>
    3. <source>
    4. None of the above
  9. What is the correct HTML for inserting an image?
    1. <img src=“image.gif” alt=“MyImage”>
    2. <image src=“image.gif” alt=“MyImage”>
    3. <img href=“image.gif” alt=“MyImage”>
    4. <img alt=“MyImage”>image.gif</img>
  10. The <canvas> element in HTML5 is used to:
    1. Display database records
    2. Manipulate data in MySQL
    3. Create draggable elements
    4. Draw graphics
  11. In HTML5, which attribute is used to specify that an input field must be filled out?
    1. Formvalidate
    2. Validate
    3. placeholder
    4. required
  12. Which HTML5 element is used to display a measurement within a fixed range?
    1. <gauge>
    2. <range>
    3. <measure>
    4. <meter>
  13. What does CSS stand for?
    1. Cross-site scripting
    2. Cascading Style Sheets
    3. Creative style sheets
    4. Compiled site styles
  14. Given the following, what value does the left margin have?: margin: 10px 5px 20px 15px;
    1. 10px
    2. 5px
    3. 20px
    4. 15px
  15. Which style rule overrides the other?
    1. Class
    2. Id
  16. What property creates space between HTML elements?
    1. Margin
    2. Padding
    3. Spacing
    4. Float
  17. What property creates space within an element?
    1. Margin
    2. Padding
    3. Spacing
    4. Float
  18. Which set of tags are used to define CSS within the page?
    1. <style type=“css”></style>
    2. <class type=“text/css”></class>
    3. <inline css></inline>
    4. None of the above
  19. Which of these is the correct way to define a hover state for an anchor tag?
    1. :onHover
    2. :mouseOver
    3. :hover
    4. None of These
  20. Which property of a position rule will force content to a position regardless of other elements?
    1. Fixed
    2. Absolute
    3. Relative
    4. Strict
  21. Responsive styling allows us to support many devices with one style sheet.
    1. True
    2. False
  22. Which of the following is the best fit for defining styles on small mobile devices?
    1. @media only screen and (max-width: 479p
    2. @media only screen and (max-width: 769p
    3. @media only screen and (max-width: 120p

Check your answers

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

The Missing Link Copyright © 2014 by Michael Mendez is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.