Giới thiệu về HTML5 - Nguyễn Văn Toàn

GIỚI THIỆU VỀ HTML5 Tác giả: Nguyễn Văn Toản Website: Linkin: GIỚI THIỆU VỀ HTML5 Trang 2 MỤC LỤC I. Mở đầu .............................................. Error! Bookmark not defined. 1. MụC TIÊU Đề TÀI ............................................................................................. 3 2. PHƯƠNG PHÁP NGHIÊN CứU ............................................................................ 3 II. Nội dung báo cáo ............................................................................ 3 1. TRÍCH YếU ....................................................................................................... 3 2. LịCH Sử HÌNH THÀNH VÀ PHÁT TRIềN HTML .................................................. 4 a. HTML 1 .................................................................................................. 4 b. HTML 2 .................................................................................................. 4 c. HTML 3 .................................................................................................. 4 d. HTML 4 .................................................................................................. 5 e. HTML5 ................................................................................................... 5 3. GIỚI THIỆU CÔNG NGHỆ HTML5 ............................................................. 6 4. CÁC ĐỔI MỚI NỔI BẬT TRONG HTML5 .............................. 7 A. CÚ PHÁP HTML5 ............................................................................................ 7 B. SVG VÀ MATHML ......................................................................................... 7 i. SVG (vẽ các hình học bằng vector) ....................................................... 7 ii. MathML (soạn thảo công thức toán học) ............................................. 8 C. MULTIMEDIA VớI VIDEO VÀ AUDIO ................................................................ 9 i. Video ....................................................................................................... 9 ii. Audio ...................................................................................................... 9 D. CANVAS (Vẽ Đồ HọA) .................................................................................... 10 E. FORM ............................................................................................................ 11 i. Input ..................................................................................................... 11 ii. Output ................................................................................................... 13 F. THUộC TÍNH TOÀN CụC .................................................................................. 14 i. ContentEditable ................................................................................... 14 ii. Draggable ............................................................................................. 14 iii. SpellCheck ............................................................................................ 14 G. 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ữ và truy vấn với Web SQL Database ......................................... 16 H. THẻ NGữ NGHĨA ............................................................................................. 17 5. CÁC THAY ĐỔI TRONG HTML5 ........................................... 18 A. CÁC THẻ MớI .................................................................................................. 18 B. CÁC THUộC TÍNH MớI .................................................................................... 19 C. CÁC THẻ ĐƯợC THAY ĐổI ............................................................................... 19 D. CÁC THUộC TÍNH ĐƯợC THAY ĐổI ................................................................. 19 E. CÁC THẻ Bị LOạI Bỏ ........................................................................................ 20 F. CÁC THUộC TÍNH Bị LOạI Bỏ........................................................................... 20 III. LỜI KẾT ....................................................................................... 21 GIỚI THIỆU VỀ HTML5 Trang 3 I. Mở đầu 1. Mục tiêu đề tài Giới thiệu về lịch sử hình thành của ngôn ngữ HTML nói chung và những công nghệ mới được áp dụng trong HTML5 nói riêng. 2. Phương pháp nghiên cứu Học nhóm, trao đổi kiến thức hiểu biết và kinh nghiệm lập trình HTML của các thành viên trong nhóm. Tổ chức các buổi tranning, sermina để tiếp thu công nghệ HTML mới. Tham khảo tài liệu từ nhiều nguồn đáng tin cậy trên Internet. II. Nội dung báo cáo 1. Trích yếu HTML5 là ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa. Được đề xuất đầu tiên bởi Opera Software. Đây là phiên bản thứ 5 của ngôn ngữ HTML và hiện tại vẫn đang được phát triển bởi World Wide Web Consortium và WHATWG. Mục tiêu cốt lõi là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ được việc con người và các thiết bị, các chương trình máy tính như trình duyệt web, trình đọc màn hình, v.v.. có thể đọc, hiểu, hay xử lý một cách dễ dàng. HTMl5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi trội của XHTML, DOM, đặc biệt là JavaScript. Là phiên bản tiếp sau của HTML 4.01 và XHTML 1.1, HTML5 là mộ nỗ lực để tạo nên một ngôn ngữ đánh dấu có thể được viết bằng cú pháp HTML hoặc XHTML. Nó bao gồm các mô hình xử lý chi tiết để tăng tính tương thích, mở rộng, cải thiện và hợp lý hóa các đánh dấu có sẵn cho tài liệu, đưa ra các đánh đấu mới và giới thiệu giao diện lập trình ứng dụng (application programming interfaces API) để tạo ra các ứng dụng Web phức tạp. HTML5 còn là một ứng cử viên tiềm năng cho nền tảng ứng dụng di động. Nhiều tính năng của HTML5 được xây dựng với việc xem xét chúng có thể sử dụng được trên các thiết bị di động như điện thoại thông minh và máy tính bảng hay không. GIỚI THIỆU VỀ HTML5 Trang 4 2. Lịch sử hình thành và phát triền HTML HTML là viết tắt của cụm từ HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản), và đây là ngôn ngữ chính được sử dụng cho việc thiết kế các website. Việc hình thành HTML có mối quan hệ mật thiết với sự phát triển của Internet. Ngày nay, HTML rất được khuyên dùng bởi sự xuất hiện của một chuẩn mới, thực tế là một phiên bản cao hơn của ngôn ngữ này như là một sự phát triển tất yếu- HTML5. Tim Berners-Lee là cha đẻ của HTML. Năm 1989, ông nghiên cứu ra ngôn ngữ HTML như là một giao thức truyền đạt thông tin giữa giới khoa học với nhau và thành công của nó vẫn còn cho đến ngày nay. Tim đầu tiên tạo ra 20 thẻ trong HTML, lấy ý tưởng từ ngôn ngữ SGML, nhưng điều kì diệu đáng kinh ngạc là ở chỗ 13 trong số 20 thẻ đó vẫn còn được hiển thị trong HTML4. a. HTML 1 HTML 1 không cho phép truyền đạt cấu trúc trang phức tạp, nhưng vừa đủ để cho phép tạo ra một trang web đơn giản. Phiên bản đầu tiên này được tung ra vào cuối năm 1990 và gần như một năm sau, ngôn ngữ này mới thực sự được ứng dụng. Năm 1993 các chuẩn HTML trở thành nền tảng của Mosaic- Trình duyệt đầu tiên của Internet. b. HTML 2 Nhiều công ti lớn đã đánh giá không đúng sức mạnh của ngôn ngữ siêu văn bản , nhưng cuối cùng thì các chuẩn HTML cũng được phổ biến rộng rãi. Bởi vì không có một tổ chức nào đứng ra hỗ trợ cho sự phát triển ngôn ngữ HTML , mọi thứ bị ngừng trệ. Vào tháng 7 năm 1994, HTML 2 được phát hành. HTML 2 là phiên bản cải tiến của HTML. Phiên bản lần này được tạo ra bởi sự nỗ lực rất lớn của những người yêu thích HTML trên khắp thế giới. Những người này đã đảm nhận một nỗ lực khổng lồ khi chú ý đến tất cả đóng góp từ khắp nơi trên thế giới cho phiên bản mới này. Trước tình hình này, cũng trong cùng năm 1994, Tập Đoàn Tài Chính World Wide Web được thành lập với người đứng đầu là Tim Berners-Lee. Năm 1995, thẻ mới là thẻ “bgcolor”(màu nền) hay thẻ “font face”(font chữ?) được đưa vào ứng dụng, Chúng tôi đưa ra những ví dụ về các thẻ này nhằm nhấn mạnh trình độ đã đạt tới của chuẩn HTML vào thời điểm hiện tại…chúng ta có thể nói rằng sự khác biệt giữa phiên bản đầu tiên và phiên bản năm 1995 là rất lớn. c. HTML 3 W3C chấp nhận những phiên bản cải tiến của HTML với các thẻ mới và các chức năng mới. Dave Ragget đã mua về một phiên bản thú vị với rất nhiều thẻ HTML hấp dẫn và phiên bản này đã được cải tiến rất hay. Nhưng vì nó làm chậm đường truyền của các trình duyệt nên phiên bản này đã bị bỏ đi. Phiên bản HTML 3.2 là phiên bản mạnh nhất của sê-ri này và trước khi được tung ra, nó GIỚI THIỆU VỀ HTML5 Trang 5 được duyệt bởi W3C và bởi các nhà cung cấp trình duyệt là Netscape và Microsoft. d. HTML 4 Người ta dành cả năm 1997 để phát triển phiên bản HTML4, một bước tiến triển quan trọng trong những phiên bản cũ. HTML4 có những 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 cũng không được coi là quan trọng lắm, nhưng đến nay người ta đánh giá nó cũng quan trọng không kém gì bản thân HTML. Một sự kiện quan trọng nữa là sự phát triển của các trình duyệt: Microsoft ứng dụng hầu như tất cả các thẻ và trình duyệt Internet Explorer được người sử dụng yêu thích hơn ,làm lu mờ Netscape. Vào tháng 4 năm 1998 HTML4 đã được chứng nhận bởi W3C và tương lai trở nên sáng lạn hơn. HTML có một “đối thủ” gọi là XHTML (Extensible HyperText Markup Language, tạm dịch: ngôn ngữ đánh dấu siêu văn bản mở rộng) từ năm 1998 đến nay cuộc chiến vẫn diễn ra ác liệt. e. HTML5 Vào tháng 1 năm 2008, W3C tung ra bản nháp của HTML5 và thế thượng phong có vẻ nghiêng về HTML (so với XHTML). Bản HTML5 có nhiều thẻ nhưng cũng có nhiều vấn đề và rất khó để quả quyết một cách chắc chắn bởi vì mọi việc còn có thể khác hẳn vào ngày mai. Một thực tế chắc chắn đó là: Bởi vì phiên bản lần này được nghiên cứu bởi các tập đoàn và các chuyên viên thiết kế, nên kết quả chỉ có thể là bước nhảy vọt đầy ấn tượng trong dòng chảy của sự phát triển Web, Internet và thiết kế. Trong chuẩn mới thực sự hoàn chỉnh của HTML, một nhân tố vô cùng quan trọng sẽ đóng góp vào vai trò ảnh hưởng của HTML 5, đó là: CSS3. GIỚI THIỆU VỀ HTML5 Trang 6 3. GIỚI THIỆU CÔNG NGHỆ HTML5 HTML5 là một ngôn ngữ được thiết kế để thiết lập nội dung web. Nó nhằm làm cho việc thiết kế và phát triển web dễ dàng hơn bằng cách tạo một giao diện ngôn ngữ đánh dấu chuẩn hóa và trực quan.HTML5 cung cấp các phương tiện phân tích và phân định các trang của bạn, và nó cho phép bạn tạo các thành phần rời rạc. HTML5 có thể được gọi là "cách tiếp cận lập bản đồ thông tin để thiết kế trang web" do nó kết hợp yếu tố cơ bản về lập bản đồ thông tin, phân chia và ghi nhãn thông tin giúp dễ dàng sử dụng và hiểu thông tin. Đây là nền tảng của tiện ích ngữ nghĩa và thẩm mỹ gây ấn tượng sâu sắc của HTML5. HTML5 cung cấp khả năng xuất bản tất cả mọi thứ trên thế giới từ nội dung văn bản từ đơn giản đến đa phương tiện phong phú, tương tác cho các nhà thiết kế và các nhà phát triển ở mọi trình độ. HTML5 cung cấp các công cụ quản lý dữ liệu, vẽ, video, và âm thanh hiệu quả. Nó tạo điều kiện cho sự phát triển của các ứng dụng giữa các trình duyệt với nhau cho trang web cũng như cho các thiết bị di động. HTML5 là một trong những công nghệ thúc đẩy những cải tiến trong các dịch vụ điện toán đám mây di động, vì nó tính đến tính linh hoạt rộng hơn, cho phép phát triển các trang web thú vị và có khả năng tương tác. Nó cũng đưa vào thẻ và các cải tiến mới, bao gồm cấu trúc thu nhỏ, các nút điều khiển của biểu mẫu, các API, đa phương tiện, hỗ trợ cơ sở dữ liệu, và tốc độ xử lý nhanh hơn đáng kể. Tính năng của HTML5:  Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng.  Tăng cường truyề thông mạng.  Cải thiện rất nhiề khả năng lưu trữ chung.  Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền.  Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú và máy chủ.  Lấy ra dữ liệu đã lưu trữ tốt hơn.  Cải thiện tốc độ nạp và lưu trang.  Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa là HTML5 có thể được định hướng nội dung.  Cải thiện xử lý biểu mẫu trình duyệt.  Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách..  Canvas và video, để thêm đồ họa và video mà không cần cài đặt các trình cắm thêm của bên thứ ba.  Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây di động. GIỚI THIỆU VỀ HTML5 Trang 7  Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán đám mây. 4. 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 và XHTML1. Tài liệu sử dụng cú pháp HTML5 sẽ luôn có định dạng truyền thông là text/html. Sau đây là một 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 có thể xác định được kiểu của tài liệu để hiển thị cho đúng b. SVG và MathML HTML5 cho phép vẽ các hình vector SVG (Scalable Vector Graphics) và soạn các công thức toán học MathML (Mathematical Markup Language) bằng các thẻ ngay trong mã nguồn. i. SVG (vẽ các hình học bằng vector) Để vẽ một hình học vector, ta dùng thẻ bao bọc các thẻ hình học như , , ,… bên trong. VD: Để vẽ một vòng tròn với html5 Canvas, chúng sử dụng phương thức arc() và xác định góc bắt đầu từ 0 và góc kết thúc như 2 * PI. context.arc(centerX,centerY,radius,0,2*Math.PI,false); Hình.1 - Hình tròn tạo bởi SVG Danh sách một số thẻ hình học thường dùng : GIỚI THIỆU VỀ HTML5 Trang 8 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 các thẻ toán học như , , ,… bên trong. 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 các thẻ toán học thường dùng : Thẻ Tên đầy đủ Biểu diễn GIỚI THIỆU VỀ HTML5 Trang 9 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 trong phân số msqrt Math Square Root Căn bậc hai c. Multimedia với video và audio Với HTML5 nếu muốn nhúng một bài hát hay một đoạn phim vào một trang web thì cần một đoạn code ngắn và phía client không cần cài thêm bất kì một plug-in nào cả. Đây là một trong những thay đổi rất có ý nghĩa của HTML5, giúp cho việc đưa multimedia lên web trở nên đơn giản và thuận tiện hơn bao giờ hết. i. Video Để chèn một đoạn phim vào trang HTML5, ta có thể dùng thẻ video với cách viết ngắn gọn như sau mà không cần bất kỳ một plug-in nào (như: shockwave flash, silverlight,…) Hình 2 - Đoạn phim được hiển thị bằng thẻ video (không cần 1 plug-in nào) ii. Audio Cũng giống như video, thẻ audio cho phép nhúng một bản nhạc vào trong trang web HTML5 mà phía client không cần cài thêm bất kì một plug-in nào cả. Một ví dụ về cách dùng thẻ audio: Not supported. Hình 3 - Một bài hát được phát bằng thẻ audio GIỚI THIỆU VỀ HTML5 Trang 10 Bảng tương thích của trình duyệt với các định dạng audio: Internet Explorer Firefox 3.5 Trở lên Opera 10.5 Trở lên Chrome 3.0 Trở lên Safari 3.0 Trở lên OGG X X X MP3 X X WAV X X X Sau đây là danh sách các thuộc tính của thẻ audio (tích hợp trong html5) : Thuộc tính Giá trị Ý nghĩa autoplay autoplay Tự động chạy audio ngay sau khi load trang web xong. controls controls Hiển thị bảng điều khiển (play/pause, volume, timeline). loop loop Tự động chạy lại từ đầu khi xem xong. preload preload Load audio ngay lúc load trang web. (Bị bỏ qua nếu autoplay đã được đặt) src url Đường dẫn đến file audio muốn chạy. d. Canvas (Vẽ đồ họa) Thẻ canvas định nghĩa một vùng chữ nhật mà có thể làm việc được các pixel trên đó. Ta có thể vẽ lên canvas các hình như đường thẳng, hình chữ nhật, hình tròn, văn bản,... một cách dễ dàng bằng các hàm Javascript. Với lợi thế này ta có thể ứng dụng canvas trong rất nhiều lĩnh vực như: đồ hoạ, game, trình chiếu,.. Các trình duyệt như Firefox , Safari, Chrome và Opera các phiên bản cuối sau này đểu hỗ trợ Canvas. Để tạo ra một đối tượng canvas mới, ta thêm thẻ canvas và xác định các thuộc tính id, width, height. Thẻ canvas không thể tự vẽ bằng các thẻ con giống như svg mà ta phải dùng đến các hàm Javascript. Hình 4 - Một hình ảnh đươc vẽ trên canvas Không chỉ ứng dụng trong đồ hoạ 2D, hiện tại với sự hỗ trợ của một số thư viện như WebGL ta có thể vẽ được cả các hình ảnh 3D trên canvas GIỚI THIỆU VỀ HTML5 Trang 11 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 on | off Nếu on, trình duyệt sẽ lưu các giá trị người dùng đã nhập, và sẽ hiển thị lại chúng nếu người dùng quay lại trang đó. method get | post | put | delete get: phương thức này sẽ gửi nội dung form dưới dạng URL: URL?name=value post: phương thức này sẽ gửi nội dung form bên trong nội dung của request. put: Nếu kiểu action là http giống post. Nếu kiểu action là file, tạo ra một file mới. delete: Nếu kiểu action là http, bỏ qua các giá trị điền ở form, và chuyển đến trang đích. Nếu kiểu action là file, xoá file được chỉ định. novalidate novalidate Nếu được chỉ định sẽ không kiểm tra tính đúng đắn của dữ liệu nhập trong form khi submit. i. Input Các điểu khiển input trong HTML5 được bổ sung thêm rất nhiều và phong phú, giúp người dùng có thể dễ dàng nhập liệu và lập trình viên có thể dễ dàng đảm bảo tính hợp lệ của dữ liệu. Sau đây là các thuộc tính mới của thẻ input: THUỘC TÍNH GIÁ TRỊ MÔ TẢ autocomplete on | off Nếu 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. autofocus autofocus Điều khiển sẽ được focus khi load web xong. form tên form Xác định một hoặc nhiều form mà điều khiển này thuộc về. GIỚI THIỆU VỀ HTML5 Trang 12 height pixels, % Xác định chiều cao của điều khiển list id của một datalist Xác định danh sách dữ liệu mà điều khiển này hiện xổ xuống khi người dùng nhập liệu. max number Giá trị lớn nhất mà người dùng có thể nhập vào điều khiển này. min number Giá trị lớn nhỏ mà người dùng có thể nhập vào điều khiển này. pattern Javascript Pattern Định ra mẫu mà người dùng phải tuân theo. Ví dụ mẫu: “[0-9]”, tức là người dùng chỉ được nhập 1 số từ 0 đến 9. placeholder text Dòng chữ hiển thị trên điều khiển khi người dùng chưa nhập gì. Dùng để hướng dẫn người dùng nhập dữ liệu đúng. required required Người dùng bắt buộc phải nhập dữ liệu vào điều khiển này khi submit. spellcheck true | false Kiểm tra chính tả khi người dùng nhập liệu. step number Bước nhảy của mỗi giá