หลักสูตร IT พื้นฐาน HTML 011_ข้อความ

HTML มีแท็กข้อความจำนวนมากให้เราใช้ในการสร้างเว็บเพจ แท็กเหล่านี้สามารถช่วยเราจัดระเบียบและจัดรูปแบบเนื้อหาข้อความของเราได้ดีขึ้น ต่อไปนี้คือแท็กข้อความ HTML ที่ใช้บ่อย

หัวข้อ

องค์ประกอบหัวข้อใช้สำหรับกำหนดหัวข้อหรือหัวข้อย่อยของเอกสาร HTML โดยปกติแล้วจะแสดงถึงลำดับชั้นของโครงสร้างเอกสาร องค์ประกอบหัวข้อมี 6 ระดับตั้งแต่ h1 ถึง h6 ยิ่งระดับสูงขึ้นเท่าไร ความสำคัญของหัวข้อก็ยิ่งสูงขึ้น

ตัวอย่าง:

1
<h1>นี่คือหัวข้อ h1</h1>
2
<h2>นี่คือหัวข้อ h2</h2>
3
...
4
<h6>นี่คือหัวข้อ h6</h6>

ผลลัพธ์:

[!สรุป]

• โปรดตรวจสอบให้แน่ใจว่า องค์ประกอบหัวข้อ ใช้เฉพาะสำหรับหัวข้อเท่านั้น ไม่ควรใช้ องค์ประกอบหัวข้อ เพียงเพื่อตัวหนาหรือตัวอักษรใหญ่
• เครื่องมือค้นหาใช้หัวข้อเพื่อจัดทำดัชนีโครงสร้างและเนื้อหาของเว็บเพจของคุณ
• การใช้องค์ประกอบหัวข้ออย่างถูกต้องจะทำให้หน้าเว็บอ่านง่ายขึ้น เข้าถึงได้มากขึ้น และเป็นประโยชน์ต่อ SEO
• คุณควรใช้ h1 เป็นหัวข้อหลัก เพียงตัวเดียว (สำคัญที่สุด) ตามด้วย h2 (รองลงมา) จากนั้น h3 เป็นต้น

ย่อหน้า

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

ตัวอย่าง:

1
<p>นี่คือย่อหน้า</p>
2
<p>นี่คือย่อหน้าอื่น</p>

ผลลัพธ์:

[!สรุป]

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

ไหเปอร์ลิงก์

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

ตัวอย่าง:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

ผลลัพธ์:

แอตทริบิวต์ไฮเปอร์ลิงก์

• href: ระบุ URL ของเป้าหมายของลิงก์ นี่คือแอตทริบิวต์ที่สำคัญที่สุดของลิงก์ อาจเป็น URL ของเว็บเพจอื่น URL ของไฟล์ หรือ URL ของทรัพยากรอื่นๆ
• target (ไม่บังคับ): ระบุวิธีการเปิดลิงก์ในเบราว์เซอร์ ค่าทั่วไปได้แก่ _blank (เปิดลิงก์ในแท็บหรือหน้าต่างใหม่) และ _self (เปิดลิงก์ในแท็บหรือหน้าต่างปัจจุบัน ค่าเริ่มต้น)
• title (ไม่บังคับ): ให้ข้อมูลข้อความของลิงก์ โดยปกติจะแสดงเมื่อเมาส์วางอยู่บนลิงก์
• rel (ไม่บังคับ): ระบุความสัมพันธ์กับเป้าหมายของลิงก์ เช่น nofollow (ไม่ติดตาม), noopener (ไม่เปิดบริบทใหม่), noreferrer (ไม่ส่งต่อข้อมูลอ้างอิง) เป็นต้น
• class: ระบุคลาส CSS ของลิงก์
• id: ระบุ ID CSS ของลิงก์

แองเคอร์ลิงก์

ในเว็บเพจที่ยาว เราอาจต้องการสร้างลิงก์ไปยังส่วนใดส่วนหนึ่งภายในหน้าเว็บ สามารถทำได้ผ่านแองเคอร์ลิงก์ ก่อนอื่นเราต้องใช้แอตทริบิวต์ name หรือ id ของแท็ก <a> เพื่อทำเครื่องหมายตำแหน่งเป้าหมาย จากนั้นในแอตทริบิวต์ href ของลิงก์ใช้ # ตามด้วยค่า name หรือ id ของเป้าหมายเพื่อสร้างลิงก์

ตัวอย่าง:

1
<a href="#a1">ข้ามไปที่ a1</a>
2
<!-- ละเว้นเนื้อหาที่เพียงพอที่จะเลื่อนหน้าได้หรือ <br> -->
3
<a name="a1">เนื้อหาบางส่วน</a>

ผลลัพธ์:

คลิกไฮเปอร์ลิงก์ “ข้ามไปที่ a1” หน้าเว็บจะข้ามไปยังส่วน “เนื้อหา a1”

ลิงก์อีเมล

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

ตัวอย่าง:

1
<a href="mailto:757118@qq.com">ส่งอีเมลไปที่ 757118@qq.com</a>

ผลลัพธ์:

