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 :

Ví dụ:

<kbd>File | Open…</kbd>

Kết quả:

File | Open...

Xem kết quả


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

Xem kết quả


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;

Xem kết quả

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;

Xem kết quả


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.

Xem kết quả


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

 

Có thể bạn sẽ thích…

1 phản hồi

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0 Shares
Share via
Copy link
Powered by Social Snap