แท็ก HTML ให้คุณนำสไตล์ไปใช้กับส่วนหนึ่งของหน้าเว็บหรือย่อหน้าได้ มักใช้เพื่อกำหนดสไตล์ข้อความในย่อหน้า เช่น โดยการเปลี่ยนสีของคำ แท็ก โดยค่าเริ่มต้นไม่มีรูปแบบ
เมื่อคุณเขียนโปรแกรมด้วย HTML คุณอาจตัดสินใจว่าต้องการจัดรูปแบบบางอย่างเฉพาะบนหน้าเว็บของคุณ ตัวอย่างเช่น คุณอาจต้องการเน้นคำบางคำในประโยคหรือลิงก์เฉพาะในรายการลิงก์
นั่นคือสิ่งที่ HTML ป้ายมาแล้วค่ะ เป็นคอนเทนเนอร์แบบอินไลน์ทั่วไปที่ให้คุณวลีเนื้อหาในเอกสารเว็บ โดยทั่วไปจะใช้แท็กเพื่อการจัดรูปแบบโดยเฉพาะอย่างยิ่งสำหรับการจัดรูปแบบข้อความ
กวดวิชานี้จะหารือพร้อมตัวอย่างวิธีใช้ HTML เพื่อจัดรูปแบบองค์ประกอบบนหน้าเว็บ เมื่ออ่านบทช่วยสอนนี้จบแล้ว คุณจะเป็นผู้เชี่ยวชาญในการใช้ HTML แท็ก.
HTML แท็ก
แท็ก HTML จัดการบางส่วนของหน้าเว็บ มักใช้ในองค์ประกอบ
เพื่อนำสไตล์ไปใช้กับส่วนเฉพาะของย่อหน้า ตัวอย่างเช่น คุณสามารถใช้ เพื่อเปลี่ยนสีของคำในย่อหน้า
โดยตัวมันเอง แท็กไม่มีการแสดงผลหรือค่าเริ่มต้น ซึ่งหมายความว่าหากคุณใช้แท็กโดยไม่มีแอตทริบิวต์ใดๆ แท็กนั้นจะไม่มีผลต่อการแสดงผลหน้าเว็บของคุณ
มักใช้กับ CSS เพื่อใช้รูปแบบเฉพาะกับองค์ประกอบเฉพาะหรือองค์ประกอบบนหน้าเว็บ ช่วยให้คุณนำสไตล์บางอย่างไปใช้กับหลายองค์ประกอบบนหน้าเว็บพร้อมกันได้อย่างง่ายดาย
HTML ไวยากรณ์
HTML สแปน tag มีทั้งองค์ประกอบเปิด () และปิด () เราสามารถใช้ไวยากรณ์ต่อไปนี้เพื่อใช้แท็ก :
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
<span></span>
HTML แท็กไม่มีแอตทริบิวต์เฉพาะแท็ก ตัวอย่างเช่น แท็ก มี "ความสูง" และ "ความกว้าง" เป็นแอตทริบิวต์เฉพาะแท็ก ไม่มีแอตทริบิวต์ประเภทนี้เนื่องจากใช้ CSS สำหรับการจัดสไตล์ แท็กรองรับแอตทริบิวต์ HTML ทั่วโลกทั้งหมด
คุณสามารถมองว่าแท็ก คล้ายกับ
ในส่วนต่อไปนี้ เราจะอธิบายตัวอย่างบางส่วนที่แสดงให้เห็นว่า แท็กทำงานใน HTML
แท็กตัวอย่าง HTML
มาดูตัวอย่างโค้ดบางส่วนที่ใช้ . กัน แท็กเพื่อจัดรูปแบบองค์ประกอบแบบอินไลน์ใน HTML ตัวอย่างแรกของเราจะใช้ แท็กในย่อหน้า; ตัวอย่างที่สองของเราจะใช้ในรายการ
HTML ในย่อหน้า
สมมติว่าเรากำลังออกแบบหน้าเว็บสำหรับร้านเบเกอรี่ในท้องถิ่น—Pringle and Sons Bakery หน้าเว็บนี้จะสรุปประวัติของร้านเบเกอรี่ คุณพริงเกิล เจ้าของร้านเบเกอรี่ ขอให้เราเน้นข้อเท็จจริงสำคัญบางประการด้วยข้อความสีแดง
เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:
index.html <p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p> styles.css .redText { color: red; }
รหัสของเราส่งคืน:

