Introduction

We have been going over the different possible tag elements that can be used in an HTML documents.
We were talking about the table tag and the tags that are used within it.
We then switched to talking about web accessibility.
We discussed law, such as Section 508 which places requirements on US government websites, related to it.
We also discussed standard agencies such as WAI (Web Accessibility Initiative) working group and the standards they have produced: Web Content Accessibility Guidelines, WCAG 1.0 (1999), WCAG 2.0 (2008), and WCAG 2.1 (2018) as well as Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) guidelines.
Today, we begin by looking at what these standards and guidelines mean with respect to HTML Tables.

Tables and Accessibility

Tables can be a nightmare for screen readers because it is very hard for them to predict the reading order of the text.
The now obsolete summary attribute of the table tag was used for accessibility in XHTML 1.1 and below. Its value was supposed to be a screen readable summary of what the table contains.
Sometimes a distinction is made between data tables and layout tables. A data table always has headings for each row and column. A table which does not do this is assumed to be for layout purposes.
Layout tables are discouraged by WAI, where they say CSS should be used to control presentation.
If you want to make a data table accessible, it should have either a caption tag like we saw in the example a few slides back or the table should be surrounded by a figure tag and the figure should have a figcaption.
For data tables to be accessible, each row and column should have a header.
To handle fancier tables which might have nested headers or headers spanning several rows and columns, a <td> cell should use the attribute headers="" to list separated by spaces which id's of which row and column headers apply. I.e., the <th id='cat-column'>Cats</th>, ..., <th id='dog-row'>Dogs</th>, then later <td headers="cat-column dog-row">.
Another way to achieve accessibility on cells, is to use the scope="" attribute on the <th> tags with values from row, col, rowspan, colspan to say what things the cell is a header for. For example, <th scope="row"> says the header applies to the whole row.

Controlling width

In the older XHTML 1.1, you can control the width and border of tables using its width and border attributes. For example:
```
<table width="100%" border="0"  summary="..." >
```
the value can be a percentage or an absolute value in pixels. 0 here means no border.
In HTML 5, the above is an error. Instead, you should use CSS (described later).

Similarly, you can control the width of columns by having after the table tag a series of col tags (can also use colgroup)

<table width="100%" border="0"  summary="..." >
<col width="25%" /> <!-- can be a percentage or number of pixels -->
<col width="75%" />

Again, in HTML 5 the width attribute of a col tag should not be used. In HTML 5, the col tag still exists to indicate one wants to apply a style to a whole column.

Still More on Tables

The align and valign attributes of <tr><th><td> can be use to specify how data look within a cell. align has three possible values left, right, center (default) which control horizontal alignment. Again, these are XHTML 1.1, not HTML 5 attributes.

Ex:

<tr align="center"><td>hi<td><td>there</td></tr>
 <!-- centers whole row -->

Ex:

<td valign="top">test</td> 
<td valign="bottom">test</td>

Cellpadding, cellspacing

In XHTML 1.1 (not HTML 5), <table> also has two attributes cellpadding and cellspacing.

cellpadding
controls space between inner walls of cell and contents of the cell (in pixels).

cellspacing
controls distance between cells

Ex:

<table border="5" cellspacing="30" cellpadding="5" summary="..." >

Quiz

Which of the following statements is true?

A shortcut icon for a web page can be specified with a syntax like:

<icon   
    href="http://www.cs.sjsu.edu/faculty/pollett/favicon.ico" />

To add an image to an HTML document we can use an <png> tag.
A browser is supposed to treat a meta tag with http-equiv="foo" and content="la" as if the HTTP header foo:la had been sent.

Forms

Forms are one of the most common ways to collect data in an HTML page and send it back to the server.

The basic format for a form is:

<form name="myform" method="get" action="http://somewhere.com/" >
<!-- widgets or controls on form -->
</form>

In the case of uploading a file you also need to give the enctype attribute as "multipart/form-data"
If the method attribute is not present it is assumed to be get, if the action attribute is absent the form is sent to where it came from when it is submitted.
You can use relative urls such as "/formhandler.php", "/", ".", "..".

Possible methods

