องค์ประกอบ HTML เพิ่มเติม

ในกิจกรรมก่อนหน้านี้ คุณได้เรียนรู้เกี่ยวกับสิ่งต่อไปนี้

  • ข้อมูลพื้นฐานของแท็กและองค์ประกอบ HTML
  • วิธีการจัดโครงสร้างหน้าเว็บ
  • HTML เชิงความหมายและแนวทางปฏิบัติแนะนำ

สำหรับบทความนี้ คุณจะได้พัฒนาความรู้ด้าน HTML ต่อไปและครอบคลุมองค์ประกอบ HTML เพิ่มเติม

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

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

องค์ประกอบที่ยกข้อความมาอ้างอิง

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

ตัวอย่างนี้แสดงวิธีใช้องค์ประกอบ <blockquote> ซึ่งจะแสดงคำคมที่มีชื่อเสียงของมหาตมา คานธี มีคำกล่าวดีๆ มากมายที่ให้เนื้อหาและความหมายที่น่าจดจำ ลองนึกถึงบุคคลผู้สร้างแรงบันดาลใจที่คุณชื่นชอบและคำพูดของบุคคลเหล่านี้

ใช้องค์ประกอบ <blockquote> เมื่อใช้เครื่องหมายคําพูดและอ้างอิงข้อมูลจากแหล่งที่มา องค์ประกอบ <blockquote> สร้างการเยื้องและการจัดข้อความที่ไม่ซ้ำกันในงานนำเสนอ และใช้ทั้งแท็กเปิดและปิด <blockquote> มีประโยชน์อย่างยิ่งเมื่อใช้เครื่องหมายอัญประกาศที่ยาวขึ้นซึ่งบดบังข้อความหลายบรรทัด

คุณใช้องค์ประกอบต่างๆ ภายในองค์ประกอบ <blockquote> ได้เช่นกัน เช่น ส่วนหัว ย่อหน้า หรือรายการ

องค์ประกอบ <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

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

องค์ประกอบ <details> มีประโยชน์โดยใช้วิดเจ็ตที่เปิดเผยซึ่งมีข้อมูลเพิ่มเติม องค์ประกอบนี้มีฟังก์ชันการสลับในตัว ซึ่งผู้ใช้สามารถเปิดและปิดปุ่มเปิด/ปิดได้ เมื่อเปิดปุ่มสลับ เนื้อหาข้อมูลเพิ่มเติมจะขยายออกและให้ผู้ใช้อ่านได้ เมื่อปิดปุ่มสลับ ระบบจะซ่อนเนื้อหาของข้อมูลเพิ่มเติมจากผู้ใช้ หากต้องการตั้งชื่อวิดเจ็ต <details> ให้ใช้องค์ประกอบ <summary>

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

นี่คือองค์ประกอบ <figure> ในการใช้งานจริง จากตรงนี้ คุณจะเห็นว่า <figure> ซึ่งใช้ร่วมกับเอลิเมนต์ <figcaption> เพื่อยกระดับประสบการณ์การมองเห็นภาพได้

คุณจะเห็นรูปภาพทั่วทั้งอินเทอร์เน็ต รวมทั้งข้อมูลภาพที่เป็นประโยชน์อื่นๆ ตลอดเวลา องค์ประกอบที่มองเห็นจะช่วยดึงดูดความสนใจของผู้เข้าชม และสร้างประสบการณ์ของผู้ใช้ที่ยอดเยี่ยม องค์ประกอบ <figure> เป็นวิธีติดป้ายกำกับรูปภาพ ตาราง แผนภูมิ ฯลฯ ซึ่งทำงานโดยการสร้างเนื้อหาที่มีอยู่ในตัวเองโดยสัมพันธ์กับเนื้อหาหลัก

องค์ประกอบ <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

องค์ประกอบ <time> ให้ทั้งความหมายและความหมาย ช่วยให้ทำงานได้ดียิ่งขึ้นกับกิจกรรมต่างๆ เช่น การกำหนดเวลานัดหมายออนไลน์ การเผยแพร่วันที่และเวลาของบทความในบล็อก ที่เก็บถาวร ฯลฯ ตัวอย่างเว็บไซต์บางส่วนที่จะใช้องค์ประกอบ <time> ได้แก่ การใช้ Google ปฏิทิน การเผยแพร่บทความสดบนแพลตฟอร์ม หรือการอ่านคลังบทความออนไลน์ในอดีตจากเว็บไซต์ห้องสมุด

องค์ประกอบ <time> อ้างอิงเวลาและอาจแสดงถึงเวลาของนาฬิกาแบบ 24 ชั่วโมงหรือวันที่ที่เจาะจงซึ่งปรับตามเขตเวลาและตำแหน่งได้ องค์ประกอบนี้ต้องใช้ทั้งแท็กเปิดและปิด <time> และ </time> คุณสามารถเพิ่มแอตทริบิวต์ datetime เพื่อให้อ่านวันที่ในรูปแบบที่เครื่องอ่านได้

ข้อมูลเมตาของเอกสาร

<title>Sarah's Favorite Food Recipes</title>

ทุกครั้งที่คุณพิมพ์ URL ของเว็บไซต์ จะมีชื่อ <title> ที่อ่านได้ในแถบเบราว์เซอร์หรือแท็บหน้าเว็บ เป็นชื่อที่คุณเห็นสำหรับหน้าเว็บ องค์ประกอบนี้มีความสำคัญและใช้โดยเครื่องมือค้นหาเพื่อแสดงรายการหน้าเว็บที่เกี่ยวข้องในผลการค้นหา ความยาวของชื่ออาจแตกต่างกันไปจากแบบสั้นและอธิบาย ไปจนถึงยาวและสื่อความหมายมากขึ้น

