VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML Tuts

HTML là gì? Các thẻ HTML Định dạng trong HTML Tiêu đề trong HTML Đoạn văn trong HTML Liên kết trong HTML Ảnh trong HTML Table trong HTML Danh sách trong HTML Danh sách có thứ tự Danh sách không có thứ tự Danh sách mô tả Form trong HTML Thuộc tính Style Comment trong HTML Bảng màu trong HTML Thuộc tính chung trong HTML

Các thẻ HTML

Thẻ HTML Marquee Thẻ HTML Textarea HTML DOCTYPE Thẻ HTML Title Thẻ HTML meta Thẻ HTML Div Thẻ HTML Pre Thẻ HTML Code Thẻ HTML Label Thẻ HTML Input Thẻ HTML Button Thẻ HTML HR Thẻ HTML BR Thẻ HTML Script Thẻ HTML NoScript Thẻ HTML b Thẻ HTML Quotes

Bài học HTML

Text Link trong HTML Image Link trong HTML Email Link trong HTML Frame trong HTML Iframe trong HTML Block trong HTML Thiết lập màu nền (background) trong HTML Màu trong HTML Font trong HTML Thẻ embed - Đa phương tiện trong HTML Tạo chữ chạy (Marquee) trong HTML Style Sheet trong HTML Sử dụng Javascript trong HTML Layout trong HTML Tổng hợp thuộc tính trong HTML Sự kiện (Event) trong HTML Các Font tham khảo trong HTML Mã hóa ASCII trong HTML Bảng ASCII trong HTML Các thực thể HTML Mã hóa URL trong HTML Mã hóa các ngôn ngữ chuẩn ISO trong HTML Mã hóa ký tự trong HTML

Câu hỏi phỏng vấn

Phỏng vấn HTML
1 / 3
❮ ❯

Text Link trong HTML


Thẻ Quotes trong HTML
Image Link trong HTML

Một trang web có thể chứa các đường link khác nhau để liên kết trực tiếp với các trang khác hay trong một phần của một trang. Những liên kết này được gọi là Hyperlinks (siêu liên kết).

Hyperlinks cho phép bạn truy cập vào các trang web khác nhau bằng cách nhấn chuột vào từ, cụm từ, và hình ảnh. Vì vậy, bạn có thể tạo các đường Hyperlinks sử dụng văn bản hoặc hình ảnh.


Nội dung chính

  • Thẻ a trong HTML
    • Ví dụ text link trong HTML
  • Thuộc tính target trong HTML
    • Ví dụ
  • Sử dụng Base Link trong HTML
    • Ví dụ
  • Liên kết tới một khu vực trang trong HTML
  • Thiết lập màu cho các link trong HTML
    • Ví dụ
  • Tạo Download Link trong HTML

Thẻ a trong HTML

Thẻ <a> được sử dụng để định nghĩa một liên kết. Thẻ này gọi là thẻ neo (anchor tag), và bất kỳ ở giữa thẻ mở <a> và thẻ đóng </a> trở thành phần mô tả của liên kết và khi người sử dụng có thể nhấn chuột vào phần đó để tới với tài liệu được gán liên kết. Dưới đây là cú pháp sử dụng thẻ <a>.


<a href="đường dẫn url tới trang HTML" ... danh-sách-thuộc-tính>Link Text</a>

Ví dụ text link trong HTML

Hãy cùng xem ví dụ sau mà liên kết với trang https://viettuts.vn/html trong trang của bạn.


<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
</head>
<body>
<p>Click chuột vào đường link sau:</p>
<a href="https://viettuts.vn/html" target="_self">Học HTML tại VietTuts.Vn </a>
</body>
</html>

Kết quả là khi bạn nhấn vào Học HTML tại VietTuts.Vn, bạn sẽ tới trang chủ của nó.

Click chuột vào đường link sau:

Học HTML tại VietTuts.Vn


Thuộc tính target trong HTML

Chúng ta đã sử dụng thuộc tính target trong ví dụ trước. Thuộc tính này được sử dụng để xác định vị trí nơi đường link được mở. Dưới đây là các tùy chọn:

Tùy chọnMô tả
_blankMở trang liên kết trong cửa sổ mới
_selfMở trang liên kết trong cùng một khung giống với khung chứa liên kết
_parentMở trang liên kết trong khung nguồn chứa đường link
_topMở trang liên kết trong cửa sổ toàn màn hình
targetframeMở tài liệu được liên kết trong targetframe đã đặt tên

Ví dụ

Dưới đây là ví dụ để hiểu rõ sự khác nhau cơ bản trong các tùy chọn ở trên:


