HTML CS422 Dick Steflik

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 32.0.1700.102 (503/555) Opera 19.0.1326.56 (492/555) Mozilla Firefox v 26.0 (446/555) Apple Safari v 6.6.1 (392/555) MS IE v11 (365/555)

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

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)

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.

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

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)

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

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

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.

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)

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

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

<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, email, date, month, week, time, datetime, datetime-local, number, range, color, checkbox, image, file, reset, submit attributes allow: initialization, field width, datalist, maxlength...

<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

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