1. Giới thiệu HTM5
a. HTML5 là gì?
HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu văn bản được thiết kế ra để tạo các trang web với các đoạn thông tin được trình bày trên World Wide Web (www). HTML là một phần không thể thiếu của mạng Internet. HTML5 là phiên bản mới sửa đổi thứ 5 của HTML. Nó được coi là ngôn ngữ chuẩn mới nhất cho HTML, thay cho cả HTML4, XHTML và HTML DOM Level 2; được thiết kế đặc biệt để cung cấp nội dung phong phú mà không cần các plugin bổ sung. Nó cho phép 1 lớp ứng dụng web mới ra đời. Các phiên bản hiện tại hỗ trợ nội dung đa phương tiện và các chức năng offline mà không cần đến những công nghệ bản quyền đi kèm; cung cấp hầu như tất cả mọi thứ từ hình ảnh động, đồ họa, âm nhạc đến phim ảnh, và cũng có thể sử dụng để xây dựng các ứng dụng web phức tạp. Ngoài ra HTML5 cũng hộ trợ tích hợp website và các ứng dụng với PC, Smartphone….
HTML 5 ~= HTML + CSS + JS
** b. Ưu điểm**
- Cải tiến và đơn giản hóa cấu trúc thẻ của HTML truyền thống
- Thống nhất trải nghiệm người dùng internet trên các hệ thống trình duyệt khác nhau (đồng bộ view...)
- Cải thiện hiệu suất hoạt động của trang web
- Bổ sung các tính năng tuyệt vời.
c. Cấu trúc chung của một file HTML5
Giống như các phiên bản trước đó của HTML, cấu trúc chung đơn giản của một tài liệu HTML5:
!DOCTYPE htmlhtml head meta charset=”utf-8” title Title (tiêu đề) /title /head body //Nội dung /body/html
d. Một số điểm mới trong HTML5
- canvas rất mạnh, có thể dùng để vẽ các hình dạng 2D
- video và audio dùng cho việc thực hiện file video và âm thanh.
- Hỗ trợ lưu trữ cục bộ
- Gồm các phần tử cấu trúc : article, footer, header, nav, section,…
- Các phần tử mới của form như date, time, email, url, search, tel,….
- Các thuộc tính phần tử mới của form như datalist, keygen, output.....
e. List các element mới được sử dụng trong HTML5
Phần tử vẽ đồ họa 2D: canvas: Kết hợp với code JavaScript để vẽ đồ họa 2D
Các phần tử Media mới:
audio: Định nghĩa nội dung âm thanh
video: Định nghĩa một video hoặc phim
source: Định nghĩa nhiều nguồn media cho video và audioembed: Định nghĩa một bộ chứa cho một ứng dụng bên ngoài hoặc nội dung tương tác(một plug-in)
track: Xác định các bài hát dưới dạng văn bản cho video và audioCác phần tử mới của Form:
datalist: Xác định một danh sách các tùy chọn được xác định trước cho các input
keygen: Định nghĩa một bộ tạo cặp cho form
output: Định nghĩa kết quả của một phép toán
Các phần tử cấu trúc/ ngữ nghĩa mới:
article: Định nghĩa một bài viết aside: Định nghĩa nội dung bên cạnh nội dung chính của trang webbdi: Dùng để cô lập một phần của văn bản có thể được định dạng theo một hướng khác từ văn bản khác ở bên ngoài nó
command: Định nghĩa một nút lệnh mà người dùng có thể gọi
details: Định nghĩa phần bổ sung thông tin chi tiết và cho phép người dùng có thể xem hoặc ẩn dialog: Định nghĩa một hộp thoại hoặc một cửa sổ summary: Định nghĩa một tiêu đề có thể nhìn thấy cho details figure: Xác định nội dung khép kín : sơ đồ, hình ảnh, các danh sách mã lệnh, … figcaption: Định nghĩa tiêu đề cho figure footer: Định nghĩa phần footer cho tài liệu hoặc một phần tử nào đó trong tài liệu header: Định nghĩa phần header cho tài liệu hoặc một phần nào đó của tài liệumark: Dùng để đánh dấu một đoạn văn bản nào đó của tài liệu
meter: Dùng để tạo thước đo tương đương với các đơn vị đo thực
nav: Dùng để tạo một danh sách các liên kết điều hướngprogress: Dùng để tạo thanh tiến trình
ruby: Định nghĩa một chú thích ruby (đối với kiểu chữ Đông Á)
rt: Dùng để tạo một lời giải thích/phát âm các ký tự (đối với kiểu chữ Đông Á)
rp: Dùng để thể hiện các yếu tố nếu như trình duyệt không hỗ trợ chú thích ruby
section: Định nghĩa một thành phần của tài liệutime: Định nghĩa date/time
wbr: Định nghĩa một điểm ngắt dòng
Những phần tử không còn được dùng trong HTML5:
acronym, applet, basefont, big, center, dir, fornt, frame, frameset, noframes, strike, tt
2. Các phần tử nội dung (cấu trúc/ngữ nghĩa) trong HTML5
Tên của thành phần mới dựa theo tên các thành phần thông dụng được sử dụng trong phần bố cục trang web hiện nay (div id=”footer”, div id=”nav”,…).
Tác dụng của các thành phần mới trong HTML5:
- Giảm bớt sự phụ thuộc vào thẻ div
- Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn
Dưới đây là danh sách các phần tử cấu trúc/ ngữ nghĩa:
- article
- aside
- figcaption
- figure
- header
- nav
- section
Sử dụng các thành phần này sẽ làm tăng đáng kể sự chú ý của bộ máy tìm kiếm của Google.
a. header
- Đại diện cho một nhóm hỗ trợ giới thiệu hoặc định hướng
- Thường chứa title - tiêu đề (h1 - h6), hgroup, bảng chứa nội dung, form tìm kiếm, …
- Trong HTML5 có thể sử dụng phần tử này nhiều lần Ví dụ:
header h1 Demo title /h1 img src="nguồn" //header
b. nav Thường được sử dụng để chứa các thành phần điều hướng cho web
nav ul lia class="nav-‐home” href=“#"Home/a/li lia class="nav-‐about" href=“#"About Us/a/lilia class="nav-‐contact" href=“#"Contact/a/li /ul/nav
c. section
- Biểu diễn một vùng chung của tài liệu hoặc ứng dụng
- Sử dụng section khi muốn phân chia nội dung quan trọng như văn bản và hình ảnh, thành các vùng
section id="introduction-content"psmallcopy; copyright 2014 /small/p/section
d. article
- Là thành phần tự chứa trong một tài liệu, trang, ứng dụng hoặc site
- Có thể lồng article vào trong section
- Là lựa chọn tối ưu để chứa nội dung sẽ được đăng tải trong những ngữ cảnh khác nhau hay thậm chí trên các thiết bị riêng biệt
- article có thể có một header, footer
articleheaderh2A tech blog/h2/header/article
e. aside
- Sử dụng cho vùng sidebar của website
- Sử dụng cho một vùng nội dung liên quan bên trong section
aside id="new-‐content" h2New Additions/h2 pSmoothieWorld features smoothie recipes submiOed by our community of users. /p/aside
f. footer
Không thuộc lớp các phần tử chia đoạn; có thể có nhiều footer trên một trang web
footer id="siteinfo"pCopyright SmoothieWorld 2011 /p/footer
3. Form trong HTML5
- Các thành phần mới của form HTML5 bổ sung thêm chức năng mà ở các phiên bản cũ phải kết hợp với các kỹ thuật khác như JavaScript và Flash
- Cấu trúc mã form:
form id="contactform" action=“” method="post"//code/form
Trong đó:
id: cho phép định kiểu form với CSS
action:
nơi gửi dữ liệu của người dùng để xử lý
thường là URL trỏ tới mã kịch bản được lưu trên máy chủ
method:
xác định phương thức gửi dữ liệu
giá trị POST/ GET
a. label
labelUsername:input type="text” name="name"/labelbr /labelPassword:input type="password”/label
- Là thành phần không bắt buộc
- Tăng khả năng truy cập cho form
b. fieldset
fieldsetlegend Personal Information /legendlabelFirst name:input type="text” name="firstname" /labelbr //fieldset
- nhóm các phần tử form trên trang
- kết hợp với legend để thêm tiêu đề cho form
c. Thêm điều khiển input mới và thuộc tính
label for="email"Email:input id="email” type="email“ name="customeremail"/label
- Cho phép sắp xếp dữ liệu từ các website một cách dễ dàng
- Dữ liệu có thể được gửi tự động tới một cơ sở dữ liệu xác định
label for="website"Website:input id="website" type="url” name="customerwebsite"/labellabel for="firstname"First name:input id="firstname" type="text" name="firstname" placeholder="Enter Your First Name" required/labellabel for="lastname"Last name:input id="lastname" type="text" name="lastname" placeholder="Enter Your Last Name" required/label
- Một số thành phần mới trong input:
input type="range" min=“0" max=“100” value=“0” step="10"input type=“date”input type = “color”d. datalist
- Xác định một danh sách tùy chọn cho input
input list="smoothierecipes"datalist id="smoothierecipes“option value="Mango Smoothie"Mango Smoothie/optionoption value="Strawberry Smoothie"Strawberry Smoothie/optionoption value="Banana Smoothie"Banana Smoothie/option/datalist
4. HTML5 APIs
4.1. HTML5 Geolocation (Định vị người dùng)
HTML 5 Geolocation API được sử dụng để định vị người dùng. Việc này phải được sự đồng ý của người sử dụng.
Sử dụng method getCurrentPosition() để lấy vị trí người dùng.
Ví dụ sau đây sẽ trả về tọa độ (kinh độ + vĩ độ) của user
scriptvar x = document.getElementById("demo");function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);} else {x.innerHTML = "Geolocation is not supported by this browser.";}}function showPosition(position) {x.innerHTML = "Latitude: " + position.coords.latitude +"brLongitude: " + position.coords.longitude;}/script
Hiển thị kết quả trên bản đồ :
function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center= "+latlon+"zoom=14size=400x300sensor=false"; document.getElementById("mapholder").innerHTML = "img src='"+img_url+"'";}4.2. HTML 5 Web Storage
Ở HTML5, trang web có thể lưu dữ liệu ở local bằng trình duyệt web của người dùng. Trước đây việc lưu trữ local là của cookies, nhưng Web Strorage bảo mật và chạy nhanh hơn. Dữ liệu không gửi lên server nên chỉ người dùng mới có thể truy cập được khi sử dụng. HTML5 Web Strorage có thể lưu một lượng dữ liệu lớn mà không làm ảnh hưởng đến hiệu suất của website. Dữ liệu được lưu thành một cặp khóa / giá trị, trang web chỉ có thể truy xuất đến dữ liệu chính nó tạo ra nghĩa là trang nào chỉ thấy dữ liệu trang web đó.
Ví dụ một ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên máy của người dùng. Khi cần tra lại, máy người dùng sẽ không cần kết nối đến server để tải lại những dữ liệu cũ.
Web Storage được hộ trợ trên trình duyệt Internet Explorer 8+, Firefox, Opera, Chrome, Safari.
4.3 HTML Local Storage Objects
Đối tượng localStorage: lưu trữ dữ liệu vô thời hạn. Dữ liệu sẽ không bị xóa khi tắt trình duyệt và luôn luôn có sẵn khi truy xuất.
HTML local storage cung cấp 2 đối tượng để lưu trữ dữ liệu trên máy khách (client):
window.localStorage - lưu trữ dữ liệu vô thời hạn code.sessionStorage - lưu trữ dữ liệu trong 1 session (dữ liệu sẽ mất đi khi close tab)
Trước khi sử dụng local storage, kiểm tra hỗ trợ trình duyệt cho localStorage và sessionStorage:
if(typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage.} else { // Sorry! No Web Storage support..}Đoạn code sau là ví dụ về đếm số lần click chuột vào nút button. Trong đoạn code có phần chuyển chuỗi thành số để cộng dồn vào kết quả.
if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1;} else { localStorage.clickcount = 1;}document.getElementById("result").innerHTML = "You have clicked the button " +localStorage.clickcount + " time(s).";4.4. The sessionStorage Object
sessionStorage Object : lưu trữ dữ liệu cho một seesion, dữ liệu được lưu chỉ trong 1 phiên làm việc và bị xóa đi khi tắt trình duyệt.
Ví dụ sau đếm số lần user click button trong curent session :
if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;} else { sessionStorage.clickcount = 1;}document.getElementById("result").innerHTML = "You have clicked the button " +sessionStorage.clickcount + " time(s) in this session.";4.5. HTML5 Application Cache
Với HTML 5 bạn dễ dàng tạo ra ứng dụng web offline mà không cần đến kết nối internet.
Tiện ích :
Offline browsing : người dùng có thể sử dụng ứng dụng khi đang ngoại tuyến (offline)
Speed : resource được cache nên load nhanh hơn
Giảm tải cho server: trình duyệt chỉ cần tải những cập nhật từ server.
5. Các thành phần video, audio và canvas trong HTML5
a. Thành phần video và audio.
Cách HTML5 chèn video, âm thanh vào trang web :
Cung cấp thành phần HTML video chạy trong trình duyệt
Tích hợp thêm với Javascript
video src="video/BigBuck.ogg" autoplay/video
//‘autoplay’: thuộc tính quy định với trình duyệt đoạn video sẽ được chơi ngay khi trang được load
HTML5 cung cấp thêm các điều khiển cho video:
video src="video/BigBuck.ogg" controls poster="poster854.jpg" awidth="320" height="180" /video
Trong đó:
- Controls: cung cấp trình điều khiển video trên các trình duyệt khác nhau
- Poster: thuộc tính chỉ định cho trình duyệt load hình ảnh ban đầu của video
- Width, height: thuộc tính chỉ định kích thước của video
- Audio: thuộc tính này cho phép tắt tiếng của video ("muted")
- Loop: thuộc tính này sẽ kích hoạt đoạn video phát lại
- Preload: cho phép tải đoạn video ngay khi tải trang web, giảm thời gian tải video
Tương tự, chèn âm thanh vào trang web sử dụng HTML5:
audio controlssource src="video/BigBuck.ogg"source src="video/BigBuck.mp3"/audio
b. Canvas
Canvas là hàm API vẽ 2 chiều của HTML5
Hình vẽ sử dụng Canvas:
Cập nhật được trong thời gian thực
Lưu lại dưới định dạng .png
Sử dụng các thành phần Canvas để xác định bề mặt vẽ, nhưng việc xác định hướng vẽ, dòng kết quả, hình dạng và màu sắc phải nhờ javascript
Canvas luôn làm việc cùng với javascript
Steps:
- Định nghĩa thành phần canvas trong HTML
- Tham chiếu bối cảnh vẽ cho các phần tử đó như một biến trong Javascript
Khởi tạo:
Lệnh canvas:
canvas id="myCanvas" awidth="200" height="100" style="border:1px solid #c3c3c3;“/canvas
Kết hợp vẽ với Javascript:
script type="text/javascript"var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);/scriptvar ctx=c.getContext("2d");
Đối tượng getContext(“2d”) là đối tượng HTML5 chứa các phương thức vẽ đường path, hình hộp, hình tròn, character, hình ảnh, v.v….
ctx.fillStyle="#FF0000“;//định nghĩa kiểu màu tô là màu đỏctx.fillRect(0,0,150,75);//định nghĩa vẽ một hình chữ nhật kích thước 150×75, bắt đầu từ góc trên bên trái (0,0)
Ví dụ:
hình chữ nhật:
fillStyle() fillRect(x,y, awidth, height) strokeStyle() strokeRect(x, y, awidth, height) //x, y: tọa độ vẽ hình; awidth, height: kích thước hình //Hàm javascript function setup() { var canvas = document.getElementById("lessonCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.strokeRect(0.5, 0.5, 100, 100);} } }đường thẳng:
ctx.strokeRect(0, 0, 300, 300); ctx.moveTo(20, 20); ctx.lineTo(100, 100); ctx.lineTo(80, 200); ctx.lineTo(200, 80); ctx.lineTo(200, 200); ctx.lineTo(280, 280); ctx.stroke(); //moveTo(x, y):Tạo ra một đường path phụ với tọa độ xác định //lineTo(x,y):Thêm điểm point mới, kết nối với điểm trước đó bằng đường thẳng
đường tròn:
script type="text/javascript" var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(70,18,15,0,Math.PI*2,true); // Arc(x,y, bán kính, 2 пr) ctx.closePath(); ctx.fill(); /scriptđường cong:
ctx.fillStyle = "rgb(0,173,104)"; ctx.moveTo(145, 150); ctx.quadraticCurveTo(120, 200, 170, 280); ctx.lineTo(190, 280); ctx.quadraticCurveTo(125, 190, 155, 150); ctx.fill(); var pt1 = { x: 155, y: 145 }; var pt2 = { x: 93, y: 106 }; var cp1 = { x: 111, y: 154 }; var cp2 = { x: 4, y: 131 }; //Trong đó: quadraUcCurveTo(cpx, cpy, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)text:
ctx.font = "bold 1.8em sans-serif"; ctx.fillText(text,x,y,maxWidth);
Tô màu
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(20,20,150,100);Phương thức xác định màu sắc và vị trí của đối tượng gradient.
Thường được sử dụng cùng createLinearGradient() và createRadialGradient()
Chèn thêm hình ảnh
context.drawImage(img,sx,sy,sawidth,sheight,x,y,awidth,height); `Img`: Chỉ định thành phần ảnh sử dụng `Sx`: Tùy chọn. Tọa độ X nơi bắt đầu `Sy`: Tùy chọn. Tọa độ Y nơi bắt đầu `Sawidth`: Tùy chọn. Chiều rộng của hình ảnh cắt `Sheight`: Tùy chọn. Chiều cao của hình ảnh căt `X, Y`: Tọa độ x y để đặt hình ảnh `awidth, height`: Tùy chọn. Chiều dài và chiều rộng của hình ảnh sử dụng
Sử dụng biến đổi:
Sử dụng kết hợp với khung hình vẽ sẽ tạo ra hình ảnh đẹp hơn
Có 3 loại biến đổi:
Scaling Rotating Translating
Sử dụng kết hợp với hàm: save, restore
ctx.fillRect(30, 120, 40, 40);ctx.translate(0, 20);ctx.fillRect(80, 120, 40, 40)
Lời kết :
Kiến thức về HTM5 còn rất rộng, trên đây chỉ là điểm qua 1 số đặc điểm và 1 số ví dụ nhỏ về thành phần của HTML5. Nếu quan tâm bạn có thể tham khảo theo các đường link sau :
http://www.w3schools.com/html/html5_intro.asp
http://www.tutorialspoint.com/html5/html5_overview.htm
