Liên kết trong HTML

  • Nguyễn Lê Điệp
  • 24-12-2016
  • 391
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.
    Liên kết trong HTML là một siêu liên kết, nó giúp bạn chuyển qua một trang khác thông qua siêu liên kết này đồng thời khi bạn rê chuột vào phần liên kết thì con chuột của bạn sẽ biến thành hình bàn tay.
    Với một liên kết không những chỉ có một văn bản thuần mà nó còn có thể liên kết đến một hình ảnh hoặc bất kỳ các phần tử nào đó trong HTML.

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

    Đối với liên kết trong HTML sẽ được xác định bởi thẻ <a>
    <a href="địa chỉ liên kết">Tiêu đề hiển thị</a>
    Với địa chỉ liên kết là một địa chỉ liên kết đến một trang khác mà chúng ta không nhìn thấy được. Tiêu đề hiển thị là phần chúng ta có thể nhìn thấy và đồng thời rê chuột vào để click vào đó.
    Ví dụ
    <a href="http://kennis.vn/topic/hoc-html">Học HTML tại Kennis.vn</a>
    Xem ví dụ

    Liên kết trong trang HTML

    Ở ví dụ trên chúng ta đã dùng một địa chỉ tuyệt đối của trang web ngoài ra chúng ta cũng có thể liên kết bằng một địa chỉ tương đối bằng cách bỏ phần http://kennis.vn
    <a href="/topic/hoc-html">Học HTML tại Kennis.vn</a>
    Xem ví dụ

    Màu sắc liên kết trong HTML

    Theo mặc định một liên kết trong HTML sẽ được hiển thị lên trình duyệt với 3 chế độ sau
    • Một liên kết ban đầu có gạch chân và có màu xanh
    • Một liên kết đã được click vào sẽ có gạch chân và có màu tím
    • Một liên kết đang hoạt động sẽ có gạch chân và có màu đỏ

    Đối với liên kết có những màu mặc định như thế này bạn có thể thay đổi nó bằng thuộc tính style.

    <style>
    	a:link{
    		color:green;
    		text-decoration:none;
    	}
    	a:visited{
    		color:aqua;
    		text-decoration:none;
    	}
    	a:hover{
    		color:red;
    		text-decoration:underline;
    	}
    	a:active{
    		color:yellow;
    		text-decoration:underline;
    	}
    </style>
    Xem ví dụ

    Các kiểu liên kết trong HTML

    Trong HTML có các kiểu liên kết sau:

    • _blank - Mở trang trong một cửa sổ mới
    • _self - Mở trang trong cửa sổ hiện tại
    • _parent - Mở trang được liên kết trong một cửa sổ lớn
    • _top - Mở trang hiển thị đầy đủ trong cửa sổ trình duyệt
    • framename - Mở trang được liên kết trong một khung dựng sẵn

    Ở ví dụ bên dưới sẽ mở trang ra một cửa sổ mới

    <a href="/topic/hoc-html" target="_blank">Học HTML tại Kennis.vn</a>
    Xem ví dụ

    Hình ảnh trong liên kết HTML

    Trong HTML bạn có thể đặt liên kết tới một trang web khác bằng cách đặt liên kết trong một hình ảnh.
    <a href="/topic/hoc-html">
      	<img src="/home/images/icon.png" alt="Học HTML tại Kennis.vn" style="width:50px;height:50px;border:0;">
    </a>
    Xem ví dụ

    Bước nhảy liên kết trong HTML

    Trong một trang web có nội dung rất dài bạn muốn đọc ở phần cuối của trang bạn gặp khó khăn khi phải cuộn chuột xuống. Với bước nhảy trong liên kết HTML khi bạn click chuột vào liên kết này thì nó sẽ đưa tới vị trí bạn muốn xem.
    Đâu tiên bạn tạo một phần tử HTML như sau:
    <h3 id="chuong5">Chương 5</h3>
    
    Sau đó bạn thêm một liên kết có giá trị trong phần tử HTML bên trên
    <a href="#chuong5">Click vào đây để đến chương 5</a>
    Xem ví dụ
    Hoặc bạn cũng có thể liên kết đến một trang cụ thể như sau
    <a href="/topic/hoc-html#chuong5">Click vào đây để đến chương 5</a>

    Liên kết bên ngoài trang

    Bạn có thể thêm một liên kết đầy đủ để liên kết với trang bên ngoài với dạng sau

    <a href="http://kennis.vn/topic/hoc-html">Học HTML tại Kennis.vn</a>
    Xem ví dụ
    Và bên dưới là là một liên kết đến một trang HTML hiện tại
    <a href="/topic/hoc-html">Học HTML tại Kennis.vn</a>
    Xem ví dụ
    Chúc các bạn học tốt!laugh
    Từ khóa:

    Liên kết trong HTML

    Liên kết trong HTML

    Liên kết trong HTML

    Liên kết trong HTML
    Liên kết trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    212
    - Hôm qua:
    425
    - Tuần này:
    2.712
    - Tuần trước:
    3.197
    - Tháng này:
    10.360
    - Tháng trước:
    19.065
    - Năm này:
    234.043
    - Năm trước:
    17.373
    - Tổng cộng:
    251.416