The method attribute of a form can be one of "get" or "post".
The default is get.
If the method is "get" then data collected from the form will be appended to the URL given in the action when the form is submitted:
```
http://somewhere.com/?name1=value1&name2=value2...
```
The names and values are "urlencoded" to handle special characters like space.
There used to be size limits on GET data.
GET is non-stateful though so you can send the data as a url whether or not it ever came from a form.
If the method is post. Then the HTTP POST command is used and data is sent in the body of the request after the headers.

Labels and Controls

The basic form control is input:

<input type="text" name="my variable" value="optional default value" />

Possible values for type include: checkbox, radio, text, hidden, password, reset, submit.
submit is used to submit the form.
The value attribute of input must be set if the variable is checkbox or radio. The value will be what is sent if the field is checked or selected. The checked attribute controls if it is selected by default. Only one value set for radio.
For text and password, the size and maxlength attributes control the visible size and the maximum number of input characters.
Usually, a form item is placed by some label when it is drawn
```
First Name: [             ]
```
In order to ensure this in accessibility situations you must use the label tag:
```
<label for="testid" >First Name :</label> <input type="text" 
    id="testid" name="test" value="test" />
```

Alternatively, for some form elements like search boxes you can use a title attribute for accessibility:

<input type="text" id="search" name="search" 
    title="Enter your search terms" placeholder="Enter your search terms"/>

The placeholder attribute above is an HTML 5 attribute. It causes the provided value text to be displayed in the textfield until it is focused.

select tags

<textarea>

This tag can be used to specify a multi-line region for text entry:

<textarea name="life" rows="3" cols="40" >
You can enter your life story here.
</textarea>

Stylesheets

We now return to talking about XHTML, in particular, how to control the presentation of XHTML documents with stylesheets.
Stylesheets are used to specify the look of the page and its elements.
For instance, one can globally control things like margins, indentation, etc.
They can be used to support the idea of separating structure of content from how it is presented.
Cascading Style Sheets (CSS) are the standard way to do this for XHTML documents.
CSS comes in four specs: CSS1, CSS2 (2.1 became a recommendation), CSS3, CSS4 each adding more features to the last.
Most modern browsers support CSS1, most CSS2.1, and some of CSS3 and CSS 4.
Beginning with CSS 3, new features are split into modules of different "levels". A module is level 3, if it depends on CSS 2.1, and level 4 (i.e., part of CSS4) if it depends on a level 3 module. For example, there is both a CSS Level 3 Selector Module and a CSS Level 4 Selector Module.
CanIUse.com is a good website for seeing what browsers support which more sophisticated feature.
The basic concept in a stylesheet is that of the value of a property that a tag has.
Cascading refers to how settings of this value in high level stylesheets can be overrriden in lower level style sheets.

Levels of Style Sheets

We introduced Cascading Stylesheets (CSS) as a means of controlling the presentation of a web page, and we discussed the various spec's that define CSS.
The word cascading is used because styles affecting the presentation properties of a tag can be applied at different levels with the nearest-to-the-tag set level values overriding those set farther away.
So what are the levels of stylesheets?
inline
sets property value for single tag. For example,
```
<p style="color:red;">red paragraph</p>
```
document
sets property value for the whole document

external
sets property value for several documents till value is changed.
If no style information is available for a given property the browser will use a default value.
It is often useful to use the same stylesheet for several documents. The MIME type for stylesheets is text/css. You can link a stylesheet file into an xhtml file with a line like:
```
<link rel="stylesheet" type="text/css" href="mystyles.css" />
```
Styles can be validated at the W3C site.

Basics of Styles

The basic inline style command looks like:

<tag style="property_1: value1 ; property2: value2; ..." >

The basic document level style in the head of the document looks like
```
<style >
    /* here is a comment */
	rule_list
</style>
```

Each rule has the format

selector {property_1: value1 ; property2: value2; ...}

External style sheets are similar to document level styles except you don't need the style tags.

Examples of Simple Selectors

h1 {font-size: 24pt;} /* would apply to all h1 tags in the document */

h2, h3 {font-size: 14pt;} /* notice applies to both h2 and h3 tags */

You can also specify that styles should only apply to elements in certain positions within the file:

body b i {font-size: 30pt;} /* only for bolded italic'd text within body of HTML*/

More Tables, Forms, Cascading Style Sheets

Outline