รูปภาพเป็นส่วนที่สำคัญมากของหน้าเว็บเนื่องจากปรับปรุงรูปลักษณ์ของหน้าเว็บและเพิ่มการโต้ตอบกับลูกค้า USP ของเว็บไซต์หลายแห่งเป็นวิธีที่พวกเขาจัดระเบียบรูปภาพต่างๆบนหน้าเว็บและเพิ่มรสชาติให้กับมัน ในเรื่องนี้ บทความเกี่ยวกับรูปภาพเราจะทำความเข้าใจเกี่ยวกับการฝังรูปภาพในเว็บเพจโดยใช้ HTML ตามลำดับต่อไปนี้:
วิธีเพิ่มรูปภาพใน HTML
ในการฝังรูปภาพใน HTML ของหน้าเว็บจะช่วยให้คุณ แท็ก อีกประเด็นสำคัญที่ต้องจำไว้คือ
ไม่มีแท็กปิด scr แอตทริบิวต์ใช้เพื่อระบุเส้นทางของรูปภาพซึ่งอาจเป็น url หรือเส้นทางรูปภาพจากระบบ / เซิร์ฟเวอร์ ก่อนอื่นให้เราเริ่มด้วยไวยากรณ์พื้นฐานของการฝังรูปภาพในเว็บเพจโดยใช้ HTML
ไวยากรณ์
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>ตัวอย่างรหัส
ภาพ HTML การฝังรูปภาพในเว็บเพจ
เช่นเดียวกับแท็กอื่น ๆ มีแอตทริบิวต์ต่างๆที่เกี่ยวข้อง แท็ก ให้เราดูทีละคนเข้าใจความต้องการและวิธีการใช้งาน
แท็กรูปภาพ HTML
- alt แอตทริบิวต์
แอตทริบิวต์ alt คือข้อความทางเลือกสำหรับรูปภาพ สาเหตุที่มีการนำแอตทริบิวต์ alt มาใช้เนื่องจากสาเหตุใดก็ตามที่รูปภาพไม่สามารถโหลดได้ข้อความทางเลือกควรปรากฏขึ้นเพื่อให้ทราบถึงรูปภาพ สาเหตุของการโหลดรูปภาพไม่ได้อาจเกิดจากการเชื่อมต่ออินเทอร์เน็ตที่ช้าหรือรูปภาพไม่อยู่ในแหล่งที่มาที่ให้ไว้เป็นต้น
หากรูปภาพอยู่ในโฟลเดอร์เดียวกันกับที่เป็นไฟล์ HTML คุณสามารถระบุชื่อไฟล์ได้โดยตรง มิฉะนั้นคุณจะมีเส้นทางที่แน่นอนของไฟล์รูปภาพ
ค่าของแอตทริบิวต์ alt ควรอธิบายรูปภาพ
ตัวอย่าง
ภาพ HTML การฝังรูปภาพในเว็บเพจ
วิธีสแกนหาอักขระใน java
- ความกว้างและความสูงของรูปภาพ
แอตทริบิวต์สไตล์ใช้เพื่อกำหนดความสูงและความกว้างของรูปภาพ ในแอตทริบิวต์ style คุณระบุสไตล์ CSS
ภาพ HTML การฝังรูปภาพในเว็บเพจ
ประเด็นสำคัญบางประการในขณะที่ฝังรูปภาพในเว็บเพจโดยใช้ HTML ได้แก่
- แอตทริบิวต์ความกว้างและความสูงกำหนดเป็นพิกเซล
- คุณยังสามารถกำหนดความกว้างและความสูงของรูปภาพเป็นเปอร์เซ็นต์ได้ จะพิจารณาเปอร์เซ็นต์ตามหน้าเว็บทั้งหมด
- หากคุณระบุเพียงหนึ่งในนั้นระบบจะปรับอีกรายการตามนั้น
- การฝังรูปภาพโดยใช้ URL
HTML ยังช่วยให้คุณมีความยืดหยุ่นในการเลือกภาพจากเซิร์ฟเวอร์อื่นเพียงแค่ระบุ URL คุณสามารถใช้เซิร์ฟเวอร์แยกต่างหากเพื่อโฮสต์รูปภาพแล้วฝังรูปภาพเหล่านั้นโดยใช้ URL
ภาพ HTML การฝังรูปภาพในเว็บเพจ
- รูปภาพเป็นลิงค์
คุณยังสามารถใช้รูปภาพเป็นลิงค์ที่ผู้ใช้สามารถคลิกที่รูปภาพและเข้าสู่หน้าเว็บใหม่ได้ ในการทำเช่นนั้นคุณต้องใส่ไฟล์ วันใน แท็ก
ภาพ HTML การฝังรูปภาพในเว็บเพจ
- ภาพลอย
คุณยังสามารถปรับการจัดแนวของรูปภาพโดยใช้คุณสมบัติลอยของ CSS ต้องระบุคุณสมบัติ CSS ทั้งหมดในแอตทริบิวต์ style
รูปภาพ HTML
- แผนที่รูปภาพ
นี่เป็นหนึ่งในคุณสมบัติที่สำคัญของ HTML แท็กช่วยในการกำหนดภาพแผนที่ คุณต้องสงสัยว่าแผนที่ภาพคืออะไร ภาพแผนที่คือภาพที่มีพื้นที่ที่คลิกได้
รูปภาพ HTML
- ภาพพื้นหลัง
คุณยังสามารถเพิ่มภาพพื้นหลังในเว็บเพจได้ คุณต้องใช้คุณสมบัติ CSS นั่นคือภาพพื้นหลังในแท็กสไตล์แล้วเพิ่มลงในองค์ประกอบ HTML
รูปภาพ HTMLภาพพื้นหลัง
องค์ประกอบของร่างกาย
ด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของบล็อกรูปภาพ HTML นี้หลังจากดำเนินการตามตัวอย่างข้างต้นแล้วคุณจะเข้าใจวิธีแทรกรูปภาพใน HTML ฉันหวังว่าบล็อกนี้จะให้ข้อมูลและเพิ่มมูลค่าให้กับคุณ
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
autoboxing ใน java คืออะไร
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'รูปภาพ HTML' แล้วเราจะติดต่อกลับไป