Rabbitinblack

Tag: html

  • วิธีสร้าง accordion โดยไม่ต้องใช้ javascript

    วิธีสร้าง accordion โดยไม่ต้องใช้ javascript

    ในความคิดของหลาย ๆ คนคิดว่า ถ้าจะสร้าง accordion สำหรับใช้ในเว็บไซต์ เราต้องใช้ javascript ประกอบ แต่ที่จริงแล้ว ตัว html มี tag ที่สามารถใช้งานในลักษณะคล้ายกับ accordion ไว้ให้อยู่แล้ว tag นั้นก็คือ <details>

    โดย <details> นั้น จะใช้งานร่วมกับ <summary> และมีสถานะที่จะแสดงผลข้อมูล คือ open

    รูปแบบมาตรฐานของ <details> จะแสดงผลนำหน้าด้วยสามเหลี่ยมขนาดเล็ก และหมุนเป็นสามเหลี่ยมคว่ำ เพื่อแสดงสถานะการเปิด ปิด

    ส่วนข้อความหลังสามเหลี่ยมนั้น เป็นข้อความใน <summary>

    ตัวอย่างรูปแบบมาตรฐานของ <details>

    <details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

    ผลลัพธ์

    Details Something small enough to escape casual notice.

    ซึ่งถ้าเราต้องการให้มีสถานะเปิดแสดงผลตั้งแต่แรก ให้ใส่ open ลงไปใน <details> เลย

    <details open>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

    ผลลัพธ์

    Details Something small enough to escape casual notice.

    และเรายังสามารถเขียน css เพื่อมาตกแต่งหน้าตาของมันให้ดูสวยงามขึ้นได้อีกด้วย

    ตัวอย่าง accordion โดยไม่ต้องใช้ javascript

    เข้าใจได้ว่า สามารถใช้งานในระดับพื้นฐานได้ละ แต่ถ้าต้องการจะประยุกต์ใช้งานอะไรเพิ่มเติม คงต้องให้ javascript มาช่วยเหลืออยู่ดี

  • อะไรคือ Empty Element

    อะไรคือ Empty Element

    สำหรับคำถามว่า อะไรคือ Empty Element เราสามารถบอกได้คร่าว ๆ คือ element ที่จะไม่มีอะไรอยู่ด้านใน

    ตัวอย่าง element ที่มีอะไรอยู่ด้านใน เช่น

    <div>div มีอะไรอยู่ด้านใน</div>
