ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    How to ตกแต่งนิยาย / ไอดี

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

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

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×