WebVN https://webvn.com Cộng đồng web Việt Nam Wed, 15 Feb 2017 11:49:12 +0000 en-US hourly 1 https://webvn.com/wp-content/uploads/2014/10/cropped-1024-32x32.png WebVN https://webvn.com 32 32 Học CSS https://webvn.com/hoc-css/ https://webvn.com/hoc-css/#comments Sat, 10 Oct 2015 23:28:24 +0000 https://webvn.com/?p=2322 CSS là ngôn ngữ được sử dụng để trang trí nội dung cho trang HTML (hoặc XML). Trong phần này, bạn sẽ được học các kiến thức về CSS từ cơ bản đến nâng cao.

The post Học CSS appeared first on WebVN.

]]>
css3-logo

CSS là ngôn ngữ được sử dụng để trang trí nội dung cho trang HTML (hoặc XML).

CSS quy định cách thức hiển thị của các thành phần trên màn hình, trên giấy hoặc các phương tiện truyền thông khác.

Trong phần này, bạn sẽ được học các kiến thức về CSS từ cơ bản đến nâng cao.

Ví dụ trong mỗi bài học CSS

Phần học CSS sẽ bao gồm hàng trăm ví dụ để minh họa cho từng thuộc tính CSS.

Với công cụ chỉnh sửa trực tuyến, bạn có thể dễ dàng chỉnh sửa CSS và nhấn vào nút gửi để xem kết quả.

Demo

Bắt đầu học CSS!

The post Học CSS appeared first on WebVN.

]]>
https://webvn.com/hoc-css/feed/ 1
Quy ước và phong cách viết HTML5 https://webvn.com/quy-uoc-va-phong-cach-viet-html5/ https://webvn.com/quy-uoc-va-phong-cach-viet-html5/#comments Wed, 07 Oct 2015 16:38:25 +0000 https://webvn.com/?p=2271 Hướng dẫn bạn tạo cho mình một phong cách viết mã phù hợp với các chuẩn HTML5. Giúp mã nguồn của bạn gọn gàng, sạch sẽ và đúng định dạng.

The post Quy ước và phong cách viết HTML5 appeared first on WebVN.

]]>
Quy ước cách viết HTML5

Bạn có bao giờ tự hỏi: liệu phong cách viết mã cũng như cú pháp mà mình sử dụng trong HTML đã thực sự theo đúng chuẩn hay chưa?

Từ năm 2000 đến 2010, rất nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML. Tại sao? Vì XHTML giúp các lập trình viên phải viết mã một cách hợp lệ và chính xác.

HTML5 có cách viết tự do hơn nên bạn phải tự xây dựng và rèn cho mình một phong cách viết mã theo đúng chuẩn.

Viết mã một cách thông minh

Một hiệu quả dễ thấy của những lập trình viên thông minh là người khác có thể dễ dàng hiểu và sử dụng (đối với các bộ máy phân tích) mã HTML của họ.

Như tổ chức web thế giới W3C đã định nghĩa một trang web có ý nghĩa là một trang web “Cho phép dữ liệu được chia sẻ và tái sử dụng trên các ứng dụng, các doanh nghiệp và cộng đồng”. Trong tương lai, những bộ máy tìm kiếm và phân tích có thể sẽ muốn đọc trang HTML của bạn. Sử dụng cú pháp gần với chuẩn XHTML sẽ là một lựa chọn thông minh.

Thao khảo: XHTML và HTML

Luôn luôn giữ cho phong cách viết code của bạn thông minh, gọn gàng, sạch sẽ và đúng định dạng.

Sử dụng đúng DOCTYPE

Luôn khai báo doctype ở dòng đầu tiên của trang:

<!DOCTYPE html>

Nếu bạn muốn đồng nhất với các thẻ khác trong trang, bạn có thể sử dụng cách viết thường:

<!doctype html>

Viết thường tên các thẻ

HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thẻ.

Chúng tôi khuyến khích bạn viết thường tên các thẻ, bởi vì:

  • Kết hợp cả viết thường và viết hoa là cách viết rất tệ
  • Viết thường gần nhất với chuẩn XHTML
  • Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
  • Viết thường dễ viết hơn

Cách viết tệ:

<SECTION>
  <p>Đây là nội dung.</p>
</SECTION>

Cách viết rất tệ

<Section>
 <p>Đây là nội dung.</p>
</SECTION>

Cách viết TỐT

<section>
 <p>Đây là nội dung.</p>
</section>

Luôn sử dụng thẻ đóng

Trong HTML5, bạn không cần sử dụng thẻ đóng cho tất cả các thẻ (ví dụ thẻ <p>).

Nhưng, chúng tôi khuyến khích bạn nên sử dụng thẻ đóng:

Cách viết tệ:

<section>
 <p>Đây là nội dung.
 <p>Đây là nội dung.
</section>

Cách viết TỐT:

<section>
 <p>Đây là nội dung.</p>
 <p>Đây là nội dung.</p>
</section>

Đóng thẻ rỗng

Trong HTML5, bạn có thể tùy ý đóng những thẻ rỗng (thẻ rỗng là những thẻ không có thẻ đóng).

Bạn được phép viết:

<meta charset="utf-8">

và cũng được phép viết như thế này:

<meta charset="utf-8" />

Dấu gạch chéo (/) là bắt buộc nếu bạn sử dụng thẻ trong XHTML và XML.

Nếu bạn muốn những phần mềm đọc XML có thể hiểu được trang của bạn, tốt nhất là hãy sử dụng cách đóng thẻ.

Viết thường tên các thuộc tính

HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thuộc tính.

Chúng tôi khuyến khích bạn viết thường tên các thuộc tính, bởi vì:

  • Kết hợp cả viết thường và viết hoa là cách viết rất tệ
  • Viết thường gần nhất với chuẩn XHTML
  • Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
  • Viết thường dễ viết hơn

Cách viết nhìn rất xấu:

<div CLASS="menu">

Nhìn thoáng, gọn gàng:

<div class="menu">

Sử dụng ngoặc cho giá trị thuộc tính

HTML5 cho phép bạn viết giá trị thuộc tính mà không cần dấu ngoặc.

Chúng tôi khuyến khích bạn nên sử dụng dấu ngoặc cho giá trị thuộc tính:

  • Bạn phải sử dụng dấu ngoặc nếu giá trị thuộc tính có chứa dấu cách
  • Lúc dùng ngoặc, lúc không dùng ngoặc không phải là một phong cách tốt
  • Những giá trị trong ngoặc dễ đọc và dễ phân biệt hơn

Trong ví dụ dưới đây, thuộc tính class sẽ không hoạt động như mong muốn do giá trị có chứa dấu cách

<table class=table striped>

Cách viết đúng

<table class="table striped">

Thuộc tính trong thẻ <img>

