CSE 134B: Client-Side Web Languages

Winter 2017 | University of California, San Diego CSE Department

Homework #2 - HTML5 Templates and Tag Exploration

This homework presents an opportunity to try out the large number of tags supported in HTML5.

The HTML5 specification is a sprawling document that includes both tags and related APIs. Sections 3 and 4 of the specification cover the document and the various elements you may use. In order to gain some familiarity with the spec we want you to read it over and perform the following tasks:

  1. Create HTML only (including images if you like) templates (no CSS) that represent the document structure of the wireframes you created in HW 1
  2. Create HTML document(s) to test any tags in the HTML5 spec you did not use in part 1.
  3. \
  4. Make a fun team page for your team

To further explain these points consider that the HTML document(s) used to represent the various views/screens/pages of your wireframes when turned into HTML templates likely will only include basic tags like <p> , <div>, <a> , <img>, <form> and so on. Since HTML has many other elements it will be useful to explore the rest of the element we may need some day. To do this create simple example(s) that demonstrate every other HTML5 element in a valid way. Do understand we are not expecting every aspect of every HTML5 as that would take a prohibitive amount of time. We are expecting instead to develop an awareness of what elements are available and how they might be used.

To organize your homework keep all your wireframes in a directory named wireframes and name and link them in a clear manner. Make sure you have an entry page called app.html or index.html.

For all the remaining elements to test you will need to make many different documents. We would warn against making an individual document per element but instead the individual tags should be tested in a reasonably way in groups. Put all the tags you test in a folder named tags and name the files in a way that is clear which group of tags are being exercised. Make an index.html file in the directory to easily link to the various test document.

Finally make a team page (team.html) that lists all your team members, has a photo or avatar for each, contact information and maybe some introductory information about the goals or culture of your team. This page can be as creative as you like. You are allowed to use CSS if you want (though you won't be graded on it this exercise). You will have time on the next assignment to improve your team page so focus on markup quality and make sure it validates! You may not use CSS in any other part of the assignment.

Always make sure that all HTML documents you create are valid per the validator found at http://validator.w3.org. If you have any areas of unclarity or things to note about validator or browser support provide a README.md file for the TA or grader.


Back to CSE134B

Grading

  • 20pts for wireframe document(s)
  • 20pts for test document(s)
  • 10pts for team page

Total: 50pts

The TAs will provide submission information in Slack channel. The assignment is due 9PM Sat Jan 28th.