เปิดไฟล์ HTML สำหรับหน้าเว็บที่คุณต้องการเพิ่มรูปภาพในโปรแกรมแก้ไขข้อความ เช่น Notepad หรือซอฟต์แวร์พัฒนาเว็บ
เพิ่มแท็กให้กับไฟล์ วางแท็กหลังองค์ประกอบที่คุณต้องการให้รูปภาพปรากฏเมื่อเปิดไฟล์ HTML ในเบราว์เซอร์ แท็กไม่มีแท็กปิดแยกต่างหาก ภายในแท็ก คุณต้องระบุแหล่งที่มาของรูปภาพที่คุณต้องการแสดงโดยพิมพ์ตำแหน่งของรูปภาพบนอินเทอร์เน็ตด้วย src คุณลักษณะ. หากรูปภาพถูกเก็บไว้ในโฟลเดอร์เดียวกับไฟล์ HTML ให้พิมพ์ชื่อและนามสกุลของรูปภาพ หากรูปภาพถูกเก็บไว้ที่อื่น ให้พิมพ์ URL แบบเต็มของรูปภาพ
เพิ่ม alt คุณลักษณะให้กับแท็กของคุณ ใน HTML5 จำเป็นต้องมีแอตทริบิวต์ alt ใช้แอตทริบิวต์นี้เพื่ออธิบายภาพในกรณีที่ไม่สามารถโหลดได้ หากไม่สามารถโหลดรูปภาพได้ เบราว์เซอร์จะแสดงข้อความที่คุณป้อนหลังแอตทริบิวต์ alt นอกจากนี้ แอตทริบิวต์ alt ยังมีความสำคัญสำหรับซอฟต์แวร์โปรแกรมอ่านหน้าจอที่ใช้โดยผู้ที่มีความบกพร่องทางการมองเห็น ซอฟต์แวร์จะอ่านข้อความในแอตทริบิวต์ alt เพื่อให้ผู้ที่มีความบกพร่องทางการมองเห็นในการดูเว็บไซต์ของคุณได้ยินสิ่งที่อยู่ในภาพแม้ว่าจะมองไม่เห็นก็ตาม
ระบุขนาดของภาพเป็นพิกเซลด้วยปุ่ม ความสูง และ
ความกว้าง คุณลักษณะ. หากคุณไม่ระบุขนาด เบราว์เซอร์จะไม่ทราบว่าจะเหลือพื้นที่เท่าใดสำหรับรูปภาพขณะโหลดหน้าเว็บ ส่งผลให้หน้าโหลดไม่สม่ำเสมอ เนื่องจากข้อความโหลดก่อน ทำให้มีพื้นที่ว่างเล็กๆ สำหรับรูปภาพ จากนั้นจึงแยกจากกันเมื่อโหลดรูปภาพ และทำให้พื้นที่ขยายออก ด้วยขนาดที่ระบุ เบราว์เซอร์จะเว้นระยะห่างระหว่างองค์ประกอบอื่นๆ บนหน้าในปริมาณที่เหมาะสมเพื่อให้รูปภาพกรอกเมื่อโหลดเสร็จทดสอบโค้ดของคุณเพื่อให้แน่ใจว่ารูปภาพแสดงในตำแหน่งที่ถูกต้องโดยเปิดไฟล์ HTML ในเบราว์เซอร์
ใช้ CSS เพื่อย้ายรูปภาพไปทางซ้ายหรือขวาของหน้าจอ หรือมีข้อความล้อมรอบ ตัวอย่างเช่น คุณสามารถใช้ style="float: left;" หรือ style="float: right;" ภายในแท็ก
หากคุณไม่ทราบทั้งความสูงและความกว้างของรูปภาพ คุณสามารถใช้แอตทริบิวต์ height หรือ width เพียงอย่างเดียวก็ได้ คุณยังสามารถใช้ CSS เพื่อระบุความสูงและความกว้าง ตัวอย่างเช่น สำหรับรูปภาพขนาด 100 x 100 พิกเซล ให้ใช้แอตทริบิวต์ style: style="height: 100px; ความกว้าง: 100px"
ทำให้รูปภาพเป็นลิงก์ที่คลิกได้โดยการวางแท็กภายในคู่แท็ก "a href" ตัวอย่างเช่น หากคุณต้องการให้รูปภาพเชื่อมโยงกับ Facebook ให้พิมพ์ดังต่อไปนี้
อย่าใช้แอตทริบิวต์ alt เพื่อพยายามเพิ่ม SEO ของหน้าเว็บของคุณ เสิร์ชเอ็นจิ้นทราบมานานแล้วว่านักออกแบบเว็บไซต์บางคนพยายามยัดเยียดแอตทริบิวต์ alt ด้วยคีย์เวิร์ดพิเศษ ดังนั้นพวกเขาจึงเพิกเฉยต่อข้อความในแอตทริบิวต์ alt
