-----
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>
<div><!--
phần nội dung -->
<p>Phần
nội dung trang web</p>
</div><!--
/phần nội dung -->
</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]
<div><!-- phần <!-- nội --> dung -->
<p>Phần
nội dung trang web</p>
</div><!-- /phần nội dung -->
[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]
<div>< !-- phần
nội dung -->
<p>Phần nội
dung trang web</p>
</div><!-- /phần nội dung -->
[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ở (<!--) ở
trước hàng đầu tiên và đặt thẻ đóng (-->) ở 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>
-->
<div><!--
phần nội dung -->
<p>Phần
nội dung trang web</p>
</div><!--
/phần nội dung -->
</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>
<title>Lam
web</title>
<meta charset="utf-8">
<script>
<!--
document.write('chào
bạn!');
//-->
</script>
</head>
<body></body>
[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>
<title>Lam
web</title>
<meta charset="utf-8">
<style>
<!--
.vi-du {
border:
1px solid red;
}
//-->
</style>
</head>
<body>
<p
class="vi-du">Chào bạn.</p>
</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.
1.1.4 Bài tập và thực hành
Bài
tập 1. Viết lại các đoạn mã trong phần lý thuyết.
Bài tập 2. Làm theo clip sau: https://www.youtube.com/watch?v=x4q86IjJFag
1.1.5 Xem và đọc thêm
[1] HTML APIs, https://www.youtube.com/watch?v=EEhohSp0if4&list=PLyuRouwmQCjlBGMxI_0Ly_Dw-vrniOYNh
[2] Developer tools: https://www.youtube.com/watch?v=x4q86IjJFag
[3] Chú thích: https://www.youtube.com/watch?v=JG0pdfdKjgQ-
----
Cập nhật: 26/2/2023
Tải tài liệu đầy đủ: Tự học HTML căn bản