Thẻ anchor

Ngày đăng: 24/10/2018   -    Cập nhật: 20/07/2019

1. Link đến trang khác bằng phần tử Anchor trong HTML

Nếu bạn muốn Link sang một trang khác trên trang của mình hay trang của người khác thì bạn có thể sử dụng các phần tử Anchor trong HTML.

VD: Đây là một Link sử dụng thuộc tính Anchor trỏ đến trang chủ NIIT - ICT Hà Nội

Trong đó:


  • NIIT - ICT Hà Nội là văn bản neo (Anchor text)
  • Khi bạn click vào thì chuyển hướng đến trang chủ niithanoi.edu.vn.

Các phần tử Anchor cần có một địa chỉ đích (href) để trỏ đến, và nó sử dụng thuộc tính href. Và nó cần một phần tử để hiện ra màn hình giúp người dùng có thể ckick vào, ví dụ: Neo văn bản, ảnh, nút,…

Đây là đoạn code ví dụ về phần tử Anchor trong HTML bên trên:


            
        

Bài tập 1: Sử dụng thẻ a để tạo liên kết cho ảnh con mèo trỏ đến website niithanoi.edu.vn với "cat photos" làm văn bản neo
            
        

2. Liên kết đến phần nội bộ (internal link) của trang có phần tử Anchor

Các phần tử Anchor cũng có thể được sử dụng để tạo các liên kết bên trong (internal link) để chuyển đến các phần khác nhau trong một trang web.
 
Để tạo liên kết nội bộ, bạn chỉ định thuộc tính href của liên kết bằng dấu # cộng với giá trị của thuộc tính id cho phần tử mà bạn muốn tạo liên kết nội bộ, thường là dùng để di chuyển nhanh đến các phần trong 1 trang.

Sau đó, bạn cần phải thêm thuộc tính id giống với phần tử bạn đang liên kết đến. Id là một thuộc tính mô tả một phần tử duy nhất.
            
        

Khi người dùng nhấp vào liên kết ‘Cuộn lên top’, cho dù màn hình của bạn đang ở vị trí nào trong trang web, nó cũng sẽ tự động cuộn đến vị trí thẻ h2 có id=”topHeader”
 
Thay đổi liên kết bên ngoài trang của bạn thành liên kết nội bộ bằng cách thay đổi thuộc tính href thành 'footer' và văn bản từ 'cat photos' thành 'Jump to Bottom'.


Bài tập 2:

  • Thay đổi đia chỉ trong thuộc tính href=” http://niithanoi.edu.vn” bằng “#footer” và thay đổi văn bản neo bằng “Jum to Boottom”
  • Hãy Loại bỏ thuộc tính target = '_ blank' khỏi thẻ anchor vì nếu để thế này thì liên kết sẽ mở trong một cửa sổ mới.
  • Sau đó, thêm thuộc tính id với giá trị 'footer' vào phần tử <footer> ở cuối trang.
            
        

3. Lồng phần tử Anchor trong phần tử HTML khác

Bạn có thể đặt tạo liên kết ở rất nhiều nơi, lồng bên trong các phần tử khác, ví dụ:
            
        

Khi người dùng nhấp vào văn bản neo Link đến niithanoi.edu.vn, trình duyệt sẽ chuyển hướng bạn đến trang đích là https://niiticthanoi.edu.vn

Chia nhỏ ví dụ trên:
 
  • Văn bản thông thường được bao bọc trong phần tử p: <p>Đây là … để bạn chuyển đến khi click vào link</p>
  • Tiếp đến là thẻ link, <a target="_blank" href="http://niithanoi.edu.vn">Link đến niithanoi.edu.vn</a>
  • target là thuộc tính chỉ định vị trí mở liên kết và giá trị '_blank' chỉ định để mở liên kết trong tab mới.
  • href là thuộc tính thẻ liên kết chứa địa chỉ URL của liên kết:
            
        

Văn bản, ‘Link đến niithanoi.edu.vn’, trong phần tử a được gọi là văn bản neo, sẽ hiển thị liên kết để người dùng có thể nhấp vào:

            
        

4. Bài tập về phần tử Anchor trong HTML

Bây giờ, hãy lồng phần tử a hiện có của bạn trong một phần tử p mới (ngay sau phần tử main hiện có).

Đoạn mới phải có văn bản cho biết 'Xem thêm ảnh con mèo', trong đó 'ảnh con mèo' là một liên kết và phần còn lại của văn bản là văn bản thuần túy.
 
Đôi khi bạn muốn tạo thẻ link nhưng chưa nhập địa chỉ vào thuộc tính href = ””, trong trường hợp này thì bạn có thể để href = "#".
 
Điều này cũng hữu ích khi thông thường chúng ta sẽ thiết kế HTML trước, sau đó tùy yêu cầu mà thay đổi ảnh động bằng cách sử dụng JavaScript (chúng ta sẽ tìm hiểu cách làm đó về sau này).

            
        
Bình luận Facebook
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!