| BÀI HỌC

Điều thực sự làm cho Web nổi trội là khả năng tạo ra các mối liên kết đến các thông tin liên quan. Những thông tin này có thể nằm trong chính trang Web hay nằm ở các trang Web khác bao gồm hình ảnh, âm thanh, đoạn phim...

Liên kết tới một file cục bộ

Bây giờ bạn bắt đầu tạo một liên kết từ trang Web của bạn đến một trang Web thứ hai. Liên kết này được gọi là cục bộ bởi vì trang Web thứ hai cũng cùng nằm trên một máy với trang Web đầu.

Để đơn giản trước hết bạn tạo một file HTML thứ hai và đặt nó cùng folder với trang mà bạn đã tạo ở các bài trước.

Muốn tạo một siêu liên kết ta dùng thẻ <A>:

Bất cứ đoạn văn bản nào nằm giữa <A HREF=" "> và </A> đều là một siêu văn bản liên kết tới các trang Web khác và nó được gạch dưới.

| THỰC HÀNH

1. Tạo một trang Web khác giả sử là bai_06.html và lưu vào cùng Folder với trang Web của bạn.

2. Trong trang Web mà bạn cần tạo siêu liên kết tới, bạn thêm Tag tạo siêu liên kết như sau :

   <FONT FACE="Arial" SIZE="2">
   Xem bài học <A HREF="bai_06.html">Đưa hình ảnh vào trang Web</A>
   </FONT>

3. Lưu lại công việc của bạn và mở trên trình duyệt. Khi đó bạn sẽ thấy đoạn văn bản "Đưa hình ảnh vào trang Web" được tạo thành siêu liên kết, nó được đổi thành màu xanh và khi bạn đưa chuột vào vùng văn bản này thì chuột bị đổi thành hình bàn tay và nếu bạn bấm chuột thì sẽ được đưa tới trang có tên là bai_06.html

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Xem bài học Đưa hình ảnh vào trang Web
	Done

Bạn cũng có thể liên kết tới một hình ảnh bằng cách thay tên file HTML bằng một file ảnh. Ví dụ:

Tới đây chắc bạn lại có thắc mắc, muốn liên kết tới thư mục khác hoặc thư mục cao hơn thì làm thế nào? Để thực hiện điều đó mời bạn xem tiếp phần sau đây. Giả sử cấu trúc folder của bạn có dạng:

Và bạn muốn liên kết tới file ảnh i-today.gif, khi đó trang Tag <A HREF ...> trong file trangwebcuaban.html bạn sửa lại như sau:

Còn trong trường hợp file bạn cần tạo liên kết có cấu trúc folder cao hơn. Ví dụ:

và bạn cần liên kết tới ảnh i-today.gif có cấp cao hơn thư mục tranghtml chứa trang Web của bạn, khi đó bạn cần sửa lại Tag như sau:

Mỗi lần xuất hiện "../" báo cáo cho trình duyệt tìm kiếm ở một folder có cấp cao hơn.

Thực hành

Bây giờ bạn hãy áp dụng các cách liên kết tới file ở Folder cùng cấp và cấp cao hơn. Khi thạo các cách liên kết, khi xây dựng trang Web bạn có thể để tất cả các ảnh trong cùng một Folder và liên kết tới, điều này làm cho việc thay đổi, cập nhật trang Web được thuận tiện hơn.

Thêm một chút về vấn đề siêu liên kết

Để cho trang Web của bạn có vẻ chuyên nghiệp hơn, bây giờ bạn hãy đổi tên file đầu tiên thành index.html. Điều này được lý giải như sau:

Ví dụ khi bạn vào trang I-today bạn sẽ gõ vào dòng địa chỉ của trình duyệt http://www.vnn.vn/i-today/. Thực ra khi đó trình duyệt sẽ đọc file http://www.vnn.vn/i-today/index.html.

BÀI HỌC

Liên kết đến các trang Web khác trên Internet

Để liên kết tới một trang Web khác trên Internet ta dùng Tag sau:

Trong đó URL (Uniform Resource Locator) cho biết địa chỉ mà bạn muốn liên kết tới.

Ví dụ về các URL:
http://www.hut.edu.vn
http:// www.vnn.vn
http://www.vnn.vn/i-today
mailto:hung_nd@vol.vnn.vn (mở hộp Outlook để soạn mail gửi đi)

