Langbiang: Web front-end (23) - HTML - Một số chủ đề khác

Bài trước: Web front-end (22) - HTML - Các thành phần nhúng

-----

1.1 Một số chủ đề khác

1.1.1 HTML không chỉ là ngôn ngữ đánh dấu

Tới đây, chúng ta đã biết sử dụng các phần tử HTML để tạo ra cấu trúc và thêm ngữ nghĩa cho nội dung trang web. HTML, viết tắt của HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản. Hiểu nôm na là ngôn ngữ được sử dụng để đánh dấu, nhằm tạo ra siêu văn bản, việc đánh dấu được thực hiện bằng các thẻ. Như đã biết, siêu văn bản (hypertext) là một tài liệu, nó không chỉ có văn bản mà còn có những thứ ngoài văn bản, như hình ảnh, âm thanh, video, các liên kết, hình minh họa, hoạt hình, game.

Bên cạnh việc tạo ra cấu trúc và thêm ngữ nghĩa cho nội dung, HTML còn cung cấp thêm nhiều phương thức cho phép làm việc với âm thanh, video, chức năng tương tác, lưu trữ cục bộ, làm việc ở chế độ không kết nối mạng (offline), bản đồ và nhiều chức năng khác.

Để tạo ra cấu trúc và thêm ngữ nghĩa cho nội dung, chỉ cần quan tâm tới phần tử, thuộc tính và các giá trị. Tuy nhiên, để làm một ứng dụng web thì cần phải sử dụng thêm các API. HTML5 cung cấp hàng loạt các API giúp cho việc lập trình ứng dụng web được dễ dàng hơn.

Ví dụ một số loại API của HTML5:

– Media player API

– Session history API

– Offline web application API

– Editing API

– Drag and drop API

– Canvas API

– Web storage API

– Geolocation API

– Web workers API

– Web sockets API

Để tìm hiểu về các chủ đề API của HTML, chúng ta cần phải có kiến thức về lập trình JavaScript. Vì vậy, chúng ta sẽ quay trở lại chủ đề này ở các bài học sau.

1.1.2 Cách tìm và sửa lỗi HTML

Tới thời điểm này, nhìn lại quá trình viết mã HTML và xem kết quả trên trình duyệt thì thấy khá đơn giản. Chỉ là dùng một chương trình soạn thảo văn bản thô (ví dụ Notepad), hoặc một trình viết mã (ví dụ VS code) để viết HTML, lưu lại vào một tập tin, rồi mở tập tin đó bằng trình duyệt và xem kết quả.

Khi chúng ta chỉ xem các clip hướng dẫn hoặc đọc tài liệu và làm theo thì rất ít phát sinh lỗi. Nếu có lỗi, chỉ cần xem lại phần hướng dẫn, xem làm sai chỗ nào và làm lại là được. Ngoài ra, để kiểm tra tính hợp lệ của mã nguồn có thể sử dụng trang https://validator.w3.org/

Khi mới học, kiến thức và kĩ năng còn ít, thì nên xem và làm theo. Nó giúp dễ hình dung, dễ hiểu về đối tượng đang học. Tuy nhiên, khi đã hiểu sơ sơ rồi, thì nên tự tìm tòi, thử nghiệm, rồi tự rút ra các bài học cho bản thân. Thường thì sẽ học được nhiều hơn khi chúng ta tìm cách sửa các lỗi gặp phải lúc viết mã.

Hầu hết các trình duyệt đều có công cụ gọi là developer tools. Đây là một công cụ hữu ích, để tìm và sửa lỗi; ngoài ra nó cũng giúp chúng ta phân tích mã nguồn, để hiểu sâu hơn về HTML và nhiều thứ khác.

Để mở developer tools, cần mở trình duyệt, và sử dụng một trong các cách sau:

– Bấm tổ hợp ba phím Ctrl+Shift+I

– Bấm phím F12

– Vào menu của trình duyệt tìm tới mục Developer tools

– Bấm chuột phải vào trang web, chọn Inspect

Vì chúng ta mới chỉ biết HTML, nên chỉ cần quan tâm tới tab Elements trên cửa sổ của developer elements.

Cửa sổ nội dung của tab Elements chính là cây DOM, cũng là nội dung mã HTML của trang web hiện tại. Xem hình minh họa,

Một số kĩ năng sử dụng developer tool nên biết:

– Dùng công cụ chọn (cái hình mũi tên phía trên, bên trái, gần chữ Elements), để chọn một đối tượng trên trang web, rồi xem mã HTML tương ứng. Hoặc chỉ cần chuột phải vào đối tượng trên trang web và chọn Inspect.

– Thay đổi nội dung trong cửa sổ Elements, rồi xem kết quả thay đổi trên giao diện.

– Sử dụng Ctrl + F để tìm kiếm một phần tử trên cửa sổ Elements (nhớ bấm chuột vào cửa sổ Elements, trước khi bấm Ctr + F, nếu không sẽ là tìm kiếm trên trang web).

– Lưu ý: các chỉnh sửa mã nguồn ở cửa sổ developer tool chỉ ảnh hưởng (áp dụng) tạm thời lên trang web ở trình duyệt, chứ nó không lưu lại vào tập tin mã nguồn.

– Tại cửa sổ của developer tools, bấm vào dấu ba chấm ở góc trên bên phải, chọn dock side để xem các cửa sổ ở nhiều chế độ khác nhau.

