รูปภาพไม่ได้แค่แทรกลงในข้อความโดยตรง เบราว์เซอร์จะแจ้งชื่อและแจ้งตำแหน่งและวิธีวางตำแหน่งเบราว์เซอร์บนหน้าจอ ในการดำเนินการนี้ ให้ใช้แท็ก HTML img เดียว ระบุตำแหน่งของวัตถุกราฟิกบนหน้าเว็บ
หากแท็กเลือกแอตทริบิวต์ได้หลายรายการ แท็ก img ต้องมีพารามิเตอร์อย่างน้อยหนึ่งตัว - ที่อยู่ของรูปภาพ แอตทริบิวต์นี้เรียกว่า src:
- - นี้จะแสดงไฟล์ goat-j.webp" />
- - ด้วยพารามิเตอร์นี้ของแท็ก img เบราว์เซอร์จะโหลดภาพที่โพสต์บนอินเทอร์เน็ตบนเว็บไซต์ megasellmag.ru
คุณลักษณะการจัดแนว
ในการวางตำแหน่งรูปภาพบนหน้าเว็บโดยใช้ HTML จะใช้แท็ก img ซึ่งเป็นแอตทริบิวต์ที่มีหน้าที่รับผิดชอบในการวางรูปภาพบนหน้าและลักษณะของการตัดข้อความ
โดยค่าเริ่มต้น เบราว์เซอร์จะวางรูปภาพไว้ตรงกลางหน้าจอ และข้อความจะไม่ล้อมรอบรูปภาพ แท็ก img จะทำให้คุณสามารถแสดงความไม่เห็นด้วยกับเบราว์เซอร์โดยใช้แอตทริบิวต์ align (การจัดตำแหน่ง)
- รูปภาพจะอยู่ที่ขอบด้านซ้ายของหน้า และข้อความจะอยู่ทางด้านขวา
ลักษณะการทำงานของข้อความจะคล้ายกันหากวางรูปภาพไว้ทางด้านขวา (align=right) ตรงกลาง (align=middle) บน (align=top) ด้านล่าง(align=bottom) และ center (center).
การตั้งค่าและขนาด
เพื่อป้องกันไม่ให้ข้อความเล็ดลอดเข้าไปในรูปภาพ แท็ก img ได้รับคุณลักษณะพิเศษ -hspace (ขอบแนวนอน/แนวนอน) และ vspace (ระยะขอบแนวตั้ง/แนวตั้ง) ซึ่งกำหนดจำนวนการเยื้องข้อความจากขอบของรูปภาพใน พิกเซล
รูปภาพจะไม่เพียงเคลื่อนออกจากข้อความตามจำนวนที่กำหนดเท่านั้น แต่ยังเคลื่อนออกจากขอบของหน้าด้วย ดังนั้นจึงเป็นการดีที่สุดที่จะหลีกเลี่ยงการเยื้องขนาดใหญ่
ขนาดเรขาคณิตของรูปภาพมีความสำคัญมาก ซึ่งไม่เพียงแต่น่าพึงพอใจ แต่บางครั้งก็จำเป็นต้องระบุสำหรับการแสดงรูปภาพที่ถูกต้องเท่านั้น ด้วยเหตุนี้จึงใช้แอตทริบิวต์ width (width) และ height (height) ซึ่งเป็นค่าที่กำหนดเป็นพิกเซลหรือเปอร์เซ็นต์
หากคุณระบุเฉพาะความกว้าง ความสูงจะถูกเลือกโดยอัตโนมัติตามสัดส่วนเดิม ขนาดเปอร์เซ็นต์ทำให้คุณสามารถวางรูปภาพไว้ในส่วนขวาของหน้า โดยไม่คำนึงถึงขนาดของหน้าต่างเบราว์เซอร์ และสิ่งนี้มักจะเกิดขึ้น
ตัวเลือกอื่นๆ
แอตทริบิวต์ border ล้อมรอบรูปภาพในกรอบความหนาที่ระบุ ซึ่งเบราว์เซอร์ไม่ได้ทำโดยค่าเริ่มต้น
เส้นขอบสามารถมีความกว้างเป็นศูนย์ที่ดูเหมือนไร้ความหมายได้ (ขอบ='0') แต่นั่นก็จนกว่ารูปภาพจะกลายเป็นลิงก์ เมื่อเบราว์เซอร์วนรอบขอบสีน้ำเงินโดยอัตโนมัติโดยไม่ต้องรอคำแนะนำ
ผู้ใช้ที่ใจร้อนบางคนที่โมโหโมโหโกรธากับความเร็วอินเทอร์เน็ตต่ำ จะปิดการแสดงรูปภาพ สำหรับกรณีดังกล่าว พารามิเตอร์ alt จะถูกจัดเตรียมไว้ ซึ่งอนุญาตให้คุณป้อนข้อความแสดงแทนที่ผู้ใช้จะเห็นในช่องที่รูปภาพกำลังรีบโหลด
หากคุณไม่ชอบความเป็นไปได้ของพารามิเตอร์ alt แท็ก img สามารถเสนอแอตทริบิวต์ longdesc ได้ ค่าที่เป็น URL ของเอกสารที่มีคำอธิบายโดยละเอียดมากขึ้น
แอตทริบิวต์ usemap และ ismap บอกเบราว์เซอร์ว่ารูปภาพจะเป็นรูปภาพที่ไฮเปอร์ลิงก์เป็นพื้นที่แยกต่างหาก (แผนที่ลิงก์) เฉพาะพารามิเตอร์ usemap เท่านั้นที่กำหนดแผนที่การนำทางบนเซิร์ฟเวอร์ และ ismap - แผนที่บน ฝั่งลูกค้า
คำอธิบายของลิงค์ 1 ในรูปด้านล่าง:
ของแปลก
แอตทริบิวต์ lowsrc สั่งให้เบราว์เซอร์ดาวน์โหลดสำเนา (หรือทางเลือกอื่น) ของภาพต้นฉบับที่มีคุณภาพต่ำกว่าก่อน ดังนั้นจึงเป็นภาพที่ "เบากว่า" เคล็ดลับนี้มีให้ในกรณีที่ความเร็วอินเทอร์เน็ตต่ำสำหรับผู้ใช้ เมื่ออัปโหลดรูปภาพต้นฉบับจะแทนที่ "ของปลอม"
แอตทริบิวต์ galleryimg ที่ใช้กันทั่วไปน้อยกว่าของแท็ก img จะเรียกใช้แผงควบคุมรูปภาพ (เมื่อวางเมาส์เหนือ) ช่วยให้คุณสามารถเปิดโฟลเดอร์ My Pictures เริ่มต้นและพิมพ์ บันทึก หรือส่งอีเมลรูปภาพได้ คุณสามารถปิดใช้งานพาเนลได้โดยการตั้งค่าพารามิเตอร์ galleryimg เป็น no/false และเปิดใช้งานโดยการตั้งค่า yes/true
ในข้อกำหนด HTML5 ใหม่ แท็กจำนวนหนึ่งเลิกใช้พารามิเตอร์บางตัว ตัวอย่างเช่น แอตทริบิวต์ lowsrc, border, longdesc และ name ของ img ถูกยกเลิก
