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

HTML Tables and Forms

Using HTML Tables and Forms!By Krithi TandyalaTableRed Fruit Green Fruit Yellow Fruit...

Tables and Forms

Tables and FormsSample TableThis is an example table for formatting purposes. Extended...

Week 8

"Week 8 ProjectTable 1header 1 header 2 header 3item 1 item 2 item 3these hav...

TABLES

https://www.youtube.com/watch?v=II4WmRvzZTA&embeds_referring_euri=https%3A%2F%2Fdeanza.instructure.com%2F

Tables can be a useful way to organize certain types of content visually. But tables add an extra layer of complexity for students using a screen reader device which means it’s imperative your ta...

HTML tables - Learn web development | MDN

display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes...

HTML table advanced features and accessibility - Learn web development | MDN

more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visua...

HTML Tables Tutorial - YouTube

video 9:37 - how to code HTML tables and add basic styling with CSS - tabular data, grocery list example with multiple items and values. when to use them, simple coding example see how each tag rel...

FORMS

Web forms — Working with user data - Learn web development | MDN

Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface.essential aspects of Web f...

GET vs POST - Difference and Comparison | Diffen

HTTP POST requests supply additional data from the client (browser) to the server in the message body. In contrast, GET requests include all required data in the URL. Forms in HTML can use either m...

HTML Tutorial for Beginners: 19 Creating a Submit Button for Forms - YouTube

video explains how to create a submit button for html forms. It applies to Module 9 and is 3 minutes and 52 seconds long. how to build and grow your business, find niche opportunities, market your...

Styling HTML forms - Learn web development | MDN

use CSS with HTML forms to make them more beautiful. Surprisingly, this can be a little bit tricky. For historical and technical reasons, form widgets don't mesh well with CSS. Because of those...

PORTFOLIO

How to make a personal website in 11 steps | Webflow Blog

We know that you want to share unique interests, expertise, and personality with the world.A personal website is a great opportunity to get your personality and skills out there. We’re going to t...

20 Best Portfolio Websites to See Before Creating Your Own

what distinguishes you from other creatives and how you can express this in your design, a great place to start is to search for inspiration by looking at the works of others. Before creating your...

5 Design Principles For Building Your First Portfolio | Dribbble

Strategize first, write second, design lastAs a designer, it’s natural to want to jump into the “designing” part of a project. Excitement builds as you think about cool design ideas and how y...

Six easy steps to create a successful online portfolio | Creative Boom

"Keep it simple and remember your goalsFirst impressions do count. When someone lands on your portfolio site, you’ll want them to feel compelled to stay and, ultimately, decide to hire you.I...

WRITE

The Complete Guide to Cross-cultural Design | Toptal

When designing cross-cultural products, designers not only have to contend with different languages, dialects, and dimensions of national culture, but also cultural differences in color psychology...

Cultural factors in web design | Creative Bloq

People need to feel at home with the cultural references in our designs. By using the variables above, we can create culturally responsive sites that are accepted and used by people across the glob...

Webmaker/WebLiteracyMap/Building - MozillaWiki

"Composing for the WebCreating and curating content for the Web Inserting hyperlinks into a web page Identifying and using HTML tags Embedding multimedia content into a web page Cr...

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.

How to pay off credit card debt | U.S. Bank

"With a few simple tips, you can learn how to tackle credit card debt and create a payment plan that works for you.If you’ve accumulated some credit card debt and are looking to pay it off o...

11 Free Personal Finance Excel Templates for Budgeting 

efficient, easy-to-use and free Excel template for personal budget or personal finance, Managing personal budget and finances are the necessary actions that help you save money. However, managing p...

Monthly budget template: Track your spending by month | QuickBooks

"essentially the first step towards financial stability. Having a working budget in place will help you identify exactly where you stand with your finances. If you’re ready to create your bu...

2016.3 1976 . 2018.3 4114 . 2018.11 6180