HTML Span:A Guide for Beginners

ในส่วนต่อไปนี้ เราจะอธิบายตัวอย่างบางส่วนที่แสดงให้เห็นว่า แท็กทำงานใน 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 ฉบับเต็ม