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ả 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) để viết mã 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ỉ 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 không biết gì, thì nên xem và làm theo, vì 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 tìm cách sửa các lỗi gặp phải lúc viết mã.
Thông thường, 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 người học có thể phân tích mã để 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ì 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 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 của trang web.
– 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 ý là các chỉnh sửa ở trên 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)
2.7.6 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)[1] 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.
2.7.7 Công cụ soạn mã (text editor và IDE)
Như đã biết, mã nguồn của trang web là văn bản thô (plain text), do vậy có thể sử dụng bất kì trình soạn thảo nào cho phép nhập và lưu văn bản thô là có thể viết mã nguồn được. Văn bản thô là văn bản không bao gồm thông tin định dạng (ví dụ in đậm, màu sắc, gạch chân), văn bản soạn thảo bằng Microsoft Word đã có thông tin định dạng (formatted text), vì vậy không thể dùng Microsoft Word để viết mã nguồn.
Có nhiều công cụ để viết mã, và được chia thành hai loại: text editor và IDE.
Text editor
Text editor là trình soạn thảo văn bản thô, cho phép lập trình viên có thể viết mã nguồn và lưu lại thành một tập tin. Tuy nhiên, hiện nay các text editor rất tiện dụng, linh hoạt và cho phép tích hợp thêm rất nhiều các chức năng nhằm hỗ trợ việc lập trình tốt hơn. Ưu điểm của text editor là gọn, nhẹ.
IDE
IDE (Integrated Development Environtment – môi trường phát triển tích hợp) là một phần mềm được sử dụng để viết mã, tuy nhiên ngoài chức năng của một text editor, nó còn được tính hợp thêm nhiều chức năng khác, ví dụ như:
– Trình biên/thông dịch
– Tìm và sửa lỗi (debug)
– Tự động chèn mã (Autocompletion)
– Tự động báo lỗi khi viết mã
– Gợi ý các hàm, biến
IDE thường có dung lượng lớn.
Khi mới học thì nên lựa chọn các công cụ viết mã đơn giản để có thể hiểu được bản chất của các ngôn ngữ lập trình. Khi làm việc thì chọn cái nào giúp việc lập trình nhanh và hiệu quả. Tùy thuộc vào ngôn ngữ và môi trường lập trình để lựa chọn công cụ viết mã cho phù hợp.
Ví dụ, một số kĩ năng nên biết khi dùng Sublime Text |
– Cài và sử dụng được gói Emmet – Sử dụng được chức năng “lorem” để tạo văn bản ngẫu nhiên – Gõ code nhanh (ví dụ, kiểu như gõ html:5 rồi gõ phím Tab, ul>li*5 rồi gõ phím Tab) – Sử dụng được đa con trỏ – Đổi màu sắc của code, nhìn cho dễ chịu và hợp với bản thân – Cài đặt và chọn theme theo ý thích |
Bảng sau là một số công cụ soạn mã được dùng trong lập trình web (2018) (theo khảo sát của stackoverflow):
Tên công cụ | Text editor | IDE | Số lượng người dùng |
Visual Studio Code | X | 38.7% | |
Visual Studio | X | 35.7% | |
Notepad++ | X | 34.5% | |
Sublime Text | X | 30.2% | |
IntelliJ | X | 26.5% | |
Vim | X | 26.1% | |
Eclipse | X | 18.7% | |
Atom | X | 18.6% | |
Android Studio | X | 17.6% | |
PyCharm | X | 11.4% | |
PHPStorm | X | 10.7% | |
Xcode | X | 8.8% | |
NetBeans | X | 8.4% | |
… |
.jpg)
.jpg)
0 Nhận xét