1 / 45

HTML 5.0

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. <!DOCTYPE html> <html lang ="en"> < head >

delora
Download Presentation

HTML 5.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. History

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

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

  5. 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> …

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

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

  8. More on Links

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

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

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

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

  13. 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)

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

  15. 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 hMand hNare in the same section • hNis in subsection of section of hM • hM has the same rank as hNiff they are both from the same section and M= N • hgroupelement • heading of nearest section • groups a set of h1 – h6 elements when heading has multiple levels (e.g. heading with subheadings or alternative titles)

  16. 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> • NSWI117 - … • HTML • HTML History • HTML Today • CSS

  17. 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> • NSWI117 - … • HTML • HTML History • HTML Today • CSS

  18. 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> • NSWI117 - … • HTML • HTML History • HTML Today • CSS

  19. Document Edits • we can specify that given part of document was inserted or removed • ins element • represents addition to document • delelement • represents removal from document • datetimeattribute • time of the change

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

  21. 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, textareaand select elements • various types of controls for providing data by user • button element • buttons

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

  23. 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)

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

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

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

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

  28. 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)

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

  30. 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)

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

  32. Forms as you (do not) know them • field might be further specified • name attribute • field name • used when form is submitted • maxlengthattribute • 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

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

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

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

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

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

  38. 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">Pattatinefritte</option> <option value="4">Pattatinefritteall'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="Pattatinefritte" /> <option value="Pattatinefritteall'ischitana" /> </datalist> </p> </form>

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

  40. Forms as you (do not) know them <form enctype="application/x-www-form-urlencoded" action="http://www.pizzeria.it/order" method="get"> </form>

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

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

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

  44. Canvas <canvas id="myCanvas" width="500" height="500" /> <script type="text/javascript"> varcanvas=document.getElementById('myCanvas'); varcontext=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>

  45. Microformats

More Related