NỘI DUNG BÀI VIẾT
Tại sao phải sử dụng các thẻ hiển thị code trong HTML?
Trong các chương trình soạn thảo văn bản, bạn định dạng văn bản khá đơn giản, bạn có thể gõ các bàn phím trên bàn phím của bạn. Khi bạn muốn các khoảng trắng bạn có thể ấn phím Space, Tab hoặc phím Enter để xuống dòng. Các ký tự sẽ được giữ giống như bạn gõ (đây được gọi là “monospaced type”).
Trong khi đó, trong chế độ đồ hoạ của các trình duyệt Web, các định dạng của tài liệu dựa trên tệp HTML và CSS của bạn, và nó có xu hướng bỏ qua rất nhiều các ký tự khoảng trắng. Khi bạn ấn phím Enter trong code HTML, trình duyệt sẽ bỏ qua ký tự này. Vì vậy giải thích tại sao bạn phải sử dụng thẻ p để thực hiện bắt đầu một đoạn mới.
Vì vậy để hiển thị dữ liệu trên trang web giống như code bạn viết trên máy tính bạn cần phải sử dụng các thẻ hiển thị code trong HTML.
Thẻ code trong HTML
Cú pháp:
<code> đoạn mã code </code>
<code>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
Kết quả:
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
Định dạng code máy tính trong HTML
Như giải thích phần trên, HTML thường sử dụng các ký tự và các khoảng trắng thay đổi, như các ký tự <>& sẽ không hiển thị được trên trên duyệt hoặc trường hợp có nhiều khoảng trắng thì trình duyệt sẽ chỉ dữ lại một.
Đây là điều không muốn khi hiển thị các ví dụ code máy tính.
Các thẻ <kbd>, <samp>, và <code> tất cả hỗ trợ sửa kích cỡ chữ và khoảng cách.
Thẻ <kbd> cho đầu vào bàn phím
Thẻ <kbd> báo cho người sử dụng nhập vào từ bàn phím :
Ví dụ:
<kbd>File | Open…</kbd>
Kết quả:
File | Open…Thẻ <samp> cho đầu ra máy tính
Phần tử HTML <samp> định nghĩa mẫu đầu ra từ một chương trình máy tính:
Ví dụ:
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
Kết quả:
demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189Thẻ <code> cho code máy tính
Thẻ <code> sử dụng cho code máy tính trên trang web của bạn. Thường các trình soạn thảo code cho phép bạn hiển thị màu sắc cho các từ khoá, có một công cụ của bên thứ 3 viết bằng JavaScript, bạn có tham khảo thư viện highlight.js để hiển thị màu cho đoạn code của bạn.
Ví dụ:
<code class=”js”>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
Chú ý rằng <code> không giữ các khoảng trắng và các dấu xuống dòng.
Để giải quyết vấn đề này, bạn đặt thẻ <code> trong thẻ <pre>:
Ví dụ:
<pre>
<code class=”js”>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
</pre>
Kết quả:
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
Thẻ <var> cho các biến
Thẻ <var> định nghĩa cho biến.
Các biến có thể là một biến trong một biểu thức toán học hoặc một biến trong ngữ cảnh chương trình:
Ví dụ:
Einstein viết: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
Kết quả:
Einstein viết: E = mc2.Phần tử mã code trong HTML
| Thẻ | Mô tả |
|---|---|
| <code> | Định nghĩa mã code chương trình |
| <kbd> | Định nghĩa đầu vào bàn phím |
| <samp> | Định nghĩa cho đầu ra máy tính |
| <var> | Định nghĩa một biến |
| <pre> | Định nghĩa văn bản giữ nguyên định dạng |
Kết luận
Qua đây là một số chia sẻ về thẻ hiển thị code trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