Luôn sử dụng thuộc tính alt khi bạn chèn ảnh vào website. Điều này rất quan trọng nếu ảnh không thể hiển thị vì một lý do nào đó.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Luôn quy định kích cỡ khi sử dụng ảnh. Nó sẽ không làm website của bạn bị co dãn trong quá trình tải trang do trình duyệt đã dành sẵn không gian cho ảnh trước đó.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Dấu cách và dấu bằng

Bạn có thể sử dụng dấu cách ở 2 đầu dấu bằng:

<link rel = "stylesheet" href = "styles.css">

Nhưng nếu không sử dụng dấu cách sẽ làm cho mã nguồn dễ dọc hơn và các thuộc tính trở nên tách bạch, rõ ràng hơn:

<link rel="stylesheet" href="styles.css">

Tránh code dài trên một dòng

Khi bạn sử dụng một công cụ lập trình HTML, nếu có một dòng code quá dài bạn sẽ phải trượt thanh cuốn sang phải hoặc sang trái để xem hết. Điều này không thuận tiện chút nào.

Hãy cố gắng tránh những dòng code dài hơn 80 ký tự.

Lùi đầu dòng và cách dòng

Không thêm dòng trống vào mã nguồn nếu không cần thiết.

Để dễ đọc, chỉ thêm dòng trống để tách các khối code lớn hoặc phân cách hợp lý giữa các thẻ.

Để dễ đọc, bạn có thể sử dụng 2 dấu cách để lùi đầu dòng.

Đừng thêm dòng trống hoặc dấu cách khi không cần thiết, nhất là khi gặp những dòng code ngắn hoặc những đoạn code liên quan đến nhau.

Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiết:

<body>

  <h1>Những thành phố nổi tiếng</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo 
    và là đô thị đông nhất trên thế giới.
  </p>

</body>

Cách viết tốt hơn:

<body>

<h1>Những thành phố nổi tiếng</h1>

<h2>Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản, trung tâm của vùng thủ đô Tokyo 
 và là đô thị đông nhất trên thế giới.</p>

</body>

Đối với bảng:

<table>
  <tr>
    <th>Tên</th>
    <th>Miêu tả</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Miêu tả về A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Miêu tả về B</td>
  </tr>
</table>

Đối với danh sách

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Thiếu thẻ <html> và <body>?

Trong chuẩn HTML5, bạn có thể không cần dùng thẻ <html> và thẻ <body>.

Đoạn mã nguồn dưới đây hoàn toàn hợp lệ trong HTML5:

<!DOCTYPE html>
<head>
  <title>Tiêu đề trang</title>
</head>

<h1>Đề mục lớn</h1>
<p>Nội dung trang</p>

Chúng không không khuyến khích bạn bỏ thẻ <html> và thẻ <body>.

Thẻ <html> là thẻ gốc của trang, bạn có thể sử dụng để khai báo ngôn ngữ trang đang dùng:

<!DOCTYPE html>
<html lang="vi-VN">

Việc khai báo ngôn ngữ rất quan trọng đối với các bộ máy tìm kiếm và các ứng dụng khi truy cập website của bạn.

Việc bỏ thẻ <html> và <body> có thể thể làm treo DOM và phần mềm XML.

Thiếu thẻ <body> có thể gây ra lỗi trong những trình duyệt cũ (như IE9).

Thiếu thẻ <head>?

Trong chuẩn HTML5, bạn có thể không cần dùng thẻ <head>.

Mặc định, trình duyệt sẽ tự động thêm thẻ <head> trước thẻ <body>.

Bạn có thể bỏ thẻ <head> để giảm sự phức tạp khi viết mã HTML:

<!DOCTYPE html>
<html>
<title>Tiêu để trang</title>

<body>
  <h1>Đề mục lớn</h1>
  <p>Nội dung trang</p>
</body>

</html>

Việc bỏ thẻ dường như không mấy quen thuộc với các lập trình viên. Chúng ta cần thời gian để làm quen với việc này.

Thẻ bổ trợ

<title> là thẻ bắt buộc trong HTML5. Hãy đặt tiêu đề trang ý nghĩa nhất có thể:

<title>Cú pháp và phong cách viết mã HTML5</title>

Để đảm bảo các bộ máy tìm kiếm hiểu trang của bạn một cách chuẩn xác, hãy thiết lập ngôn ngữ và bộ mã hóa ký tự mà trang sử dụng ở ngay những dòng đầu tiên của trang:

<!DOCTYPE html>
<html lang="vi-VN">
<head>
  <meta charset="UTF-8">
  <title>Cú pháp và phong cách viết mã HTML5</title>
</head>

Ghi chú trong HTML

Với những ghi chú ngắn chỉ trên một dòng, bạn chỉ việc sử dụng <!– ở đầu dòng và thẻ –> ở cuối dòng:

<!-- Đây là một ghi chú -->

Với những ghi chú dài, được viết trên nhiều dòng, bạn phải đặt cặp thẻ <!– và –> riêng trên 1 dòng:

<!--
  Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài.
  Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài.
-->

Những ghi chú dài sẽ dễ nhìn hơn nếu bạn thụt lùi đầu dòng bằng 2 dấu cách.

CSS

Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin CSS (không cần thiết phải sử dụng thuộc tính type):

<link rel="stylesheet" href="styles.css">

Trong CSS, những đoạn ngắn có thể gộp thành một dòng như thế này:

p.into {font-family: Verdana; font-size: 16em;}

Những đoạn dài nên được viết thành nhiều dòng:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

  • Đặt dấu mở ngoặc trên cùng dòng với thẻ cần trang trí.
  • Sử dụng một dấu cách trước dấu ngoặc mở.
  • Sử dụng 2 dấu cách để lùi đầu dòng các thuộc tính bên trong.
  • Sử dụng dấu 2 chấm và một dấu cách để tách biệt phần thuộc tính và giá trị.
  • Sử dụng dấu cách sau dấu phẩy hoặc dấu chấm phẩy.
  • Sử dụng dấu chấm phẩy sau mỗi cặp “thuộc tính/giá trị”.
  • Chỉ sử dụng dấu ngoặc cho giá trị nếu trong giá trị có chứa dấu cách.
  • Đặt dấu ngoặc đóng ngoặc ở một dòng riêng biệt, phía trước không có dấu cách.
  • Tránh sử dụng 80 ký tự trên cùng một dòng.
Đặt dấu cách sau dấu phẩy hoặc dấu chấm phẩy là luật chung cho tất cả các loại văn bản.

JavaScript

Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin JavaScript (không cần thiết phải sử dụng thuộc tính type):

<script src="myscript.js">

Truy cập vào các thành phần HTML bằng JavaScript

Hậu quả của việc sử dụng những kiểu HTML “bừa bãi” có thể dẫn đến các lỗi khi sử dụng JavaScript.

