รูปภาพมักจะถูกเพิ่มเข้าไปในหน้าเว็บเพื่อให้ดูน่าดึงดูดและน่าสนใจยิ่งขึ้นเมื่อเทียบกับหน้าของข้อความล้วน การใช้แท็กรูปภาพ HTML ทำให้ง่ายต่อการเพิ่มภาพไปยังหน้าเว็บใด ๆ แท็กนี้ยังมีแอตทริบิวต์หรือคุณลักษณะหลายอย่างที่คุณสามารถระบุได้
เมื่อเพิ่มรูปภาพไปยังเว็บเพจสิ่งสำคัญคือต้องจำไว้ว่ารูปภาพไม่ได้เป็นส่วนหนึ่งของไฟล์ที่ประกอบขึ้นเป็นหน้าเว็บเอง ไฟล์ที่ใช้สำหรับหน้าเว็บเป็นไฟล์แยกจากไฟล์ภาพทั้งหมด แท็กรูปภาพ HTML อ้างอิงเว็บเบราว์เซอร์ไปยังไฟล์รูปภาพเฉพาะสำหรับภาพที่คุณต้องการแสดง เมื่อเว็บเพจนั้นแสดงขึ้นในเบราว์เซอร์ไฟล์ภาพจะปรากฏขึ้นพร้อมกับไฟล์อื่น ๆ ที่ประกอบขึ้นเป็นหน้านั้น
รหัสสำหรับแท็กรูปภาพ HTML คือ: <IMG SRC = "ตำแหน่งรูปภาพ" /> ตำแหน่งรูปภาพคือชื่อไฟล์สำหรับรูปภาพที่คุณต้องการให้แสดงและตำแหน่งที่จัดเก็บรูปภาพ เป็นสิ่งสำคัญที่คุณต้องได้รับข้อมูลนี้เพื่อให้แน่ใจว่าภาพจะแสดงอย่างถูกต้อง การจัดระเบียบและการจัดเก็บภาพที่คุณต้องการใช้บนหน้าเว็บของคุณเป็นข้อควรพิจารณาที่สำคัญ
บางคนเก็บภาพไว้ในไดเรกทอรีเดียวกันกับส่วนอื่น ๆ ทั้งหมดของหน้าเว็บ ในกรณีนี้เมื่อคุณอ้างถึงรูปภาพคุณจะต้องรวมชื่อไฟล์ในแท็กรูปภาพ HTML เท่านั้น เมื่อเว็บเพจมีรูปภาพจำนวนหนึ่งเป็นเรื่องปกติที่จะสร้างไดเรกทอรีย่อยซึ่งมักเรียกว่า รูปภาพ ในกรณีนี้ชื่อไดเรกทอรีย่อยจะรวมอยู่ในแท็กด้วย
ตัวอย่างเช่นนี่คือสิ่งที่เราจะทำเพื่อแทรกรูปภาพของต้นไม้ชื่อไฟล์ tree.jpg บนหน้าเว็บ หากเราเก็บรูปภาพต้นไม้ไว้ในที่เดียวกับไฟล์หน้าเว็บอื่นของเราแท็กรูปภาพ HTML จะเป็น <IMG SRC = "tree.jpg"> หากไฟล์รูปภาพถูกเก็บไว้ในไดเรกทอรีย่อยภายในไดเรกทอรีหน้าเว็บของเราแท็กจะเปลี่ยนเป็น <IMG SRC = "images / tree.jpg"> สิ่งสำคัญที่ต้องจำคือแท็กรูปภาพ HTML ให้การอ้างอิงหรือเส้นทางไปยังไฟล์ภาพ โดยพื้นฐานแล้วเบราว์เซอร์จะบอกตำแหน่งที่จะค้นหาไฟล์
แท็กรูปภาพ HTML มีจำนวนแอตทริบิวต์ที่สามารถระบุได้สำหรับภาพที่คุณต้องการรวม แอททริบิวเป็นคุณลักษณะของแท็กดังนั้นจึงใช้ในแท็กหรือระหว่าง <และ> คุณลักษณะที่ใช้กับแท็กรูปภาพ HTML คือ:
- จัดเรียง - ระบุวิธีจัดแนวรูปภาพของคุณสัมพันธ์กับข้อความในหน้าของคุณ (ซ้าย, ขวา, สูงสุด, กลาง, ล่าง, ล่าง)
- ALT - หมายถึงข้อความทางเลือก นี่เป็นคุณลักษณะที่สำคัญมากและควรรวมไว้ในภาพทั้งหมดของคุณ มันระบุข้อความที่จะปรากฏขึ้นแทนภาพ
- BORDER - เพิ่มเส้นขอบให้กับรูปภาพของคุณโดยระบุความหนาเป็นพิกเซล
- ความสูงและความกว้าง - สามารถใช้เพื่อกำหนดความกว้างและความสูงของภาพที่คุณต้องการแสดงซึ่งช่วยให้คุณเปลี่ยนขนาดของภาพ ระมัดระวังการใช้คุณสมบัติเหล่านี้ในขณะที่คุณสามารถเปลี่ยนคุณภาพของภาพและสัดส่วนทำให้ภาพคุณภาพต่ำ
- VSPACE และ HSPACE - ใช้เพื่อเพิ่มพื้นที่ว่างรอบภาพของคุณ
