Category: HTML

HTML Text Formatting เป็นการใช้แท็ก (Tags) ในภาษา HTML เพื่อจัดรูปแบบข้อความให้มีลักษณะต่าง ๆ เช่น ตัวหนา, ตัวเอียง, ขีดเส้นใต้, เปลี่ยนขนาดตัวอักษร, หรือสีของข้อความ เป็นต้น การใช้แท็กเหล่านี้ช่วยให้เนื้อหาดูมีความชัดเจน และสร้างความเน้นในส่วนที่ต้องการให้ผู้ใช้สนใจ

ตัวอย่างแท็กที่ใช้สำหรับ Text Formatting

<b> (Bold) – ใช้ทำให้ข้อความเป็นตัวหนา

<b>ข้อความนี้เป็นตัวหนา</b>

ผลลัพธ์: ข้อความนี้เป็นตัวหนา

<strong> – เป็นอีกแท็กหนึ่งที่ใช้ทำตัวหนา มีความหมายเชิงเน้นความสำคัญของข้อความ

<strong>ข้อความนี้มีความสำคัญ</strong>

ผลลัพธ์: ข้อความนี้มีความสำคัญ

การใช้ style ใน HTML เป็นวิธีที่ช่วยเพิ่มความสวยงามและการจัดรูปแบบของเนื้อหาในหน้าเว็บ โดยปกติแล้วเราจะใช้ style เพื่อปรับแต่งองค์ประกอบต่างๆ เช่น สี ขนาด การจัดเรียงตำแหน่ง ตัวอักษร ฯลฯ ในหน้านั้น

วิธีการใช้ style ใน HTML

เราสามารถเพิ่มการจัดแต่งผ่าน style ได้ 3 วิธีหลักๆ

1. Inline Style การเพิ่มสไตล์ลงไปในแท็ก HTML โดยตรง
2. Internal Style Sheet การเพิ่มสไตล์ไว้ใน <style> ภายในไฟล์ HTML
3. External Style Sheet การเรียกไฟล์ CSS ภายนอกเพื่อใช้สไตล์

1. Inline Style

การใช้สไตล์แบบ Inline จะเขียนไว้ในแท็ก HTML โดยใช้แอตทริบิวต์ style เช่น

<p style="color: red; font-size: 20px;">This is a red text.</p>

ในตัวอย่างนี้ ข้อความใน <p> จะมีสีแดงและขนาดตัวอักษร 20px

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

โครงสร้างของแท็ก <a> มีดังนี้

<a href="URL ที่ต้องการลิงก์ไป">ข้อความหรือเนื้อหาภายในลิงก์</a>

แอตทริบิวต์ที่สำคัญของ <a>

href (Hypertext Reference)

• ใช้ระบุ URL หรือที่อยู่ปลายทางของลิงก์

• หากต้องการลิงก์ไปที่หน้าเว็บอื่น หรือไฟล์ภายนอก

<a href="https://www.example.com">ไปที่ Example</a>

• หากต้องการลิงก์ไปที่ไฟล์ในเครื่องหรือไฟล์ภายในเว็บไซต์

<a href="images/picture.jpg">ดูรูปภาพ</a>

แท็ก <hr> ใน HTML ใช้เพื่อสร้างเส้นคั่นแนวนอนในหน้าเว็บ (horizontal rule) โดยไม่มีการแสดงผลเนื้อหาภายในแท็ก เป็นแท็กที่ไม่ต้องการปิดหรือมีเนื้อหาใด ๆ ข้างใน (self-closing tag) ลักษณะการทำงานหลักของแท็กนี้คือการแบ่งส่วนต่าง ๆ ของเนื้อหา หรือแยกเนื้อหาบางส่วนออกจากกัน เพื่อเพิ่มความชัดเจนให้กับการจัดระเบียบข้อมูลในหน้าเว็บ

โครงสร้างของแท็ก <hr>

<hr>

คุณสมบัติหลักของ <hr>

สร้างเส้นคั่นแนวนอน ปรากฏเป็นเส้นแนวนอนในหน้าเว็บเพื่อแบ่งเนื้อหา

ไม่มีเนื้อหา แท็ก <hr> ไม่มีการแสดงผลข้อความหรือข้อมูลใด ๆ ภายใน มันเป็นเพียงเส้นคั่นเท่านั้น

ไม่มีปิดแท็ก เป็น self-closing tag หมายความว่าไม่ต้องมีการปิดแท็ก (ไม่มี </hr>)

การกำหนดสไตล์ให้กับ <hr> ด้วย CSS

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

<hr style="border: 2px solid red; width: 50%; margin: 20px 0;">

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

คุณสมบัติและการใช้งานของ <br>

สร้างการขึ้นบรรทัดใหม่ในเนื้อหา

เมื่อคุณใช้แท็ก <br>, เนื้อหาที่แสดงผลจะถูกขึ้นบรรทัดใหม่ทันทีหลังจากแท็กนี้

This is the first line.<br>
This is the second line.

ผลลัพธ์ที่ได้บนเบราว์เซอร์

This is the first line.
This is the second line.

การสร้างย่อหน้าด้วยแท็ก <p> เป็นวิธีพื้นฐานใน HTML สำหรับการแสดงผลเนื้อหาในรูปแบบย่อหน้า (paragraph) ซึ่งช่วยจัดระเบียบข้อความให้อ่านง่ายและมีความชัดเจน การใช้งานแท็ก <p> เป็นส่วนหนึ่งของการสร้างโครงสร้างที่ดีสำหรับเนื้อหาบนหน้าเว็บเพจ

โครงสร้างพื้นฐานของแท็ก <p>