คลิกไฮเปอร์ลิงก์นี้ ระบบจะเริ่มต้นโปรแกรมอีเมลเริ่มต้นและสร้างอีเมลใหม่ที่ส่งถึง 757118@qq.com

[!สรุป]

• เมื่อคุณเลื่อนเมาส์ไปที่ลิงก์บนเว็บเพจ ลูกศรจะเปลี่ยนเป็นมือเล็กๆ
• ไฮเปอร์ลิงก์ไม่จำเป็นต้องเป็นข้อความเสมอไป รูปภาพหรือองค์ประกอบ HTML อื่นๆ ก็สามารถเป็นลิงก์ได้
• โดยค่าเริ่มต้น ลิงก์จะปรากฏในเบราว์เซอร์ในรูปแบบดังต่อไปนี้: ลิงก์ที่ยังไม่เข้าชมจะแสดงเป็นตัวอักษรสีน้ำเงินและมีขีดเส้นใต้ ลิงก์ที่เข้าชมแล้วจะแสดงเป็นสีม่วงและมีขีดเส้นใต้ เมื่อคลิกลิงก์ จะแสดงเป็นสีแดงและมีขีดเส้นใต้

ขึ้นบรรทัดใหม่

องค์ประกอบขึ้นบรรทัดใหม่ <br> ใช้สำหรับแทรกอักขระขึ้นบรรทัดใหม่ในข้อความ บังคับให้ข้อความขึ้นบรรทัดใหม่

ตัวอย่าง:

1
นี่คือข้อความหนึ่งบรรทัด<br>นี่คือข้อความอีกบรรทัด

ผลลัพธ์:

[!สรุป]

• เครื่องหมายทับ / ในแท็ก <br> เป็นตัวเลือก ใน HTML 4 แท็ก <br /> ต้องมีเครื่องหมายทับ; ใน HTML 5 เครื่องหมายทับเป็นตัวเลือก

ตัวหนา

องค์ประกอบ <b> เป็นแท็กสไตล์ข้อความพื้นฐานที่ใช้สำหรับตั้งค่าข้อความเป็นตัวหนา แต่ไม่มีความหมายของการเน้นข้อความ องค์ประกอบ <strong> เป็นแท็กเชิงความหมายที่ใช้สำหรับแสดงการเน้นข้อความ โดยปกติเบราว์เซอร์จะแสดงเป็นตัวหนา

ตัวอย่าง:

1
นี่คือข้อความธรรมดา
2
<b>นี่คือข้อความตัวหนา</b>
3
<strong>นี่คือข้อความตัวหนาที่มีความหมายการเน้น</strong>

ผลลัพธ์:

ตัวเอียง

องค์ประกอบ <i> ใช้สำหรับแสดงผลตัวเอียงของข้อความ แต่ไม่มีความหมายของการเน้นข้อความ องค์ประกอบ <em> ใช้สำหรับแสดงข้อความตัวเอียง โดยปกติใช้สำหรับเน้นความสำคัญของข้อความหรือสร้างผลกระทบทางสายตา

ตัวอย่าง:

1
นี่คือข้อความธรรมดา
2
<i>นี่คือข้อความตัวเอียง</i>
3
<em>นี่คือข้อความตัวเอียงที่มีความหมายการเน้น</em>

ผลลัพธ์:

ขีดเส้นใต้

องค์ประกอบขีดเส้นใต้ <u> ใช้สำหรับแสดงข้อความที่มีขีดเส้นใต้

ตัวอย่าง:

1
นี่คือข้อความที่มี<u>ขีดเส้นใต้</u>

ผลลัพธ์:

[!สรุป]

• ใน HTML 5 องค์ประกอบขีดเส้นใต้ <u> ถูกยกเลิกแล้ว ซึ่งหมายความว่ามันยังคงเป็นองค์ประกอบ HTML ที่ถูกต้อง แต่ไม่แนะนำให้ใช้

ขีดฆ่า

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

ตัวอย่าง:

1
นี่คือข้อความที่มี<del>ขีดฆ่า</del>

ผลลัพธ์:

[!สรุป]

• ใน HTML5 องค์ประกอบขีดฆ่า <del> ถูกยกเลิกแล้ว ซึ่งหมายความว่ามันยังคงเป็นองค์ประกอบ HTML ที่ถูกต้อง แต่ไม่แนะนำให้ใช้

ไฮไลต์

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

ตัวอย่าง:

1
นี่คือข้อความที่<mark>ไฮไลต์</mark>

ผลลัพธ์:

ตัวห้อยและตัวยก

องค์ประกอบ <sub> แสดงตัวห้อย (subscript) ของข้อความ องค์ประกอบ <sup> แสดงตัวยก (superscript) ของข้อความ องค์ประกอบตัวห้อยและตัวยกมักใช้ในสถานการณ์เช่น คณิตศาสตร์ สูตรเคมี วันที่ อุณหภูมิ เป็นต้น

ตัวอย่าง:

1
H<sub>2</sub>O คือสูตรโมเลกุลของน้ำ
2
2<sup>10</sup> เท่ากับ 1024

ผลลัพธ์: