ดูที่หน้าเว็บออนไลน์วันนี้และคุณจะสังเกตเห็นว่าพวกเขาแบ่งปันบางสิ่งที่เหมือนกัน หนึ่งในลักษณะที่ใช้ร่วมกันเหล่านี้คือภาพ ภาพขวาเพิ่มมากในงานนำเสนอของเว็บไซต์ ภาพเหล่านี้บางภาพเช่นโลโก้ของ บริษัท ช่วยให้แบรนด์เว็บไซต์และเชื่อมต่อนิติบุคคลดิจิทัลดังกล่าวกับ บริษัท ทางกายภาพของคุณ
หากต้องการเพิ่มภาพไอคอนหรือกราฟิกลงในหน้าเว็บของคุณคุณต้องใช้แท็กในโค้ด HTML ของหน้า คุณวางแท็ก IMG ไว้ใน HTML ตรงจุดที่คุณต้องการให้กราฟิกแสดง เว็บเบราเซอร์ที่แสดงโค้ดของหน้าเว็บจะแทนที่แท็กนี้ด้วยกราฟิกที่เหมาะสมเมื่อมีการดูหน้าเว็บ กลับไปที่ตัวอย่างโลโก้ของ บริษัท ต่อไปนี้เป็นวิธีที่คุณสามารถเพิ่มภาพดังกล่าวลงในไซต์ของคุณ:
แอตทริบิวต์รูปภาพ
มองไปที่โค้ด HTML ด้านบนคุณจะเห็นว่าองค์ประกอบมีแอตทริบิวต์สองตัว แต่ละภาพจำเป็นสำหรับภาพ
แอตทริบิวต์ตัวแรกคือ "src" นี่เป็นไฟล์ภาพที่คุณต้องการให้แสดงบนหน้าเว็บจริงๆ ในตัวอย่างของเราเราใช้ไฟล์ที่เรียกว่า "logo.png" นี่คือกราฟิกที่เว็บเบราเซอร์จะแสดงเมื่อแสดงผลเว็บไซต์
นอกจากนี้คุณจะสังเกตเห็นว่าก่อนชื่อไฟล์นี้เราได้เพิ่มข้อมูลเพิ่มเติม "/ images /" นี่คือเส้นทางของไฟล์ สแลชไปข้างหน้าบอกเซิร์ฟเวอร์ให้มองเข้าไปในรากของไดเร็กทอรี จากนั้นจะมองหาโฟลเดอร์ที่เรียกว่า "images" และไฟล์ที่เรียกว่า "logo.png" การใช้โฟลเดอร์ที่เรียกว่า "images" เพื่อจัดเก็บกราฟิกของเว็บไซต์ทั้งหมดเป็นแนวทางที่ใช้กันทั่วไป แต่เส้นทางไฟล์ของคุณจะเปลี่ยนไปเป็นสิ่งที่เกี่ยวข้องกับไซต์ของคุณ
แอ็ตทริบิวต์ที่จำเป็นที่สองคือข้อความ "alt" นี่คือ "ข้อความอื่น" ที่แสดงขึ้นหากภาพไม่สามารถโหลดได้ด้วยเหตุผลบางประการ ข้อความนี้ซึ่งในตัวอย่างของเราจะอ่านว่า "โลโก้ บริษัท " จะปรากฏขึ้นหากรูปภาพไม่สามารถโหลดได้ เหตุใดจึงเกิดขึ้น? เหตุผลหลายประการ:
- เส้นทางของไฟล์ไม่ถูกต้อง
- ชื่อไฟล์ไม่ถูกต้องหรือสะกดผิด
- ข้อผิดพลาดในการส่ง
- ไฟล์ถูกลบออกจากเซิร์ฟเวอร์
นี่เป็นเพียงไม่กี่ประการที่อาจทำให้ภาพที่เราระบุอาจหายไป ในกรณีเหล่านี้ข้อความ alt ของเราจะแสดงแทน
ข้อความ Alt ใช้ซอฟต์แวร์อ่านหน้าจอเพื่อ "อ่าน" ภาพแก่ผู้เข้าชมที่บกพร่องทางการมองเห็น เนื่องจากพวกเขาไม่สามารถมองเห็นภาพเช่นเดียวกับที่เราทำข้อความนี้ช่วยให้พวกเขารู้ว่าภาพนั้นเป็นอย่างไร นี่คือเหตุผลที่ข้อความ alt เป็นสิ่งจำเป็นและทำไมมันควรระบุอย่างชัดเจนว่าเป็นภาพ!
ความเข้าใจผิดทั่วไปของข้อความ alt คือว่ามีวัตถุประสงค์เพื่อจุดประสงค์ของเครื่องมือค้นหา นี่ไม่เป็นความจริง. ในขณะที่ Google และเครื่องมือค้นหาอื่น ๆ อ่านข้อความนี้เพื่อกำหนดว่ารูปภาพคืออะไร (อย่าลืมว่าคุณไม่สามารถเห็นภาพของคุณได้) คุณไม่ควรเขียนข้อความ alt เพื่ออุทธรณ์ไปยังเครื่องมือค้นหาเท่านั้น เขียนข้อความ alt ที่ชัดเจนสำหรับมนุษย์ หากคุณสามารถเพิ่มคำหลักลงในแท็กที่ดึงดูดเครื่องมือค้นหาได้เช่นกัน แต่ควรตรวจสอบให้แน่ใจว่าข้อความ alt มีจุดประสงค์หลักโดยระบุว่ารูปภาพมีไว้สำหรับใครก็ตามที่ไม่สามารถมองเห็นไฟล์กราฟิกได้
แอตทริบิวต์อื่น ๆ
แท็ก IMG ยังมีอีกสองแอตทริบิวต์ที่คุณอาจเห็นในการใช้งานเมื่อคุณวางกราฟิกบนหน้าเว็บของคุณเช่นความกว้างและความสูง ตัวอย่างเช่นหากคุณใช้โปรแกรมแก้ไขแบบ WYSIWYG เช่น Dreamweaver โปรแกรมจะเพิ่มข้อมูลนี้ให้คุณโดยอัตโนมัติ นี่คือตัวอย่าง:
แอ็ตทริบิวต์ WIDTH และ HEIGHT บอกเบราเซอร์ขนาดของรูปภาพ เบราว์เซอร์จะรู้ว่ามีพื้นที่ในการจัดสรรเท่าใดและสามารถย้ายไปยังองค์ประกอบถัดไปในหน้าขณะที่ดาวน์โหลดภาพ ปัญหาเกี่ยวกับการใช้ข้อมูลนี้ใน HTML ของคุณคือคุณอาจไม่ต้องการให้ภาพของคุณแสดงในขนาดที่แน่นอนเสมอไป ตัวอย่างเช่นถ้าคุณมี เว็บไซต์ ที่ปรับเปลี่ยนตามขนาดบนหน้าจอผู้เข้าชมและขนาดอุปกรณ์คุณจะต้องการให้ภาพมีความยืดหยุ่น หากคุณระบุใน HTML ว่ามีขนาดเท่าใดคุณจะพบได้ยากมากที่จะแทนที่ด้วย ข้อความค้นหาสื่อ CSS ที่ ตอบสนอง ด้วยเหตุนี้และเพื่อรักษาลักษณะแบบแยก (CSS) และโครงสร้าง (HTML) ขอแนะนำให้คุณไม่เพิ่มความกว้างและความสูงของแอตทริบิวต์ให้กับโค้ด HTML ของคุณ
โน้ตเดียว: หากคุณปิดคำแนะนำการปรับขนาดเหล่านี้ไว้และไม่ระบุขนาดใน CSS เบราเซอร์จะแสดงภาพตามขนาดดีฟอลต์
แก้ไขโดย Jeremy Girard