Outline

• Inline tags
• More on tables
• Forms

More HTML tags (Inline tags)

• These next tags might appear within many of the block level tags we learned last day:

  Anchors

  <a href="http://www.somewhere.com">somewhere</a>
  

  • For WAI compliance should always separates links with at least a little text, like a period. You might also want to indicate if a link is offsite or is to a non HTML mime-type.
  • Links within pages are given with <a href="#relative link">somewhere in this page with id="relative link"</a>

  Images

  <img src="myphoto.gif" alt="This is a picture of me" />
  

  Span

  Allows you to style a region of text or to specify a tooltip for a region of text. <span title="what you see when you mouse hover">This section of text</span>

  Presentation elements

  <br /> --line break, <hr /> --horizontal rule, <big></big>, <small></small>, <b></b>, <u></u>, <i></i>, <tt></tt>,, 

XHTML Entities

• These provide a way to describe special characters or characters, such as &, <, > which are used to describe the XHTML document itself.
• Below are some characters and their corresponding entities:

  &	&
  <	&lt;
  >	&gt;
  (hard space)	&nbsp;
  "	&quot;
  Σ	&Sigma;

Introduction to Tables

• A table consists of a bunch of rows each of which is made up of data cells.
• A table may or may not have a border.
• It also may or may not have a caption.
• The first row of a table can (but doesn't have to) be used to specify the headings for the columns.
• Each additional row might specify the heading of that row.

Example:

<table border="1" summary="This is a table of how grades will be broken down">
	<caption>grade table</caption>
		<tr><th></th><th>Item</th><th>Value</th></tr>
        <tr><th>1.</th><td>Homeworks</td><td>50%</td></tr>
        <tr><th>2.</th><td>Exams</td><td>50%</td></tr>
</table>

Tables and Accessibility

• The summary attribute of a table should be used for WAI compliance.
• 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.
• For a data table to be accessible, a <td> cell should use the attribute headers="" to list separated by spaces which id's of which row and column headers apply.
• Another way to achieve accessibility on <td> or <th> tags is to use the scope="" attribute and specify row, col, rowspan, colspan to say what things the cell is a header for.

More on Tables

You can make table headings or table data span more than one column or more than one row using colspan, rowspan:

<tr><th colspan="3">heading</th></tr>


<!-- if we have two levels of heading-->

<tr><th colspan="2">heading</th></tr>
<tr><th>subhead1</th><th>subhead2</th></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>

Controlling width

• 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.
• 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%" />

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.
• 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

• <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="..." >
  

Forms

• Forms are one of the most common ways to collect data in an XHTML 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"
• The action attribute is required. 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.
• Search engine's though have limits on the site of URLs they will index for Bing it is 2047, Google only partially supports urls of length 2047, Yahoo! is shorter. Check out: http://bit.ly/9Alt5v.
• 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>