Thẻ chèn hình ảnh, âm thanh

Một phần của tài liệu Giáo trình môn Thiết kế website (Trang 22 - 27)

a) Ảnh .Gif (Graphics Interchange Format): được sử dụng phổ biến nhất trong các tài liệu HTML, dễ chuyển tải, ngay cả các kết nối sử dụng MODEM tốc độ chậm, hổ trợ 256 màu GIF. Các file GIF được định dạng không phụ thuộc phần nền

b) Ảnh JPEG (Joint PhotoGraphic Expert Group) có phần mở rộng .JPG, là loại ảnh nén mất thông tin, nghĩa là ảnh sau khi bị nén không giống như ảnh gốc. Tuy nhiên, trong quá trình phát lại thì ảnh cũng tốt gần như ảnh gốc. JPEG hỗ trợ hơn 16 triệu màu và thường được sử dụng cho các ảnh có màu thực.

c) Ảnh PNG (Portable Network Graphics) nén không mất dữ liệu Hình ảnh trên Web được phân làm hai dạng. Dạng thứ nhất là hình ảnh làm nền, tức là chúng ta có thể viết chữ lên hình. Ở dạng này,

<img src=“URL” title=“chuỗi”

align=“left/right/top/middle/bottom/absbottom/absmiddle/

texttop”

Trong đó:

URL: là đường dẫn đến tập tin hình ảnh cần đưa lên Web.

Left/right/top/middle/bottom: canh lề cho ảnh;

absbottom/absmiddle/texttop: canh lề cho văn bản xung quanh hình.

Chuỗi trong title sẽ hiển thị khi đưa con trỏ chuột vào hình.

Số/phần trăm trong widthheight chỉ định độ lớn của ảnh tương ứng theo chiều rộng và chiều cao. Nếu bỏ qua hai thuộc tính này, trình duyệt sẽ hiển thị hình ảnh với kích thước thật của ảnh.

Chuỗi trong alt sẽ được hiển thị thay cho hình khi hình không được hỗ trợ hiển thị lên Web.

Nếu muốn hình ảnh có đường viền, bạn nhập n là một số nguyên dương. Mặc định n là 0, nghĩa là ảnh không có đường viền.

Ví dụ 1-2-8: Thẻ chèn hình ảnh

<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8" />

<title>Ví dụ 1-2-8</title>

</head>

<body>

Website hoa viên cây cảnh

<img align="absmiddle" src="hinhanh/hoasu.jpg"

border="3">

Website hoa viên cây cảnh

<img align="top" src="hinhanh/hoasu.jpg" title="hoa sứ trắng" width="100" height="130"><br>

<img src="hinhanh/ngoisao.tif">

<img src="hinhanh/ngoisao.tif" alt="tập tin ảnh *.tif">

Thẻ <img> chèn được các tập tin ảnh dạng *.jpg, *.jpeg, *.gif,

*.png.

Trong ví dụ 1-2-8, lần chèn ảnh thứ 3, ảnh có phần mở rộng là .tif không được hỗ trợ hiển thị nên dòng chữ trong thuộc tính alt sẽ được hiển thị thay thế ảnh được gọi trong src.

Trong trường hợp bạn gọi một hình ảnh không được hỗ trợ hiển thị bởi trình duyệt, nhưng không sử dụng thuộc tính alt thì tại vị trí gọi hình, sẽ hiển thị dạng file bị lỗi:

Hình 1-2-8: Trang Vidu1-2-8.html

Âm thanh trên Web cũng được phân làm hai loại: âm thanh nền cho Web và âm thanh được mở trên Web như một trình hát nhạc.

Đối với âm thanh nền hay còn gọi là nhạc nền, khi trang Web vừa được tải lên sẽ xuất hiện âm thanh chạy ngầm bên trong. Bạn cần khai báo thẻ này trong phần <head> của trang Web với tên thẻ là

<bgsound>, đây là một thẻ đơn. Tuy nhiên không phải trình duyệt nào cũng hỗ trợ loại thẻ HTML này.

<bgsound src=“URL” loop=“n”>

embed src="URL" autostart="true/false" loop="true/false"

hidden="true/false" width=“n” height=“m”></embed>

Trong đó:

URL là đường dẫn đến tập tin âm thanh.

Autostart: tùy chỉnh chế độ phát tự động (true) hay chờ nhấn nút play (false).

Loop: thiết lập chế độ tự động phát lại (true) hay không phát lại (false).

Hidden: cho phép ẩn chương trình hát nhạc (true) hay hiển thị trình hát nhạc trên Web (false), mặc định hidden = “false”. Đối với một số trình duyệt không hỗ trợ thẻ <bgsound> bạn có thể cho phát nhạc nền bằng cách cho chế độ hidden = “true”.

Width height là hai thuộc tính chỉ định độ rộng và chiều cao của chương trình hát nhạc trên Web.

Ngoài ra, nếu bạn muốn chèn các tập tin flash hoặc phim ảnh lên Web, thẻ <embed> vẫn có thể thực hiện tốt. Tuy nhiên, do các tập tin này có những thông số đặc biệt và tùy theo ý định hiển thị, bạn cần kết hợp thêm cặp thẻ <object> … </object> để được hỗ trợ thêm nhiều thuộc tính hiển thị hơn.

Ví dụ 1-2-9: chèn âm thanh bằng <bgsound> và <embed>

<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8" />

<title>Ví dụ 1-2-9</title>

<bgsound src="AMTHANH/nhac1.mp3"

loop="-1" > </head>

<body>

<embed src="AMTHANH/nhac2.mp3"

autostart="false" loop="false" width="200"

height="100" ></embed> </body>

</html>

Trình duyệt Internet Explorer hỗ trợ tốt cả <bgsound>

<embed>. Mozilla Firefox chỉ hỗ trợ <embed>.

Hình 1-2-9: Trang Vidu1-2-9.html

Một phần của tài liệu Giáo trình môn Thiết kế website (Trang 22 - 27)

Tải bản đầy đủ (DOCX)

(106 trang)
w