Viết tặng những anh chị yêu quý dòng nhạc Phạm Duy
Nhân ngày cuôí năm, hoctro xin phép tổng kết một năm tự học XHTML & CSS qua một baì hướng dẫn cách làm một trang nhạc, lần này dùng ngay trang "Phạm Duy Essential - Những tình khúc của một đơì người" http://www.phamduy.com/document/cakhucmotdoinguoi/index.html. Bạn cũng có thể thêm các ca khúc khác của nhạc sĩ Phạm Duy bằng cách thêm vào danh sách baì hát một baì hát mơí, lâý lơì từ đây http://dactrung.net/nhac/tacgia.aspx?TacGiaID=jXQ0YNDGv4m5Cm4Z76GOWA%3d%3d , dùng trang naỳ http://www.phamduy.com/document/rafiles/ để xem tên cuả ram file online, sau đó làm một html file mơí dựa trên sườn baì cuả một file đã có sẵn.
Câú trúc cuả trang "PhamDuy Essential" (PDE) gồm có 3 phần: phần nội dung (content) cuả trang gồm trên 80 baì hát, môĩ baì là một html file, một Javascript file có tên là "link.js" lo về phần menu bên phải và bên traí cuả trang, và sau cùng là một trang CSS (Cascading Style Sheet) lo toàn bộ về phần trình bày (presentation) cuả trang.
Một trong những điểm son cuả nghệ thuật thảo chương là sự phân biệt rạch roì các chức năng (separation of concerns) cuả một software, hay trong trường hợp cuả chúng ta là một webpage. Trong trang web PDE, mục tiêu thứ nhất được đặt ra là việc cách ly phần trình bày trang ra khoỉ nôị dung cuả trang. Có 3 lơị ích trước mắt: trang sẽ đơn giản và không rôí mắt người viết trang để ngươì đó có thể tập trung vaò việc taọ nội dung trang, sau khi cách ly thì sẽ dễ dàng thay đôỉ trang trí cuả toàn bộ các trang con chỉ vơí một thay đổi trên css file, và lơị ích sau cùng là làm cho trang nhẹ hơn một trang HTML kiêủ cũ (có nôị dung lẫn trang trí.) Mục tiêu thứ hai là việc chuyển nôị dung menu cuả các trang con sang một nơi duy nhất, để sau này muốn thêm baì mơí chỉ cần update một chỗ mà thôi, thay vì phải sưả ở tất cả các trang con. Sau đây, hoctro sẽ lần lượt đi vaò chi tiết từng phần: phần một là phần mổ xẻ nôị dung cuả một trang html tiêu biêủ, phần hai là phần menu, và phần cuôí (nặng ký nhất) là phần CSS. Các bạn cũng có thể tham khaỏ thêm về HTML và CSS qua loạt baì căn bản ở đây http://dactrung.net/baiviet/noidung.aspx?BaiID=Yi7rFqRoeR%2fZryE8oO4tEw%3d%3d . Các bạn naò muốn tìm hiểu sâu hơn về những khả năng kỳ diệu cuả CSS, xin mơì ghé thăm trang naỳ http://www.mezzoblue.com/zengarden/alldesigns/ . Bạn sẽ thâý cùng một content mà ngươì ta có thể design cả trăm cách khác nhau.
Phần 1 - Câú trúc một trang nhạc dùng HTML
Trong môĩ webpage, thường thì khi ta truy cập directory mà không nêu tên trang, server sẽ đi tìm trang có tên là index.html. Chúng ta bỏ qua trang naỳ vì trang không tiêu biêủ cho các trang còn laị; thay vaò đó ta sẽ thử xem một trang baì hát rất nôỉ tiếng cuả nhạc sĩ Phạm Duy có tưạ đề là Cành Hoa Trắng được viết ra hơn nưả thế kỷ trước.
Đây là nôị dung cuả cả trang đó:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pham Duy - Nhung Tinh Khuc Cua Mot Doi Nguoi</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<style type="text/css">
</style>
</head>
<body >
<script type="text/javascript" language="javascript" src="link.js"></script>
<div id="content">
<div id="audiomusic"><b><font color="#0000FF">
<embed autostart="true" hidden="false" loop="false" console=""
controls="ControlPanel" type="audio/x-pn-realaudio-plugin"
width="250" height="25"
src="http://www.phamduy.com/document/rafiles/hoatrang.ra">
</embed></font></b>
</div>
<div class="pd">Phạm Duy<br /><br /></div>
<div class="songTitle">Cành Hoa Trắng</div>
Một đàn chim tóc trắng <br />
Bay về qua trần gian<br />
Báo tin rằng : Có Nàng Giáng Hương<br />
Nàng ngồi trên cung vắng<br />
Trong một đêm tàn trăng<br />
Phá then vàng bước vào vườn hoang.<br />
Không gian tràn dâng niềm thương<br />
Rồi tiếng hát sui cuộc tình duyên<br />
Bao nhiêu nàng tiên nỉ non<br />
Làm huyên náo Thiên Đường lạnh lẽo.<br />
Trời đầy cô tiên nữ <br />
Xuống đầu thai thành hoa<br />
Giữa đêm mờ, hoa nở ngát hương<br />
Người về trong đêm tối <br />
Ôm cành hoa tả tơi<br />
Bóng in dài gác đời lẻ loi.
</div>
</body>
</html>
Phần đâù cuả trang là những setup thường gặp cuả một trang html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pham Duy - Nhung Tinh Khuc Cua Mot Doi Nguoi</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<style type="text/css">
</style>
</head>
như tưạ cuả trang, rôì encoding UTF-8. Sau đó trang "nhắn" vơí browser là khi thể hiện trang lên screen cho ngươì đọc xem trang thì dùng presentation settings cuả file "screen.css", còn khi in ra thì dùng file "print.css". (Trong file đó có các chỉ dẫn để máy in ra baì hát và bỏ qua menu cùng tưạ chính "Phạm Duy - Những Tình Khúc ...")
Trong phần body, menu thể hiện ở bên traí và bên phaỉ cuả trang được dẫn đến file "link.js" sẽ noí tơí ở phần 2. Do sự chuyển giao nhiệm vụ rất ư là nhẹ nhàng naỳ, ta thâý trang không còn gì khác ngoaì các settings phaỉ có để có thể nghe nhạc:
<div id="audiomusic"><b><font color="#0000FF">
<embed autostart="true" hidden="false" loop="false" console=""
controls="ControlPanel" type="audio/x-pn-realaudio-plugin"
width="250" height="25"
src="http://www.phamduy.com/document/rafiles/hoatrang.ra">
</embed></font></b>
</div>
cũng như tên tác giả, tên baì hát, và sau cùng là thân baì.
<div class="pd">Phạm Duy<br /><br /></div>
<div class="songTitle">Cành Hoa Trắng</div>
Một đàn chim tóc trắng <br />
Bay về qua trần gian<br />
. . .
Các phần trên đêù được bao bọc bơỉ tag div có tên là "content". Muốn biết rõ hơn về tag (thẻ) div xin mơì xem ở đây http://dactrung.net/baiviet/noidung.aspx?BaiID=Yi7rFqRoeR%2fZryE8oO4tEw%3d%3d .
Bạn để ý thâý trong cả một file như vâỵ, không có đến một tag noí về tựa đề phaỉ dùng font naò, chiêù cao ra sao, maù gì, v.v. Moị caí đó đã được browser lâý từ file "screen.css".
Phần 2 - taọ menu cho trang
Sau đây là bí quyết cuả file "link.js": dùng chỉ một lệnh đơn giản document.write('...') để dynamically viết at run-time vaò heap memory cuả browser:
document.write('<div id="title">')
document.write('<a href="index.html">Phạm Duy - Những Tình Khúc Của Một Đời Người</a>')
document.write('</div>')
document.write('<div id="sidebar">')
document.write('<a href="tramnamhohen.html" >Trăm Năm Bến Cũ</a>')
document.write('<a href="id2261.html" >Áo Anh Sứt Chỉ Đường Tà</a>')
document.write('<a href="id2431.html" >Bên Ni Bên Nớ</a>')
document.write('<a href="id117.html" >Cành Hoa Trắng</a>')
document.write('<a href="id123.html" >Cây Đàn Bỏ Quên</a>')
document.write('<a href="id1419.html" >Chú Cuội</a>')
document.write('<a href="id200.html" >Chuyện Tình Buồn</a>')
document.write('<a href="id2307.html" >Cỏ Hồng</a>')
document.write('<a href="id232.html" >Còn Chút Gì Để Nhớ</a>')
document.write('<a href="id237.html" >Con Đường Tình Ta Đi</a>')
document.write('<a href="id244.html" >Còn Gì Nữa Đâu</a>')
document.write('<a href="id263.html" >Dạ Lai Hương</a>')
document.write('<a href="id1399.html" >Đêm Xuân</a>')
document.write('<a href="id1225.html" >Đưa Em Tìm Động Hoa Vàng</a>')
document.write('<a href="id347.html" >Đừng Bỏ Em Một Mình</a>')
document.write('<a href="id354.html" >Đừng Xa Nhau</a>')
document.write('<a href="id2074.html" >Ðường Chiều Lá Rụng</a>')
document.write('<a href="id359.html" >Đường Em Đi</a>')
document.write('<a href="id386.html" >Em Lễ Chùa Này</a>')
document.write('<a href="id406.html" >Giết Người Trong Mộng</a>')
document.write('<a href="id2075.html" >Gọi Em Là Đóa Hoa Sầu</a>')
document.write('<a href="id2263.html" >Hạ Hồng</a>')
document.write('<a href="id442.html" >Hai Năm Tình Lận Đận</a>')
document.write('<a href="henemnam2000.html" >Hẹn Em Năm 2000</a>')
document.write('<a href="id459.html" >Hẹn Hò</a>')
document.write('<a href="id467.html" >Hoa Rụng Ven Sông</a>')
document.write('<a href="id3352.html" >Khúc Lan Sầu</a>')
document.write('<a href="id2255.html" >Kiếp Nào Có Yêu Nhau</a>')
document.write('<a href="id2078.html" >Kỷ Niệm</a>')
document.write('<a href="id1962.html" >Kỷ Vật Cho Em</a>')
document.write('<a href="id2476.html" >Lá Diêu Bông</a>')
document.write('<a href="id2449.html" >Mộ Khúc</a>')
document.write('<a href="id688.html" >Mùa Thu Chết</a>')
document.write('<a href="id693.html" >Mùa Thu Paris</a>')
document.write('<a href="muaxuanduca.html" >Mùa Xuân Du Ca</a>')
document.write('<a href="id707.html" >Mùa Xuân Yêu Em</a>')
document.write('<a href="id2167.html" >Nếu Một Mai Em Sẽ Qua Đời</a>')
document.write('<a href="id729.html" >Ngậm Ngùi</a>')
document.write('<a href="id738.html" >Ngày Đó Chúng Mình</a>')
document.write('</div>')
document.write('<div id="sidebar2">')
document.write('<a href="id2168.html" >Ngày Em Hai Mươi Tuổi</a>')
document.write('<a href="id2262.html" >Ngày Tháng Hạ</a>')
document.write('<a href="id2310.html" >Ngày Trở Về</a>')
document.write('<a href="id1296.html" >Ngày Xưa Hoàng Thị </a>')
document.write('<a href="id1417.html" >Nghìn Năm Vẫn Chưa Quên</a>')
document.write('<a href="id749.html" >Nghìn Trùng Xa Cách</a>')
document.write('<a href="id2229.html" >Nghìn Thu</a>')
document.write('<a href="id765.html" >Người Về</a>')
document.write('<a href="id2306.html" >Nha Trang Ngày Về</a>')
document.write('<a href="id830.html" >Nụ Tầm Xuân</a>')
document.write('<a href="id2308.html" >Nước Mắt Mùa Thu</a>')
document.write('<a href="id2335.html" >Nước Mắt Rơi</a>')
document.write('<a href="id2368.html" >Nương Chiều</a>')
document.write('<a href="id3082.html" >Quê Nghèo</a>')
document.write('<a href="id2309.html" >Phượng Yêu</a>')
document.write('<a href="id2256.html" >Tâm Sự Gửi Về Đâu</a>')
document.write('<a href="id931.html" >Thà Như Giọt Mưa</a>')
document.write('<a href="id2444.html" >Thu Ca Điệu Ru Đơn</a>')
document.write('<a href="id2311.html" >Thương Tình Ca</a>')
document.write('<a href="id972.html" >Thuyền Viễn Xứ</a>')
document.write('<a href="id2185.html" >Tiễn Em</a>')
document.write('<a href="id3087.html" >Tìm Nhau</a>')
document.write('<a href="id998.html" >Tình Ca</a>')
document.write('<a href="id2477.html" >Tình Cầm</a>')
document.write('<a href="id1020.html" >Tình Hoài Hương</a>')
document.write('<a href="id1329.html" >Tóc Mai Sợi Vắn Sợi Dài</a>')
document.write('<a href="id3157.html" >Tôi Còn Yêu Tôi Cứ Yêu </a>')
document.write('<a href="id1415.html" >Tôi Đang Mơ Giấc Mộng Dài </a>')
document.write('<a href="id1090.html" >Trả Lại Em Yêu</a>')
document.write('<a href="id1325.html" >Tuổi Ngọc </a>')
document.write('<a href="id1327.html" >Tuổi Thần Tiên </a>')
document.write('<a href="id2258.html" >Vết Sâu</a>')
document.write('<a href="id1416.html" >Xuân Ca </a>')
document.write('<a href="id1375.html" >Yêu Là Chết Ở Trong Lòng</a>')
document.write('<a href="id3083.html" >Về Miền Trung</a>')
document.write('</div>')
document.write('<div id="footer">')
document.write('<p>http://www.phamduy.com</p>')
document.write('</div>')
Nêú ta cắt bỏ document.write(' ...') thì nôị dung chẳng khác gì caí cuả một trang thường gặp. Tuy nhiên, bí quyết là ở chỗ 3 tags: title, sidebar, và sidebar2. Tag "title" xuất hiện ngay đâù trang js, do đó cũng là ở đâù phần body (xem giaỉ thích ở phần 1) cho phép ta viết tưạ trang "Phạm Duy - Những Tình Khúc ..." dùng chung cho moị files cuả các baì hát khác. Sau naỳ, thí dụ ta muốn làm một trang "Từ Công Phụng Essential", thì ta copy các files tiêu biêủ, rôì đôỉ tên nhạc sĩ trong tag "title" naỳ. Tag "sidebar" và "sidebar2" tương ứng vơí menu bên traí và bên phaỉ, vơí môĩ dòng là môĩ tưạ baì hát và tên file. Dòng sau đây là dòng menu item cuả baì hát Cành Hoa Trắng, khi ngươì xem ấn vaò link thì maý sẽ đọc file "id117.html". (Bạn nhớ dùng dâú single quote ' ngay sau document.write, cũng như trước khi đóng câu ở ngay sau tag đóng a, vì ta dùng double quote để kêu tên html file.) document.write('<a href="id117.html" >Cành Hoa Trắng</a>')
Dĩ nhiên khi vưà download từ server về file id117.html thì maý sẽ thâý là phaỉ access file "link.js", mà trên cache cuả maý đã có file naỳ rôì, nên browser sẽ dùng laị file naỳ (tương tự vơí trường hợp "screen.css" và "print.css"), do đó thơì gian download sẽ giảm thiêủ rất nhiêù. Thử tưởng tượng bạn dùng dial-up connection, muốn xem và nghe hết 80 baì, mà phải download 80 lần the same menu (nêú code ngay trong file id117.html) thì thiệt là lãng phí thơì giờ cho ngươì truy cập trang, cũng như bandwidth cuả server!
Phần 3 - Trình baỳ trang vơí CSS.
Sau đây hoctro sẽ giaỉ thích sâu về trang screen.css, specifically các tags body, title, sidebar, sidebar2 và content. Moị giơí thiêụ khác về CSS xin tham khaỏ ở đây http://dactrung.net/baiviet/noidung.aspx?BaiID=Yi7rFqRoeR%2fZryE8oO4tEw%3d%3d.
Tag body:
body {
margin: 10px;
font-family: Tahoma, Times New Roman, Verdana, sans-serif;
font-size: 13px;
line-height: 1.5em;
letter-spacing: 0.1em;
background-color:#0ff;
color: navy;
background-image: url(offwhitelace.jpg);
}
Tag naỳ dùng vơí body (duh!), chỉ dẫn cho browser phaỉ luì vô 10 pixels cả tứ phiá , dùng font Tahoma nêú có, hoặc Times New Romans, v.v. theo thứ tự. Kich1 thước font là 13px, trừ phi trong tag con nằm trong tag body noí phaỉ dùng font size khác hơn (như tag title, songTitle, v.v.) Line-height chỉ định khoảng cách từ dòng naỳ tơí dòng khác, trong khi letter-spacing chỉ định khoảng cách từ chữ caí naỳ tơí chữ caí khác. Background-color là #00ffff (viết tắt là #0ff) trong trường hợp background-image không có, maù cuả chữ là navy. Sau cùng là background-image dùng file "offwhitelace.jpg".
Tag title:
#title {
margin: 0px 0px 25px 10px;
padding: 20px 20px 30px 20px;
color: #000;
border-bottom: 3px solid #444;
font-size: 20px;
letter-spacing: 0.15em;
line-height: 1em;
text-decoration: none;
}
Tag title vì là tag con (nằm trong tag body trong bất kỳ file html naò mà ta đang viết) nên thưà kế tất cả moị tính chất cuả body. Ngoaì ra, ta còn viết thêm các settings sau: margin theo chiêù kim đồng hồ từ trên, phaỉ, dươí, traí là: 0px 0px 25px 10px. Ta thâý 25 pixels sẽ làm tưạ baì có khoảng cách rộng hơn, ngăn cách vơí thân baì hát và 2 menu. Padding là khoảng cách từ border nêú có tơí lề cuả chữ trong tag. border-bottom cho ta một đường gạch ngang chiêù cao 3 pixels, line style solid, và maù #444. Các settings còn laị cũng dễ đoán ra. Text-decoration noí browser đừng cho thêm underline vaò context nêú context là một link.
Tag sidebar và sidebar2:
#sidebar {
position: absolute;
top: 100px;
left: 15px;
margin: 0px 5px 5px 10px;
width: 22%;
border-right: 1px solid #555;
}
#sidebar a {
display: block;
margin: 5px 10px;
font: bold 80% Verdana, sans-serif;
letter-spacing: 0.05em;
line-height: 1.15em;
text-decoration: none;
color: #4a2885;
}
#sidebar a:hover {
background-color: #BEDFC4;
}
Tag sidebar gồm 3 chỉ dẫn con: #sidebar chỉ chỗ cuả sidebar trên trang, #sidebar a chỉ cách hiện thẻ a naò nằm trong thẻ sidebar, và #sidebar a:hover chỉ cách làm "maù mè" thêm là link sẽ đôỉ maù môĩ khi cursor đi ngang qua, taọ một effect là trang cũng thông minh lắm vì nó biết mình đang scroll tơí đâu.
Sidebar nằm bên traí, thể hiện qua 3 chỉ dẫn: position absolute, cách 100 pixel từ đâù trang, và cách 15 pixels từ lề traí cuả trang (dĩ nhiên là bên trong các lề đã định cuả tag body, nêú margin body là 0 pixel thì sidebar sẽ cách lề exactly 150 pixels.) Width 22% cho ta chiêù rộng cuả tag, và border-right: 1px solid #555 noí vơí browser vẽ một đường thẳng viền lề bên phaỉ kiêủ solid vơí maù là #555555.
Trong setting sidebar a, Font là kiêủ bold, và chỉ bằng 80% chiêù cao cuả font cuả tag body (parent cuả nó), font name là Verdana. Các settings khác cũng tương tự như đã giơí thiêụ trong tag body. Riêng chỉ dẫn "display: block" làm cho môĩ link a trở thành một dòng xuống hàng riêng biệt, nêú không các thẻ sẽ liên tiếp nhau rất kém thẩm mỹ.
Sidebar 2 cũng tuơng tự như sidebar, chỉ có caí khác là block naỳ nằm bên phaỉ (top: 100px; right: 15px), rôì dòng kẻ thì nằm bên traí (border-left: 1px solid #555)
Tag content:
#content {
position: absolute;
top: 150px;
left: 30%;
width: 38%;
margin: 0px 10px 0px 10px;
padding: 10px 10px 10px 0px;
}
Settings cuả thẻ content, là nơi chúng ta ghi tên baì hát, tác giả, link nhạc, lơì baì hat1, hình ảnh, v.v. Thẻ naỳ cũng bắt đâù từ bên traí 30% (vì sidebar đã chiếm chỗ 22%, rôì cộng thêm lề phaỉ trái thì 30% là tương đôí dễ nhìn. Tuy nhiên vì ta có tơí hai menu nên content chỉ còn có 40%. Khi làm một trang chỉ có menu bên traí, ta không cần dùng setting "width" vì maý tự biết space còn bao nhiêu. Khi đó trong file link.js ta không dùng thẻ sidebar2 chút naò hết, bỏ ngay cả tag mở và đóng như sau:
document.write('<div id="title">')
document.write('<a href="index.html">Phạm Duy - Những Tình Khúc Của Một Đời Người</a>')
document.write('</div>')
document.write('<div id="sidebar">')
document.write('<a href="tramnamhohen.html" >Trăm Năm Bến Cũ</a>')
document.write('<a href="id2261.html" >Áo Anh Sứt Chỉ Đường Tà</a>')
document.write('<a href="id2431.html" >Bên Ni Bên Nớ</a>')
document.write('<a href="id117.html" >Cành Hoa Trắng</a>')
document.write('<a href="id123.html" >Cây Đàn Bỏ Quên</a>')
...
</div>
Còn nêú ta muốn menu bên phaỉ mà thôi thì ta sửa trong content cho left: 0%, width: 65%, rôì sưả link.js như sau:
document.write('<div id="title">')
document.write('<a href="index.html">Phạm Duy - Những Tình Khúc Của Một Đời Người</a>')
document.write('</div>')
document.write('<div id="sidebar2">')
document.write('<a href="id2168.html" >Ngày Em Hai Mươi Tuổi</a>')
document.write('<a href="id2262.html" >Ngày Tháng Hạ</a>')
document.write('<a href="id2310.html" >Ngày Trở Về</a>')
document.write('<a href="id1296.html" >Ngày Xưa Hoàng Thị </a>')
...
</div>
Baì hướng dẫn tơí đây là hết. Mong các bạn sẽ dùng template naỳ để taọ ra các trang nhạc cuả các nhạc sĩ khác, và nhiêù ứng dụng khác nưã.
Thân aí,
hoctro
12/30/2003