<p>p มีอะไรอยู่ด้านใน</p>
<a href="#">a มีอะไรอยู่ด้านใน</a>

    แล้วอะไรเป็น empty element ยกตัวอย่างง่ายที่สุด ที่คิดว่าทุกคนเคยใช้งานมันอยู่แล้วคือ

    <img src="pic.jpg" alt="รูปภาพ">

    ใช่แล้ว <img> นั้นเป็น empty element และที่สำคัญ empty element นั้น เราจะไม่มี closing tag

    <img src="pic.jpg" alt="รูปภาพ"></img> // แบบนี้ผิด ห้ามใช้

    แล้วมี element ไหนที่เป็น empty element บ้างละ ตามรายการนี้เลยครับ

    • <area>
    • <base>
    • <br>
    • <col>
    • <embed>
    • <hr>
    • <img>
    • <input>
    • <link>
    • <meta>
    • <param>
    • <source>
    • <track>
    • <wbr>

    ส่วนแต่ละ element ใช้งานยังไง ลองค้น ๆ ดูในเว็บเราดูละกัน น่าจะมีเขียนถึงอยู่บ้างละ

  • ข้อแตกต่างของ 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 ได้มากขึ้นนะครับ

  • [HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

    [HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

    วันนี้ไปเปิดเจอ Slide ของคุณ Chris Coyier เจ้าของเว็บ CSS-Tricks ได้พูดไว้ในหัวข้อ What We Don’t Know เลยเอามาแชร์ให้ได้อ่าน ได้ดูกันนะครับ >_<

    ตามไปอ่านบทความเต็ม ๆ ได้ที่ My Slides from InControl 2012: What We Don’t Know
  • อยากเรียน Web Design ฟรี ดูใน iTunes ดิ

    อยากเรียน Web Design ฟรี ดูใน iTunes ดิ

    ใน iTunes นั้นจะมีส่วนของ Podcasts ซึ่งมีหลายเรื่องที่เราสนใจไว้ให้ได้ดู ได้ฟังแบบฟรีบ้าง เสียเงินบ้าง แต่เรามาหาแบบฟรีกันดีกว่า ลองไปดูว่ามีอันไหนบ้าง

    Think Vitamin Radio

    View in iTunes : Think Vitamin Radio

    Web Designer Podcast

    View in iTunes : Web Designer Podcast

    Web Design TV

    View in iTunes : Web Design TV

    Sitepoint

    View in iTunes : Sitepoint

    This Week in Photography

    View in iTunes : This Week in Photography

    Web Design Tuts+

    View in iTunes : Web Design Tuts+

    Photoshop Webdesign.de

    View in iTunes : Photoshop Webdesign.de

    WebDevDesign

    View in iTunes : WebDevDesign

    Freelance Radio

    View in iTunes : Freelance Radio

    Mac Tips and Tricks

    View in iTunes : Mac Tips and Tricks

    MailChimp Academy

    View in iTunes : MailChimp Academy

    37signals Podcast

    View in iTunes : 37signals Podcast

    AppClinic – graphic design tutorials

    View in iTunes : AppClinic – graphic design tutorials

    Founders Talk

    View in iTunes : Founders Talk

    Web Design 101

    View in iTunes : Web Design 101

    CreativeXpert Design Interviews

    View in iTunes : CreativeXpert Design Interviews

    Voices of Design

    View in iTunes : Voices of Design

    Xcode Quick Tips

    View in iTunes : Xcode Quick Tips

    jQuery for Designers

    View in iTunes : jQuery for Designers

    Facebook 101

    View in iTunes : Facebook 101

    CSS-Tricks Screencast

    View in iTunes : CSS-Tricks Screencast

    Pragmatic Podcasts

    View in iTunes : Pragmatic Podcasts

    ที่มา : 22 Memorable Podcasts Focused on Web Design
  • [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย

    ไม่รู้ว่าหลาย ๆ คนเป็นเหมือนผมหรือเปล่า แต่ผมเนี่ยโคตรขี้เกียจจะเขียน Code HTML ที่มันเกี่ยวกับ Form ยังไงก็ไม่รู้บอกไม่ถูก เวลาตัดเว็บแล้วเจอ Form เนี่ยจะตัดช้าลงไปอย่างไม่น่าเชื่อ แล้วผมก็ไปเจอเว็บนี้ FormBakery ลองไปดูว่า FormBakery มันทำอะไรเกี่ยวกับ Form ให้เรานะครับ

    FormBakery

    มาเริ่มต้นอบ Form จากเตากัน จะเห็นมีส่วนผสม 5 อย่างให้เราเลือก

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [1]

    เราอยากได้ส่วนผสมไหน ก็ลากมาวางเลยครับ

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [2]

    เราสามารถปรับเปลี่ยนข้อความต่าง ๆ รวมถึง options ให้กับส่วนผสมเราได้

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [3]

    หลังจากที่ปรับแต่งจนเราพอใจแล้ว ก็กด Export เลยครับ

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [4]

    เราจะได้ Code HTML CSS ออกมาให้ใช้งานแล้วครับ

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [5]

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [6]

    แต่ถ้าเป็นส่วนของ javascript และ php นั้นเราต้องจ่ายเงินเพิ่ม เพื่อที่จะรับ Code ในส่วนนั้น

    [HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย [7]

    แต่สำหรับผม ผมต้องการแค่ HTML CSS ดังนั้น FormBakery ก็ช่วยในสิ่งที่ผมต้องการครบแล้ว

    ถ้าอยากจะไปลองอบ Form ของตัวเองดู ก็ไปที่ : FormBakery เลยครับ