Web Technologies I – Midterm Exam
Write your answers on the answer sheets provided. You may refer to a printouts of any single homework assignment you have written. You may also make use of the HTML and CSS quick reference guides distributed in class.

  1. (2 pts) Suppose, on the csci server, a user has an account named fred. What URL would a person enter into a web browser to view this user's homepage?

  2. (2 pts) Name two examples of web servers.

  3. (2 pts) What is the purpose of the alt attribute in the <img> tag.

  4. (2 pts) What is meant by the term “responsive design”?

  5. (4 pts) What color does the hexadecimal value #0000FF. Explain, as if to a novice, how you know.

  6. (3 pts each) Construct regular expressions that will match each of the following strings:
    1. a string that contains a date having the form: mm/dd/yyyy
    2. a string consisting of one valid HSU course number (e.g., CSCI 1320-A or ART 1300-C); a valid course number begins with 3 or 4 capital letters followed by a space, followed by two digits in the range 0 to 6, followed by (any) two digits, followed by a dash, followed by a capital letter in the range A to H.

  7. (3 pts each) Briefly define each of the following terms in the context of client-side Javascript programming. If the term is an acronym then first expand the acronym and then define the term.
    1. DOM
    2. event handler

  8. Write HTML commands to create a form with the following elements/behavior:
    1. (2 pts) a text box that requests a SSN
    2. (4 pts) a set of radio buttons that are labeled as follows:
      • add me to your mailing list
      • remove me from your mailing list
      • make no change to my mailing list status
      The first option should be selected by default.

    3. (2 pts) a submit button labeled “Done”
    4. (3 pts) the form itself should use a method of POST and should post to a page named “handleform.html”

  9. Assume the form in problem 8 has been written as described.
    1. (5 pts) Write a Javascript event handler that is to be called when the form is submitted. The handler should return false and display an appropriate alert message if the SSN does not fit the classic form: xxx-xx-xxxx. It will return true otherwise.
    2. (3 pts) What Javascript command would you use to dynamically assign this event handler to the submit event on the form?

  10. Assume you are given the following code as a starting point: exam_solutions/2021.midterm_start.html Unless specifically asked to do so, do not modify the provided HTML. Assume any CSS commands you are asked to produce appear in the <style> section in the <head> and that Javascript commands will appear in the <script> section near the bottom. For full credit use flexbox commands to position divs.
    1. (2 pts) What HTML tag would you add to the <head> in order to cause the page to scale properly when viewed on a handheld device.

    2. (3 pts) Write CSS commands to apply the border-box model to all elements on the page.

    3. (2 pts) Write CSS commands to set the <header> section to have a background color of #191970 and a foreground color of #eeeeee.

    4. (2 pts) Write CSS commands to set the <main> section to have a background color of #eeeeee and a foreground color of #191970.

    5. (3 pts) Write CSS commands to give the content frame a maximum width of 960 pixels and to center the content frame on the page. NOTE: The content frame in this sample page is specified by the elements that have been assigned the class called “wrap”.

    6. (3 pts) Write CSS (flexbox) commands to put the <h1> and <img> on the same line with the header on the left and the image lined up with the right margin.

    7. (2 pts) Write CSS command to give the image a fixed height of 100 pixels.

    8. (4 pts) Write CSS (flexbox) commands to cause the two <article> sections to line up side-by-side with each of them taking up half the content frame. Also, give the columns padding of 5 pixels on all sides without causing them to align vertically.

    9. (2 pts) Write CSS commands to provide a dotted border that is 1 pixel wide on the left column.

    10. (3 pts) Write CSS commands to responsively enact the following changes when the screen width reports to be less than 680 pixels.
      1. (2 pts) The <img> should slide under the <h1> and the image should be displayed the full width of the screen.
      2. (2 pts) The two columns (<article>'s) should appear vertically instead of side-by-side.

Web I

Course Resources

Grades and Homework

Quick Links