Hướng Dẫn Làm Web Cá Nhân Bằng Notepate, Việc sử dụng JavaApplets phần này sẽ áp dụng một ứng dụng mới để là trang web của bạn đẹp hơn.
Phần 6: JavaApplets
JavaApplets làm cho web đẹp hơn, nhưng lại tăng thời gian load lên.
Ðể đưa một applet vào trang web, bạn cần có những yếu tố sau:
Bản thân applet (file.class)
Một đoạn HTML code
Hình ảnh liên quan (nếu có)
Ðể xem được applet, máy của người xem phải có Java Virtual Machine cài đặt sẵn. Windows XP hiện nay không hỗ trợ Java (không có Java Virtual Machine – lý do cạnh tranh của Microsoft với Sun) nên sự sử dụng Java Applets nên được hạn chế bởi rất ít người đi tìm và tải một fìle cỡ vài MB về chỉ để xem mấy trò chơi nhấp nháy của bạn. Tất nhiên, trong các phiên bản sau của Windows, có thể Microsoft sẽ bắt buộc phải hỗ trợ Java trở lại. Nếu máy bạn không có Java Virtual Machine, bạn có thể tới trang web của Sun ([Only registered and activated users can see links]) để download và install.
Java Applets một thời rất mốt (trong những năm 96 – 99), trang web nào cũng phải có một vài applets cho oai. Ngay cả trang chủ của VNN cũng có ảnh hồ Gươm bắn pháo hoa nổ đì đùng. Bây giờ (2000 – 2002) cũng vậy thôi, nhưng thế chỗ cho Java Applets là Flash 😉 Và đến một lúc nào đó, khi người ta chán thì cái đó lại mất tăm mất tích.
Tuy vậy trong trang web này tôi vẫn xin giới thiệu với bạn cách sử dụngnhững applets có sẵn trên web. Chắc bạn sẽ hỏi, sao không hướng dẫn luôn cách tạo applets? Ðể viết được Java Applets, bạn phải biết lập trình bằng ngôn ngữ Java (tương đối rắn).
Sau đây là đoạn code để đưa applet sóng vào trang web. Tôi sử dụng folder riêng cho Images (images/) và Applets (applets/) nên đường dẫn tới chúng phải có thêm: codebase = “applets/” và “images/”
<applet codebase=”applets/” code=”Lake.class” align=”right” width=”288″ height=”270″ id=”Lake”>
<param name=”image” value=”images/paris.jpg”>
<param name=”href” value=”[Only registered and activated users can see links]”>
</applet>
Khả năng của JavaApplets là khi kick vào hình sẽ hiện ra 1 trang web nào đó
Phần 7: Đưa âm nhạc, video vào web
Bạn còn có thể làm cho trang web của mình sinh động hơn bằng âm nhạc, video… Trang này sẽ giúp bạn thực hiện điều đó. Nhưng hãy đừng quên là internet còn đang tương đối chậm và sử dụng quá nhiều những thứ đó sẽ mang lại phản tác dụng. Video, sounds thường là những files lớn và cần rất nhiều thời gian dể load.
Có rất nhiều dạng audio (*.au, *.wav, *.mid….) và video (*.mpeg, *.avi…). Nhưng có lẽ chỉ có dạng midi (*.mid) là cỡ nhỏ nhất. Một bản nhạc 5 phút chiếm khoảng 30KB trong khi đó 5 phút dưới dạng wav lên tới 5MB. Ðể đưa chúng vào một trang web, bạn cần viết dòng html-code sau:
<embed src=”music.mid” autostart=”true” loop=”true”>
Trong đó “music.mid” là tên của file nhạc, autostart=”true” chạy bản nhạc tự động, loop=”true” tự động quay lại đầu bản nhạc khi và chạy tiếp, nếu bạn chỉ muốn bản nhạc chạy một số lần nhất định lần rồi dừng, hãy thay “true” bằng “1”, “2”…
Riêng Internet Explorer còn cho phép bạn tạo nhạc nền với tag đơn <bgsound> Dòng code sẽ được viết như sau:
<bgsound src=”music.mid” loop=”infinite”>
loop=”infinite” cho phép browser chạy bản nhạc không ngừng.
Ngoài ra còn một cách đưa video vào trang web (chỉ dùng cho Internet Explorer) như một bức ảnh:
<img dynsrc=”beany.mpg”>
Nếu đã từng sử dụng RealPlayer chắc bạn sẽ hỏi, làm thế nào để nó tự động chạy một bài hát dưới dạng *.rm Ðiều đó không phức tạp lắm nhưng đòi hỏi người đến thăm trang web của bạn phải có RealPlayer cài trong máy, đó lại là điều ít xảy ra. Như vậy bạn phải tạo một link để người đọc có thể download phần mềm này từ RealNetwork server. Sau đây là dòng code bạn cần để đưa RealPlayer vào một trang web:
<embed src=”finally.rm” type=”audio/x-pn-realaudio-plugin” console=”Clip1″ controls=”ControlPanel” height=”30″ width=”400″ autostart=”true”><br>
<embed type=”audio/x-pn-realaudio-plugin” console=”Clip1″ controls=”StatusField” height=”30″ width=”400″ autostart=”true”><br>
<embed type=”audio/x-pn-realaudio-plugin” console=”Clip1″ controls=”PositionField” height=”30″ width=”400″ autostart=”true”><br>
Có một điều bạn cần chú ý là tất cả các files nhạc, video… đều phải được upload cùng với trang web và cùng nằm trong một địa chỉ như trang web. Nếu sử dụng một file của trang web khác, bạn phải đưa địa chỉ đầy đủ của file đó vào html-code. Ví dụ:
<embed src=”[Only registered and activated users can see links]” autostart=”true” loop=”true”>
Phần 8: Form, List
Dùng form này, bạn có thể ghi vào sổ lưu bút, gửi ý kiến tới người chủ website… Ðể có được form như trên, bạn phải viết HTML Code sau:
[Only registered and activated users can see links]
Tên bạn: <input type=”text” size=”30″ name=”ten”>
E-Mail: <input type=”text” size=”30″ name=”e-mail”>
Giới tính:<input type=”radio” value=”f” name=”sex” checked> nữ <input type=”radio” value=”m” name=”sex”> nam
Bạn thích:<input type=”checkbox” value=”Xem TV” name=”TV”> xem TV <input type=”checkbox” value=”Doc sach” name=”Book”> đọc sách
Bạn đến từ: <select name=”land”><option value=”VN”>Vietnam <option value=”USA”> USA <option value=”De”> Germany</select>
Bạn nói tiếng: <select name=”language” size=”2″><option value=”Viet”>Viet <option value=”Engl”> Anh <option value=”Deutsch”> Duc</select>
Lời nhắn nhủ: <textarea cols=”10″ rows=”3″ name=”tin”>Viết vào đây</textarea>
<input type=”submit” value=”send”>
<input type=”reset” value=”clear”>
</form>
Cặp TAG <form></form> khai báo với browser một form, giữa cặp TAG này là các (cặp) TAG khác của form.
Một form có 2 phương thức (method): post và get, ở ví dụ này ta đề cập đến phương thức post.
[Only registered and activated users can see links]
<input type = “text” name=”ten” size=”30″> tạo ra một control cho phép bạn nhập tên vào form. Control này có tên là “ten”, kích cỡ là “30”. Tên và kích cỡ bạn có thể tuỳ chọn.
<input type = “text” name=”thu” size=”30″> tạo ra một control cho phép bạn nhập e-mail vào form. Control này có tên là “e-mail”, kích cỡ là “30”. Tên và kích cỡ bạn có thể tuỳ chọn.
<input type=”radio” value=”f” name=”sex” checked> nữ và <input type=”radio” value=”m” name=”sex”> nam: cho phép bạn chọn giới tính. Trong control thứ nhất, bạn thấy chữ checked và đồng thời ở form, giới tính nữ cũng được chọn sẵn.
<select name=”land”><option value=”VN”>Vietnam <option value=”USA”> USA <option value=”De”> Germany</select> cho phép bạn chọn nước từ một list có sẵn.
<select name=”language” size=”2″><option value=”Viet”>Viet <option value=”Engl”> Anh <option value=”Deutsch”> Duc</select> cho phép bạn chọn tiếng từ một list có sẵn nhưng ở đây size=”2″ có nghĩa là list này có 2 dòng (bạn thấy cả Viet và Anh)
<textarea cols=”10″ rows=”3″ name=”tin”>viết vào đây</textarea> tạo ra một control cho phép bạn viết cả một đoạn text dài với nhiều dòng. rows và cols cho phép bạn định kích cỡ của control. Ðây là một cặp TAG mà ở giữa chúng bạn có thể viết sẵn Text.
<input type=”submit” value=”send”> tạo ra một nút mang tên “send”. Nếu gõ vào nút này, tất cả các thông tin của form được gửi đi.
<input type=”reset” value=”clear”> tạo ra một nút mang tên “clear” với tác dụng chuyển form về trạng thái ban đầu.
Nếu đang quen sử dụng Word, chắc bạn sẽ hỏi, làm thế nào để tạo được một danh sách có thứ tự (numbering – 1, 2, 3, 4 ….) hoặc có các dấu chấm tròn (bullets) ở đầu từng dòng như dưới đây (danh sách mua đồ ăn bà xã viết và tính cách của bả psssst…)Nếu đang quen sử dụng Word, chắc bạn sẽ hỏi, làm thế nào để tạo được một danh sách có thứ tự (numbering – 1, 2, 3, 4 ….) hoặc có các dấu chấm tròn (bullets) ở đầu từng dòng như dưới đây (danh sách mua đồ ăn bà xã viết và tính cách của bả psssst…):Rất đơn giản, bạn chỉ cần biết đến một số TAG sau: <ol></ol> (ordered list) <ul></ul> (unordered list) <li> (list) và những thuộc tính của các TAG đó: type=”disc”, type=”square”, type=”circle”. Hai Lists trên được viết bằng HTML Code sau, bạn xem sẽ hiểu ngay:
<ol>
<li>Mua rau tươi nhà bà Tám béo</li>
<li>Qua chợ Mơ mua chả ở quầy chị Hảo vẩu cho rẻ</li>
<li>4 lạng thịt băm trên chợ Cầu Giấy</li>
<li>1 con gà làm sẵn ở chợ Vĩnh Hồ</li>
</ol>
</font>
</td>
<td width=”50%” valign=”top”>
<font size=”2″ face=”verdana, arial, tahoma”>
<ul type=”circle”>
<li>Ra vẻ thích ăn đồ đắt tiền</li>
<li>Nhưng thực ra lại rất ki bo</li>
<li type=”disc”>Không thương chồng</li>
<li type=”square”>Lười như hủi ;-)</li>
</ol>
List bên trái (danh sách mua đồ) chắc không cần giải thích vì <ol> nghĩa là ordered list (có thứ tự 1, 2, 3…). List bên phải (tính cách vợ) là unodered và type của <ul> là circle nên ở tất cả các đầu dòng đều được tự động đặt một còng tròn (rỗng). Riêng dòng dưới, do <li> có type là disc và square nên đầu dòng thứ 3 là một chấm đen, đầu dòng thứ 4 lại là một hình vuông đen.
Phần 9:Cách tạo liên kết (hyper link) tới các trang web khác
Sau khi có tranh ảnh và bài viết, chắc bạn cũng muốn có một vài links tới các trang khác. Trang của bạn và những trang mà bạn thích. Rồi cũng phải có một chỗ mà người đến thăm chỉ cần click vào đó là có thể viết thư cho bạn. Chỗ đó có thể là 1 từ, 1 câu hay 1 bức ảnh.
Code:
Trang này bạn đang xem dở nhưng bạn vẫn có thể ngó qua [<a href=”ihtml_2.htm”>trang trước</a>] một chút.
<a href=”ihtml_index.htm”><img src=”h_clinton.gif” border=”0″ alt=”Go vao day de quay ve trang index”></a>
Dùng cặp TAG <a href=””></a>, bạn có thể biến nhiều objects thành links. Trong ví dụ này, bạn có bức ảnh của Hillary Clinton và hai chữ “trangtrước” làm liên kết (links). Chỉ cần gõ vào đó là bạn đã bước sang trang khác. Links không chỉ giới hạn trong website của bạn, nó có thể đưa bạn đi khắp nơi trên internet. Sau đây là code của một trang với links tới các trang khác như:
Ví dụ trang web của [<a href=”[Only registered and activated users can see links]” target=”_new”>Hội Phụ Nữ Việt Nam</a> tại Bochum, CHLB Ðức
Ở ví dụ trên, bạn thấy một đoạn code mới, đó là target=”_new”. Nếu biết tiếng Anh, chắc bạn cũng suy ra được ý nghĩa của đoạn code đó. Nó có tác dụng chỉ cho trình duyệt (browser) biết sẽ phải mở trang web đó trong một cửa sổ mới (target = đích, new = mới). Target còn có thể mang những giá trị sau: “_blank” (như “_new”), “_top”, “_parent”, “_self” (3 giá trị này chỉ dùng cho những trang web có chứa frame – sẽ đề cập đến sau).
Và đây là cách tạo một email-link:
Chắc bạn cũng thấy trên nhiều trang web có những link mà chỉ càn gõ vào nó là chương trình e-mail tự động mở ra cho bạn viết thư tới một địa chỉ đã được định sẵn, nhiều khi tiêu đề (subject) của e-mail cũng đã có sẵn. Gõ [vào đây] hoặc vào biểu tượng bên để gửi e-mail cho tôi.
<html>
<body bgcolor=”white” link=”blue” alink=”white”>
<font face=”verdana” size=”2″>
[Only registered and activated users can see links]
</font>
</body>
</html>
Thay vì địa chỉ một trang web, bạn chỉ cần đưa mailto: và địa chỉ e-mail, muốn có subject và text sẵn, chỉ cần thêm ?subject=tiêu đề&body=text
Màu của liên kết:
Trong trang web này, bạn thấy liên kết nào cũng màu xanh, gõ vào thì thành màu trắng, sau khi gõ thì màu xám. Ðiều đó được thực hiện bởi các đoạn code sau (trong body tag): <body bgcolor=”white” link=”blue” alink=”white” vlink=”gray”> (alink= active link, vlink= visited link)
Trên một số trang web, bạn thấy một bức tranh mà khi gõ chuột vào mỗi góc có thể tới một trang mới. Ở đó người ta sử dụng một bức tranh, một tấm ảnh để làm liên kết. Ðể định vị từng khu vực trên bức ảnh, người ta sử dụng tọa độ của từng khu vực đó. Bạn thử gõ vào trán, miệng, mũi, cổ của Hillary Clinton để xem ví dụ. Cái đó gọi là ImageMap, sử dụng Code sau:
<img src=”h_clinton.gif” width=”117″ height=”158″ border=”0″ usemap=”#Hillary”>
<map name=”Hilarry”>
<area href=”link_1.htm” alt=”Trang web 1″ shape=”rect” coords=”29,24,82,52″>
<area href=”link_2.htm” alt=”Trang web 2″ shape=”rect” coords=”25,58,82,84″>
<area href=”link_3.htm” alt=”Trang web 3″ shape=”rect” coords=”25,82,81,103″>
<area href=”link_4.htm” alt=”Trang web 4″ shape=”rect” coords=”33,106,84,140″>
</map>
*Trong đó bạn đặt một bức ảnh là MAP bằng USERMAP: usemap=”#Hillary”, chia phần trên map bằng AREA, quy định tọa độ của từng phần trên map bằng COORDS: coords=”29,24,82,52″, quy định liên kết của từng phần bằng TAG quen thuộc HREF, định hình cho từng phần bằng SHAPE: shape=”rect”. SHAP còn có thể mang giá trị circle (tròn) , poly (polygon = đa giác). Bạn có thể sử dụng COORDS như sau:
Nếu shape = “rect”: coords=”x1,y1,x2,y2″, trong đó x1,y1 là tọa độ góc trên bên trái và x2,y2 là tọa độ của góc dưới bên phải của hình chữ nhật tính từ góc trên bên trái của bức ảnh.
Nếu shape = “circle”: coords=”x,y,r”, trong đó x,y là tọa độ của tâm hình tròn tính từ góc trên bên trái của bức ảnh và r là bán kính hình tròn.
Nếu shape = “poly”: coords=”x1,y1,x2,y2,…,xn,yn”, trong đó xn,yn là tọa độ của từng góc của đa giác tính từ góc trên bên trái của bức ảnh.
Phần 10:Cách phá các Popup quảng cáo của FWP (Free Webspace Provider)
Các bạn có Homepage đặt tại [các dịch vụ Webspace miễn phí] chắc cũng đã có lần tự hỏi, làm cách nào để bỏ mấy cái Popup chết tiệt này đi để người xem đỡ rối mắt. Bỏ bao ngày đêm ra làm được trang web thật vừa mắt với bao nhiêu hình ảnh đẹp mà bị cái đống rác Popup che hết kể cũng tức. Cũng đã có nhiều bạn viết thư hỏi. Trong trang web này, tôi xin giới thiệu với bạn các cách phá Popup cho nhiều FWP khác nhau. Nhưng trước khi đọc tiếp, bạn nên biết một số điều sau:
Phá Popup đồng nghĩa với không tuân theo Term Of Service (TOS) của FWP nên họ có quyền “đá đít” bạn ra và xóa hẳn homepage của bạn lúc nào cũng được. Vì lý do này, bạn nên tạo cho trang web của mình một địa chỉ độc lập (redirect – ví dụ: [Only registered and activated users can see links] hoặc come.to/tenban) , không liên quan gì tới provider nơi bạn dặt trang web đề phòng khi họ phát hiện ra và cấm địa chỉ của bạn. Khi đó bạn chỉ cần thay đổi TARGET URL là xong.
Nếu ai cũng làm như bạn thì các FWP sống bằng cái gì?
Nếu bạn cũng đồng ý với những gì tôi nêu trên thì làm ơn tiếp tục
[Come.to] và [dot.tk] cung cấp dịch vụ Forward. Nếu bạn đang ở Geocities, địa chỉ của bạn sẽ là [Only registered and activated users can see links] Ðịa chỉ này dài và khó nhớ hơn come.to/tenban của V3 và [Only registered and activated users can see links] của dot.tk. Khi đăng ký ở V3, bạn sẽ có sự lựa chọn giữa nhiều kiểu quảng cáo khác nhau, chọn Frame! Dot.tk tự chèn trang của bạn vào một Frame và tung ra một Popup quảng cáo. Ðưa dòng code sau vào đầu HTML code của trang chủ để phá Frame quảng cáo:
<script language=”JavaScript”>
[Only registered and activated users can see links]
if (top.location != self.location)
{top.location = self.location}
</script>
[250free.com] cho phép bạn upload 250 MB và tặng kèm theo banner, popups đủ loại. Ðể phá quảng cáo, hãy thay TAG <body> trong HTML Code của từng trang bằng:
<noembed>
<body>
</noembed>
<script language=”JavaScript”>
//Banner Killer by [Only registered and activated users can see links]
var td, pn;
td = “<bo”;
pn = “dy>”;
document.write(td+pn);
</script>
và </body> bằng:
<script language=”JavaScript”>
//Banner Killer by [Only registered and activated users can see links]
var lt, jr;
td = “</bo”;
pn = “dy>”;
document.write(lt+jr);
</script>
<noembed>
</body>
</noembed>
[batcave.net] và [0catch.com] tặng bạn 100 MB và banner, popups… Ðể phá quảng cáo của họ, bạn thêm đoạn code (màu đỏ) dưới vào ngay sau TAG <html> trong HTML code:
<html>
<noscript>
<title>
<nobody>
</title>
</noscript>
<head>
<title>Your web page title</title>
</head>
<body>…
bravenet.com] cung cấp đủ thứ, cả Popups và Banner. Ðưa những dòng code đỏ sau vào sau tag <html> trong HTML code của từng trang để phá:
<html>
<noembed>
<nobody>
</noembed>
<body>
[crosswinds.net] cho bạn sử dụng Webspace vô tư nhưng cũng quấy rầy bạn bởi Popups. Ðưa dòng code sau vào trước TAG <html> (đầu trang) của từng trang để “tóm gọn” và đóng Popup ngay khi nó vừa mở ra:
<script language=”JavaScript”>
var winname1=”jW4Lo”;
var winname2=”s9wh”;
var windowname=winname1+winname2;
handle = window.open(“index.htm”, windowname);
handle.close();
</script>
[Fortunecity.com] cho bạn sử dụng 100 MB nhưng cũng quấy rầy bạn bởi Popups. Ðưa dòng code sau vào trước TAG <body> của từng trang để phá:
<script language=”JavaScript”>
</script></head>
<noscript> <script language=”JavaScript”>
<body>
</script>
</noscript>
[Freepage] cho bạn sử dụng 20 MB nhưng cũng quấy rầy bạn bởi Frame. Ðưa dòng code sau vào HTML code của trang chủ để phá Frame:
<script language=”JavaScript”>
[Only registered and activated users can see links]
if (top.location != self.location)
{top.location = self.location}
</script>
[Geocities.com] cho bạn sử dụng 15 MB nhưng cũng quấy rầy bạn bởi một Popup-Menu. Thêm dòng code màu đỏ vào trong HTML code sau TAG </html> của từng trang để phá:
</body>
</html>
<noembed>
[Hypermart.com] cho bạn sử dụng 50 MB và cả CGI, SSI nhưng cũng quấy rầy bạn bởi Popups. Ðưa dòng code sau vào sau TAG </script> cuối cùng (nếu có) hoặc bất kỳ nơi nào trong HTML code (nếu không có TAG </script>) của từng trang để phá:
<noscript><noscript><plaintext>
[Lycos.com] cho bạn sử dụng 50 MB và cả PHP, MySQL nhưng cũng quấy rầy bạn bởi Popups. Ðưa dòng code sau vào sau TAG </html> của từng trang để phá:
<noscript><noscript><plaintext>
[Netfirms.com] cho bạn sử dụng 25 MB và cả CGI-BIN và tất nhiên, có cả banner “trọn gói”. Tất cả các biện pháp đã nêu đều bị họ vô hiệu hóa, trừ biện pháp này. Ðưa đoạn code đỏ sau vào sau TAG </html> (dưới tận cùng) của từng trang để phá:
</body>
</html>
<noembed>
<html>
<body>
Be fair and don’t remove these lines!
Banner Killer by [Only registered and activated users can see links]
</body>
</html>
</noembed>
[Topcities.com] cho bạn sử dụng 150 MB và khuyến mại cho bạn một Banner tương đối to ngay trên cùng. Chắc bạn cũng không thích gì khi bị cái mụn bự giữa trán đúng không 😉 Ðưa dòng code sau vào sau thay thế (chú ý: tôi nói đây là thay thế, có nghĩa trong HTML Code của bạn không được phép chứa một TAG <body> thứ hai!) cho TAG <body> của từng trang để phá:
<script language=”JavaScript”>
//Banner Killer by [Only registered and activated users can see links]
var td, pn;
td = “<bo”;
pn = “dy>”;
document.write(td+pn);
</script>
và từ 14.09.2002 bạn phải thêm dòng sau vào sau TAG </html> của trang web để vô hiệu hóa dòng code ở cuối trang của Topcities
<noscript>
[Tripod.com] cho bạn sử dụng 50 MB và cả CGI nhưng cũng quấy rầy bạn bởi Banner. Ðưa dòng code sau vào trước TAG <body> của từng trang để phá:
<script language=”JavaScript”>
//Banner Killer by [Only registered and activated users can see links]
var td, pn;
td = “<bo”;
pn = “dy>”;
document.write(td+pn);
</script>
Ðưa dòng code sau vào sau TAG <html> của từng trang để phá:
<script language=”JavaScript”>
</script>
Hide Popup
Nếu không có cách nào trong những cách trên áp dụng được, bạn sử dụng cách sau để đẩy trang web của mình ra trước Popup. Người đọc tuy phải tự đóng Popup nhưng chỉ nhận biết được khi đã rời trang bạn. Ðưa dòng code sau vào sau TAG <html> của từng trang để phá:
<script language=”JavaScript”>
</script>