Ở ví dụ dưới đây cho thấy, cách đặt tên khác nhau sẽ có cách truy cập khác nhau trong JavaScript:

Demo

Viết thường tên các tệp tin

Hầu hết các máy chủ web (Apache, Unix) phân biệt viết hoa, viết thường khi truy cập tên tệp tin:

Một ảnh là london.jpg không thể truy cập được với tên là London.jpg.

Những máy chủ web khác (Microsoft, IIS) không phân biệt viết hoa, viết thường:

london.jpg có thể truy cập bằng tên London.jpg hoặc london.jpg.

Nếu bạn chuyển website từ một máy chủ không phân biệt viết hoa-viết thường sang một máy chủ phân biệt viết hoa-viết thường, có thể dẫn tới một vài lỗi nhỏ khiến cho website của bạn bị hỏng.

Để tránh dẫn tới những lỗi này, hãy luôn sử dụng viết thường cho tên tệp tin (nếu có thể).

Phần mở rộng của tệp tin

Các tệp tin HTML nên có phần mở rộng là .html (hoặc .htm).

Các tệp tin CSS nên có phần mở rộng là .css

Các tệp tin JavaScript nên có phần mở rộng là .js

Sự khác biệt giữa .htm và .html

Không có sự khác biệt nào giữa hai phần mở rộng .htm và .html. Trình duyệt và máy chủ sẽ làm việc với cả 2 phần mở rộng như là một trang HTML.

.htm là do “di truyền” từ hệ điều hành DOS đời đầu, khi mà phần mở rộng bị giới hạn là 3 ký tự.

.html là do “di truyền” của hệ điều hành Unix không bị giới hạn 3 ký tự.

Khác biệt về mặt kỹ thuật

Khi bạn truy cập vào một địa chỉ mà không có tên tệp tin (ví dụ https://webvn.com/), website sẽ tự động hiển thị tệp tin mặc định. Tệp tin mặc định phổ biến là index.html, index.htm, default.html và default.htm.

Nếu website của bạn đã được cấu hình tên tệp tin mặc định là “index.html”, bạn phải đặt tên tệp tin là “index.html”, không được đặt là “index.htm.”

Tuy nhiên, thông thường các website sẽ được cấu hình nhiều tệp tin mặc định thay vì một, thậm chí bạn có thể tự cấu hình bao nhiêu tệp tin mặc định mình muốn.

Dù vậy, phần mở rộng đầy đủ của một tệp tin HTML là .html và không có lý do gì để bạn không sử dụng phần mở rộng này.

The post Quy ước và phong cách viết HTML5 appeared first on WebVN.

]]>
https://webvn.com/quy-uoc-va-phong-cach-viet-html5/feed/ 1
Chuyển từ HTML4 sang HTML5 https://webvn.com/chuyen-tu-html4-sang-html5/ https://webvn.com/chuyen-tu-html4-sang-html5/#respond Sat, 03 Oct 2015 07:36:18 +0000 https://webvn.com/?p=2202 Ví dụ và cách chuyển một trang web được viết bằng HTML4 sang HTML5.

The post Chuyển từ HTML4 sang HTML5 appeared first on WebVN.

]]>
Trong bài này, chúng ta sẽ nói về cách để chuyển một trang đang được viết theo HTML4 sang HTML5 mà không làm hỏng cấu trúc cũng như nội dung ban đầu.

Bạn cũng có thể chuyển từ XHTML sang HTML5 với cách thức tương tự.
Cách viết trong HTML4Chuyển sang HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><section>
<div id="post"><article>
<div id="footer"><footer>

Trang được viết theo HTML4

Demo

Chuyển Doctype sang HTML5

Chuyển doctype từ HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

sang doctype của HTML5

<!DOCTYPE html>

Chuyển bảng mã ký tự sang HTML5

Chuyển thông tin bảng mã ký tự từ HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

sang HTML5:

<meta charset="utf-8">

Thêm Shiv

Các thẻ có ý nghĩa trong HTML5 được hầu hết các trình duyệt hiện đại hỗ trợ.

Thêm vào đó, bạn có thể “dạy” cho những trình duyệt cũ cách để xử lý “những thẻ mới”.

Thêm tệp tin javascript Shiv để Internet Explorer các thẻ HTML5:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Bạn có thể tìm hiểu thêm về Shiv qua bài Trình duyệt hỗ trợ HTML5

Thêm CSS cho các thẻ HTML5

Đây là CSS hiện tại trong HTML4:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Chúng ta sẽ tạo thêm CSS cho các thẻ HTML dựa trên CSS cũ:

header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Chuyển header, footer sang HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”header”id=”footer”:

<div id="header">
<h1>Cộng đồng Web Việt</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2015 WebVN. Toàn quyền sở hữu.</p>
</div>

sang sử dụng thẻ <header>, <footer> của HTML5:

<header>
<h1>Cộng đồng Web Việt</h1>
</header>
.
.
.
<footer>
<p>&copy; 2015 WebVN. Toàn quyền sở hữu.</p>
</footer>

Chuyển sang thẻ <nav> trong HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”menu”:

<div id="menu">
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
</div>

sang thẻ <nav> trong HTML5:

<nav>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
</nav>

Chuyển sang thẻ <section> trong HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”content”:

<div id="content">
.
.
.
</div>

sang thẻ <section> trong HTML5:

<section>
.
.
.
</section>

Chuyển sang thẻ <article> trong HTML5

Chúng ta sẽ chuyển thẻ <div> có id=”post”:

<div id="post">
<h2>Tin mới</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
</div>

sang thẻ <article> trong HTML5:

<article>
<h2>Tin mới</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
lurum hurum turum.</p>
</article>

Tới đây, chúng ta có thể tiến hành bỏ CSS cũ

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Trang đã được chuyển sang HTML5

Cuối cùng, bạn có thể bỏ thẻ <head>. Thẻ này không cần thiết trong HTML5:

Demo

Sự khác biệt giữa <article> <section> và <div>

Có một sự khác biệt hơi khó thấy trong chuẩn HTML5 giữa các thẻ <article> <section> và <div>.

Trong chuẩn HTML5, thẻ <section> được định nghĩa như là một khối gồm các nội dung liên quan.

Thẻ <article> được định nghĩa như là một thẻ bao gồm nội dung hoàn chỉnh, một khối khép kín.

Thẻ <div> được định nghĩa như là một khối bao gồm các thẻ con bên trong.

Vậy chúng ta phải hiểu thế nào đây?

Rất đơn giản, tùy thuộc vào nội dung bạn muốn thể hiện, bạn hãy linh hoạt sử dụng các thẻ.

Trong ví dụ bên trên chúng ta đã sử dụng thẻ <section> bao ngoài thẻ <article>.

Nhưng chúng ta cũng có thể sử dụng thẻ <article> với mục đích tương tự.

