BÀI 2 : THIẾT KẾ WEB TĨNH
7. Liên kết – Link
Mục tiêu: tạo ứng dụng bảng liên kết trang Web.
7.1. Thẻ neo và mối liên kết
Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó.
Liên kết siêu văn bản gồm có ba phần: giao thức, neo và địa chỉ hay URL. Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo. Cặp thẻ tạo neo là <A id="url" runat="server" >…</A> (Anchor). Thẻ này có nhiều thuộc tính bắt buộc phải xác định rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau.
7.2. Thuộc tính HREF
HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên kết đến:
Một tài liệu khác (external link) hay một phần khác nằm trong chính tài liệu đang đọc (internal link).
Giao thức để tham chiếu HREF là HTTP. Nếu là liên kết nội tại – internal link thì không cần phải có phần giao thức.
7.3. Liên kết ra ngoài – External Links
Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết. Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị.
Cú pháp để tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài - là như sau:
<A id="URL"> Nhóm từ đầu mối liên kết</A>
7.4. Địa chỉ tuyệt đối
Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức và đầy đủ địa chỉ URL của tệp đích.
<A id="full URL">... </A>
Ví dụ:
<A id ="http://www.vnu.edu.vn/index.html>ĐHQG Hà Nội</A>
<A id="http://www.srl.rmit.edu.au/sa/vicsa.html>Victorian Subject Associations on Internet</A>
7.5. Địa chỉ tương đối
Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng với đường đẫn đến thư mục nơi chứa tệp đích.
<A id ="path & filename">... </A>
Ví dụ: <A id ="examples/exam1.htm">Ví dụ 1</A>
7.6. Liên kết nội tại – Internal Link
Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng.
Để làm điều này, cần đánh dấu điểm đích -book mark- của liên kết bằng thẻ neo.
còn trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng tên nói trên.
<A id ="Tên điểm đích">
Lưu ý có thêm dấu "#".
Ví dụ, để tạo liên kết nội tại từ đây nhảy về đầu trang ta cần tạo một book mark ở đầu trang với tên là Top chẳng hạn. Sau đó, tạo thẻ neo liên kết ở dòng dưới như sau: <A id ="#Top"> về đầu trang </A>
7.7. Siêu liên kết – Hyperlink
Mã lệnh khởi tạo:
<asp: HyperLink ImageUrl="IMAGE_URL" NavigateUrl="url" Text="text"
Target="_blank" runat="server" />
Trong đó:
HyperLink là khai báo cho biết dùng siêu liên kết.
ImageUrl là khai báo hình ảnh hiển thị cho đường liên kết.
NavigateUrl khai báo địa chỉ đích
Target khung của địa chỉ đích. Ví dụ: <asp: HyperLink ImageUrl="/banners/w6.gif" NavigateUrl="http://www.w3schools.com" Text="Visit W3Schools!" Target="_blank" runat="server" /> Kết quả:
Bài tập thực hành của học viên
Câu 1: Thiết kế trang web theo mẫu sau đây:
Gợi ý:
Câu 1: trọng tâm bài thực hành này là các siêu liên kết, hình nền và cách phối màu. Vận dụng các kiến thức đã học trong bài 1, 2 để hoàn thành bài tập.
Câu 2: trong bài này, chú ý đến cách tạo khung trang (có thể dùng bảng biểu kết hợp với CSS hoặc sử dụng Frame), cách chèn, nhúng hình ảnh, cách tạo các siêu liên kết đơn giản hoặc tạo và sử dụng các nút nhấn liên kết (Link Button).
