Bài 8: Phần tử a trong HTML

Trong bài này bạn sẽ học cách làm thế nào để liên kết các trang web lại với nhau.
Bạn cần những gì để tạo liên kết?
Để tạo ra các liên kết, bạn phải sử dụng phần tử. Một phần tử đơn giản với một thuộc tính và bạn có thể tạo ra một liên kết đến trang web mà bạn muốn.
Ví dụ 1:

Kết quả trên trình duyệt:

Phần tử a là chữ đại diện của từ “anchor”(neo). Và thuộc tính href là từ viết tắt của từ “hypertext reference” (tham chiếu siêu văn bản), là nơi để xác định liên kết đến đâu, thông thường đó là một địa chỉ của một website hoặc một tập tin.
Trong ví dụ trên, thuộc tính href có giá trị là “http://kienthuc360.vn/”, đó cũng là địa chỉ đầy đủ của website chúng tôi trên internet, nó được gọi là URL (Uniform Resource Locator – định vị nguồn đồng dạng). Chú ý rằng “http://” phải luôn được thêm vào trong URL. Phần chữ “Đây là liên kết của trang Kiến thức 360” sẽ được trình bày trên trình duyệt như là một liên kết. Hãy luôn nhớ kết thúc phần tử liên kết bằng thẻ đóng </a>.
Những liên kết các trang trên cùng một website của tôi sẽ được thực hiện như thế nào?
Nếu bạn muốn liên kết các trang trong cùng một website, bạn không cần phải khai báo đầy đủ địa chỉ (URL) của trang web. Ví dụ, nếu bạn tạo ra 2 trang (tạm gọi là web1.htmlweb2.html) và lưu chúng trong cùng một thư mục, bạn có thể tạo ra một liên kết từ trang này đến trang kia chỉ bằng cách nhập đúng tên tập tin của trong liên kết. Trong trường hợp cụ thể một liên kết từ trang web1.html đến web2.html chỉ cần thực hiện như sau:
Ví dụ 2:

Nếu trang web2.html được đặt trong một thư mục con có tên là “subfolder” liên kết sẽ như sau:
Ví dụ 3:

Trong trường hợp ngược lại, web2.htm muốn liên kết đến web1, URL sẽ như sau:
Ví dụ 4:

“../” để chỉ đến thư mục trên một cấp so với vị trí hiện hành của tập tin. Tương tự nếu trên 2 cấp bạn có thể dùng như sau “../../“.
Để hiểu rõ hơn về các trường hợp kể trên bạn nên tìm hiểu về đường dẫn tuyệt đối (absolute path – ví dụ 1) và đường dẫn tương đối (relative path – ví dụ 2,3,4) ở các lớp vi tính cơ bản.
Những liên kết nội bộ chỉ trên cùng một trang Web sẽ được thực hiện như thế nào?
Bạn có thể tạo ra các liên kết nội bộ ở trên cùng một trang Web, thí dụ bạn có một bản mục lục các nội dung ở đầu trang và bạn cần các liên kết đến các mục con nằm bên dưới trên cùng một trang đó, bạn có thể dùng thuộc tính rất hữu dụng là id (identification) và ký tự là “#” (hash)
Sử dụng thuộc tính id để đánh dấu phần tử mà bạn muốn liên kết đến, ví dụ:

Bây giờ bạn cần tạo một liên kết đến phần tử đó bằng cách sử dụng dấu “#” trong phần thuộc tính của liên kết. Dấu “#” phải đứng trước id của thẻ mà bạn gắn liên kết:

Tất sẽ rõ ràng ở ví dụ sau:
Ví dụ 5:

bạn sẽ thấy trên trình duyệt giống như dưới đây, hãy nhấp chuột vào liên kết:

Chú ý: Một thuộc tính id luôn phải có tên bắt đầu là một ký tự
Có còn các liên kết nào khác?
Bạn có thể tạo ra một liên kết đến địa chỉ email. Nó giống như khi bạn liên kết đến một trang tài liệu:
Ví dụ 6:

Kết quả trên trình duyệt

Sự khác nhau giữa liên kết đến một tập tin và đến một email đó là thay vì gõ đầy đủ địa chỉ tài liệu thì bạn chỉ cần nhập vào mailto: và theo sau là một địa chỉ e-mail. Khi bạn nhấp chuột vào liên kết, chương trình email mặc định sẽ được mở lên ở chế độ đang soạn thảo với dòng địa chỉ gởi đi là email đã được gắn trong liên kết. Lưu ý chức năng này chỉ hoạt động nếu người xem đã cái đặt sẳn trong máy tính một chương trình duyệt email mặc định.
Còn có các thuộc tính nào tôi cần lưu ý?
Khi tạo ra một liên kết, bạn nên luôn sử dụng thuộc tính href. Thêm vào đó, bạn cần thêm thuộc tính title trong liên kết
Ví dụ 7:

Bạn sẽ trông thấy như thế này trên trình duyệt

Thuộc tính title là một loại mô tả sơ lược về liên kết của bạn, nếu bạn đừng nhấp chuột, chỉ để con trỏ lên liên kết, bạn sẽ thấy dòng chữ “Đến xem trang Kiến thức 360”

Kết thúc bài 8, chúc bạn thành công!

Xem tiếp bài trong khóa học<< Bài 7: Thuộc tính (Attributes) trong HTMLBài 9: Hình ảnh trong HTML >>

HƯỚNG DẪN DOWNLOAD TẠI KIENTHUC360.VN
QUY ĐỊNH BÌNH LUẬN
1. Vui lòng viết tiếng Việt có dấu
2. Ngôn từ bình luận có văn hóa, văn minh, lịch sự
3. không dùng lời lẽ thô tục, xúc phạm thành viên khác
4. Đang xài hàng free, vui lòng đừng bàn đến chuyện virus; nếu bạn đảm bảo bạn đang xài windows bản quyền 100% thì vui lòng vào trang khác bình luận về virus
5. Các link rút gọn chỉ nhằm mục đích duy trì website, nếu không hiểu về công nghệ hay đơn giản là link rút gọn, mời bạn vào trang web khác không có link rút gọn
6. Những tài liệu và nội dung được chia sẻ hoàn toàn free và chỉ vì đam mê, nếu bạn có cùng đam mê chia sẻ với mọi người những gì mình có, xin liên hệ, chúng ta cùng chia sẻ, email: contact@kienthuc360.vn