Đa phơng tiện (multimedia) nh ảnh, audio, hay video ngày càng xuất hiện nhiều trên trang WEB. Tuy nhiên cần hết sức chú ý rằng cần phải sử dụng những dữ liệu đa phơng tiện theo đúng định dạng chuẩn - nếu không sẽ khiến cho nhiều trình duyệt WEB không xử lý đợc.
Liên kết với file đa phơng tiện cũng tơng tự nh liên kết bình thờng. Tuy vậy phải đặt tên đúng cho file đa phơng tiện. Phần mở rộng của file phải cho biết kiểu của file. Ví dụ nếu file ảnh theo định dạng GIF hay GIF89 thì tên file phải là filename.gif
Sau đây là các khuôn dạng theo định dạng MIME
Kiểu Phần mở
rộng Mô tả
Image/GIF .gif Viết tắt của Graphics Interchange Format. Khuôn dạng này xuất hiện khi mọi ngời có nhu cầu trao đổi ảnh trên nhiều hệ thống khác nhau. Nó đợc sử dụng trên tất cả các hệ thống hỗ trợ giao diện đồ hoạ. Định dạng GIF là định dạng chuẩn cho mọi trình duyệt WEB. Nhợc điểm của nó là chỉ thể hiện đợc 256 màu.
Mở rộng của chuẩn này là GIF89, đợc thêm nhiều chức năng cho các ứng dụng đặc biệt nh làm ảnh nền trong suốt - tức là ảnh có thể nổi bằng cách làm màu nền giống với màu nền của trình duyệt.
Image/JPEG .jpeg Viết tắt của Joint Photographic Expert Group. Là khuôn dạng ảnh khác nhng có thêm khả năng nén.Ưu điểm nổi bật của khuôn dạng này là lu trữ đ- ợc hàng triệu màu và độ nén cao nên kích thớc file ảnh nhỏ hơn và thời gian download nhanh hơn. Nó là cơ sở cho khuôn dạng MPEG. Tất cả các trình duyệt đều có khả năng xem ảnh JPEG.
Image/TIFF .tiff Viết tắt của Tagged Image File Format. Đợc Microsoft thiết kế để quét ảnh từ máy quét cũng nh tạo các ấn phẩm.
Text/HTML .HTML, .htm
PostScript .eps, .ps Đợc tạo ra để hiển thị và in các văn bản có chất lợng cao.
Adobe
Acrobat .pdf
Viết tắt của Portable Document Format. Acrobat cũng sử dụng các siêu liên kết ngay trong văn bản cũng giống nh HTML. Từ phiên bản 2.0, các sản phẩm của Acrobat cho phép liên kết giữa nhiều văn bản. Ưu điểm lớn nhất của nó là khả năng
WYSISYG.
Video/MPEG .mpeg Viết tắt của Motion Picture Expert Group, là định dạng dành cho các loại phim (video). Đây là khuôn dạng thông dụng nhất dành cho phim trên WEB.
Video/AVI .avi Là khuôn dnạg phim do Microsoft đa ra.
Video/QuickTi
me .mov
Do Apple Computer đa ra, chuẩn video này đợc cho là có nhiều u điểm hơn MPEG và AVI. Mặc dù đã đ- ợc tích hợp vào nhiều trình duyệt nhng vẫn cha phổ biến bằng hai loại định dạng trên.
Sound/AU .au
Sound/MIDI .mid Là khuôn dạng dành cho âm nhạc điện tử hết sức thông dụng đợc nhiều trình duyệt trên các hệ thống khác nhau hỗ trợ. File Midi đợc tổng hợp số hoá trực tiếp từ máy tính.
Sound/RealA
udio .ram
Định dạng audio theo dòng. Một bất tiện khi sử dụng các định dạng khác là file âm thanh thờng có kích th- ớc lớn - do vậy thời gian tải xuống lâu, Trái lại audio dòng bắt đầu chơi ngay khi tải đợc một phần file trong khi vẫn tải về các phần khác.Mặc dù file theo định dạng này không nhỏ hơn so với các định dạng khác song chính khả năng dòng đã khiến định dạng này phù hợp với khả năng chơi ngay lập tức.
VRML .vrml Viết tắt của Virtual Reality Modeling Language. Các file theo định dạng này cũng giống nh HTML. Tuy nhiên do trình duyệt có thể hiển thị đợc cửa sổ 3 chiều nên ngời xem có thể cảm nhận đợc cảm giác ba chiều.
Một số kiểu ảnh, âm thanh hay phim cần có một chơng trình khác ngoài trình duyệt để xem ( nh Acrobat Reader ch PDF file), tuy nhiên .GIF, .JPEG, hay một số kiểu âm thanh đa phơng tiện khác chúng ta có thể tích hợp ngay trong trình duyệt bên cạnh văn bản khiến trang văn bản WEB trở nên hết sức sống động.
Kích thớc của các file đa phơng tiện nói chung là lớn, nên đối với các kết nối chậm thì thời gian tải trang WEB sẽ rất lâu - vì vậy ngời thiết kế trang WEB cần cân nhắc liệu có nên đa quá nhiều đa phơng tiện vào trang WEB của mình hay không.
6.2. Đa âm thanh vào một tài liệu HTML
Bạn có thể đa âm thanh vào trong tài liệu HTML của mình bằng cách sử dụng thẻ
BGSOUND, thuộc tính SRC chỉ định địa chỉ của file âm thanh (.wav, .au hoặc MIDI
file) và thuộc tính LOOP để chỉ định số lần chơi. Cú pháp:
<BGSOUND SRC = url
LOOP = n >
Thẻ này không có thẻ kết thúc tơng ứng (</BGSOUND>). Để chơi lặp lại vô hạn cần chỉ định LOOP = -1 hoặc LOOP = INFINITE. Thẻ BGSOUND phải đợc đặt trong phần mở đầu (tức là nằm trong cặp thẻ HEAD).
Ví dụ 6.1:
<HTML> <HEAD>
<TITLE>Đa âm thanh vào trong tài liệu</TITLE> <BGSOUND SRC="Dongsongtuoitho.wav" LOOP=2> </HEAD>
<BODY> </BODY> </HTML>
6.3. Chèn một hình ảnh, một đoạn video vào tài liệu HTML
Để chèn một file ảnh (.jpg, .gif, .bmp) hoặc video (.mpg, .avi) vào tài liệu HTML, bạn có thể sử dụng thẻ IMG. Cú pháp: <IMG ALIGN = TOP/MIDDLE/BOTTOM ALT = text BORDER = n SRC = url WIDTH = width HEIGHT = height HSPACE = vspace VSPACE = hspace TITLE = title DYNSRC = url START = FILEOPEN/MOUSEOVER LOOP = n >
Trong đó:
ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT
Căn hàng văn bản bao quanh ảnh
ALT = text Chỉ định văn bản sẽ đợc hiển thị nếu chức năng show picture của browser bị tắt đi hay hiển thị thay thế cho ảnh trên những trình duyệt không có khả năng hiển thị đồ hoạ. Văn bản này còn đợc gọi là nhãn của ảnh. Đối với trình duyệt có khả năng hỗ trợ đồ hoạ, dòng văn bản này sẽ hiện lên khi di chuột qua ảnh hay đợc hiển thị trong vùng của ảnh nếu ảnh cha đợc tải về hết. Chú ý phải đặt văn bản trong hai dấu nháy kép nếu triong văn bản chứa dấu cách hay các ký tự đặc biệt - trong trờng hợp ngợc lại có thể bỏ dấu nháy kép.
BORDER = n Đặt kích thớc đờng viền đợc vẽ quanh ảnh (tính theo pixel).
SRC = url Địa chỉ của file ảnh cần chèn vào tài liệu.
WIDTH/HEIGHT Chỉ định kích thớc của ảnh đợc hiển thị.
HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên, dới, trái, phải.
TITLE = title Văn bản sẽ hiển thị khi con chuột trỏ trên ảnh
DYNSRC = url Địa chỉ của file video.
START =
FILEOPEN/MOUSEOVER
Chỉ định file video sẽ đợc chơi khi tài liệu đợc mở hay khi trỏ con chuột vào nó. Có thể kết hợp cả hai giá trị này nhng phải phân cách chúng bởi dấu phẩy.
LOOP = n/INFINITE Chỉ định số lần chơi. Nếu LOOP = INFINITE thì file video sẽ đợc chơi vô hạn lần.
Ví dụ 6.2:
<HTML>
<HEAD><TITLE>Chèn hình ảnh vào tài liệu</TITLE></HEAD>
<BODY> The picture:
<IMG SRC="pic.jpg" WIDTH=150 HEIGHT=200 ALIGN="TOP" SPACE=50 HSPACE=50>
Showed </BODY>
</HTML> Sau khi duyệt sẽ đợc kết quả:
Ví dụ 6.3:
<HTML>
<HEAD><TITLE>Chèn Video vào tài liệu</TITLE></HEAD> <BODY>
<IMG DYNSRC="logo.avi" LOOP=1 START=FILEOPEN> </BODY>
</HTML>
6.4. Cuộn văn bản
Để tạo một dòng văn bản cuộn ngang màn hình phải sử dụng thẻ MARQUEE: Cú pháp: <MARQUEE ALIGN = LEFT/CENTER/RIGHT BEHAVIOR = SCROLL/SLIDE/ALTERNATE BGCOLOR = color DIRECTION = LEFT/RIGHT LOOP = n SCROLLAMOUNT = amount SCROLLDELAY = delay WIDTH = width HEIGHT = height HSPACE = hspace VSPACE = vspace > ... Văn bản đợc cuộn </MARQUEE> Trong đó: ALIGN Căn lề BIHAVIOR = SCROLL/SLIDE/ALTERNATE Kiểu cuộn BGCOLOR Màu nền
DIRECTION = LEFT / RIGHT Hớng cuộn
LOOP Số lần cuộn (= INFINITE nếu muốn văn bản đợc cuộn mãi).
SCROLLAMOUNT Khoảng cách cho mỗi lần dịch chuyển của văn bản
SCROLLDELAY Thời gian trễ cho mỗi lần dịch chuyển (mili giây).
WIDTH / HEIGHT Chiều rộng và chiều cao của khung hình chữ nhật cho văn bản cuộn trong đó.
HSPACE / VSPACE Khoảng cách giữa văn bản với các cạnh chiều ngang và chiều dọc của khung.
Ví dụ 6.4:
<HTML> <HEAD>
<TITLE>Cuộn văn bản</TITLE> </HEAD>
<BODY>
<MARQUEE BEHAVIOR=SCROLL DIRECTION=LEFT LOOP=INFINITE SCROLLAMOUT=10 SCROLLDELAY=50> Chào mừng bạn đến với trang Web của chúng tôi !
</MARQUEE> </BODY> </HTML>
Khi duyệt sẽ có kết quả sau:
6.5. bản đồ ảnh
Bản đồ ảnh (Image map) là ảnh theo chuẩn thông thờng nhng cho phép khi nhấn chuột lên một vùng nào đó trên ảnh sẽ mở ra một tài liệu WEB khác. Để tạo bản đồ ảnh phải thực hiện qua 2 bớc:
B
ớc 1: Sử dụng thẻ MAP và AREA để thiết lập các thông tin cho một bản đồ ảnh. Cú pháp:
<MAP NAME="map-name"> ... <AREA ... > <AREA ... > ... </MAP> <AREA SHAPE = shape-type
COORDS = coords
HREF = url
NOTAB
TABINDEX = n
TITLE = text
TARGET = _blank / _self
>
ý nghĩa của các tham số:
NAME Đặt tên cho image map.
SHAPE= RECT/CIRC/POLY Đặt kiểu vùng (hình chữ nhật, hình tròn, đa giác). Hình chữ nhật đợc xác định bằng toạ độ góc trên bên trái và góc dới bên phải. Hình tròn đợc xác định bởi tâm và bán kính. Hình đa giác đợc xác định bởi toạ độ của các đỉnh liên tiếp.
COORDS Toạ độ các điểm xác định vùng. Với vùng hình chữ nhật cần có 4 giá trị xác định toạ độ hai điểm: góc trái trên và góc phải dới. Với vùng hình tròn cần có 3 giá trị xác định toạ độ tâm và bán kính.
HREF Chỉ định địa chỉ của trang sẽ đợc mở khi click chuột vào vùng. Nếu thay thuộc tính này banừg thuuộc tính NOHREF thì khi ấn chuột vào vùng tơng ứng sẽ không gây ra hiện tợng gì.
NOTAB Không sử dụng phím Tab để di chuyển giữa các vùng.
TABINDEX Đặt thứ tự di chuyển giữa các vùng khi sử dụng phím Tab.
TITLE Thông tin sẽ hiển thị khi di chuột trên vùng.
TARGET Mở trang Web đợc liên kết trong một cửa sổ mới
(_blank), hoặc trong cửa sổ hiện tại (_self), trong một
frame (tên frame).
Thẻ MAP sử dụng để tạo thông tin cho một bản đồ ảnh, trong đó gồm nhiều thẻ
AREA, mỗi thẻ AREA tạo ra một vùng trên bản đồ mà khi nhấn chuột trên vùng đó
trình duyệt sẽ mở trang Web đợc liên kết với vùng qua thuộc tính HREF.
B
ớc 2: Chèn hình ảnh sử dụng làm image map vào trang Web của mình bằng thẻ IMG trong đó có sử dụng tham số USERMAP để chỉ định thông tin về bản đồ nảh cho hình ảnh đó.
Cú pháp:
Ví dụ 6.5:
<HTML> <HEAD>
<TITLE>Image map</TITLE> </HEAD>
<BODY>
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="0, 0, 100, 50"
HREF="http:\\www.cse.com.vn" TITLE="Click chuột vào đây để mở trang chủ của CSE">
<AREA SHAPE="CIRC" COORDS="42, 96, 25"> <AREA SHAPE="CIRC" COORDS="93, 96, 25"> <AREA SHAPE="CIRC" COORDS="147, 96, 25"> </MAP>
<IMG SRC="cse.jpg" USEMAP="#map1" BORDER=0> </BODY>
</HTML>
Chơng 7 Các thẻ định dạng bảng biểu