thông thường, hầu hết các trang web nhạc online đều sử dụng các ngôn ngữ lập trình web như PHP,ASP…kết hợp cơ sở dữ liệu (Access, SQL…) để thực hiện. Nhưng, với các bạn mới “làm quen với máy vi tính” thì việc này dường như quá sức. Bài viết sau nhằm hướng dẫn các bạn đã biết sơ qua ngôn ngữ web tĩnh HTML (thậm chí chưa từng học qua cũng không sao) cách viết một Web Site nhạc online bằng ngôn ngữ HTML.
Ngôn ngữ HTML vốn “dễ tính”, nên bạn có thể dùng bất kỳ chương trình soạn thảo nào để viết code (FrontPage, Dreamweaver, WordPad, NotePad, ETôi nói bậyTôi nói bậyTôi nói bậyPlus…). Theo tôi, nếu biết sử dụng Microsoft FrontPage hoặc Macromedia Dreamweaver thì bạn nên dùng một trong 2 chương trình này, còn nếu chưa biết sử dụng thì bạn dùng NotePad là tốt nhất, vì NotePad là chương trình tích hợp sẵn trong Windows lại nhỏ gọn, dễ sử dụng và nhất là chạy nhanh trên các máy tính có cấu hình thấp. Ở đây, tôi sử dụng NotePad để thiết kế (trong FrontPage và Dreamweaver thực hiện tương tự, nhưng trước tiên phải chuyển sang giao diện HTML).
Trang web nhạc online thường có 2 loại giao diện :
Giao diện thứ nhất : Trên trang web là danh sách bài nhạc, bạn click vào bài nhạc nào thì một cửa sổ WindowMedia sẽ hiện ra và chơi đúng bài nhạc đó.
Giao diện thứ hai : Bên trái trang web là danh sách bài hát, bên phải là khung WindowMedia, bạn click vào bài hát trong danh sách thì khung WindowMedia ở bên phải sẽ chơi đúng bài hát bạn đã chọn.
Điểm chung của cả 2 loại giao diện : bạn phải thiết kế nhiều trang HTML riêng biệt, mỗi trang dùng để chơi 1 bài nhạc. Ví dụ : bạn có 2 file nhạc là “bai1.wmv” và “bai2.wmv” thì bạn phải thiết kế 2 file tương ứng là “bai1.htm” và “bai2.htm” để chơi 2 bài nhạc đó. Bạn đừng lo ngại phải mất công thiết kế quá nhiều trang, bên dưới sẽ có thủ thuật để bạn thực hiện việc thiết kế rất nhanh.
Cách làm trang chơi nhạc : (ví dụ “bai1.htm” ở trên)
Thực hiện :
Mở NotePad : Vào Start>Run, gõ Notepad.exe rồi Enter.
Nhập đoạn code sau vào khung soạn thảo :
<html>
<body leftmargin="0" topmargin="0">
<embed src=”địa chỉ file nhạc” width=”128” height=”128”></embed>
</body>
</html>
Giải thích :
Phần “địa chỉ file nhạc” chính là url của file nhạc trên Internet, ví dụ : src=”
http://www.freewebs.com/nhac/bai1.wmv ”
Width, height : chiều ngang và chiều rộng của cửa sổ Window Media sẽ hiển thị trên trang web.
Leftmargin, topmargin : Độ dày lề trái, lề trên của trang web
Sau đó, vào menu File>Save as , chọn thư mục lưu file, gõ tên file trong khung “File name” là “tênbàihát.htm” hoặc “tênbàihát.html” (Lưu ý : Tên file tốt nhất không chứa ký tự đặc biệt, không dùng tiếng Việt có dấu và không chứa khoảng trắng. Ví dụ : bai1.htm)
Bây giờ bạn thử nhấp đúp chuột vào file vừa tạo để xem bài hát có nghe được hay không, nếu không được hãy xem lại đường dẫn file nhạc có chính xác hay không.
Các trang HTML chơi các bài nhạc khác thực hiện tương tự.
Thủ thuật : Sau khi save as trang thứ nhất (ví dụ : bai1.htm), bạn sửa source code ở ngay dòng src=”địa chỉ file nhạc 1” thành src=”địa chỉ file nhạc 2” rồi save as với tên bai2.htm…cứ thế thực hiện tuần tự các trang chơi nhạc.
Bây giờ bạn cần xác định sẽ chọn loại giao diện nào trong 2 loại đã đề cập ở trên rồi mới bắt tay thực hiện.
Làm trang danh sách bài hát :
Giao diện thứ nhất :
Thực hiện :
Vẫn trong chương trình NotePad, xóa đi các dòng lệnh (nếu có) rồi nhập đoạn code sau vào :
<html>
<head>
<script language="JavaScript">
function openWin(URL) { window.open(URL,'','width=300,height=280'); }
</script>
</head>
<body>
<a href="#" onClick="openWin('bai1.htm')">Tên bài hát 1</a><br>
<a href="#" onClick="openWin('bai2.htm')">Tên bài hát 2</a><br>
…...
</body>
</html>
Có bao nhiêu bài hát thì gõ bấy nhiêu dòng lệnh <a href=….></a></br>
Vào menu file>save as dưới dạng file .htm hoặc .html (ví dụ : nhac1.htm)
Giải thích :
Thuộc tính width, height : chiều ngang và dọc của cửa sổ popup chơi nhạc
Bai1.htm, bai2.htm : các file .htm đã tạo ra ở bước trên.
Thẻ <br> : Để mỗi tên bài hát ở 1 dòng khác nhau.
Giao diện thứ hai :
Thực hiện :
Xóa hết các câu lệnh trong NotePad, nhập đoạn code sau vào :
<html>
<body leftmargin="0" topmargin="0">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" align="center" height="80">NHẠC ONLINE</td>
</tr>
<tr>
<td width="50%">
<a href="bai1.htm" target="nhac">Bai 1</a><br>
<a href="bai2.htm" target="nhac">Bai 2</a><br>
……
</td>
<td width="50%">
<iframe name="nhac" src="bai1.htm" width="300" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe> </td>
</tr>
</table>
</body>
</html>
Vào menu File>save as dưới dạng file .htm hoặc .html (Ví dụ : nhac2.htm)
Giải thích :
Đoạn code trên có ý nghĩa : kẻ 1 bảng, dòng trên cùng là tiêu đề “NHẠC ONLINE”, dòng thứ 2 chia làm 2 cột : cột bên trái là tên các bài hát kèm liên kết đến file htm tương ứng, cột bên phải là 1 frame chứa cửa sổ window media để chơi nhạc.
Chú ý : <iframe name=”nhac” src=”bai1.htm”…>
Thuộc tính name : tên của frame, nếu bạn lấy tên khác thì thay đổi tên tương ứng trong thuộc tính target của thẻ <a href=….> ở trên. Ví dụ : <iframe name=”frame1”…> thì ở trên nó phải là <a href=”bai1.htm” target=”frame1”>
Thuộc tính src : địa chỉ file .htm mặc định của frame, ví dụ ở đây chọn src=”bai1.htm” thì khi gọi file nhac2.htm, frame sẽ hiển thị nội dung mặc định là nội dung trang bai1.htm cho đến khi click chuột vào 1 liên kết khác.
Các thuộc tính khác :
Frameborder : độ dày khung frame
Scrolling : Hiển thị thanh cuộn hay không
Marginheight, marginwidth : độ dày lề trên-dưới, trái-phải.
Đối với loại giao diện này, nếu danh sách bài hát quá dài trông sẽ rất xấu, vì vậy bạn nên cho mỗi trang hiển thị khoảng 15-20 bài hát, nếu còn bài hát khác thì ngắt sang một trang mới. Ngoài ra, bạn cũng có thể cho danh sách bài hát vào một iframe (Inline Frame) khác để cuộn dần xuống, tuy nhiên, tôi không trình bày phương pháp này vì trông không hay lắm.
Lời kết : Về cơ bản thì 1 web nhạc online viết bằng HTML chỉ có thế, tùy theo óc thẩm mỹ, bạn có thể thiết kế sao cho giao diện bắt mắt hơn, thêm hình ảnh và các JavaScript nếu thấy cần thiết.
<Nguồn : tuoitrecuoi.com>
Nhớ 
Thanks nếu cảm thấy hay...