วันจันทร์ที่ 28 มกราคม พ.ศ. 2551

ใส่ภาพด้วยคำสั่ง < IMG >

สวัสดีครับ วันหยุดที่ผ่านมาเป็นอย่างไรกันบ้างครับ ได้ไปเที่ยวไหนกันมั่งป่าวเอ่ย ส่วนตัวผมเองก็ไม่ได้ไปไหนครับ ก็ผักผ่อนอยู่กับบ้านและเตรียมบทความเกี่ยวกับ ภาษา HTML ที่จะมาเสนอต่อในส่วนของวันนี้ครับ จากครั้งที่แล้วผมได้สัญญาเอาไว้ว่าจะมาเริ่มทะยอยคำสั่งในส่วนของ <BODY> ค่อยๆทำความเข้าใจไปทีละส่วนครับ ไม่ยาก(มั่ง)อย่างที่คิด อิอิ

คำสั่งที่ 1
เป็น TAG ที่ใช้แสดงรูปภาพบนเว็บเพจคือ <img> รูปแบบการใช้งานจะเป็นแบบนี้ครับ


<img src="ชื่อไฟล์รูปภาพหรือLinkรูปภาพที่เราจะนำมาแสดง"></img>


หลายท่านคงสงสัย(เหมือนผมตอนแรก)ว่า src มาไง และเอาไปใส่ไว้เพื่ออะไร ในส่วนนี้ เราเรียกมันว่า แอทริบิว(attribute) เป็นการกำหนดรูปแบบหรือลักษณะเพิ่มเติมให้กับ <TAG> คำสั่งนั้นๆ อย่าง src ย่อมาจาก "source" เป็นการอ้างอิงไฟล์ภาพของเราว่ามาจากที่ไหนครับ โดยรวมในส่วนของ แอทริบิวเนี๊ยะ มันมีเยอะมากพอสมควร แต่เอามาใช้จริงๆตามสไตล์ของแต่ละคนจะใช้ไม่กี่อันเองครับ ผมขอแนะนำว่า ใช้จด-และ-จำ ในบางส่วนก็พอครับ เพราะอีกหน่อยเมื่อเราเขียนโค้ด html เรื่อยๆแล้ว เราจะจำได้เองครับ รับประกันเลย เพราะตอนที่ผมเขียน Blog นี้ผมก็ไม่ได้มีความรู้ด้าน HTML มาก่อนครับ พิมพ์มันไปเรื่อยๆก็จำได้ครับ
รูปแบบการใช้ของเพื่อนในตอนนี้คงพอนึกออกไหมครับว่า ในBlog หรือ เวปบอร์ดบางอันเค้าจะมีให้เราใส่ HTML ได้เราก็สามารถนำรูปไปลงได้ครับ โดยที่เราเขียนรูปแบบของ IMG ดังตัวอย่างข้างบน แล้วอ้างอิงไฟล์ภาพจากเว็บที่เราจะเอามาแสดงครับ

ในตัวอย่างแรกผมจะอ้างไฟล์ที่อยู่ในเว็บของคนอื่นก่อน
ตัวอย่างเช่น ผมจะเอาภาพ โลโก้ของ yahoo มาใส่ ผมก็เปิดเว็บ Yahoo แล้วคลิกขวาที่ภาพ เลือก Properties ถ้าใครใช้ บราวเซอร์ของ FireFox ให้ดูตรง Location ถ้าใครเปิดผ่าน IE(Internet Explorer) ก็ให้ดูตรง Address(URL)ครับ ให้ copy Link อันนั้นมาใส่ใน TAG HTML ของเรา ดังนี้ครับ
<img src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif"><img>
ผลที่ได้เมื่อเซฟ NotePad เป็น .html แล้วเปิดออกมาจะเป็น



555 ผมลงรูปใน Blog ผมด้วยการเขียนโค้ด HTML แล้วเย้ๆ แต่ แต่! ขอเสียของมันก็คือ ภาพนั้นเราควบคุมไม่ได้เพราะภาพนั้นไม่ได้อยู่ในโฮส Host เรานั่นเอง วันดีคืนดี yahoo เค้าเอาภาพโลโก้นี้ออกจาก HOST ของเค้า แล้วเอาภาพใหม่ขึ้นมาแทน(โดยใช้ชื่อภาพคนละชื่อกับของเดิม)Links ที่เราเคยทำไว้ก็จะกลายเป็น Link เสีย ไม่โชว์ภาพ แล้วก็จะทำให้เว็บเราดูไม่สวยงามครับ

แบบที่สองก็เป็นการนำภาพมาจากเว็บที่รับฝากไฟล์ภาพ แบบนี้จะง่ายเพราะเราอัพโหลดไฟล์เสร็จเค้าก็จะทำ links HTML มาให้เราเสร็จเลย ไม่ต้องมาใส่โค้ดเอง แต่จะมี Links แอบแฝงไว้ในกรณีที่เราคลิกที่ภาพนั้น(ส่วนใหญ่ ไม่มีใครให้ฝากไฟล์ฟรีๆหรอกครับ)แต่ก็ไม่เสียหายแต่อย่างใด โดยถ้าเราจะเลือกใช้บริการแบบนี้ก็ควรเลือกเว็บที่ มั่นคง ไม่ล่มบ่อย และไม่ลบภาพเราออกจากระบบ ที่ผมเคยโดนก้เค้าแจ้งมาว่าระบบมีปัญหา แล้วก็ทำการล้างระบบใหม่เลยครับ ตัวอย่างเว็บฝากไฟล์ไว้เดี๋ยววันหลังผมจะหาแล้วนำมาลงไว้ให้นะครับ แต่ที่มีภาษีน่าเชื่อถือก็ Blogger นี่ก็ได้ครับไม่มีลบ ไม่มีล่ม แน่นอน เอิ๊กๆ

แบบที่สามก็คือการอ้าง src ที่ไม่ใช่จากเว็บอื่น นั่นก็คือ อ้างจากเว็บของเรานั่นเองครับ ในส่วนนี้เพื่อนๆก็อาจจะต้องมีค่าใช้จ่ายในการเช่า Host ครับแล้วอ้างอิงไฟล์จากใน Host ของเรานั่นเอง (ภาพที่ออกมาก็จะไม่มีวันหายไปไหน นอกเสียจากเราไม่ได้จ่ายค่า Host แล้วโดนยืดคืนเท่านั้นเองครับ >_<) ในส่วนนี้เพื่อนๆคงต้องทำกันในอนาคตครับ เพราะจำเป็นต้องเขียนเว็บขึ้นมาเองอยู่แล้ว แต่ตอนนี้หาของฟรีใช้ไปก่อนครับ ถูๆ ไถๆ ไปก่อนครับ

วันนี้เราก็สามารถลงภาพเข้าไปในเว็บเราได้แล้ว ครั้งต่อไปเรามาดูเรื่องสีพื้นหลัง ทำBlackground แล้วก็เรื่องค่าสี RGB กันนะครับ

ไม่มีความคิดเห็น: