HTML - ASCII Codes: A Comprehensive Guide for Beginners
Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các mã ASCII và vai trò của chúng trong HTML. Đừng lo lắng nếu bạn chưa từng nghe về ASCII trước đây - đến cuối bài hướng dẫn này, bạn sẽ trở thành một chuyên gia ASCII!
What is ASCII?
ASCII có nghĩa là American Standard Code for Information Interchange. Nó giống như một mã bí mật mà các máy tính sử dụng để hiểu các chữ cái, con số và ký hiệu. Hãy tưởng tượng bạn đang trao đổi thông điệp trong lớp, nhưng thay vì viết từ, bạn sử dụng các số để đại diện cho mỗi chữ cái. Đó là điều mà ASCII làm cho máy tính!
HTML Codes - Table of ASCII Characters and Symbols
Hãy bắt đầu với một sự thật thú vị: Bạn có biết rằng mỗi ký tự bạn gõ trên bàn phím đều có một mã ASCII duy nhất không? Đúng vậy! Dưới đây là bảng hiển thị một số mã ASCII phổ biến:
| Character | ASCII Code |
|---|---|
| A | 65 |
| a | 97 |
| 0 | 48 |
| Space | 32 |
Trong HTML, chúng ta có thể sử dụng các mã này để hiển thị các ký tự. Dưới đây là cách thực hiện:
<p>The letter A: A</p>
<p>The letter a: a</p>
<p>The number 0: 0</p>Khi bạn xem điều này trong trình duyệt, nó sẽ hiển thị:
The letter A: A The letter a: a The number 0: 0
Đúng không? Nó giống như chúng ta đang nói ngôn ngữ máy tính!
Why Use ASCII Codes in HTML?
Bạn có thể tự hỏi, "Tại sao phải phiền phức với các mã này khi tôi có thể chỉ cần gõ chữ?" Câu hỏi tuyệt vời! Đôi khi, một số ký tự có thể không hiển thị chính xác trên tất cả các thiết bị hoặc trình duyệt. Sử dụng các mã ASCII đảm bảo rằng nội dung của bạn xuất hiện chính xác như bạn mong muốn, không phụ thuộc vào hệ thống của người dùng.
ASCII Device Control Characters
Bây giờ, hãy nói về một số ký tự ASCII đặc biệt mà bạn không thể thấy nhưng rất quan trọng. Đây được gọi là các Ký tự Điều khiển Thiết bị, và chúng giúp điều khiển cách văn bản được hiển thị hoặc xử lý.
Ví dụ:
- ASCII 10 ( ) là Ký tự Thoát Dòng
- ASCII 13 ( ) là Ký tự Trở Lại Dòng
Dưới đây là cách bạn có thể sử dụng chúng:
<p>This is line 1. This is line 2.</p>Điều này sẽ hiển thị như sau:
This is line 1. This is line 2.
Printable ASCII Characters
Các ký tự ASCII in được là những ký tự bạn có thể thực sự nhìn thấy trên màn hình. Chúng bao gồm các chữ cái, con số, dấu câu và một số ký hiệu. Hãy nhìn qua một vài ví dụ:
<p>Exclamation mark: !</p>
<p>Dollar sign: $</p>
<p>Percentage sign: %</p>Điều này sẽ hiển thị như sau:
Exclamation mark: ! Dollar sign: $ Percentage sign: %
A Fun ASCII Art Example
Muốn thấy điều gì đó thú vị? Chúng ta có thể sử dụng các ký tự ASCII để tạo ra các hình ảnh đơn giản! Hãy nhìn xem:
<pre>
___________
/ \
/ ASCII Art \
\ is fun! /
\___________/
</pre>Điều này sẽ tạo ra mộtspeech bubble đơn giản trong trình duyệt của bạn. Đẹp mắt phải không?
Extended ASCII Codes
Bây giờ, hãy đi sâu hơn một chút. Các mã ASCII mở rộng cho phép chúng ta đại diện cho nhiều ký tự hơn, bao gồm các chữ cái có dấu và các ký hiệu đặc biệt. Các mã này có giá trị từ 128 đến 255.
Dưới đây là một ví dụ:
<p>Copyright symbol: ©</p>
<p>Euro sign: €</p>
<p>Registered trademark: ®</p>Điều này sẽ hiển thị như sau:
Copyright symbol: © Euro sign: € Registered trademark: ®
Practical Use of Extended ASCII
Hãy tưởng tượng bạn đang tạo một trang web cho một quán cà phê ở Paris. Bạn có thể sử dụng các mã ASCII mở rộng để hiển thị chính xác các từ tiếng Pháp có dấu:
<p>Café au lait</p>
<p>Crème brûlée</p>Điều này đảm bảo rằng "Café au lait" và "Crème brûlée" hiển thị chính xác, ngay cả khi hệ thống của người dùng không hỗ trợ các ký tự tiếng Pháp.
Conclusion
Và đây bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới kỳ diệu của các mã ASCII trong HTML. Từ các chữ cái cơ bản đến các ký hiệu phức tạp, bạn bây giờ đã biết cách sử dụng các mã này để đảm bảo nội dung web của bạn hiển thị chính xác và sáng tạo.
Nhớ rằng, thực hành làm nên hoàn hảo. Hãy thử tạo một trang HTML đơn giản và thử nghiệm với các mã ASCII khác nhau. Bạn có thể ngạc nhiên với những gì bạn có thể tạo ra!
Trước khi kết thúc, đây là một thử thách nhanh cho bạn: Bạn có thể tạo một biểu tượng smiley chỉ sử dụng các mã ASCII không? Gợi ý: Bạn sẽ cần ☺ (☺).
Chúc bạn vui vẻ khi mã hóa, và hy vọng các trang web của bạn luôn hiển thị chính xác như bạn mong muốn!
Credits: Image by storyset