CSE 134B: Client-Side Web Languages

Summer 2017 | University of California, San Diego CSE Department

Homework #1 - HTML Templates and Syntax Exploration

In this homework we explore the use of standard and non-standard markup and how it may be used to support building our class SoundBoard project.

Traditionally, HTML is learned by many in an ad hoc fashion. This process actually works reasonably well given that browsers correct “tag soup” and rigid DOM structure may not be required by most applications. Unfortunately, loose markup syntax can lead to performance, stability, and security issues as we layer in other technologies particularly JavaScript. Given the potential negative consequences we may face building upon malformed markup, our aim in this assignment is to explore what it takes to do HTML “right.”

Part 1 - Templates

We will begin mocking up our SoundBoard application which will include a title or header with some navigation including a login mechanism, a main section with 12 sounds ('button' to play the sound with an image or background for each 'clip'), and some footer zone with legal information and potentially advertisements. Further screens for our app will be defined later for the CRUD (Create, Read, Update, Delete) features we will eventually add. For now we just have to do this primary screen in two ways:

  1. HTML for Presentation Style
  2. HTML for Structure Style

The HTML for Presentation version requires that we use HTML4, 5 and proprietary tags to layout the SoundBoard, provide buttons to press, and add any visual improvements. In this version we may use presentational tags, tables, presentation focused attributes (align, background, etc.), and images (foreground and background) to style the page as much as we like. We may not use any CSS however to see exactly what an HTML focused world limits us to. Name this file ‘soundboard-part1a.html’ and validate it. This version will not validate using the W3C validator (validator.w3.org) unfortunately, so inside of the HTML file put HTML comments that indicate each error message the validator gives you and explain what it means and if it is of any concern to you.

The HTML for Structure version requires that we use HTML5 to do the best we can to structure the page without any layout. Instead we focus here on meaning and semantics only and forgo the look. Later on we will use CSS to style the page. Because of this focus the HTML of this version will likely be quite simple. This version must cleanly validate using the W3C validator tool. If it does not you must clearly indicate reasons why your second version does not cleanly pass in the same manner as before (HTML comments within the source). Name this file ‘soundboard-part1b.html’

Part 2 - Tag Testing

It is unlikely you will be able to test the various details of HTML in a very complete fashion just making our project templates in the previous section. For the second part of the assignment we will create a document named ‘tagtest.html’ that tests (aka uses in some basic way) the following HTML tags:

  • meta
  • script, noscript
  • object, param
  • style, link
  • form, fieldset
  • input (text, password, checkbox, radio, date, number)
  • select, option, optgroup
  • textarea
  • input (button, submit, reset) or button
  • a
  • ins, del
  • ul, ol, li, dl, dt, dd
  • iframe
  • picture, img (make sure you have a GIF, JPG, PNG, WebP and SVG image) You must also use the srcset attribute
  • nav, section, header, footer, main

Your testing document does not have to test these tags exhaustively, but it must use them at least once and in some meaningful way. The document must pass validation and if it does not indications why it fails must be provided in HTML comments. If you have browser support issues you must mention that as well in your markup comments.

Part 3 - A Team Page

As you will be working in very small groups we should start a team page that we can link all our assignments to. This design and content of the team page is nearly 100% up to your group, though it must include the following:

  1. A group name (and optional logo)
  2. Names, emails, and pictures of each team member
  3. Any amusing pictures, content, etc. that makes your team page have some personality
  4. Links to the 3 other pages of your Homework #1

Your team page should validate. If it does not validate it should include reasons why it doesn’t in the comments. You are free to do anything you want at this stage in terms of technology to experiment. This page will be called 'index.html' and be hosted in your site as discussed in the next step.

Part 4 - Host It

To prepare for later steps we must host our files online. To make this easy we are all going to use Firebase. Access the QuickStart guide @ https://firebase.google.com/docs/hosting/quickstart to see how to do this.

Note: Do not attempt to do any coding or significant configuration of Firebase at this point, just host your static assets here for now.


Back to CSE134B

Grading

  • 10pts for Part 1A
  • 10pts for Part 1B
  • 20pts for Part 2
  • 5pts for Part 3

Total: 45pts We may award up to 5pts bonus for groups we think that put in extra effort in the test, templates, or even team page that puts them in the top 10% of the class.

Send the TAs an email with a link to your team page and the associated homework via email by Friday July 14 @ 11:59PM. Note: Please keep your URLs private from other students in the class at this point.