[back] [index]

C�ch tạo li�n kết (hyper link) tới c�c trang web kh�c

 Go vao day de quay ve trang index 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� một từ, một c�u hay một bức ảnh. Trang n�y bạn đang xem dở nhưng bạn vẫn c� thể ng� qua [trang trước] một ch�t. G� v�o bức ảnh b�n bạn cũng được kết quả tương tự. Sau đ�y l� html code của 2 li�n kết tr�n.
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, v� dụ trang web của [Hội Phụ Nữ Việt Nam] tại Bochum, CHLB �ức:


V� dụ trang web của [<a href="http://www.vifi.de" 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">
G� [<a href="mailto:[email protected]">v�o đ�y</a>] hoặc v�o biểu tượng b�n để gửi e-mail cho t�i. <a href="mailto:[email protected]?subject=Test&body=This is a test"><img src="ihtml_mail_button.jpg" border="0"></a>
</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)

Trang web 1 Trang web 2 Trang web 3 Trang web 4 ImageMap - thoạt nh�n th� phức tạp nhưng lại rất đơn giản

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>
Trang web 1 Trang web 2 Trang web 3
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.

�ể t�nh được tọa độ của từng AREA, bạn d�ng một phần mềm xử l� ảnh như Corel PhotoPaint 10, PaintShop Pro 7... hoặc phải đo�n v� thử dựa v�o k�ch cỡ của bức ảnh. H�y g� v�o minh họa b�n để xem chi tiết.