Liên Kết Trong HTML - WebVN

Trang chủ » Cách Tạo Liên Kết Trong Html » Liên Kết Trong HTML - WebVN

Có thể bạn quan tâm

« Bài TrướcBài Tiếp »

Bạn có thể thấy liên kết xuất hiện trên hầu hết tất cả các website. Liên kết cho phép người dùng chuyển từ trang này tới một trang khác.

Liên kết trong HTML – Siêu Liên Kết

Các liên kết trong HTML được gọi là những siêu liên kết.

Siêu liên kết là một đoạn chữ hoặc một bức ảnh mà bạn có thể nhấn vào để chuyển tới một trang khác.

Liên kết trong HTML – Cú pháp

Trong HTML, các liên kết được tạo bởi thẻ <a>:

1 <ahref="url">tênliênkết</a>

12345678 <!DOCTYPE html><html><body> <p><ahref="https://webvn.com">TựHọcHTML</a></p> </body></html>

Demo

Thuộc tính href chứa địa chỉ của liên kết (https://webvn.com)

Tên liên kết sẽ là phần sẽ được hiển thị (Tự Học HTML).

Khi người dùng nhấn vào tên liên kết họ sẽ được chuyển sang một trang mới.

Tên liên kết không chỉ bao gồm chữ. Nó có thể là một ảnh hoặc bất kỳ thành phần HTML nào khác.

Liên kết nội bộ

Liên kết ở ví dụ bên trên sử dụng đường dẫn tuyệt đối (Địa chỉ đầy đủ).

Một liên kết nội bộ (liên kết tới trang khác trên cùng một website) là một địa chỉ tương đối (không có phần http://tenwwebsite…).

12345678910 <!DOCTYPE html><html><body> <p><ahref="/hoc-html/">HọcHTML</a>làliênkếttớimộttrang trêncùng website.</p> <p><ahref="http://vi.wikipedia.org/">Wikipedia</a>làliênkếttớimộtwebsitebênngoài.</p> </body></html>

Demo

Liên kết trong HTML – Màu sắc và biểu tượng

Khi bạn di chuột vào một liên kết, sẽ có hai điều thường xảy ra:

  • Chuột sẽ chuyển từ dạng mũi tên sang hình một bàn tay nhỏ
  • Màu của liên kết sẽ thay đổi

Mặc định, trên các trình duyệt liên kết sẽ được hiển thị như sau:

  • Một liên kết chưa được nhấn vào sẽ được gạch chân và có màu xanh
  • Một liên kết đã được nhấn vào sẽ được gạch chân và có màu tím
  • Khi một liên kết được nhấn sẽ được gạch chân và có màu đỏ

Bạn có thể thay đổi kiểu mặc định bằng cách sử dụng CSS:

12345678910111213141516171819202122232425262728293031323334 <!DOCTYPEhtml><html><head><style>a:link {color:#000000;background-color:transparent;text-decoration:none;}a:visited {color:#000000;background-color:transparent;text-decoration:none;}a:hover {color:#ff0000;background-color:transparent;text-decoration:underline;}a:active {color:#ff0000;background-color:transparent;text-decoration:underline;}</style></head><body> <p>Bạncóthểthayđổimàumặcđịnhcủaliênkết</p> <ahref="/css-trong-html/"target="_blank">CSS trong HTML</a> </body></html>

Demo

Liên kết trong HTML – Thuộc tính target

Thuộc tính target quy định vị trí mở của trang được liên kết.

Trong ví dụ dưới đây liên kết sẽ được mở trong một cửa sổ hoặc một tab mới:

12345678910 <!DOCTYPE html><html><body> <ahref="https://webvn.com/html/hoc-html/"target="_blank">TựhọcHTML</a> <p>Nếubạnthiếtlậpthuộctính targetlà"_blank",liênkếtsẽđượcmởtrongmộtcửasổhoặctabmới.</p> </body></html>

Demo

TargetMiêu tả
_blankMở liên kết trong một cửa sổ hoặc một tab mới
_selfMở liên kết tại chính cửa sổ hiện tại (Mặc định)
_parentMở liên kết tại frame ngoài
_topMở liên kết tại cửa sổ hiện tại (Thoát ra khỏi frame nếu đang ở trong frame).
Tên frameMở liên kết theo tên của frame

Nếu trang của bạn đang nằm ở trong một frame, bạn có thể dùng  target=”_top” để thoát khỏi frame:

12345678 <!DOCTYPE html><html><body> <p>Trangcủabạnđangnằmtrong frame?<ahref="https://webvn.com/html/hoc-html/"target="_top">Nhấnvàođây!</a></p> </body></html>

Demo

Liên kết trong HTML – Sử dụng ảnh

Cách phổ biến nhất sử dụng ảnh trong liên kết là:

1234567891011121314 <!DOCTYPE html><html><body> <p>Ảnhcóchứaliênkết,bạncóthểnhấnđểchuyểnsang trangmới.</p> <ahref="/html/hoc-html/"><img src="/wp-content/uploads/2014/12/pic_html5.gif"alt="Học HTML"style="width:42px;height:42px;border:0"></a> <p>Chúng tađãthêm"border:0"đểtránh trình duyệtInternet Explorer9(vàcácphiênbảntrướcđó)hiểnthịviềnxung quanhảnh.</p> </body></html>

Demo

“border:0” được thêm vào để tránh trình duyệt Internet Explorer 9 (và các phiên bản trước đó) hiển thị viền xung quanh ảnh.

Liên kết trong HTML – Thuộc tính id

Thuộc tính id có thể được sử dụng để tạo một chỉ mục trong trang HTML.

Chỉ mục không không hiển thị trên trình duyệt.

Ví dụ

Thêm thuộc tính id vào bất kỳ thẻ <a> nào:

1 <aid="marked">Khuvựcđượcđánhdấu</a>

sau đó tạo một liên kết tới chỉ mục (Khu vực được đánh dấu):

1 <ahref="#marked">Tớikhuvựcđượcđánhdấu</a>

Hoặc tạo một liên kết tới chỉ mục từ một trang khác:

1 <ahref="https://webvn.com/lien-ket-trong-html/#marked">Tớikhuvựcđượcđánhdấu</a>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 <!DOCTYPE html><html><body> <p><ahref="#block6">Xem Block6.</a></p> <h2>Khuvực1</h2><p>Nộidung block</p> <h2>Khuvực2</h2><p>Nộidung block</p> <h2>Khuvực3</h2><p>Nộidung block</p> <h2>Khuvực4</h2><p>Nộidung block</p> <h2>Khuvực5</h2><p>Nộidung block</p> <h2><aid="block6">Khuvực6</a></h2><p>Nộidung block</p> <h2>Khuvực7</h2><p>Nộidung block</p> <h2>Khuvực8</h2><p>Nộidung block</p> <h2>Khuvực9</h2><p>Nộidung block</p> <h2>Khuvực10</h2><p>Nộidung block</p> <h2>Khuvực11</h2><p>Nộidung block</p> <h2>Khuvực12</h2><p>Nộidung block</p> <h2>Khuvực13</h2><p>Nộidung block</p> <h2>Khuvực14</h2><p>Nộidung block</p> </body></html>

Demo

Tổng kết bài học

  • Sử dụng thẻ <a> để tạo một liên kết trong HTML
  • Sử dụng thuộc tính href để quy định địa chỉ của liên kết trong HTML
  • Sử dụng thuộc tính target để quy định vị trí mở của trang được liên kết trong HTML
  • Sử dụng thẻ <img> (trong thẻ <a>) để sử dụng ảnh liên kết trong HTML
  • Sử dụng thuộc tính id để tạo một chỉ mục trong trang HTML
  • Sử dụng thuộc tính href (href=”#value”) để chuyển tới chỉ mục trong HTML

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5 « Bài TrướcBài Tiếp »

Từ khóa » Cách Tạo Liên Kết Trong Html