พื้นฐาน HTML - แสดงรูปภาพ

• อาจ 16, 2024

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

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

แท็กพื้นฐานที่ใช้ในการแสดงภาพดังต่อไปนี้:



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



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

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



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

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



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

การจัดแนวรูปภาพถูกตั้งค่าดังนี้:



นอกจากนี้คุณยังสามารถตั้งค่าการจัดตำแหน่งเป็น "top," "bottom," หรือ "middle" เพื่อทำให้แนวรูปภาพขึ้นกับด้านบนหรือด้านล่างของบรรทัดข้อความ หากคุณไม่ได้ระบุการจัดตำแหน่งภาพจะเริ่มต้นที่ "ด้านล่าง"

ในฐานะที่เป็นบันทึกด้านข้างคุณสามารถรวมคุณลักษณะภาพของคุณ (src, align, alt, ฯลฯ ) ในลำดับใดก็ได้ภายในแท็กรูปภาพ การตั้งค่าส่วนตัวของฉันคือการแสดงรายการคุณลักษณะ 'src' ก่อนเนื่องจากเป็นคุณสมบัติพื้นฐานที่สุดและต้องรวมอยู่ในทุกแท็กรูปภาพ แต่คุณสามารถใช้ลำดับใดก็ได้ที่รู้สึกเป็นธรรมชาติที่สุดสำหรับคุณ

คำแนะนำวิดีโอ: html #4 การใส่รูปภาพ (อาจ 2024).