HTML Table Assignment

Learn / review basic HTML using one of the lesser mastered features. Being able to do these will impress a certain demographic as well as being more capable of automating the process programmatically someday since data coming from a database or spreadsheet is often used for tables. HTML files are large and messy which require skimming around to fix bugs; this recreates that very common situation and the complexity is bound to create some bugs for the student to debug within a larger document; furthermore, problem solving strategies, style methodologies, and metacognition are far better illustrated this way. Not everything can be done from one assignment but it takes time and revision (practice) to get most the benefits and to have them stick.

this is just a replacement for your html tag with a picky detail this old version of html wants.

Click here if you want to generate new TV show names. Note: old names will be permanently changed!

1. Install Firefox.

2. Install HTML Validator add-on. This is useful for everybody; mandatory for beginners. Pick the newest version, that website is often out of date but it'll work as long as you get the newest version for your browser. Also, you may wish to install the Chrome version as well.

3. Optional Better Faster Validators:

   • Terminal HTML Validator: Directions here (recommended) Also, here are directions on integration with Notepad++.

   • The Best HTML Validator is OLD and in an OLD firefox, directions here it's a pain to get workign.

4. Find HTML references. NOT BLOGS; legitimate references! HTML Intro Tutorials , W3Schools HTML table , MDN HTML Tables Please make note of this because later in the assignment people forget to come back to these links.

5. HTML Tag listing

6. Open this playpen in another browser tab to experiment with. Don't do the assignment in here; just start out with part of it because the feedback experiment loop is faster.

7. Install a text editor. You may want to try out many editors during the semester. Most your work is done here. Don't forget to save the file with .html so the browser knows what to do when you open or drag it into the browser window. Here are a few top editors but look at the list for more.

   1. Windows: Notepad++
   2. Mac/Win/Linux: VIM is not for beginners, forget EMACs.
   3. Mac/Win/Linux Eclipse IDE forked for web dev: Aptana
   4. Mac/Win/Linux: An HTML5 Based Apps (interesting:) Atom , VS Code
   5. Mac/Win not free: Non-open source text editors are good too, but not free. Sublime Text is popular.

8. Create a blank html page, with title etc. Use the HTML validation add-on you installed. Make sure your blank page validates before you really begin.

9. Use an XHTML doctype header not the HTML5 doctype file header. Why? Validators are generally better using the older standard and the XML based ones are more strict (but you have to then ignore warnings about the new HTML5 parts but you don't need HTML5 features for most things.)

   1. The assignment will be graded using the same validation tool. Warnings are NOT ok they can be just as severe as errors! Pros learn what can be ignored; in this class you are to treat everything it warns about as a problem to fix; unless I say otherwise.

   2. Copy paste this doctype header to the beginning of the file:

   3. The validators may complain if your file is missing the following information (these warnings I do not care about; however, it'll annoy you with warnings if you do not:)

   this tag is metadata; so it goes into the head.

10. This HTML assignment is to create a single valid HTML table using 1 tag. Also learning to deal with your text editor on a sizable file and using good formatting and HTML comments to help in the process.

    • Copy/Paste is a powerful tool; thinking about how you solve the problems is more important than the assignment!

    • This can be an easy assignment or a long frustrating one. The more you struggle on this one, actually the more you'll learn doing it...try to think about your approach not just figuring it out.

11. At the bottom is the TV schedule you'll create as a colorful table (do not recreate the text grid.) Above the schedule grid, is an example table of what it'll basically look like:

    • Size does not matter: it will resize to the browser window if you leave out sizing. This is the power of using tables (besides speed and super old browser support.)

    • Color does not matter: please pick better colors that don't bump into each other like mine does. You can't have borders or white gaps; however, using those during development is highly recommended.

    • The show titles (not showtimes) given go into the table. No color fancy effects required either. The figure provided is just for illustration.

    • USE Half hour time slots! Label them anyway, for accessibility purposes. Worry about hiding them later. (This also shows me you can remember directions.)

    • Suggestions:

      • Avoid HTML font or center tags; find another way (you can still use those two tags you must.) The technical approach you pick doesn't matter as long as you figure it out on your own (or with some coaching from me or others which is the purpose of this class.)

      • Skim all the directions before starting.

      • Experienced Students: Check out the other table assignments before getting started on this simpler less valuable one.

12. After a successful table has been created, then you must use TH tags, id and header attributes in the table to make it accessible. You must also use tbody and thead tags. (Look them all up in a reference! I gave links above. Looking things up in references is literally a big part of the job! Reading and writing documentation will be common in your future jobs. Using google is like giving a child a wheelchair before they learn to walk! You won't really learn much if you google everything.)

13. Hide the half hour labels (12:30 etc;) do not delete them. This can be done by coloring the text to the same as the background (a hack.) Better would be to use the style attribute with: visibility: hidden so then they exist but can not be seen.

14. Validate the page using the w3.org's html validator with the file upload feature. The browser validator is limited compared to the online one which will catch more problems (the classic one for old Firefox is best.)

    • You do not need to do this if you installed and are using the optional Tidy validator mentioned at the top of the assignment.
    • There may be some issues with your html tag and lacking a meta tag which were mentioned above in the assignment that you may have missed.
    • One TV show is expected to have an encoding error for you to repair.

15. Final Check: I use this script to automate my grading (when the page is valid enough for it to work.) Include this line of HTML at the bottom of your page above the closing tag to use it:

16. 

17. 

Monday Tuesday Wednesday Thursday Friday Saturday Sunday 12:00 Ben & Jerry's Show Ow Wars Hot Business Report The Adventures of Gebi 1:00 60 Sunday 2:00 South Anoka Jumping YouTube Young Tall Men Clips Largest Stuff 3:00 Lets Dance a Bread Dance Friday Jumping Anoka 4:00 The Young Tall Men Clear Drama Queens Baker Talk 5:00 5:00 Love Talk The Understood Thing 6:00 Jumping Talk Slow Disguised Spam TV Toy Ad 7:00 Finger Story War of Cobra Snakess 8:00 The Gar Conspiracy Hot Cobra Snakess Love with the {thing) 12 Largest Men 9:00 Jump Talk That Saturday Show Jumping of Anoka West Metro State Dancig 10:00 Dances with Cobra Snakess Ow, my Balls! The Jump Movie MD-1: Monday Tuesday Wednesday Thursday Friday Saturday Sunday 12:00 Ben & Jerry's Show Ow Wars Hot Business Report The Adventures of Gebi 1:00 60 Sunday 2:00 South Anoka Jumping YouTube Young Tall Men Clips Largest Stuff 3:00 Lets Dance a Bread Dance Friday Jumping Anoka 4:00 The Young Tall Men Clear Drama Queens Baker Talk 5:00 5:00 Love Talk The Understood Thing 6:00 Jumping Talk Slow Disguised Spam TV Toy Ad 7:00 Finger Story War of Cobra Snakess 8:00 The Gar Conspiracy Hot Cobra Snakess Love with the {thing) 12 Largest Men 9:00 Jump Talk That Saturday Show Jumping of Anoka West Metro State Dancig 10:00 Dances with Cobra Snakess Ow, my Balls! The Jump Movie MD-1