<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
<base href="/html/">
</head>
<body>
<p>Click chuot vao mot trong cac link sau:</p>
<a href="/html/text_link_trong_html" target="_blank">Vi du gia tri _blank</a> |
<a href="/html/text_link_trong_html" target="_self">Vi du gia tri _self</a> |
<a href="/html/text_link_trong_html" target="_parent">Vi du gia tri _parent</a> |
<a href="/html/text_link_trong_html" target="_top">Vi du gia tri _top</a>
</body>
</html>

Nó sẽ hiển thị kết quả sau, bạn nhấn chuột vào các đường link khác nhau để hiểu sự khác nhau giữa các tùy chọn trên của thuộc tính target.

Click chuot vao mot trong cac link sau:

Vi du gia tri _blank | Vi du gia tri _self | Vi du gia tri _parent | Vi du gia tri _top

Sử dụng Base Link trong HTML

Khi bạn liên kết tài liệu HTML với cùng một trang web, nó không yêu cầu một địa chỉ URL đầy đủ cho tất cả mọi link. Bạn có thể từ bỏ nó nếu bạn sử dụng thẻ <base> trong phần tiêu đề tài liệu. Thẻ này được sử dụng để cung cấp một đường link cơ sở cho tất cả các link. Vì thế, trình duyệt sẽ xâu chuỗi các đường link liên quan với đường link cơ sở và sẽ làm cho nó thành một đường link đầy đủ.

Ví dụ

Dưới đây là ví dụ về sử dụng thẻ <base> để xác định đường link cơ sở URL và sau đó chúng ta có thể sử dụng các đường liên quan cho tất cả các đường link mà không cần cung cấp đường liên kết đầy đủ cho các link.


<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
<base href="/html/">
</head>
<body>
<p>Click chuột vào đường link sau:</p>
<a href="/html/text_link_trong_html" target="_blank">Text Link trong HTML</a>
</body>
</html>

Kết quả là khi bạn nhấn vào đường link: Text Link trong HTML.

Bây giờ thì URL đã cho <a href="/html/text_link_trong_html" được xem như là <a href="https://viettuts.vn/html/text_link_trong_html".

Click chuột vào đường link sau:

Text Link trong HTML


Liên kết tới một khu vực trang trong HTML

Bạn có thể tạo ra một link tới khu vực cụ thể trong trang web bằng cách sử dụng thuộc tính name. Bạn thực hiện qua 2 bước:

Đầu tiên tạo một liên kết tới khu vực trong trang mà bạn muốn tới và đặt tên nó sử dụng thẻ <a...> như ở dưới đây:


<h1>Vi du text link trong HTML <a name="top"></a></h1>

Bước 2, bạn tạo ra một siêu liên kết để kết nối tài liệu và xác định vị trí mà bạn muốn tới.


<a href="/html/text_link_trong_html#top">Về đầu trang</a>

Nó sẽ tạo ra đường link sau, từ đó bạn nhấn chuột vào Về đầu trang để về phần đầu của trang.

Về đầu trang

Thiết lập màu cho các link trong HTML

Bạn có thể thiết lập màu cho link của bạn, ví dụ: active link và visited link bằng cách sử dụng các thuộc tính link, alink và vlink của thẻ <body>.

Ví dụ

Dưới đây là một ví dụ. Bạn lưu code trong test.htm và mở nó bằng bất cứ trình duyệt nào để hiểu cách các thuộc tính link, alink và vlink này làm việc.


<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
<base href="/html/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click chuột vào đường link sau:</p>
<a href="/html/text_link_trong_html" target="_blank" >Text Link trong HTML</a>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Click chuột vào đường link sau:

Text Link trong HTML

Tạo Download Link trong HTML

Bạn có thể tạo các link văn bản để các tài liệu PDF, DOC, hoặc ZIP được tải về máy khi người sử dụng nhấn vào link đó. Điều này vô cùng đơn giản, bạn chỉ cần cung cấp tên URL đầy đủ của file đó. Ví dụ


<!DOCTYPE html>
<html>
<head>
<title>Vi du text link trong HTML</title>
</head>
<a href="/html/test-download.pdf">Download PDF File</a>
</body>
</html>

Nó sẽ tạo kết quả sau:

Download PDF File

Thẻ Quotes trong HTML
Image Link trong HTML

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Liên kết css với htmlMã hóa ký tự trong HTMLMã hóa các ngôn ngữ chuẩn ISO trong HTMLMã hóa URL trong HTMLCác thực thể HTMLBảng ASCII trong HTMLMã hóa ASCII trong HTMLCác Font tham khảo trong HTMLSự kiện (Event) trong HTMLTổng hợp thuộc tính trong HTMLLayout trong HTMLSử dụng Javascript trong HTML

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml