ภาพ HTML

ตัวอย่าง

Norwegian Mountain Trip

ลอง»

ตัวอย่างออนไลน์

แทรกภาพ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะแสดงภาพในเว็บเพจ

แทรกภาพจากสถานที่ที่แตกต่างกัน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่โฟลเดอร์หรือเซิร์ฟเวอร์ที่แตกต่างกันภาพที่จะแสดงหน้าเว็บ

(คุณสามารถหาตัวอย่างเพิ่มเติมที่ด้านล่างของหน้านี้.)

ภาพ HTML - แท็กภาพ (<img>) และแอตทริบิวต์แหล่งที่มา (Src)

ใน HTML, ภาพจะถูกกำหนดโดยแท็ก <img>

<img> แท็กเป็นที่ว่างเปล่าซึ่งหมายความว่ามันมีคุณลักษณะและแท็กไม่ได้ปิด

เพื่อแสดงภาพบนหน้าเว็บที่คุณจะต้องใช้แอตทริบิวต์แหล่งที่มา (src) src หมายถึง "ที่มา" ค่าของแอตทริบิวต์แหล่งที่มาคือ URL ของภาพ

ไวยากรณ์ภาพที่กำหนดเองคือ:

URL หมายถึงสถานที่สำหรับการจัดเก็บภาพ หากภาพมีชื่อว่า "boat.gif" ตั้ง www.w3school.com.cn ไดเรกทอรีภาพแล้ว URL ที่เป็น http://www.w3school.com.cn/images/boat.gif

เบราว์เซอร์จะแสดงภาพในเอกสารที่แท็กรูปภาพที่ปรากฏ หากคุณใส่แท็กรูปภาพระหว่างสองย่อหน้าแรกเบราว์เซอร์จะแสดงวรรคแรกและจากนั้นจะแสดงภาพที่ปรากฏวรรคสองที่ผ่านมา

ภาพ HTML - Alt Attribute

แอตทริบิวต์ Alt จะใช้เป็นคำนิยามทางเลือกของสตริงของภาพข้อความที่เตรียมไว้

แทนที่ข้อความคุณสมบัติเป็นค่าที่ผู้ใช้กำหนด

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

รูปภาพ HTML - การตั้งค่าความสูงของภาพและความกว้าง

ความสูง (สูง) และความกว้าง (กว้าง) คุณสมบัติสำหรับการตั้งค่าความกว้างและความสูงของภาพ

ค่าเริ่มต้นแอตทริบิวต์พิกเซล:

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

ข้อควรระวังพื้นฐาน - เคล็ดลับที่มีประโยชน์:

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

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

ตัวอย่างเพิ่มเติม

ภาพการจัดเรียง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการจัดเรียงภาพในข้อความ

รูปภาพลอย
ตัวอย่างนี้แสดงให้เห็นถึงวิธีที่จะทำให้ลอยภาพวรรคทางซ้ายหรือขวา

การตั้งค่าการเชื่อมโยงภาพ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ภาพเป็นลิงค์

สร้างแผนที่ภาพ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างภาพแผนที่ที่มีพื้นที่ที่สามารถคลิกได้ แต่ละภูมิภาคเหล่านี้คือการเชื่อมโยงหลายมิติ

แท็กรูปภาพ HTML