ในกิจกรรมก่อนหน้านี้ คุณได้เรียนรู้เกี่ยวกับสิ่งต่อไปนี้
- ข้อมูลพื้นฐานของแท็กและองค์ประกอบ 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 เพิ่มเติมแล้ว สร้างสรรค์ผลงานดีๆ ต่อไป