User:Vtaylor/CIS89A Learning Web Design/Tables, Forms



Rows and columns - Tables
 * Tables can be used to display numerical information - like a spread sheet. But tables can also be used to make web page content look great by providing a neat way to place content on the page.

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 title and required elements
 * cis89tablesforms1 - table, tr, th, td, border, width, height, margin, padding, text-align, background-color, colspan, rowspan, thead, tfoot, tbody, colgroup, style
 * rows columns, headings, borders, padding, span rows, span columns, position text within table cells, position images in table cells * NOTE: These are HTML Table properties and attributes * Coding Challenges - some of these can be implemented as CSS styling
 * form, input, type, name, value, placeholder, button, checkbox, datetime, email, radio, url, maxlength, textarea, size, color, option,  file, pattern, action, label, meter,
 * input form, text box, checkbox, pull down menus, prefilled entries, color selector, gauge, submit button


 * 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 assignments for this module.


 * 1) Textbook - Learning Web Design - Chapters  8-9 - 8. Table Markup, 9. Forms


 * 1) 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.

Create a Google Form to gather multiple kinds of information. Use several different Google Forms question types appropriately. Note that Google automatically sets up a spreadsheet to capture responses. 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.
 * 1) 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.

Publish your HTML file.
 * 1) Using Tables and Forms  - In a new  coding project, use the assignment elements and tags to create and format tables and forms. Add these tables. You can include other tables to show other table formatting, if you wish.
 * a Tic-Tac-Toe "game" display
 * a table to demonstrate cell padding, spacing and alignment
 * a table for formatting page content with text in one cell and an image in another cell beside it.
 * 1) Use all the elements and tags within your project.
 * NOTE: These are HTML Table properties and attributes
 * Coding Challenges - some of these can be implemented as CSS styling. Some browsers do not support some of the equivalent CSS properties.
 * 1) action=mailto - 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. If it works - Great! If not, you should get the idea about how this could work.
 * 2) Submit the web address of your coding project to the  Using Tables and Forms  assignment.
 * 3) Post a link to your coding project and any comments or questions about the assignment to the  Using Tables and Forms  discussion.

Pick two Blogs (or Vlogs) you find interesting and start reading them. Some that I like - Scientific American, Gizmodo. In the Blogs discussion, for one that you selected, post a link and a brief description and why you selected it.
 * 1) 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.

Review the selections of 2 others.
 * 1) 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.

Look through the Weebly themes or WordPress themes that are provided. It is important to understand how powerful CSS is for determining the look and layout for a site. The pages for your site don't have to have all the formatting coded on each page. Select 2 examples of themes from the themes gallery. The content is the same - text, associated pictures, links and category information. 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 gallery pages for the themes you are comparing, and a brief description of the differences (2-3 sentences), and your preference to the Weebly / WordPress themes discussion. .
 * 1) Themes - Popular blogging software includes WordPress and Weebly. WordPress is available as an "open source" application you can download and run on your own web server, or as a hosted service at WordPress.com. 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.


 * 1) Test drive - Twitter. Blogging in 140 characters. Read through the Newbie's guide to Twitter. Then search Twitter for some topics of interest. If you know hashtags or handles associated with topics and people, look them up. In the Test drive - Twitter discussion, post the contents of 2-3 tweets  that are interesting along with 2-3 associated hashtags and a brief comment about your Twitter experience.


 * 1)  Web Literacy - WRITE - Writing on the web enables one to build and create content to make meaning. Review the Web Literacy skills in the WRITE group. What is one thing that you aren't sure you understand? Look it up. In the Web Literacy - WRITE discussion, post a link to a resource where you found the answer.

Use the Group Project groups discussions (pinned at the top of the Discussion page) to share your comments and suggestions.
 * 1) Group Project groups -  The objective is to work together with your group to come up with ideas for your final individual projects. Use the group discussion to brainstorm ideas and get feedback. Ask questions. Although the projects are individual work, having reviewers throughout the development is helpful. In Module 11. you will provide feedback on the group project experience.

== ==
 * Textbook - Learning Web Design - Chapters 8-9 - 8. Table Markup, 9. Forms


 * HTML Dog HTML Beginner Tutorial

TABLES http://www.diigo.com/rss/user/vtaylor/tables

FORMS http://www.diigo.com/rss/user/vtaylor/forms

PORTFOLIO http://www.diigo.com/rss/user/vtaylor/portfolio

WRITE http://www.diigo.com/rss/user/vtaylor/write

2016.3 1976 . 2018.3 4114 . 2018.11 6180