Dưới đây là một vài ví dụ bạn có thể linh hoạt sử dụng các thẻ:

Thẻ <article> trong thẻ <article>:

Demo

Thẻ <div> trong thẻ <article>:

Demo

Thẻ <div> trong thẻ <section> trong thẻ <article>:

Demo

The post Chuyển từ HTML4 sang HTML5 appeared first on WebVN.

]]>
https://webvn.com/chuyen-tu-html4-sang-html5/feed/ 0
Các thẻ có ý nghĩa trong HTML5 https://webvn.com/cac-the-co-y-nghia-trong-html5/ https://webvn.com/cac-the-co-y-nghia-trong-html5/#respond Sat, 03 Oct 2015 07:35:48 +0000 https://webvn.com/?p=2200 Thẻ có ý nghĩa (Semantic Elements) là gì? Ví dụ và cách sử dụng các thẻ: section, article, header, footer, nav, aside, figure, figcaption.

The post Các thẻ có ý nghĩa trong HTML5 appeared first on WebVN.

]]>
Thẻ có ý nghĩa (Semantic Elements) giúp bạn thiết kế cấu trúc giao diện của website rõ ràng, mạch lạc hơn.

Thẻ có ý nghĩa là gì?

Thẻ có ý nghĩa là những thẻ miêu tả rõ ràng mục đích sử dụng cả đối với trình duyệt lẫn lập trình viên.

Ví dụ về thẻ không có ý nghĩa: <div> và <span> – Không miêu tả rõ ràng nội dung trong thẻ.

Ví dụ về thẻ có ý nghĩa: <form>, <table> và <img> – Miêu tả rõ ràng nội dung bên trong thẻ.

Trình duyệt hỗ trợ

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
Thẻ có ý nghĩa

Các thẻ có ý nghĩa trong HTML5 được hầu hết các trình duyệt hiện đại hỗ trợ.

Thêm vào đó, bạn có thể “dạy” cho những trình duyệt cũ cách để xử lý “những thẻ mới”.

Bạn có thể tìm hiểu thêm Trình duyệt hỗ trợ HTML5.

Thẻ có nghĩa mới trong HTML5

Rất nhiều website hiện tại đang thiết kế dựa trên những mã HTML như: <div class=”header”> <div id=”footer”> để định nghĩa khu vực đầu trang, chân trang.

HTML5 đã tạo ra những thẻ có ý nghĩa mới để quy định từng phần khác nhau trong trang web:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Vị trí các thẻ trong trang HTML5

Thẻ <section> trong HTML5

Thẻ <section> được sử dụng để tạo thành một khu vực bao gồm những nội dung giống nhau.

Dựa theo tài liệu về HTML5 của W3C thì: “Khu vực là một nhóm các nội dung có cùng chủ đề.”

Trang chủ của một website có thể đựa chia thành nhiều khu vực khác nhau như:  giới thiệu, nội dung mới, thông tin liên hệ,…

Demo

Thẻ <article> trong HTML5

Thẻ <article> được sử dụng cho các nội dung khép kín, độc lập.

Nội dung trong thẻ <article> có ý nghĩa riêng biệt và có thể độc lập với những phần còn lại của website. Người dùng có thể đọc nội dung bên trong thẻ <article> mà không cần quan tâm tới những phần khác.

Bạn có thể sử dụng thẻ <article> trong:

  • Bài viết của diễn đàn
  • Bài viết của blog
  • Bài viết của một trang báo

Thẻ trong thẻ

Trong chuẩn HTML5, thẻ <article> được sử dụng để tạo ra các khối nội dung hoàn chỉnh, khép kín.

Thẻ <section> được sử dụng để tạo ra nhóm các nội dung liên quan tới nhau.

Vậy, chúng ta có thể sử dụng những định nghĩa này để quyết định xem thẻ nào phải nằm bên trong thẻ nào hay không? Câu trả lời là: Không thể!

Trên Internet, bạn có thể tìm thấy rất nhiều trang HTML sử dụng thẻ <section> để chứa thẻ <article> và cũng rất nhiều trang sử dụng thẻ <article> để chứa thẻ <sections>.

Ngoài ra, bạn cũng có thể thấy những trang sử dụng thẻ <section> bên trong một thẻ <section> và thẻ <article> bên trong một thẻ <article>.

VD về trang báo mạng: Trong khu vực thể thao bao gồm nhiều bài viết thể thao, trong mỗi bài viết thể thao lại có một khu vực nói về kỹ thuật.

Thẻ <header> trong HTML5

Thẻ <header> được sử dụng cho phần đầu trang hoặc phần đầu của một thẻ.

Thẻ <header> nên được sử dụng để bao ngoài nội dung giới thiệu trang.

Bạn có thể sử dụng một vài thẻ <header> trong một trang HTML.

Ví dụ dưới đây sử dụng thẻ <header> bên trong một bài viết:

Demo

Thẻ <footer> trong HTML5

Thẻ <footer> được sử dụng cho phần cuối trang hoặc hoặc phần cuối của một thẻ.

Thông thường thẻ <footer> dùng để chứa thông tin về tác giả, thông tin bản quyền, liên kết kết tới điều khoản sử dụng, thông tin liên hệ, v.vv.

Bạn có thể sử dụng một vài thẻ <footer> trong một trang HTML.

Demo

Thẻ <nav> trong HTML5

Thẻ <nav> được sử dụng để chứa các liên kết điều hướng trong trang.

Demo

Thẻ <aside> trong HTML5

Thẻ <aside> được sử dụng để chứa những thông tin bên cạnh nội dung chính.

Nội dung bên trong thẻ <aside> nên liên quan tới nội dung chính.

Demo

Thẻ <figure> và <figcaption> trong HTML5

Nếu bạn để ý, trong những cuốn sách hay truyện thường hay có ghi chú ở dưới các bức ảnh.

Mục đích của ghi chú này là giải thích rõ nghĩa thêm cho bức ảnh.

Trong HTML5, ảnh và ghi chú có thể được đặt cùng nhau bên trong thẻ <figure>:

Demo

Tại sao sử dụng thẻ có ý nghĩa trong HTML5?

Trong HTML4, các lập trình viên phải tự tạo tên class hoặc ID hay dùng để trang trí CSS như:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …

Điều này có thể khiến các công cụ tìm kiếm không thể xác định chính xác nội dung website.

Trong HTML5, những thẻ như: <header> <footer> <nav> <section> <article> làm cho mọi chuyện trở nên dễ dàng hơn rất nhiều với cả lập trình viên và các công cụ tìm kiếm.

