![]() |
Bạn muốn viết một trang Web?
Bài 6. Liên kết |
Trong bài này chúng tôi sẽ hướng dẫn cách tạo ra các liên kết, hay còn gọi là siêu liên kết (hyperlinks). Đây là một liên kết tới trang mở đầu của bài giới thiệu này, bạn hãy click vào đó xem sao.
Như bạn đã thấy, liên kết vừa rồi cho phép nhảy tới một trang Web khác.
Bây giờ bạn hãy mở trang khuon.html trong Notepad rồi viết phần text có màu đỏ sau đây:
<BODY BGCOLOR="#FFEEFF">
Mời bạn đến thăm <A HREF="trang01.html">trang Web của tôi</A> !
</BODY>
Save thay đổi vừa rồi vào trang06.html và mở nó ra trong Internet Explorer, trang Web mới của bạn trông sẽ như thế này:
![]() |
Khi click lên liên kết đó bạn sẽ được đưa tới trang01.html.
Như vậy để biến một phần text nào đó thành một liên kết bạn chỉ cần đặt phần text ấy vào giữa các tags <A></A>. A là chữ viết tắt của Anchor, nghĩa là cái neo. Tại đó chúng ta đã "bỏ neo" cho một trang khác.
Trong tag <A> bạn dùng attribute HREF để cho biết đường dẫn và tên của trang Web mà liên kết sẽ đưa tới. HREF là chữ viết tắt của Hypertext Reference, tức là một tài liệu tham khảo dạng hypertext.
Tương tự như trên, bạn cũng có thể tạo một liên kết tới một địa chỉ trên mạng Internet. Trong Notepad bạn hãy viết thêm phần text có màu đỏ sau đây vào trang06.html:
<BODY BGCOLOR="#FFEEFF">
Mời bạn đến thăm <A HREF="trang01.html">trang Web của tôi</A> !<BR>
Go to <A HREF="http://www.yahoo.com/">Yahoo</A> !
</BODY>
Save thay đổi vừa rồi và nhấn nút Refresh trong cửa sổ Internet Explorer của trang06.html bạn sẽ thấy:
![]() Go to Yahoo ! |
Nếu máy tính của bạn đang nối mạng thì click vào liên kết thứ hai sẽ đưa bạn tới website nổi tiếng Yahoo. Trong attribute HREF bạn hãy chú ý cách viết một địa chỉ Internet, luôn luôn có http:// đi trước tên của website. Một địa chỉ Internet như thế được gọi là một URL, là chữ viết tắt của Uniform Resource Locator.
Bây giờ bạn hãy thêm vào trang06.html phần text có màu đỏ sau đây:
<BODY BGCOLOR="#FFEEFF">
Mời bạn đến thăm <A HREF="trang01.html">trang Web của tôi</A> !<BR>
Go to <A HREF="http://www.yahoo.com/">Yahoo</A> !<BR>
Hãy gửi <A HREF="mailto:teo@hcm.vnn.vn">thư</A> cho tôi !
</BODY>
Trang Web của bạn sẽ trở thành:
![]() Go to Yahoo ! Hãy gửi thư cho tôi ! |
Nếu bạn đã setup máy tính của mình để dùng e-mail thì click lên liên kết thứ ba sẽ làm xuất hiện phần mềm viết e-mail, qua đó bạn có thể viết và gửi thư cho địa chỉ nêu trong attribute HREF.
Bạn cũng có thể biến một hình ảnh thành một liên kết. Hãy save ảnh sau đây vào folder con hinhanh, giữ nguyên tên file là email_b.gif.
Bạn hãy viết thêm vào trang06.html phần text có màu đỏ sau đây:
<BODY BGCOLOR="#FFEEFF">
Mời bạn đến thăm <A HREF="trang01.html">trang Web của tôi</A> !<BR>
Go to <A HREF="http://www.yahoo.com/">Yahoo</A> !<BR>
Hãy gửi <A HREF="mailto:teo@hcm.vnn.vn">thư</A> cho tôi !<BR>
<A HREF="mailto:teo@hcm.vnn.vn"><IMG SRC="hinhanh/email_b.gif" WIDTH="40" HEIGHT="40"></A>
</BODY>
Trang Web của bạn sẽ trở thành:
![]() Go to Yahoo ! Hãy gửi thư cho tôi ! ![]() |
Khi đó khách đến thăm trang Web có thể click vào hình ảnh trên để viết thư cho bạn.
Bạn chú ý là hình ảnh trên được viền màu xanh dương để chỉ rằng nó là một liên kết. Nếu bạn không thích và muốn bỏ đường viền ấy đi thì hãy thêm attribute BORDER="0" vào trong tag IMG như sau:
<A HREF="mailto:teo@hcm.vnn.vn"><IMG SRC="hinhanh/email_b.gif" WIDTH="40" HEIGHT="40" BORDER="0"></A>
Bạn sẽ thấy hình ảnh liên kết tới địa chỉ e-mail không còn đường viền nữa:
![]() Go to Yahoo ! Hãy gửi thư cho tôi ! ![]() |
![]() |
Tiếp theo -->
![]() |
|
![]() |