How to ตกแต่งนิยาย / ไอดี

ลำดับตอนที่ #28 : [CODE] แทรกรูปและลิงค์

โปรแกรมที่ใช้ ทำลงแพดหรือจะทำที่หน้าเว็บเลยก็ได้
ระดับความยาก 1/5 (สำหรับโค๊ดอย่างเดียว) 3/5 (สำหรับรายละเอียดโค๊ด)
บทความที่ควรอ่านก่อน วีธีการดู url รูปภาพ, วิธีลงโค๊ดทั้งแบบดิบและสุก หากต้องการศึกษารายละเอียดเพิ่มเติม ควรอ่านเรื่อง HTML ด้วย


** ด้านล่างเป็นวิธีใส่แบนเนอร์โดยใช้ html นะคะ สำหรับคนที่ต้องการความสะดวก สามารถใช้ดรีม หรือใช้ฟังก์ชั่นของเด็กดีในการใส่โดยตรงได้เลยค่ะ วิธีทำอยู่ที่ ไอดีดรีม - ใส่อุปกรณ์ให้ไอดี II
** สมาชิกเด็กดีข้ามไปอ่านที่ [เด็กดี] แทรกลิงค์/แบนเนอร์ แบบง่ายสุดๆ ได้เลยจ้า

คำสั่งพื้นฐาน
ลิงค์ : <a href="URL ที่จะลิงค์ไป">ข้อความหรือรูปภาพ</a>
รูปภาพ : <img src="URL รูป">
* สีเขียว คือส่วนที่เปลี่ยนค่าได้ตามต้องการ

ตัวอย่าง
ลองศึกษาดูนะคะ ไม่ยากหรอก

นิยายเราเองจ้า
โค๊ด <a href="http://my.dek-d.com/Writer/story/view.php?id=170740">นิยายเราเองจ้า</a>


โค๊ด <img src="http://h1.ripway.com/rubymoon/Banner/banner_rozeria_0.gif">

(แบนเนอร์)
โค๊ด <a href="http://my.dek-d.com/Writer/story/view.php?id=170740"><img src="http://h1.ripway.com/rubymoon/Banner/banner_rozeria_0.gif"></a>
*สังเกตว่า มันคือการเอา 2 แท็กมารวมกัน โดยเปิดลิงค์ก่อน แล้วใส่แท็กรูปภาพแทนที่จะเป็นข้อความ


รายละเอียดโค๊ด HTML
สำหรับศึกษาเพิ่มเติมค่ะ ไม่ค่อยมีอะไรมากหรอก ปกติที่ใช้กัน อ่านแค่ข้างบนก็พอค่ะ แต่ถ้าคุณอยากใส่คุณสมบัติเพิ่มเติมให้ลิงค์และรูปล่ะก็ ลองอ่านดูนะคะ คิดว่าคนไม่เป็นคอมก็น่าจะเข้าใจ เพราะค่อนข้างง่าย (ตามความเห็นเรา)

เริ่มที่ลิงค์ก่อน
แท็ก <a> เป็นแท็กที่ใช้ในการสร้างลิงค์ คุณสมบัติที่ใช้บ่อยมีอยู่ 2 อย่างคือ
- href เป็นเพจหรือหน้าที่ต้องการจะลิงค์ไป **แท็กจำเป็นที่ห้ามขาด**
- target บอกว่าจะเปิดเพจนั้นๆ ที่ไหน กำหนดได้ 4 แบบ
           _blank เปิดในหน้าต่างใหม่ **เป็นอันเดียวที่ใช้ในเด็กดี**
           _parent เปิดในเฟรมแม่ (กรณีที่มีเฟรม)
           _self เปิดในเฟรมที่ลิงค์นั้นอยู่ เป็นค่าเริ่มต้นของแท็ก <a>
           _top แทนที่เฟรมทั้งหมดด้วยเพจนั้นๆ
ถ้าไม่เข้าใจก็ไม่เป็นไรนะคะ เพราะปกติเราเองก็สนใจแค่ _blank เหอๆ

ตัวอย่าง
ลิงค์แรก : <a href="http://my.dek-d.com/Writer/story/view.php?id=170740">นิยายเราเองจ้า</a>
ลิงค์ที่2 : <a href="http://my.dek-d.com/Writer/story/view.php?id=170740" target="_blank">นิยายเราเองจ้า</a>
ลองคลิกดูค่ะ แล้วคุณจะรู้ถึงความแตกต่าง

จบเรื่องลิงค์แล้วค่ะ ง่ายรึเปล่า คราวนี้เรามาดูเรื่องรูปกัน
แท็ก <img> เป็นแท็กที่ใช้ในการสร้างรูป โดยเป็นแท็กที่ไม่ต้องการแท็กปิด คุณสมบัติที่ใช้บ่อยมีอยู่ 4 อย่างคือ
- src เป็น URL ของรูป
- alt ข้อความที่จะขึ้นแทน ในกรณีรูปใช้ไม่ได้
- height ความสูงรูป มีหน่วยเป็น px หรือเปอร์เซนต์
- width ความกว้างรูป มีหน่วยเป็น px หรือเปอร์เซนต์

ตัวอย่าง
: <img src="http://h1.ripway.com/rubymoon/Banner/banner_rozeria_0.gif">

: <img src="http://h1.ripway.com/rubymoon/Banner/banner_rozeria_3.gif" alt="Rozeria">

: <img src="http://h1.ripway.com/rubymoon/Banner/banner_rozeria_0.gif" height="50" width="100">
*หมายเหตุ รูปที่ 2 เราจงใจทำให้ URL รูปผิด เพื่อให้เห็นว่าจะเกิดอะไรขึ้นหากรูปไม่ขึ้น

จบแล้วค่า อ่านเฉยๆ อาจไม่รู้เรื่อง ไปลองทำดูนะ


Edit1:เพิ่มลิงค์ไปหน้าที่มีวิธีแทรกแบนเนอร์โดยใช้ดรีม
Edit2:เพิ่มลิงค์ไปหน้าที่มีวิธีแทรกแบนเนอร์โดยใช้กล่องคอมเมนท์