การจัดรูปแบบข้อความ
ทำข้อความเป็นตัวหนา ตัวเอียง และขีดเส้นใต้
การจัดรูปแบบข้อความ เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
การจัดรูปแบบข้อความ
ยินดีต้อนรับสู่บทเรียนถัดไปครับ วันนี้เราจะเรียนรู้วิธีจัดรูปแบบข้อความใน HTML เพื่อทำให้ข้อความเป็นตัวหนา ตัวเอียง ขีดเส้นใต้ และอื่น ๆ อีกมากมาย มาเริ่มกันเลยครับ!
ทำไมจึงต้องจัดรูปแบบข้อความ
การจัดรูปแบบข้อความช่วยให้คุณ:
- เน้นข้อมูลสำคัญ
- ทำให้หน้าเว็บอ่านง่ายขึ้น
- เพิ่มความน่าสนใจให้เนื้อหา
มาสำรวจวิธีต่าง ๆ ในการจัดรูปแบบข้อความใน HTML กันครับ!
การทำให้ข้อความเป็นตัวหนา
ใช้แท็ก <strong> หรือ <b> เพื่อทำให้ข้อความเป็นตัวหนา แท็กทั้งสองทำงานคล้ายกัน แต่ <strong> ใช้สำหรับข้อความสำคัญครับ
ตัวอย่าง:
<p>This is <strong>important</strong> text.</p>
<p>This is <b>bold</b> text.</p>
การทำให้ข้อความเป็นตัวเอียง
ใช้แท็ก <em> หรือ <i> เพื่อทำให้ข้อความเป็นตัวเอียง โดย <em> ใช้เพื่อเน้นข้อความ ส่วน <i> ใช้เพื่อการตกแต่งเท่านั้นครับ
ตัวอย่าง:
<p>This is <em>emphasized</em> text.</p>
<p>This is <i>italicized</i> text.</p>
การขีดเส้นใต้ข้อความ
ใช้แท็ก <u> เพื่อขีดเส้นใต้ข้อความครับ
ตัวอย่าง:
<p>This is <u>underlined</u> text.</p>
การขีดฆ่าข้อความ
ใช้แท็ก <del> หรือ <s> เพื่อแสดงข้อความที่ถูกขีดฆ่า วิธีนี้เหมาะสำหรับระบุว่าข้อความถูกลบหรือไม่ถูกต้องครับ
ตัวอย่าง:
<p>This is <del>deleted</del> text.</p>
<p>This is <s>strikethrough</s> text.</p>
การรวมการจัดรูปแบบ
คุณสามารถรวมแท็กการจัดรูปแบบหลายรายการเพื่อจัดสไตล์ข้อความในรูปแบบต่าง ๆ ได้ครับ
ตัวอย่าง:
<p>This is <strong><em>bold and italicized</em></strong> text.</p>
<p>This is <u><i>underlined and italicized</i></u> text.</p>
ลองทำด้วยตนเอง
มาสร้างหน้าเว็บที่มีข้อความจัดรูปแบบกันครับ ตัวอย่างมีดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<h1>Text Formatting Example</h1>
<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italicized</em> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <strong><em>bold and italicized</em></strong> text.</p>
</body>
</html>
ทำได้ยอดเยี่ยม
ขอแสดงความยินดีครับ คุณได้เรียนรู้วิธีจัดรูปแบบข้อความใน HTML โดยใช้ตัวหนา ตัวเอียง การขีดเส้นใต้ และสไตล์อื่น ๆ แล้ว การจัดรูปแบบข้อความช่วยเน้นเนื้อหาสำคัญและทำให้อ่านง่ายขึ้น ในบทเรียนถัดไป เราจะเรียนรู้แนวทางปฏิบัติที่ดีในการเขียน HTML ที่สะอาดและเป็นระเบียบ เตรียมพร้อมขัดเกลาทักษะการเขียนโค้ดของคุณกันครับ!
คำถามที่พบบ่อย
บทเรียน “การจัดรูปแบบข้อความ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดรูปแบบข้อความ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดรูปแบบข้อความ”
ทำข้อความเป็นตัวหนา ตัวเอียง และขีดเส้นใต้ คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดรูปแบบข้อความ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- รูปแบบภายในบรรทัด
- พื้นฐาน CSS
- สีและพื้นหลัง
- การจัดรูปแบบข้อความ