The post Các thẻ có ý nghĩa trong HTML5 appeared first on WebVN.

]]>
https://webvn.com/cac-the-co-y-nghia-trong-html5/feed/ 0
Thẻ mới trong HTML5 https://webvn.com/the-moi-trong-html5/ https://webvn.com/the-moi-trong-html5/#respond Sat, 03 Oct 2015 07:34:28 +0000 https://webvn.com/?p=2198 Danh sách các thẻ mới và cách sử dụng chúng trong HTML5.

The post Thẻ mới trong HTML5 appeared first on WebVN.

]]>
Dưới đây là danh sách các thẻ mới và cách sử dụng chúng trong HTML5.

Các thẻ có ý nghĩa trong HTML5

HTML5 cung cấp các thẻ mới để bạn có thể tạo ra một cấu trúc trang tốt hơn:

ThẻMiêu tả
<article>Một bài viết trong trang
<aside>Nội dung bên ngoài nội dung chính nhưng có tác dụng bổ trợ cho nội dung chính.
<bdi>Quy định hướng của chữ từ trái sang phải hay từ phải sang trái
<details>Thông tin chi tiết mà người dùng có thể xem hoặc ẩn đi
<dialog>Tạo hộp thoại hoặc một cửa sổ
<figcaption>Tạo chú thích cho thẻ <figure>
<figure>Tạo nội dung khép kín như hình minh họa, biểu đồ, hình ảnh, v.v..
<footer>Phần cuối của một trang hoặc một khu vực trong trang
<header>Phần đầu của một trang hoặc một khu vực trong trang
<main>Nội dung chính của trang
<mark>Đánh dấu hoặc làm nổi bật chữ
<menuitem>Tạo một menu con mà người dùng có thể gọi ra từ một popup menu
<meter>Tạo thước đo trong phạm vi định sẵn
<nav>Khu vực dành cho các liên kết điều hướng trong trang
<progress>Tạo thanh tiến trình công việc
<rp>Nội dung thay thế trong trường hợp trình duyệt không hỗ trợ thẻ ruby
<rt>Giải thích/phát âm của ký tự Đông Á
<ruby>Chú thích ruby (dành cho kiểu chữ Đông Á)
<section>Tạo một khu vực trong trang
<summary>Tạo tiêu đề cho thẻ <details>
<time>Hiển thị nội dung là ngày tháng/ thời gian
<wbr>Quy định đoạn nội dung có thể xuống dòng để tránh hỏng giao diện

Bạn có thể tìm hiểu thêm về Các thẻ có ý nghĩa trong HTML5

Các thẻ mới trong form

ThẻMiêu tả
datalistTạo các lựa chọn gợi ý cho thẻ input
keygenTạo cặp khóa (key-pair) trong form
outputHiển thị kết quả của một phép tính

Bạn có thể tìm hiểu thêm về Các thẻ trong form HTML

Các kiểu input mới

Kiểu input mớiThuộc tính mới cho thẻ input
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Bạn có thể tìm hiểu thêm về các kiểu input cũ và mới trong bài Thẻ input trong HTMLThuộc tính trong thẻ Input

Cú pháp cho thuộc tính trong HTML5

HTML5 cho phép bạn sử dụng 4 kiểu cú pháp dành cho thuộc tính.

Ví dụ dưới đây sẽ cho thấy những cú pháp khác nhau được sử dụng trong thẻ <input>:

KiểuVí dụ
Chỉ có tên thuộc tính<input type="text" value="John" disabled>
Không có ngoặc<input type="text" value=John>
Ngoặc kép<input type="text" value="John Doe">
Ngoặc đơn<input type="text" value='John Doe'>

Trong HTML5, tất cả 4 loại cú pháp đều có thể được sử dụng.

Đồ họa HTML5

ThẻMiêu tả
<canvas>Vẽ đồ họa sử dụng JavaScript
<svg>Vẽ đồ họa sử dụng SVG

Tìm hiểu thêm về Canvas trong HTML5

Tìm hiểu thêm về SVG trong HTML5

Các thẻ multimedia mới

ThẻMiêu tả
<audio>Chèn âm thanh, âm nhạc vào website
<embed>Nhúng các ứng dụng bên ngoài vào website (như plug-in)
<source>Nguồn để phát <video> và <audio>
<track>Tạo phụ đề, chữ chạy trong khi phát <video> và <audio>
<video>Chèn video hoặc một bộ phim vào website

Tìm hiểu thêm về Video trong HTML5

Tìm hiểu thêm về Audio trong HTML5

The post Thẻ mới trong HTML5 appeared first on WebVN.

]]>
https://webvn.com/the-moi-trong-html5/feed/ 0
Trình duyệt hỗ trợ HTML5 https://webvn.com/trinh-duyet-ho-tro-html5/ https://webvn.com/trinh-duyet-ho-tro-html5/#respond Sat, 03 Oct 2015 07:17:30 +0000 https://webvn.com/?p=2193 Bạn có thể "dạy" cho các trình duyệt cũ xử lý HTML5 một cách chính xác thông qua thư viện javascript tên là shiv.

The post Trình duyệt hỗ trợ HTML5 appeared first on WebVN.

]]>
Bạn có thể “dạy” cho các trình duyệt cũ xử lý HTML5 một cách chính xác.

Trình duyệt hỗ trợ HTML5

HTML5 được tất cả các trình duyệt hiện đại hỗ trợ.

Ngoài ra, những “thẻ lạ” mà trình duyệt chưa hiểu được, nó sẽ coi như là một thẻ inline (xem thêm Block và Inline trong HTML).

Chính vì thế, bạn có thể “dạy” các trình duyệt cũ hiểu các thẻ mới của HTML5.

Thậm trí bạn còn có thể dạy cho cả IE6 (Windows XP 2001) hiểu cách xử lý các thẻ mới trong HTML.

Định nghĩa các thẻ HTML5 như thẻ block

HTML5 định nghĩa 8 thẻ có ý nghĩa (semantic) mới. Tất cả những thẻ này đều là thẻ block.

Để đảm bảo các thẻ này vẫn hoạt động đúng trong các trình duyệt cũ, bạn có thể thiết lập thuộc tính CSS display là block như sau:

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Thêm các thẻ mới vào HTML

Bạn có thể thêm bất kỳ thẻ mới nào vào HTML với 1 thủ thật như dưới đây.

Ví dụ thêm một thẻ là <newtag> và HTML và hiển thị style cho thẻ đó:

Demo

Đoạn JavaScript document.createElement(“newtag”) được thêm vào chỉ để phục vụ cho IE.

Vấn đề với Internet Explorer

Bạn có thể sử dụng giải pháp được mô tả ở trên cho tất cả các thẻ mới của HTML5, nhưng:

Internet Explorer 8 và các phiên bản trước đó không cho phép sử dụng CSS để trang trí cho các thẻ chưa biết.

