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

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

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

แท็กรูปภาพ HTML

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

นี่คือไวยากรณ์สำหรับ HTML แท็ก:

แท็กไม่มีแท็กปิด แท็กจะลงท้ายด้วย “/>” แทน นี่แสดงว่า แท็กไม่จำเป็นต้องมีแท็กปิดแยกต่างหาก รองรับแท็กในทุกเบราว์เซอร์

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

ในไวยากรณ์ข้างต้น . ของเรา จะอ้างอิงไฟล์ house.png. ไฟล์นี้อยู่ในโฟลเดอร์เดียวกับไฟล์ HTML ที่เรากำลังทำงานอยู่

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

อย่างไรก็ตาม หากเราเก็บไฟล์รูปภาพของเราไว้ในโฟลเดอร์อื่น เช่น รูปภาพ เราจะใช้รหัสนี้:

หากเราต้องการฝังรูปภาพจากแหล่งภายนอก เราสามารถใช้ URL ที่สมบูรณ์ได้ นี่คือตัวอย่าง แท็กที่อ้างอิงภาพภายนอก:

ที่กล่าวว่า เป็นการดีที่สุดที่จะอ้างอิงรูปภาพจากไฟล์ในเครื่องเมื่อทำได้ เนื่องจากการอ้างอิงรูปภาพภายนอกทำให้เบราว์เซอร์ทำงานได้มากกว่าการดึงรูปภาพจากไฟล์ในเครื่อง

ตัวอย่างรูปภาพ HTML

มาสำรวจตัวอย่างของ HTML แท็กในการดำเนินการ สมมติว่าเรากำลังสร้างเว็บไซต์สำหรับร้านกาแฟท้องถิ่น The Golden Roast The Golden Roast ต้องการให้รูปภาพของกาแฟหนึ่งถ้วยปรากฏบนหน้าแรกของพวกเขา

ไฟล์ที่พวกเขาให้เราเพื่อเพิ่มไปยังหน้าเว็บเรียกว่า coffee.png โฟลเดอร์ที่เก็บหน้า HTML ของเราเก็บภาพนี้ไว้ด้วย ในการเพิ่มรูปภาพนี้ในเว็บไซต์ของเรา เราสามารถใช้รหัสต่อไปนี้:

 
เดอะ โกลเด้น โรสต์

รหัสของเราส่งคืน:

มาทำลายรหัสของเรากัน อันดับแรก เราใช้ แท็กซึ่งเก็บองค์ประกอบหลักของหน้าเว็บของเรา จากนั้น เราใช้

แท็กเพื่อกำหนดหัวเรื่องบนหน้าของเรา ข้อความของหัวข้อนี้คือ:The Golden Roast.

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

HTML รูปภาพ:ข้อความแสดงแทน

การเพิ่มข้อความแสดงแทนเป็นส่วนสำคัญในการทำงานกับรูปภาพใน HTML ข้อความแสดงแทนโดยแอตทริบิวต์ alt เป็นคำอธิบายที่เป็นข้อความของรูปภาพ

มีสาเหตุหลายประการที่คุณควรระบุแอตทริบิวต์ alt เมื่อทำงานกับรูปภาพ ข้อความแสดงแทน:

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

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

ตัวอย่างข้อความแสดงแทน HTML

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

 
The Golden Roast
 

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

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

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

 แอตทริบิวต์ชื่อจะมีประโยชน์หากคุณต้องการเพิ่มคำแนะนำเครื่องมือให้กับรูปภาพ อย่างไรก็ตาม แอตทริบิวต์ title [ชื่อ] ไม่รองรับโปรแกรมอ่านหน้าจอ และไม่ปรากฏในอุปกรณ์เคลื่อนที่ (ซึ่งไม่มีเมาส์)
 

 สมมติว่าเราต้องการเพิ่มแอตทริบิวต์ title ด้วยค่า A cup of coffee on a table มาสู่ภาพลักษณ์ของเราเมื่อก่อน เราสามารถใช้รหัสต่อไปนี้เพื่อดำเนินการดังกล่าว:
 
 
The Golden Roast
  

 เมื่อเราวางเคอร์เซอร์ไว้เหนือรูปภาพ เนื้อหาของแท็กชื่อจะปรากฏขึ้น
 
ขนาดรูปภาพ HTML:ความกว้างและความสูง
 

 คุณสามารถใช้แอตทริบิวต์ความกว้างและความสูงของรูปภาพเพื่อระบุความกว้างและความสูงของรูปภาพตามลำดับ
 

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

 รหัสของเราส่งคืน:
  

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

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

 สมมติว่าเราต้องการให้ภาพกาแฟของเราก่อนหน้านี้ปรากฏที่ด้านขวาของหน้า เราสามารถทำให้สิ่งนี้เกิดขึ้นได้โดยใช้รหัสต่อไปนี้:
 
 
เดอะโกลเด้นโรสต์
 

 รหัสของเราส่งคืน:
  

 เราใช้ float:right; แอตทริบิวต์ภายในแอตทริบิวต์สไตล์ ซึ่งช่วยให้เราระบุได้ว่ารูปภาพของเราจะลอยไปทางด้านขวาของหน้า
 
 
 
บทสรุป
 

 คุณสามารถใช้  แท็ก HTML เพื่อวางรูปภาพบนหน้าเว็บ รูปภาพสามารถแสดงผลจากไฟล์หรือโฟลเดอร์ในเครื่องหรือจากแหล่งภายนอกได้
 

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

 คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ HTML หรือไม่? ดูคู่มือ HTML วิธีเรียนรู้สำหรับเคล็ดลับจากผู้เชี่ยวชาญและรายการหลักสูตรออนไลน์และแหล่งข้อมูลการเรียนรู้