Tag: link

  • ข้อแตกต่างของ target แต่ละแบบ

    ข้อแตกต่างของ target แต่ละแบบ

    ข้อแตกต่างของ target แต่ละแบบนั้น ถ้าเราอ่านเพียงแค่คำอธิบาย โดย

    • _self แสดงผลในหน้าปัจจุบัน ปรกติทุก element จะมี target="_self" เป็นมาตรฐาน
    • _parent แสดงผลในระดับบนถัดไปของหน้าปัจจุบัน
    • _top แสดงผลในระดับบนสุดของหน้าปัจจุบัน
    • _blank แสดงผลในหน้าใหม่

    ก็ยังไม่ค่อยเข้าใจแน่ชัดเท่าไหร่ ผมเลยลองทำมาเป็นตัวอย่างให้ดูว่า ข้อแตกต่างของ target แต่ละแบบนั้น มันมีอะไรที่ต่างกันบ้าง โดยที่ผมสร้างไฟล์ขึ้นมา 4 ไฟล์ ประกอบด้วย

    • index.html
    • iframe-1.html
    • iframe-2.html
    • iframe-3.html

    โดยที่ index.html นั้น จะมี <body> ดังนี้

    <ul>
      <li>
        <a href="https://rabbitinblack.com" target="_self">_self Click</a>
      </li>
      <li>
        <a href="https://rabbitinblack.com" target="_parent">_parent Click</a>
      </li>
      <li>
        <a href="https://rabbitinblack.com" target="_top">_top Click</a>
      </li>
      <li>
        <a href="https://rabbitinblack.com" target="_blank">_blank Click</a>
      </li>
    </ul>

    หลังจากนั้นใน iframe-1.html จะมี iframe ที่เรียกใช้ index.html อยู่ ส่วน iframe-2.html จะเรียก iframe ที่มี iframe-1.html อยู่

    และ iframe-3.html นั้นก็จะเรียก iframe ที่มี iframe-2.html อยู่ ซึ่งผลลัพธ์จะออกมาประมาณนี้

    ข้อแตกต่างของ target แต่ละแบบ
    โดยผมใส่กรอบสีไว้ ให้แยกดูง่ายขึ้น

    จากรูปนั้น ถ้าเราคลิกที่ _self Click ตัว iframe ใน Frame 1 จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

    ถ้าเราคลิกที่ _parent Click ตัว iframe ใน Frame 2 จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

    ถ้าเราคลิกที่ _top Click ตัวหน้าเพจนั้น จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

    และถ้าเราคลิกที่ _blank Click จะมีการเปิดหน้าใหม่ตาม URL ที่เรากำหนดไว้ในลิงก์

    หรือสามารถเปิดดูตัวอย่าง และลองคลิกลิงก์ได้เองที่

    ตัวอย่างข้อแตกต่างของ target แต่ละแบบ

    https://rabbitinblack.com/html/target/iframe-3.html

    หวังว่าทุกคนจะเข้าใจวิธีการใช้งาน target ได้มากขึ้นนะครับ

  • วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์

    ในการเขียนบทความ หรือการทำเว็บของเรานั้น แน่นอนว่าเราต้องมีการเชื่อมต่อไปยังหน้าอื่น ๆ หรือเว็บอื่น ๆ บ้าง มาดูกันว่า เราสามารถสร้างลิงก์เพื่อใช้เชื่อมต่อกันอย่างไร

    วิธีใช้ WordPress : สร้างลิงก์ในบทความ

    ให้เราลากแถบเพื่อเลือกข้อความที่เราจะสร้างลิงก์ให้

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [1]

    หลังจากนั้นให้เลือก icon ที่รูปคล้าย ๆ โซ่ เพื่อที่เราจะสร้างลิงก์ให้ข้อความนั้น

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [2]

    กรอกข้อมูลต่าง ๆ ลงไป

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [3]

    โดย URL จะเป็นลิงก์ที่เราต้องการ และ Title จะเป็นข้อความที่ปรากฎตอนที่เรานำเม้าส์ไปวางไว้บนลิงก์นั้น

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [4]

    เรายังสามารถคลิ๊กที่คำว่า Or link to existing content เพื่อเลือกบทความในเว็บเราที่เราต้องจะลิงก์ไปถึง

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [5]

    ถ้าเราไม่ต้องการให้ข้อความนั้นเป็นลิงก์แล้ว เราสามารถคลิ๊กที่ icon รูปคล้าย ๆ โซ่แตก เพื่อจะลบลิงก์ของข้อความนั้นไป

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [6]

    ถ้าเรามองที่เมนูด้านซ้ายนั้น จะพบว่ามีเมนู Links มันมีไว้ทำอะไรมาดูกันครับ

    วิธีใช้ WordPress : สร้างลิงก์

    ลองมาสร้างกันดูนะครับ เลือก Add new เลยครับ

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [7]

    หลังจากนั้นก็กรอกข้อมูลต่าง ๆ

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [8]

    เราสามารถสร้าง Category เพื่อแบ่งประเภทของลิงก์ที่เราจะสร้างขึ้น

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [9]

    ยอมรับว่า ผมก็ยังไม่เข้าใจในส่วนของ Link Relationship เท่าไหร่เหมือนกันนะครับ แต่ถ้านำไปใช้คู่กับ jQuery น่าจะดีเหมือนกัน

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [10]

    และเมื่อเราสร้างเสร็จแล้ว มันจะไปปรากฎอยู่ที่ sidebar ของเว็บเราแบบนี้ครับ โดยชื่อ Category จะเป็นหัวข้อ และลิงก์ที่เราสร้างขึ้นเป็น List ดังตัวอย่าง

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [11]