Phần :Nội dung website
Phần :Nội dung website
Nội dung sidebar Link 1 Link 2 Link 3 Chân trang website Mã CSS : main{ display:table; width:95%; } main{ width:70%; display:table-cell; background:#b6ff00; } aside{ width:30%; display:table-cell; background:#00ffff; } Chạy ứng dụng kết hình sau : - Ta thấy mã html5 định dạng layout đơn giản, ta thêm class thẻ chứa nội dung - Ở ta dùng thuộc tính display:table để định dạng Layout Cũng thuộc tính display:inlineblock chưa trình duyệt cũ hỗ trợ - Để nhiều trình duyệt hỗ trợ ta dùng thuộc tính float:left để định dạng layout - Với CSS3 ta có kỹ thuật làm layout động , mềm dẻo dùng thuộc tính display:box - Các bạn xem tài liệu CSS3 để hiểu hết tất kỹ thuật làm layout CSS - Chú ý thẻ main chưa trình duyệt IE (Internet Explorer) hỗ trợ Do nên thay chúng thẻ article thẻ article ta thay thẻ section sau : Tiêu đề wesite Trang Chủ Giới Thiệu Liên HệPhần :Nội dung website
Phần :Nội dung website
Nội dung sidebar Link 1 Link 2 Link 3 Chân trang website - Thông qua việc định nghĩa layout bạn thấy tài liệu HTML5 định nghĩa tag có ý nghĩa cụ thể , dễ đọc code.Không phải thuộc tính chung chung trước ! (2) Các thẻ định nghĩa nội dung cụ thể, control html - Ngoài tag gom nhóm có ý nghĩa mô tả nội dung bên , HTML5 hỗ trợ tag định nghĩa nội dung cụ thể , hay control để tăng tính tương tác trực quan html - Chúng ví dụ mẫu vài thẻ (1) Thẻ details : - Tag details dùng tạo Control gồm phần tiêu đề nội dung.Mặc định phần nội dung bị ẩn Khi click vào tiêu đề nội dung chi tiết - Tag summary tag details để mô tả tiêu đề cho tag details Ví dụ : Xem Chi TiếtNội dung xem chi tiết
Thẻ detail hỗ trợ Chrome, Opera,Safari
Chạy ví dụ kết hình sau : - Khi Click vào biểu tượng tiêu đề hiển thị nội dung chi tiết sau : (2) Thẻ datalist - Thẻ datalist tương tự thẻ select , dùng hiển thị danh sách nhập liệu (ComboBox) - Thẻ datalist thường dùng form nhập liệu (input form) HTML : Chọn trình duyệt: Chạy ví dụ kết hình sau : - Click vào ô nhập liệu hiển thị danh sách hình sau : (3) Thẻ dialog -Thẻ dialog cho phép đánh dấu đàm thoại nhiều người mạng Trong xác định người nói chứa nội dung đàm thoại HTML : Bạn A: Xin chào bạn.Tôi A Bạn B Xin chào bạn.Tôi B - Chạy ví dụ kết hình sau : (4) Thẻ embed - Thẻ embed dùng để nhúng plugin cho ứng dụng web Giải sử với thẻ embed chèn flash , silverlight vào trang web ví dụ sau : scr định khai báo tới file flash (5) Danh sách thẻ HTML5 định nghĩa nội dung - Ngoài thẻ hay dùng ví dụ , HTML5 cung cấp nhiều thẻ Các bạn tham khảo bảng Tag Mô tả Xác định thêm chi tiết điều khiển ẩn hiển thị theo yêu cầu Xác định tiêu đề cho thành phần details, sử dụng để mô tả chi tiết tài liệu, phận tài liệu.Tag summary với tag details Định nghĩa danh sách tùy chọn, sử dụng thành phần với thành phần input Định nghĩa dialog box window Xác định text dài tự động xuống hàng (không tràn layout) Xác định nội dung nhúng plugin.Thường dùng để chèn flash , silverlight … Xác định thích cho tag figure Xác định nội dung liên quan mạch lạc với nhau, hình ảnh, sơ đồ, code, Xác định cặp trường khóa sử dụng cho form Xác định văn đánh dấu, sử dụng muốn làm bật văn mình.Như đánh dấu nội dung lặp lặp lại cuấn sách để làm bật chúng : HTML5cung cấp nhiều tính mạnh mẽ HTML5) mở nhiều kỹ thuật lập trình web Định nghĩa phép đo Sử dụng cho phép đo với giá trị tối thiểu tối đa Đại diện cho kết phép tính (giống thực script) Định nghĩa nút lệnh, giống nhưmột button, Radiobutton, hộp kiểm Mô tả tiến trình làm việc 33% Hiển thị nội dung bên trình duyệt không hỗ trợ ruby Định nghĩa lời giải thích cách phát âm ký tự (đối với kiểu chữ Đông Á) Định nghĩa thích ruby (đối với kiểu chữ Đông Á) Chú thích Ruby sử dụng khu vực Đông Á, hiển thị cách phát âm ký tự Đông Á Xác định thời gian, ngày tháng, năm sinh 5:35 P.M on April 23rd (3) Các thẻ đặc biệt khác HTML5 cung cấp số thẻ đặc biệt khác : canvas: Vẽ đối tượng đồ họa pixcel lên website (dùng javascript) svg : Vẽ đối tượng đồ họa vecto lên website (dùng xml) video : trình xem video audio : trình xem nhạc source : Xác định nguồn cho media ( kèm thẻ video , audio) Đây thẻ đặc biệt có ý nghĩa lớn tảng HTML5 , khảo sát chi tiết thẻ phần tới - Click vào button kết hình sau : 6.2 HTML5 Drag Drop (kéo - thả HTML5) - Kéo thả tính thú vị HTML5 - Chúng ta kéo thả đối tượng : hình ảnh , thẻ div vào khung chứa - Để làm điều đối tượng kéo thả cần khai báo thuộc tính draggable true (1) Kéo thả chiều - Ví dụ sau khai báo kéo thẻ div vào thẻ div HTML : Thả vào đâyNhấn kéo thả
- Ta định dạng chút CSS để dễ hình dung sau : #id1 { width:200px; height:200px; background:#cbfafa; border:1pxsolid#aaaaaa;} #id2{ width:100px; height:100px; background:#ff0000; } - Javascript : function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } - Chạy ví dụ kết hình sau : - Ta chọn kéo div (màu đỏ) vào vùng màu xanh kết hình sau: - Ta có kéo đối tượng ( kể ảnh ) (2) Kéo thả chiều - Phần trước ta kéo thả đối tượng vào vị trí , không kéo trả lại vị trí cũ - Ví dụ tạo đối tượng kéo thả đối tượng trở vị trí cũ : HTML : Thả vào đâyNhấn kéo thả
CSS : #id1 { width: 200px; height: 200px; background: #cbfafa; border: 1pxsolid#aaaaaa; } #id2 { width: 100px; height: 100px; background: #ff0000; } #id3 { width: 200px; height: 200px; background: #f5e07c; border: 1pxsolid#aaaaaa; } Javascript function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } - Chạy ví dụ kết hình sau : - Ta kéo thả chuyển đổi vị trí ( đối tượng có đỏ) - Kéo sang vị trí Kéo trở vị trí cũ 6.3 HTML5 Web Storage(lưu trữ liệu Client HTML5) (1) Đối tượng Web Storage HTML5 cung cấp tính lưu trữ liệu client với dung lượng giới hạn lớn nhiều so với cookie Tính gọi Web Storage chia thành hai đối tượng localStorage sessionStorage - Trước sử dụng tính ta có câu lệnh JavaScript để kiếm tra trình duyệt có hô trợ Web Storage hay không sau : if (typeof (Storage) !== "undefined") { // Code for localStorage/sessionStorage } else { // Sorry! No Web Storage support } - Đối tượng localStorage sessionStorage có thành viên mô tả Interface sau: interface Storage { // số lượng cặp key/value có đối tượng readonly attribute unsigned long length; //trả tên key thứ n danh sách DOMString? key(unsigned long index); // trả value gắn với key getter DOMString getItem(DOMString key); // thêm gán cặp key/value vào danh sách setter creator void setItem(DOMString key, DOMString value); // xóa cặp key/value khỏi danh sách deleter void removeItem(DOMString key); // xóa toàn liệu danh sách void clear(); }; - Từ thành viên Interface dễ dàng hình dung tạo quản lý localStorage hay sessionStorage - Việc sử dụng localStorage sessionStorage tương tự , khác thời gian lưu trữ liệu - Dữ liệu lưu localStorage SessionStorage lớn ( từ - 10 MB) tùy trình duyệt - Do dùng localStorage hay SessionStorage giải pháp thay cho cookies (2) Đối tượng localStorage - window.localStorage : Lưu trữ liệu không giới hạn thời gian ( ngày hết hạn ).localStorage truy xuất lẫn cửa sổ trình duyệt - Ví dụ sau tạo localStorage ,sau đọc giá trị localStorage ghi lên hình localStorage.Hello = "hello world"; document.write(localStorage.Hello); Chạy ví dụ kết hình sau : - Ngoài tạo (set) đọc (get) giá trị localStorage theo khóa Key sau: - Ví dụ sau dùng phương thức setItem("key","value") getItem("key") để đặt lấy giá trị cho localStorage, kết đạt ví dụ trước : localStorage.setItem("Hello","Hello world") document.write(localStorage.getItem("Hello")); - Chú ý cặp name/value có kiểu string , bạn cần chuyển đổi sang dạng khác bạn cần ! - Chúng ta xóa localStorage sau : localStorage.removeItem("Hello"); (3) Đối tượng sessionStorage - Đối tượng sessionStorage tương tự đối tượng localStorage , khác biệt chút liệu lưu sessionStorage bị trình duyệt bị đóng ( kết thúc phiên làm việc ) - Ta có ví dụ tương tự phần localStorage lưu câu chào vào sessionStorage sessionStorage.setItem("Hello","Hello world") document.write(sessionStorage.getItem("Hello")); - Chạy ví dụ ta kết tương tự phần localStorage Một điểm khác biệt trang web , ta truy vấn biến localStorage nhiều nơi khác không bị đóng trình duyệt.Tức người dùng tắt trình duyệt , mở trình duyệt nên giá trị localStorage tồn mà không cần khởi tạo - Ngược lại với sessionStorage đóng trình duyệt luông liệu lưu (4) Lưu trữ mảng đối tượng vào web Storage - Chúng ta gán giá trị mảng cho đối tượng localStorage hay sessionStorage ( đối tượng có cặp key , value để string ) - Một giải pháp để lưu mảng vào localStorage hay sessionStorage dùng đối tượng JSON convert mảng sang chuỗi lưu localStorage hay sessionStorage sử dụng việc conver đối tượng string đối tượng mảng - Ví dụ lưu mảng cho đối tượng localStorage ( với đối tượng sessionStorage làm tương tự ) function Product(_id,_name) { this.ID = _id; this.Name = _name; } var Products = [new Product("1", "Product 1"), new Product("2", "Product 2"), new Product("3", "Product 3"), new Product("4", "Product 4") ]; localStorage["Products"] = JSON.stringify(Products); var Productslocal = JSON.parse(localStorage["Products"]); Productslocal.forEach(function (item) { document.write(""+item.ID +"-"+item.Name+"
"); }); - Ví dụ ta tạo lớp Product , mảng danh sách Product - Lưu mảng danh sách Product vào localStorage - Đọc giá trị localStorage hiển thị lên hình - Chạy ví dụ kết hình sau : 6.4 Bộ nhớ Cache cho ứng dụng HTML5 - Bộ nhớ cache HTML5 dùng để lưu trữ ứng dụng web truy cập chúng mà không cần kết nối Internet - Bộ nhớ cache HTML5 có lợi ích sau : +) Người dùng sử dụng ứng dụng oficeline ( không cần kết nối Internet) +) Tốc độ tải tài nguyên nhanh +) Giảm tải cho máy chủ , trình duyệt tải tài nguyên thay đổi yêu cầu máy chủ trả thông tin thay đổi nên giảm nhiều công việc cho máy chủ - HTML5 cung cấp tính để tạo phiên Officeline ứng dụng web cách tạo file manifest cho nhớ cache Ví dụ trình bày trang HTML dùng cache manifest (không có kết nối internet): The content of the document…… Để kích hoạt application cache, chèn thuộc tính manifest vào thẻ : Một trang có thuộc tính manifest lưu lại nhớ cache người dùng truy cập đến Nếu trang web không thiết lập thuộc tính manifest không lưu cache trừ file manifest có dòng lệnh thiết lập thuộc tính cho Phần đuôi mở rộng files manifest là: ".appcache" Lưu ý: Bạn phải cấu hình máy chủ "text/cache-manifest" để chạy file manifest - Chúng ta cần bật tính cache trang web thuộc tính manifest Tất trang khai báo thuộc tính manifest lưu trữ lại người dùng truy cập Tệp manifest - Tệp Manifest tệp tin văn thông báo với trình duyệt lưu không lưu nhớ cache trang web - Tệp gồm phần : +) CACHE MANIFEST : gồm file nguồn javaScript (.js) , CSS ( css) hay file ảnh ( jpg , gif , png …) Khi file Manifest nạp trình duyệt tải lưu file thư mục gốc website.Và kết nối Internet tệp tin sử dụng +) NETWORK : Các tệp tin kết nối tới máy chủ không lưu trữ file: NETWORK: login.asp Một khai báo dấu hoa thị sau để biểu diễn tất tệp tin cần kết nối Internet NETWORK: * FALLBACK : Xác định trang dự phòng thư mục Trong trường hợp kết nối mạng trang dự phòng dùng để hiển thị Cập nhật nhớ Cache - Trình duyệt đọc thông tin từ tệp tin nhớ cache vấn đề sau xảy : +) Người sử dụng xóa nhớ cache trình duyệt +) File manifest bị sửa đổi +) Bộ nhớ Cache cập nhật theo ứng dụng Tức ứng dụng định cập nhật nhớ cache theo thời gian định Chú ý sử dụng nhớ Cache cho ứng dụng bạn - Các thông tin , tệp tin lưu trư nhớ cache nên trình duyệt hiển thị phiên lưu trữ Server có thay đổi thông tin Do người lập trình cần thêm đoạn code thông báo thay đổi nội dung , tệp tin server để người dùng cập nhật hay tự động cập nhật Để đảm bảo trình duyệt cập nhật nhớ cache bạn cần thay đổi file manifest - Các trình duyệt có giới hạn khác cho nhớ Cache Một số trình duyệt giới hạn MB nhớ Cache cho website HTML5 Web Worker - Với mã kịch JavaScript chạy trang web bị khóa lại kịch chạy xong web mở thao tác tiếp - HTML5 web worker đoạn mã javascript chạy chế độ , độc lập với kịch khác mà không ảnh hưởng tới tương tác hiệu suất trang Chúng ta làm việc khác (tương tác ) với website : click , select ,trong mã web worker chạy ngầm - Đối tượng Web Worker tạo thực thi thread độc lập chạy chế độ nên không ảnh hưởng đến giao diện tương tác trang web với người dùng Với đặc điểm này, bạn sử dụng Web Workert công việc đòi hỏi thời gian xử lý lâu nạp liệu, tạo cache,… - Điểm hạn chế Web Worker truy xuất thành phần DOM, đối tượng window, document hay parent Mã lệnh công việc cần thực thi phải cách ly tập tin script - Chúng ta thường áp dùng tính web worker trường hợp cần chạy đoạn Script làm công việc nặng nhọc post liệu lên server xử lý liệu server , cache nội dung Khi đoạn ma javascript âm thầm chạy , người dùng vân tương tác với website cách thông thường - Hay trường hợp bạn xử dụng việc kiếm tra đăng nhập hệ thống Trong trường hợp server tải thường dùng kỹ thuật TimeOut , với web worker bạn âm thâm kiểm tra thông tin đăng nhập người dùng lướt website bạn , âm thầm xác nhận việc đăng nhập, không thành công nên có thông báo cho người dùng Ví dụ - Ví dụ sau tạo đếm số vô hạn Trong đếm số , người dùng tương tác với website.Ta hiểu tương tác tức click , select … nội dung website Tạo file demo_workers.js có code sau : var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()", 500); } timedCount(); - Mã HTML :Đếm số:
Bắt đầu đếm Dừng việc đếm var w; function startWorker() { if (typeof (Worker) !== "undefined") { if (typeof (w) == "undefined") { // khai báo trỏ tới file javascript tạo bước trước w = new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Trình duyệt không hỗ trợ web worker"; } } function stopWorker() { w.terminate(); } Chạy ví dụ kết hình sau : - Nhấn vào bắt đầu đếm , ma javascript bắt đầu chạy ngầm Khi ta tương tác làm việc khác với website Khi muốn dừng nhấn vào button dừng việc đếm Tổng kết HTML5 thay Flash, Silverlight HTML5 - Chúng ta qua tất thành phần HTML5 Và bạn hiểu thứ mà HTML5 làm làm.Và tất nhiên trả lời câu hỏi HTML5 có đáng công nghệ lập trình web thay công nghệ flash , Silverlight hay không ? - Và chừng mực bạn hiểu chất công nghệ HTML5 định hình nên áp dụng vào project phần , không áp dụng phần - Các thẻ , tính đa phương tiện (video , audio), kéo thả tính mà có lẽ nên dung vào website - Phần HTML5 canvas , svg phần mạnh HTML5, điều mà kỳ vọng xây dựng giao diện tương tác web thay cho công nghệ Flash , Silverlight - HTML5 công nghệ web Client , để áp dụng vào thực tế bạn cần kết hợp với công nghệ web server asp.net , php - Nhưng dù hiểu chất công nghệ Client quan Bạn cần hiểu Client hiểu thông tin , hiển thị , xử lý kiểu liệu gì,để từ lập trình nên hệ thống tương tác client - server cách nhịp nhàng , mềm dẻo - Các kiến thức HTML5 tag , HTML5 API , HTML5 Media , HTML5 Web Storage , HTML5 web worker bạn vận dụng từ từ áp dụng lượng thích hợp vào website - Riêng HTML5 canvas (svg) mảng rộng lớn tảng HTML5 Trong tài liệu trình bày dài thể nói hết khía cạnh kỹ thuật.Chúng giới thiệu kỹ thuật xây dựng xử lý giao diện game cờ tướng HTML5 với thẻ canvas.Tuy nhiên để xây dựng game hoàn chỉnh đòi hỏi phải gia công thêm đoạn code Còn phần kỹ thuật thuật toán để game cờ tướng chạy Mời bạn quan tâm tới HTML5 game trở lại đọc tài liệu phát triển game HTML5 - Trong phần xây dựng website thực HTML5 bạn đón đọc tài liệu xây dựng ứng dụng web MVC HTML5 để bạn thực thấy tương tác lập trình Client server có sử dụng kỹ thuật giao diện HTML5 Phụ lục tag HTML5 - Dưới bảng tất thẻ HTML5 , để bạn tìm hiểu HTML5 dễ dàng tra cứu Tag Description Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation Not supported in HTML5 Use instead Defines an acronym Defines contact information for the author/owner of a document Not supported in HTML5 Use instead Defines an embedded applet Defines an area inside an image-map Defines an article Defines content aside from the page content Defines sound content Defines bold text Specifies the base URL/target for all relative URLs in a document Not supported in HTML5 Use CSS instead Specifies a default color, size, and font for all text in a document Isolates a part of text that might be formatted in a different direction from other text outside it Overrides the current text direction Not supported in HTML5 Use CSS instead Defines big text Defines a section that is quoted from another source Defines the document's body Defines a single line break Defines a clickable button Used to draw graphics, on the fly, via scripting (usually JavaScript) Defines a table caption Not supported in HTML5 Use CSS instead Defines centered text Defines the title of a work Defines a piece of computer code Specifies column properties for each column within a element Specifies a group of one or more columns in a table for formatting Specifies a list of pre-defined options for input controls Defines a description/value of a term in a description list Defines text that has been deleted from a document to- instead Defines a directory list Defines a section in a document Defines a description list Defines a term/name in a description list Defines emphasized text Defines a container for an external (non-HTML) application Groups related elements in a form Defines a caption for a element Specifies self-contained content Not supported in HTML5 Use CSS instead Defines font, color, and size for text Defines a footer for a document or section Defines an HTML form for user input Not supported in HTML5 Defines a window (a frame) in a frameset Not supported in HTML5 Defines a set of frames Defines HTML headings Defines information about the document Defines a header for a document or section Defines a thematic change in the content Defines the root of an HTML document Defines a part of text in an alternate voice or mood Defines an inline frame Defines an image Defines an input control Defines a text that has been inserted into a document Defines keyboard input Defines a key-pair generator field (for forms) Defines a label for an element Defines a caption for a element Defines a list item Defines the relationship between a document and an external resource (most used to link to style sheets) Specifies the main content of a document Defines a client-side image-map Defines marked/highlighted text Defines a list/menu of commands
Defines a command/menu item that the user can invoke from a popup menu Defines metadata about an HTML document Defines a scalar measurement within a known range (a gauge) Defines navigation links Not supported in HTML5 Defines an alternate content for users that not support frames Defines an alternate content for users that not support client-side scripts Defines an embedded object Defines an ordered list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines the result of a calculation Defines a paragraph Defines a parameter for an object Defines preformatted text Represents the progress of a task Defines a short quotation Defines what to show in browsers that not support ruby annotations Defines an explanation/pronunciation of characters (for East Asian typography) Defines a ruby annotation (for East Asian typography) Defines text that is no longer correct Defines sample output from a computer program Defines a client-side script Defines a section in a document Defines a drop-down list Defines smaller text Defines multiple media resources for media elements ( and ) Defines a section in a document Not supported in HTML5 Use instead Defines strikethrough text Defines important text Defines style information for a document Defines subscripted text Defines a visible heading for a element Defines superscripted text Defines a table Groups the body content in a table Defines a cell in a table Defines a multiline input control (text area) Groups the footer content in a table Defines a header cell in a table Groups the header content in a table Defines a date/time Defines a title for the document Defines a row in a table Defines text tracks for media elements ( and ) Not supported in HTML5 Use CSS instead Defines teletype text Defines text that should be stylistically different from normal text Defines an unordered list Defines a variable Defines a video or movie Defines a possible line-break ... cho ứng dụng HTML5 62 HTML5 Web Worker 63 Tổng kết HTML5 thay Flash, Silverlight HTML5 65 Phụ lục tag HTML5 65 Giới thiệu giáo trình HTML5 - HTML5 mở cách... lập trình OOP JavaScript hỗ trợ lập trình HTML5 33 (11) Lập trình cờ tướng canvas HTML5 34 4.2 HTML5 SVG 47 HTML đa phương tiện (Media) 48 5.1 Phát Video HTML5. .. 48 (1) Trình xem video mặc định 48 (2) Tùy chỉnh trình mở video 49 5.2 Phát nhạc HTML5 50 HTML5 API 50 6.1 Xác định vùng địa lý với HTML5 Geolocation