Mã liên kết HTML

Cách viết mã liên kết HTML.

• Liên kết văn bản
• Liên kết đến cùng một trang
• Đường kết nối tới hình ảnh
• Liên kết email
• Liên kết đến tải xuống tệp
• Liên kết mở trong cửa sổ mới
• Liên kết nút
• Màu sắc liên kết
• Liên kết đường dẫn tương đối so với đường dẫn tuyệt đối
• Trình tạo mã liên kết

Liên kết văn bản HTML

<a href="link/html-text-link.htm"/Text Link</a/

Mã sẽ tạo liên kết này:

Liên kết văn bản

Liên kết HTML đến cùng một trang

Mã liên kết neo:

<a href="#generator"/Link code generator</a/

Mã sẽ tạo liên kết này:

Trình tạo mã liên kết

Khi nhấn vào liên kết, trình duyệt sẽ chuyển đến tiêu đề bên dưới, với mã này:

<h2/<a id="generator"/Link code generator</a/</h2/

Liên kết hình ảnh HTML

<a href="link/link-image.htm"/<img src="link/flower.jpg" width="82" height="86" alt="Flower"/</a>

Mã sẽ tạo liên kết này:

Liên kết e-mail HTML

<a href="mailto:name@KyLabs">Send Mail</a>

Mã sẽ tạo liên kết này:

Gửi thư

 

Xem: Liên kết mailto HTML .

Liên kết HTML để tải xuống tệp

<a href="link/test_file.zip">Download File</a>

Mã sẽ tạo liên kết này:

Tải tập tin

 

Xem: liên kết tải xuống HTML

Liên kết HTML mở trong cửa sổ mới

Liên kết này sẽ mở trong cửa sổ hoặc tab mới:

<a href="link/html-text-link.htm" target="_blank">Open page in new window</a>

Mã sẽ tạo liên kết này:

Mở trang trong cửa sổ mới

Liên kết nút HTML

Không có javascript:

<form action="link/html-button-link.htm">
    <input type="submit" value="A button link">
</form>

Với javascript:

<input type="button" value="A button link" onclick="window.location.href='link/html-button-link.htm'">

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

Thay đổi màu liên kết được thực hiện với kiểu css:

<a href="link/html-link-color.htm" style="color:red">Link color page</a>

Mã sẽ tạo liên kết này:

Liên kết trang màu

 

Thay đổi màu nền liên kết được thực hiện với kiểu css:

<a href="link/html-link-color.htm" style="background-color:#ffffa0">Link color page</a>

Mã sẽ tạo liên kết này:

Liên kết trang màu

Liên kết đường dẫn tương đối so với đường dẫn tuyệt đối

Đây là một liên kết với URL đường dẫn tương đối:

<a href="link/html-text-link.htm">Text Link</a>

Mã sẽ tạo liên kết này:

Liên kết văn bản

 

Đây là một liên kết có URL đường dẫn tuyệt đối:

<a href="https://kylabs.net/web/html/link/html-text-link.htm">Text Link</a>

Mã sẽ tạo liên kết này:

Liên kết văn bản

Trình tạo mã liên kết HTML

Chọn loại liên kết:

Liên kết văn bản Đường kết nối tới hình ảnh Liên kết email Liên kết neo được đặt tên
Nhập văn bản liên kết:
Nhập URL để liên kết đến:
Đặt kiểu liên kết CSS:
Liên kết bình thường:
màu sắc:	- mã hex - Aqua Đen Màu xanh da trời Fuchsia Màu xám màu xanh lá Vôi Đỏ tươi Bỏ rơi Hải quân Ôliu Màu tím Màu đỏ Bạc Màu mòng két trắng Màu vàng
màu nền:	- mã hex - Aqua Đen Màu xanh da trời Fuchsia Màu xám màu xanh lá Vôi Đỏ tươi Bỏ rơi Hải quân Ôliu Màu tím Màu đỏ Bạc Màu mòng két trắng Màu vàng
trang trí văn bản:	gạch chân không ai
target-new:	không ai tab cửa sổ
Liên kết được di chuột qua:
màu sắc:	- mã hex - Aqua Đen Màu xanh da trời Fuchsia Màu xám màu xanh lá Vôi Đỏ tươi Bỏ rơi Hải quân Ôliu Màu tím Màu đỏ Bạc Màu mòng két trắng Màu vàng
màu nền:	- mã hex - Aqua Đen Màu xanh da trời Fuchsia Màu xám màu xanh lá Vôi Đỏ tươi Bỏ rơi Hải quân Ôliu Màu tím Màu đỏ Bạc Màu mòng két trắng Màu vàng
trang trí văn bản:	gạch chân không ai
target-new:	không ai tab cửa sổ
Chế độ xem liên kết đã tạo:
Mã liên kết đã tạo:

 

---

Xem thêm

• Nhận xét HTML
• Liên kết neo HTML
• Liên kết nút HTML
• Liên kết tải xuống HTML
• Liên kết hình ảnh HTML
• Màu liên kết HTML
• Liên kết mailto HTML
• Liên kết cửa sổ mới HTML
• Liên kết văn bản HTML

\n'; txt+= '\n'; txt+= ' \n'; txt+= ' '+text2+'\n'; txt+= '\n'; //ftxt = ''+text+'\n'; } TA1.value = txt; OnUpdateView(); } function ResetButton() { url = "../../../index.html"; text = "The Link Text"; T1.value = text; T2.value = url; T1.style.color = "#aaa"; T2.style.color = "#aaa"; GenerateButton(); } function ResetText(obj, op) { if( op==0 ) // onclick { if( (obj==T1 && obj.value==text)||(obj==T2 && obj.value == url) ) { obj.value = ""; obj.style.color = "#000"; } } else // onblur { if( obj.value == "" ) { if( obj==T1 ) obj.value = text; else obj.value = url; obj.style.color = "#aaa"; } } } function SetFocus() { calc.input.focus(); }