GIỚI THIỆU về HTML5

GIỚI THIỆU VỀ HTML5 Tác giả: Nguyễn Văn Toản Website: http://vnaking.com/ Linkin: http://vn.linkedin.com/in/toanvnaking/ GIỚI THIỆU VỀ HTML5 MỤC LỤC Mở đầu Error! Bookmark not defined I MụC TIÊU Đề TÀI PHƯƠNG PHÁP NGHIÊN CứU Nội dung báo cáo II TRÍCH YếU LịCH Sử HÌNH THÀNH VÀ PHÁT TRIềN HTML a HTML b HTML c HTML d HTML e HTML5 GIỚI THIỆU CÔNG NGHỆ HTML5 CÁC ĐỔI MỚI NỔI BẬT TRONG HTML5 A B C D E F G H CÚ PHÁP HTML5 SVG VÀ MATHML i SVG (vẽ hình học vector) ii MathML (soạn thảo công thức toán học) MULTIMEDIA VớI VIDEO VÀ AUDIO i Video ii Audio CANVAS (Vẽ Đồ HọA) 10 FORM 11 i Input 11 ii Output 13 THUộC TÍNH TOÀN CụC 14 i ContentEditable 14 ii Draggable 14 iii SpellCheck 14 LƯU TRữ Dữ LIệU CụC Bộ NGOạI TUYếN 15 i Kiểm tra tình trạng trực tuyến 15 ii Lưu trữ tạm thời với Session Storage 15 iii Lưu trữ lâu dài với Local Storage 16 iv Lưu trữ truy vấn với Web SQL Database 16 THẻ NGữ NGHĨA 17 CÁC THAY ĐỔI TRONG HTML5 18 A B C D E F CÁC THẻ MớI 18 CÁC THUộC TÍNH MớI 19 CÁC THẻ ĐƯợC THAY ĐổI 19 CÁC THUộC TÍNH ĐƯợC THAY ĐổI 19 CÁC THẻ Bị LOạI Bỏ 20 CÁC THUộC TÍNH Bị LOạI Bỏ 20 III LỜI KẾT 21 http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 Mở đầu I Mục tiêu đề tài Giới thiệu lịch sử hình thành ngôn ngữ HTML nói chung công nghệ áp dụng HTML5 nói riêng Phương pháp nghiên cứu Học nhóm, trao đổi kiến thức hiểu biết kinh nghiệm lập trình HTML thành viên nhóm Tổ chức buổi tranning, sermina để tiếp thu công nghệ HTML Tham khảo tài liệu từ nhiều nguồn đáng tin cậy Internet Nội dung báo cáo II Trích yếu HTML5 ngôn ngữ cấu trúc trình bày nội dung cho World Wide Web công nghệ cốt lõi Internet tương lai không xa Được đề xuất Opera Software Đây phiên thứ ngôn ngữ HTML phát triển World Wide Web Consortium WHATWG Mục tiêu cốt lõi cải thiện khả hỗ trợ cho đa phương tiện giữ việc người thiết bị, chương trình máy tính trình duyệt web, trình đọc hình, v.v đọc, hiểu, hay xử lý cách dễ dàng HTMl5 giữ lại đặc điểm HTML4 bổ sung thêm đặc tả trội XHTML, DOM, đặc biệt JavaScript Là phiên tiếp sau HTML 4.01 XHTML 1.1, HTML5 mộ nỗ lực để tạo nên ngôn ngữ đánh dấu viết cú pháp HTML XHTML Nó bao gồm mô hình xử lý chi tiết để tăng tính tương thích, mở rộng, cải thiện hợp lý hóa đánh dấu có sẵn cho tài liệu, đưa đánh đấu giới thiệu giao diện lập trình ứng dụng (application programming interfaces API) để tạo ứng dụng Web phức tạp HTML5 ứng cử viên tiềm cho tảng ứng dụng di động Nhiều tính HTML5 xây dựng với việc xem xét chúng sử dụng thiết bị di động điện thoại thông minh máy tính bảng hay không http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 Lịch sử hình thành phát triền HTML HTML viết tắt cụm từ HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản), ngôn ngữ sử dụng cho việc thiết kế website Việc hình thành HTML có mối quan hệ mật thiết với phát triển Internet Ngày nay, HTML khuyên dùng xuất chuẩn mới, thực tế phiên cao ngôn ngữ phát triển tất yếu- HTML5 Tim Berners-Lee cha đẻ HTML Năm 1989, ông nghiên cứu ngôn ngữ HTML giao thức truyền đạt thông tin giới khoa học với thành công ngày Tim tạo 20 thẻ HTML, lấy ý tưởng từ ngôn ngữ SGML, điều kì diệu đáng kinh ngạc chỗ 13 số 20 thẻ hiển thị HTML4 a HTML HTML không cho phép truyền đạt cấu trúc trang phức tạp, vừa đủ phép tạo trang web đơn giản Phiên tung vào cuối năm 1990 gần năm sau, ngôn ngữ thực ứng dụng Năm 1993 chuẩn HTML trở thành tảng Mosaic- Trình duyệt Internet b HTML Nhiều công ti lớn đánh giá không sức mạnh ngôn ngữ siêu văn , cuối chuẩn HTML phổ biến rộng rãi Bởi tổ chức đứng hỗ trợ cho phát triển ngôn ngữ HTML , thứ bị ngừng trệ Vào tháng năm 1994, HTML phát hành HTML phiên cải tiến HTML Phiên lần tạo nỗ lực lớn người yêu thích HTML khắp giới Những người đảm nhận nỗ lực khổng lồ ý đến tất đóng góp từ khắp nơi giới cho phiên Trước tình hình này, năm 1994, Tập Đoàn Tài Chính World Wide Web thành lập với người đứng đầu Tim Berners-Lee Năm 1995, thẻ thẻ “bgcolor”(màu nền) hay thẻ “font face”(font chữ?) đưa vào ứng dụng, Chúng đưa ví dụ thẻ nhằm nhấn mạnh trình độ đạt tới chuẩn HTML vào thời điểm tại…chúng ta nói khác biệt phiên phiên năm 1995 lớn c HTML W3C chấp nhận phiên cải tiến HTML với thẻ chức Dave Ragget mua phiên thú vị với nhiều thẻ HTML hấp dẫn phiên cải tiến hay Nhưng làm chậm đường truyền trình duyệt nên phiên bị bỏ Phiên HTML 3.2 phiên mạnh sê-ri trước tung ra, http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 duyệt W3C nhà cung cấp trình duyệt Netscape Microsoft d HTML Người ta dành năm 1997 để phát triển phiên HTML4, bước tiến triển quan trọng phiên cũ HTML4 có công cụ có giá trị mang lại thêm nhiều đất sáng tạo cho dân thiết kế web: CSS Ban đầu CSS không coi quan trọng lắm, đến người ta đánh giá quan trọng không thân HTML Một kiện quan trọng phát triển trình duyệt: Microsoft ứng dụng tất thẻ trình duyệt Internet Explorer người sử dụng yêu thích ,làm lu mờ Netscape Vào tháng năm 1998 HTML4 chứng nhận W3C tương lai trở nên sáng lạn HTML có “đối thủ” gọi XHTML (Extensible HyperText Markup Language, tạm dịch: ngôn ngữ đánh dấu siêu văn mở rộng) từ năm 1998 đến chiến diễn ác liệt e HTML5 Vào tháng năm 2008, W3C tung nháp HTML5 thượng phong nghiêng HTML (so với XHTML) Bản HTML5 có nhiều thẻ có nhiều vấn đề khó để cách chắn việc khác hẳn vào ngày mai Một thực tế chắn là: Bởi phiên lần nghiên cứu tập đoàn chuyên viên thiết kế, nên kết bước nhảy vọt đầy ấn tượng dòng chảy phát triển Web, Internet thiết kế Trong chuẩn thực hoàn chỉnh HTML, nhân tố vô quan trọng đóng góp vào vai trò ảnh hưởng HTML 5, là: CSS3 http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 GIỚI THIỆU CÔNG NGHỆ HTML5 HTML5 ngôn ngữ thiết kế để thiết lập nội dung web Nó nhằm làm cho việc thiết kế phát triển web dễ dàng cách tạo giao diện ngôn ngữ đánh dấu chuẩn hóa trực quan.HTML5 cung cấp phương tiện phân tích phân định trang bạn, cho phép bạn tạo thành phần rời rạc HTML5 gọi "cách tiếp cận lập đồ thông tin để thiết kế trang web" kết hợp yếu tố lập đồ thông tin, phân chia ghi nhãn thông tin giúp dễ dàng sử dụng hiểu thông tin Đây tảng tiện ích ngữ nghĩa thẩm mỹ gây ấn tượng sâu sắc HTML5 HTML5 cung cấp khả xuất tất thứ giới từ nội dung văn từ đơn giản đến đa phương tiện phong phú, tương tác cho nhà thiết kế nhà phát triển trình độ HTML5 cung cấp công cụ quản lý liệu, vẽ, video, âm hiệu Nó tạo điều kiện cho phát triển ứng dụng trình duyệt với cho trang web cho thiết bị di động HTML5 công nghệ thúc đẩy cải tiến dịch vụ điện toán đám mây di động, tính đến tính linh hoạt rộng hơn, cho phép phát triển trang web thú vị có khả tương tác Nó đưa vào thẻ cải tiến mới, bao gồm cấu trúc thu nhỏ, nút điều khiển biểu mẫu, API, đa phương tiện, hỗ trợ sở liệu, tốc độ xử lý nhanh đáng kể Tính HTML5:  Các thẻ mô tả xác chúng thiết kế để chứa đựng  Tăng cường truyề thông mạng  Cải thiện nhiề khả lưu trữ chung  Các trình làm việc Web (Web Workers) để chạy trình  Giao diện WebSocket để thiết lập kết nối liên tục ứng dụng cư trú máy chủ  Lấy liệu lưu trữ tốt  Cải thiện tốc độ nạp lưu trang  Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa HTML5 định hướng nội dung  Cải thiện xử lý biểu mẫu trình duyệt  Một API sở liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách  Canvas video, để thêm đồ họa video mà không cần cài đặt trình cắm thêm bên thứ ba Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả định vị máy điện thoại thông minh để kết hợp dịch vụ ứng dụng đám mây di động  http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5  Các biểu mẫu cải tiến làm giảm nhu cầu phải tải mã JavaScript, cho phép truyền thông hiệu thiết bị di động máy chủ điện toán đám mây CÁC ĐỔI MỚI NỔI BẬT TRONG HTML5 a Cú pháp HTML5 HTML5 sử dụng cú pháp tương thích ngược với HTML4 XHTML1 Tài liệu sử dụng cú pháp HTML5 có định dạng truyền thông text/html Sau tài liệu HTML5 mẫu: Example document Example paragraph - HTML5 yêu cầu phải định nghĩa DOCTYPE để trình dyệt xác định kiểu tài liệu để hiển thị cho b SVG MathML HTML5 cho phép vẽ hình vector SVG (Scalable Vector Graphics) soạn công thức toán học MathML (Mathematical Markup Language) thẻ mã nguồn i SVG (vẽ hình học vector) Để vẽ hình học vector, ta dùng thẻ bao bọc thẻ hình học , , ,… bên VD: Để vẽ vòng tròn với html5 Canvas, chúng sử dụng phương thức arc() xác định góc góc kết thúc * PI context.arc(centerX,centerY,radius,0,2*Math.PI,false); Hình.1 - Hình tròn tạo SVG Danh sách số thẻ hình học thường dùng : http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 Thẻ Công dụng Vẽ hình chữ nhật Vẽ hình tròn Vẽ hình ellipse Vẽ đường thẳng Vẽ đa giác Vẽ chữ ii MathML (soạn thảo công thức toán học) Để soạn thảo công thức toán học, ta dùng thẻ bao bọc thẻ toán học , , ,… bên Ví dụ: Để hiển thị công thức toán học: Ta cần viết đoạn code sau: x = − b ± b2 − 4 ⁢ a ⁢ c 2 ⁢ a Danh sách thẻ toán học thường dùng : Thẻ Tên đầy đủ http://vnaking.com/ Biểu diễn Trang GIỚI THIỆU VỀ HTML5 c mi Math Identifier Toán hạng mo Math Operator Toán tử mn Math Number Số mfrac Math Fraction Phân số mrow Math Row Một hàng phân số msqrt Math Square Root Căn bậc hai Multimedia với video audio Với HTML5 muốn nhúng hát hay đoạn phim vào trang web cần đoạn code ngắn phía client không cần cài thêm plug-in Đây thay đổi có ý nghĩa HTML5, giúp cho việc đưa multimedia lên web trở nên đơn giản thuận tiện hết i Video Để chèn đoạn phim vào trang HTML5, ta dùng thẻ video với cách viết ngắn gọn sau mà không cần plug-in (như: shockwave flash, silverlight,…) Hình - Đoạn phim hiển thị thẻ video (không cần plug-in nào) ii Audio Cũng giống video, thẻ audio cho phép nhúng nhạc vào trang web HTML5 mà phía client không cần cài thêm plug-in Một ví dụ cách dùng thẻ audio: Not supported Hình - Một hát phát thẻ audio http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 Bảng tương thích trình duyệt với định dạng audio: Internet Explorer OGG MP3 WAV Firefox 3.5 Trở lên X Opera 10.5 Trở lên X X X Chrome 3.0 Trở lên X X Safari 3.0 Trở lên X X Sau danh sách thuộc tính thẻ audio (tích hợp html5) : Thuộc tính Giá trị Ý nghĩa Tự động chạy audio sau load trang web xong Hiển thị bảng điều khiển (play/pause, volume, timeline) autoplay autoplay controls controls loop loop Tự động chạy lại từ đầu xem xong preload preload Load audio lúc load trang web (Bị bỏ qua autoplay đặt) src url Đường dẫn đến file audio muốn chạy d Canvas (Vẽ đồ họa) Thẻ canvas định nghĩa vùng chữ nhật mà làm việc pixel Ta vẽ lên canvas đường thẳng, hình chữ nhật, hình tròn, văn bản, cách dễ dàng hàm Javascript Với lợi ta ứng dụng canvas nhiều lĩnh vực như: đồ hoạ, game, trình chiếu, Các trình duyệt Firefox , Safari, Chrome Opera phiên cuối sau đểu hỗ trợ Canvas Để tạo đối tượng canvas mới, ta thêm thẻ canvas xác định thuộc tính id, width, height Thẻ canvas tự vẽ thẻ giống svg mà ta phải dùng đến hàm Javascript Hình - Một hình ảnh đươc vẽ canvas Không ứng dụng đồ hoạ 2D, với hỗ trợ số thư viện WebGL ta vẽ hình ảnh 3D canvas http://vnaking.com/ Trang 10 GIỚI THIỆU VỀ HTML5 Hình - Một game 3D sử dụng canvas chạy web (html5) e Form Trong phiên HTML5, form có nhiều cải tiến cách thức chuyển liệu (hỗ trợ thêm PUT, GET) thêm nhiều điều khiển nhập liệu (datetime, color, number,…) Sau thuộc tính thay đổi so với HTML4 : Thuộc tính Giá trị Mô tả accept MIME_type Bị loại bỏ khỏi HTML5 autocomplete on | off method get | post | put | delete novalidate novalidate Nếu on, trình duyệt lưu giá trị người dùng nhập, hiển thị lại chúng người dùng quay lại trang get: phương thức gửi nội dung form dạng URL: URL?name=value post: phương thức gửi nội dung form bên nội dung request put: Nếu kiểu action http giống post Nếu kiểu action file, tạo file delete: Nếu kiểu action http, bỏ qua giá trị điền form, chuyển đến trang đích Nếu kiểu action file, xoá file định Nếu định không kiểm tra tính đắn liệu nhập form submit i Input Các điểu khiển input HTML5 bổ sung thêm nhiều phong phú, giúp người dùng dễ dàng nhập liệu lập trình viên dễ dàng đảm bảo tính hợp lệ liệu Sau thuộc tính thẻ input: THUỘC TÍNH GIÁ TRỊ MÔ TẢ autocomplete on | off autofocus form autofocus tên form Nếu on, trình duyệt lưu lại giá trị nhập hiển thị lại trang mở lại Điều khiển focus load web xong Xác định nhiều form mà điều khiển thuộc Trang 11 http://vnaking.com/ GIỚI THIỆU VỀ HTML5 height list pixels, % id datalist max number number pattern Javascript Pattern placeholder text required required spellcheck step true | false number tabindex number type color date datetime datetime-local email image month number range search tel time url week pixels, % width http://vnaking.com/ Xác định chiều cao điều khiển Xác định danh sách liệu mà điều khiển xổ xuống người dùng nhập liệu Giá trị lớn mà người dùng nhập vào điều khiển Giá trị lớn nhỏ mà người dùng nhập vào điều khiển Định mẫu mà người dùng phải tuân theo Ví dụ mẫu: “[0-9]”, tức người dùng nhập số từ đến Dòng chữ hiển thị điều khiển người dùng chưa nhập Dùng để hướng dẫn người dùng nhập liệu Người dùng bắt buộc phải nhập liệu vào điều khiển submit Kiểm tra tả người dùng nhập liệu Bước nhảy giá trị Được áp dụng cho điều khiển date, datetime, datetime-local, month, week, time, number, range Thứ tự focus điều khiển người dùng nhấn tab color: Chọn màu date: Chọn ngày, tháng, năm datetime: Chọn ngày, tháng, năm, giờ, múi datetime-local: Chọn ngày, tháng, năm, email: Nhập email image: Chọn ảnh month: Chọn tháng number: Chọn số range: Chọn số khoảng xác định search: Nhập giá trị cần tìm kiếm tel: Nhập số điện thoại time: Chọn url: Nhập đường dẫn week: Chọn tuần Xác định chiều rộng điều khiển Trang 12 GIỚI THIỆU VỀ HTML5 Hình - Một Form điều khiển input HTML5 ii Output Đây điều khiển HTML5 Sau thuộc tính thẻ output: THUỘC TÍNH GIÁ TRỊ for id form formid name name MÔ TẢ Đặc tả nhiều thành phần mà trường ouput liên quan Đặc tả nhiều form mà trường ouput lệ thuộc vào Đặc tả tên đối tượng (dùng form submit) Hình - Form điều khiển output HTML5 http://vnaking.com/ Trang 13 GIỚI THIỆU VỀ HTML5 f Thuộc tính toàn cục Một số thuộc tính toàn cục HTML5 phổ biến contenteditable (xác định nội dung thẻ thay đổi người dùng hay không), draggable (xác định thẻ kéo hay không), spellcheck (xác định có kiểm tra tả người dùng nhập liệu hay không) i ContentEditable ContentEditable thuộc tính toàn cục HTML5 mà thẻ gán thuộc tính người dùng trực tiếp sửa đổi nội dung thẻ Hình 40 - Một chương trình soạn thảo chạy web sử dụng thuộc tính ContentEditable để chỉnh sửa nội dung ii Draggable Với việc hỗ trợ kéo thả, trang web HTML5 trở nên mềm dẻo thân thiện với người dùng hết Để sử dụng khả này, ta cần xác định đối tượng kéo cách gán thuộc tính toàn cục draggable = “true” Để xử lí kiện kéo thả, ta cần đến trợ giúp API xây dựng sẵn HTML Hình 41 - Kéo thả với HTML5 iii SpellCheck SpellCheck thuộc tính toàn cục giúp người dùng nhận lỗi sai tả nhập liệu cách gạch chân đỏ từ sai Thuộc tính thường dùng với thẻ input, textarea thuộc tính gán với thẻ khác, tất thẻ kiểm tra tả Ví dụ thiết lập điều khiển input kiểm tra tả: http://vnaking.com/ Trang 14 GIỚI THIỆU VỀ HTML5 Nhập thử từ “Group I 5”, nhập sai thành “Grop I 5” Trình duyệt gạch đỏ chữ sai “Grop” Hình 42 - Trình duyệt gạch đỏ chữ sai tả g Lưu trữ liệu cục ngoại tuyến Lưu trữ liệu cục ngoại tuyến (Local Offline Storage) tính HTML5 cho phép tài liệu HTML lưu trữ thông tin tạm thời vào biến session, lưu trữ lâu dài vào Local Storage, chí tạo sở liệu cục bộ, tạo bảng truy vấn mà trước với cookie đáp ứng cho nhu cầu lưu trữ liệu nhỏ ( khoảng 4KB) i Kiểm tra tình trạng trực tuyến Hiện số ứng dụng web có xu hướng phục vụ người dùng online hay offline Khi online người dùng thao tác với CSDL máy chủ cách bình thường Khi offline người dùng thao tác được, liệu lưu lại cách cục bộ, đợi người dùng online xác nhận chuyển liệu lên CSDL máy chủ Để làm việc tài liệu HTML cần phải xác định người dùng online hay offline để biết cách xử lí cho Xác định tình trạng trực tuyến HTML5 ta kiểm tra thuộc tính online đối tượng navigator Current network status: var lblStatus = document.getElementById(‘lblStatus’) lblStatus.innerHTML = navigator.onLine ? 'online' : 'offline'; ii Lưu trữ tạm thời với Session Storage Lưu trữ theo phiên (Session Storage) hình thức lưu trữ tạm thời RAM có tác dụng tab Tức giá trị lưu trữ session tồn tab đó, chia sẻ với tab khác kết thúc tab bị đóng Để lưu giá trị vào session ta dùng hàm setItem đối tượng sessionStorage Hàm nhận vào cặp key-value sessionStorage.setItem("key", value); Để lấy giá trị từ session, ta dùng hàm getItem đối tượng sessionStorage Hàm nhận vào key trả lại value http://vnaking.com/ Trang 15 GIỚI THIỆU VỀ HTML5 value = sessionStorage.getItem("key"); iii Lưu trữ lâu dài với Local Storage Lưu trữ cục (Local Storage) hình thức lưu trữ lâu dài ổ cứng chia sẻ công khai Tức giá trị lưu trữ local storage không bị đóng trình duyệt truy xuất tab khác, chí trang HTML khác Để lưu giá trị vào local storage ta dùng hàm setItem đối tượng localStorage Hàm nhận vào cặp key-value localStorage.setItem("key", value); Để lấy giá trị từ local storage, ta dùng hàm getItem đối tượng localStorage Hàm nhận vào key trả lại value value = localStorage.getItem("key"); iv Lưu trữ truy vấn với Web SQL Database Web SQL Database CSDL (database) dựa đặc tả CSDL SQLite xây dựng sẵn HTML5 Lập trình viên viết lệnh tạo CSDL mới, tạo bảng, thêm, sửa xoá liệu, truy vấn mã nguồn tài liệu HTML Giống với Local Storage, CSDL cục bộ, lâu dài, quản lí trình duyệt sử dụng trang HTML Để mở CSDL để làm việc, ta dùng hàm openDatabase Nếu CSDL chưa tồn tại, tạo db = openDatabase(db_name, db_version, db_desc, db_size); Tham số Giá trị Mô tả db_name string Tên CSDL muốn mở tạo db_version string Phiên CSDL db_desc string Mô tả CSDL db_size int Kích cỡ CSDL (byte) Hình 43 - Một ví dụ Web SQL Database viết mã nguồn tài liệu Html5 http://vnaking.com/ Trang 16 GIỚI THIỆU VỀ HTML5 h Thẻ ngữ nghĩa Thẻ ngữ nghĩa (semantic tags) thẻ đặc biệt HTML5, đơn giản giúp cho người đọc công cụ phân tích mã nguồn hiểu nhiệm vụ thành phần tài liệu HTML Nhờ có thẻ ngữ nghĩa mà máy tìm kiếm tương lai dễ dàng phân biệt phần nội dung trang web thành phần không quan trọng khác Hình 44- Cấu trúc ngữ nghĩa tài liệu HTML Danh sách thẻ ngữ nghĩa phổ biến : Thẻ http://vnaking.com/ Mô tả Đại diện cho vùng tài liệu HTML Đại diện cho vùng trang web chứa liên kết tới trang web khác tới phần trang Đại diện cho thành phần độc lập trang web chứa nội dung Đại diện cho vùng mà không liên quan đến nội dung trang web Chứa thông tin giới thiệu phần, trang hay thông tin tiêu đề tài liệu, tiêu đề bảng Đánh dấu phần cuối trang hay section Chỉ thời gian theo hệ 24 hay 12 giờ, dùng định dạng ngày tháng năm Chỉ phần tài liệu đánh dấu, bôi dậm có chủ ý tác giả Trang 17 GIỚI THIỆU VỀ HTML5 CÁC THAY ĐỔI TRONG HTML5 a Các thẻ Thẻ Mô tả Mô tả viết Mô tả thành phần nằm nội dung trang web Định nghĩa điều khiển phát nhạc Định nghĩa vùng xử lí đồ hoạ bitmap Định nghĩa nút lệnh Định nghĩa danh sách thả xuống Định nghĩa thông tin chi tiết cho thẻ Nhúng plugin Định nghĩa tiêu đề cho thẻ figure Tập hợp nhóm media tiêu đề chúng Mô tả phần chân section trang Mô tả phần đầu section trang Mô tả thông tin section Định nghĩa khoá tự sinh form Mô tả đoạn văn đánh dấu Mô tả thông tin hệ đo lường cho giá trị Mô tả vùng chứa link điều khiển Mô tả số kiểu đầu Mô tả trang thái hoàn thành công việc Sử dụng để dòng chữ trình duyệt không hỗ trợ Ruby Định nghĩa mở rộng cho thích ruby Định nghĩa thích ruby Mô tả vùng Định nghĩa tài nguyên media Định nghĩa phần đầu thẻ Định nghĩa ngày/giờ Định nghĩa điều khiển phát phim http://vnaking.com/ Trang 18 GIỚI THIỆU VỀ HTML5 b Các thuộc tính Thuộc tính Thẻ Mô tả Xác định cho phép lệnh Javascript thực thi cách bất đồng hay không Xác định điều khiển có focus load trang web hay không async script autofocus input charset meta Xác định định dạng văn sử dụng contenteditable toàn cục Xác định thẻ chỉnh sửa người dùng hay không contextmenu toàn cục Xác định trình đơn ngữ cảnh cho thẻ data-* toàn cục disable fieldset draggable toàn cục form input, output, select, textarea, button, fieldset Xác định form mà liệu điều khiển gửi submit hidden toàn cục Xác định thẻ có hiển thị hay không manifest html placeholder input, textarea required input, textarea spellcheck toàn cục target base Thuộc tính định nghĩa lập trình viên, bắt đầu với tiền tố dataXác định tất điều khiển fieldset có bị disable hay không Xác định người dùng kéo thẻ không Xác định đường dẫn đến file application cache manifest để kết nối với API cho ứng dụng Web ngoại tuyến Xác định nội dung gợi ý cho người dùng nhập liệu Xác định điều khiển có bắt buộc người dùng phải nhập liệu hay không Xác định thẻ có kiểm tra tả nhập liệu hay không Xác định cửa sổ, iframe redirect c Các thẻ thay đổi Thẻ Mô tả Thẻ không đặt thuộc tính href trở thành liên kết giữ chỗ Biểu diễn đoạn ngắt theo cấp đoạn văn Được định nghĩa lại để sử dụng cho công cụ trình đơn ngữ cảnh Biểu diễn mẩu in nhỏ (dùng cho ghi chú) Biểu diễn tính chất quan trọng hiển thị chữ đậm d Các thuộc tính thay đổi Thuộc tính border http://vnaking.com/ Thẻ img Mô tả Yêu cầu phải có giá trị thuộc tính đặt Trang 19 GIỚI THIỆU VỀ HTML5 language name Yêu cầu phải có giá trị “javascript” đặt Lập trình viên dùng thuộc tính id để thay script a e Các thẻ bị loại bỏ Thẻ Mô tả Có thể thay thẻ abbr Có thể thay thẻ object Có thể thay cách dùng CSS Có thể thay cách dùng CSS Có thể thay cách dùng CSS Có thể thay thẻ ul Có thể thay cách dùng CSS Không mang lại hiệu thuận tiện cho người dùng Không mang lại hiệu thuận tiện cho người dùng Không mang lại hiệu thuận tiện cho người dùng Có thể thay cách dùng CSS Có thể thay cách dùng CSS Có thể thay cách dùng CSS Có thể thay cách dùng CSS f Các thuộc tính bị loại bỏ Thuộc tính Thẻ Mô tả axis td, th Ảnh hưởng đến khả tương thích abbr td, th Ảnh hưởng đến khả tương thích background body Có thể thay cách dùng CSS border table, object Có thể thay cách dùng CSS charset link, a Ảnh hưởng đến khả tương thích clear br Có thể thay cách dùng CSS coords toàn cục Ảnh hưởng đến khả tương thích frame table Có thể thay cách dùng CSS frameborder iframe Có thể thay cách dùng CSS longdesc img, iframe Ảnh hưởng đến khả tương thích nohref area Ảnh hưởng đến khả tương thích http://vnaking.com/ Trang 20 GIỚI THIỆU VỀ HTML5 III profile html Ảnh hưởng đến khả tương thích rules table Có thể thay cách dùng CSS scheme meta Ảnh hưởng đến khả tương thích scope td Ảnh hưởng đến khả tương thích scrolling iframe Có thể thay cách dùng CSS valuetype param Ảnh hưởng đến khả tương thích version html Ảnh hưởng đến khả tương thích LỜI KẾT Bài viết đề cập tới lợi ích chính, phân tích kiện để chứng tỏ HTML5 ngày phát triển chuẩn Web tương lai Với HTML5, người dùng Web có trải nghiệm hoàn toàn mới, thoải mái xem Video, chơi games trình duyệt với thiết bị mà không cần quan tâm đến thành phần bổ sung cần phải cài thêm Với thiết bị di động Smartphone, Tablet, người dùng không lo lắng hiệu thời lượng sử dụng PIN Vì HTML5 tối ưu hóa cho lo ngại Tài liệu tham khảo: • http://vi.wikipedia.org/wiki/HTML5 • http://www.w3schools.com/html5 • http://html5demos.com/ http://vnaking.com/ Trang 21 [...]...GIỚI THIỆU VỀ HTML5 Hình 5 - Một game 3D sử dụng canvas chạy trên nền web (html5) e Form Trong phiên bản HTML5, form đã có nhiều cải tiến về cách thức chuyển dữ liệu (hỗ trợ thêm PUT, GET) cũng như thêm rất nhiều các điều khiển nhập liệu mới (datetime, color, number,…) Sau đây là những thuộc tính thay đổi so với HTML4 : Thuộc tính Giá trị Mô tả accept MIME_type Bị loại bỏ khỏi HTML5 autocomplete... muốn mở hoặc tạo db_version string Phiên bản của CSDL db_desc string Mô tả về CSDL db_size int Kích cỡ của CSDL (byte) Hình 43 - Một ví dụ về Web SQL Database được viết ngay trên mã nguồn tài liệu Html5 http://vnaking.com/ Trang 16 GIỚI THIỆU VỀ HTML5 h Thẻ ngữ nghĩa Thẻ ngữ nghĩa (semantic tags) là những thẻ mới đặc biệt trong HTML5, nó chỉ đơn giản giúp cho người đọc hoặc các công cụ phân tích mã nguồn... một trang web Chứa thông tin giới thiệu một phần, một trang hay bất cứ thông tin gì của tiêu đề tài liệu, tiêu đề bảng Đánh dấu phần cuối của một trang hay của một section Chỉ ra thời gian theo hệ 24 giờ hay 12 giờ, dùng định dạng ngày tháng năm nào Chỉ ra một phần của tài liệu đã được đánh dấu, bôi dậm có chủ ý của tác giả Trang 17 GIỚI THIỆU VỀ HTML5 5 CÁC THAY ĐỔI TRONG HTML5 a Các thẻ mới Thẻ Mô... Nhập giá trị cần tìm kiếm tel: Nhập số điện thoại time: Chọn giờ url: Nhập đường dẫn week: Chọn tuần Xác định chiều rộng của điều khiển Trang 12 GIỚI THIỆU VỀ HTML5 Hình 6 - Một Form và các điều khiển input mới của HTML5 ii Output Đây là một điều khiển mới trong HTML5 Sau đây là các thuộc tính mới của thẻ output: THUỘC TÍNH GIÁ TRỊ for id form formid name name MÔ TẢ Đặc tả một hoặc nhiều thành phần hơn... một hoặc nhiều form mà trường ouput lệ thuộc vào Đặc tả tên đối tượng (dùng khi form được submit) Hình 8 - Form và các điều khiển output mới của HTML5 http://vnaking.com/ Trang 13 GIỚI THIỆU VỀ HTML5 f Thuộc tính toàn cục Một số thuộc tính toàn cục mới trong HTML5 phổ biến như contenteditable (xác định nội dung thẻ đó có thể được thay đổi bởi người dùng hay không), draggable (xác định thẻ đó có thể kéo... on, trình duyệt sẽ lưu lại giá trị được nhập và hiển thị lại nếu trang được mở lại Điều khiển sẽ được focus khi load web xong Xác định một hoặc nhiều form mà điều khiển này thuộc về Trang 11 http://vnaking.com/ GIỚI THIỆU VỀ HTML5 height list pixels, % id của một datalist max number min number pattern Javascript Pattern placeholder text required required spellcheck step true | false number tabindex number... Trang 14 GIỚI THIỆU VỀ HTML5 Nhập thử từ “Group I 5”, nhưng nhập sai thành “Grop I 5” Trình duyệt sẽ gạch đỏ dưới chữ sai “Grop” Hình 42 - Trình duyệt gạch đỏ dưới chữ sai chính tả g Lưu trữ dữ liệu cục bộ ngoại tuyến Lưu trữ dữ liệu cục bộ ngoại tuyến (Local Offline Storage) là một tính năng mới của HTML5 cho... cặp key-value sessionStorage.setItem("key", value); Để lấy một giá trị từ session, ta dùng hàm getItem của đối tượng sessionStorage Hàm nhận vào key và trả lại value http://vnaking.com/ Trang 15 GIỚI THIỆU VỀ HTML5 value = sessionStorage.getItem("key"); iii Lưu trữ lâu dài với Local Storage Lưu trữ cục bộ (Local Storage) là một hình thức lưu trữ lâu dài trên ổ cứng và được chia sẻ công khai Tức là giá... vùng Định nghĩa một tài nguyên media Định nghĩa phần đầu của thẻ Định nghĩa một ngày/giờ Định nghĩa điều khiển phát phim http://vnaking.com/ Trang 18 GIỚI THIỆU VỀ HTML5 b Các thuộc tính mới Thuộc tính Thẻ Mô tả Xác định cho phép lệnh Javascript được thực thi một cách bất đồng bộ hay không Xác định điều khiển có được focus khi load trang web hay không async... diễn tính chất quan trọng hơn là chỉ hiển thị chữ đậm d Các thuộc tính được thay đổi Thuộc tính border http://vnaking.com/ Thẻ img Mô tả Yêu cầu phải có giá trị 0 khi thuộc tính được đặt Trang 19 GIỚI THIỆU VỀ HTML5 language name Yêu cầu phải có giá trị “javascript” nếu được đặt Lập trình viên có thể dùng thuộc tính id để thay thế script a e Các thẻ bị loại bỏ Thẻ Mô tả Có thể được thay thế ... đóng góp vào vai trò ảnh hưởng HTML 5, là: CSS3 http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 GIỚI THIỆU CÔNG NGHỆ HTML5 HTML5 ngôn ngữ thiết kế để thiết lập nội dung web Nó nhằm làm cho việc thiết... 21 http://vnaking.com/ Trang GIỚI THIỆU VỀ HTML5 Mở đầu I Mục tiêu đề tài Giới thiệu lịch sử hình thành ngôn ngữ HTML nói chung công nghệ áp dụng HTML5 nói riêng Phương pháp nghiên cứu... HTML d HTML e HTML5 GIỚI THIỆU CÔNG NGHỆ HTML5 CÁC ĐỔI MỚI NỔI BẬT TRONG HTML5 A B C D E F G H CÚ PHÁP HTML5 SVG VÀ MATHML