10 tháng 12, 2019

Đường dẫn trong HTML


1. Các đường dẫn trong HTML

1.1: Khái niệm đường dẫn

Đường dẫn (hay còn gọi là đường Link) là các liên kết mà khi người dùng click vào nó thì trình duyệt sẽ chuyển tới một tài liệu HTML khác. 

Để chèn đường dẫn vào tài liệu HTML ta dùng cú pháp sau:
<a href="Đường dẫn đến tài liệu khác" title="Tiêu đề liên kết">Văn bản</a>


1.2: Đường dẫn nội bộ (Local Link)

Trường hợp đường dẫn của trang đích trong link HTML ở cùng một website với trang web hiện tại thì chúng ta có thể sử dụng địa chỉ tương đối.
Ví dụ
<a href="Word-HTML" title="Học Word">Học Word</a>
Link như trên được gọi là local link hay liên kết nội bộ trong cùng một website.
Đường dẫn nội bộ là đường dẫn hướng tới cùng một trang web, được chỉ định bằng URL liên quan, không cần https://www.


1.3: Đường dẫn ngoài

Đường dẫn ngoài có thể tham chiếu tới URL hoặc đường dẫn liên quan tới trang web hiện tại.


1.4: Đường dẫn dưới dạng hình ảnh

Đường dẫn có thể được chèn vào hình ảnh. Ví dụ:
<a href="https://www.quantrimaytinh.com">
  <img src="logo-quantrimaytinh.jpg" alt="Chia sẻ kiến thức CNTT" style="width:69px; height:69px; border:0;">
</a>
Lưu ý: Thuộc tính border: 0 được thêm vào để loại bỏ đường viền cho hình ảnh liên kết đối với các trình duyệt từ IE9 trở về trước.

2. Hiệu ứng của đường dẫn HTML

- Đường dẫn sẽ được gạch chân.
- Khi rê con trỏ chuột vào đường dẫn thì con trỏ hình mũi tên sẽ chuyển thành hình bàn đang chỉ.  
- Đường dẫn chưa được click sẽ có màu xanh dương.
- Đường dẫn đã được click vào và chuẩn bị chuyển trang (active) thì sẽ chuyển thành màu đỏ.
- Đường dẫn đã được click vào và đã chuyển trang (visited) thì sẽ chuyển thành màu tím.

Lưu ý: Bạn có thể thay đổi các hiệu ứng trên bằng đinh dạng CSS

3. Thuộc tính của đường dẫn

3.1: Thuộc tính Target

Thuộc tính target dùng để xác định tài liệu HTML của đường dẫn sẽ được mở như thế nào.
Bao gồm các giá trị sau:
  • blank: mở ở cửa sổ hoặc tab mới
  • self: mở ở cùng cửa sổ/tab (mặc định)
  • parent: mở ở khung mẹ (parent frame)
  • top: mở ở toàn bộ cửa sổ
  • framename: mở ở khung đặt tên (named frame)
Ví dụ mở trang Quản trị máy tính trong tab mới:
<a href="https://www.quantrimaytinh.com" target="_blank">Welcome to Quản trị máy tính</a>

3.2: Thuộc tính tiêu đề (title)

Thuộc tính title dùng để hiển thị thông tin bổ sung cho liên kết. Thông tin thường hiển thị dưới dạng tooltip khi rê con trỏ chuột qua liên kết.
Ví dụ:
<a href="https://www.quantrimaytinh.com" title="truy cập vào trang Quản trị máy tính">Welcome to Quản trị máy tính</a>


3.3: Tạo đánh dấu trang (Bookmark)

Đánh dấu trang trong HTML được dùng để người đọc truy cập nhanh đến một nội dung nào đó trong trang web. Đánh dấu trang rất hữu ích khi nội dung một trang quá dài. Nó giống với tạo bookmark trong MS Word.

Cách làm như sau:
Tại phần mục lục đầu trang, bạn tạo ra danh sách các liên kết. Tên đường dẫn do bạn tự đặt, sau đó gán tên liên kết đó vào id cho các phần tử HTML.

Ví dụ
Tại phần mục lục đầu trang mình tạo ra một liên kết
<a href="#hinhnendep">Hình nền đẹp</a>
Đến phần hình nền đẹp thì mình sẽ gán id =hinhnendep
<h2 id="hinhnendep">Hình nền đẹp</h2>
Kết quả là khi người dùng click vào mục lục ở đầu trang thì trình duyệt sẽ tự động di chuyển nhanh đến mục Hình nền đẹp

SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!