[HTML] Bài 8 : Nhóm Thẻ INLINE - Liên Kết

1. Giới thiệu Siêu Liên kết

Siêu liên kết cho phép người truy cập có thể duyệt từ trang web này đến trang web khác, từ vị trí này sang vị trí khác hay dùng để mở một object nào đó (có thể là file word, excel, pdf, mp3...) . Một liên kết gồm 3 thành phần:
Nguồn: chứ nội dung hiển thị khi truy cập đến có thể là một trang web,  một đoạn phim, một hình ảnh ..v..v..
Nhãn: có thể là 1 dòng văn bản hay hình ảnh để người dùng click vào khi muốn truy câp dến nguồn.
Đích: xát định vị trí để nguồn hiển thị.

2. Tag A ( Anchor) và mối liên kết:

Mục đích chính của thẻ a đương nhiên là giúp người dùng có thể tương tác với website thông qua chuột (click chuột). Tương tác ở đây là có thể đưa người đọc/xem website đến một liên kết bên trong trang web hoặc ngoài trang. ( ở Blogspot, các bạn có thể dễ dàng nhìn thấy link xuất hiện ở các tiêu đề bài viết, mình tạo ra thẻ liên kết đó thì bạn mới vào đọc được bài viết này ^^)
Nói chung lại, nếu không có thẻ liên kết a thì cũng chẳng có Google, facebook hay Blogger, Dantri,... nào cả.

Cú Pháp: <A>Nội Dung Liên Kết<A>

- Nội dung liên kết có thể là từ, cụm từ hay đoạn văn, hình ảnh, video.
- Khi bạn di chuyển chuột qua một thẻ a, điều dễ nhận biết là con trỏ chuột sẽ biến thành bạn tay nhỏ.
- Thông thường thẻ a có đường gạch chân dưới nội dung liên kết.

2.1 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.

2.2 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ị.
Nên chọn các từ làm đầu mối sao cho gợi tả và sao cho tự nhiên, không ảnh hưởng đến nội dung và ý nghĩa của câu văn. Tránh sử dụng lặp đi lặp lại câu "nhấn vào đây" khi tạo đầu mối liên kết.
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:

2.3 Đị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

.

Ví Dụ:

code html:
<a href="http://google.com.vn" target="_blank">Google Việt Nam</a>
Hiển Thị trên trình duyệt:
Google Việt Nam

*Thuộc tính:- href: bắt buộc phải có bởi vì có nó mới có đường dẫn cần trỏ tới
- target: thuộc tính này quy định liên kết được mở ra ở đâu, có các giá trị:
_blank: mở trang web ở cửa sổ hay tab mới
_seft: mở ở cửa sổ hiện tại mặc định khi không có thuộc tính target thì thẻ <a> sẽ mở ở cửa sổ hiện tại.

2.4 Địa chỉ tương đối :

Nếu liên kết đến một tệp ở ngay trên máy chủ (hoặc cùng 1 foder) 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.

2.5 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.
Lưu ý có thêm dấu "#".

Cấu trúc:

- Bước đặt tên:
<a name="muc-1">Đây là mục 1</a>
<a id="muc-1">Đây là ID mục 1</a>
- Bước tạo liên kết:
<a href="#muc-1">Di chuyển đến mục 1</a>

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 :

3. Liên kết đa phương tiện:

- Sử dụng ảnh làm liên kết:
<a href="http://www.google.com.vn" target="_bank"><img src="google.png"></a>
Xem ví dụ:

- Liên kết đến âm thanh, đoạn nhạc:
<a href="doan-nhac-cua-toi.mp3">Nghe nhạc của tôi</a>

Ví dụ: Tải bài nhạc

- Liên kết đến Đoạn phim:
<a href="video-cua-toi.avi"></a>

Ví dụ: Tải đoạn phim