›

Bài giảng HTML và CSS course - Introduction to HTML 5 - Lương Trần Hy Hiến

pdf 102 trang huongle 3250
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng HTML và CSS course - Introduction to HTML 5 - Lương Trần Hy Hiến", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_html_va_css_course_introduction_to_html_5_luong_tr.pdf

Nội dung text: Bài giảng HTML và CSS course - Introduction to HTML 5 - Lương Trần Hy Hiến

  1. HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP. 1
  2. HTML5 = HTML + CSS + JS API 2
  3. Contents • HTML5 Structure • HTML5 Audio/Video • HTML5 Form • HTML5 Canvas 3
  4. New and Updated HTML5 Elements HTML5 introduces 28 new elements: , , , , , , , , , , , , , , , , , , , , , , , , , , and 4
  5. HTML5 Structure 5
  6. Structure 6
  7. Structure 7
  8. Structure HTML5 offers new semantic elements to define different parts of a web page: • • • • • • • • • • • • 8 •
  9. • The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading 9
  10. • A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos 10
  11. • The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines 11
  12. • The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like 12
  13. • The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user- submitted comment, an interactive widget or gadget, or any other independent item of content 13
  14. • The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links 14
  15. Block semantic element • • 15
  16. • The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. 16
  17. • Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc 17
  18. Inline semantic element • • • • 18
  19. • Defines marked/highlighted text 19
  20. • Defines a date/time 20
  21. • Defines a scalar measurement within a known range (a gauge) 21
  22. • The progress element provides a simple and effective way for a web designer to notify a user of their progress regarding a specified task 22
  23. Lab: frames layers Open new page in Dreamweaver 100px 1/3 2/3 23
  24. Lab: frames layers No need for ids here; use HTML5 tags Older browsers need to know block elements 24
  25. Lab: frames layers calc() defines position of each layer Space in command is important New with CSS3; not universally supported yet calc(33.33% - 5px); 33.33% 66.67% - 5px - 5px 25
  26. Lab: frames layers Finish out the lab headernavsection{ { { display: block; position: absolute; top: 10px120px;; right: 10pxcalc;(66.67% + 5px); leftbottom: 10px: 10px; ; 33.33% 66.67% heightleft: :10pxcalc100px;(33.33%; + 5px); - 5px - 5px background-color: #EEEEFF#EEFFEE#FFEEEE; } 26
  27. HTML Media 27
  28. Content • Introduction • Audio tag • Video tag • Other multimedia • Exercise & Online 28
  29. Ebook for HTML5 Media Audio/Video 29
  30. HTML5 in Action on the Web 30
  31. HTML4 == Plugins • Silverlight™ • Quicktime™ CODEC == COmpressor/DECompressor • Flash™ 31
  32. Support for (and demo of) HTML5 Audio • • 32
  33. Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis No Yes Yes Yes No MP3 Yes No No Yes Yes Wav No Yes Yes No Yes 33
  34. Support for (and demo of) HTML5 Video • HTML5 Video – – 34
  35. Format IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No 35
  36. Audio/Video for Publishers HTML5 lets you embed audio/video directly in your content without any plugins needed: (Sorry, <audio> element not supported in your browser/ereader, so you will not be able to listen to this song.) (Sorry, <video> element not supported in your browser/ereader, so you will not be able to watch this video.) 36
  37. HTML5 Video • Example: Your browser does not support the element. • Property: – src, autoplay, controls, height, width, – loop, autobuffer, preload, poster 37
  38. HTML5 Audio • Example: Your browser does not support the element. • Property: – src, autoplay, controls – loop, autobuffer, preload 38
  39. Handling Media Events Event Description abort This event is generated when playback is aborted. canplay This event is generated when enough data is available that the media can be played. ended This event is generated when playback completes. error This event is generated when an error occurs. loadeddataThis event is generated when the first frame of the media has finished loading. loadstart This event is generated when loading of the media begins. 39
  40. Handling Media Events Event Description pause This event is generated when playback is paused. play This event is generated when playback starts or resumes. progress This event is generated periodically to inform the progress of the downloading the media. ratechange This event is generated when the playback speed changes. seeked This event is generated when a seek operation completes. 40
  41. Handling Media Events Event Description seeking This event is generated when a seek operation begins. suspend This event is generated when loading of the media is suspended. volumechange This event is generated when the audio volume changes. waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). 41
  42. Example var clip = document.getElementById('audio'); clip.muted = false; //câm clip.play(); //phát clip.pause(); //tạm dừng 42
  43. Learning by example • Prepare video and audio file • 43
  44. HTML5/CSS3 HTML5 Forms 44
  45. Giới thiệu • Các thành phần mới trong HTML5 bổ sung thêm chức năng mà các nhà thiết kế/phát triển web thường kết hợp quan các phương tiện khác như javascript và Flash. • HTML5 = HTML4 + một số thẻ thêm + validation 45
  46. Một số thẻ trong Form ■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text • (password) • • • • (reset, button) • . • . • , 46
  47. 13 New Input Types 47
  48. Một số thuộc tính mới • Của thẻ : autocomplete, novalidate • Của thẻ : – autocomplete – height and width – list – autofocus – min and max – form – multiple – formaction – pattern (regexp) – formenctype – placeholder – formmethod – required – formnovalidate – step – formtarget 48
  49. Thẻ input có thuộc tính type mới • search • time • email • datetime-local • url • number • tel • range • color • datetime • date • month • week 49
  50. Thành phần label • Thành phần không bắt buộc, tăng khả năng truy cập cho form. • Phone • 50
  51. Search search Dùng để search hỗ trợ bởi Chrome, Opera, và Safari. Search Google: ` 51
  52. Email email Hỗ trợ bởi Chrome, Opera, firefox và safari. E-mail: 52
  53. URL url Dùng để nhập liệu địa chỉ web(URL address). Field sẽ được tự động validate khi form submit. Hỗ trợ bởi Chrome, Opera, firefox. Add your homepage: 53
  54. Range range Hỗ trợ Opera và WebKit (Chrome). Gồm có các thuộc tính min, max, và step. Dùng hỗ trợ validate nhập liệu số On a scale of 1 to 10, my knowledge of HTML5 is: 54
  55. Sliders 55
  56. color color The color input type (type="color") provides the user with a color picker Supported only in Opera, Chrome Select your favorite color: 56
  57. Spin Boxes 57
  58. Date Pickers 58
  59. Color Pickers 59
  60. keygen keygen The purpose of the element is to provide a secure way to authenticate users. The tag specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future. Username: Encryption: 60
  61. output output The element represents the result of a calculation (like one performed by a script). 0 100 + = 61
  62. Data Lists 62
  63. list 63
  64. HTML5 Form Attribute Enhancements • Các thuộc tính mới autofocus, required, placeholder, maxlength, và pattern. Trong đó required và placeholder sử dụng cho textbox. 64
  65. Placeholder Text 65
  66. Autofocus Fields 66
  67. Validation 67
  68. Validation Example 68
  69. References • “Web Forms – Dive into HTML 5” • “Dectecting HTML5 Features” • 69
  70. HTML5/CSS3 HTML5 Canvas Msc. Luong Tran Hy Hien, FIT of HCMUP 70
  71. Canvas dùng làm gì? • Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như: – Các sơ đồ đơn giản – Trang trí thêm cho giao diện người dùng – Hình ảnh động – Biểu đồ và đồ thị – Có thể nhúng các ứng dụng vẽ – Hoạt động tốt với những hạn chế của CSS 71
  72. Canvas (tt) • • Sử dụng Javascript để điều khiển: var canvas = document.getElementById("myCanvas"); // Lấy ra vị trí canvas với bối cảnh 2D: var context = canvas.getContext("2d"); • Tọa độ: 72
  73. Canvas Lines: Vẽ đường thẳng • context.moveTo(x,y); • context.lineTo(x,y); • context.stroke(); • Có độ rộng: context.lineWidth = [value]; • Có màu: context.strokeStyle = "#ff0000"; 73
  74. Tùy chỉnh đường thẳng • context.lineCap = "butt"; • context.lineCap = "round"; • context.lineCap = "square"; 74
  75. Vẽ đường (tập hợp) • beginPath(): bắt đầu đường vẽ • closePath(): kết thúc đường vẽ • stroke(): vẽ đường biên • fill(): tô màu • context.beginPath(); • context.moveTo(50,150); • context.lineTo(100,100); • context.lineTo(150,150); • context.lineTo(200,100); • context.lineTo(250,150); 75 • context.stroke();
  76. Rectange - Hình chữ nhật • fillRect(x, y, width, height) – Vẽ hình chữ nhật đặc • clearRect(x, y, width, height) – Xóa nội dung vùng vẽ • strokeRect(x, y, width, height) – Vẽ hình chữ nhật chỉ có biên • fillStyle: CSS background color • strokeStyle: CSS border color 76
  77. Cung tròn • arc(x, y, radius, angle_start, angle_end, anticlockwise) 77
  78. Bài tập • Vẽ hình chữ nhật có chiều dài 400px, rộng 300px, 4 góc bo tròn với cung 20px. • Hướng dẫn: – Sử dụng lệnh vẽ đường thẳng, cung tròn – Chú ý: Tính toán các góc 78
  79. Bezier • Mục đích: Xây dựng hình tùy ý • context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); context.beginPath(); // bắt đầu đường vẽ context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); // kết thúc đường vẽ context.lineWidth = 5; context.strokeStyle = "#0000ff"; context.stroke(); 79 context.strokeStyle = "#8ed6ff";
  80. Vẽ đường cong đơn giản context.quadraticCurveTo(controlX, controlY, endX, endY); 80
  81. Vẽ đường cong phức tạp • bezierCurveTo(controlX1, controlY1, co ntrolX2, controlY2, endX,endY); 81
  82. Bóng đổ //ve trai tim trai ctx.fillStyle= "#ff0000"; ctx.beginPath(); ctx.moveTo(200,50); • độ rộng bóng đỗ ctx.bezierCurveTo(270,10, 280, 80, 200,120); ctx.bezierCurveTo(120,80, 130, 10, – ctx.shadowBlur = 5; 200,50); ctx.shadowBlur = 5; // độ rộng bóng đỗ ctx.shadowColor = "black"; // màu bóng đỗ • màu bóng đỗ ctx.fill(); – ctx.shadowColor = "black"; • context.shadowOffsetX=[value]; //ve trai tim phai ctx.fillStyle= "#ffff00"; context.shadowOffsetY=[value]; ctx.beginPath(); ctx.moveTo(280,60); ctx.bezierCurveTo(350,20, 360, 90, 280,130); ctx.bezierCurveTo(200,90, 210, 20, 280,60); ctx.shadowBlur = 5; // độ rộng bóng đỗ ctx.shadowColor = "black"; // màu bóng82 đỗ ctx.fill();
  83. Images • context.drawImage(imageObj,destX,destY , sizeWidth, sizeHeight, cropX, cropY, cropWidth, cropHeight); • imageObj: đối tượng hình • destX: tọa độ x của vị trí bắt đầu vẽ hình (góc top trái x) • destY: tọa độ y của vị trí bắt đầu vẽ hình (góc top trái Y) • sizeWidth: kích thước chiều rộng hình • sizeHeight: kích thước chiều cao hình • cropX: vị trí x điểm bắt đầu crop • cropY: vị trí Y điểm bắt đầu crop • cropWidth: kích thước chiều rộng hình sau khi crop • cropHeight: Kích thước chiều cao hình sau khi crop 83
  84. Images • drawImage(image, dx, dy): vẽ hình với kích thước thực sự • drawImage(image, dx, dy, dw, dh): vẽ hình resize với kích thước dw/dh • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) • Draws selected region of image starting at sx/sy with width sw and a height sh. Starts drawing at the dx/dy coordinates with size defined by dw / dh. 84
  85. Vẽ chuỗi • context.font = 'italic 40px Calibri'; – normal, italic, bold, • context.fillText(str, x, y); – Màu: context.fillStyle = ; • context.strokeText(str, x, y); – Màu: context.strokeStyle = ; • context.textAlign = ; – start, end, left, right, and center. 85
  86. Lấy kích thước vùng chữ • var metrics = context.measureText(text); • var width = metrics.width; 86
  87. Pattern • var pattern = context.createPattern(imageObj, repeatOption); • context.fillStyle = pattern; • context.fill() repeatOption có 4 giá trị: repeat, repeat- x, repeat-y, hoặc no-repeat 87
  88. Tô màu Linear Gradient • var grd=context.createLinearGradient(startX, startY, endX, endY); • grd.addColorStop(offset, color); – startX: tọa độ x của điểm bắt đầu – startY: tọa độ y của điểm bắt đầu – endX: tọa độ x của điểm kết thúc – endY: tọa độ y của điểm kết thúc 88
  89. Tô màu Gradient Radial • var grd=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); • grd.addColorStop(offset, color); 89
  90. Một số vấn đề khác • Độ trong suốt – context.globalAlpha=[value]; • Cắt một vùng chọn – context.clip(); • Xoay: – context.rotate(góc_xoay); • Co giãn: – context.scale(x, y); 90
  91. Bài tập • Tạo hình chạy ngẫu nhiên theo thời gian (trang 26/Chương 3 – Dynamic Graphics, Hello HTML5 & CSS3, version 2013 • corehtml5canvas.com/code-live/ 91
  92. Canvas vs SVG • SVG can be made accessible, canvas can not • SVG paints DOM elements. Canvas paints pixels • SVG can drain memory b/c of DOM usage • Canvas can drain CPU because of JS usage • Canvas be saved as an image. SVG can be an image • SVG scales better 92
  93. HTML5 Canvas Advanced 93
  94. Transform • translate(x,y): di chuyển canvas tới tọa độ mới • rotate(angle): quay góc angle (+: cùng chiều kim đồng hồ, -: ngược chiều) • scale(x, y): phóng to/thu nhỏ x lần chiều rộng và y lần chiều dài. • save(): lưu trạng thái • restore(): quay lui trạng thái trước đó 94
  95. Transform • var centerX = 0, centerY = 0, radius = 50; // save state context.save(); // translate context context.translate(canvas.width / 2, canvas.height / 2); // scale context horizontally context.scale(2, 1); // draw circle which will be stretched into an oval context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); // restore to original state context.restore(); // apply styling context.fillStyle = '#8ED6FF'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; 95 context.stroke();
  96. Lấy tọa độ chuột function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } 96
  97. Animation – Hiệu ứng • Xóa vùng vẽ: context.clearRect(x, y, w, h) • Di chuyển: Kết hợp hàm thời gian – setInterval(callback, time); – setTimeout(callback, time); 97
  98. Validating your HTML5 • 98
  99. Ngoài ra, HTML5 còn có • HTML5 API's (Application Programming Interfaces) – HTML Geolocation – HTML Drag and Drop – HTML Local Storage – HTML Application Cache – HTML Web Workers – HTML SSE 99
  100. Tham khảo • ro.asp • • • 4000001654/index.html • • 100
  101. Q & A 101
  102. THE END 102