– Tại cửa sổ của developer tools, bấm vào biểu tượng có hai hình chữ nhật ở góc trên bên trái để xem trang web ở các thiết bị khác nhau, với kích thước màn hình khác nhau. Sau khi chọn thiết bị, chọn thêm chế độ xoay ngang và dọc để quan sát (biểu tượng nút xoay ở góc trên bên phải).

1.1.3 Chú thích

Chú thích (comment) là những phần ghi thêm vào mã nguồn khi lập trình, giúp các lập trình viên dễ dàng hiểu mã nguồn và làm việc hiệu quả hơn. Khi biên dịch, trình duyệt sẽ không biên dịch và không thực thi nội dung chú thích, dựa vào tính chất này có thể sử dụng chú thích để vô hiệu một vài đoạn mã trong quá trình chạy kiểm tra, sửa lỗi.

Để chú thích trong HTML, sử dụng kí hiệu  để bọc lại phần nội dung chú thích.

[HTML]

<body>

<p>Phần nội dung trang web</p>

</div>

</body>

[Kết quả]

Khi xem trang web kết quả, nội dung nằm trong phần chú thích sẽ không được hiển thị.

Chú thích không cho phép lồng nhau, nghĩa là không thể có chú thích này nằm trong chú thích kia. Ví dụ,

[HTML]

<p>Phần nội dung trang web</p>

</div>

[Kết quả]

Khi xem trang web kết quả, một phần nội dung chú thích sẽ được hiển thị.

Lưu ý, không được thêm khoảng trắng vào giữa dấu < và dấu ! trong thẻ mở của chú thích. Ví dụ,

[HTML]

<p>Phần nội dung trang web</p>

</div>

[Kết quả]

Khi xem trang web kết quả, phần nội dung chú thích sẽ được hiển thị.

Chú thích gồm nhiều hàng

Để chú thích cho nhiều hàng, chỉ cần đặt thẻ mở () ở sau hàng cuối cùng. Ví dụ,

[HTML]

<body>

<!-- div>

<p>Phần nội dung này tạm thời không được hiển thị</p>

</div> -->

<p>Phần nội dung trang web</p>

</div>

</body>

[Kết quả]

Dòng chữ “Phần nội dung này tạm thời không được hiển thị” sẽ không được hiển thị.

Chú thích có điều kiện

Là loại chú thích chỉ có tác dụng trên trình duyệt Internet Explorer, các trình duyệt khác khi gặp chú thích này sẽ bỏ qua chúng.

Trình duyệt Internet Explorer từ phiên bản 5 (IE5) tới phiên bản 9 (IE9) sẽ hỗ trợ loại chú thích này.

Ví dụ,

[HTML]

<body>

<!--[if IE 9]>

<p>Bạn đang sử dụng trình duyệt IE9</p>

<![endif]-->

<p>Từ IE10 trở đi, không còn hỗ trợ chú thích có điều kiện nữa</p>

</body>

[Kết quả]

- Nếu trình duyệt là IE9 thì sẽ xuất thêm dòng chữ “Bạn đang sử dụng trình duyệt IE9”

Chú thích bằng thẻ <comment>

Một số trình duyệt cho phép sử dụng thẻ <comment> để tạo chú thích.

Sử dụng chú thích để che đoạn script

Sẽ học JavaScript sau, tuy nhiên cũng nên biết cách sử dụng này.

Với các trình duyệt cũ, có thể sử dụng chú thích của HTML để che đi đoạn mã JavaScript (hoặc VBScript) trong trường hợp trình duyệt không hỗ trợ đoạn script. Điều này giúp trang web hoạt động tốt trên các trình duyệt cũ.

Ví dụ,

[HTML]

<head>

<!--

document.write('chào bạn!');

//-->

</script>

</head>

[Kết quả]

Khi chạy đoạn mã trên, JavaScript sẽ xuất câu “chào bạn!” ra màn hình.

Ở đoạn mã trên nếu trình duyệt có hỗ trợ script, thì dấu “//” là chú thích của script, do vậy dấu “-->” không được thực hiện. Nếu trình duyệt không hỗ trợ script thì cặp dấu  sẽ vô hiệu đoạn mã script.

Sử dụng chú thích để che đoạn CSS

Sẽ học CSS sau, tuy nhiên cũng nên biết cách sử dụng này.

Với các trình duyệt cũ, có thể sử dụng chú thích của HTML để che đi đoạn mã CSS trong trường hợp trình duyệt không hỗ trợ đoạn CSS. Điều này giúp trang web hoạt động tốt trên các trình duyệt cũ.

Ví dụ,

[HTML]

<head>

<style>

<!--

.vi-du {

border: 1px solid red;

}

//-->

</style>

</head>

<body>

</body>

[Kết quả]

Ở đoạn mã trên nếu trình duyệt có hỗ trợ CSS, thì dấu “//” là chú thích của CSS, do vậy dấu “-->” không được thực hiện. Nếu trình duyệt không hỗ trợ CSS thì cặp dấu  sẽ vô hiệu đoạn mã của CSS.

Chạy thử đoạn mã trên, vì mặc định trình duyệt có hỗ trợ CSS, nên kết quả là chữ “Chào bạn.” được bao bởi hình chữ nhật màu đỏ.

Chú ý: mặc dù chú thích không hiển trị trên trang web, tuy nhiên khi vào chế độ view source thì vẫn thấy, để đảm bảo an toàn và giảm kích thước mã nguồn nên gỡ bỏ chú thích trước khi xuất bản website.