1. Ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản
Trong suốt khóa học HTML cơ bản chúng ta sẽ sử dụng hai công cụ để tiện demo và show code cho các bạn là Sublime Text và JsFiddle. Ok, bạn hãy mở Sublime Text tạo một file chúng tôi với nội dung sau:
Kết quả khi chạy file chúng tôi chúng ta được như sau:
[jsfiddle url=” https://jsfiddle.net/allaravel/808ahvjg/” height=”200px” include=”result,html,js” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″]
Chú ý, phần kết quả thay vì chụp lại nội dung hiển thị trên trình duyệt thì chúng ta sẽ mặc định dùng JsFiddle để xem được nhanh chóng và trực quan.
2. Các khái niệm HTML cơ bản
Trong ví dụ HTML đầu tiên nếu bạn mới bắt đầu học HTML cơ bản, bạn sẽ thấy hơi hoa mắt chút nhưng đảm bảo rằng sau khi được giới thiệu các khái niệm HTML cơ bản, bạn sẽ làm chủ được đoạn code này dễ dàng.
Nội dung giữa thẻ mở và thẻ đóng của một HTML element sẽ là nội dung được hiển thị trên trình duyệt, thẻ mở và thẻ đóng sẽ “đánh dấu” (markup) để trình duyệt hiểu được cụm từ “Khóa học HTML cơ bản” là tiêu đề loại lớn nhất (h1 – Heading 1).
Trong thực tế, chúng ta cũng không cần quá phân biệt HTML element với HTML tag (thẻ HTML) mà có thể gọi chung là thẻ h1, thẻ p, thẻ body… chúng ta thống nhất trong suốt Khóa học HTML cơ bản, khi nói đến thẻ HTML chúng ta coi đó là HTML element.
Như vậy trong ví dụ trên chúng ta có các thẻ HTML là html, head, title, meta, body, h1, p.
2.2 Thuộc tính của thẻ html
Thuộc tính của một thẻ HTML có những tính chất như sau:
Tất cả các thẻ HTML đều có có thể các thuộc tính.
Các thuộc tính cung cấp thêm các thông tin cho thẻ HTML.
Các thuộc tính luôn được đưa vào thẻ mở trong thẻ HTML.
Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị thuộc tính, ví dụ class=”text-success”.
Thuộc tính class của thẻ h1 trong ví dụ trên chưa thực sự rõ ý nghĩa sử dụng do chúng ta chưa sử dụng đến thẻ này, chúng ta cùng xem một số ví dụ tiếp theo bạn sẽ hiểu rõ hơn thuộc tính trong HTML sử dụng làm gì?
Ví dụ 1: thuộc tính src của thẻ giúp chỉ rõ đường dẫn đến ảnh cần hiển thị
<img src="public/news/anh-dep.jpg"Ví dụ 2: thuộc tính style giúp “trang điểm” cho thẻ HTML, ví dụ này chúng ta sẽ tô màu đỏ cho thẻ h1
3. Cấu trúc căn bản một trang HTML
Như vậy bạn đã nắm được một số khái niệm căn bản trong HTML và giờ là lúc xem lại code của ví dụ HTML đầu tiên, nó đã bớt phức tạp hơn. Trong đầu bạn hiện lại có những câu hỏi tiếp theo, các thẻ h1, p thì rõ ý nghĩa của nó rồi, còn lại một đống thẻ HTML khác để làm gì? Khoan đi vào chi tiết, bạn chỉ cần nhớ rằng, đây là cấu trúc chung của một trang HTML.
Trong HTML4 chúng ta khai báo nội dung tiếp theo viết theo tiêu chuẩn HTML4 bằng cách đưa cú pháp sau vào dòng đầu tiên của mã nguồn:
Với HTML5, cách khai báo đơn giản hơn do HTML5 không còn dựa trên SGML nên không phải khai báo DTD:
Tiêu đề của văn bản
Văn bản sử dụng bảng mã ký tự nào
Các thông tin thêm cho văn bản chính (metadata) như thông tin tác giả, mô tả bài viết, từ khóa bài viết…
Về bố cục một trang HTML bạn có thể nắm được như vậy, khi viết một trang HTML mới, bạn có thể sao chép cấu trúc trang HTML cơ bản này. Tiếp theo chúng ta cùng tìm hiểu cụ thể một số thẻ HTML có trong bố cục.
Thẻ title
Xác định tiêu đề của văn bản, tiêu đề này sẽ được hiển thị trong phần tab của trình duyệt giúp chúng ta nhanh chóng biết được siêu văn bản (trang web) nào đang được mở khi một trình duyệt mở nhiều trang một lúc.
Thẻ meta
Định nghĩa các thông tin thêm (metadata) cho tài liệu, các thông tin này bao gồm thông tin về tác giả, thông tin mô tả nội dung, thông tin từ khóa… có thể nói rằng thẻ meta mô tả thông tin của thông tin. Các thông tin của thẻ meta không hiển thị trên trình duyệt nhưng các bộ máy khác có thể sử dụng chúng, ví dụ bộ máy tìm kiếm Google, Bing, Facebook sẽ sử dụng các thông tin từ thẻ meta để phân loại nội dung trang web. Có duy nhất thẻ meta nhưng lại khai báo được nhiều các thông tin về metadata là do chúng ta có thể sử dụng các thuộc tính khác nhau:
Thẻ meta đầu tiên thiết lập bảng mã sử dụng, UTF-8 (8-bit Unicode Transformation Format – Định dạng chuyển đổi Unicode 8-bit) là bộ mã hóa ký tự dành cho Unicode, nó có thể tương thích ngược với bảng mã ASCII. UTF-8 là bộ mã phổ biến và thông dụng cho các nội dung điện tử như các file tài liệu, thư điện tử, trang web và các phần mềm xử lý văn bản. Với phiên bản HTML4 trở xuống, để thiết lập bảng mã ký tự phải sử dụng thuộc tính http-equiv kết hợp với content.
Ba thẻ meta tiếp theo mô tả thông tin về trang web, nó giúp các bộ máy tìm kiếm như Google, Bing phân loại nội dung, các thẻ này tuy không hiển thị nhưng cực kỳ quan trọng khi bạn muốn website của mình có thứ hạng cao trong kết quả tìm kiếm của Google.
Thẻ meta cuối cùng cho phép các nhà thiết kế điều khiển được khung hiển thị, tính năng này chỉ có ở HTML5. Khung hiển thị là vùng có thể nhìn thấy của người dùng trên một trang web, nó phụ thuộc vào kích thước màn hình các thiết bị khác nhau, ví dụ các thiết bị di động thông minh hiện rất phổ biến nhưng màn hình nó khá nhỏ nên cần trình bày lại sao cho đọc được nội dung dễ dàng.
4. Thành phần thẻ HTML có ngữ nghĩa
Các thẻ HTML được chia ra thành hai loại:
Các phiên bản HTML mới sẽ có nhiều hơn các thẻ có ngữ nghĩa vì khi sử dụng các thẻ này có nhiều lợi ích:
Dễ dàng chỉnh sửa và duy trì: Với các thẻ không ngữ nghĩa khó phân tách lại phần đánh dấu bằng các thẻ, do đó rất khó để hiểu được bố cục tổng thể và ý nghĩa các thành phần.
Tốt hơn cho bộ máy tìm kiếm: đây là một trong những lợi ích lớn nhất, bạn muốn trang web của mình được nhiều người biết đến thông qua các kết quả tìm kiếm, việc sử dụng các thẻ có ngữ nghĩa giúp Google nhanh chóng phân tích được nội dung một cách chính xác và tối ưu hóa cho bộ máy tìm kiếm.
Thích hợp cho các trình duyệt tương lai: các trình duyệt mới và công cụ thiết kế web mới sẽ tận dụng các thông tin về ngữ nghĩa.
4.1 Sự tiến hóa trong HTML5
Năm 2004, một thành viên nhóm soạn thảo đặc tả HTML5, Ian Hickson đã làm một thống kê trên một tỉ trang web thông qua hệ thống chỉ mục của Google để tìm xem thực tế cách tạo ra các trang web. 5 năm sau đó, Opera MAMA cũng thực hiện một việc tương tự nhưng với các thuộc tính class của thẻ HTML từ ngẫu nhiên hơn 2 triệu đường dẫn và kết quả như sau:
Bảng kết quả tiếp theo khi thống kê thuộc tính id của thẻ HTML từ 1.5 triệu đường dẫn ngẫu nhiên:
Từ các thống kê này, trong HTML5 người ta thấy rằng cần thiết phải đưa vào thêm một số các thẻ HTML có ngữ nghĩa mới như nav, header, footer… Những thẻ HTML có ngữ nghĩa mới này đã làm thay đổi cấu trúc trang HTML cơ bản. Nếu các bạn có điều kiện thực hiện các trang web từ những năm đầu của thế kỷ 21 có thể thấy cách cấu trúc đã có những đợt thay đổi như sau:
2000-2005: Sử dụng thẻ table để cấu trúc trang HTML
2005-2010: Sử dụng thẻ div để cấu trúc trang HTML
2010 đến nay: Sử dụng các thẻ HTML có ngữ nghĩa mới trong HTML5 để cấu trúc trang.
Các ví dụ tiếp theo đây cho thấy được những thay đổi đáng kể trong cách cấu trúc trang HTML, đầu tiên chúng ta xem xét cách cấu trúc dùng thẻ div
Với việc thêm vào các thẻ HTML có ngữ nghĩa mới trong HTML5, cấu trúc trang HTML đã thay đổi đáng kể:
Mã HTML cũng có những thay đổi
4.2 Trình duyệt không tương thích với HTML5
Thật may là các thẻ HTML có ngữ nghĩa trong HTML5 được hỗ trợ diện rộng trên các trình duyệt web hiện đại, rất khó để có thể tìm thấy các phiên bản Chrome, Firefox, Safari hoặc Opera không hỗ trợ. Nhưng không phải là không có những ngoại lệ, ví dụ các phiên bản Internet Explorer trước IE9 là gặp vấn đề với HTML5.
Khi một trình duyệt không phát hiện ra các thẻ HTML mới, nó sẽ xử lý các thẻ này như một inline element và không hiển thị chúng như các khối (block), để khắc phục vấn đề này, bạn cần thêm một ít code CSS vào:
article, aside, figure, figcaption, footer, header, main, nav, section, summary { display: block; }Code CSS này không ảnh hưởng gì với các trình duyệt có thể nhận diện được thẻ HTML5. Kỹ thuật này là đủ để giải quyết vấn đề tương thích với hầu hết các trình duyệt, tuy nhiên với IE8 hoặc phiên bản thấp hơn thì có một thách thức khác: Các trình duyệt này từ chối áp dụng định dạng CSS cho các thẻ HTML mà chúng không thể nhận ra. Với vấn đề này chúng ta xử lý bằng cách đưa vào một đoạn mã Javascript giúp IE có thể nhận ra và style các thẻ HTML:
Nhóm phát triển Google cũng đưa ra một giải pháp riêng tổng thể hơn với một thư viện Javascript giúp cho mọi trình duyệt không hỗ trợ HTML5 có thể hoạt động được.
5. Các thẻ HTML mới trong HTML5
5.1 Thẻ HTML5 `
Đôi khi tiêu đề cũng có thể chứa các thành phần điều hướng đặc biệt khi thiết kế website kiểu master template có một mẫu cho tất cả các trang. Ví dụ:
Các bài đăng trong diễn đàn.
Bài viết trong các blog.
Các tin tức mới trong phần tin bài.
Thông tin tác quyền
Thông tin liên hệ
Bản đồ trang web
Các công cụ mạng xã hội để tương tác với nội dung
5.7 Một số thẻ HTML5 khác
6. Lời kết
HTML5 đã có nhiều cải tiến bằng việc đưa thêm nhiều các thẻ HTML có ngữ nghĩa, nó giúp cho việc cấu trúc trang trở nên rõ ràng hơn. Một điểm quan trọng nữa là các bộ máy tìm kiếm như Google, Bing có những ưu tiên khi đánh giá các trang được viết bằng HTML5, nó giúp bạn có thứ hạng cao trong kết quả tìm kiếm, đem lại nhiều lưu lượng truy cập trang hơn. HTML5 còn rất nhiều các khái niệm mới mang tính đột phát, trong bài viết này chỉ dừng lại ở những khái niệm cơ bản giúp bạn có thể chuyển đổi cấu trúc trang từ các phiên bản HTML thấp hơn sang HTML5.
CÁC BÀI VIẾT KHÁC