บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

เส้นทางไฟล์ HTML


เส้นทางของไฟล์อธิบายตำแหน่งของไฟล์ในโครงสร้างโฟลเดอร์ของเว็บไซต์


ตัวอย่างเส้นทางไฟล์

เส้นทางคำอธิบาย
<img src="picture.jpg"> ไฟล์ "picture.jpg" อยู่ในโฟลเดอร์เดียวกับหน้าปัจจุบัน
<img src="images/picture.jpg"> ไฟล์ "picture.jpg" อยู่ในโฟลเดอร์รูปภาพในโฟลเดอร์ปัจจุบัน
<img src="/images/picture.jpg"> ไฟล์ "picture.jpg" อยู่ในโฟลเดอร์รูปภาพที่รูทของเว็บปัจจุบัน
<img src="../picture.jpg"> ไฟล์ "picture.jpg" อยู่ในโฟลเดอร์หนึ่งระดับจากโฟลเดอร์ปัจจุบัน

เส้นทางไฟล์ HTML

เส้นทางของไฟล์อธิบายตำแหน่งของไฟล์ในโครงสร้างโฟลเดอร์ของเว็บไซต์

เส้นทางของไฟล์ถูกใช้เมื่อเชื่อมโยงกับไฟล์ภายนอก เช่น:

  • หน้าเว็บ
  • รูปภาพ
  • สไตล์ชีต
  • JavaScripts

เส้นทางไฟล์แอบโซลูท

เส้นทางของไฟล์แบบสัมบูรณ์คือ URL แบบเต็มไปยังไฟล์:

ตัวอย่าง

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

แท็ก <img> อธิบายไว้ในบท: รูปภาพHTML


เส้นทางไฟล์สัมพัทธ์

พาธไฟล์แบบสัมพันธ์ชี้ไปที่ไฟล์ที่สัมพันธ์กับเพจปัจจุบัน

ในตัวอย่างต่อไปนี้ พาธของไฟล์ชี้ไปที่ไฟล์ในโฟลเดอร์รูปภาพซึ่งอยู่ที่รูทของเว็บปัจจุบัน:

ตัวอย่าง

<img src="/images/picture.jpg" alt="Mountain">

ในตัวอย่างต่อไปนี้ พาธของไฟล์ชี้ไปที่ไฟล์ในโฟลเดอร์รูปภาพที่อยู่ในโฟลเดอร์ปัจจุบัน:

ตัวอย่าง

<img src="images/picture.jpg" alt="Mountain">

ในตัวอย่างต่อไปนี้ พาธของไฟล์ชี้ไปที่ไฟล์ในโฟลเดอร์รูปภาพที่อยู่ในโฟลเดอร์หนึ่งระดับจากโฟลเดอร์ปัจจุบัน:

ตัวอย่าง

<img src="../images/picture.jpg" alt="Mountain">


ปฏิบัติที่ดีที่สุด

แนวทางปฏิบัติที่ดีที่สุดคือการใช้เส้นทางไฟล์แบบสัมพัทธ์ (ถ้าเป็นไปได้)

เมื่อใช้เส้นทางไฟล์แบบสัมพันธ์ หน้าเว็บของคุณจะไม่ถูกผูกไว้กับ URL ฐานปัจจุบันของคุณ ลิงก์ทั้งหมดจะทำงานบนคอมพิวเตอร์ของคุณเอง (localhost) เช่นเดียวกับโดเมนสาธารณะในปัจจุบันและโดเมนสาธารณะในอนาคตของคุณ