CIS89A - 8. Tables, Forms

Rows and columns - Tables

Tables can be used to display numerical information - like a spread sheet.

Data collection - Forms

Collecting information can be as simple as requesting comments from readers, or as complex as a final exam for an upper division college course. Forms provide a broad range of functionality to validate and format input information. Forms can guide the user through complex information gathering processes and make the information ready for further processing by other applications.


Learning outcomes

• understand the concepts and uses of tables in web pages
• create a basic table structure
• format tables within pages
• format content within table cells

• understand the concept and uses of Forms in web pages
• create a basic form
• validate form content
• make forms more user-friendly
• style forms for layout
• understand the concept and uses of JavaScript and HTML5 API in web pages


Keywords

• table, row, column, cell, padding, borders, margins, spacing, width, height, alignment, horizontal, vertical, caption
• text, radio button, data area, checkbox, submit, menu, hidden controls, file upload, validate, pattern, action, required fields, JavaScript, API, objects, methods, event handler, cookies, storage, offline, geolocation, canvas

Reading guide

• What are the main components of a table in HTML?
• How can tables be used to format content? Why is this necessary?
• What are some content formatting options to increase readability?

• What types of input can be processed in a form?
• What validation can be applied to form input?
• How can information entered in a form be processed?
• Why would you want to include client-side validation in a form?
• What are the new functions that are introduced in HTML5? Why are these important to web page developers?

Assignments

Coding project required elements - tables & forms

• table rows, columns, headings, borders, padding
• span rows, span columns
• position text within table cells, position images in table cells
• tic-tac-toe - 3x3 table with X and O characters centered in the cells like they would appear in the game. This is a static display (not interactive).
• input form, text box, checkbox, pull down menus, prefilled entries, color selector, meter, submit button with action=mailto

1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of activities for this module. Review the Media section (below - scroll down) for links to resources for this module.
   
   
2. Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
   * Chapter 8 Tables and Other Structured Data Elements . Chapter 9 Web Forms . Chapter 10 Advanced and Experimental Features .
   
   
3. Tables - There are many different uses for tables, in addition to usual spreadsheet format for neatly displaying numbers. Find 2 examples of interesting uses of the table element and post links and a sentence about why you selected each to the Examples of Tables discussion. Some tables may not be obvious, so you need to check the source code to find the actual table element.
   
   
4. Test drive Google form - Google Drive is very convenient for working collaboratively and sharing your work. The Form creator can be used to collect all sorts of data. Some teachers are even using Google Forms for quizzes and exams.
   Create a Google Form to gather multiple kinds of information. Use 4-5 different Google Forms question types and design features appropriately. Be sure to allow others to access your form with the Share option. Post the link to your "Share" form to the Google Form discussion.
   Fill in the Forms posted by 3-5 others and submit. Check your own form to view the results.
   
   
5. Using Tables and Forms - In a new coding project, use the assignment elements and tags to create and format tables and forms. Demonstrate all the elements and tags within your project so they are visible in the page view.
   Publish your HTML file.
6. action=mailto - If it works - Great! If not, you should get the idea about how this could work. Once you collect information in your form, you need to do something with it. Normally this requires interaction with a program. One alternative is to have the contents of your form emailed to yourself. NOTE this doesn't always work. It depends... on your users' browsers and your email reader. However, if it works, it is an easy way to understand how information input into a form can be passed along for processing. See Mailto Forms HTML Forms Tutorial, and also When Mailto Forms Don't Work.
7. Submit the web address of your coding project to the Using Tables and Forms assignment.
8. Post a link to your coding project and any comments or questions about the coding project to the Using Tables and Forms discussion.
   
   
9. Blogs/Vlogs - Consider subscribing to the blogs or vlogs (video) of people or groups that regularly provide new and interesting information about a subject that interests you. Blogs/Vlogs are used by individuals, companies, colleges and organizations as a way to provide updates and news to "subscribers" - usually by email. But they are also viewable as web pages, so you don't have to subscribe to see the information.
   Pick two Blogs (or Vlogs) you find interesting. In the Blogs discussion, for one that you selected, post a link, they author or authors - personal, organization, a brief description and why you selected it.
   
   
10. Portfolio is the new resume - As a job seeker and web developer, a portfolio is essential to show who you are and what you can do. Find examples of portfolios. Look for resources that describe how to create a portfolio with suggestions for what to include and how to present it. Unless you have some other web site to build, consider creating your own portfolio for your web site project. Select one portfolio and one how-to resource and post to the Portfolio discussion. Describe how these resources would help you create your portfolio.
    Review the selections of 2 others.
    
    
11. Themes - Popular blogging software includes WordPress and Wix. For these, the content of the site pages are stored separately from the format information by making extensive use of CSS functionality. A "theme" created with Cascading Style Sheets (CSS) can be selected and applied to the site content. Other sources such as Bootstrap sell "themes" (complete CSS stylesheets) as well.
    Look through the Wix themes or WordPress themes.
    Select 2 examples of themes from the themes gallery. What are the noticeable differences between the page displays? What layout features are important to you and the display of your content? Post links to the themes you are comparing, and a brief description of the differences (2-3 sentences), and your preference to the Compare themes discussion. .
    
    
12. As new web-based services are provided and people share information, social media has evolved. Here are 50 of the biggest social media questions answered. Select 2 answers that you didn't know before. Why is this information important? Post your new information and a description of your own social media experience in the discussion Social Media Questions.
    
    
13. Algorithms - Personalization and Targeting. Many sites seem to know your interests and “suggest” products, services, discussions, entertainment based on what you have previously looked at and liked. How do they do that? Find a resource that explains how these algorithms work. How did you find this resource? Post the link and your thoughts about how they influence what you see on the web to the Algorithms - Personalization and Targeting discussion.
    
    
14. Web Literacy - PARTICIPATE / Connecting - In the Web Literacy framework description, review the skills in the Connecting group. What skills you don't have yet or need to work on? Look it up. In the Web Literacy - PARTICIPATE discussion, post a link to a resource that improved your understanding and skills in these areas. https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/participate/
    
    
15. Learn to Earn - Most people work to earn money to spend - necessities, housing, entertainment, education, savings (maybe not in that order). It is never too late to learn about money and financial matters. Today, money and technology are connected. Select a resource that provides important and interesting information. Post the link and say why you selected this resource to the Financial literacy discussion. Review 3 others.
    
    
16. Group Project groups - Web design evaluation criteria. In addition to understanding the information presented in the resources, for each web site you visit, take an extra minute and examine the site design, layout and usability. Use the evaluation criteria to guide your review of the sites you visit. Select one site you visited and post note about the site design based on one of the criteria in the evaluation description along with the link to the site. What is something important and interesting that you learned about web design? Do you have questions about good web design? Share with your group in the Group discussion.

Media

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 8 Tables and Other Structured Data Elements . Chapter 9 Web Forms . Chapter 10 Advanced and Experimental Features

Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x8tables: Error parsing XML for RSS

TABLES Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/tables: Error parsing XML for RSS

FORMS Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/forms: Error parsing XML for RSS

PORTFOLIO Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/portfolio: Error parsing XML for RSS

WRITE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/write: Error parsing XML for RSS

FINANCIAL LITERACY

Dilbert’s One-Page Guide to Everything Financial

if you like Dilbert and understand the corporate hell that he lives in. Otherwise, without further ado, here is Dilbert’s One-Page Guide to Everything Financial: Make a will. Pay off your credit cards. Get term life insurance if you have a family to support. Fund your 401k to the maximum.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/financialliteracy: Error parsing XML for RSS

2016.3 1976 . 2018.3 4114 . 2018.11 6180