Outline

• Tags for the Body of a Web Page
• Tables
• In-Class Exercise
• Accessibility

Introduction

• On Monday, we gave a couple simple HTML documents.
• We said any HTML document needs to have a head tag and a body tag, and then we went over tags that are allowed to appear in the head of HTML document such as title, meta, link, and base tags.
• Except for the title tag whose contents appear as a tab title, as a typical user you don't directly see content from the head tag of a web page, but you do see content from the body tag of a web page
• We start today, by looking tags which are allowed in the body of an HTML document.

What tags can go into the body of a web page?

<h1></h1> - <h6></h6>

are called heading tags. They are used to give a heading for a section of a web document. To be accessible the numbering of heading tags should be properly nested.

  <h1>heading1</h1> 
	<h2>heading 2</h2>
		<h3>heading</h3>
  <!--this is okay, should not do things like skip from an h2 
  to an h4 tag without an h3 tag in between. Screen readers use 
  these headings to extract a table of contents for the document -->

<p></p>

used to specify a paragraph. By default this is style'd with an indentation.

<div></div>

used to specify a related section of text. This tag is a very generic container tag that doesn't have very much semantic meaning. HTML 5 specifies several other block level container tags with more meaning: <header>, for text that is at the top of the document; <section>, for chapters, etc.; <figure>, for figures included in documents.

<blockquote></blockquote>

used to indent large quotations.

<ul></ul> <ol></ol>

unordered and ordered lists. Elements in list are specified with <li></li>. There are also <dl></dl> definition lists.

<ul> <li>List Item 1</li> <li>List Item 2 <ul> <li>Sub List Item</li> </ul> </li> </ul> List Item 1 List Item 2 Sub List Item

<ol> <li>List Item 1</li> <li>List Item 2 <ol> <li>Sub List Item </li> </ol> </li> </ol> List Item 1 List Item 2 Sub List Item

<form></form>

used to make a web form.

<table></table>

used to make a table in a web page.

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>
  

  • To aid with accessibility you should always separates links with at least a little text, like a period, or other non-textual but visual separators. You might also want to indicate if a link is offsite or is to a non HTML mime-type.
    For example, IRS.1040 Form [PDF].
  • Links within pages are given with <a href="#relative link">somewhere in this page with id="relative link"

  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, <b></b>, <u></u>, <i></i>,, .

Entities in HTML and XHTML

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

Below is an example table we discussed:

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<table>
    <caption>grade table</caption>
    <tr><td></td><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>

Note: Although in this example we used the <style> tag immediately before the table, for this to be valid html, all style tags would need to be in the <head> of the document.

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>

Here is an example where we have two levels of headings at the top of a table:

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

In-Class Exercise

• Make a two column HTML 5 table with caption "Menu".
• It should have table headers Item and Price.
• Then have five rows with delicious menu item data for this menu.
• Post your solution to the Feb 10 In-Class Exercise Thread.

An Accessibility Interlude

• I will from time to time bring up accessibility when talking about how we should write web-pages.
• By this I mean designing our pages so that they can be understood by as large an audience as possible.
• People come to a web page with a variety of reading abilities, a variety of motor abilities, etc. -- we want the information that can be extracted from our pages to be positive, and hopefully, about the same for all people.
• Section 508 of Federal Law puts requirements on government electronic and information technology to meet accessibility standards.
• The WAI (Web Accessibility Initiative) working group provides standards for accessibility.
• They have published three commonly cited Web Content Accessibility Guidelines: WCAG 1.0 (1999), WCAG 2.0 (2008), and WCAG 2.1 (2018).
• The first was more descriptive of what authors should consider, the second tries to be more concrete so that mechanical tests of accessibility can be done, and the third extends the second withh new success criteria geared toward dynamic web content and mobile.
• For dynamic pages, the WAI has also published Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) guidelines.