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

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

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 1062
    จำนวนคนให้กำลังใจ : 0 ครั้ง
    8 ก.ค. 52


โปรแกรมที่ใช้ ทำลงแพดหรือจะทำที่หน้าเว็บเลยก็ได้
ระดับความยาก 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">

Rozeria : <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:เพิ่มลิงค์ไปหน้าที่มีวิธีแทรกแบนเนอร์โดยใช้กล่องคอมเมนท์

522 ความคิดเห็น

  1. #451 •••^^PooM^^••• (@poommy100) (จากตอนที่ 28)
    วันที่ 2 พฤษภาคม 2553 / 21:39
    <a href="http://my.dek-d.com/Writer/story/view.php?id=170740">นิยายเราเองจ้า</a>
    #451
    0
  2. #450 •••^^PooM^^••• (@poommy100) (จากตอนที่ 28)
    วันที่ 2 พฤษภาคม 2553 / 21:37
    <a href="http://writer.dek-d.com/poommy100/writer/view.php?id=601584">นิยายเราเองจ้า</a>
    #450
    0
  3. #449 •••^^PooM^^••• (@poommy100) (จากตอนที่ 28)
    วันที่ 2 พฤษภาคม 2553 / 21:36
    <img src="http://image.dek-d.com/23/622671/104671052">
    #449
    0
  4. #448 •••^^PooM^^••• (@poommy100) (จากตอนที่ 28)
    วันที่ 2 พฤษภาคม 2553 / 21:35
    #448
    0
  5. #447 •••^^PooM^^••• (@poommy100) (จากตอนที่ 28)
    วันที่ 2 พฤษภาคม 2553 / 21:31
    <a href="http://writer.dek-d.com/poommy100/writer/view.php?id=601584">นิยายเราเองจ้า</a>
    #447
    0
  6. #446 •••^^PooM^^••• (@poommy100) (จากตอนที่ 28)
    วันที่ 2 พฤษภาคม 2553 / 21:27
    <a href="http://writer.dek-d.com/poommy100/writer/view.php?id=601584"><img src="http://image.dek-d.com/23/622671/104671052"></a>
    #446
    0
  7. #445 •••^^PooM^^••• (@poommy100) (จากตอนที่ 28)
    วันที่ 2 พฤษภาคม 2553 / 21:25
    <a href="http://writer.dek-d.com/poommy100/writer/view.php?id=601584"><img src="http://image.dek-d.com/23/622671/104671052"></a>
    #445
    0
  8. วันที่ 20 กรกฎาคม 2552 / 00:38
    #415
    0
  9. #414 ปักษาเตโช (@pasar) (จากตอนที่ 28)
    วันที่ 31 กรกฎาคม 2552 / 21:57
    #414
    0
  10. วันที่ 7 กรกฎาคม 2552 / 21:26
    ใส่ลิ๊งค์ยังไงอ่า ทำไม่ถูกเลย วิธีการใส่ลงในรูปอ่า
    #406
    0
  11. วันที่ 21 มิถุนายน 2552 / 17:18

    เอ้อ...เอาลงไม่ติดอ่ะ

    #399
    0
  12. #382 Princess.Mafia (@amaetiss) (จากตอนที่ 28)
    วันที่ 15 เมษายน 2552 / 20:47





    ขอบคุณค่ะ

    #382
    0
  13. #368 555 (จากตอนที่ 28)
    วันที่ 9 กุมภาพันธ์ 2552 / 02:37

    ทำไงอ่า
    #368
    0
  14. #367 555 (จากตอนที่ 28)
    วันที่ 9 กุมภาพันธ์ 2552 / 02:35
    #367
    0
  15. #366 555 (จากตอนที่ 28)
    วันที่ 9 กุมภาพันธ์ 2552 / 02:34
    #366
    0
  16. #362 ChaY3n (@k123456789) (จากตอนที่ 28)
    วันที่ 24 ธันวาคม 2551 / 07:16

    มันก็เป็นนะค๊ะ แต่ ทำไมมันไม่กระพิบอ่าทั้งที่ตอนทำมันยังกระพิบอยู่เล้ย

    #362
    0
  17. #361 ChaY3n (@k123456789) (จากตอนที่ 28)
    วันที่ 24 ธันวาคม 2551 / 07:14
                 
    #361
    0
  18. #344 แพร (จากตอนที่ 28)
    วันที่ 8 ตุลาคม 2551 / 21:21
    <a href="http://my.dek-d.com/a_t_ruby/story/viewlongc.php?id=237197&chapter=28">มาแต่งไอดีกันเถอะ>_<!!~</a>
    #344
    0