การเพิ่มรูปภาพลงในเว็บเพจของคุณ

การแสดงรูปภาพให้ถูกต้อง

รูปภาพใด ๆ ที่คุณต้องการเชื่อมโยงใน HTML ของเว็บไซต์ควรได้รับการอัปโหลดไปยังตำแหน่งเดียวกับที่คุณส่ง HTML สำหรับหน้าเว็บไม่ว่าจะเป็นไซต์ที่โฮสต์บนเว็บเซิร์ฟเวอร์ที่คุณเข้าถึงด้วย FTP หรือคุณใช้บริการเว็บโฮสติ้ง ถ้าคุณใช้บริการเว็บโฮสติ้งคุณอาจใช้แบบฟอร์มอัปโหลดที่ได้รับจากบริการ แบบฟอร์มเหล่านี้มักจะอยู่ในส่วนการดูแลระบบของบัญชีโฮสติ้งของคุณ

การอัปโหลดภาพของคุณไปยังบริการโฮสติ้งคือขั้นตอนแรกเท่านั้น จากนั้นคุณจะต้องเพิ่มแท็กใน HTML เพื่อระบุ

การอัปโหลดรูปภาพไปยังไดเรกทอรีเดียวกับ HTML

รูปภาพของคุณอาจอยู่ในไดเรกทอรีเดียวกับ HTML หากเป็นเช่นนั้น:

1. อัปโหลดภาพไปยังรากของเว็บไซต์ของคุณ
2. เพิ่มแท็กรูปภาพใน HTML เพื่อชี้ไปที่ภาพ
3. อัปโหลดไฟล์ HTML ไปที่รากของเว็บไซต์ของคุณ
4. ทดสอบไฟล์โดยเปิดหน้าเว็บในเว็บเบราเซอร์ของคุณ

แท็กรูปภาพใช้รูปแบบต่อไปนี้:

สมมติว่าคุณกำลังอัปโหลดรูปดวงจันทร์ด้วยชื่อ "lunar.jpg" แท็กรูปภาพจะมีรูปแบบดังนี้:

ความสูงและความกว้างเป็นตัวเลือก แต่แนะนำ โปรดทราบว่าแท็กรูปภาพไม่จำเป็นต้องมีแท็กปิด

หากคุณเชื่อมโยงไปยังรูปภาพในเอกสารอื่นให้ใช้แท็ก anchor และวางแท็กรูปภาพไว้ด้านใน

การอัปโหลดรูปภาพในไดเรกทอรีย่อย

เป็นเรื่องปกติในการจัดเก็บภาพในไดเรกทอรีย่อยซึ่งโดยปกติจะเรียกว่า รูปภาพ เพื่อชี้ไปยังภาพในไดเรกทอรีนั้นคุณจำเป็นต้องทราบว่าอยู่ที่ใดในรากของเว็บไซต์ของคุณ

รากของเว็บไซต์ของคุณคือที่ที่ URL โดยไม่มีไดเรกทอรีใด ๆ ในตอนท้ายจะปรากฏขึ้น ตัวอย่างเช่นสำหรับเว็บไซต์ที่ชื่อว่า "MyWebpage.com" รากจะมาตามแบบฟอร์มนี้: http://MyWebpage.com/ สังเกตเห็นเครื่องหมายทับที่ท้าย นี่คือรากของไดเร็กทอรีที่ระบุไว้ ไดเรกทอรีย่อยรวมถึงเครื่องหมายทับเพื่อแสดงตำแหน่งที่พวกเขานั่งอยู่ในโครงสร้างไดเร็กทอรี ไซต์ตัวอย่าง MyWebpage อาจมีโครงสร้างดังนี้

http://MyWebpage.com/ - ไดเรกทอรีราก http://MyWebpage.com/products/ - ไดเรกทอรีผลิตภัณฑ์ http://MyWebpage.com/products/documentation/ - ไดเร็กทอรีเอกสารภายใต้ไดเร็กทอรีผลิตภัณฑ์ http: // MyWebpage.com/images/ - ไดเร็กทอรีรูปภาพ

ในกรณีนี้เมื่อคุณชี้ไปที่ภาพของคุณในไดเร็กทอรีภาพคุณจะเขียน:

นี่เรียกว่า เส้นทางที่แน่นอน สำหรับภาพของคุณ

ปัญหาที่พบบ่อยด้วยรูปภาพที่ไม่แสดง

การเรียกดูภาพเพื่อแสดงบนหน้าเว็บของคุณอาจเป็นเรื่องท้าทายในตอนแรก สาเหตุที่พบได้บ่อยๆสองประการคือภาพไม่ได้ถูกอัปโหลดที่ HTML กำลังชี้หรือ HTML เขียนไม่ถูกต้อง

สิ่งแรกที่ต้องทำคือดูว่าคุณสามารถหาภาพออนไลน์ได้หรือไม่ ผู้ให้บริการพื้นที่ส่วนใหญ่มีเครื่องมือการจัดการประเภทหนึ่งซึ่งคุณสามารถใช้เพื่อดูว่าคุณอัปโหลดภาพของคุณที่ใด หลังจากที่คุณคิดว่าคุณมี URL ที่ถูกต้องสำหรับภาพของคุณให้พิมพ์ลงในเบราเซอร์ของคุณ หากรูปภาพปรากฏขึ้นคุณจะมีตำแหน่งที่ถูกต้อง

จากนั้นตรวจสอบว่า HTML ของคุณชี้ไปที่ภาพนั้น วิธีที่ง่ายที่สุดคือวาง URL รูปภาพ ที่คุณเพิ่งทดสอบในแอตทริบิวต์ SRC อัปโหลดหน้าเว็บใหม่และทดสอบใหม่

แอตทริบิวต์ SRC ของแท็กรูปภาพของคุณไม่ควรเริ่มต้นด้วย C: \ หรือ ไฟล์: ข้อความ เหล่านี้จะปรากฏขึ้นเมื่อคุณทดสอบหน้าเว็บของคุณบนคอมพิวเตอร์ของคุณ แต่ทุกคนที่เข้าชมไซต์ของคุณจะเห็นภาพที่เสีย เนื่องจาก C: \ ชี้ไปยังตำแหน่งบนฮาร์ดไดรฟ์ของคุณ เนื่องจากภาพอยู่ในฮาร์ดไดรฟ์ของคุณจะปรากฏขึ้นเมื่อคุณดู