vi
new
+2
Avatar
Nguyễn Thị Hoa @nguyenhoa
1.5K 76 54
Đã đăng vào thg 3 13, 2015 4:08 SA 17 phút đọc
1.0K

HTML5 Overview

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 html>
<html>
    <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à <audio>

    <embed>: Đị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à <audio>

  • Cá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 web

    <bdi>: 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ệu

    <mark>: 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ướng

    : 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ệu

    <time>: Đị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ẻ
  • 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>
        <li><a class="nav-­‐home” href=“#">Home</a></li>
        <li><a class="nav-­‐about" href=“#">About Us</a></li>
<li><a 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">
<p><small>&copy; 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> 
<article>
<header>
<h2>A 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">
    <h2>New Additions</h2>
    <p>SmoothieWorld 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">
<p>Copyright 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>

<label>Username:<input type="text” name="name"></label><br />
<label>Password:<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>

<fieldset>
<legend> Personal Information </legend>
<label>First name:<input type="text” name="firstname"> </label><br />
</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"></label>
<label for="firstname">First name:<input id="firstname" type="text" name="firstname" placeholder="Enter Your First Name" required></label>
<label 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</option>
<option value="Strawberry Smoothie">Strawberry Smoothie</option>
<option 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

<script>
var 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 +
"<br>Longitude: " + 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=14&size=400x300&sensor=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" width="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 controls>
<source 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" width="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);
</script>
var 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, width, height)
  strokeStyle()
  strokeRect(x, y, width, height)
  //x, y: tọa độ vẽ hình; width, 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,swidth,sheight,x,y,width,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

  `Swidth`: 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

  `width, 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

Ruby Ruby on Rails

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí