เนื้อหา

• ที่จะก้าว
• วิธีที่ 1 จาก 1: การแทรกรูปภาพด้วย HTML
• เคล็ดลับ
• คำเตือน

การเพิ่มรูปภาพลงในเว็บไซต์หรือโปรไฟล์โซเชียลเน็ตเวิร์กของคุณเป็นวิธีที่ยอดเยี่ยมในการแต่งหน้าเว็บของคุณ HTML (HyperText Markup Language) มีฟังก์ชันมากมายสำหรับการสร้างเว็บเพจ แต่โชคดีที่โค้ดที่คุณต้องใช้ในการเพิ่มรูปภาพนั้นไม่ยากเกินไป

ที่จะก้าว

วิธีที่ 1 จาก 1: การแทรกรูปภาพด้วย HTML

1. อัปโหลดภาพของคุณไปยังเว็บไซต์โฮสติ้งฟรีเช่น Photobucket หรือ TinyPic ที่อนุญาตให้เชื่อมโยงได้อย่างรวดเร็ว Hot-link ช่วยให้สามารถเชื่อมโยงโดยตรงของรูปภาพไปยังเซิร์ฟเวอร์ของเว็บไซต์ ผู้ให้บริการบางรายได้แบนสิ่งนี้เนื่องจากการเชื่อมต่อแบบร้อนใช้แบนด์วิดท์และใช้พื้นที่บนเซิร์ฟเวอร์ของตน
   • หากคุณมีบัญชีโฮสติ้งแบบชำระเงินให้อัปโหลดภาพไปยังเซิร์ฟเวอร์ที่เว็บไซต์ของคุณวางไว้โดยตรง สิ่งนี้มีความน่าเชื่อถือมากกว่าเว็บไซต์ฟรีเสมอและไม่จำเป็นต้องมีราคาแพงเลย
2. เปิดเอกสารใหม่ในโปรแกรมแก้ไขข้อความ (เช่น, Notepad / Notepad) หรือเปิดเพจในเว็บไซต์ / โปรไฟล์ของคุณซึ่งคุณสามารถเปลี่ยนโค้ด HTML ได้โดยตรง
3. เริ่มต้นด้วยไฟล์ img แท็ก img แท็กว่างเปล่าหมายความว่าไม่จำเป็นต้องใช้แท็กปิด อย่างไรก็ตามสำหรับการตรวจสอบความถูกต้อง XHTML คุณยังสามารถใส่ช่องว่างและเครื่องหมายทับไว้ข้างหน้าได้ มากกว่า ลงชื่อ.
   • img />
4. มีแอตทริบิวต์ที่พร้อมใช้งานมากมาย แต่จำเป็นเพียงอย่างเดียว:src. นั่นคือสถานที่ / ที่อยู่หรือ URL ของรูปภาพของคุณ
   • img src = "URL ของรูปภาพ" />
5. ถัดไปคุณต้องทำ alt เพิ่มแอตทริบิวต์ ข้อความนี้แสดงข้อความอื่นในกรณีที่ไม่สามารถโหลดรูปภาพได้ นอกจากนี้ยังเป็นบริการสำหรับผู้พิการทางสายตาที่ใช้โปรแกรมอ่านหน้าจอ
   • หากคุณวางเคอร์เซอร์ไว้เหนือรูปภาพข้อความนี้จะแสดงเป็นคำแนะนำเครื่องมือด้วยเช่นกัน แต่จะเกิดขึ้นใน Internet Explorer เท่านั้น โซลูชันที่ใช้ได้กับทุกเบราว์เซอร์ (Firefox และคณะ) เป็นไปได้ หัวข้อ แอตทริบิวต์ที่จะใช้นอกเหนือจาก alt. (คุณสามารถละเว้นหลังได้หากไม่ต้องการให้รูปภาพมีคำแนะนำเครื่องมือ)

ตัวอย่างเช่น:img src = "URL ของรูปภาพ" alt = "ในกรณีที่" title = "เคล็ดลับเครื่องมือ" />

1. ตอนนี้คุณสามารถระบุขนาดของภาพด้วยไฟล์ ความสูง และ ความกว้าง แอตทริบิวต์และโดยการระบุพิกเซลหรือเปอร์เซ็นต์ โปรดทราบว่าการปรับขนาดด้วยวิธีนี้จะเปลี่ยนขนาดของมุมมองเท่านั้นไม่ใช่ขนาดของรูปภาพ เพื่อลดระยะเวลาในการโหลดรูปภาพจะดีกว่าโดยเฉพาะอย่างยิ่งกับภาพขนาดใหญ่ในการปรับขนาดล่วงหน้าด้วยซอฟต์แวร์แก้ไขภาพหรือด้วยบริการออนไลน์เช่น PicResize.com
   • img src = "URL ของรูปภาพ" alt = "ในกรณีที่" title = "คำแนะนำเครื่องมือ" height = "50%" width = "50%" />
   • img src = "URL ของรูปภาพ" alt = "ในกรณีที่" title = "คำแนะนำเครื่องมือ" height = "25px" width = "50px" />

เคล็ดลับ

• ค่าสำหรับแอตทริบิวต์เหล่านี้กำหนดเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ตั้งแต่ 1-100%
• รูปภาพสามารถวางไว้ที่ใดก็ได้บนหน้าเว็บโดยใช้แอตทริบิวต์การจัดรูปแบบต่างๆเช่นด้านบนด้านล่างกลางขวาซ้ายเป็นต้น
• แอตทริบิวต์ hspace ใช้เพื่อแทรกช่องว่างแนวนอนทางด้านซ้ายและขวาของรูปภาพในขณะที่แอตทริบิวต์ vspace ใช้เพื่อสร้างที่ว่างที่ด้านบนและด้านล่างของรูปภาพและวัตถุอื่น ๆ
• อย่าหลงระเริงกับภาพมากเกินไป มันดูยุ่งและไม่เป็นมืออาชีพ
• รูปภาพ GIF เหมาะสำหรับโลโก้หรือการ์ตูน แต่ไฟล์ประเภทนี้ไม่เหมาะสำหรับรูปภาพและรูปภาพอื่น ๆ ที่มีหลายสี
  • ภาพ GIF รองรับเฉพาะสี 8 บิตและสูงสุด 256 สีสำหรับภาพ ดังนั้นจึงเป็นที่คาดหวังว่าการสร้างภาพประกอบหรือภาพถ่ายสี 16 หรือ 24 บิตจะไม่ดีเท่าไหร่
  • ภาพ GIF ยังรองรับความโปร่งใส มีความโปร่งใสเพียงเล็กน้อยซึ่งหมายความว่าสามารถทำให้สีโปร่งใสได้
  • ภาพ GIF ยังรองรับการเชื่อมต่อซึ่งหมายความว่าผู้เยี่ยมชมไซต์จะได้รับทราบว่าภาพจะมีลักษณะอย่างไรก่อนที่จะโหลดอย่างสมบูรณ์
  • รูปแบบ GIF ยังรองรับภาพเคลื่อนไหว
• ตรวจสอบว่า URL ระบุรูปแบบไฟล์ของรูปภาพ (.webp .gif ฯลฯ )

คำเตือน

• อย่า Hotlink!