Post on 11-Jan-2016
HTML 5.0Technologies 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<!DOCTYPE html><html lang="en"> <head> <!– document metadata --> </head> <body> Document data … </body></html>
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… <head> <title>Technologies for …</title> <base href="http://www.ksi.mff.cuni.cz/index.html" /> <link rel="stylesheet" href="default.css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8“ /> </head>…
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 LinksLink type link a Description
alternate H H Alternate representation of current document
author H H Author of document
icon ER - Icon representing current document
stylesheet ER - Stylesheet for current document
licence H H Copyright license covering current document
first H H First document of a series current document is part of
last H H Last document of a series current document is part of
next H H Next document in a series current document is part of
More on Links<head> <title>NSWI117 – Materials</title> <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" /></head><body> <footer>Author: <a href="http://www.ksi.mff.cuni.cz/~necasky" rel="author"> Martin Nečaský</a> </footer></body>
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<article> <p>This article summarizes technologies ...</p> <nav> <a href="...">HTML</a><a href="...">CSS</a> </nav> <section> <p>We will start with HTML.</p> <section><p>First, we will go to history.</p></section> <section><p>Then, we will deal with actual 5.0.</p></section> </section> <aside> <p>Did you know that SGML is a predecessor of HTML?</p> </aside> <section><p>CSS is the second technology.</p></section> <nav> <div><a href="...">Home</a><a href="...">Contact</a></div> </nav></article><article>Another article</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<article> <header> <h1>NSWI117 – Summary of technologies</h1> </header> <section> <header> <h1>HTML</h1> </header> <p>We will start with HTML.</p> </section> <footer> <nav> <div><a href="...">Home</a><a href="...">Contact</a></div> </nav> </footer></article>
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<hgroup> <h1>NSWI117 - ...</h1> <h2>Summary ...</h2></hgroup><p>At this page, ...</p><h2>HTML</h2><p>About HTML ...</p><h3>HTML History</h3><h3>HTML Today</h3><h2>CSS</h2><p>About CSS ...</p>
1. NSWI117 - …1. HTML
1. HTML History2. HTML Today
2. CSS
Section Headings<body> <hgroup> <h1>NSWI117 - ...</h1> <h2>Summary ...</h2> </hgroup> <p>At this page, ...</p> <section> <h2>HTML</h2> <p>About HTML ...</p> <section> <h3>HTML History</h3> </section> <section> <h3>HTML Today</h3> </section> </section> <section> <h2>CSS</h2> <p>About CSS ...</p> </section></body>
1. NSWI117 - …1. HTML
1. HTML History2. HTML Today
2. CSS
Section Headings<body> <hgroup> <h1>NSWI117 - ...</h1> <h2>Summary ...</h2> </hgroup> <p>At this page, ...</p> <section> <h1>HTML</h1> <p>About HTML ...</p> <section> <h1>HTML History</h1> </section> <section> <h6>HTML Today</h6> </section> </section> <section> <h1>CSS</h1> <p>About CSS ...</p> </section></body>
1. NSWI117 - …1. HTML
1. HTML History2. 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<p>TODO:</p><ol> <li> <ins datetime="2011-02-27">Buy food ...</ins> </li> <li> <del datetime="2011-02-26"> <ins datetime="2011-02-23">Wash car ...</ins> </del> </li> <li> <ins datetime="2009-06-17">Clean room ...</ins> </li></ol><footer> Author: <a href="mailto:mywife" rel="author">My wife</a></footer>
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<form> <p>Name: <input /></p> <p>Phone: <input /></p> <p>Email: <input /></p> <p>Preferred delivery time: <input /></p> <p>Comments: <textarea></textarea></p> <button>Submit order</button></form>
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<form> <p><label>Name: <input /></label></p> <fieldset> <legend>Contact information</legend> <p><label>Phone: <input /></label></p> <p><label>Email: <input /></label></p> </fieldset> <fieldset> <legend>Timing</legend> <p><label>Preferred delivery time: <input /></label></p> </fieldset> <p><label>Comments: <textarea></textarea></label></p> <button>Submit order</button></form>
Forms as you (do not) know them<form> <input title="First name followed by family name." /> <button>Submit order</button></form>
Forms as you (do not) know them• each field should have name
• specified by name attribute
Forms as you (do not) know them<form> <input title="First name followed by family name.“ name="full_name" /> <button>Submit order</button></form>
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<form> <fieldset> <legend>Pizza Size</legend> <p><label><input type="radio" name="size">Small</label></p> <p><label><input type="radio" name="size">Medium</label></p> <p><label><input type="radio" name="size">Large</label></p> </fieldset> <fieldset> <legend>Pizza Toppings</legend> <p><label><input type="checkbox">Bacon</label></p> <p><label><input type="checkbox">Extra Cheese</label></p> <p><label><input type="checkbox">Onion</label></p> <p><label><input type="checkbox">Mushroom</label></p> </fieldset></form>
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)• email (email field)• date, time, datetime (date/time field)• number (number field)• range (number field)• color (color field)
Forms as you (do not) know them<form> <p>Search <input name="search_field" type="search" /></p> <p>Phone <input name="tel_field" type="tel" /></p> <p>URL <input name="url_field" type="url" /></p> <p>Email <input name="email_field" type="email" /></p> <p>Date <input name="date_field" type="date" /></p> <p>Time <input name="time_field" type="time" /></p> <p>Datetime <input name="datetime_field" type="datetime" /></p> <p>Number <input name="number_field" type="number" /></p> <p>Range <input name="range_field" type="range" /></p> <p>Color <input name="color_field" type="color" /></p> <button>Submit</button></form>
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<form> <input name="full_name" maxlength="32" size="16" value="Martin Nečaský" disabled="true" title="First name followed by family name." /> <button>Submit order</button></form>
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<form> <input name="phone" autocomplete="off" autofocus="autofocus" pattern="[0-9]{9}" placeholder="Fill in your 9-digit phone number." required="required" /> <button>Submit order</button></form>
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<form> <p>Select predefined pizza: <select name="predefined_pizza"> <option value="1">Formaggi</option> <option value="2">Prosciuto e mozzarella</option> <option value="3">Pattatine fritte</option> <option value="4">Pattatine fritte all'ischitana</option> </select> </p> <p>Or write your own: <input type="text" name=“user_pizza" list="pizza_dl"> <datalist id="pizza_dl"> <option value="Formaggi" /> <option value="Prosciuto e mozzarella" /> <option value="Pattatine fritte" /> <option value="Pattatine fritte all'ischitana" /> </datalist> </p></form>
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="http://www.pizzeria.it/order" method="get"> </form>
Video• video element
• allows for embedding video
• src, preload, autoplay, controls attributes• their purpose is clear …
Video<video controls autoplay> <source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"> <source src="video.ogv" type="video/ogg; codecs='theora, vorbis'"></video>
Canvas• canvas element
• API for rendering graphics• you can draw by JavaScript
Canvas<canvas id="myCanvas" width="500" height="500" />
<script type="text/javascript"> 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);</script>
Microformats