HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University in Prague, Czech Republic

History

Document Structure Document data … There is no need for mime type. The document will be transmitted with text/html Compare with HTML 4.1 or earlier.

Document Metadata data about document inside head title document’s title or name should identify document for users even used out of context base specifies document base URL for resolving relative URLs link links document to other resources style embeds style information inside document meta other metadata

Document Structure … Technologies for … <meta http-equiv="content-type" content="text/html; charset=utf-8“ /> …

More on Links link represents relationship of particular type between current document and other web resource elements link and a two kinds of links (according to HTML 5.0 specification) links to external resources links to resources which augment current document hyperlinks links to resources which are exposed to user of current document to navigate to those resources kind depends on element used and relationship type

More on Links href attribute URL of resource linked by relationship rel attribute type of relationship media attribute media linked resource applies to e.g. print, screen, all type attribute MIME type of linked resource text/html, application/xhtml+xml, text/css, application/pdf

More on Links Link type linka Description alternate HHAlternate representation of current document author HHAuthor of document icon ER-Icon representing current document stylesheet ER-Stylesheet for current document licence HHCopyright license covering current document first HHFirst document of a series current document is part of last HHLast document of a series current document is part of next HHNext document in a series current document is part of

More on Links NSWI117 – Materials <link rel="stylesheet" href="default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="default-print.css" type="text/css" media="print" /> <link rel="alternate" href="materials.pdf“ type="application/pdf" media="print" /> Author: <a href=" rel="author"> Martin Nečaský

Sectioning Content content of document is divided into sections sections are divided to subsections section element generic section article element self-contained section independently distributable and reusable e.g. blog post or newspaper article aside element denotes section related to content around and is considered separate around that content e.g. did-you-know aside box nav element denotes section with navigation links

Sectioning Content This article summarizes technologies... HTML CSS We will start with HTML. First, we will go to history. Then, we will deal with actual 5.0. Did you know that SGML is a predecessor of HTML? CSS is the second technology. Home Contact Another article

Sectioning Content there are so called sectioning roots which have own sectioning separate from the outside content: blockquote body details fieldset figure td

Section Headers and Footers header element distinguishes header of the nearest section (hierarchically) intended (but not required) to contain heading ( h1 – h6 ) footer element distinguishes footer of the nearest section (hierarchically)

Sectioning Content NSWI117 – Summary of technologies HTML We will start with HTML. Home Contact

Section Headings h1 – h6 element heading of nearest section number gives relative rank hM has higher rank than hN if one of the following is true M < N and hM and hN are in the same section hN is in subsection of section of hM hM has the same rank as hN iff they are both from the same section and M = N hgroup element heading of nearest section groups a set of h1 – h6 elements when heading has multiple levels (e.g. heading with subheadings or alternative titles)

Section Headings NSWI Summary... At this page,... HTML About HTML... HTML History HTML Today CSS About CSS... 1.NSWI117 - … 1.HTML 1.HTML History 2.HTML Today 2.CSS

Section Headings NSWI Summary... At this page,... HTML About HTML... HTML History HTML Today CSS About CSS... 1.NSWI117 - … 1.HTML 1.HTML History 2.HTML Today 2.CSS

Section Headings NSWI Summary... At this page,... HTML About HTML... HTML History HTML Today CSS About CSS... 1.NSWI117 - … 1.HTML 1.HTML History 2.HTML Today 2.CSS

Document Edits we can specify that given part of document was inserted or removed ins element represents addition to document del element represents removal from document datetime attribute time of the change

Document Edits TODO: Buy food... Wash car... Clean room... Author: My wife

Forms as you (do not) know them form is component of Web page composed of form controls user can interact with form controls by providing data which can be sent to server for further server-side processing form element form itself input, textarea and select elements various types of controls for providing data by user button element buttons

Forms as you (do not) know them Name: Phone: Preferred delivery time: Comments: Submit order

Forms as you (do not) know them form may be made better readable fieldset element Groups semantically related fields legend element field-set label label element field label title attribute may serve as hint for input field note: this is general attribute (may be used with any HTML element)

Forms as you (do not) know them Name: Contact information Phone: Timing Preferred delivery time: Comments: Submit order

Forms as you (do not) know them Submit order

Forms as you (do not) know them each field should have name specified by name attribute

Forms as you (do not) know them <input title="First name followed by family name.“ name="full_name" /> Submit order

Forms as you (do not) know them each field has type specified by type attribute default type is text prior to HTML 5 text (regular text field) password (password field) checkbox (checkbox field) radio (radio button field) button (regular button) submit (field submit button) reset (field reset button) file (file button and file path field) hidden (hidden field)

Forms as you (do not) know them Pizza Size Small Medium Large Pizza Toppings Bacon Extra Cheese Onion Mushroom

Forms as you (do not) know them each field has type specified by type attribute default type is text new types in HTML 5 search (search field) tel (phone field) url (absolute URL field) ( field) date, time, datetime (date/time field) number (number field) range (number field) color (color field)

Forms as you (do not) know them Search Phone URL Date Time Datetime Number Range Color Submit

Forms as you (do not) know them field might be further specified name attribute field name used when form is submitted maxlength attribute maximum number of characters allowed in field size attribute number of characters visible in field value attribute specifies default field value disabled attribute specifies that field is disabled when form loads

Forms as you (do not) know them <input name="full_name" maxlength="32" size="16" value="Martin Nečaský" disabled="true" title="First name followed by family name." /> Submit order

Forms as you (do not) know them field might be further specified (HTML 5) autocomplete attribute values on/off allows to disable field value autocomplete autofocus attribute gives field focus when page loads pattern attribute regular pattern for field value validation placeholder attribute hint for user to help with filling the field required attribute field value is required

Forms as you (do not) know them <input name="phone" autocomplete="off" autofocus="autofocus" pattern="[0-9]{9}" placeholder="Fill in your 9-digit phone number." required="required" /> Submit order

Forms as you (do not) know them … and even more (HTML 5) min attribute minimal value of numerical field max attribute maximal value of numerical field step attribute step for numerical field etc.

Forms as you (do not) know them select element enables to select from more options option element one of the options to select inside select element multiple attribute if present multiple options may be selected datalist element contains one or more predefined options for other field each option is specified with option element

Forms as you (do not) know them Select predefined pizza: Formaggi Prosciuto e mozzarella Pattatine fritte Pattatine fritte all'ischitana Or write your own:

Forms as you (do not) know them when form is submitted data is converted by encoding algorithm and send to selected destination using given method submission parameters are specified by attributes of form element enctype attribute specifies encoding algorithm application/x-www-form-urlencoded multipart/form-data text/plain action attribute specifies destination URL method attribute get or post

Forms as you (do not) know them <form enctype="application/x-www-form-urlencoded" action=" method="get">

Video video element allows for embedding video src, preload, autoplay, controls attributes their purpose is clear …

Video <source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"> <source src="video.ogv" type="video/ogg; codecs='theora, vorbis'">

Canvas canvas element API for rendering graphics you can draw by JavaScript

Canvas var canvas=document.getElementById('myCanvas'); var context=canvas.getContext('2d'); for (var x = 0.5; x < 500; x += 10) { context.moveTo(x, 0); context.lineTo(x, 500); } context.strokeStyle = "#eee"; context.stroke(); context.fillStyle='#FF0000'; context.fillRect(250,250,10,20); context.fillRect(100,80,10,40);

Microformats