Nhưng rất may là tác giả Sjoerd Visscher đã tạo ra một tệp tin JavaScript làm cho trình duyệt IE hỗ trợ HTML5 được gọi là “shiv”:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Đoạn mã ở trên chỉ dành cho trình duyệt Internet Explorer phiên bản 8 trở về trước. Với các trình duyệt khác hoặc phiên bản Internet Explorer cao hơn, chỉ coi đây là một đoạn ghi chú mà thôi.

Sử dụng SHIV

Demo

Đường dẫn đến shiv phải được để trong thẻ <head> vì Internet Explorer cần phải biết tất cả các thẻ mới trước khi đọc chúng.

Khung của một trang HTML5

Demo

The post Trình duyệt hỗ trợ HTML5 appeared first on WebVN.

]]>
https://webvn.com/trinh-duyet-ho-tro-html5/feed/ 0
Giới thiệu về HTML5 https://webvn.com/gioi-thieu-ve-html5/ https://webvn.com/gioi-thieu-ve-html5/#respond Sat, 03 Oct 2015 07:17:11 +0000 https://webvn.com/?p=2191 Bao gồm lịch sử phát triển của HTML và sự ra đời của HTML5. Những thẻ, API mới trong HTML5 cũng như những thẻ bị bỏ khi chuyển sang HTML5.

The post Giới thiệu về HTML5 appeared first on WebVN.

]]>
Có gì mới trong HTML5?

Trong HTML5, khai báo DOCTYPE rất đơn giản:

<!DOCTYPE html>

Khai báo bảng mã hóa ký tự (charset) cũng rất dễ dàng:

<meta charset="UTF-8">

Ví dụ về HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tiêu đề của trang</title>
</head>

<body>
Nội dung trang
</body>

</html>

Bảng mã ký tự mặc định trong HTML5 là UTF-8.

Thành phần mới trong HTML5

Các thành phần mới được người dùng sử dụng phổ biến trong HTML5:

Các thẻ có ý nghĩa: <header>, <footer>, <article> và <section>.

Các thuộc tính điều kiện trong form: number, date, time, calendar và range.

Các thẻ về đồ họa: <svg> và <canvas>.

Các thẻ multimedia: <audio> và <video>.

Trong bài Trình duyệt hỗ trợ HTML5, các bạn sẽ học được cách để “dạy” các trình duyệt cũ xử lý các thẻ mới của HTML5.

API mới trong HTML5

Các API mới và được yêu thích nhất trong HTML5:

  • Application Cache – Lưu trữ tài nguyên tạm thời HTML5
  • Geolocation – Định vị vị trí trong HTML5
  • Drag/Drop – Kéo thả trong HTML5
  • Local Storage – Lưu trữ dữ liệu trong HTML5
  • SSE – Server-Sent Event – Tự động cập nhật nội dung trong HTML5
  • Web Worker – JavaScript chạy ngầm trong HTML5
Local Storage – API tuyệt vời thay thế cho cookie để lưu trữ dữ liệu trong HTML5

Các thẻ bị loại bỏ trong HTML5

Các thẻ HTML4 dưới đây sẽ bị bỏ đi trong HTML5:

Thẻ bị loại bỏThay thế bằng
<acronym><abbr>
<applet><object>
<basefont>CSS
<big>CSS
<center>CSS
<dir><ul>
<font>CSS
<frame> 
<frameset> 
<noframes> 
<strike>CSS
<tt>CSS
Trong bài Chuyển từ HTML4 sang HTML5, bạn có thể dễ dàng chuyển website đang được viết theo HTML4 sang HTML5.

Lịch sử HTML

Kể từ những ngày đầu tiên ra đời website cho đến nay, đã có rất nhiều các phiên bản của HTML được tạo ra:

Phiên bảnNăm
Tim Berners-Lee tạo ra www (world wide web)1989
Tim Berners-Lee tạo ra HTML1991
Dave Raggett phác thảo HTML+1993
Tổ chức HTML Working cho ra đời định nghĩa HTML 2.01995
W3C giới thiệu HTML 3.21997
W3C giới thiệu HTML 4.011999
W3C giới thiệu XHTML 1.02000
Lần đầu tổ chức WHATWG ra mắt dự thảo HTML52008
Tổ chức WHATWG đưa HTML5 trở thành "Tiêu chuẩn sống"2012
HTML5 chính thức được tổ chức web thế giới W3C chấp nhận2014

Tim Berners-Lee tạo ra “World Wide Web” vào năm 1989 và mạng Internet vào những năm 1990.

Từ năm 1991 đến 1998, HTML phát triển từ phiên bản 1 đến phiên bản 4.

Năm 2000, tổ chức World Wide Web Consortium (W3C) giới thiệu XHTML 1.0.

Với cú pháp rất nghiêm ngặt, XHTML buộc các lập trình viên phải viết code một cách hợp lệ và “đúng đắn “.

Năm 2004, W3C quyết định phát triển XHTML và dừng phát triển HTML. Tổ chức WHATWG chính thức được thành lập để phát triển HTML phù hợp với cách mà Web được sử dụng, trong khi vẫn tương thích với các phiên bản cũ hơn của HTML.

Trong giai đoạn những năm 2004-2006, tổ chức WHATWG đã nhận đươc sự ủng hộ từ các nhà phát triển các trình duyệt lớn.

Năm 2006, W3C tuyên bố họ sẽ ủng hộ WHATWG.

Năm 2008, dự thảo HTML5 lần đầu tiên được phát hành.

Năm 2012, WHATWG và W3C quyết định tách ra:

Tổ chức WHATWG sẽ phát triển HTML như là một “Tiêu chuẩn sống”.

“Tiêu chuẩn sống” có nghĩa là không bao giờ hoàn thiện và đẩy đủ nhưng sẽ luôn luôn được cập nhật và cải tiến. Các chức năng mới có thể được thêm vào, nhưng những chức năng cũ không thể bị bỏ đi.

Bộ Tiêu chuẩn sống WHATWG đã được xuất bản năm 2012 và liên tục được cập nhật.

Tổ chức W3C sẽ phát triển một định nghĩa về tiêu chuẩn cho HTML5 và XHTML5, như là một “bản sao” của WHATWG.

Giới thiệu về HTML5” của W3C đã được xuất bản ngày 28 tháng 10 năm 2014.

The post Giới thiệu về HTML5 appeared first on WebVN.

]]>
https://webvn.com/gioi-thieu-ve-html5/feed/ 0
SSE – Server-Sent Event trong HTML5 https://webvn.com/sse-server-sent-event-trong-html5/ https://webvn.com/sse-server-sent-event-trong-html5/#respond Sat, 03 Oct 2015 04:14:17 +0000 https://webvn.com/?p=2183 Server-Sent Event (viết tắt là SSE) cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ trong HTML5.

The post SSE – Server-Sent Event trong HTML5 appeared first on WebVN.

]]>
Server-Sent Event (viết tắt là SSE) cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ.

