CSE 134B: Client-Side Web Languages

Fall 2017 | University of California, San Diego CSE Department

Homework #2 - HTML Tag Testing

In this homework we explore the HTML specification to get a sense of what is available to us. We will make simple valid tests and experiments with every tag we can find in the specification. While our testing cannot exercise every possible use case for tags adequate tests should exercise base function and give us a sense of what is possible.

There are many sites online we can consult to find basic HTML examples, but we will try to go to the source and work backwards. To this end we will follow the HTML5 specification https://www.w3.org/TR/html5/Overview.html#contents closely. You don’t necessarily need to read the specification deeply to accomplish this assignment, but scanning the sections and reading the introductions for each topic below will help you complete the tasks in a timely manner.

To keep us from just copy-pasting examples, we will make our demos using non-typical content. For this assignment you must make your demos with content about either soccer words and info or the favorite topic of the Internet -- cats. You may find http://soccer-ipsum.com/ and http://www.catipsum.com/ helpful for boilerplate text specific to these topics. Besides Google Images numerous place holder image sites can provide you with appropriate content (ex: loremflickr.com) Be careful though, host your images directly on your site as image failures during grading will not be excused.

To keep the examples tractable we are going to cluster them around the sections of the specification as follows:

Sections, Style and Meta Data (3pts)

Make a single valid HTML document ( https://www.w3.org/TR/html5/semantics.html#semantic) that tests the html, head, body, title, meta, style, article, section, aside, h1-h6, header, footer, and address tags. Do not attempt to use the style in a significant way just set some colors, font sizes and other simple features to show style is on. You may have other tags like <p>, <div> or others as you see fit. However, do not attempt to design the page.

Grouping Elements (3pts)

Make a single valid HTML document with the specified content topic that tests all the grouping elements https://www.w3.org/TR/html5/grouping-content.html#grouping-content

Text Level Elements (3pts)

Make a single valid HTML document that tests all the text level elements https://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics and uses the topic matter content (cats or soccer).

Editing Elements (1pt)

Make a single valid document that shows the use of the editing elements - https://www.w3.org/TR/html5/edits.html#edits Make sure your example makes sense and uses the content topic.

Embedded Content (6pts)

Make single or multiple valid documents to test all the embedded contents https://www.w3.org/TR/html5/embedded-content-0.html#embedded-content-0 You may find it useful to have multiple documents since to properly test the image tag for example you would need to perform many demos including image maps, different image types, etc. You must also test for things like iframes, sounds, and so on specified in this section. Also you must try MathML and SVG as they are specifically called out in the spec.

Links (3pts)

Make a set of valid documents to test links https://www.w3.org/TR/html5/links.html in HTML. Also utilize the <nav> tag and <link> tags from earlier part of the HTML specification. Make sure you explore not just internal links, but links within pages (up and down a page), links to sections of other pages, external links, image maps, and link relationships.

Tables (3pts)

Create a validdocument with a complete example of using HTML tables https://www.w3.org/TR/html5/tabular-data.html#tabular-data. You may need more than a single table to fully explore the features available. Makes sure you populate your table with content meaningful to your topic choice.

Forms (6pts)

Test HTML forms ( https://www.w3.org/TR/html5/forms.html) as completely as you can without using server side technology. You may use more than a single page if you like to organize your demos. The site https://httpbin.org/ will be quite useful as it can get GET (/get) and POST (/post) for you. Worst case you can always resort to https://httpbin.org/anything

Script (6pts)

Test the script, noscript, template and canvas tags in a single or multiple documents. Three of these tags will not do anything without script code so you are free to use a small amount of vanilla JS (no libraries including jQuery) to perform your tests. To test the canvas tag draw a cat or a soccer ball on your canvas using simple code. This can be a very simple exercise or you can make it difficult if you attempt to write code to perform the drawing completely manually.

Global Attributes (6pts)

Test all the global attributes in a single document. You do not have to test the xml aspects of these attributes.

  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

Event Attributes (6pts)

Make a single HTML document that tests all the event handlers listed below. Use a simple script like alert('Eventname fired') or console.log('Eventname fired')where eventname is the event of interest.

  • onblur
  • onchange
  • onclick
  • ondblclick
  • onerror
  • onfocus
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmousewheel
  • onreset
  • onscroll
  • onselect
  • onsubmit

To test these attributes you will likely need to make a complete valid HTML page with form elements, validation attributes, links, and other interactive elements. You may find <textarea> quite useful to test a number of events.

Other Tags (3pts)

Other tags exist and are supported in browsers currently available. As an example you may check the competing WhatWG HTML specification or sites which lists tags like MDN HTML Docs for old/new tags. Use at least 10 tags not in the main W3C HTML specification we reviewed in the points above in an example document. This document will not validate. Comment it as such.

Ten Findings (6pts)

In your exploration of tags you likely found some unusual things. You may have found some tags that didn’t work in some browsers, you may have discovered tags that confused you as to their intent, you may found interesting differences between the various versions of HTML and so on. In a single valid HTML document write an ordered list (<ol>) that details your top 10 findings counting down from 10 to 1. There is not single answer to what the findings ought to be other than reasonable observations made by your team in the course of the assignment. Just be clear and if possible insightful to get the full points. The topic matter (soccer or cats) does not have to be incorporated into this page. The page itself should be valid and if not provide comments showing why.

Team Page (5pts)

Design a simple team page in HTML for your team and host it on your site. Your team page should set your team’s name, have pictures of each team member with contact info (slack and email) and have a theme you enjoy. Your team page may use CSS if you like, but no points are presented here on design solely on HTML use and content. Make sure that your team page provides a link to HW2.

On Breaking Up the Work

As we are in groups you may try to piecemeal the effort. Be careful with this assignment as each section varies in difficulty and time required. If you do break the work up you may find that some team members don’t understand some groups of tags. This lack of knowledge could show up on the midterm! TL;DR - work together for best results short and long term.

Misc Logistics

You must host your pages on Firebase. You should have a top level page for the assignment called hw2.html which links to all your various examples so it is easy for the graders to navigate them. All pages you host should have a link to the HTML validator showing the current syntax state of the page. If a page does not validate you must put HTML comments in the markup that indicates why the page does not validate.

Back to CSE134B

Grading

  • Points are listed per section above
  • Grading will be violation based (missing tag, weak demos, invalid syntax that not explained, etc.) can result in point loss. Point loss ranges from 1pt for cosmetic, weak example, etc. to 3pts for clear invalidity mistake or missing work. Precision is key to retaining your points.

Total: 70pts We may award up to 10pts bonus for group(s) we think that put in extra effort that puts them at the top of the class.

The assignment is due Sunday Oct 22 @ 9PM. Turn-in logistics for Gradescope will be provided by the TAs in Slack