องค์ประกอบ 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

<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 เพื่อสร้างแคนวาส องค์ประกอบนี้ต้องใช้โค้ด 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 เพิ่มเติมแล้ว สร้างสรรค์ผลงานดีๆ ต่อไป