โค้ดลิงก์ HTML

วิธีเขียนโค้ดลิงค์ HTML

ลิงค์ข้อความ HTML

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

รหัสจะสร้างลิงค์นี้:

ลิงค์ข้อความ

ลิงก์ HTML ไปยังหน้าเดียวกัน

รหัสลิงก์ Anchor:

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

รหัสจะสร้างลิงค์นี้:

ตัวสร้างรหัสลิงก์

เมื่อกดลิงค์เบราว์เซอร์จะข้ามไปที่หัวข้อด้านล่างพร้อมรหัสนี้:

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

ลิงก์รูปภาพ HTML

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

รหัสจะสร้างลิงค์นี้:

ดอกไม้

ลิงค์อีเมล HTML

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

รหัสจะสร้างลิงค์นี้:

ส่งอีเมล์

 

ดู: HTML mailto ลิงก์

ลิงก์ HTML เพื่อดาวน์โหลดไฟล์

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

รหัสจะสร้างลิงค์นี้:

ดาวน์โหลดไฟล์

 

ดู: ลิงค์ดาวน์โหลด HTML

ลิงก์ HTML เปิดในหน้าต่างใหม่

ลิงค์นี้จะเปิดขึ้นในหน้าต่างใหม่หรือแท็บ:

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

รหัสจะสร้างลิงค์นี้:

เปิดหน้าในหน้าต่างใหม่

ลิงก์ปุ่ม HTML

ไม่มีจาวาสคริปต์:

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

ด้วยจาวาสคริปต์:

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

สีของลิงก์

การเปลี่ยนสีลิงค์ทำได้ด้วยสไตล์ css:

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

รหัสจะสร้างลิงค์นี้:

หน้าสีลิงค์

 

การเปลี่ยนสีพื้นหลังของลิงค์ทำได้ด้วยสไตล์ css:

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

รหัสจะสร้างลิงค์นี้:

หน้าสีลิงค์

ลิงก์สัมพัทธ์กับพา ธ สัมบูรณ์

นี่คือลิงค์ที่มี URL พา ธ สัมพัทธ์:

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

รหัสจะสร้างลิงค์นี้:

ลิงค์ข้อความ

 

นี่คือลิงค์ที่มี URL พา ธ สัมบูรณ์:

<a href="https://www.rapidtables.org/web/html/link/html-text-link.htm">Text Link</a>

รหัสจะสร้างลิงค์นี้:

ลิงค์ข้อความ

ตัวสร้างโค้ดลิงค์ HTML

เลือกประเภทลิงค์:

ป้อนข้อความลิงก์:    
ป้อน URL เพื่อเชื่อมโยงไปยัง:    
ตั้งค่ารูปแบบลิงก์ CSS:    
ลิงค์ปกติ:    
สี:
สีพื้นหลัง:
ตกแต่งข้อความ:  
เป้าหมายใหม่:  
ลิงค์ Hovered:    
สี:
สีพื้นหลัง:
ตกแต่งข้อความ:  
เป้าหมายใหม่:  
สร้างมุมมองลิงก์:    
รหัสลิงก์ที่สร้างขึ้น:    

 


ดูสิ่งนี้ด้วย

เว็บ HTML
ตารางอย่างรวดเร็ว