Server-Sent Event – Thông điệp một chiều

Trước kia, nếu muốn cập nhật một thay đổi nào đó (vd: tỷ giá, tin tức mới,…) từ máy chủ, bạn phải viết một đoạn mã kết nối tới máy chủ yêu cầu cập nhật -> máy chủ phản hồi -> bạn cập nhật thông tin vừa phản hồi. Với server-sent event, máy chủ sẽ gửi thông tin cập nhật một cách tự động.

Ví dụ ứng dụng: Cập nhật về like hay status mới của bạn bè trên Facebook/Twitter, cập nhật giá cổ phiếu, kết quả thể thao, v.vv…

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
SSE 6.0 6.0 Không hỗ trợ 5.0 11.5

Nhận thông báo cập nhật

EventSource được sử dụng để nhận thông báo cập nhật từ server-sent event:

Demo

Giải thích ví dụ:

  • Tạo mới đối tượng EventSource với tham số là địa chỉ nhận cập nhật (trong ví dụ là: “/demo/demo_sse.php”)
  • Sự kiện onmessage sẽ được kích hoạt nếu có cập nhật mới
  • Khi sự kiện onmessage xảy ra, hiển thị dữ liệu vừa nhận được vào thẻ có id=”result”

Kiểm tra trình duyệt hỗ trợ Server-Sent Event

Trong ví dụ ở trên, chúng ta có sử dụng đoạn mã để kiểm tra trình duyệt có hỗ trợ server-sent event hay không:

if(typeof(EventSource) !== "undefined") {
    // Trình duyệt hỗ trợ Server-sent event!
    // Viết tiếp mã...
} else {
    // Rất tiếc! Trình duyệt không hỗ trợ server-sent event..
}

Đoạn mã trên máy chủ

Để ví dụ bên trên hoạt động, website của bạn phải có khả năng gửi cập nhật (có thể sử dụng PHP hoặc ASP).

Bạn cần thiết lập “Content-Type” là “text/event-stream”.

Viết mã bằng PHP (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: Thời gian trên máy chủ hiện tại là: {$time}\n\n";
flush();
?>

Viết bằng ASP:

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Giải thích:

  1. Thiết lập “Content-Type” có giá trị “text/event-stream”
  2. Thiết lập để trình duyệt không lưu trữ tạm thời (không cache)
  3. Hiển thị thông tin cần gửi (Luôn luôn bắt đầu bằng “data: “)
  4. Gửi dữ liệu đi

EventSource

Trong ví dụ bên trên chúng ta đã sử dụng sự kiện onmessage để nhận thông điệp. Ngoài ra, còn có một số sự kiện chúng ta cũng có thể sử dụng:

Sự kiệnMiêu tả
onopenXảy ra khi đã mở xong kết nối tới máy chủ
onmessageXảy ra khi nhận thông điệp mới
onerrorXảy ra khi có lỗi

The post SSE – Server-Sent Event trong HTML5 appeared first on WebVN.

]]>
https://webvn.com/sse-server-sent-event-trong-html5/feed/ 0
Web Worker trong HTML5 https://webvn.com/web-worker-trong-html5/ https://webvn.com/web-worker-trong-html5/#respond Fri, 02 Oct 2015 18:22:49 +0000 https://webvn.com/?p=2176 Thông qua bài bạn sẽ biết Web Worker là gì? Tại sao sử dụng Web Worker? Ví dụ và cách hoạt động của Web Worker trong HTML5.

The post Web Worker trong HTML5 appeared first on WebVN.

]]>
Web worker là một đoạn mã JavaScript chạy ngầm, không ảnh hưởng tới hiệu suất, tốc độ truy cập của trang.

Web Worker là gì?

Bình thường, khi bạn chạy một đoạn mã JavaScript trong trang HTML, trang sẽ không phản hồi bất kỳ thao tác nào của bạn cho tới khi đoạn mã chạy xong.

Web worker là một đoạn mã JavaScript chạy ngầm, độc lập với các đoạn mã khác, hoàn toàn không làm ảnh hưởng tới hiệu suất của trang. Trong khi web worker đang chạy ngầm, bạn có thể làm bất kỳ điều gì bạn muốn: nhấn chuột, bôi đen nội dung, v.v..

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
Web Worker 4.0 3.5 10.0 4.0 11.5

Ví dụ về Web Worker

Dưới đây là ví dụ đơn giản về web worker, nó được chạy ngầm để đếm số:

Số đã đếm được:

Kiểm tra trình duyệt hỗ trợ Web Worker

Trước khi khởi tạo, bạn nên kiểm tra xem trình duyệt của người dùng có hỗ trợ web worker hay không:

if(typeof(Worker) !== "undefined") {
    // Trình duyệt hỗ trợ Web worker!
    // Viết tiếp các mã javascript
} else {
    // Rất tiếc! Trình duyệt không hỗ trợ Web Worker..
}

Tạo tệp tin Web Worker

Bây giờ, bạn hãy tạo một tệp tin JavaScript. Nội dung của tệp tin này chúng ta sẽ dùng để đếm số, bạn lưu lại với tên là “demo_workers.js”:

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

Phần quan trọng nhất của đoạn mã bên trên là hàm postMessage() – nó được sử dụng để gửi nội dung ngược lại trang HTML mà chúng ta đang chạy.

Lưu ý: Thông thường web worker không sử dụng để thực hiện những đoạn mã đơn giản như thế này mà thường dùng cho những công việc phức tạp hơn, chuyên sâu hơn.

Tạo Web Worker

Chúng ta đã có một tệp tin javascript, công việc tiếp theo là gọi nó vào trang HTML.

Đoạn mã dưới dây sẽ kiểm tra xem chúng ta đã chạy Web Worker hay chưa, nếu chưa – nó sẽ tạo ra một web worker mới và chạy đoạn mã được chứa trong tệp tin “demo_workers.js”:

if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Với đoạn mã trên chúng ta đã có thể gửi và nhận nội dung từ web worker.

Chúng ta sẽ thêm sự kiện “onmessage” để nhận các thông điệp từ web worker.

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Khi web worker gửi nội dung về trang HTML, đoạn mã trên sẽ tự động được chạy. Nội dung gửi được lưu trữ trong event.data.

Dừng Web Worker

Khi web worker được khởi tạo, nó sẽ liên tục lắng nghe các thông điệp (ngay cả khi đã chạy xong đoạn mã javascript) tới khi bị dừng.

Để dừng web worker, giải phóng tài nguyên cho trình duyệt và máy tính, bạn sử dụng hàm terminate():

w.terminate();

Sử dụng lại Web Worker

Nếu bạn thiết lập biến Web Worker thành “undefined”, bạn có thể tái sử dụng nó sau khi bị dừng:

w = undefined;

Ví dụ hoàn chỉnh về Web Worker

