HTML5: Giới thiệu
Giải phóng thời gian, khai phóng năng lực
Chào mừng bạn đến với HTML5. Bài viết này ta sẽ tìm hiểu các thẻ cơ bản có mặt trong HTML5. Bài viết cũng liệt kê các loại dữ liệu, thuộc tính và thực thể khác nhau của HTML5. Cuối cùng, bài viết giải thích những lợi thế của việc sử dụng HTML5 trong phát triển ứng dụng di động.
Các chủ đề của bài viết:
- Các thành phần cấu thành một thẻ HTML
- Khai báo DOCTYPE
- Các thẻ cơ bản trong HTML
- Các loại dữ liệu, thuộc tính và thực thể khác nhau trong HTML
- Thẻ đôi và thẻ đơn
- Giải thích vai trò của HTML5 trong các thiết bị di động.
Tổng quan
Tất cả các phần tử trong HTML5 được tổ chức bằng cách sử dụng các thẻ. Các thẻ cơ bản trong HTML5 bao gồm <html>, <head>, <title>, <meta>, <link>, <script> và <body>. Lưu ý rằng DOCTYPE phải được cung cấp trước khi chèn các thẻ cơ bản trong HTML5. Có nhiều loại dữ liệu, thuộc tính và thực thể khác nhau có thể được áp dụng cho các thẻ có trong HTML5. Tất cả các thẻ được phân thành các thẻ đôi và thẻ đơn. Phân loại này dựa trên việc sử dụng thẻ kết thúc cho một phần tử HTML nào đó. HTML5 cũng là ngôn ngữ ưa thích dành cho phát triển ứng dụng di động vì các lợi ích khác nhau của nó.
Các thành phần cấu thành một thẻ HTML
Mỗi phần tử tổ chức nội dung trong một trang web ở dạng phân cấp, tạo thành cấu trúc HTML cơ bản. Nó bao gồm các thẻ, thuộc tính và nội dung. Thẻ biểu thị sự bắt đầu và kết thúc của một phần tử HTML.
Thẻ bắt đầu bao gồm dấu nhỏ hơn (<) tiếp theo là tên phần tử, không hoặc nhiều thuộc tính cách nhau bằng khoảng trắng và dấu lớn hơn (>). Thuộc tính là các cặp tên/giá trị mô tả phần tử và định dạng nội dung. Thẻ kết thúc được viết chính xác như thẻ bắt đầu, nhưng có dấu gạch chéo (/) đứng trước tên phần tử. Sơ đồ dưới đây trình bày một phần tử trong thẻ HTML.
Cấu trúc của một phần tử HTML
Ghi chú: Thẻ được gọi là đánh dấu (mark) trong tài liệu HTML.
Khai báo DOCTYPE
Phần tử DOCTYPE thông báo cho trình duyệt số phiên bản HTML của tài liệu của bạn. Đây là khai báo đầu tiên trong tài liệu HTML5 trước khi bất kỳ mã HTML nào khác được viết. Bằng cách sử dụng DOCTYPE, trình duyệt có thể hiểu được chính xác hơn theo cách nó diễn giải và tái tạo các trang web của bạn. Hết sức khuyến cáo rằng nên sử dụng DOCTYPE ở đầu của tất cả các tài liệu HTML.
Khai báo DOCTYPE của HTML5 mới như sau:
Xin lưu ý rằng đây là một khai báo, không phải là một thẻ. Khai báo trên không chỉ là cú pháp hợp lệ trong HTML5, mà còn hợp lệ cho tất cả các phiên bản sau này của HTML, thậm chí nó còn tương thích ngay cả với các trình duyệt cũ.
Các thẻ cơ bản trong HTML5
Tài liệu HTML được tạo thành từ các phần tử, thẻ và thuộc tính khác nhau, trong đó chỉ rõ nội dung và định dạng của nó. Do đó, HTML là ngôn ngữ đánh dấu cả cấu trúc và trình bày. Đánh dấu cấu trúc chỉ rõ cấu trúc của nội dung, trong khi đánh dấu trình bày chỉ rõ định dạng.
Trang HTML được lưu với phần mở rộng là '.html'. Cấu trúc cơ bản của một tài liệu HTML chủ yếu bao gồm bảy thẻ cơ bản. Chúng bao gồm:
1. HTML
Phần tử HTML là phần tử gốc đánh dấu sự khởi đầu của một tài liệu HTML. Nó chứa mã bắt đầu và kết thúc ở dạng <HTML> và </HTML> tương ứng. Đây là phần tử bộ chứa lớn nhất vì nó có chứa các phần tử khác nhau.
2. HEAD
Phần tử <HEAD> cung cấp thông tin về trang web như các từ khoá và ngôn ngữ sử dụng, mà không được hiển thị trên trang web. Từ khóa là những thuật ngữ quan trọng tồn tại trong một trang web được sử dụng bởi các công cụ tìm kiếm để xác định trang web liên quan đến tiêu chí tìm kiếm.
3. TITLE
Phần tử TITLE cho phép bạn xác định tiêu đề của trang web bằng thẻ <TITLE> và </TITLE>. Tiêu đề được hiển thị trên thanh tiêu đề của trình duyệt web. Phần tử TITLE nằm trong phần tử HEAD.
4. META
Thẻ <META /> là loại thẻ đơn được sử dụng để hiển thị thông tin về dữ liệu. Trong HTML5, thẻ meta nội dung được sử dụng để xác định bộ ký tự hoặc mã hóa ký tự đã được đơn giản hóa. Thẻ <META /> mới có dạng như sau:
UTF-8 là mã hóa ký tự thường được sử dụng nhất có hỗ trợ nhiều bảng chữ cái. UTF-8 cũng được quảng bá là tiêu chuẩn mới. Có một số thuộc tính khác liên quan đến thẻ meta có thể được sử dụng để khai báo thông tin chung về trang. Thông tin này không được hiển thị trong trình duyệt. Các thẻ meta cung cấp cho công cụ tìm kiếm, trình duyệt và các dịch vụ web thông tin cần thiết để xem trước hoặc có được một bản tóm tắt các dữ liệu có liên quan đến tài liệu của bạn.
Trong HTML5, việc có hay không có dấu gạch chéo ở cuối đối với thẻ đơn là không quan trọng lắm. Mặc dù vậy, bạn nên sử dụng dấu gạch chéo vì các lý do tương thích.
5. LINK
Thẻ <LINK /> được sử dụng để xác định mối liên hệ giữa một tài liệu và một tài nguyên bên ngoài. Nó được sử dụng để liên kết bảng định kiểu phân tầng (CSS). Thuộc tính type của nó được sử dụng để chỉ ra loại liên kết như 'text/css' chỉ tới một style sheet. Ví dụ:
Thuộc tính type không được đưa vào trong HTML5. Lý do là CSS đã được tuyên bố như là kiểu mặc định và tiêu chuẩn cho HTML5. Vì vậy, thẻ <LINK> mới có dạng đơn giản hơn như sau:
6. SCRIPT
Với HTML5, bây giờ JavaScript là ngôn ngữ kịch bản tiêu chuẩn và mặc định. Do đó, bạn cũng có thể loại bỏ thuộc tính type từ các thẻ kịch bản. Thẻ kịch bản mới như vậy sẽ đơn giản như sau:
Ví dụ sau đây cho thấy việc sử dụng thẻ <script>.
<html>
<head>
<meta charset="UTF-8">
<title>HTML cách dùng thẻ script</title>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
</head>
</html>
7. BODY
Phần tử BODY cho phép bạn thêm nội dung sẽ được thể hiện trên trang web được chỉ ra bên trong thẻ <BODY> và </BODY>. Nội dung có thể bao gồm văn bản, siêu liên kết và hình ảnh. Bạn có thể hiển thị nội dung bằng cách sử dụng các tùy chọn định dạng khác nhau như căn chỉnh, màu sắc và nền. Hình dưới đây trình bày các phần tử HTML cơ bản.
Các loại dữ liệu trong HTML
Loại dữ liệu quy định loại giá trị được gán cho các thuộc tính và loại nội dung mà sẽ được hiển thị trên trang web. Các loại nội dung khác nhau bao gồm văn bản, hình ảnh, siêu liên kết, video và âm thanh. Các loại dữ liệu giúp xác định loại định dạng như màu sắc và độ dài của dữ liệu.
Dưới đây là danh sách các loại dữ liệu HTML cơ bản và quan trọng.
- Text String (Chuỗi văn bản)
Xác định nội dung văn bản mà người dùng có thể đọc.
- Mã nhận dạng tài nguyên đồng nhất (URI)
Xác định vị trí của các trang web hoặc các tập tin mạng.
- Màu sắc (Color)
Xác định màu sắc được áp dụng cho nội dung trên trang web.
- Độ dài (Length)
Xác định khoảng cách giữa các phần tử HTML. Giá trị chiều dài có thể là ở dạng Pixels, Length hoặc MultiLength. Pixels đề cập đến chấm nhỏ trên màn hình. Length được chỉ ra bằng giá trị phần trăm của Pixels hoặc không gian có sẵn trên màn hình. MultiLength có thể được chỉ ra bằng Pixels hoặc tỷ lệ phần trăm.
- Các loại nội dung (Content type)
Xác định loại nội dung được hiển thị trên một trang web. Ví dụ về các loại nội dung bao gồm "text/html" để hiển thị văn bản sử dụng định dạng HTML, "image/gif" để hiển thị hình ảnh ở định dạng .gif, và "video/mpg" để hiển thị tập tin video có định dạng .mpg.
Các loại thuộc tính HTML
Các thuộc tính HTML giúp cung cấp một số ý nghĩa và ngữ cảnh cho các phần tử. Một số thuộc tính chung được sử dụng trong các phần tử HTML5 như sau:
- class - Chỉ ra tên lớp cho một phần tử.
- contextmenu - Chỉ ra menu ngữ cảnh cho một phần tử.
- dir - Chỉ ra hướng của văn bản thể hiện về nội dung. Có hai hướng là ltr (left to right) và rtl (right to left).
- draggable - Chỉ ra chức năng có thể kéo của một phần tử.
- dropzone - Chỉ ra có thể dữ liệu khi kéo được sao chép, di chuyển, hoặc liên kết khi giảm.
- style - Chỉ ra kiểu CSS trong dòng (inline) cho một phần tử.
- title - Chỉ ra thêm thông tin về phần tử.
Các loại thực thể HTML
Thực thể là các ký tự đặc biệt được dành riêng trong HTML. Những thực thể này có thể được hiển thị trên website HTML5 sử dụng cú pháp sau:
Cú pháp:
Hình ảnh dưới đây cho thấy một số thực thể HTML thường được sử dụng.
Một số thực thể HTML
Thẻ đôi và thẻ đơn
Có hai loại thẻ (hoặc phần tử) HTML cụ thể là đôi và thẻ đơn. Thẻ đôi bao gồm thẻ bắt đầu (hay thẻ mở), nội dung, các phần tử phụ và thẻ kết thúc (hay thẻ đóng). Tất cả các thẻ HTML cơ bản là thẻ đôi. Thẻ đơn bao gồm phần bắt đầu (<) và các thuộc tính tiếp theo là phần kết thúc (/> hoặc >) mà không có nội dung.
HTML5 và các thiết bị di động
HTML5 đã giúp tạo ra các ứng dụng di động tốt hơn và phong phú hơn thông các API được sử dụng trong trong nó. Những API này hỗ trợ các tính năng ứng dụng web tiên tiến cho các trình duyệt di động.
HTML5 không được các thiết bị điện thoại di động cũ hỗ trợ. Những dòng điện thoại thông minh hiện đại với hệ điều hành Apple iOS hay Google Android hỗ trợ các trình duyệt tương thích với HTML5. Ngay cả Microsoft Windows 7 for Mobile sẽ có một trình duyệt mới được phát triển để hỗ trợ các website và ứng dụng được phát triển bằng HTML5.
Do các nền tảng di động khác nhau có sẵn trên các thiết bị di động, nên việc phát triển các ứng dụng di động trở nên khó khăn hơn. HTML5 đã cố gắng tích hợp tất cả các tính năng để triển khai các ứng dụng di động mà có thể tương thích với tất cả các nền tảng. HTML5 cung cấp các tính năng như chức năng kéo và thả, nhúng video vào ứng dụng, và thậm chí bao gồm cả các khả năng hoạt động ngoại tuyến.
Do HTML5 tương thích với hầu hết các hệ điều hành di động nên sẽ tiết kiệm tới 30% chi phí cho sự phát triển các hệ điều hành khác nhau. Ngoài ra, sẽ giảm sự phụ thuộc vào các thành phần của bên thứ ba, và do đó làm giảm chi phí cấp giấy phép. Tất cả các thành phần cần thiết sẽ được cung cấp sẵn thông qua trình duyệt ở dạng HTML5.
Lợi ích của HTML5 cho phát triển di động
Những lợi ích của HTML5 cho sự phát triển di động như sau:
- HMTL5 đã đưa vào API, do đó không cần phải có các plug-in bổ sung cho trình duyệt di động.
- Việc phát triển di động trở nên dễ dàng hơn bởi chủ yếu chỉ cần các kiến thức về HTML5, CSS và JavaScript. Điều này dễ dàng hơn khi so với các ngôn ngữ khác được sử dụng để phát triển di động. Việc phát triển cũng nhanh hơn khi dùng HTML5.
- Do có tốc độ tăng trưởng cao cho các ứng dụng di động và do tính tương thích nâng cao của nó, HTML5 hiện đang là nền tảng cho việc phát triển những ứng dụng di động này.
- HTML5 tương thích với hầu hết các nền tảng hệ điều hành. Các ứng dụng di động được phát triển trên HTML5 có thể chạy trên các trình duyệt của Android, iOS, Blackberry, Windows Phone và các hệ điều hành di động khác.
- Chi phí phát triển để tạo ra các ứng dụng bằng HTML5 thấp.
- Các ứng dụng dựa trên vị trí và bản đồ sẽ có sự hỗ trợ lớn hơn trong HTML5. Kế hoạch này là để hỗ trợ các ứng dụng như vậy trên các trình duyệt, và do đó sẽ tạo thành nền tảng độc lập.
- Không cần các chương trình của bên thứ ba trong HTML5. Do đó, các tính năng đa phương tiện như âm thanh và video có chức năng tốt hơn và cải thiện hỗ trợ trong HTML5.
Giải phóng thời gian, khai phóng năng lực