1. Tìm hiểu về thẻ <pre> trong HTML
Trình duyệt có quá trình auto format mã nguồn HTML. Tức là những dấu cách thừa, những xuống hàng trong mã nguồn HTML sẽ bị trình duyệt bỏ qua.
Ví dụ, nếu bạn gõ đoạn code sau trong mã nguồn HTML:
1 2 3 4 5 | Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks |
thì khi hiển thị trên trình duyệt sẽ như thế này:
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks |
Nếu bạn muốn ngăn trình duyệt không tự động format mã nguồn trong một đoạn code nào đó, bạn hãy dùng thẻ <pre>. Pre là viết tắt của chữ “pre-formatted”. (The <pre> tag defines preformatted text.)
Chữ bên trong thẻ <pre> sẽ hiển thị bằng fixed-width font (font monospace, font chữ mà kích thước và khoảng cách giữa các ký tự cách đều nhau, thường là font Courier), và như vừa mô tả, khoảng trống và các xuống dòng được giữ nguyên.
Ta chỉ dùng thẻ <pre> để hiển thị những đoạn nội dung đặc biệt, hoặc một số đoạn mã máy tính… Ngoài ra thẻ <pre> còn được dùng để trình bày mã nguồn HTML, CSS, JavaScript, PHP… ra ngoài trình duyệt cho dễ đọc.
CSS mặc định cho thẻ <pre>
Phần lớn các trình duyệt sẽ hiển thị nội dung trong thẻ <pre> với các giá trị mặc định sau:
1 2 3 4 5 6 | pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; } |
2. Một số ví dụ về trang trí sử dụng thẻ <pre>
Hình 1 – Ngôi nhà (bạn nhớ thay [pre] bằng <pre> nhé):
[pre] 。 .. __::_______ ★。 ☆ /__________/ \ 。。 。 | _ 画_画 _ |_'| ☆ 。 |__ღ.ღ.ღ ღ.ღ ღ___| [/pre] |
Hình 2 – Mario:
[pre] ── ── ── ── ── ── ── ██ ██ ██ ██ ── ██ ██ ██ ── ── ── ── ── ── ██ ██ ▓▓ ▓▓ ▓▓ ██ ██ ░░ ░░ ░░ ██ ── ── ── ── ██ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ██ ── ── ── ██ ▓▓ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ░░ ░░ ██ ── ── ██ ▓▓ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ░░ ██ ── ── ██ ▓▓ ██ ██ ░░ ░░ ░░ ░░ ░░ ░░ ██ ██ ██ ── ── ██ ██ ██ ██ ░░ ░░ ░░ ██ ░░ ██ ░░ ██ ▓▓ ▓▓ ██ ── ██ ░░ ██ ██ ░░ ░░ ░░ ██ ░░ ██ ░░ ██ ▓▓ ▓▓ ██ ██ ░░ ░░ ██ ██ ██ ░░ ░░ ░░ ░░ ░░ ░░ ░░ ██ ▓▓ ██ ██ ░░ ░░ ░░ ██ ░░ ░░ ██ ░░ ░░ ░░ ░░ ░░ ██ ▓▓ ██ ── ██ ░░ ░░ ░░ ░░ ██ ██ ██ ██ ░░ ░░ ██ ██ ██ ── ── ── ██ ██ ░░ ░░ ░░ ░░ ██ ██ ██ ██ ██ ▓▓ ██ ── ── ── ── ██ ██ ██ ░░ ░░ ░░ ░░ ░░ ██ ▓▓ ▓▓ ██ ── ── ░░ ██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ▓▓ ██ ── ── ── ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ██ ░░ ░░ ░░ ██ ██ ── ── ── ██ ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ░░ ░░ ██ ── ── ── ██ ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ░░ ░░ ██ ── ── ── ██ ██ ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ██ ██ ██ ██ ── ── ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ── ── ── ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ██ ── ██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ ██ ██ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ ██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ ██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ── ── ── ██ ▓▓ ▓▓ ██ ██ ██ ▓▓ ▓▓ ██ ██ ── ── ── ── ── ── ── ██ ██ ██ ── ── ██ ██ ── ── ── ── ── ── ── ── ── ── ── ── ── [/pre] |
Hình 3 – Trái tim:
[pre] _░▒███████ ░██▓▒░░▒▓██ ██▓▒░__░▒▓██___██████ ██▓▒░____░▓███▓__░▒▓██ ██▓▒░___░▓██▓_____░▒▓██ ██▓▒░_______________░▒▓██ _██▓▒░______________░▒▓██ __██▓▒░____________░▒▓██ ___██▓▒░__________░▒▓██ ____██▓▒░________░▒▓██ _____██▓▒░_____░▒▓██ ______██▓▒░__░▒▓██ _______█▓▒░░▒▓██ _________░▒▓██ _______░▒▓██ _____░▒▓██ [/pre] |
Hình 4 – Chuột Mikey:
[pre] ______________$$$$$$$ _____________$$$$$$$$$ ____________$$$$$$$$$$$ ____________$$$$$$$$$$$ ____________$$$$$$$$$$$________________$$$$$$$$_______$$$$$$$$ _____________$$$$$$$$$_______________$$$$$$$$$$$_____$$$$$$$$$$$ _____$$$$$$_____$$$$$$$$$$__________$$$$$$$$$$$$$___$$$$$$$$$$$$$ ____$$$$$$$$__$$$$$$_____$$$_______$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ___$$$$$$$$$$$$$$$$_________$______$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ___$$$$$$$$$$$$$$$$______$__$_______$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ___$$$$$$$$$$$$$$$$_____$$$_$________$$$$$$$$$$$$$$$$$$$$$$$$$$$ ___$$$$$$$$$$$__________$$$_$_____$$__$$$$$$$$$$$$$$$$$$$$$$$$$ ____$$$$$$$$$____________$$_$$$$_$$$$___$$$$$$$$$$$$$$$$$$$$$ ______$$$__$$__$$$______________$$$$______$$$$$$$$$$$$$$$$$$ ___________$$____$_______________$__________$$$$$$$$$$$$$$ ___________$$____$$$____________$$____________$$$$$$$$$$ _______________$$$_$$$$$$_$$$$$__________________$$$ ________________$$____$$_$$$$$ _______________$$$$$___$$$$$$$$$$ _______________$$$$$$$$$$$$$$$$$$$$ _______________$$_$$$$$$$$$$$$$$__$$ _______________$$__$$$$$$$$$$$___$_$ ______________$$$__$___$$$______$$$$ ______________$$$_$__________$$_$$$$ ______________$$$$$_________$$$$_$_$ _______________$$$$__________$$$__$$ _____$$$$_________$________________$ ___$$$___$$______$$$_____________$$ __$___$$__$$_____$__$$$_____$$__$$ _$$____$___$_______$$$$$$$$$$$$$ _$$_____$___$_____$$$$$_$$___$$$ _$$_____$___$___$$$$____$____$$ __$_____$$__$$$$$$$____$$_$$$$$ __$$_____$___$_$$_____$__$__$$$$$$$$$$$$ ___$_____$$__$_$_____$_$$$__$$__$______$$$ ____$$_________$___$$_$___$$__$$_________$ _____$$_$$$$___$__$$__$__________________$ ______$$____$__$$$____$__________________$ _______$____$__$_______$$______________$$ _______$$$$_$$$_________$$$$$$$__$$$$$$ __________$$$_________________$$$$$ [/pre] |
Hình 5:
[pre] _____________________________________________▄▄█▀ _________________________________________▄▄█▓█ ______________________________▓▓▓___▄▄█▓▓▓█▄▄██████████▄ ___________________________▓▓░░░▓▓█▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓███▄▄ _________________________▓▓░░░░░░▓▓▓▓▓▓█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▄ ________________________▓░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▄ _______________________▓░░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓█▓▓ ____________________▄█▓░░░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▓▓░░▓▄ _________________▄█▓▓░░░▓░░░░░░░▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓░░░▓▓█ ______________▄█▓▓▓▓░░▓░░░░░░░░▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓░▓░░░▓▒▒█▄ ____________▄█▓▓▓▓▓░░▓░░░░░░░░░▓▓▒▒▒▒▒▒▒▒▒▒█████████▒▓▓░░░▓░░▓▒▒▒▒█▄ __________▄█▓▓▓▓▓▓░░▓░░░░░░░░░▓████████████▓▓▓▓▓▓▓▓█▓▓░░░░▓▓▓▒▒▒▒▒▒█ ________▄█▓▓▓▓▓▓▓░░▓░░░░░░░░░░░░░░░░░░░░░░███▓▓▓▓▓▓██▓░░░░░▓▒▒▒▒▒▒▒█▌ _______█▓▓▓▓▓▓▓▓░░▓░░░░░░░░░░░▌░░░░░░░░░░░░░░██▓▓▓▓▓▓██░░░▓▒▒▒▒▒▒▒▒▒█ ______█▓▓▓▓▓▓▒▓░░░▓░░░░░░░░▄░░▌░░░░░░░░░░░░░░░▓█▓▓▓▓▓▓▓█░▓██▒▒▒▒▒▒▒▒█ _____█▓▓▓▓▓▓▒▒▓░░░▓░░░░░░░░▐░░▀▄▄░░░░░░░░░░░░▓░░█▓▓▓▓▓▓█▓▒▒▒███▒▒▒▒▒█ ____█▓▓▓▓▓▓▒▒▒▓░░░▓░░░░░░▄░░▀▄▄▌_▀█▄░░░░░░░░░░▓█▓▓▓▓▓▓▓█▒▒▒▓▓▓▓██▒▒▒█ __██▓▓▓▒▓▒▒▒▒▓░░░░░░░░░░░▀▄▄▄▌______▀█▄░░░░░░██▓▓▓▓▓▓▓█▓▒▓▓▓▓▓▓▓▓█▒▒█▌ _██▓▓▓▒▒▒▒▒▒▒▓░░░░░░░░░░░░░░▐________▓▓█▄░░░░█▓▓▓▓▓▓▓█░░▓▓▓▓▓▓▓▓▓▓█▒▒█ _██▓▓▓▒▒▒▒▒▒▓▓░░░░░░░░░░░░░░▌_______▓▓▓██▄░░█▓▓▓▓▓███░░░▓▓▓▓▓▓▓▓▓▓▓█▒█ _█▒█▓▓▒▒▒▒▒▒▓▓░░░░░░░░░░░░░░▌______▓▓▓███_▀▄░█▓▓▓▓█░░░░░▓▓▓▓▓▓▓▓▓▓▓▒██ █▒▒█▓▓▒▒▒▒▒▓▓▓░░░░░░░░░░░░▄▀▌_____▓▓████▌__▀▄░███▓▓██░░░▓▓▓▓▓▒▒▒▓▓▒▒▒█ █▒▒▒█▓▒▒▒▒▒▓▓░▓░░░░░░░░░░▀░▄▀▄____▓▓████▄___▀▄░▄▓██░░░░░▓▄▓▒▒▒▒▒▓▒▒▒▒█ █▒▒▒▒█▒▒▒▒▒▓▓░░░░░░░░░░░░░▀░▄▀▄___▓▓███▀▀█▄▄█▀░░█▄▄██▀█▀▒▄▒▒▒▒▒▒▒▒▒▒█ _█▓▒▒▒▒█▒▒▒▓▓▓░░░░░░░░░░░░░░▀░░░░░▓▓▓██▄▄███░░░░░▌▓█▌_▐▀▀▒▒▒▒▒▒▒▒▒▒▒█ _█▓▒▒▒▒▒█▒▒▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░░░░▐_▓██▄▓▀▀████▒▒▒▒▒▒█ _█▓▓▒▒▒▒▒█▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▐▓██_█▓▒▒▒▒▒▒███▀▀▀ _█▓▓▓▒▒▒▒▒███▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▐▓██▄▓▒▒▒▒▒▒█ _█▓▓▓▓▒▒▒▒▒▒▒████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓▓▓▒▒▒▒▓▓█ _█▒▓▓▓▓▓▓▒▒▒▒▒▒▒▒████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▒▒▓▓█ __█▒▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒██░░░░░░░░░░░░░░░░░░░▓░░░░░▓░░░░▓▒▓▓▓█ ___█▒▒▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒██░░░░░░░░░░░░░░░░░░▓░░░░░░░░▓▒▒▓▓▓█▌ ___█▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒██░░░░░░░░░░░░░░░░░▓░░░░░▓▓▒▒▓▓▒▓▓█ ____█▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒█▓▓▓▓▓░░░░░░░░░░░▓▓▓▓▓▓_█▒▒▒▒▒▓▓▓█ _____█▒▒▒▒▒▒▒▒▒▓▓▓▓▒▒▓▓▓▓▓▒▒█______▓▓▓▓▓▓▓▓▓▓__________▀█▒▒▒▒▓▓▓█ ______█▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▒█______________________________▀█▒▒▒▓▓▓█ _______▀█▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓█_______________________________█▒▒▒▓▓█ _________▀▀█▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓█_______________________________█▒▒▓▓█ _____________▀█▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓█_____________________________█▒▒▓█▀ _______________▀▀▀█▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓█____________________________█▒▓█▀ ____________________▀▀▀████▒▒▒▒▒▒▒▓█__________________________▄██▀▀ ________________________█▓▓▓██████▒▒█ _________________________█▓▓▓▓▓▒▒▒███ _________________________█▓▓▓▓▓▒▒▒▒▒█ _________________________█▓▓▓▒▓▒▒▒▒█ ________________________█▓▓▓▒▒▒▒▒▒█ _______________________█▓▓▒▒▒▒▒▒█▀ ____________________▄█▓▓▒▒▒▒▒█▀ _______________▄▄▄█▓▓▒▒▒██▀▀ ____________________▀▀▀▀▀ [/pre] |
Bạn có thể xem thêm một số hình khác tại http://fsymbols.com/text-art/blocky/ hoặc lên mạng search với từ khóa “Text Art” hoặc “ASCII Art” sẽ cho ra rất nhiều hình đẹp khác.
Cheers,
The following two tabs change content below.
Lục Đức Thành
Giáo viên at FPT Arena
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.
Latest posts by Lục Đức Thành (see all)
- Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
- Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
- WordPress 5 có gì mới? - 23/12/2018
- Sublime Text 3 Portable Windows 64 bit - 11/12/2017
- Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017