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.
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:
HTML for Presentation Style
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:
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:
A group name (and optional logo)
Names, emails, and pictures of each team member
Any amusing pictures, content, etc. that makes your team page have some personality
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.
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.