Dưới đây là ví dụ hoàn chỉnh, bao gồm các bước mà chúng ta đã thực hiện ở trên:

Demo

Web Worker và DOM

Web worker được viết trong các tệp tin JavaScript, chúng sẽ không thể truy cập vào các đối tượng sau đây trong JavaScript:

  • Đối tượng window
  • Đối tượng document
  • Đối tượng parent

The post Web Worker trong HTML5 appeared first on WebVN.

]]>
https://webvn.com/web-worker-trong-html5/feed/ 0
Application Cache trong HTML5 https://webvn.com/application-cache-trong-html5/ https://webvn.com/application-cache-trong-html5/#respond Fri, 02 Oct 2015 15:57:28 +0000 https://webvn.com/?p=2166 Ví dụ và cách sử dụng Application Cache, giúp người dùng vẫn có thể truy cập website của bạn khi không có kết nối internet.

The post Application Cache trong HTML5 appeared first on WebVN.

]]>
HTML5 cho ra đời một phương thức mới cho phép một website hay một ứng dụng web có khả năng hoạt động mà không cần kết nối mạng. Trong bài này, chúng ta sẽ tìm hiểu cách Application Cache hoạt động, lưu trữ tài nguyên, giúp người dùng vẫn có thể truy cập vào website của bạn mà không cần có kết nối internet.

Application Cache là gì?

Application Cache là tính năng mới trong HTML5, cho phép website có khả năng lưu trữ tài nguyên tạm thời trên trình duyệt và truy cập vào những tài nguyên đó mà không cần tới kết nối internet.

Application cache giúp cho website của bạn có 3 lợi thế:

  • Duyệt web offline – người dùng vẫn có thể truy cập website của bạn dù không kết nối internet
  • Tốc độ – những tài nguyên được lưu trữ tạm thời trên trình duyệt giúp web tải nhanh hơn
  • Giảm tải cho máy chủ – trình duyệt sẽ chỉ tải những tài nguyên mới từ máy chủ

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
Application Cache 4.0 3.5 10.0 4.0 11.5

Ví dụ về cache

Ví dụ dưới đây sẽ cho bạn thấy cách hoạt động của application cache:

Demo

Căn bản về application cache

Để kích hoạt application cache, bạn sử dụng thuộc tính manifest trong thẻ <html>:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Các trang có sử dụng thuộc tính manifest sẽ được trình duyệt lưu trữ để người dùng truy cập lần sau. Nếu thuộc tính manifest không được thiết lập, trang sẽ không được lưu trữ.

Khuyến khích sử dụng tập tin manifest có phần mở rộng là: “.appcache”

Tập tin manifest cần phải được cấu hình đúng kiểu “text/cache-manifest” trên máy chủ.

Tập tin Manifest

Application Cache được kiểm soát bởi một tệp tin gọi là manifest, tệp tin này chứa danh sách những tài nguyên cần được lưu trữ để sử dụng khi người dùng không có kết nối mạng.

Tệp tin manifest gồm 3 phần:

  • CACHE MANIFEST – Danh sách tài nguyên trong phần này sẽ được lưu trữ trên trình duyệt sau lần truy cập đầu tiên của người dùng
  • NETWORK – Danh sách tài nguyên trong phần này sẽ không được lưu trữ trên trình duyệt
  • FALLBACK – Danh sách tài nguyên trong phần này quy định: nếu một trang không thể truy cập được sẽ tự động chuyển sang trang dự phòng

CACHE MANIFEST

Cú pháp sử dụng phần CACHE MANIFEST:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Tệp tin manifest ở trên liệt kê 3 tài nguyên gồm: một tệp tin CSS, một ảnh GIF và một tệp tin JavaScript. Khi tệp tin manifest được tải, trình duyệt sẽ tự động tải ba tệp tin từ website và lưu trữ. Nếu người dùng mất kết nối internet, những tệp tin này sẽ được truy cập để phục vụ người dùng.

NETWORK

Phần NETWORK như trong ví dụ dưới đây quy định địa chỉ “login.asp” sẽ không được lưu trữ, khi người dùng mất kết nối, địa chỉ này cũng sẽ không thể hoạt động:

NETWORK:
login.asp

Bạn có thể sử dụng dấu hoa thị để quy định tất cả các tài nguyên/tệp tin không được lưu trữ trên trình duyệt, bắt buộc phải có kết nối internet khi truy cập:

NETWORK:
*

FALLBACK

Phần FALLBACK trong ví dụ dưới đây quy định: trong trường hợp không có kết nối internet, tệp tin “offline.html” sẽ được đưa ra để phục vụ thay thế cho tất cả các tệp tin trong thư mục /html/:

FALLBACK:
/html/ /offline.html

Lưu ý: Địa chỉ đầu tiên là tài nguyên, địa chỉ thứ 2 là trang thay thế khi không có kết nối internet.

Cập nhật cache

Khi tài nguyên website của bạn đã được lưu trữ, chúng sẽ chỉ cập nhật khi một trong những điều dưới đây xảy ra:

  • Người dùng xóa cache trên trình duyệt
  • Tệp tin manifest được chỉnh sửa (xem bên dưới)
  • Application cache được lập trình để cập nhật

Ví dụ đầy đủ về manifest

CACHE MANIFEST
# 2015-09-02 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html
Mẹo: Bạn có thể sử dụng dấu thăng “#” để ghi chú trong tệp tin manifest, nhưng ngoài ra bạn có thể sử dụng dấu thăng cho mục đích khác. Trình duyệt chỉ cập nhật lại các tài nguyên đã lưu trữ khi tệp tin manifest thay đổi. Nếu bạn sửa ảnh hoặc thay đổi một hàm trong JavaScript, những thay đổi này sẽ không được cập nhật, do trình duyệt đã lưu trữ phiên bản trước đó. Việc bạn cập nhật ngày tháng và phiên bản trong phần ghi chú của tệp tin manifest cũng là một cách để trình duyệt cập nhật lại tài nguyên của bạn.

Lưu ý khi dùng Application Cache

Thật cẩn thận với những tài nguyên bạn muốn trình duyệt lưu trữ thông qua Application Cache.

Một khi tài nguyên được lưu trữ, trình duyệt sẽ chỉ hiển thị phiên bản được lưu trữ, ngay cả khi bạn đã thay đổi tài nguyên đó trên website. Để chắc chắn trình duyệt sẽ cập nhật những tài nguyên này, bạn cần phải thay đổi tệp tin manifest.

Lưu ý: Mỗi trình duyệt sẽ quy định dung lượng giới hạn để lưu trữ tài nguyên của bạn (một số trình duyệt quy định giới hạn lưu trữ là 5MB cho mỗi website).

The post Application Cache trong HTML5 appeared first on WebVN.

]]>
https://webvn.com/application-cache-trong-html5/feed/ 0