Bài 11: Hiển thị code máy tính trong HTML
Tại sao phải sử dụng các thẻ hiển thị code máy tính 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 máy tính trong HTML
Thẻ code
<code>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>Đị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 :
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.189
Thẻ <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>Kết quả:
var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y;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>.Result:
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 |
1 phản hồi
[…] <code> […]