Nếu bạn muốn trang Web này được mở trong một cửa sổ mới để giữ nguyên trang web của bạn trong cửa sổ cũ thì bạn thêm thuộc tính TARGET="_blank" vào trong thẻ <A>.

Thực hành

Tạo một file HTML và thêm đoạn sau vào trong phần BODY:

Lưu công việc của bạn, sau đó mở trình duyệt và so sánh với ví dụ. Bạn có thể kiêm tra các siêu liên kết bằng cách di chuột vào vùng văn bản siêu liên kết và xem thông báo ở thanh trạng thái của trình duyệt, thanh trạng thái sẽ hiển thị URL mà bạn sẽ liên kết tới.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Trường Đại học Bách khoa Hà nội Tạp chí Công nghệ Thông tin Internet Today Gửi thư cho Trần Việt Hùng
	Done

BÀI HỌC

Liên kết đến tới các phần trên cùng một trang

HTML không những cho bạn tạo liên kết đến các trang Web khác nằm ở cùng máy tính với trang Web của bạn hoặc trên Internet, mà còn cho phép bạn liên kết đến các phần trong cùng một trang. Để liên kết đến các phần của một trang trước hết bạn phải đặt tên cho phần cần liên kết tới. Thủ tục này được thực hiện bởi thuộc tính NAME trong thẻ <A>:

Trong đó name là một tên do bạn đặt ra. Sau đó nếu bạn cần liên kết tới phần đã đặt tên bạn chỉ cần dùng:

Tương tự khi liên kết tới các tài liệu khác ta có thể dùng:

Ví dụ: Ngay sau thẻ BODY bạn đặt dòng sau:

Và khi muốn tạo liên kết để trở lên phần đầu của trang bạn viết như sau:

Click vào đây để về đầu trang

Tạo các siêu liên kết bằng hình ảnh

Như bạn vẫn thường thấy trong các trang Web, các siêu liên kết không chỉ là các đoạn văn bản mà còn cả bằng hình ảnh nữa, điều này càng làm cho Web trở nên hấp dẫn. Phần này giới thiệu cho bạn cách tạo các siêu liên kết bằng hình ảnh:

Việc đầu tiên là bạn chọn 1 ảnh đặt trong thư mục images, giả sử đó là graph.jpg. Khi đó bạn sử dụng các Tag như sau:

Bạn lưu ý là Tag <IMG..> nằm giữa Tag <A HREF ...> và </A>.

Khi một ảnh được dùng làm siêu liên kết, nếu thuộc tính BORDER của ảnh bằng 0 (BORDER=0) thì sẽ có một hộp màu có màu của các siêu liên kết bao quanh ảnh.

Lưu ý: Việc đưa một hình ảnh lớn vào trong trang Web làm cho người đọc phải mất thời gian chờ tải vì vậy bạn nên sử dụng một số mẹo sau:

• Để đề phòng người đọc tất chế độ hiển thị hình ảnh của trình duyệt, bạn nên thêm thuộc tính ALT="..." vào Tag <IMG> để người đọc dễ định hướng.

• Khi cần giới thiệu một hình ảnh lớn, bạn nên tạo một hình ảnh thu nhỏ của nó và đưa vào trang Web làm siêu liên kết tới ảnh lớn, như thế đỡ mất thời gian download trang Web của bạn, ví dụ bạn hãy Click chuột vào ảnh sau:

  

  Đoạn mã đơn giản là:

  <A HREF="images/anh1.gif"><IMG SRC="images/anh1_small.gif"></A>

| THỰC HÀNH

Bây giờ bạn hãy tạo một file HTML mà phần đầu được trình bày theo kiểu mục lục, mỗi mục liên kết tới phần nội dung tương ứng trong cùng văn bản, ở cuối mỗi phần nội dung có một ảnh làm siêu liên kết để báo quay trở lại đầu tài liệu. Trông giống như sau:

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Mục lục Chương một Giới thiệu chung Những kiến thức vỡ lòng về HTML Chương hai Các Tag thông dụng Tag định dạng kiều chữ Tag chèn ảnh Các Tag trang trí trang Web Chương ba Các trang Web mẫu Kết thúc
	Done

Theo Tạp chí Tin học I-Today