แท็ก <p> เป็นแท็กที่มีลักษณะเป็นคู่ โดยประกอบด้วยแท็กเปิด <p> และแท็กปิด </p> ดังนี้:

<p>เนื้อหาของย่อหน้าจะอยู่ตรงนี้</p>

ข้อความใดที่อยู่ระหว่างแท็กเปิดและแท็กปิดจะถูกแสดงผลเป็นย่อหน้าหนึ่งย่อหน้า

แท็ก <h1> ถึง <h6> ใน HTML ใช้สำหรับการสร้างหัวข้อ (headings) ในเนื้อหาของหน้าเว็บ โดยจะแบ่งระดับของความสำคัญของหัวข้อตามลำดับจากมากไปหาน้อย ซึ่งมีผลต่อการแสดงผลทั้งด้านขนาดตัวอักษรและความสำคัญในแง่ของโครงสร้างเอกสารและ SEO (Search Engine Optimization) ดังนี้

<h1> หัวข้อหลัก (Main Heading)

• ลักษณะ <h1> ใช้สำหรับหัวข้อที่สำคัญที่สุดในหน้าเว็บ หนึ่งหน้าเว็บควรมี <h1> เพียงแท็กเดียวเพื่อความชัดเจนของโครงสร้าง
• ขนาดตัวอักษร ขนาดใหญ่ที่สุดในบรรดาหัวข้อ
• SEO เป็นหัวข้อที่เครื่องมือค้นหาจะให้ความสำคัญมากที่สุด

ตัวอย่าง

<h1>Welcome to My Website</h1>

HTML Attributes เป็นคุณสมบัติที่ใช้เพิ่มข้อมูลหรือกำหนดพฤติกรรมให้กับองค์ประกอบ (Elements) ในเอกสาร HTML เพื่อให้สามารถปรับแต่งลักษณะการทำงานและการแสดงผลขององค์ประกอบนั้นๆ ได้อย่างละเอียดและยืดหยุ่นมากขึ้น ในบทความนี้เราจะมาอธิบายเกี่ยวกับ HTML Attributes อย่างละเอียด ตั้งแต่พื้นฐานจนถึงการใช้งานขั้นสูง

โครงสร้างพื้นฐานของ HTML Attributes

องค์ประกอบใน HTML จะประกอบด้วยแท็กเปิด (Opening Tag) และแท็กปิด (Closing Tag) ซึ่งภายในแท็กเปิดจะสามารถระบุคุณสมบัต diversely using attributes. รูปแบบทั่วไปของการใช้งาน HTML Attributes คือ

<tagname attribute1="value1" attribute2="value2">เนื้อหา</tagname>

ตัวอย่าง

<a href="https://www.example.com" target="_blank">เยี่ยมชมเว็บไซต์</a>

ในตัวอย่างนี้

• a คือแท็กสำหรับลิงก์
• href และ target คือ attributes
• "https://www.example.com" และ "_blank" คือค่าของ attributes เหล่านั้น

HTML (Hypertext Markup Language) เป็นภาษาหลักที่ใช้ในการสร้างโครงสร้างของเว็บเพจ โดย HTML จะประกอบด้วย “องค์ประกอบ” หรือ “elements” ซึ่งใช้ในการจัดระเบียบและกำหนดเนื้อหาภายในเว็บเพจ องค์ประกอบเหล่านี้จะประกอบด้วย “แท็ก” ที่เริ่มและจบการทำงาน (ยกเว้นบางกรณีที่เป็น self-closing) มาดูกันว่า HTML elements ที่สำคัญและพื้นฐานมีอะไรบ้าง

<!DOCTYPE html>

• เป็นการประกาศว่าเอกสารนี้ใช้ HTML5 ซึ่งเป็นเวอร์ชันล่าสุดของ HTML
• คำสั่งนี้ไม่ได้เป็น element แต่เป็น declaration ที่บอกเบราว์เซอร์ให้แสดงผลเนื้อหาโดยใช้มาตรฐานของ HTML5

<html>

• เป็น root element ที่ครอบคลุมเนื้อหาทั้งหมดของเว็บเพจ
• องค์ประกอบทุกอย่างในเว็บเพจต้องอยู่ภายในแท็ก <html> นี้

<html>
   <!-- Content goes here -->
</html>

ในเอกสาร HTML มีแท็กหลักๆ ที่ทำหน้าที่ในการจัดโครงสร้างของเอกสาร ได้แก่ <html>, <head>, และ <body> แต่ละแท็กมีบทบาทที่สำคัญแตกต่างกันไป ซึ่งสามารถอธิบายได้อย่างละเอียดดังนี้

แท็ก <html>

แท็ก <html> เป็นแท็กหลักสุดที่ครอบคลุมเนื้อหาทั้งหมดของหน้าเว็บ มันเป็น “ราก” ของเอกสาร HTML และบอกเบราว์เซอร์ว่าข้อมูลทั้งหมดภายในแท็กนี้คือเอกสาร HTML

โครงสร้าง

<html>
  <!-- ส่วนต่างๆ ของ HTML จะอยู่ในนี้ -->
</html>

หน้าที่หลัก

• ครอบคลุมทุกเนื้อหาที่เกี่ยวข้องกับ HTML ในหน้าเว็บ
• ช่วยให้เบราว์เซอร์เข้าใจว่าเอกสารนี้เป็นไฟล์ HTML
• โดยทั่วไป จะมีการกำหนดภาษาของเอกสารในแท็ก <html> เช่น

<html lang="th">
  <!-- เนื้อหาของ HTML จะอยู่ในนี้ -->
</html>

lang="th" คือการระบุว่าภาษาหลักของเอกสารคือภาษาไทย