Skip to main content

วิธีที่เหมาะสมในการใช้แท็กรูปภาพ HTML คืออะไร?

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

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

รหัสสำหรับแท็กภาพ HTML คือ: lt; IMG SRC ' ตำแหน่งภาพ / gt;ตำแหน่งภาพเป็นชื่อไฟล์สำหรับภาพที่คุณต้องการแสดงและสถานที่จัดเก็บภาพเป็นสิ่งสำคัญที่คุณจะได้รับข้อมูลนี้ถูกต้องเพื่อให้แน่ใจว่าภาพจะปรากฏขึ้นอย่างถูกต้ององค์กรและการจัดเก็บภาพที่คุณต้องการใช้บนหน้าเว็บของคุณเป็นข้อควรพิจารณาที่สำคัญ

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

images ในกรณีนี้ชื่อไดเรกทอรีย่อยจะรวมอยู่ในแท็ก

เป็นตัวอย่างนี่คือสิ่งที่เราจะทำเพื่อแทรกภาพของต้นไม้ชื่อ filename tree.jpg ลงบนเว็บเพจหากเราเก็บภาพต้นไม้ไว้ในที่เดียวกับไฟล์หน้าเว็บอื่น ๆ ของเราแท็กภาพ HTML จะเป็น lt; img src ' tree.jpg gt;หากไฟล์ภาพถูกเก็บไว้ในไดเรกทอรีย่อยภายในไดเรกทอรีหน้าเว็บของเราแท็กจะถูกเปลี่ยนเป็น lt; img src ' images/tree.jpg gt;สิ่งสำคัญที่ต้องจำไว้คือแท็กรูปภาพ HTML ให้ข้อมูลอ้างอิงหรือเส้นทางไปยังไฟล์ภาพโดยพื้นฐานแล้วมันจะบอกเบราว์เซอร์ว่าจะค้นหาไฟล์ได้ที่ไหน

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

    Align mdash;ระบุว่าภาพของคุณสอดคล้องกับข้อความในหน้าของคุณอย่างไร (ซ้าย, ขวา, บน, กลาง, ล่าง)
  • alt mdash;หมายถึงข้อความทางเลือกนี่เป็นคุณลักษณะที่สำคัญมากและควรรวมไว้สำหรับภาพทั้งหมดของคุณมันระบุข้อความที่แสดงแทนภาพ

  • border mdash;เพิ่มเส้นขอบให้กับภาพของคุณด้วยความหนาที่ระบุเป็นพิกเซล

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

  • VSPACE และ HSPACE MDASH;ใช้เพื่อเพิ่มพื้นที่สีขาวรอบ ๆ ภาพของคุณ