Thẻ a trong HTML

     1. Thẻ <a> trong HTML

Thẻ <a> trong html được sử dụng để tạo siêu liên kết đến một tài liệu khác hoặc một nơi nào đó trong tài liệu hiện tại. (Khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ a trong HTML</title>
   </head>

   <body>
      <p>Đây là link của Webaffiliatevn <a href = "https://webaffiliatevn.com/">Affiliatevn.com</a></p>
   </body>
	
</html>

See the Pen NWNWQYJ by DavidKhai (@davidkhai) on CodePen.dark

 

     2. Các thuộc tính của thẻ <a>

Thẻ <a> HTML cũng hỗ trợ các thuộc tính bổ sung sau:

Thuộc tínhGiá trịSự miêu tả
charset

(bảng chữ cái)

character_encoding

(mã hóa ký tự)

Xác định mã hóa ký tự của tài liệu được liên kết.
coordsif shape = “rect” then coords = “left, top, right, bottom”

if shape = “circ” then coords = “centerx,centery,radius”

if shape = “poly” then coords = “x1, y1, x2, y2,..,xn,yn”

Chỉ định các tọa độ thích hợp với thuộc tính shape để xác định một vùng của hình ảnh cho bản đồ hình ảnh.
download

(tải xuống)

filename

(tên tệp)

Điều này tải xuống mục tiêu khi người dùng nhấp vào siêu liên kết.
hrefURLChỉ định URL của một trang mà liên kết muốn đi đến.
hreflanglanguage_code

(ngôn ngữ của url)

Mã ngôn ngữ của URL đích.
media

(phương tiện truyền thông)

media_query

(phương tiện truyền thông)

Nó chỉ định phương tiện nào tài liệu được liên kết được tối ưu hóa cho
nametên phầnĐánh dấu một khu vực của trang mà một liên kết nhảy tới.
relalternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
Mô tả mối quan hệ giữa tài liệu hiện tại và URL đích.
revalternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark
Chỉ định mối quan hệ giữa URL mục tiêu và tài liệu hiện tại.
shape

(hình dạng)

rect
rectangle
circ
circle
poly
polygon
Chỉ định hình dạng của bản đồ hình ảnh
target_blank
_parent
_elf
_top
Nơi mở URL mục tiêu.

_blank – URL mục tiêu sẽ mở trong một cửa sổ mới.

_self – URL mục tiêu sẽ mở trong cùng một khung khi nó được nhấp vào.

_parent – URL mục tiêu sẽ mở trong bộ khung chính.

_top – URL mục tiêu sẽ mở trong toàn bộ cửa sổ.

typemime_typeChỉ định loại MIME (Tiện ích mở rộng thư Internet đa năng) của URL mục tiêu

Nhưng trong đó có 3 thuộc tính cơ bản được sử dụng nhiều nhất.

Dưới đây là bảng mô tả sơ lược về ba thuộc tính đó: href, download, target

          2.1 Thuộc tính href

Thuộc tính href dùng để xác định đường dẫn đến tài liệu mà bạn muốn chuyển tới.

(Đường dẫn ở đây có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Liên kết bên dưới được xác định bởi đường dẫn tuyệt đối</p>
    <a href="https://webaffiliatevn.com/css/css.html">Tài liệu học CSS</a>
    <p>- Liên kết bên dưới được xác định bởi đường dẫn tương đối</p>
    <a href="../javascript/javascript.html">Tài liệu học JavaScript</a>
</body>
</html>

See the Pen oNxNKJo by DavidKhai (@davidkhai) on CodePen.dark

 

Ngoài ra, thuộc tính href cũng có thể dùng để xác định một vị trí bên trong trang web mà bạn muốn di chuyển tới (vị trí của phần tử được xác định dựa giá trị thuộc tính id của phần tử)

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        h1{font-size:25px;}
        p{font-size:15px;}
    </style>
</head>
<body>
    <a href="#javascript">Di chuyển đến phần tử có thuộc tính id với giá trị là "javascript"</a>
    <h1 id="html">1. Tài liệu học HTML</h1>
    ...
    <h1 id="css">2. Tài liệu học CSS</h1>
    ...
    <h1 id="javascript">3. Tài liệu học JavaScript</h1>
    ...
</body>
</html>

See the Pen oNxNKVp by DavidKhai (@davidkhai) on CodePen.dark

 

          2.3 Thuộc tính download

Thuộc tính download xác định việc khi người dùng bấm vào liên kết thì tài liệu của liên kết đó sẽ tự động được tải về.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <a href="https://webaffiliatevn.com/wp-content/uploads/2020/07/Microsite-la-gi-2.png" download>Nhấn vào đây !!!</a>
</body>
</html>

See the Pen jOqOgoO by DavidKhai (@davidkhai) on CodePen.dark

 

Lưu ý: Ta không cần phải xác định phần đuôi của tập tin vì hệ thống sẽ tự động làm việc đó.

          2.3 Thuộc tính target

Thuộc tính target dùng để xác định nơi mà tài liệu sẽ được mở.

Thuộc tính target có bốn giá trị cơ bản:

_blankMở tài liệu trong một tab mới
_selfMở tài liệu trong khung hiện tại
_parentMở tài liệu trong khung cha của khung hiện tại
_topMở tài liệu trong tab hiện tại

 

     3. Định dạng CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <a> với định dạng CSS như sau:

a:link, a:visited { 
    color: (internal value);
    text-decoration: underline;
    cursor: auto;
}
a:link:active, a:visited:active { 
    color: (internal value);
}

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *