Introduction

Last week, we went over the the basics of networking and the internet.
We then talked about the hypertext transfer protocol and different versions of it.
We then briefly introduced HTML.
We said that the basic structural unit of an HTML document is a open/close tag.
An open tag takes the form <tag_name> and a close tag has the form </tag_name>.
Between an open tag and a close tag is called a tag's contents and can be either nested tags or text.
Open tags are allowed to have attributes: <tag_name attribute_1='value_1' ... attribute_n='value_n' >
In HTML some open tags are allowed without corresponding close tags. For example, <br> . In XHTML, all open tags must be closed, although there is a short close tag notation <br />.
Attribute values in XHTML must be enclosed in either single or double quotes, in HTML this is optional.
For this class, we will XHTML notation as it is more compatible.
Let's begin today by looking at simple HTML documents in different versions of HTML.

Standard XHTML 1.1 Document Structure

XML declarations:

<?xml version ="1.0" encoding="utf-8" ?>
<!-- as not supported by some old 
   browsers validators doesn't usually check this -->

SGML DOCTYPE. This says which Document Type Definition will be used:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The XHTML document:

<html xmlns="http://www.w3.org/1999/xhtml" >
		<!-- might have namespaces for other things like SVG -->
<head>
	<title>name of my document</title></head>
<body><!--actually page stuff--></body>
</html>

Minimal HTML 5 Document

In HTML 5/HTML LS, a lot of the syntax which is hard for humans to remember has been stripped-away.

Notice the !DOCTYPE is much simpler, and notice how we specify the character set:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple HTML</title>
        <meta charset="utf-8" />
    </head>
    <body>
    <h1>Example HTML 5 document.</h1>
    <p>Example paragraph.</p>
    </body>
</html>

This basic structure will also work for XHTML 5 -- we just need to follow XML conventions for closing tags when we start to add content.

Where to Edit HTML

You can create and edit an HTML document in any text editor.
You should avoid editors though which will insert formatting characters that you don't see. For example, it is sub-optimal to use Word to make an HTML document from scratch.
Saving a document as HTML from a word processor such as Word usually produces poor quality HTML: lots of redundant tags and styles. Further, the result is often non-standards conforming.
You can usually get by with the editors in your favorite IDE, although I find some IDEs such as Eclipse to be too slow and intrusive for web development. For PHP there is the IDE PHPStorm which is reasonably good.
I am suggesting people to use Atom, because it is available for Mac, Windows, and Linux. It is small and fast, it lets you see special characters, and it supports code highlighting.
Make sure if you are on a Windows system to set folder preferences so as to be able to see file extensions. That way, you don't think you are saving a file as MyGreatHtml.html and ending up really saving MyGreatHtml.html.txt

How to "run" your HTML

Dragging an HTML page into your favorite browser's window will show you what your HTML page looks like somewhat correctly:
- The URL your browser will use in this case will be: file://file-system-path-to-your-html-file.
- Relative paths and absolute paths for links and images will often be broken by doing this.
- Media types like video and audio will not work if they require a streaming server.
- If the page has any server-side script, directives they will not run.
It is better to put your HTML documents somewhere under the document root of a web server such as Apache. Make sure your web server and any other needed servers such as Mysql are running. In XAMPP, MAMP, WAMP, etc., there is a control panel for this. Then point your browser to the url corresponding to your web server.

What does it mean for your HTML to "work"?

The organization that you are coding for will often have guidelines as to which browsers your HTML needs to work on and to what degree it needs to be able to work. They might have different tiers of "working" based on browser version, with older browsers not needing to be supported to the same degree as newer ones.
For this class, you can do the initial development of your HTML using one browser of your choice... however...
You should then test and get your code to work on all of the major browsers: Internet Explorer, Edge, Firefox, Safari, Chrome, Opera, and Brave.
It should work on current as well as three year old versions of these browsers.
It should work on Desktop and mobile devices.
Most likely, you won't have to change anything, but you should still check.
You should make sure your code conforms to the HTML spec you are using by testing it on the W3C Validator Service.
You should make sure your code passes an automated test of accessibility (so that it would work in a screen reader) such as the WAVE Webaim Accessibility Tool.

The head of an XHTML or HTML5 document

We have now looked at a simple HTML document. This consisted of a DOCTYPE declaration, an html tag pair with head and body tag pairs as its contents. The head has to have at least a title tag within it. Let's now examine what can go in the head and body tags pairs in detail, beginning by looking at the head tag:

At a minimum the head of an html document needs to have within it a <title></title>.
Additional allowable tags include:
link
used to associate another document with this current document. For example, it can be to associate a stylesheet with or to give a favicon.ico for the current document. One can also specify using prev and next the position of this document in a collection of documents.
```
Examples:
  <link rel="stylesheet" type="text/css"
            href="http://somewhere.com/css/search.css" />  
  <link rel="icon"   
    href="http://www.cs.sjsu.edu/faculty/pollett/favicon.ico" />
  <link rel="prev"   
    href="./?LecList.php" />
```
base
used to specify a base directory for all references on the page:
```
Example: 
  <base href="http://www.my.com/stuff/"  /> 
```
Now a link <a href="file.html" >file</a> would have the implicitly base address in front of it.
script and style
used to include Javascript or stylesheet files or blocks. These tags are allowed in both the head and body of the document. We'll talk about them more next week.

Kinds of Meta Information

Heads of documents can also have (but are not required to have) meta tags.

<meta name="author" content="who wrote the page" />
<meta name="generator" content="ChrisTextTool" /> 
   <!--What software was used to generate this html -->
<meta name="description" content="how I would like the search 
   engines to describe my page. " />
<meta name="keywords" content="cool site" /> 
   <!--Key terms search engines should index this site with. 
    Unfortunately, not really used by search engines anymore -->
<meta name="robots" content="comma separated list of 
   what would like crawler to do" /> 
   <!-- Example commands NOINDEX, NOFOLLOW, NOCACHE, NOSNIPPET, NOODP, NOYDIR . 
     Some of these commands can also be specified in a robots.txt file. ROBOTS
     and these values are case insensitive.-->

Rather than use robots in the above you can also give directives for specific robots.

In addition to the above meta tags, we will see later in the semester how aspects of how the screen renders in a mobile phone can be affected by meta tags.

The WHATWG Meta Extensions page contains a relatively complete list of values for the name and content attribute.

More Meta Information

You can also use meta tags to give the equivalent to http header fields:
```
<meta http-equiv="foo" content="bar" />
```
is treated by a browser as if the response header field:
```
foo: bar
```
was sent.

For example:

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Expires" content="Wed, 30 Aug 2006 14:25:27" />
<meta http-equiv="refresh" content="10;url=http://www.cs.sjsu.edu/" />

Quiz

Which of the following statements is true?

In an HTTP request/response only the response is allowed to have a body.
The World Wide Web is the collection of devices connected to the internet running the HTTP protocol.
.txt is a mime type.

The body of a web page

There are two basic kinds of elements that can appear within the body of a web page.
block level elements
are the basic units of layout.

inline level elements
control formatting within blocks.
A block element is essentially a rectangular region on the web browser screen.

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
1. 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>,<sub></sub>, <sup></sup>.

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:

& &

< <

> >

(hard space)  

" "

Σ Σ

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:

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

grade table
	Item	Value
1.	Homeworks	50%
2.	Exams	50%

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</tr>

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.

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 should be done with CSS (described later). In HTML 5, the border attribute can only take a value of 0 or 1 to indicate the presence of a border or not.

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

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

HTML Tags for the Head and Body

Outline