Bạn muốn viết một trang Web?

Bài 5. Multimedia

Mở đầu Bài học Phần kết

Bây giờ bạn hãy trang trí trang Web của mình bằng hình ảnh. Save ảnh sau đây vào folder hinhanh, giữ nguyên tên ảnh là friends.gif:


Trong Notepad bạn hãy mở trang khuon.html và thêm vào phần text có màu đỏ sau đây:

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="hinhanh/friends.gif" WIDTH="90" HEIGHT="40"> Chào các bạn !
</BODY>

Save những thay đổi vừa rồi vào trang05.html và mở nó ra trong Internet Explorer. Trang Web của bạn trông sẽ như sau:

Chào các bạn !

Như vậy chúng ta đưa ảnh vào trang Web bằng cách dùng tag <IMG> (image). Trong tag này bạn dùng các attributes SRC (source) để cho biết vị trí và tên của file hình ảnh, WIDTHHEIGHT để cho biết chiều rộng và chiều cao của ảnh (đơn vị là pixels). Nếu không ghi chiều rộng và chiều cao thì browser sẽ hoạt động chậm hơn vì phải tính toán độ lớn của ảnh.


Bạn cũng làm y như trên nếu muốn đưa ảnh gif động (animated gif) vào trang Web. Save animated gif sau đây vào folder hinhanh, giữ nguyên tên ảnh là party.gif:


Bạn hãy viết thêm phần text có màu đỏ sau đây:

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="hinhanh/friends.gif" WIDTH="90" HEIGHT="40"> Chào các bạn !
<IMG SRC="hinhanh/party.gif" WIDTH="100" HEIGHT="50">
</BODY>

Trong browser bạn sẽ thấy:

Chào các bạn !


Bây giờ bạn sẽ học cách đưa âm thanh (audio files) vào trang Web. Sau đây là một bản nhạc midi, bạn hãy save nó vào một folder con tên là midi nằm trong folder làm việc của bạn. Muốn thế hãy right-click lên biểu tượng dưới đây, rồi trong popup menu sẽ xuất hiện chọn Save Target As, giữ nguyên tên file là yelowros.mid.

Nhạc midi


Trong phần tiếp theo đây những gì bạn thu được khi thực tập có thể sẽ không giống hoàn toàn với bài học, vì những lý do sau:


Bạn hãy viết thêm phần text có màu đỏ sau đây:

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="hinhanh/friends.gif" WIDTH="90" HEIGHT="40"> Chào các bạn !
<IMG SRC="hinhanh/party.gif" WIDTH="100" HEIGHT="50">
<HR>
<EMBED SRC="midi/yelowros.mid" WIDTH="180" HEIGHT="40" AUTOPLAY="false" CONTROLLER="true" LOOP="false">
</BODY>

Bạn sẽ thấy một toolbar để chơi nhạc trên trang Web:

Chào các bạn !

Khi đó người xem có thể bấm nút play trên toolbar để nghe bản yelowros.mid.

Chúng ta đã dùng tag <EMBED> để đưa âm thanh vào trang Web. Các attributes trong đó có nghĩa như sau:

SRC Chữ viết tắt của Source, tức là nguồn. Bạn dùng attribute này để xác định nguồn audio (đường dẫn và tên file).
WIDTH, HEIGHT Xác định chiều rộng và chiều cao bằng pixels của hình ảnh toolbar. Tùy loại plug-in, có thể bạn phải thay đổi giá trị của chúng để hình ảnh toolbar trông đẹp hơn.
AUTOPLAY Chơi tự động. Bạn dùng AUTOPLAY="false" để plug-in không tự động chơi nhạc khi người xem mở trang Web ra. Còn nếu muốn ngược lại thì bạn dùng AUTOPLAY="true".
CONTROLLER Bộ điều khiển. Bạn dùng CONTROLLER="true" để browser hiển thị toolbar điều khiển của plug-in. Nếu không muốn như vậy thì bạn dùng CONTROLLER="false".
LOOP Lập đi lập lại. Bạn dùng LOOP="false" để plug-in không lập đi lập lại bản nhạc. Nếu muốn ngược lại thì bạn dùng LOOP="true".


Có trường hợp khi mở một trang Web ra bạn nghe ngay một bản nhạc, điệu nhạc này cứ lập đi lập lại suốt thời gian bạn coi trang Web. Đó là nhạc nền.

Để tạo nhạc nền cho trang Web, bạn chỉ việc dùng lại tag <EMBED> như trên, nhưng bật các attributes AUTOPLAYLOOP lên, đồng thời giấu đi CONTROLLER. Ví dụ, nếu chọn bản yelowros.mid trên đây làm nhạc nền bạn hãy viết dòng sau đây vào đâu đó trong phần <BODY></BODY> của trang Web.

<EMBED SRC="midi/yelowros.mid" AUTOPLAY="true" CONTROLLER="false" LOOP="true">


Và sau đây, bạn sẽ học cách đưa một đoạn phim (video clip) vào trang Web của mình. Cách làm cũng tương tự như với âm thanh. Ngoài ra, cũng giống như trên, những gì bạn thu được sẽ phụ thuộc vào plug-in để chơi video trên máy tính bạn đang dùng. Nhưng trước hết hãy save video clip sau đây vào một folder con đặt tên là video nằm trong folder làm việc của bạn, giữ nguyên tên file là gulls.avi.

Video clip.


Bạn viết thêm phần text có màu đỏ sau đây:

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="hinhanh/friends.gif" WIDTH="90" HEIGHT="40"> Chào các bạn !
<IMG SRC="hinhanh/party.gif" WIDTH="100" HEIGHT="50">
<HR>
<EMBED SRC="midi/yelowros.mid" WIDTH="180" HEIGHT="40" AUTOPLAY="false" CONTROLLER="true" LOOP="false">
<EMBED SRC="video/gulls.avi" WIDTH="180" HEIGHT="180" AUTOPLAY="false" CONTROLLER="true" LOOP="false">
</BODY>

Bạn sẽ thấy một toolbar để xem phim trên trang Web:

Chào các bạn !

Khi đó người xem có thể bấm nút play trên toolbar để xem phim gulls.avi.

Tôi chỉ lưu ý bạn thêm một điều là giá trị của attribute WIDTH bây giờ là chiều ngang của phim và của attribute HEIGHT là chiều cao phim cộng với chiều cao của toolbar, tất cả đo bằng pixels.

previous <-- Trang trước Tiếp theo --> next

Mở đầu Bài:

1 -  2 -  3 -  4 -  5 -  6 -  7 -  8 -  9

Phần kết


nguyen-chi@hcm.vnn.vn