HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software...
-
Upload
byron-price -
Category
Documents
-
view
214 -
download
0
Transcript of HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software...
![Page 1: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/1.jpg)
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
![Page 2: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/2.jpg)
History
![Page 3: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/3.jpg)
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.
![Page 4: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/4.jpg)
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
![Page 5: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/5.jpg)
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>…
![Page 6: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/6.jpg)
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
![Page 7: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/7.jpg)
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
![Page 8: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/8.jpg)
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
![Page 9: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/9.jpg)
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>
![Page 10: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/10.jpg)
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
![Page 11: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/11.jpg)
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>
![Page 12: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/12.jpg)
Sectioning Content• there are so called sectioning roots which have own
sectioning separate from the outside content:• blockquote• body• details• fieldset• figure• td
![Page 13: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/13.jpg)
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)
![Page 14: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/14.jpg)
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>
![Page 15: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/15.jpg)
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)
![Page 16: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/16.jpg)
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
![Page 17: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/17.jpg)
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
![Page 18: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/18.jpg)
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
![Page 19: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/19.jpg)
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
![Page 20: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/20.jpg)
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>
![Page 21: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/21.jpg)
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
![Page 22: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/22.jpg)
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>
![Page 23: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/23.jpg)
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)
![Page 24: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/24.jpg)
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>
![Page 25: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/25.jpg)
Forms as you (do not) know them<form> <input title="First name followed by family name." /> <button>Submit order</button></form>
![Page 26: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/26.jpg)
Forms as you (do not) know them• each field should have name
• specified by name attribute
![Page 27: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/27.jpg)
Forms as you (do not) know them<form> <input title="First name followed by family name.“ name="full_name" /> <button>Submit order</button></form>
![Page 28: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/28.jpg)
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)
![Page 29: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/29.jpg)
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>
![Page 30: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/30.jpg)
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)
![Page 31: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/31.jpg)
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>
![Page 32: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/32.jpg)
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
![Page 33: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/33.jpg)
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>
![Page 34: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/34.jpg)
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
![Page 35: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/35.jpg)
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>
![Page 36: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/36.jpg)
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.
![Page 37: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/37.jpg)
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
![Page 38: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/38.jpg)
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>
![Page 39: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/39.jpg)
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
![Page 40: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/40.jpg)
Forms as you (do not) know them<form enctype="application/x-www-form-urlencoded" action="http://www.pizzeria.it/order" method="get"> </form>
![Page 41: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/41.jpg)
Video• video element
• allows for embedding video
• src, preload, autoplay, controls attributes• their purpose is clear …
![Page 42: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/42.jpg)
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>
![Page 43: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/43.jpg)
Canvas• canvas element
• API for rendering graphics• you can draw by JavaScript
![Page 44: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/44.jpg)
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>
![Page 45: HTML 5.0 Technologies for Web Application Development Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University.](https://reader035.fdocuments.net/reader035/viewer/2022070407/56649e1a5503460f94b08547/html5/thumbnails/45.jpg)
Microformats