Tạo Chữ Chạy (Marquee) Trong HTML
Có thể bạn quan tâm
Chắc bạn không xa lạ với hiệu ứng dòng chữ chạy. Dòng chữ chạy xuất hiện rất nhiều trong đời sống, ví dụ như trong chương trình thời sự, trên các biển quảng cáo, ... Dòng chữ chạy trên web cũng như vậy. Một dòng chữ chạy trong HTML là một phần cuốn văn bản được hiển thị dọc theo chiều ngang hay dọc theo chiều dọc trang của bạn phụ thuộc vào các thiết lập. Nó được tạo ra bằng cách sử dụng thẻ <marquees>.
Ghi chú: Thẻ <marquee> này có thể không được hỗ trợ bởi khá nhiều trình duyệt vì thế chúng tôi đề nghị bạn không nên tin tưởng vào thẻ này. Thay vào đó, bạn có thể sử dụng JavaScript và CSS để tạo ra các hiệu ứng như trên.
Cú pháp của thẻ marquee trong HTML
Cú pháp đơn giản để sử dụng thẻ <marquee> như sau:
<marquee tên-thuộc-tính="giá-trị-thuộc-tính".... các-thuộc-tính-khác> một hoặc nhiều dòng text hoặc hình ảnh </marquee> Quảng cáoCác thuộc tính của thẻ <marquee> trong HTML
Bảng dưới đây liệt kê các thuộc tính quan trọng có thể được sử dụng với thẻ <marquee>.
Thuộc tính | Miêu tả |
---|---|
width | Xác định độ rộng của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
height | Xác định chiều cao của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
direction | Xác định chiều hướng mà marquee sẽ được cuốn. Giá trị có thể là up, down, left, hoặc right. |
behavior | Xác định kiểu cuộn của dòng chạy. Giá trị có thể là scroll, slide và alternate. |
scrolldelay | Xác định khoảng thời gian dừng lại khi xong một lần cuốn. Giá trị có thể là 10…. |
scrollamount | Xác định tốc độ của dòng chạy. Giá trị có thể là 10…. |
loop | Xác định khoảng thời gian của vòng lặp. Giá trị mặc định là INFINITE, nghĩa là các marquee lặp đi lặp lại vô hạn. |
bgcolor | Xác định màu nền, sử dụng tên màu hoặc giá trị thập lục phân của màu. |
hspace | Xác định khoảng cách chiều ngang của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
vspace | Xác định khoảng cách dọc của dòng chạy. Giá trị có thể là 10 hoặc 20% ... |
Dưới đây là một số ví dụ tập trung vào cách sử dụng thẻ marquee trong HTML.
Ví dụ - 1
<!DOCTYPE html> <html> <head> <title>Vi du the marquee trong HTML</title> </head> <body> <marquee>Hoc HTML tai VietJack - Vi du cach su dung the marquee.</marquee> </body> </html>Nó sẽ tạo ra kết quả là:
Hoc HTML tai VietJack - Vi du cach su dung the marquee. Quảng cáoVí dụ - 2
<!DOCTYPE html> <html> <head> <title>Vi du the marquee trong HTML</title> </head> <body> <marquee width="50%">Hoc HTML tai VietJack - Vi du cach su dung the marquee (width=50%)</marquee> </body> </html>Đoạn mã trên tạo kết quả sau:
Hoc HTML tai VietJack - Vi du cach su dung the marquee (width=50%)Ví dụ - 3
<!DOCTYPE html> <html> <head> <title>Vi du the marquee trong HTML</title> </head> <body> <marquee direction="right">Hoc HTML tai VietJack - Vi du cach su dung the marquee (direction="right")</marquee> </body> </html>Kết quả là:
Hoc HTML tai VietJack - Vi du cach su dung the marquee (direction="right")Ví dụ - 4
<!DOCTYPE html> <html> <head> <title>Vi du the marquee trong HTML</title> </head> <body> <marquee direction="up">Hoc HTML tai VietJack - Vi du cach su dung the marquee (direction="up")</marquee> </body> </html>Dưới đây là kết quả khi chạy đoạn code trên:
Hoc HTML tai VietJack - Vi du cach su dung the marquee (direction="up")Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML phổ biến khác tại vietjack.com:
- HTML - Comment
- HTML - Hình ảnh
- HTML - Tạo bảng
- HTML - Tạo danh sách
- HTML - Thiết lập Background
- HTML - Thiết lập màu
- HTML - Thiết lập Font
- HTML - Form trong HTML
160 bài học ngữ pháp tiếng Anh hay nhất
155 bài học Java tiếng Việt hay nhất
100 bài học Android tiếng Việt hay nhất
247 bài học CSS tiếng Việt hay nhất
197 thẻ HTML cơ bản
297 bài học PHP
101 bài học C++ hay nhất
97 bài tập C++ có giải hay nhất
208 bài học Javascript có giải hay nhất
Từ khóa » Hiệu ứng Chữ Html
-
65 Text Effect CSS Cho Trang Web - Niềm Vui Lập Trình
-
14 Hiệu Ứng Chạy Chữ HTML (Marquee) - Niềm Vui Lập Trình
-
7 Hiệu ứng HTML Tuyệt Vời Ai Cũng Có Thể Thêm Vào Website Của Mình
-
Tạo Hiệu ứng Bắt Mắt Cho Text Bằng CSS - Viblo
-
Dùng CSS để Tạo Hiệu ứng Bắt Mắt Cho Text, Tại Sao Không?
-
Code Hiệu ứng Chuyển động Cho Chữ (Text Animation) - TuongAds
-
35 Hiệu ứng Văn Bản CSS Khác Cho Trang Web Của Bạn
-
Hiệu ứng Chữ đáng Kinh Ngạc Bằng CSS - Kipalog
-
Cách Tạo Hiệu ứng Chuyển động Cho Phần Tử HTML - Web Cơ Bản
-
Đổ Bóng Text-shadow Và Chuyển Chữ Text-transform CSS
-
Bài 5: Hiệu ứng Chữ Chuyển động Trong Html - YouTube
-
Hướng Dẫn Làm Hiệu ứng Text Animation Với HTML & CSS - YouTube
-
CODE HTML LÀM ẢNH HOẶC TEXT CHẠY TRÊN WEB, BLOG
-
Tạo Dòng Chữ Chạy Trong HTML, Thẻ Marquee Trong ... - Hoclaptrinh