Skip to main content
Engineering LibreTexts

2.E: Document Makeup (Exercise)

  • Page ID
    3526
  • [ "article:topic" ]

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

    Your First Page:

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

    Fun with Media

    • Your name, the course, and semester commented at the top of the file
    • One image as part of your page
    • A short audio clip (or link to available audio filand player
    • A short video clip (or link to available videand player
    • Set both audio and video clips to have controls and not play automatically
    • Give your video clip a placeholder image

    Tables on Chairs

    • Recreate the following table in HTML
    • Use style attributes to set cell colors as needed
    • Use the caption tag to label your table

    section_2_assessments_1.png 

    Registration Form

    • Create a form with an action attribute of the post
    • Give it the following fields, and a submit button:
      • First Name, Last Name
      • Email Address, Email Address Again
      • Age
      • A “Plan” select box that contains Basic, Premium, Titanium options
    • A checkbox asking if the user wishes to be added to a mailing list
    • 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 points and a different color from the 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’ 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?
      a. Hyperlinks and Text Markup Language
      b. Hyper Text Markup Language
      c. Home Tool Markup Language
      d. Hyper Text Manipulation Language

      Answer:
      b
    2. Choose the correct HTML tag for the largest heading.
      a. <heading>
      b. <h1>
      c. <header>
      d. <h6>

      Answer:
      b
      <heading> is not a valid tag, <header> is a document section, and <h6> is the smallest heading
    3. Which of these is a properly formatted link?
      a. <a link="www.google.com">Link</a>
      b. <a href="www.google.com"/>
      c. <link location="www.google.com">Link</a>
      d. <a href="www.google.com">Link</a>

      Answer:
      d
    4. How can you open a link in a new tab/browser window?
      a. <a href="url" target="_blank">
      b. <a href="url" target="new">
      c. <a href="url" new>

      Answer:
      a
    5. Which doctype is correct for HTML5?
      a. <!DOCTYPE HTML5>
      b. <!DOCTYPE html>
      c. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd">

      Answer:
      b
    6. What is the correct HTML for making a drop-down list?
      a. <select>
      b. <input type="dropdown">
      c. <input type="list">
      d. <list>

      Answer:
      a
    7. Which of the following is correct?
      a. HTML is used for exchanging data, XML is not.
      b. XML is used for exchanging data, HTML is not.
      c. HTML can have user defined tags, XML cannot.
      d. Both b and c above.

      Answer:
      b
    8. What is the correct HTML5 element for playing video files?
      a. <movie>
      b. <video>
      c. <source>
      d. None of the above

      Answer:
      b
    9. What is the correct HTML for inserting an image?
      a. <img src="image.gif" alt="MyImage">
      b. <image src="image.gif" alt="MyImage">
      c. <img href="image.gif" alt="MyImage">
      d. <img alt="MyImage">image.gif</img>

      Answer:
      a
    10. The <canvas> element in HTML5 is used to:
      a. Display database records
      b. Manipulate data in MySQL
      c. Create draggable elements
      d. Draw graphics

      Answer:
      d
      a and c are possible, but not the main purpose.
    11. In HTML5, which attribute is used to specify that an input field must be filled out?
      a. Formvalidate
      b. Validate
      c. placeholder
      d. required

      Answer:
      d
    12. Which HTML5 element is used to display a measurement within a fixed range?
      a. <gauge>
      b. <range>
      c. <measure>
      d. <meter>

      Answer:
      b
    13. What does CSS stand for?
      a. Cross-site scripting
      b. Cascading Style Sheets
      c. Creative style sheets
      d. Compiled site styles

      Answer:
      b
    14. Given the following, what value does the left margin have?: margin: 10px 5px 20px 15px;
      a. 10px
      b. 5px
      c. 20px
      d. 15px

      Answer:
      d
      10px is the top, 5px is the right, and 2px is the bottom
    15. Which style rule overrides the other?
      a. Class
      b. Id

      Answer:
      b
    16. What property creates space between HTML elements?
      a. Margin
      b. Padding
      c. Spacing
      d. Float

      Answer:
      a
      Padding is inside an element and spacing is between text
    17. What property creates space within an element?
      a. Margin
      b. Padding
      c. Spacing
      d. Float

      Answer:
      b
    18. Which set of tags are used to define CSS within the page?
      a. <style type="css"></style>
      b. <class type="text/css"></class>
      c. <inline css></inline>
      d. None of the above

      Answer:
      a
    19. Which of these is the correct way to define a hover state for an anchor tag?
      a. :onHover
      b. :mouseOver
      c. :hover
      d. None of These

      Answer:
      a
    20. Which property of a position rule will force content to a position regardless of other elements?
      a. Fixed
      b. Absolute
      c. Relative
      d. Strict

      Answer:
      b
    21. Responsive styling allows us to support many devices with one style sheet.
      a. True
      b. False

      Answer:
      a
    22. Which of the following is the best fit for defining styles on small mobile devices?
      a. @media only screen and (max-width: 479p)
      b. @media only screen and (max-width: 769p)
      c. @media only screen and (max-width: 120p)

      Answer:
      a
      b is good for tablet, and c is really small