Mã lập trình trong HTML

Trang web dạy lập trình như Tự Học Tin cần hiển thị mã nguồn, phím tắt, kết quả chương trình. HTML có các phần tử code, kbd, samp, var và pre cho mục đích này.

20 phútCơ bản
Bạn sẽ học được
  • Hiển thị mã bằng code và pre
  • Ghi phím tắt bằng kbd
  • Ghi kết quả chương trình bằng samp, biến bằng var
  • Viết ký tự < > trong mã

Khái niệm và lý thuyết

Các phần tử này hiển thị bằng phông chữ đều nét (monospace). Khi hiển thị mã HTML trong trang, phải thay < bằng &lt; và > bằng &gt;, nếu không trình duyệt sẽ hiểu đó là thẻ thật.

kbd, samp, var, code

<p>Nhấn <kbd>Ctrl</kbd> + <kbd>S</kbd> để lưu.</p>
<p>Kết quả: <samp>Hello, world!</samp></p>
<p>Diện tích: <var>S</var> = <var>a</var> × <var>b</var></p>
<p>Dùng hàm <code>print()</code> để in ra màn hình.</p>
Kết quả hiển thị

Nhấn Ctrl + S để lưu.

Kết quả: Hello, world!

Diện tích: S = a × b

Dùng hàm print() để in ra màn hình.

Khối mã nhiều dòng

<pre><code>for i in range(3):
    print("Xin chào", i)</code></pre>
Kết quả hiển thị
for i in range(3):
    print("Xin chào", i)
<pre><code>&lt;p&gt;Đây là mã HTML hiển thị dạng chữ&lt;/p&gt;</code></pre>
Kết quả hiển thị
<p>Đây là mã HTML hiển thị dạng chữ</p>
Mẹo hay

Dùng thư viện tô màu cú pháp như Prism.js hoặc highlight.js để khối mã đẹp và dễ đọc hơn.

Thực hành
  1. Viết hướng dẫn 5 phím tắt Windows dùng kbd.
  2. Hiển thị một chương trình Python 5 dòng bằng pre + code.
  3. Hiển thị chính mã HTML của một liên kết lên trang.
Tóm tắt bài học
  • code cho mã trong dòng; pre + code cho khối mã.
  • kbd phím, samp kết quả, var biến.
  • Thay < > bằng &lt; &gt; khi hiển thị mã HTML.