ในตัวอย่างของเรา เราเน้นคำว่า "ขนมอบแสนอร่อย" และ "หลายพัน" คุณพริงเกิลบอกเราว่าข้อกำหนดเหล่านี้มีความสำคัญ เราจึงสั่งให้โปรแกรมแสดงเป็นสีแดง
เรากำหนดสตริงข้อความที่อยู่ภายใน
แท็ก HTML ข้อความนี้สรุปประวัติของ Pringle and Sons Bakery จากนั้น เราใส่คำที่ต้องการให้ปรากฏเป็นสีแดงใน แท็ก
ในไฟล์ CSS ของเรา เราระบุว่าสีขององค์ประกอบใดๆ ที่กำหนดให้กับคลาส redText ควรเป็นสีแดง สิ่งนี้ทำให้เราสามารถเปลี่ยนสีของข้อความของเราเป็นสีแดงเมื่อเราใช้ แท็ก.
tag มีประโยชน์ในกรณีนี้เพราะเราต้องการเน้นเฉพาะคำบางคำในข้อความของเราเท่านั้น เราสามารถใช้การจัดรูปแบบข้อความสีแดงกับ
แท็กตัวเอง แต่นั่นจะทำให้ข้อความสีแดงทั้งย่อหน้า
HTML ในรายการ
สมมติว่า Pringle and Sons Bakery ขอให้เราเพิ่มรายการลงในเว็บไซต์ของตนพร้อมลิงก์ไปยังหน้าโซเชียลมีเดีย
The Bakery ตั้งข้อสังเกตว่าลิงก์ไปยังหน้า Twitter และ Facebook ของพวกเขามีความสำคัญเป็นพิเศษ เนื่องจากทีมงานมีความกระตือรือร้นมากที่สุดบนแพลตฟอร์มเหล่านั้น ดังนั้นพวกเขาต้องการให้เราเน้นลิงก์เหล่านั้นด้วยข้อความสีฟ้าอ่อน
เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:
index.html <ul> <li><span class="blue"><a href="twitter.com">Twitter</a></span></li> <li><span class="blue"><a href="facebook.com">Facebook</a></span></li> <li><a href="instagram.com">Instagram</a></li> </ul> styles.css .blue { background: lightblue; }
รหัสของเราส่งคืน:

ในโค้ด HTML ของเรา เราได้สร้างรายการแบบไม่เรียงลำดับโดยใช้
- แท็ก รายการนี้มีสามรายการ โดยแต่ละรายการอยู่ภายใน
- แท็ก
รายการสำหรับ Twitter และ Facebook อยู่ในแท็ก HTML Span ( และ ) แท็กช่วงเปิดสำหรับแต่ละรายการระบุแอตทริบิวต์คลาส ค่าของแอตทริบิวต์คลาสคือ “สีน้ำเงิน”
เรากำหนดรูปแบบที่เรียกว่า .blue ซึ่งจะเปลี่ยนสีพื้นหลังขององค์ประกอบใดๆ ก็ตามที่ใช้กับสีน้ำเงินอ่อน ซึ่งทำให้สีพื้นหลังของลิงก์ทั้งหมดที่มีคลาส CSS .blue ในโค้ด HTML ของเราเปลี่ยนเป็นสีน้ำเงินอ่อน
สีพื้นหลังที่เชื่อมโยงกับลิงก์ Instagram ของเราไม่มีการเปลี่ยนแปลง เนื่องจากเราไม่ได้ใส่ข้อความสำหรับลิงก์นั้นภายใน แท็ก
บทสรุป
HTML tag เป็นคอนเทนเนอร์ทั่วไปที่ใช้เพื่อนำสไตล์ไปใช้กับองค์ประกอบเฉพาะบนหน้า HTML โดยค่าเริ่มต้น แท็กไม่ทำอะไรเลย แต่สามารถใช้ร่วมกับ CSS เพื่อใช้สไตล์กับองค์ประกอบได้
เป็นการท้าทาย ให้กำหนดแท็ก ซึ่งทำให้คำในประโยคปรากฏในตัวพิมพ์ใหญ่ทั้งหมด คุณจะต้องใช้กฎ CSS เพื่อแปลงข้อความเป็นตัวพิมพ์ใหญ่ด้วยแท็ก
บทช่วยสอนนี้อภิปรายพร้อมตัวอย่างวิธีใช้ HTML <span> แท็กในรหัสของคุณ ตอนนี้คุณพร้อมที่จะเริ่มใช้ . แล้ว แท็กอย่างนักพัฒนาเว็บมืออาชีพ!
สำหรับคำแนะนำและการสนับสนุนเกี่ยวกับวิธีการเรียนรู้ HTML โปรดอ่านคู่มือ How to Learn HTML ฉบับเต็ม