1. HTML
CS422
Dick Steflik

2. Browsers
Since the HTML5 specification isn't officially released yet, none of the currently in vogue browsers are completely compatible
Currently where they stand is:
Google Chrome v (503/555)
Opera (492/555)
Mozilla Firefox v 26.0 (446/555)
Apple Safari v (392/555)
MS IE v11 (365/555)

3. HTML History
October1991 – first mentioned in public in an informal paper by Tim Berners-Lee of CERN
The history is well documented on Wikipedia (search on HTML)
an XML based version of HTML was started in response to HTML 4.0 but is no longer in development and is now part of HTML5

4. Big News HTML5 is a dialect of XML for Browsers Other dialects of XML
SVG (Scaleable Vector Graphics)
OpenOffice (Draw)
X3D (3-D graphics representation)
Blender, SketchUp
Open Document ( Word Processors)
Open Office, MS Word, Libre Office)

5. HTML Elements (tags)
Most elements are used for data presentation, i.e. making the data on the screen look attractive
Some elements are used to communicate with the server using the Hypertext transport Protocol (HTTP). These are the elements that we will be focusing on.

6. Global Attributes in HTML5 all elements have the following attributes:
accesskey
class
contextmenu
data-*
dir
draggable
dropzone
hidden id
lang
spellcheck
style
tabindex
title
translate

7. A little bit about HTTP
All communication between a client (browser) and a server is done via HTTP
The protocol is "stateless" i.e. unlike a desktop program there is nothing to maintain program "state"
the client send a request to the server
the server receives it and sends back a response
this is done over and over but there is nothing to associate one request/response with another
To maintain "state" we'll rely on trickery (more on this later)

8. Anchor tags and form tags
There are only three tags that can send a request to a server
anchor tags
the href attribute takes a URL, this can be used request a new web page or request a program/script to be run on the server
image tags
the src attribute takes a URL and can be used to request a graphic or for the server to run a script
form tags
form tags let us send: page requests, data from the current page, requests to upload a file, requests to delete a file

9. anchor tags
when displayed; unvisited is blue, visited is purple, active is red
the linked page will by default be shown in the current window
important attributes:
id specifies the unique name of the element in the DOM
href specifies the URL of the page to go to
absolute or relative URL
this is the URL of the page to be requested
target where to open the linked document
_blank, _parent, _self, _top, framename

10. image tags required attributes are src and alt important attributes:
src is an absolute or relative URL
alt is a text string to be displayed if the browser is set to not display images
important attributes:
id specifies the unique name of the element in the DOM
src specifies the URL of the image to retrieve or the script to run. There are many scripts available to convert text or numbers to a graphic. Many websites that display the number of times a site is visited use this.

11. form elements
The <form>...</form> tags are used for building data entry forms for web based applications
The form tag makes a container that can containing both presentation elements and data entry elements (widgets)

12. form elements (more) attributes:
id unique name of the element in the DOM
method (get, post, put, delete) the disposition of the contents of the form
action – the url of the script on the server to run
enctype – the encoding to use
novalidate – do not automatically validate data from the form
target – where the response is to be displayed

13. data elements/widgets
The following elements may be nested inside of the form element:
input
textarea
select
fieldset
datalist
keygen
output
progress
meter

14. <input>
there are several types of input fields that can be self validating or validated via a specified regular expression
types are : button, radio, text, search, tel, url, , date, month, week, time, datetime, datetime-local, number, range, color, checkbox, image, file, reset, submit
attributes allow: initialization, field width, datalist, maxlength...

15. <input /> more important attributes: id - DOM id of the element
name - the name to be used for the data when sent to server
size – the width in characters of the element
maxlength – max num of characters allowed

16. Gotcha This is a warnings :
some browsers will render (display on the screen) the data entry widgets even if you forget to put them in a <form> container. but they will not work as advertised unless you put them in a container