BÀI 2 : THIẾT KẾ WEB TĨNH
4. Multimedia trên trang Web
Mục tiêu: Xây dựng được các ứng dụng Multimedia;
4.1. Đặt màu nền
Dùng Thuộc tính BGCOLOR (Background Color) kèm thẻ <BODY> để đặt màu nền cho văn bản. Cú pháp như sau:
<BODY BGCOLOR="#rrggbb"> Nội dung của tài liệu
</BODY>
trong đó "#rrggbb" là red-green-blue, bộ ba số hai chữ số hệ đếm 16, xác định mã màu.
4.2. Màu chữ của văn bản
Thuộc tính TEXT. Thuộc tính này để thiết lập màu cho các con chữ trong văn bản, trừ các đầu mối liên kết phải có màu khác đi.
<BODY TEXT="#rrggbb"> Nội dung của tài liệu </BODY>́
4.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK
Ba thuộc tính trên để đặt màu của các đầu mối siêu liên kết.
- LINK - đặt màu hiển thị trước khi nhấn chuột vào để đến thăm đích liên kết.
- VLINK - Đặt màu sau khi đích liên kết đã được đến thăm (visited) - ALINK - đặt màu khi bạn kích hoạt, đang nhấn chuột vào (active) Các màu mặc định là: LINK=blue, VLINK=purple and ALINK=red <BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Nội dung của tài liệu </BODY>
4.4. Thuộc tính và mã màu
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Thuộc tính Mô tả
BGCOLOR Đặt màu nền
TEXT Đặt màu các con chữ, trừ các mối nối.
LINK Đặt màu ban đầu của đầu mối liên kết khi chưa kích hoạt
VLINK Đặt màu đầu mối liên kết khi đã thăm đích
ALINK Đặt màu đầu mối liên kết khi kích hoạt
4.5. Nạp hình ảnh làm nền cho trang văn bản
Thuộc tính BACKGROUND
Có thể dùng thuộc tính này để tạo một ảnh nền cho trang tài liệu siêu văn bản. Thay cho xác định màu ta cần chỉ ra tên tệp hình ảnh kèm đường dẫn.
<BODY BACKGROUND ="đường dẫn tới tệp ảnh"> Nội dung tài liệu
</BODY>́ Ví dụ:
<BODY BACKGROUND="images/backgnd.gif">
Thuộc tính bgproperties
Nhiều trang web có nền trang trí gắn chặt cố định, còn phần văn bản sẽ cuộn trôi bên trên mỗi khi ta di chuyển thanh trượt. Hiệu ứng này được tạo ra nhờ thiết lập thêm thuộc tính cho ảnh nền là bgproperties="fixed"
Ví dụ:
<BODY BACKGROUND="images/backgnd.gif" bgproperties="fixed">
4.6. Chèn ảnh - thẻ <IMG…>
Cú pháp chèn ảnh vào trang Web: <IMG SRC=”URL”>
IMG (Image), thuộc tính SRC (Source) là đường dẫn đến nơi lấy tệp ảnh. Giá trị của thuộc tính SRC được gán bằng URL là một địa chỉ trên máy tính địa phương hay trên Internet. Nó chỉ ra nơi lưu trữ tệp ảnh cần chèn vào.
Địa chỉ URL báo cho trình duyệt biết cần lấy tệp ảnh ở đâu.
Nếu tệp ảnh nằm ngay trên máy tính địa phương thì cần ghi rõ đường dẫn Nếu tệp ảnh lấy từ một nơi khác trên Internet thì phải ghi đầy đủ địa chỉ URL
Ví dụ: <IMG SRC=”logo.gif”>
Các thuộc tính của thẻ chèn hình ảnh
Trong thẻ IMG còn có một số thuộc tính khác như: ALT, WIDTH, HEIGHT, ALIGN, VSPACE, HSPACE, BORDER
- Thuộc tính ALT
Thuộc tính ALT – ALTernative cho phép ta chèn một đoạn chữ thay thế vào chỗ có hình và hiện lên xâu chú thích khi đưa trỏ chuột vào ảnh. Nên luôn sử dụng thuộc tính này khi đưa hình ảnh vào trang Web vì nhiều người muốn có tốc độ cao, lướt nhanh qua các thông tin là chính đã tắt chức năng đọc ảnh của trình duyệt vẫn có thể biết được ảnh đó mang nội dung gì.
Ví dụ:
<IMG SRC=”face.gif” ALT=”Nhay mat”>
Hiện ảnh Ảnh (không hiện lên) khi có và không sử dụng thuộc tính ALT.
Nếu không sử dụng thuộc tính ALT thì tại chỗ có hình sẽ hiện từ IMAGE
hoặc biểu tượng ảnh bị khuyết.
- Thuộc tính WIDTH và HEIGHT
Thuộc tính WIDTH và HEIGHT dùng để xác định chiều rộng và chiều cao của ảnh. Giá trị này có thể tính theo phần trăm (%) hoặc pixel.
Chú ý:
Nếu đặt chiều rộng và chiều cao không chuẩn sẽ làm hình trong ảnh bị co giãn méo đi. Để khắc phục nhược điểm này, ta nên xử lý ảnh để kích thước phù hợp
Thuộc tính ALIGN
Thuộc tính ALIGN cho phép chỉnh lại vị trí của ảnh theo cả hai chiều ngang và chiều dọc.
Theo chiều dọc: ALIGN=MIDDLE, ALIGN=TOP, ALIGN=BOTTOM
ALIGN=TOP ALIGN=MIDDLE ALIGN=BOTTOM
Theo chiều ngang: ALIGN=LEFT, ALIGN=RIGHT
Nếu như không có thuộc tính này thì mặc định ảnh được đặt tại đúng nơi đặt thẻ IMG dóng trên cùng dòng chữ, theo cạnh dưới của khung nhìn.
Thuộc tính VSPACE và HSPACE
Khi sử dụng thuộc tính ALIGN, ảnh được chèn vào dòng văn bản với các chữ dính sát liền. Thuộc tính VSPACE và HSPACE dùng để tạo khoảng trống nhỏ viền xung quanh ảnh (tính theo đơn vị pixel).
VSPACE=n Thêm khoảng trống theo chiều dọc
HSPACE=n Thêm khoảng trống theo chiều ngang Ví dụ:
<IMG SEC=”face.gif” VSPACE=20 HSPACE=20>