ใส่รูป ปรับแต่งเพิ่มเติม
มีหลายเว็บเลยที่ให้บริการ host หรือฝากรูปฟรี เช่น Picasa Web Albums, Imgur, Flickr หรือ Photobucket ยังไงก่อนเลือกใช้ให้อ่านเงื่อนไขดูดีๆ ก่อน บางเว็บจะย่อรูปคุณทำให้ด้อยคุณภาพลง บางเว็บก็ถึงขั้นถอดรูปออกจากเว็บถ้าคนดูรูปเยอะเกินไป (เพราะเปลือง bandwidth ของเว็บเขา)   บาง blog มีเครื่องมือให้คุณอัพโหลดรูปเสร็จสรรพ ถ้าคุณใช้ web host แบบเสียเงิน ก็อัพโหลดรูปเข้าเว็บตัวเองได้ด้วย FTP และควรสร้าง "images" directory ไว้เพื่อเก็บไฟล์รูปให้เป็นระบบระเบียบ   ถ้าอยากใช้รูปจากเว็บอื่น ก็ต้องขออนุญาตเจ้าของก่อนหยิบยืมมา ถ้าเจ้าของเขาอนุญาตแล้วก็ดาวน์โหลดมาได้เลย แล้วอัพโหลดรูปเข้าเว็บฝากรูป เปิดไฟล์ HTML ของหน้าเว็บที่คุณจะใส่รูป  ถ้าจะใส่รูปในกระทู้ ก็พิมพ์ลงโพสต์โดยตรงได้เลย หลายเว็บบอร์ดมีระบบเฉพาะแทน HTML ถ้าใช้ไม่เป็นตรงไหนก็ถามเพื่อนร่วมเว็บบอร์ดดู หาจุดในโค้ด HTML ที่จะใส่รูป แล้วใส่แท็ก <img> ลงไป นี่คือแท็กว่าง (empty tag) คือใส่ทีเดียวจบ ไม่มีแท็กเปิดแท็กปิด โค้ดที่ต้องใช้เพื่อใส่รูปจะอยู่ตรงกลางระหว่าง 2 วงเล็บเหลี่ยมนั่นแหละ  <img> เข้าหน้าเว็บที่คุณฝากรูปไว้ คลิกขวาที่รูป (กด control แล้วคลิก ถ้าใช้ Mac) แล้วเลือก "Copy Image Location" หรือคลิก "View Image" เพื่อดูแต่รูป จากนั้นก็ copy URL ในแถบ address เลย  ถ้าคุณอัพโหลดรูปเข้า images directory ของเว็บตัวเอง ให้ลิงค์ไปยังโฟลเดอร์นั้น แล้วใส่ /images/yourfilenamehere ถ้าไม่ได้ผล แสดงว่า images directory อยู่ในอีกโฟลเดอร์หนึ่ง ให้เอาไปไว้ที่ root directory แทน คุณอาจจะพอรู้มาแล้ว ว่า attributes ต่างๆ ของ HTML จะอยู่ในแท็กเวลาปรับแต่ง อย่าง attribute src ก็ย่อมาจาก "source" ใช้บอกเบราว์เซอร์ว่าต้องไปหารูปที่ไหน ให้คุณเขียน src=" " แล้ว paste URL ของรูปตรงกลางระหว่างเครื่องหมายคำพูด เช่น  <img src="http://www.exampleimagehost.com/my-cute-dog.jpg"> ปกติ HTML ก็มีทุกอย่างที่ต้องใช้ในการแสดงรูปอยู่แล้ว แต่ก็ควรใส่ attribute alt ไปอีกที เพื่อบอกเบราว์เซอร์ว่าต้องขึ้นข้อความไหนแทนเวลารูปไม่ขึ้น แถมช่วยให้ search engines รู้ด้วยว่ารูปคุณเกี่ยวกับอะไร ส่วน screen readers ก็จะใช้อธิบายรูปให้ผู้พิการทางสายตาได้ด้วย  ลองทำตามตัวอย่างดู แล้วเปลี่ยนข้อความข้างในเครื่องหมายคำพูดเอา   <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="หมากินส้ม"> ถ้าเนื้อหาในหน้านั้นไม่ถึงกับขาดรูปไม่ได้ ให้ใส่ attribute alt แบบไม่ต้องมีคำบรรยาย (alt="") เซฟไฟล์ HTML ลงเว็บ แล้วเข้าหน้าเว็บที่คุณเพิ่งแก้ไข หรือ refresh หน้านั้นถ้าเปิดอยู่ เท่านี้ก็จะเห็นรูปแล้ว ถ้ารูปผิดขนาดหรือไม่ถูกใจด้วยเหตุผลใดก็ตาม ก็ให้ไปปรับแก้ตามวิธีการข้างล่าง จะดีที่สุดถ้าคุณปรับขนาดรูปด้วยโปรแกรมแต่งรูปฟรีก่อน แล้วค่อยอัพโหลด การปรับค่า width (ความกว้าง) กับ height (ความสูง) ด้วย HTML จะเป็นการบอกเบราว์เซอร์ให้ยืด/หดรูป ซึ่งก็ต่างกันไปตามแต่ละเบราว์เซอร์ และอาจ (แทบไม่ค่อย) เกิด error ตอนแสดงรูปได้  ถ้าอยากปรับรูปแบบสะดวกรวดเร็วทันใจ ให้ใช้ฟอร์แมตนี้    <img src="http://example.com/example.png" alt="display this" width=200 height=200> (จำนวนพิกเซล หรือ "CSS pixels" ของ HTML5 ที่ใช้กับมือถือได้ดีกว่า)  หรือ <img src="http://example.com/example.png" width=100% height=10%> (เปอร์เซ็นต์ของสัดส่วนหน้าเว็บ หรือเปอร์เซ็นขององค์ประกอบ HTML ที่มีรูป)  ถ้าคุณใส่แค่ attribute เดียว (width หรือ height) เบราว์เซอร์จะปรับอีกค่าตาม เพื่อคงสัดส่วน width:height ratio ไว้ attribute title ใช้เพิ่มคอมเม้นท์หรือข้อมูลอื่นๆ ของรูปได้ เช่น ใส่เครดิตให้เจ้าของรูป ส่วนใหญ่ข้อความนี้จะขึ้นเวลาคนอ่านเขาเลื่อนเคอร์เซอร์มาที่รูป  <img src="http://example.com/example.png" title="Photograph by J. Godfrey"> ถ้าอยากได้รูปที่เป็นลิงค์ด้วย ให้ใส่แท็ก image ในแท็ก hyperlink <a></a> เช่น  <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
อัพโหลดรูป. เปิดไฟล์ HTML. เริ่มจากแท็ก img. หา URL ของรูป. วาง URL ใน attribute src. ใส่ attribute alt. เซฟค่าใหม่. ปรับขนาดรูป. ใส่ tooltip. สร้างลิงค์.
https://www.wikihow.com/Insert-Images-with-HTML https://www.wikihow.com/Insert-Images-with-HTML
Inserting the Image Optional Adjustments