สถานการณ์ตัวอย่าง: คุณมีหน้าเว็บที่กำลังคิดอยู่ แต่จำ URL ของเว็บไซต์ไม่ได้ พิมพ์คีย์เวิร์ดในเครื่องมือค้นหา เครื่องมือค้นหาจะช่วยติดตามหน้าเว็บที่คุณกำลังมองหา และคุณสามารถดูชื่อ <title> ที่ปรากฏในการค้นหา

องค์ประกอบเนื้อหาที่ฝัง

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

องค์ประกอบ <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

เมื่อช็อปปิ้งสินค้าออนไลน์เสร็จแล้วและคลิกตัวเลือกการชำระเงิน เช่น PayPal หรือ Apple Pay ระบบจะเพิ่มฟีเจอร์เหล่านี้ลงในหน้าเว็บที่มี <iframe> การดูแผนที่ออนไลน์เพื่อค้นหาธุรกิจในพื้นที่เป็นอีกประสบการณ์หนึ่งที่พบได้ทั่วไป คุณเพิ่มประสบการณ์ของผู้ใช้ประเภทนี้ในหน้าเว็บได้โดยใช้ iframe ในตัวอย่างข้างต้น คุณจะเห็น URL ของ Wikipedia ใน iframe ซึ่งมีชื่อว่า "Wikipedia"

องค์ประกอบ <iframe> ช่วยให้คุณแทรกเนื้อหาจากแหล่งที่มาอื่นและฝังเฟรมไว้ในหน้าเว็บได้ สร้างกรอบรูปสี่เหลี่ยมผืนผ้าและแสดงเนื้อหาในเบราว์เซอร์ เฟรมช่วยในการนำเสนอเลย์เอาต์รูปหน้าต่างภายในองค์ประกอบ <iframe> ซึ่งเป็นวิธีที่มีประสิทธิภาพในการเพิ่มเนื้อหาลงในหน้าเว็บเพื่อปรับปรุงประสบการณ์การใช้งาน

องค์ประกอบแบบฟอร์ม

<progress max="100" value="30"> 30% </progress>

เมื่อดูวิดีโอที่ยาวขึ้น บรรยาย หรือกรอกใบสมัครโดยละเอียด การมีแถบความคืบหน้าแบบภาพจะช่วยคุณติดตามความคืบหน้าได้ องค์ประกอบ <progress> มีประโยชน์สำหรับสถานการณ์ประเภทนี้

องค์ประกอบนี้จะแสดงเป็นแถบภาพที่มีสีพื้นหลัง แถบภาพอาจมีขนาดและสีพื้นหลังได้หลากหลาย ในแถบความคืบหน้า คุณจะเลือกใช้แอตทริบิวต์ max และ value ก็ได้ แอตทริบิวต์ max จะกำหนดจำนวนทศนิยม และแอตทริบิวต์ value จะบันทึกความคืบหน้าในงาน

การเขียนสคริปต์

<canvas id="canvas"></canvas>

หากต้องการวาดกราฟิกและภาพเคลื่อนไหวแบบเรียลไทม์ ให้ใช้องค์ประกอบ <canvas> วางองค์ประกอบ <canvas> ลงในหน้าเว็บ HTML เพื่อสร้าง Canvas องค์ประกอบนี้ต้องใช้โค้ด JavaScript เพื่อให้ฟังก์ชันการวาดและสร้างกราฟิกได้

องค์ประกอบเนื้อหาตาราง

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

องค์ประกอบ <table>

องค์ประกอบ <table> จะสร้างตาราง ซึ่งเป็นจุดเริ่มต้นสำหรับการเพิ่มองค์ประกอบเพิ่มเติมด้วยแถวและคอลัมน์ ตารางจะปรากฏบ่อยครั้งในหน้าเว็บ ซึ่งเป็นวิธีที่มีประโยชน์ในการจัดระเบียบและแสดงข้อมูล กรณีการใช้งานหนึ่งสำหรับการใช้องค์ประกอบ <table> คือการนำเสนอข้อมูลแบบตารางให้แก่ผู้ใช้ เช่น การจัดเรียงข้อมูลที่คุณอาจพบในสเปรดชีต

องค์ประกอบ <th>

องค์ประกอบ <th> คือส่วนหัวของกลุ่มเซลล์

องค์ประกอบ <tr>

องค์ประกอบ <tr> กำหนดแถวของเซลล์ภายในตาราง จากตรงนี้ คุณจะเพิ่มข้อมูลเซลล์ที่ต้องการได้

องค์ประกอบ <td>

องค์ประกอบ <td> จะสร้างเซลล์เพื่อเพิ่มเนื้อหาที่จำเป็น

บทสรุป

ในบทความนี้ คุณจะได้พบองค์ประกอบ HTML เพิ่มเติมและสร้างขึ้นจากทักษะการเขียนโค้ดของคุณ คุณได้ดูข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหา ข้อความในบรรทัด เนื้อหาที่ฝัง และองค์ประกอบตาราง ตอนนี้คุณได้เริ่มสร้างความเข้าใจเกี่ยวกับองค์ประกอบ HTML เพิ่มเติมแล้ว สร้างสรรค์ผลงานดีๆ ต่อไป